Skip to content

Commit 0a27d64

Browse files
Flosciantebenjamincanac
Flosciante
and
benjamincanac
authored
feat: use content (#107)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
1 parent 08f0b09 commit 0a27d64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+4030
-109
lines changed

‎app.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div>
33
<NuxtLayout>
44
<NuxtPage />
5-
<UNotifications />
65
</NuxtLayout>
6+
<UNotifications />
77
</div>
88
</template>
99

‎components/atoms/Alert.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<slot />
4+
</div>
5+
</template>

‎components/atoms/ButtonLink.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<slot />
4+
</div>
5+
</template>

‎components/atoms/List.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<slot />
4+
</div>
5+
</template>

‎components/atoms/ThemeSelect.vue

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
<template>
2-
<USelect
3-
v-model="colorMode.preference"
4-
name="theme"
5-
:options="options"
2+
<UToggle
3+
v-model="isDark"
4+
icon-on="heroicons-outline:moon"
5+
icon-off="heroicons-outline:sun"
66
/>
77
</template>
88

99
<script setup>
1010
const colorMode = useColorMode()
11-
const options = [
12-
{
13-
text: 'System',
14-
value: 'system',
15-
icon: 'heroicons-outline:desktop-computer'
11+
const isDark = computed({
12+
get () {
13+
return colorMode.value === 'dark'
1614
},
17-
{
18-
text: 'Dark',
19-
value: 'dark',
20-
icon: 'heroicons-outline:moon'
21-
},
22-
{
23-
text: 'Light',
24-
value: 'light',
25-
icon: 'heroicons-outline:sun'
15+
set () {
16+
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
2617
}
27-
]
18+
})
2819
</script>

‎components/organisms/Footer.vue

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
2+
<template>
3+
<footer class="u-bg-white border-t u-border-gray-200">
4+
<UContainer padded class="pt-12 pb-8">
5+
<div
6+
class="grid grid-cols-2 pb-12 sm:grid-cols-4 lg:grid-cols-6 gap-y-12"
7+
>
8+
<div
9+
v-for="item in links"
10+
:key="item.title"
11+
class="flex flex-col gap-5 text-sm u-text-gray-600"
12+
>
13+
<span class="font-semibold uppercase">{{
14+
item.title
15+
}}</span>
16+
<ul class="flex flex-col gap-y-5">
17+
<li v-for="link in item.items" :key="link.title">
18+
<ULink :to="link.to">
19+
{{ link.title }}
20+
</ULink>
21+
</li>
22+
</ul>
23+
</div>
24+
<div
25+
class="flex flex-col items-start col-span-2 gap-5 sm:col-span-4 lg:col-span-2"
26+
>
27+
<LogoFull class="w-auto h-12 u-text-gray-900" />
28+
<span class="text-sm u-text-gray-700">Stay up to date with our newsletter</span>
29+
<form class="flex w-full gap-3" @submit.prevent="onSubmit">
30+
<UInput
31+
v-model="form.email"
32+
name="email"
33+
placeholder="Enter your email"
34+
class="w-60 lg:flex-1"
35+
size="sm"
36+
required
37+
/>
38+
<UButton
39+
type="submit"
40+
submit
41+
variant="primary"
42+
:loading="loading"
43+
label="Subscribe"
44+
size="xs"
45+
/>
46+
</form>
47+
<ul class="flex gap-x-6">
48+
<li v-for="social in socialLinks" :key="social.name">
49+
<a :href="social.href">
50+
<UIcon :name="social.name" class="w-6 h-5 u-text-gray-400 hover:u-text-gray-900 transition-colors" />
51+
</a>
52+
</li>
53+
</ul>
54+
</div>
55+
</div>
56+
<div class="flex flex-col gap-3 pt-6 border-t u-border-gray-200 sm:flex-row sm:items-center sm:justify-between">
57+
<div class="flex items-center gap-3">
58+
<ThemeSelect name="theme" class="order-1 sm:order-none" size="sm" />
59+
<span class="text-sm u-text-gray-400">© 2022 Nuxt</span>
60+
</div>
61+
62+
<ul class="flex text-sm gap-x-6">
63+
<li v-for="link in legalLinks" :key="link.title">
64+
<NuxtLink :to="link.to">
65+
{{ link.title }}
66+
</NuxtLink>
67+
</li>
68+
</ul>
69+
70+
<USelect
71+
v-model="lang"
72+
:options="langs"
73+
name="lang"
74+
size="sm"
75+
/>
76+
</div>
77+
</UContainer>
78+
</footer>
79+
</template>
80+
81+
<script setup lang="ts">
82+
const form = reactive({
83+
email: ''
84+
})
85+
const loading = ref(false)
86+
87+
function onSubmit () {
88+
89+
}
90+
91+
const { findOne } = useContentQuery().where({ id: 'content:footer.md' })
92+
93+
const { data: footerData } = await useAsyncData('footer-content', findOne)
94+
95+
const { legalLinks, links, socialLinks } = footerData.value
96+
97+
const langs = ref([{ text: 'English', value: 'en' }])
98+
const lang = ref(langs.value[0])
99+
</script>

‎components/organisms/Navbar.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<header class="bg-white dark:bg-black">
33
<UContainer padded>
4-
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 items-center h-16">
4+
<div class="grid grid-cols-2 sm:grid-cols-6 gap-3 items-center h-16">
55
<div class="flex justify-start">
66
<NuxtLink to="/" class="block u-text-black hover:text-[#00DC82] transition-colors">
77
<LogoFull class="h-8 w-auto hidden sm:block" />
88
<Logo class="h-6 w-auto block sm:hidden" />
99
</NuxtLink>
1010
</div>
1111

12-
<UPills :links="links" class="justify-center hidden sm:block" />
12+
<UPills :links="links" class="justify-center col-span-4" />
1313

1414
<div class="flex justify-end">
1515
<TeamsDropdown v-if="user" />
@@ -41,7 +41,7 @@ const links = computed(() => {
4141
4242
return [{
4343
label: 'Docs',
44-
to: { name: 'docs' },
44+
to: { name: 'docs-framework' },
4545
exact: true
4646
}, {
4747
label: 'Integrations',

‎components/templates/DocsPage.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="u-bg-white flex-1">
3+
<div v-if="$slots.header" class="border-y u-border-gray-200 u-bg-white z-[1] sticky top-0">
4+
<UContainer padded>
5+
<div class="grid grid-cols-2 sm:grid-cols-6 gap-3 items-center justify-between h-12">
6+
<slot name="header" />
7+
</div>
8+
</UContainer>
9+
</div>
10+
11+
<main class="relative py-8">
12+
<UContainer>
13+
<div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
14+
<aside class="pb-8 lg:pb-0 lg:sticky lg:top-12 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3">
15+
<slot name="left" />
16+
</aside>
17+
18+
<div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-7">
19+
<slot />
20+
</div>
21+
22+
<div class="pb-8 lg:pb-0 lg:sticky lg:top-12 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-2">
23+
<slot name="right" />
24+
</div>
25+
</div>
26+
</UContainer>
27+
</main>
28+
</div>
29+
</template>

0 commit comments

Comments
 (0)