mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
Import drizzle replacing prisma
Signed-off-by: Arthur DANJOU <arthurdanjou@outlook.fr>
This commit is contained in:
14
components/header/Header.vue
Normal file
14
components/header/Header.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<header class="z-30 sticky top-0 left-0 flex justify-center w-full">
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-9xl py-4 grid grid-cols-2 lg:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
|
||||
<Logo />
|
||||
<div class="hidden grow lg:flex justify-center">
|
||||
<NavBar />
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 items-center">
|
||||
<ThemePicker />
|
||||
<MobileNavBar />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
28
components/header/Logo.vue
Normal file
28
components/header/Logo.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script lang="ts" setup>
|
||||
const appConfig = useAppConfig()
|
||||
const getTextColor = computed(() => `text-${appConfig.ui.primary}-500`)
|
||||
|
||||
function getGroupColor() {
|
||||
return `group-hover:text-${appConfig.ui.primary}-500`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
class="flex gap-1 items-center rounded-xl group text-xl !bg-transparent !dark:bg-transparent"
|
||||
to="/"
|
||||
>
|
||||
<span
|
||||
:class="getTextColor"
|
||||
class="font-black group-hover:text-black dark:group-hover:text-white duration-300"
|
||||
>Arthur</span>
|
||||
<span
|
||||
:class="getGroupColor()"
|
||||
class="font-bold text-gray-300 dark:text-neutral-600 duration-300"
|
||||
>/</span>
|
||||
<span
|
||||
:class="getTextColor"
|
||||
class="font-black group-hover:text-black dark:group-hover:text-white duration-300"
|
||||
>Danjou</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
179
components/header/MobileNavBar.vue
Normal file
179
components/header/MobileNavBar.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script lang="ts" setup>
|
||||
import { navs } from '~~/types'
|
||||
|
||||
const isOpenSidebar = ref(false)
|
||||
const isOpenModal = ref(false)
|
||||
|
||||
const router = useRouter()
|
||||
router.afterEach(() => isOpenSidebar.value = false)
|
||||
|
||||
const route = useRoute()
|
||||
function isRoute(path: string) {
|
||||
return route.path === path
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
isOpenSidebar.value = false
|
||||
isOpenModal.value = true
|
||||
}
|
||||
|
||||
const { copy, copied } = useClipboard({ source: 'arthurdanjou@outlook.fr', copiedDuring: 3000 })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="lg:hidden">
|
||||
<div class="p-1 rounded-md bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
size="sm"
|
||||
icon="i-ph-list-bold"
|
||||
@click="isOpenSidebar = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<USlideover v-model="isOpenSidebar">
|
||||
<UCard
|
||||
:ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
|
||||
class="flex flex-col flex-1"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<Logo />
|
||||
<UButton
|
||||
size="md"
|
||||
icon="i-ic-round-close"
|
||||
:ui="{ rounded: 'rounded-full' }"
|
||||
@click.prevent="isOpenSidebar = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div
|
||||
v-for="nav in navs"
|
||||
:key="nav.label"
|
||||
class="w-full"
|
||||
>
|
||||
<UButton
|
||||
v-if="nav.to"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
:variant="isRoute(nav.to) ? 'solid' : 'ghost'"
|
||||
color="primary"
|
||||
:to="nav.to"
|
||||
:icon="nav.icon"
|
||||
:label="nav.label"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
class="w-full"
|
||||
size="sm"
|
||||
color="primary"
|
||||
variant="ghost"
|
||||
:icon="nav.icon"
|
||||
:label="nav.label"
|
||||
@click.prevent="openModal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
Footer
|
||||
</template>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
<UModal v-model="isOpenModal">
|
||||
<UCard class="p-4">
|
||||
<div>
|
||||
<div class="mb-8 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold">
|
||||
Contact me
|
||||
</h1>
|
||||
<UButton
|
||||
icon="i-akar-icons-cross"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
@click.prevent="isOpenModal = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-6">
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center space-y-2">
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-sm">
|
||||
Email
|
||||
</h3>
|
||||
<p class="text-xs text-subtitle">
|
||||
arthurdanjou@outlook.fr
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
size="sm"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-mdi-note-edit-outline"
|
||||
label="Compose"
|
||||
to="mailto:arthurdanjou@outlook.fr"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
v-if="copied"
|
||||
color="green"
|
||||
icon="i-mdi-content-copy"
|
||||
label="Copied"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="gray"
|
||||
icon="i-mdi-content-copy"
|
||||
label="Copy"
|
||||
variant="solid"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
<UDivider label="OR" />
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center space-y-2">
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-sm">
|
||||
Get in touch
|
||||
</h3>
|
||||
<p class="text-xs text-subtitle">
|
||||
I'm most active on Twitter
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
size="sm"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-ph-github-logo-bold"
|
||||
label="Github"
|
||||
target="_blank"
|
||||
to="https://github.com/ArthurDanjou"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-ph-twitter-logo-bold"
|
||||
label="Twitter"
|
||||
target="_blank"
|
||||
to="https://twitter.com/ArthurDanj"
|
||||
variant="solid"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
174
components/header/NavBar.vue
Normal file
174
components/header/NavBar.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<script setup lang="ts">
|
||||
import { otherTab } from '~~/types'
|
||||
|
||||
const route = useRoute()
|
||||
const isOpenModal = ref(false)
|
||||
|
||||
const { copy, copied } = useClipboard({ source: 'arthurdanjou@outlook.fr', copiedDuring: 3000 })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="hidden lg:block z-50">
|
||||
<div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
|
||||
<UButton
|
||||
:class="{ 'link-active': route.path === '/' }"
|
||||
color="white"
|
||||
size="sm"
|
||||
to="/"
|
||||
variant="ghost"
|
||||
>
|
||||
Home
|
||||
</UButton>
|
||||
<UButton
|
||||
:class="{ 'link-active': route.path.includes('/about') }"
|
||||
color="white"
|
||||
size="sm"
|
||||
to="/about"
|
||||
variant="ghost"
|
||||
>
|
||||
About
|
||||
</UButton>
|
||||
<!-- <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/writing') }">
|
||||
Articles
|
||||
</UButton> -->
|
||||
<UButton
|
||||
:class="{ 'link-active': route.path.includes('/work') }"
|
||||
color="white"
|
||||
size="sm"
|
||||
to="/work"
|
||||
variant="ghost"
|
||||
>
|
||||
Projects
|
||||
</UButton>
|
||||
<UButton
|
||||
:class="{ 'link-active': route.path.includes('/uses') }"
|
||||
color="white"
|
||||
size="sm"
|
||||
to="/uses"
|
||||
variant="ghost"
|
||||
>
|
||||
Uses
|
||||
</UButton>
|
||||
<UDropdown
|
||||
:items="otherTab"
|
||||
:popper="{ placement: 'bottom' }"
|
||||
mode="hover"
|
||||
>
|
||||
<UButton
|
||||
class="duration-300"
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
Other
|
||||
</UButton>
|
||||
</UDropdown>
|
||||
<UButton
|
||||
color="white"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
@click="isOpenModal = true"
|
||||
>
|
||||
Contact
|
||||
</UButton>
|
||||
</div>
|
||||
<UModal v-model="isOpenModal">
|
||||
<UCard class="p-4">
|
||||
<div>
|
||||
<div class="mb-8 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold">
|
||||
Contact me
|
||||
</h1>
|
||||
<UButton
|
||||
icon="i-akar-icons-cross"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
@click.prevent="isOpenModal = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-6">
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center space-y-2">
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-sm">
|
||||
Email
|
||||
</h3>
|
||||
<p class="text-xs text-subtitle">
|
||||
arthurdanjou@outlook.fr
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
size="sm"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-mdi-note-edit-outline"
|
||||
label="Compose"
|
||||
to="mailto:arthurdanjou@outlook.fr"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
v-if="copied"
|
||||
color="green"
|
||||
icon="i-mdi-content-copy"
|
||||
label="Copied"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="gray"
|
||||
icon="i-mdi-content-copy"
|
||||
label="Copy"
|
||||
variant="solid"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
<UDivider label="OR" />
|
||||
<div class="flex flex-col md:flex-row justify-between md:items-center space-y-2">
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-sm">
|
||||
Get in touch
|
||||
</h3>
|
||||
<p class="text-xs text-subtitle">
|
||||
I'm most active on Twitter
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
size="sm"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-ph-github-logo-bold"
|
||||
label="Github"
|
||||
target="_blank"
|
||||
to="https://github.com/ArthurDanjou"
|
||||
variant="solid"
|
||||
/>
|
||||
<UButton
|
||||
color="gray"
|
||||
icon="i-ph-twitter-logo-bold"
|
||||
label="Twitter"
|
||||
target="_blank"
|
||||
to="https://twitter.com/ArthurDanj"
|
||||
variant="solid"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.link-active {
|
||||
@apply bg-white/60 dark:bg-black
|
||||
}
|
||||
</style>
|
||||
88
components/header/ThemePicker.vue
Normal file
88
components/header/ThemePicker.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { useColorStore } from '~/store/color'
|
||||
import { ColorsTheme } from '~~/types'
|
||||
|
||||
const colors = Object.values(ColorsTheme)
|
||||
|
||||
const { getColor, setColor } = useColorStore()
|
||||
|
||||
const colorMode = useColorMode()
|
||||
const isDark = ref(colorMode.value === 'dark')
|
||||
watch(isDark, () => {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPopover
|
||||
mode="hover"
|
||||
:ui="{
|
||||
background: 'bg-white dark:bg-stone-900',
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
|
||||
container: 'z-30'
|
||||
}"
|
||||
>
|
||||
<template #default="{ open }">
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
square
|
||||
size="lg"
|
||||
:class="[open && 'bg-gray-50 dark:bg-gray-800']"
|
||||
aria-label="Color picker"
|
||||
>
|
||||
<UIcon
|
||||
class="w-5 h-5 text-primary-500 dark:text-primary-400"
|
||||
name="i-ph-paint-brush-bold"
|
||||
/>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<template #panel>
|
||||
<div class="p-2">
|
||||
<div class="grid grid-cols-5 gap-px">
|
||||
<UTooltip
|
||||
v-for="color in colors"
|
||||
:key="color"
|
||||
:open-delay="500"
|
||||
:text="color"
|
||||
class="capitalize"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
square
|
||||
:ui="{
|
||||
color: {
|
||||
white: {
|
||||
solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
|
||||
ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
|
||||
}
|
||||
}
|
||||
}"
|
||||
:variant="color === getColor ? 'solid' : 'ghost'"
|
||||
@click.stop.prevent="setColor(color)"
|
||||
>
|
||||
<span
|
||||
:class="`bg-${color}-500/80 border-${color}-500`"
|
||||
class="flex items-center justify-center w-3 h-3 rounded-full border text-white"
|
||||
>
|
||||
<UIcon
|
||||
v-if="color === getColor"
|
||||
name="i-ic-round-check"
|
||||
/>
|
||||
</span>
|
||||
</UButton>
|
||||
</UTooltip>
|
||||
</div>
|
||||
<UDivider class="my-2" />
|
||||
<div>
|
||||
<UToggle
|
||||
v-model="isDark"
|
||||
on-icon="i-heroicons-moon-20-solid"
|
||||
off-icon="i-heroicons-sun-20-solid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
Reference in New Issue
Block a user