Skip to content

Commit 7c45a1d

Browse files
claymcleodclaymcleod
committed
revise: adds a front page
1 parent 8c14e35 commit 7c45a1d

File tree

4 files changed

+198
-4
lines changed

4 files changed

+198
-4
lines changed

‎components/ContextMenu.vue

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
<template>
22
<nav>
33
<div id="links">
4-
<NuxtLink to="/docs">
5-
<LucideBookText class="mx-auto" />
4+
<NuxtLink
5+
class="flex flex-col space-y-1.5 items-center justify-center"
6+
to="/"
7+
>
8+
<Icon class="mx-auto w-6 h-6" name="heroicons:home"></Icon>
9+
<span class="label">Home</span>
10+
</NuxtLink>
11+
<NuxtLink
12+
class="flex flex-col space-y-1.5 items-center justify-center"
13+
to="/docs"
14+
>
15+
<Icon class="mx-auto w-6 h-6" name="heroicons:book-open"></Icon>
616
<span class="label">Docs</span>
717
</NuxtLink>
818
</div>

‎components/FrontPageCard.vue

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<div
3+
class="front-page-card relative group"
4+
:class="checked ? 'checked' : ''"
5+
@click="checked = !checked"
6+
>
7+
<div class="relative checkbox">
8+
<span
9+
class="absolute transition-opacity duration-300 ease-out"
10+
:class="{ 'opacity-0': checked, 'opacity-100 delay-500': !checked }"
11+
>
12+
{{ step }}
13+
</span>
14+
<Icon
15+
class="w-7 h-7 bg-white transition-opacity duration-300 ease-out"
16+
:class="{ 'opacity-0': !checked, 'opacity-100 delay-500': checked }"
17+
name="heroicons:check-20-solid"
18+
></Icon>
19+
</div>
20+
<div class="content">
21+
<h3 class="relative">
22+
{{ title }}
23+
<span
24+
class="absolute left-0 top-1/2 transform -translate-y-1/2 transition-all bg-slate-400 duration-300"
25+
:class="checked ? 'w-full h-1 opacity-100' : 'w-0 opacity-0'"
26+
></span>
27+
</h3>
28+
<p class="text-sm relative">
29+
{{ description }}
30+
<span
31+
class="absolute left-0 top-1/2 transform -translate-y-1/2 transition-all bg-slate-400 delay-100 duration-300"
32+
:class="checked ? 'w-full h-1 opacity-100' : 'w-0 opacity-0'"
33+
></span>
34+
</p>
35+
</div>
36+
<div v-if="!checked" class="overlay opacity-0 group-hover:opacity-100">
37+
<span>Learn how we do it</span>
38+
<Icon
39+
class="w-7 h-7 bg-white transition-opacity duration-300 ease-out"
40+
name="heroicons:check-20-solid"
41+
></Icon>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script setup lang="ts">
47+
const checked = ref(false);
48+
49+
interface Props {
50+
title: string;
51+
description: string;
52+
step: number;
53+
}
54+
55+
// Define props with TypeScript
56+
const props = defineProps<Props>();
57+
</script>
58+
59+
<style scoped lang="postcss">
60+
.front-page-card {
61+
@apply flex justify-start items-center;
62+
63+
@apply px-6;
64+
@apply py-6;
65+
66+
@apply bg-white;
67+
@apply dark:bg-slate-900;
68+
69+
@apply text-slate-900;
70+
@apply dark:text-slate-50;
71+
72+
@apply border;
73+
@apply border-gray-100;
74+
@apply dark:border-gray-950;
75+
76+
@apply rounded-lg;
77+
@apply shadow-sm;
78+
@apply hover:shadow-slate-200;
79+
80+
@apply text-pretty;
81+
82+
.overlay {
83+
@apply flex items-center justify-center space-x-2 absolute inset-0;
84+
@apply bg-gradient-to-r from-cyan-500 to-blue-500;
85+
@apply h-full w-full;
86+
@apply rounded-md;
87+
@apply transition-opacity duration-300 ease-in-out;
88+
@apply text-white text-2xl font-bold;
89+
90+
* {
91+
@apply text-inherit;
92+
}
93+
}
94+
95+
.checkbox {
96+
@apply transition-colors duration-300 ease-in delay-300;
97+
@apply flex items-center justify-center;
98+
@apply font-mono font-bold text-slate-300 text-2xl;
99+
@apply w-12 h-12;
100+
@apply rounded-full;
101+
@apply bg-slate-100;
102+
@apply border-2 border-slate-200;
103+
}
104+
105+
.content {
106+
@apply ml-6;
107+
@apply text-slate-500;
108+
109+
h3 {
110+
@apply m-0;
111+
@apply text-slate-900;
112+
}
113+
114+
p {
115+
@apply m-0;
116+
@apply text-inherit;
117+
}
118+
}
119+
120+
&.checked {
121+
.content {
122+
@apply text-slate-400;
123+
124+
h3 {
125+
@apply text-inherit;
126+
}
127+
128+
a {
129+
@apply !text-inherit;
130+
}
131+
}
132+
133+
.checkbox {
134+
@apply bg-green-500;
135+
@apply text-white;
136+
@apply border-green-700;
137+
}
138+
}
139+
}
140+
</style>

‎nuxt.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default defineNuxtConfig({
1212
"@nuxt/icon",
1313
"@nuxtjs/tailwindcss",
1414
"@nuxtjs/color-mode",
15+
"@nuxt/image",
1516
],
1617
content: {
1718
documentDriven: true,
@@ -25,4 +26,4 @@ export default defineNuxtConfig({
2526
linkExactActiveClass: "active",
2627
},
2728
},
28-
});
29+
});

‎pages/index.vue

+44-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
1-
<template>Foo</template>
1+
<template>
2+
<div class="mx-auto mt-20">
3+
<main>
4+
<h1>👋 Hi there!</h1>
5+
<p>
6+
Welcome to <code>rust-seq</code>—a project that endeavors to rewrite the
7+
foundations of the omics ecosystem in Rust. We're achieving that mission
8+
through the following ways.
9+
</p>
10+
11+
<div class="get-involved">
12+
<FrontPageCard
13+
step="1"
14+
title="Organizing the community around what needs built."
15+
description="Though our RFC process, we outline crates that need to be created
16+
along with who will create them."
17+
>
18+
</FrontPageCard>
19+
<FrontPageCard
20+
step="2"
21+
title="Bringing the community together on Zulip."
22+
description="Foo bar baz quux qil."
23+
></FrontPageCard>
24+
</div>
25+
</main>
26+
</div>
27+
</template>
28+
29+
<script lang="ts"></script>
30+
31+
<style scoped lang="postcss">
32+
main {
33+
@apply cursor-pointer;
34+
@apply prose dark:prose-invert;
35+
@apply max-w-3xl;
36+
@apply m-auto;
37+
38+
.get-involved {
39+
@apply flex flex-col space-y-8 justify-center;
40+
@apply py-6 my-2;
41+
@apply border-t border-slate-100;
42+
}
43+
}
44+
</style>

0 commit comments

Comments
 (0)