arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-01-14 15:54:13 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Add Nuxt UI v3

Browse Source
This commit is contained in:
Arthur Danjou
2025-02-02 18:30:15 +01:00
parent bb20f593f8
commit 3f5b0829c7
16 changed files with 1050 additions and 857 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/app.config.ts
View File

@@ -1,9 +1,32 @@
export default defineAppConfig({
ui: {
gray: 'neutral',
primary: 'gray',
container: {
constrained: 'max-w-4xl',
base: 'max-w-4xl',
},
colors: {
primary: 'neutral',
white: 'white',
black: 'black',
neutral: 'neutral',
red: 'red',
green: 'green',
blue: 'blue',
yellow: 'yellow',
purple: 'purple',
pink: 'pink',
indigo: 'indigo',
cyan: 'cyan',
teal: 'teal',
gray: 'gray',
orange: 'orange',
amber: 'amber',
lime: 'lime',
emerald: 'emerald',
rose: 'rose',
sky: 'sky',
violet: 'violet',
fuchsia: 'fuchsia',
lightBlue: 'lightBlue',
},
},
})

5
app/app.vue
View File

@@ -39,7 +39,7 @@ const head = useLocaleHead({
</template>
</Head>
<Body>
<div>
<UApp>
<NuxtLoadingIndicator color="#808080" />
<AppBackground />
<UContainer class="z-50 relative">
@@ -47,7 +47,7 @@ const head = useLocaleHead({
<NuxtPage class="mt-12" />
<AppFooter />
</UContainer>
</div>
</UApp>
</Body>
</Html>
</template>
@@ -55,7 +55,6 @@ const head = useLocaleHead({
<style>
body {
font-family: 'DM Sans', sans-serif;
@apply h-full w-full text-neutral-700 dark:text-neutral-300;
}
.sofia {

4
app/assets/css/main.css Normal file
View File

@@ -0,0 +1,4 @@
@import "tailwindcss";
@import "@nuxt/ui";
@plugin "@tailwindcss/typography";

4
app/components/AppFooter.vue
View File

@@ -30,9 +30,9 @@ const { t } = useI18n({
<template>
<footer class="my-16">
<div class="flex justify-center mb-16">
<UDivider
<USeparator
class="md:w-2/3"
size="2xs"
size="xs"
type="solid"
/>
</div>

85
app/components/AppHeader.vue
View File

@@ -14,11 +14,6 @@ const navs = [
},
to: '/',
icon: 'house-line-duotone',
shortcut: {
en: 'H',
fr: 'A',
es: 'I',
},
},
{
label: {
@@ -28,11 +23,6 @@ const navs = [
},
to: '/uses',
icon: 'backpack-duotone',
shortcut: {
en: 'U',
fr: 'U',
es: 'U',
},
},
{
label: {
@@ -42,11 +32,6 @@ const navs = [
},
to: '/portfolio',
icon: 'books-duotone',
shortcut: {
en: 'W',
fr: 'E',
es: 'E',
},
},
{
label: {
@@ -57,11 +42,6 @@ const navs = [
icon: 'address-book-duotone',
to: '/Resume2024.pdf',
target: '_blank',
shortcut: {
en: 'R',
fr: 'C',
es: 'C',
},
},
]
@@ -76,33 +56,27 @@ async function toggleTheme() {
document.body.style.animation = ''
}
const { locale, setLocale, locales, t, availableLocales } = useI18n()
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
const { locale, setLocale, locales, t } = useI18n()
const currentLocale = computed(() => locales.filter(l => l.code === locale.value)[0])
const lang = ref(locale.value)
watch(lang, () => changeLocale(lang.value))
async function changeLocale(newLocale?: string) {
async function changeLocale(newLocale: string) {
document.body.style.animation = 'switch-on .2s'
await new Promise(resolve => setTimeout(resolve, 200))
if (!newLocale) {
const currentLocaleIndex = availableLocales.findIndex(l => l === locale.value)
const nextLocaleIndex = (currentLocaleIndex + 1) % availableLocales.length
newLocale = availableLocales[nextLocaleIndex]
lang.value = newLocale!
}
await setLocale(newLocale ?? 'en')
await setLocale(newLocale as 'en' | 'fr' | 'es')
document.body.style.animation = 'switch-off .2s'
await new Promise(resolve => setTimeout(resolve, 200))
document.body.style.animation = ''
}
const open = ref(false)
const router = useRouter()
defineShortcuts({
t: () => toggleTheme(),
l: () => changeLocale(),
l: () => open.value = !open.value,
backspace: () => router.back(),
})
</script>
@@ -110,7 +84,7 @@ defineShortcuts({
<template>
<header class="flex md:items-center justify-between my-8 gap-2">
<NuxtLinkLocale
class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white"
to="/"
>
Arthur Danjou
@@ -126,52 +100,45 @@ defineShortcuts({
:target="nav.target ? nav.target : '_self'"
:to="nav.to"
:aria-label="nav.label"
color="white"
color="neutral"
size="sm"
variant="solid"
variant="outline"
/>
</UTooltip>
<ClientOnly>
<UTooltip
:shortcuts="['T']"
:kbds="['T']"
:text="t('theme')"
>
<UButton
:icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
color="white"
color="neutral"
aria-label="switch theme"
size="sm"
variant="solid"
variant="outline"
@click="toggleTheme()"
/>
</UTooltip>
<UTooltip
:shortcuts="['L']"
:kbds="['L']"
:text="t('language')"
:popper="{ placement: 'right' }"
:content="{
align: 'center',
side: 'right',
sideOffset: 8,
}"
>
<USelectMenu
<USelect
v-model="lang"
:options="locales"
v-model:open="open"
:items="locales"
size="sm"
option-attribute="code"
value-attribute="code"
:leading-icon="currentLocale.icon"
label-key="label"
value-key="code"
variant="outline"
>
<template #leading>
<UIcon
:name="currentLocale!.icon"
class="w-5 h-5"
/>
</template>
<template #option="{ option: language }">
<UIcon
:name="language.icon"
class="w-5 h-5"
/>
<span>{{ language.code }}</span>
</template>
</USelectMenu>
@update:model-value="changeLocale"
/>
</UTooltip>
</ClientOnly>
</nav>

6
app/components/content/HoverText.vue
View File

@@ -20,6 +20,12 @@ defineProps({
<ClientOnly>
<UTooltip
:popper="{ placement: position }"
:delay-duration="4"
:content="{
align: 'center',
side: position,
sideOffset: 8,
}"
:text="hover"
>
<strong class="leading-3 cursor-help">{{ text }}</strong>

18
app/components/content/ProseIcon.vue
View File

@@ -9,6 +9,22 @@ defineProps({
default: 'gray',
},
})
const colorVariants = {
gray: 'text-gray-500 decoration-gray-400',
red: 'text-red-500 decoration-red-400',
yellow: 'text-yellow-500 decoration-yellow-400',
green: 'text-green-500 decoration-green-400',
blue: 'text-blue-500 decoration-blue-400',
indigo: 'text-indigo-500 decoration-indigo-400',
purple: 'text-purple-500 decoration-purple-400',
pink: 'text-pink-500 decoration-pink-400',
sky: 'text-sky-500 decoration-sky-400',
zinc: 'text-zinc-500 decoration-zinc-400',
orange: 'text-orange-500 decoration-orange-400',
amber: 'text-amber-500 decoration-amber-400',
emerald: 'text-emerald-500 decoration-emerald-400',
}
</script>
<template>
@@ -18,7 +34,7 @@ defineProps({
:name="`i-logos:${icon}`"
/>
<span
:class="`text-${color}-500 decoration-${color}-300`"
:class="colorVariants[color]"
class="sofia font-medium underline-offset-2 underline"
>
<slot />

2
app/components/home/Stats.vue
View File

@@ -2,7 +2,7 @@
import type { Stats } from '~~/types'
const { locale, locales } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const currentLocale = computed(() => locales.find(l => l.code === locale.value))
const { data: stats } = await useFetch<Stats>('/api/stats')
const { t } = useI18n({

2
app/components/uses/List.vue
View File

@@ -9,7 +9,7 @@ defineProps({
<template>
<div class="space-y-8">
<UDivider
<USeparator
:label="title"
size="xs"
/>

18
app/pages/portfolio/[slug].vue
View File

@@ -82,7 +82,7 @@ async function handleLike() {
icon="i-ph-warning-duotone"
variant="outline"
/>
<div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm flex gap-1 items-center">
<div class="border-l-2 pl-2 rounded-none border-gray-300 dark:border-neutral-700 flex gap-1 items-center">
<UIcon name="i-ph-heart-duotone" size="16" />
<p>{{ getDetails().likes }} </p>·
<UIcon name="i-ph-eye-duotone" size="16" />
@@ -117,7 +117,7 @@ async function handleLike() {
alt="Writing cover"
/>
</div>
<UDivider
<USeparator
class="mt-8"
icon="i-ph-pencil-line-duotone"
/>
@@ -126,7 +126,7 @@ async function handleLike() {
:value="post"
class="!max-w-none prose dark:prose-invert"
/>
<UDivider
<USeparator
class="my-16"
icon="i-ph-hands-clapping-duotone"
/>
@@ -142,18 +142,18 @@ async function handleLike() {
<div class="flex gap-4 items-center flex-wrap">
<UButton
:label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
:color="likeCookie ? 'red' : 'white'"
:color="likeCookie ? 'red' : 'neutral'"
icon="i-ph-heart-duotone"
size="lg"
variant="solid"
:variant="likeCookie ? 'solid' : 'outline'"
@click.prevent="handleLike()"
/>
<UButton
color="white"
color="neutral"
icon="i-ph-arrow-fat-lines-up-duotone"
:label="t('top')"
size="lg"
variant="solid"
variant="outline"
@click.prevent="top()"
/>
<UButton
@@ -167,11 +167,11 @@ async function handleLike() {
/>
<UButton
v-else
color="white"
color="neutral"
icon="i-ph-square-duotone"
:label="t('link.copy')"
size="lg"
variant="solid"
variant="outline"
@click.prevent="copy()"
/>
</div>

13
app/pages/portfolio/index.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { type Tag, TAGS } from '~~/types'
import type { Tag } from '~~/types'
import { TAGS } from '~~/types'
const { t, locale } = useI18n({
useScope: 'local',
@@ -28,8 +29,8 @@ const tags: Array<{ label: string, icon: string } & Tag> = [
...TAGS.filter(tag => tag.title).sort((a, b) => a.label.localeCompare(b.label)),
]
function updateTag(index: number) {
const tag = tags[index]
function updateTag(payload: number | string) {
const tag = tags[Number(payload)]
tagFilter.value = tag?.label.toLowerCase() === 'all' ? undefined : tag?.label.toLowerCase()
}
</script>
@@ -48,7 +49,7 @@ function updateTag(index: number) {
icon="i-ph-warning-duotone"
variant="outline"
/>
<UTabs :items="tags" @change="updateTag">
<UTabs :items="tags" color="neutral" @update:model-value="updateTag">
<template #default="{ item }">
<span class="truncate">{{ t(item.translation) }}</span>
</template>
@@ -60,7 +61,7 @@ function updateTag(index: number) {
:to="writing.path"
>
<li
class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500 duration-300"
class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600 duration-300"
>
<article class="space-y-2">
<h1
@@ -88,7 +89,7 @@ function updateTag(index: number) {
:color="TAGS.find(color => color.label.toLowerCase() === tag)?.color"
variant="soft"
size="sm"
:ui="{ rounded: 'rounded-full' }"
class="rounded-full"
>
<div class="flex gap-1 items-center">
<UIcon :name="TAGS.find(icon => icon.label.toLowerCase() === tag)?.icon || ''" size="16" />

2
app/pages/uses.vue
View File

@@ -38,7 +38,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
/>
</UsesList>
<ul class="space-y-8">
<UDivider
<USeparator
:label="t('ide')"
size="xs"
/>

36
nuxt.config.ts
View File

@@ -11,6 +11,8 @@ export default defineNuxtConfig({
},
},
css: ['~/assets/css/main.css'],
// Nuxt Modules
modules: [
'@nuxthub/core',
@@ -52,18 +54,25 @@ export default defineNuxtConfig({
// Nuxt UI
ui: {
safelistColors: [
'gray',
'zinc',
'red',
'orange',
'amber',
'green',
'emerald',
'sky',
'blue',
'purple',
],
theme: {
colors: [
'white',
'black',
'cyan',
'gray',
'zinc',
'red',
'orange',
'amber',
'green',
'emerald',
'sky',
'blue',
'purple',
'pink',
'neutral',
],
},
},
// Nuxt Visitors
@@ -88,16 +97,19 @@ export default defineNuxtConfig({
strategy: 'no_prefix',
locales: [
{
label: 'English',
code: 'en',
language: 'en-EN',
icon: 'i-twemoji-flag-united-kingdom',
},
{
label: 'Français',
code: 'fr',
language: 'fr-FR',
icon: 'i-twemoji-flag-france',
},
{
label: 'Español',
code: 'es',
language: 'es-ES',
icon: 'i-twemoji-flag-spain',

4
package.json
View File

@@ -16,10 +16,10 @@
"dependencies": {
"@nuxt/content": "3.0.1",
"@nuxt/image": "^1.9.0",
"@nuxt/ui": "^2.21.0",
"@nuxt/ui": "3.0.0-alpha.12",
"@nuxthub/core": "^0.8.15",
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/i18n": "^9.1.5",
"@nuxtjs/i18n": "9.1.5",
"cobe": "^0.6.3",
"drizzle-orm": "^0.33.0",
"h3-zod": "^0.5.3",

1677
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
types.ts
View File

@@ -1,5 +1,3 @@
import type { BadgeColor } from '#ui/types'
interface WakatimeData {
name: string
percent: number