Skip to content

Commit 0ca411f

Browse files
phananphanan
authored
Migrate Themes page (#55)
1 parent e33bdc8 commit 0ca411f

File tree

9 files changed

+456
-4
lines changed

9 files changed

+456
-4
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"build": "vuepress build src"
1010
},
1111
"dependencies": {
12-
"axios": "^0.19.1"
12+
"axios": "^0.19.1",
13+
"showdown": "^1.9.1"
1314
}
1415
}

‎src/.vuepress/components/community/themes/index.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="themes">
3+
<theme-provider v-for="provider in providers" :key="provider.name" :provider="provider" />
4+
5+
<p>
6+
Want to feature your themes here?
7+
<a href="mailto:evan@vuejs.org?subject=Theme+affiliation">Contact us</a>!
8+
</p>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import providers from './theme-data'
14+
15+
export default {
16+
components: {
17+
ThemeProvider: () => import('./theme-provider')
18+
},
19+
20+
data: () => ({
21+
providers
22+
})
23+
}
24+
</script>

‎src/.vuepress/components/community/themes/theme-data.js

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
export default [
2+
{
3+
name: 'Creative Tim',
4+
description: `With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.`,
5+
seeMoreUrl: 'https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187',
6+
products: [
7+
{
8+
name: 'Vue Argon Design System',
9+
price: 0,
10+
description: 'Free Vue.js Design System',
11+
url: 'https://www.creative-tim.com/product/vue-argon-design-system?affiliate_id=116187',
12+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-argon-design-system/vue-argon-design-system.jpg'
13+
},
14+
{
15+
name: 'Vue Black Dashboard Pro',
16+
price: 59,
17+
description: 'Premium Vue.js Admin Template',
18+
url: 'https://www.creative-tim.com/product/vue-black-dashboard-pro?affiliate_id=116187',
19+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
20+
},
21+
{
22+
name: 'Vue Paper Dashboard 2 Pro',
23+
price: 59,
24+
description: 'Premium Vue.js Admin Template',
25+
url: 'https://www.creative-tim.com/product/vue-paper-dashboard-2-pro?affiliate_id=116187',
26+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
27+
},
28+
{
29+
name: 'Vue Material Kit',
30+
price: 0,
31+
description: 'Free Vue.js UI Kit',
32+
url: 'https://www.creative-tim.com/product/vue-material-kit?affiliate_id=116187',
33+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit/vue-material-kit.jpg'
34+
},
35+
{
36+
name: 'Vue Black Dashboard',
37+
price: 0,
38+
description: 'Free Vue.js Admin Template',
39+
url: 'https://www.creative-tim.com/product/vue-black-dashboard?affiliate_id=116187',
40+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard/vue-black-dashboard.jpg'
41+
},
42+
{
43+
name: 'Vue Now UI Kit Pro',
44+
price: 79,
45+
description: 'Premium Vue.js UI Kit',
46+
url: 'https://www.creative-tim.com/product/vue-now-ui-kit-pro?affiliate_id=116187',
47+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit-pro/vue-now-ui-kit-pro.jpg'
48+
},
49+
{
50+
name: 'Vue Now UI Dashboard Pro',
51+
price: 59,
52+
description: 'Premium Vue.js Admin Template',
53+
url: 'https://www.creative-tim.com/product/vue-now-ui-dashboard-pro?affiliate_id=116187',
54+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-dashboard-pro/vue-now-ui-dashboard-pro.jpg'
55+
},
56+
{
57+
name: 'Vue Now UI Kit',
58+
price: 0,
59+
description: 'Free Vue.js UI Kit',
60+
url: 'https://www.creative-tim.com/product/vue-now-ui-kit?affiliate_id=116187',
61+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit/vue-now-ui-kit.jpg'
62+
},
63+
{
64+
name: 'Vue Light Bootstrap Dashboard Pro',
65+
price: 49,
66+
description: 'Premium Vue.js Admin Template',
67+
url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro?affiliate_id=116187',
68+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard-pro/vue-light-bootstrap-dashboard-pro.jpg'
69+
},
70+
{
71+
name: 'Vue Material Dashboard Pro',
72+
price: 59,
73+
description: 'Premium Vue.js Admin Template',
74+
url: 'https://www.creative-tim.com/product/vue-material-dashboard-pro?affiliate_id=116187',
75+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-dashboard-pro/vue-material-dashboard-pro.jpg'
76+
},
77+
{
78+
name: 'Vue Material Kit Pro',
79+
price: 89,
80+
description: 'Premium Vue.js UI Kit',
81+
url: 'https://www.creative-tim.com/product/vue-material-kit-pro?affiliate_id=116187',
82+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit-pro/vue-material-kit-pro.jpg'
83+
},
84+
{
85+
name: 'Vue Light Bootstrap Dashboard',
86+
price: 0,
87+
description: 'Free Vue.js Admin Template',
88+
url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?affiliate_id=116187',
89+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard/vue-light-bootstrap-dashboard.jpg'
90+
}
91+
]
92+
},
93+
{
94+
name: "MDBootstrap",
95+
description: `Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.`,
96+
seeMoreUrl: "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
97+
products: [
98+
{
99+
url: "https://mdbootstrap.com/products/vue-ui-kit?utm_ref_id=82665",
100+
name: "Vue Material Bootstrap Pro",
101+
description: "Premium Vue.js UI Kit",
102+
image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
103+
price: 99
104+
},
105+
{
106+
url: "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
107+
name: "Vue Material Bootstrap Kit",
108+
description: "Free Vue.js UI Kit",
109+
image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
110+
price: 0
111+
},
112+
{
113+
url: "https://mdbootstrap.com/products/vue-admin-dashboard?utm_ref_id=82665",
114+
name: " Vue Admin Bootstrap Pro",
115+
description: "Premium Vue.js Templates Pack",
116+
image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
117+
price: 79
118+
},
119+
{
120+
url: "https://mdbootstrap.com/freebies/vue/admin-dashboard?utm_ref_id=82665",
121+
name: "Vue Admin Bootstrap",
122+
description: "Free Vue.js Templates Pack",
123+
image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
124+
price: 0
125+
}
126+
]
127+
},
128+
{
129+
name: 'PrimeVue',
130+
description: `The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 50 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look&feel that suits you best.`,
131+
seeMoreUrl: 'https://www.primefaces.org/primevue/#/?af_id=4218',
132+
products: [
133+
{
134+
name: 'Sapphire',
135+
price: 79,
136+
description: 'Material Design Admin Template',
137+
url: 'https://www.primefaces.org/layouts/sapphire-vue?af_id=4218',
138+
image: 'https://www.primefaces.org/vue-templates/sapphire.jpg'
139+
},
140+
{
141+
name: 'Avalon',
142+
price: 79,
143+
description: 'Bootstrap Inspired Admin Template',
144+
url: 'https://www.primefaces.org/layouts/avalon-vue?af_id=4218',
145+
image: 'https://www.primefaces.org/vue-templates/avalon.jpg'
146+
},
147+
{
148+
name: 'Serenity',
149+
price: 79,
150+
description: 'Material Design Admin Template',
151+
url: 'https://www.primefaces.org/layouts/serenity-vue?af_id=4218',
152+
image: 'https://www.primefaces.org/vue-templates/serenity.jpg'
153+
},
154+
{
155+
name: 'Apollo',
156+
price: 79,
157+
description: 'Admin Template with a Dark Mode',
158+
url: 'https://www.primefaces.org/layouts/apollo-vue?af_id=4218',
159+
image: 'https://www.primefaces.org/vue-templates/apollo.jpg'
160+
},
161+
{
162+
name: 'Babylon',
163+
price: 79,
164+
description: 'Admin Template with Extensive Options',
165+
url: 'https://www.primefaces.org/layouts/babylon-vue?af_id=4218',
166+
image: 'https://www.primefaces.org/vue-templates/babylon.jpg'
167+
},
168+
{
169+
name: 'Roma',
170+
price: 59,
171+
description: 'Admin Template with a Clean Design System',
172+
url: 'https://www.primefaces.org/layouts/roma-vue?af_id=4218',
173+
image: 'https://www.primefaces.org/vue-templates/roma.jpg'
174+
},
175+
{
176+
name: 'Sigma',
177+
price: 0,
178+
description: 'Free Admin Template',
179+
url: 'https://www.primefaces.org/sigma-vue/#/?af_id=4218',
180+
image: 'https://www.primefaces.org/vue-templates/sigma.jpg'
181+
}
182+
]
183+
}
184+
]

‎src/.vuepress/components/community/themes/theme-item.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div class="item-preview">
3+
<a class="item-preview-img" :href="theme.url" rel="sponsored">
4+
<img :src="theme.image" :alt="`${theme.name} - ${theme.description}`" loading="lazy">
5+
</a>
6+
<div class="item-preview-name-container">
7+
<h3 class="item-preview-name" :class="{'free': theme.price === 0}">
8+
{{theme.name}}
9+
</h3>
10+
<b v-if="theme.price" class="item-preview-price">${{theme.price}}</b>
11+
</div>
12+
<div class="item-preview-description">{{theme.description}}</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
props: {
19+
theme: {
20+
type: Object,
21+
required: true
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
@import "../../../styles/_settings";
29+
30+
.item-preview {
31+
width: 290px;
32+
margin-bottom: 25px;
33+
34+
@media screen and (max-width: 1300px) {
35+
justify-content: center;
36+
width: 380px;
37+
}
38+
39+
&-img {
40+
transition: .15s box-shadow, .15s transform;
41+
border-radius: .5rem;
42+
box-shadow: 0 2rem 1.5rem -1.5rem rgba(33,37,41,.15), 0 0 1.5rem 0.5rem rgba(33,37,41,.05);
43+
overflow: hidden;
44+
display: block;
45+
46+
&:hover {
47+
transform: translateY(-0.25rem);
48+
box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .5rem rgba(33,37,41,.05);
49+
}
50+
}
51+
52+
img {
53+
max-width: 100%;
54+
height: auto;
55+
border-radius: .5rem;
56+
vertical-align: middle;
57+
border-style: none;
58+
}
59+
60+
&-name-container {
61+
display: flex;
62+
justify-content: space-between;
63+
align-items: center;
64+
}
65+
66+
&-name {
67+
margin-top: 1rem;
68+
margin-bottom: .3rem;
69+
font-size: 1rem;
70+
line-height: 1.5;
71+
72+
&.free::after {
73+
content: "FREE";
74+
display: inline-block;
75+
font-size: 10px;
76+
font-weight: 600;
77+
color: #fff;
78+
background-color: $green;
79+
line-height: 14px;
80+
padding: 0 4px;
81+
border-radius: 3px;
82+
margin-left: 5px;
83+
vertical-align: middle;
84+
position: relative;
85+
top: -1px;
86+
}
87+
}
88+
89+
&-price {
90+
margin-top: .7rem
91+
}
92+
93+
&-description {
94+
font-size: .9rem
95+
}
96+
}
97+
</style>

‎src/.vuepress/components/community/themes/theme-provider.vue

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<section>
3+
<h2 :id="provider.name">{{ provider.name }}</h2>
4+
5+
<div class="tip custom-block description" v-html="description"/>
6+
7+
<div class="themes-grid">
8+
<ThemeItem v-for="theme in provider.products" :key="theme.url" :theme="theme"/>
9+
</div>
10+
11+
<div class="see-more-container">
12+
<a :href="provider.seeMoreUrl" class="see-more-button">
13+
See More Themes from {{ provider.name }}
14+
</a>
15+
</div>
16+
</section>
17+
</template>
18+
19+
<script>
20+
import showdown from 'showdown'
21+
22+
export default {
23+
props: {
24+
provider: {
25+
type: Object,
26+
required: true
27+
}
28+
},
29+
30+
components: {
31+
ThemeItem: () => import('./theme-item')
32+
},
33+
34+
computed: {
35+
description: function () {
36+
return (new showdown.Converter()).makeHtml(this.provider.description)
37+
}
38+
}
39+
}
40+
</script>
41+
42+
<style lang="scss" scoped>
43+
@import "../../../styles/_settings";
44+
45+
.themes-grid {
46+
display: flex;
47+
flex-wrap: wrap;
48+
justify-content: space-between;
49+
50+
@media screen and (max-width: 1300px) {
51+
justify-content: center;
52+
}
53+
}
54+
55+
.description {
56+
margin: 1.5em 0;
57+
}
58+
59+
.see-more {
60+
&-container {
61+
text-align: center;
62+
width: 100%;
63+
}
64+
65+
&-button {
66+
color: $green;
67+
display: inline-block;
68+
width: auto;
69+
border-radius: 2em;
70+
transition: all 0.15s ease;
71+
border: 1px solid $green;
72+
padding: 12px 24px;
73+
text-decoration: none !important;
74+
75+
&:hover {
76+
background: $green;
77+
color: #fff;
78+
}
79+
}
80+
}
81+
</style>

0 commit comments

Comments
 (0)