Skip to content

Commit 1af924b

Browse files
kiakingkiaking
committed
wip: working on
1 parent d50dbf7 commit 1af924b

File tree

7 files changed

+337
-8
lines changed

7 files changed

+337
-8
lines changed

‎src/.vitepress/theme/components/NewsLetter.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import { VTLink } from '@vue/theme'
5454

5555
<style scoped>
5656
.NewsLetter {
57-
border-top: 1px solid transparent;
57+
border-top: 1px solid var(--vt-c-divider-light);
5858
border-bottom: 1px solid var(--vt-c-divider-light);
5959
padding: 32px 24px;
6060
background: var(--vt-c-bg-soft);

‎src/.vitepress/theme/components/SponsorBoard.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import { Sponsor } from '../data/Sponsor'
3+
4+
defineProps<{
5+
sponsors: Sponsor[]
6+
}>()
7+
</script>
8+
9+
<template>
10+
<div class="SponsorBoard">
11+
<div v-for="sponsor in sponsors" :key="sponsor.name" class="item">
12+
<a class="link" :href="sponsor.url" target="_blank">
13+
<img class="image" :src="`/images/sponsors/${sponsor.img}`" :alt="sponsor.name">
14+
</a>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<style scoped>
20+
</style>

‎src/.vitepress/theme/components/SponsorSection.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import sponsors from '../data/sponsors.json'
3+
import SponsorSectionHero from './SponsorSectionHero.vue'
4+
import SponsorBoard from './SponsorBoard.vue'
5+
</script>
6+
7+
<template>
8+
<section class="SponsorSection" id="sponsors">
9+
<SponsorSectionHero>
10+
<template #lead>
11+
Sponsors
12+
</template>
13+
<template #title>
14+
Trusted and loved by progressive companies all over the world.
15+
</template>
16+
</SponsorSectionHero>
17+
18+
<section class="section">
19+
<SponsorBoard :sponsors="sponsors.platinum" />
20+
</section>
21+
</section>
22+
</template>
23+
24+
<style scoped>
25+
.SponsorSection {
26+
margin: 0;
27+
border-top: 1px solid transparent;
28+
padding: 64px 0;
29+
background-color: var(--vt-c-bg-soft);
30+
transition: background-color 0.5s;
31+
}
32+
33+
.dark .SponsorSection {
34+
border-top-color: var(--vt-c-divider-light);
35+
background-color: var(--vt-c-bg);
36+
}
37+
</style>

‎src/.vitepress/theme/components/SponsorSectionHero.vue

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div class="SponsorSectionHero">
3+
<div class="container">
4+
<p class="lead">
5+
<slot name="lead" />
6+
</p>
7+
8+
<div class="main">
9+
<h2 class="title">
10+
<slot name="title" />
11+
</h2>
12+
13+
<div class="action">
14+
<a class="action-link" href="/sponsor/">
15+
Become a Sponsor
16+
</a>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<style scoped>
24+
.SponsorSectionHero {
25+
padding: 0 24px;
26+
}
27+
28+
@media (min-width: 768px) {
29+
.SponsorSectionHero {
30+
padding: 0 32px;
31+
}
32+
}
33+
34+
.container {
35+
margin: 0 auto;
36+
max-width: 960px;
37+
}
38+
39+
@media (min-width: 640px) {
40+
.main {
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
}
45+
}
46+
47+
.lead {
48+
font-size: 16px;
49+
font-weight: 500;
50+
color: var(--vt-c-brand);
51+
}
52+
53+
.title {
54+
padding-top: 4px;
55+
max-width: 420px;
56+
line-height: 28px;
57+
font-size: 20px;
58+
font-weight: 500;
59+
}
60+
61+
.action {
62+
padding-top: 16px;
63+
transform: translateX(-4px);
64+
}
65+
66+
@media (min-width: 640px) {
67+
.action {
68+
padding-top: 0;
69+
transform: translateX(0);
70+
}
71+
}
72+
73+
.action-link {
74+
display: inline-block;
75+
border: 1px solid var(--vt-c-brand);
76+
border-radius: 20px;
77+
padding: 7px 16px;
78+
font-size: 14px;
79+
font-weight: 500;
80+
color: var(--vt-c-brand);
81+
transition: border-color 0.25s, color 0.25s;
82+
}
83+
84+
.action-link:hover {
85+
border-color: var(--vt-c-brand-dark);
86+
color: var(--vt-c-brand-dark);
87+
}
88+
</style>

‎src/.vitepress/theme/data/Sponsor.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface Sponsor {
2+
url: string
3+
img: string
4+
name: string
5+
}

‎src/.vitepress/theme/data/sponsors.json

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
{
2+
"platinum": [
3+
{
4+
"url": "https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1",
5+
"img": "vueschool.png",
6+
"name": "VueSchool"
7+
},
8+
{
9+
"url": "https://vehikl.com/",
10+
"img": "vehikl.png",
11+
"name": "Vehikl"
12+
},
13+
{
14+
"url": "https://retool.com/?utm_source=sponsor&utm_campaign=vue",
15+
"img": "retool.png",
16+
"name": "Retool"
17+
},
18+
{
19+
"url": "https://passionatepeople.io/",
20+
"img": "passionate_people.png",
21+
"name": "Passionate People"
22+
},
23+
{
24+
"url": "https://www.storyblok.com",
25+
"img": "storyblok.svg",
26+
"name": "Storyblok"
27+
},
28+
{
29+
"url": "https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs",
30+
"img": "ionic.png",
31+
"name": "Ionic"
32+
}
33+
],
34+
"gold_sponsors": [
35+
{
36+
"url": "https://www.vuemastery.com/",
37+
"img": "vuemastery.png",
38+
"name": "VueMastery"
39+
},
40+
{
41+
"url": "https://laravel.com",
42+
"img": "laravel.png",
43+
"name": "Laravel"
44+
},
45+
{
46+
"url": "https://htmlburger.com",
47+
"img": "html_burger.png",
48+
"name": "HTML Burger"
49+
},
50+
{
51+
"url": "https://www.frontenddeveloperlove.com/",
52+
"img": "frontendlove.png",
53+
"name": "FrontendLove"
54+
},
55+
{
56+
"url": "https://onsen.io/vue/",
57+
"img": "onsen_ui.png",
58+
"name": "Onsen UI"
59+
},
60+
{
61+
"url": "https://neds.com.au/",
62+
"img": "neds.png",
63+
"name": "Neds"
64+
},
65+
{
66+
"url": "https://vuejobs.com/?ref=vuejs",
67+
"img": "vuejobs.png",
68+
"name": "VueJobs"
69+
},
70+
{
71+
"url": "https://tidelift.com/subscription/npm/vue",
72+
"img": "tidelift.png",
73+
"name": "Tidelift"
74+
},
75+
{
76+
"url": "https://www.firesticktricks.com/",
77+
"img": "firestick_tricks.png",
78+
"name": "Firestick Tricks"
79+
},
80+
{
81+
"url": "https://intygrate.com/",
82+
"img": "intygrate.png",
83+
"name": "Intygrate"
84+
},
85+
{
86+
"url": "http://en.shopware.com/",
87+
"img": "shopware_ag.png",
88+
"name": "shopware AG"
89+
},
90+
{
91+
"url": "https://www.vpnranks.com/",
92+
"img": "vpnranks.png",
93+
"name": "VPNRanks"
94+
},
95+
{
96+
"url": "https://www.bacancytechnology.com",
97+
"img": "bacancy_technology.png",
98+
"name": "Bacancy Technology"
99+
},
100+
{
101+
"url": "https://www.bestvpn.co/",
102+
"img": "bestvpn_co.png",
103+
"name": "BestVPN.co"
104+
},
105+
{
106+
"url": "https://www.y8.com/",
107+
"img": "y8.png",
108+
"name": "Y8"
109+
},
110+
{
111+
"url": "https://js.devexpress.com/",
112+
"img": "devexpress.png",
113+
"name": "DevExpress"
114+
},
115+
{
116+
"url": "https://fastcoding.jp/javascript/ ",
117+
"img": "fastcoding_inc.svg",
118+
"name": "FASTCODING Inc"
119+
},
120+
{
121+
"url": "https://usave.co.uk/utilities/broadband",
122+
"img": "usave.png",
123+
"name": "usave"
124+
},
125+
{
126+
"url": "https://www.foo.software",
127+
"img": "foo.png",
128+
"name": "Foo"
129+
},
130+
{
131+
"url": "https://flatlogic.com/templates",
132+
"img": "flatlogic_templates.svg",
133+
"name": "Flatlogic Templates"
134+
},
135+
{
136+
"url": "http://moovweb.com/",
137+
"img": "moovweb.png",
138+
"name": "Moovweb"
139+
}
140+
],
141+
"silver_sponsors": [
142+
{
143+
"url": "https://roadster.com",
144+
"img": "roadster.png",
145+
"name": "Roadster"
146+
},
147+
{
148+
"url": "https://www.inkoop.io",
149+
"img": "inkoop.png",
150+
"name": "Inkoop"
151+
},
152+
{
153+
"url": "https://www.thecasinodb.com",
154+
"img": "isolutions_uk_limited.png",
155+
"name": "iSolutions UK Limited"
156+
}
157+
],
158+
"bronze_sponsors": [
159+
{
160+
"url": "https://www.accelebrate.com/",
161+
"img": "accelebrate.png",
162+
"name": "Accelebrate"
163+
},
164+
{
165+
"url": "https://polyglotengineer.com/derek.pollard",
166+
"img": "derek_pollard.png",
167+
"name": "Derek Pollard"
168+
},
169+
{
170+
"url": "https://www.earthlink.ro",
171+
"img": "earthlink.png",
172+
"name": "Earthlink"
173+
},
174+
{
175+
"url": "https://www.webucator.com",
176+
"img": "webucator.png",
177+
"name": "Webucator"
178+
}
179+
]
180+
}

‎src/index.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ page: true
33
---
44

55
<script setup>
6+
import SponsorSection from './.vitepress/theme/components/SponsorSection.vue'
67
import NewsLetter from './.vitepress/theme/components/NewsLetter.vue'
78
</script>
89

@@ -42,17 +43,15 @@ import NewsLetter from './.vitepress/theme/components/NewsLetter.vue'
4243
</div>
4344
</section>
4445

45-
<section id="sponsors">
46-
<!-- TODO -->
47-
</section>
46+
<SponsorSection />
4847

49-
<section id="ways-to-use">
48+
<!-- <section id="ways-to-use"> -->
5049
<!-- TODO show toggleable example between CDN vs. SFC usage -->
51-
</section>
50+
<!-- </section> -->
5251

53-
<section id="tooling">
52+
<!-- <section id="tooling"> -->
5453
<!-- TODO show tooling screenshots -->
55-
</section>
54+
<!-- </section> -->
5655

5756
<NewsLetter />
5857

0 commit comments

Comments
 (0)