Skip to content

Commit 2b1d5ce

Browse files
gmsagmsa
committed
vuepress update, added docsfold banner
1 parent ed51f94 commit 2b1d5ce

File tree

4 files changed

+265
-129
lines changed

4 files changed

+265
-129
lines changed

‎website/docs/.vuepress/components/HomepageGrid.vue

+128-48
Original file line numberDiff line numberDiff line change
@@ -15,62 +15,72 @@
1515
:h="item.h"
1616
:i="item.i"
1717
>
18-
<div v-if="item.i === '2'" style="width: 90%;margin-left: auto;margin-right: auto;margin-top: 5px;height: 90%;">
19-
<iframe src="https://github.com/sponsors/jbaysolutions/card" title="Sponsor jbaysolutions" height="100%" width="100%" style="border: 0;"></iframe>
20-
<!-- <iframe src="https://github.com/sponsors/jbaysolutions/button" title="Sponsor jbaysolutions" height="35" width="100%" style="border: 0; margin-left:auto;margin-right: auto;"></iframe>-->
18+
<div v-if="item.i === '2'" class="docsfold-features">
19+
<img src="assets/img/docsfold-logo-sm.png" alt="DocsFold" style="max-width: 100%;"/>
20+
<div class="content">
21+
<h2>API to generate image and PDF documents</h2>
22+
<div style="padding:10px 0;">
23+
24+
<a href="https://www.docsfold.com?utm_source=vue-grid-layout-website&utm_medium=web&utm_campaign=vue-grid-layout" target="_blank" class="btn-read-more">Get started for FREE</a>
25+
</div>
26+
</div>
2127
</div>
22-
<span v-else class="text">{{itemTitle(item)}}</span>
28+
<!-- <div v-if="item.i === '999'" style="width: 90%;margin-left: auto;margin-right: auto;margin-top: 5px;height: 90%;">
29+
<iframe src="https://github.com/sponsors/jbaysolutions/card" title="Sponsor jbaysolutions" height="100%" width="100%" style="border: 0;"></iframe>
30+
&lt;!&ndash; <iframe src="https://github.com/sponsors/jbaysolutions/button" title="Sponsor jbaysolutions" height="35" width="100%" style="border: 0; margin-left:auto;margin-right: auto;"></iframe>&ndash;&gt;
31+
</div>-->
32+
<span v-else class="text">{{ itemTitle(item) }}</span>
2333
</grid-item>
2434
</grid-layout>
2535
</template>
2636

2737
<script>
28-
import { GridLayout, GridItem } from "vue-grid-layout"
38+
import {GridLayout, GridItem} from "vue-grid-layout"
2939
3040
export default {
31-
name: "HomepageGrid",
32-
components: {
33-
GridLayout,
34-
GridItem
35-
},
36-
data() {
37-
return {
38-
layout: [
39-
{"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
40-
{"x":10,"y":0,"w":2,"h":4,"i":"1", static: true},
41-
{"x":2,"y":0,"w":8,"h":4,"i":"2", static: false},
42-
{"x":6,"y":4,"w":2,"h":3,"i":"3", static: false},
43-
{"x":8,"y":4,"w":2,"h":3,"i":"4", static: false},
44-
{"x":10,"y":4,"w":2,"h":3,"i":"5", static: false},
45-
{"x":0,"y":2,"w":2,"h":5,"i":"6", static: false},
46-
{"x":2,"y":4,"w":2,"h":5,"i":"7", static: false},
47-
{"x":4,"y":4,"w":2,"h":5,"i":"8", static: false},
48-
{"x":6,"y":7,"w":2,"h":4,"i":"9", static: true},
49-
{"x":8,"y":7,"w":2,"h":4,"i":"10", static: false},
50-
{"x":10,"y":7,"w":2,"h":4,"i":"11", static: false},
51-
{"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
52-
{"x":2,"y":11,"w":2,"h":5,"i":"13", static: false},
53-
{"x":4,"y":9,"w":2,"h":4,"i":"14", static: false},
54-
{"x":6,"y":11,"w":2,"h":4,"i":"15", static: false},
55-
{"x":8,"y":11,"w":2,"h":5,"i":"16", static: false},
56-
{"x":10,"y":11,"w":2,"h":2,"i":"17", static: false},
57-
{"x":0,"y":7,"w":2,"h":3,"i":"18", static: false},
58-
{"x":2,"y":9,"w":2,"h":2,"i":"19", static: false}
59-
],
60-
draggable: true,
61-
resizable: true,
62-
index: 0
63-
}
64-
},
65-
methods: {
66-
itemTitle(item) {
67-
let result = item.i;
68-
if (item.static) {
69-
result += " - Static";
70-
}
71-
return result;
72-
}
73-
}
41+
name: "HomepageGrid",
42+
components: {
43+
GridLayout,
44+
GridItem
45+
},
46+
data() {
47+
return {
48+
layout: [
49+
{"x": 0, "y": 0, "w": 2, "h": 2, "i": "0", static: false},
50+
{"x": 10, "y": 0, "w": 2, "h": 4, "i": "1", static: true},
51+
{"x": 2, "y": 0, "w": 8, "h": 4, "i": "2", static: false},
52+
{"x": 6, "y": 4, "w": 2, "h": 3, "i": "3", static: false},
53+
{"x": 8, "y": 4, "w": 2, "h": 3, "i": "4", static: false},
54+
{"x": 10, "y": 4, "w": 2, "h": 3, "i": "5", static: false},
55+
{"x": 0, "y": 2, "w": 2, "h": 5, "i": "6", static: false},
56+
{"x": 2, "y": 4, "w": 2, "h": 5, "i": "7", static: false},
57+
{"x": 4, "y": 4, "w": 2, "h": 5, "i": "8", static: false},
58+
{"x": 6, "y": 7, "w": 2, "h": 4, "i": "9", static: true},
59+
{"x": 8, "y": 7, "w": 2, "h": 4, "i": "10", static: false},
60+
{"x": 10, "y": 7, "w": 2, "h": 4, "i": "11", static: false},
61+
{"x": 0, "y": 10, "w": 2, "h": 5, "i": "12", static: false},
62+
{"x": 2, "y": 11, "w": 2, "h": 5, "i": "13", static: false},
63+
{"x": 4, "y": 9, "w": 2, "h": 4, "i": "14", static: false},
64+
{"x": 6, "y": 11, "w": 2, "h": 4, "i": "15", static: false},
65+
{"x": 8, "y": 11, "w": 2, "h": 5, "i": "16", static: false},
66+
{"x": 10, "y": 11, "w": 2, "h": 2, "i": "17", static: false},
67+
{"x": 0, "y": 7, "w": 2, "h": 3, "i": "18", static: false},
68+
{"x": 2, "y": 9, "w": 2, "h": 2, "i": "19", static: false}
69+
],
70+
draggable: true,
71+
resizable: true,
72+
index: 0
73+
}
74+
},
75+
methods: {
76+
itemTitle(item) {
77+
let result = item.i;
78+
if (item.static) {
79+
result += " - Static";
80+
}
81+
return result;
82+
}
83+
}
7484
}
7585
</script>
7686

@@ -134,4 +144,74 @@ export default {
134144
}
135145
136146
147+
.docsfold-features {
148+
width: 90%;
149+
margin-left: auto;
150+
margin-right: auto;
151+
/*margin-top: 5px;*/
152+
height: 90%;
153+
/*text-align: center!important;*/
154+
display: flex;
155+
flex-wrap: wrap;
156+
justify-content: center;
157+
}
158+
159+
.docsfold-features img {
160+
width: 30%;
161+
height: auto;
162+
object-fit: contain;
163+
}
164+
165+
.docsfold-features .content {
166+
width: 50%;
167+
height: 100%;
168+
display: flex;
169+
flex-direction: column;
170+
justify-content: center;
171+
flex-grow: 1;
172+
align-items: center;
173+
padding: 10px;
174+
}
175+
176+
.docsfold-features h2 {
177+
font-size: 18px;
178+
margin-bottom: 10px;
179+
border:0;
180+
}
181+
182+
.docsfold-features .btn-read-more:hover {
183+
background: #4104f1;
184+
}
185+
186+
.docsfold-features .btn-read-more {
187+
line-height: 0;
188+
/*padding: 15px 40px;*/
189+
padding: 10px 20px;
190+
border-radius: 4px;
191+
transition: 0.5s;
192+
color: #fff;
193+
background: #4154f1;
194+
box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
195+
/*cursor: pointer;*/
196+
}
197+
198+
.docsfold-features .btn-read-more span {
199+
font-family: "Nunito", sans-serif;
200+
font-weight: 600;
201+
font-size: 16px;
202+
letter-spacing: 1px;
203+
}
204+
205+
.docsfold-features .btn-read-more i {
206+
margin-left: 5px;
207+
font-size: 18px !important;
208+
transition: 0.3s;
209+
color: #fff !important;
210+
}
211+
212+
.docsfold-features .btn-read-more:hover i {
213+
transform: translateX(5px);
214+
}
215+
216+
137217
</style>

‎website/docs/.vuepress/public/assets/img/docsfold-logo-sm.png

4.26 KB
Loading

‎website/package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@
66
"license": "MIT",
77
"private": false,
88
"scripts": {
9-
"dev": "vuepress dev docs",
9+
"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress dev docs",
1010
"build": "vuepress build docs",
11-
"serve": "vuepress serve docs"
11+
"serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress serve docs"
1212
},
1313
"dependencies": {
1414
},
1515
"devDependencies": {
16-
"@vuepress/plugin-back-to-top": "^1.6.0",
17-
"@vuepress/plugin-google-analytics": "^1.6.0",
16+
"cross-env": "^7.0.3",
17+
"@vuepress/plugin-back-to-top": "^1.9.9",
18+
"@vuepress/plugin-google-analytics": "^1.9.9",
1819
"vue-grid-layout": "^2.4.0",
1920
"vuepress-plugin-seo": "^0.1.4",
2021
"vuepress-plugin-sitemap": "^2.3.1",
21-
"vuepress": "^1.7.1",
22+
"vuepress": "^1.9.9",
2223
"vuepress-plugin-serve": "^2.0.4"
2324
},
2425
"resolutions": {

0 commit comments

Comments
 (0)