Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1af924b

Browse files
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);
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>
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>
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+
}
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)

AltStyle によって変換されたページ (->オリジナル) /