Skip to content

Commit 47ffa82

Browse files
tolauwaetolauwae
committed
Make custom homepage
1 parent e581d98 commit 47ffa82

16 files changed

Lines changed: 379 additions & 37 deletions

File tree

warduino/components/citation.vue renamed to warduino/.vitepress/components/citation.vue

File renamed without changes.

‎warduino/.vitepress/components/feature.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup lang='ts'>
2+
import {withBase} from 'vitepress';
3+
4+
defineProps<{
5+
header: string
6+
icon?: string
7+
tagline?: string
8+
link?: string
9+
}>()
10+
</script>
11+
12+
<template>
13+
<component
14+
:is="'a'"
15+
class="VPLink"
16+
:class="{
17+
link: link,
18+
'no-icon': true
19+
}"
20+
:href="link ? withBase(link) : undefined"
21+
>
22+
<article>
23+
<div class="heading">
24+
<div class="icon">
25+
<span v-if="icon" v-html="icon" class="material-symbols-rounded"></span>
26+
</div>
27+
<div>
28+
<h2 v-html="header" class="header"></h2>
29+
</div>
30+
</div>
31+
<p v-if="tagline" v-html="tagline" class="details"></p>
32+
</article>
33+
</component>
34+
</template>
35+
36+
<style scoped>
37+
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
38+
39+
/* features */
40+
article {
41+
cursor: pointer;
42+
color: var(--vp-c-text-2);
43+
background-color: var(--vp-c-bg-soft);
44+
border: 1px solid var(--vp-c-bg-soft);
45+
border-radius: 12px;
46+
height: 100%;
47+
padding: 24px;
48+
transition: color .25s, background-color .25s;
49+
}
50+
51+
.heading {
52+
display: flex;
53+
align-items: center;
54+
}
55+
56+
.icon {
57+
box-sizing: border-box;
58+
margin-right: 8px;
59+
margin-top: 5px;
60+
}
61+
62+
.icon > span {
63+
line-height: 24px;
64+
letter-spacing: -0.02em;
65+
66+
}
67+
68+
.header {
69+
margin: 0;
70+
padding: 0;
71+
letter-spacing: -0.02em;
72+
line-height: 24px;
73+
font-size: 18px;
74+
font-weight: 600;
75+
}
76+
77+
.details {
78+
padding-top: 8px;
79+
line-height: 24px;
80+
font-size: 14px;
81+
font-weight: 500;
82+
color: var(--vp-c-text-2);
83+
}
84+
85+
article:hover {
86+
background-color: var(--vp-c-bg-soft-up);
87+
}
88+
89+
article:hover > * {
90+
color: var(--vp-c-brand);
91+
}
92+
</style>

‎warduino/.vitepress/components/home.vue‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
<script setup lang="ts">
2+
import {useData} from 'vitepress'
3+
import Feature from "./feature.vue";
4+
5+
const {frontmatter: fm} = useData()
6+
</script>
7+
8+
<template>
9+
<div class="home">
10+
11+
<!-- hero -->
12+
<div class="hero">
13+
<div class="container">
14+
<div class="main">
15+
<h1 v-if="fm.hero.name" class="name">
16+
<span v-html="fm.hero.name" class="clip"></span>
17+
</h1>
18+
<p v-if="fm.hero.text" v-html="fm.hero.text" class="text"></p>
19+
<p v-if="fm.hero.tagline" v-html="fm.hero.tagline" class="tagline"></p>
20+
</div>
21+
</div>
22+
</div>
23+
24+
<!-- features -->
25+
<div class="features">
26+
<div class="container">
27+
<div class="grid column-3">
28+
<div class="item">
29+
<feature icon="rocket_launch"
30+
header="Get started"
31+
tagline="Start developing programs with WARDuino."
32+
link="/guide/get-started"/>
33+
</div>
34+
<div class="item">
35+
<feature icon="terminal"
36+
header="IDE support"
37+
tagline="Manual for the WARDuino VS Code plugin."
38+
link="/guide/plugin"/>
39+
</div>
40+
<div class="item">
41+
<feature icon="check_box"
42+
header="Testing"
43+
tagline="Get started with the Latch testing framework."
44+
link="/guide/latch"/>
45+
</div>
46+
<div class="item">
47+
<feature icon="school"
48+
header="Examples & Tutorials"
49+
tagline="A selection of examples to get you started with WARDuino."
50+
link="/guide/examples/"/>
51+
</div>
52+
<div class="item">
53+
<feature icon="menu_book"
54+
header="Developer's guide"
55+
tagline="Documentation of the WARDuino virtual machine implementation."
56+
link="/reference/"/>
57+
</div>
58+
<div class="item">
59+
<feature icon="diversity_3"
60+
header="Research"
61+
tagline="Research articles published around the WARDuino project."
62+
link="/articles/"/>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<Content/>
69+
</div>
70+
</template>
71+
72+
<style scoped>
73+
/* features */
74+
.home {
75+
padding-bottom: 96px;
76+
}
77+
78+
@media (min-width: 768px) {
79+
.home {
80+
padding-bottom: 128px;
81+
}
82+
}
83+
84+
/* hero & features */
85+
.hero {
86+
margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
87+
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
88+
}
89+
90+
.features {
91+
padding: 0 24px;
92+
}
93+
94+
@media (min-width: 640px) {
95+
.hero {
96+
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
97+
}
98+
99+
.features {
100+
padding: 0 48px;
101+
}
102+
}
103+
104+
@media (min-width: 960px) {
105+
.hero {
106+
padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
107+
}
108+
109+
.features {
110+
padding: 0 64px;
111+
}
112+
}
113+
114+
.name,
115+
.text {
116+
max-width: 392px;
117+
letter-spacing: -0.4px;
118+
line-height: 40px;
119+
font-size: 32px;
120+
font-weight: 700;
121+
white-space: pre-wrap;
122+
}
123+
124+
.VPHero.has-image .name,
125+
.VPHero.has-image .text {
126+
margin: 0 auto;
127+
}
128+
129+
/* hero text */
130+
131+
.name {
132+
color: var(--vp-home-hero-name-color);
133+
}
134+
135+
.clip {
136+
background: var(--vp-home-hero-name-background);
137+
-webkit-background-clip: text;
138+
background-clip: text;
139+
-webkit-text-fill-color: var(--vp-home-hero-name-color);
140+
}
141+
142+
@media (min-width: 640px) {
143+
.name,
144+
.text {
145+
max-width: 576px;
146+
line-height: 56px;
147+
font-size: 48px;
148+
}
149+
}
150+
151+
@media (min-width: 960px) {
152+
.name,
153+
.text {
154+
line-height: 64px;
155+
font-size: 56px;
156+
}
157+
158+
.hero.has-image .name,
159+
.hero.has-image .text {
160+
margin: 0;
161+
}
162+
}
163+
164+
.tagline {
165+
padding-top: 8px;
166+
max-width: 392px;
167+
line-height: 28px;
168+
font-size: 18px;
169+
font-weight: 500;
170+
white-space: pre-wrap;
171+
color: var(--vp-c-text-2);
172+
}
173+
174+
.hero.has-image .tagline {
175+
margin: 0 auto;
176+
}
177+
178+
@media (min-width: 640px) {
179+
.tagline {
180+
padding-top: 12px;
181+
max-width: 576px;
182+
line-height: 32px;
183+
font-size: 20px;
184+
}
185+
}
186+
187+
@media (min-width: 960px) {
188+
.tagline {
189+
line-height: 36px;
190+
font-size: 24px;
191+
}
192+
193+
.hero.has-image .tagline {
194+
margin: 0;
195+
}
196+
}
197+
198+
/* layout */
199+
.container {
200+
display: flex;
201+
flex-direction: column;
202+
margin: 0 auto;
203+
max-width: 1152px;
204+
}
205+
206+
@media (min-width: 960px) {
207+
.container {
208+
flex-direction: row;
209+
}
210+
}
211+
212+
.main {
213+
position: relative;
214+
z-index: 10;
215+
order: 2;
216+
flex-grow: 1;
217+
flex-shrink: 0;
218+
}
219+
220+
.hero.has-image .container {
221+
text-align: center;
222+
}
223+
224+
.grid {
225+
display: flex;
226+
flex-flow: row wrap;
227+
justify-content: center;
228+
align-items: stretch;
229+
align-content: space-around;
230+
gap: 24px;
231+
}
232+
233+
.column-3 > .item {
234+
width: calc((100% - (24px * 2)) / 3);
235+
}
236+
237+
@media (min-width: 960px) {
238+
.hero.has-image .container {
239+
text-align: left;
240+
}
241+
242+
.main {
243+
order: 1;
244+
width: calc((100% / 3) * 2);
245+
}
246+
247+
.hero.has-image .main {
248+
max-width: 592px;
249+
}
250+
}
251+
252+
@media (max-width: 640px) {
253+
.grid > .item {
254+
width: 100%;
255+
}
256+
}
257+
258+
</style>

warduino/components/illustration.vue renamed to warduino/.vitepress/components/illustration.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<figure :class="classes">
3-
<img :src="light" class="light-visible" :class="zoom"><img :src="dark" class="dark-visible" :class="zoom">
3+
<img :src="light" class="light-visible" :class="zoom" :alt="caption"><img :src="dark" class="dark-visible" :class="zoom" :alt="caption">
44
<figcaption v-if="caption">Figure. {{ caption }}</figcaption>
55
</figure>
66
</template>

0 commit comments

Comments
 (0)