mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-02-10 22:06:57 +01:00
Working on v2
This commit is contained in:
@@ -8,7 +8,6 @@ useHead({
|
||||
<UApp>
|
||||
<NuxtLoadingIndicator color="#808080" />
|
||||
<AppBackground />
|
||||
<AppVisitors />
|
||||
<UContainer class="z-50 relative">
|
||||
<AppHeader />
|
||||
<NuxtPage class="mt-12" />
|
||||
@@ -18,8 +17,6 @@ useHead({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@reference "@/assets/css/main.css";
|
||||
|
||||
.sofia {
|
||||
font-family: 'Sofia Sans', sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@theme static {
|
||||
--animate-wave: wave 3s infinite
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
|
||||
<div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
|
||||
<div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-4" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const { visitors } = useVisitors()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<UBadge
|
||||
color="green"
|
||||
variant="outline"
|
||||
class="shadow-xl fixed z-50 bottom-4 right-4 rounded-full px-1.5 py-0.5 bg-white ring ring-green-400 dark:bg-neutral-950 dark:ring-green-600"
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<p class="text-neutral-500">
|
||||
{{ visitors }}
|
||||
</p>
|
||||
<div class="w-3 h-3 bg-green-200/70 dark:bg-green-800/70 rounded-full border-2 border-green-400 dark:border-green-600" />
|
||||
</div>
|
||||
</UBadge>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
@@ -31,4 +31,4 @@ defineProps({
|
||||
<strong class="leading-3 cursor-help">{{ text }}</strong>
|
||||
</UTooltip>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
</template>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
defineProps({
|
||||
href: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
target: {
|
||||
type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
|
||||
default: undefined,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
:href="href"
|
||||
:target="target"
|
||||
class="sofia font-medium duration-300 underline-offset-2 text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 hover:decoration-black dark:hover:decoration-white"
|
||||
>
|
||||
<slot />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, useRuntimeConfig } from '#imports'
|
||||
|
||||
const props = defineProps<{ id?: string }>()
|
||||
|
||||
const { headings } = useRuntimeConfig().public.mdc
|
||||
const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2
|
||||
:id="id"
|
||||
>
|
||||
<a
|
||||
v-if="id && generate"
|
||||
:href="`#${id}`"
|
||||
class="text-xl font-bold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
<slot v-else />
|
||||
</h2>
|
||||
</template>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, useRuntimeConfig } from '#imports'
|
||||
|
||||
const props = defineProps<{ id?: string }>()
|
||||
|
||||
const { headings } = useRuntimeConfig().public.mdc
|
||||
const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2
|
||||
:id="id"
|
||||
>
|
||||
<a
|
||||
v-if="id && generate"
|
||||
:href="`#${id}`"
|
||||
class="text-lg font-semibold text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
<slot v-else />
|
||||
</h2>
|
||||
</template>
|
||||
@@ -37,4 +37,4 @@ const colorVariants = {
|
||||
<slot />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps<{ src: string, caption?: string, rounded?: boolean }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center prose-none my-8">
|
||||
<img :src="src" :alt="caption" class="w-full h-auto m-0 prose-none" :class="{ 'rounded-lg': rounded }">
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300 prose-none">
|
||||
{{ caption }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<p class="text-neutral-700 dark:text-neutral-300">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
@@ -7,7 +7,7 @@ const { locale, locales, t } = useI18n({
|
||||
})
|
||||
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||
|
||||
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
|
||||
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch())
|
||||
|
||||
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
|
||||
const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { t, locale } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
const closed = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UAlert
|
||||
v-if="locale !== 'en' && !closed"
|
||||
:description="t('alert.description')"
|
||||
:title="t('alert.title')"
|
||||
color="red"
|
||||
icon="i-ph-warning-duotone"
|
||||
variant="soft"
|
||||
:close="{
|
||||
color: 'red',
|
||||
}"
|
||||
@update:open="closed = true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"alert": {
|
||||
"title": "Translations alert!",
|
||||
"description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"alert": {
|
||||
"title": "Attention aux traductions !",
|
||||
"description": "Pour des raisons de temps, toutes les traductions d'articles ne seront disponibles qu'en anglais. Merci de votre compréhension."
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"alert": {
|
||||
"title": "¡Atención a las traducciones!",
|
||||
"description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,68 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-8 border bg-white/70 dark:bg-black/70 border-gray-200 dark:border-neutral-700 rounded-md">
|
||||
<NuxtImg
|
||||
src="/arthur.webp"
|
||||
alt="Arthur Danjou"
|
||||
class="w-24 h-24 rounded-full float-left mr-4 mb-4"
|
||||
/>
|
||||
<i18n-t
|
||||
keypath="thanks"
|
||||
tag="p"
|
||||
class="text-neutral-600 dark:text-neutral-400 text-justify"
|
||||
>
|
||||
<template #linkedin>
|
||||
<HomeLink
|
||||
href="https://www.linkedin.com/in/arthurdanjou/"
|
||||
icon="i-ph-linkedin-logo-duotone"
|
||||
label="LinkedIn"
|
||||
target="_blank"
|
||||
class="inline-flex items-start gap-1 transform translate-y-1"
|
||||
/>
|
||||
</template>
|
||||
<template #github>
|
||||
<HomeLink
|
||||
href="https://github.com/arthurdanjou"
|
||||
icon="i-ph-github-logo-duotone"
|
||||
label="GitHub"
|
||||
target="_blank"
|
||||
class="inline-flex items-start gap-1 transform translate-y-1"
|
||||
/>
|
||||
</template>
|
||||
<template #comment>
|
||||
<strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
|
||||
</template>
|
||||
<template #name>
|
||||
<strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
|
||||
</template>
|
||||
<template #jump>
|
||||
<br> <br>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"thanks": "Thanks for reading! My name is {name}, and I love writing about AI, data science, and the intersection between mathematics and programming. {jump} I've been coding and exploring math for years, and I'm always learning something new—whether it's self-hosting tools in my homelab, experimenting with machine learning models, or diving into statistical methods. {jump} I share my knowledge here because I know how valuable clear, hands-on resources can be, especially when you're just getting started or exploring something deeply technical. {jump} If you have any questions or just want to chat, feel free to reach out to me on {linkedin} or {github }. {jump} I hope you enjoyed this post and learned something useful. If you did, {comment}—it really helps and means a lot!",
|
||||
"comment": "consider sharing it",
|
||||
"name": "Arthur"
|
||||
},
|
||||
"es": {
|
||||
"thanks": "¡Gracias por leer! Me llamo {name} y me encanta escribir sobre inteligencia artificial, ciencia de datos y todo lo que se encuentra en la intersección entre las matemáticas y la programación. {jump} Llevo años programando y explorando las matemáticas, y cada día aprendo algo nuevo — ya sea autoalojando herramientas en mi homelab, experimentando con modelos de aprendizaje automático o profundizando en métodos estadísticos. {jump} Comparto mis conocimientos aquí porque sé lo valiosos que pueden ser los recursos claros, prácticos y accesibles, especialmente cuando uno está empezando o explorando temas técnicos en profundidad. {jump} Si tienes alguna pregunta o simplemente quieres charlar, no dudes en dejar un comentario abajo o contactarme por {linkedin} o {github}. {jump} Espero que este artículo te haya gustado y que hayas aprendido algo útil. Si es así, {comment} — ¡me ayuda mucho y significa mucho para mí!",
|
||||
"comment": "considera compartirlo",
|
||||
"name": "Arthur"
|
||||
},
|
||||
"fr": {
|
||||
"thanks": "Merci de votre lecture ! Je m'appelle {name}, et j'adore écrire sur l'intelligence artificielle, la data science, et tout ce qui se situe à l'intersection entre les mathématiques et la programmation. {jump} Je code et j'explore les maths depuis des années, et j'apprends encore de nouvelles choses chaque jour — que ce soit en auto-hébergeant des outils dans mon homelab, en expérimentant des modèles de machine learning ou en approfondissant des méthodes statistiques. {jump} Je partage mes connaissances ici parce que je sais à quel point des ressources claires, pratiques et accessibles peuvent être précieuses, surtout quand on débute ou qu'on explore un sujet technique en profondeur. {jump} Si vous avez des questions ou simplement envie d'échanger, n'hésitez pas à laisser un commentaire ci-dessous ou à me contacter sur {linkedin} ou {github}. {jump} J'espère que cet article vous a plu et qu'il vous a appris quelque chose d'utile. Si c'est le cas, {comment} — ça m'aide beaucoup et ça me fait vraiment plaisir !",
|
||||
"comment": "pensez à le partager",
|
||||
"name": "Arthur"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UsesItem } from '#components'
|
||||
|
||||
defineProps({
|
||||
item: {
|
||||
type: Object as PropType<typeof UsesItem>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { locale } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li>
|
||||
<p class="text-base font-semibold text-black dark:text-white">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ locale === 'en' ? item.description.en : locale === 'es' ? item.description.es : item.description.fr }}
|
||||
</p>
|
||||
</li>
|
||||
</template>
|
||||
@@ -1,22 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: Object as PropType<{ en: string, fr: string, es: string }>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { locale } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<USeparator
|
||||
:label="locale === 'en' ? title.en : locale === 'es' ? title.es : title.fr"
|
||||
size="xs"
|
||||
/>
|
||||
<ul class="space-y-8">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,11 +14,11 @@ const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="!max-w-none prose dark:prose-invert">
|
||||
<main class="max-w-none! prose dark:prose-invert">
|
||||
<ContentRenderer v-if="page" :value="page" class="mt-8 md:mt-16" />
|
||||
<HomeStats />
|
||||
<!-- <HomeStats />
|
||||
<HomeActivity />
|
||||
<HomeQuote />
|
||||
<HomeCatchPhrase />
|
||||
<HomeCatchPhrase /> -->
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -1,182 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const route = useRoute()
|
||||
const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
|
||||
queryCollection('projects').path(`/projects/${route.params.slug}`).first())
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: project.value?.title,
|
||||
description: project.value?.description,
|
||||
author: 'Arthur Danjou',
|
||||
})
|
||||
|
||||
function top() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
|
||||
const { copy, copied } = useClipboard({
|
||||
source: `https://arthurdanjou.fr/projects/${route.params.slug}`,
|
||||
copiedDuring: 4000,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-if="project">
|
||||
<div class="flex">
|
||||
<NuxtLinkLocale
|
||||
class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
|
||||
to="/projects"
|
||||
>
|
||||
<UIcon
|
||||
class="group-hover:-translate-x-1 transform duration-300"
|
||||
name="i-ph-arrow-left-duotone"
|
||||
size="20"
|
||||
/>
|
||||
{{ t('back') }}
|
||||
</NuxtLinkLocale>
|
||||
</div>
|
||||
<PostAlert class="mb-8" />
|
||||
<div>
|
||||
<div class="flex items-end justify-between gap-2 flex-wrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1
|
||||
class="font-bold text-3xl text-black dark:text-white"
|
||||
>
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<UTooltip
|
||||
:text="t('tooltip.favorite')" :content="{
|
||||
align: 'center',
|
||||
side: 'right',
|
||||
sideOffset: 8,
|
||||
}"
|
||||
arrow
|
||||
>
|
||||
<UIcon
|
||||
v-if="project.favorite"
|
||||
name="i-ph-star-duotone"
|
||||
size="24"
|
||||
class="text-amber-500"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
<div
|
||||
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
||||
>
|
||||
<UIcon name="ph:calendar-duotone" size="16" />
|
||||
<p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-base">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="project.cover"
|
||||
class="w-full rounded-md my-8"
|
||||
>
|
||||
<ProseImg
|
||||
:src="`/projects/${project.cover}`"
|
||||
label="Project cover"
|
||||
/>
|
||||
</div>
|
||||
<USeparator
|
||||
class="my-4"
|
||||
icon="i-ph-pencil-line-duotone"
|
||||
/>
|
||||
<ClientOnly>
|
||||
<ContentRenderer
|
||||
:value="project"
|
||||
class="!max-w-none prose dark:prose-invert"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<div class="space-y-4 mt-8">
|
||||
<PostFooter />
|
||||
<div class="flex gap-4 items-center flex-wrap">
|
||||
<UButton
|
||||
color="neutral"
|
||||
icon="i-ph-arrow-fat-lines-up-duotone"
|
||||
:label="t('top')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="top()"
|
||||
/>
|
||||
<UButton
|
||||
v-if="copied"
|
||||
color="green"
|
||||
icon="i-ph-check-square-duotone"
|
||||
:label="t('link.copied')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="neutral"
|
||||
icon="i-ph-square-duotone"
|
||||
:label="t('link.copy')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.prose h2 a,
|
||||
.prose h3 a,
|
||||
.prose h4 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.katex-html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"back": "Go back",
|
||||
"link": {
|
||||
"copied": "Link copied",
|
||||
"copy": "Copy link"
|
||||
},
|
||||
"top": "Go to top"
|
||||
|
||||
},
|
||||
"fr": {
|
||||
"back": "Retourner en arrière",
|
||||
"link": {
|
||||
"copied": "Lien copié",
|
||||
"copy": "Copier le lien"
|
||||
},
|
||||
"top": "Remonter en haut"
|
||||
},
|
||||
"es": {
|
||||
"back": "Volver atrás",
|
||||
"link": {
|
||||
"copied": "Link copiado",
|
||||
"copy": "Copiar link"
|
||||
},
|
||||
"top": "Ir arribaarr"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,117 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { TAGS } from '~~/types'
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
useSeoMeta({
|
||||
title: 'My Projects',
|
||||
description: t('description'),
|
||||
})
|
||||
|
||||
const { data: projects } = await useAsyncData('all-projects', () => {
|
||||
return queryCollection('projects')
|
||||
.order('favorite', 'DESC')
|
||||
.order('publishedAt', 'DESC')
|
||||
.all()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="space-y-12">
|
||||
<AppTitle
|
||||
:description="t('description')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
<PostAlert />
|
||||
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<NuxtLink
|
||||
v-for="(project, id) in projects"
|
||||
:key="id"
|
||||
:to="project.path"
|
||||
>
|
||||
<li
|
||||
class="flex flex-col h-full group hover:bg-neutral-200/50 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors justify-center"
|
||||
>
|
||||
<article class="space-y-2">
|
||||
<div
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="font-bold duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<UTooltip
|
||||
:text="t('tooltip.favorite')" :content="{
|
||||
align: 'center',
|
||||
side: 'right',
|
||||
sideOffset: 8,
|
||||
}"
|
||||
arrow
|
||||
>
|
||||
<UIcon
|
||||
v-if="project.favorite"
|
||||
name="i-ph-star-duotone"
|
||||
size="16"
|
||||
class="text-amber-500 hover:rotate-360 duration-500"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
<h3 class="text-md text-neutral-500 dark:text-neutral-400 italic">
|
||||
{{ project.description }}
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center mt-1">
|
||||
<div
|
||||
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
||||
>
|
||||
<ClientOnly>
|
||||
<p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
|
||||
</ClientOnly>
|
||||
<span class="w-2" />
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<ClientOnly>
|
||||
<UBadge
|
||||
v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
|
||||
:key="tag"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
>
|
||||
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
|
||||
</UBadge>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
</ul>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"title": "All my projects I have worked on, both academic and personal",
|
||||
"description": "A collection of my projects using R, Python, or web development technologies. These projects span various domains, including data analysis, machine learning, and web applications, showcasing my skills in coding, problem-solving, and project development.",
|
||||
"tooltip": {
|
||||
"favorite": "This project is one of my favorites"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels",
|
||||
"description": "Une collection de mes projets réalisés en R, Python, ou en développement web. Ces projets couvrent divers domaines, y compris l'analyse de données, l'apprentissage automatique et les applications web, mettant en avant mes compétences en codage, résolution de problèmes et développement de projets.",
|
||||
"tooltip": {
|
||||
"favorite": "Ce projet est l'un de mes favoris"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"title": "Todos mis proyectos en los que he trabajado, académicos y personales",
|
||||
"description": "Una colección de mis proyectos realizados en R, Python o tecnologías de desarrollo web. Estos proyectos abarcan diversos campos, como análisis de datos, aprendizaje automático y aplicaciones web, mostrando mis habilidades en programación, resolución de problemas y desarrollo de proyectos.",
|
||||
"tooltip": {
|
||||
"favorite": "Este proyecto es uno de mis favoritos"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,99 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: 'Things I use',
|
||||
description: t('description'),
|
||||
})
|
||||
|
||||
const { data: items } = await useAsyncData('uses', async () => await queryCollection('uses').all())
|
||||
const { data: categories } = await useAsyncData('categories', async () => await queryCollection('categories').all())
|
||||
|
||||
const photos = [
|
||||
{
|
||||
src: '/uses/jetbrains.webp',
|
||||
caption: 'caption.jetbrains',
|
||||
},
|
||||
{
|
||||
src: '/uses/pycharm.webp',
|
||||
caption: 'caption.pycharm',
|
||||
},
|
||||
{
|
||||
src: '/uses/vscode.webp',
|
||||
caption: 'caption.vscode',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<AppTitle
|
||||
:description="t('description')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
<div v-if="items" class="mt-12 space-y-12">
|
||||
<UsesList v-for="category in categories" :key="category.id" :title="category.name">
|
||||
<UsesItem
|
||||
v-for="(item, id) in items.filter(item => item.category === String(category.meta.title).toLowerCase())"
|
||||
:key="id"
|
||||
:item="item"
|
||||
/>
|
||||
<div v-if="category.carousel && category.carousel === 'ides'" class="relative">
|
||||
<UCarousel
|
||||
v-slot="{ item }"
|
||||
arrows
|
||||
loop
|
||||
class="rounded-lg"
|
||||
:autoplay="{ delay: 4000 }"
|
||||
:items="photos"
|
||||
:prev="{ variant: 'ghost' }"
|
||||
:next="{ variant: 'ghost' }"
|
||||
prev-icon="i-lucide-chevron-left"
|
||||
next-icon="i-lucide-chevron-right"
|
||||
>
|
||||
<ProseImg
|
||||
rounded
|
||||
:src="item.src"
|
||||
:label="t(item.caption)"
|
||||
:caption="t(item.caption)"
|
||||
/>
|
||||
</UCarousel>
|
||||
</div>
|
||||
</UsesList>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"title": "My uses",
|
||||
"description": "Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.",
|
||||
"caption": {
|
||||
"jetbrains": "My IntelliJ IDE",
|
||||
"vscode": "My Visual Studio Code IDE",
|
||||
"pycharm": "My PyCharm IDE"
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"title": "Mes usages",
|
||||
"description": "Logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande. Voici une grande liste de toutes mes choses préférées.",
|
||||
"caption": {
|
||||
"jetbrains": "Mon IDE IntelliJ Idea Ultimate",
|
||||
"vscode": "Mon IDE Visual Studio Code",
|
||||
"pycharm": "Mon IDE PyCharm"
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"title": "Mis aplicaciones.",
|
||||
"description": "Los programas que utilizo, los gadgets que adoro y otras cosas que recomiendo. Aquí te hago una lista de todas mis cosas preferidas. ",
|
||||
"caption": {
|
||||
"jetbrains": "Mi IDE IntelliJ Idea Ultimate",
|
||||
"vscode": "Mi IDE Visual Studio Code",
|
||||
"pycharm": "Mi IDE PyCharm"
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,283 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
const route = useRoute()
|
||||
const { data: post } = await useAsyncData(`writings/${route.params.slug}`, () =>
|
||||
queryCollection('writings').path(`/writings/${route.params.slug}`).first())
|
||||
|
||||
const {
|
||||
data: postDB,
|
||||
refresh,
|
||||
} = await useAsyncData(`writings/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
|
||||
function top() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
|
||||
const { copy, copied } = useClipboard({
|
||||
source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
|
||||
copiedDuring: 4000,
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: post.value?.title,
|
||||
description: post.value?.description,
|
||||
author: 'Arthur Danjou',
|
||||
})
|
||||
|
||||
function getDetails() {
|
||||
const likes = postDB.value?.likes ?? 0
|
||||
const views = postDB.value?.views ?? 0
|
||||
|
||||
const like = likes > 1 ? t('likes.many') : t('likes.one')
|
||||
const view = views > 1 ? t('views.many') : t('views.one')
|
||||
|
||||
return {
|
||||
likes: `${likes} ${like}`,
|
||||
views: `${views} ${view}`,
|
||||
}
|
||||
}
|
||||
|
||||
const likeCookie = useCookie<boolean>(`post:like:${route.params.slug}`, {
|
||||
maxAge: 7200,
|
||||
})
|
||||
|
||||
async function handleLike() {
|
||||
if (likeCookie.value)
|
||||
return
|
||||
await $fetch(`/api/posts/like/${route.params.slug}`, { method: 'PUT' })
|
||||
await refresh()
|
||||
likeCookie.value = true
|
||||
}
|
||||
|
||||
function scrollToSection(id: string) {
|
||||
const element = document.getElementById(id)
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main v-if="post && postDB">
|
||||
<div class="flex">
|
||||
<NuxtLinkLocale
|
||||
class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
|
||||
to="/writings"
|
||||
>
|
||||
<UIcon
|
||||
class="group-hover:-translate-x-1 transform duration-300"
|
||||
name="i-ph-arrow-left-duotone"
|
||||
size="20"
|
||||
/>
|
||||
{{ t('back') }}
|
||||
</NuxtLinkLocale>
|
||||
</div>
|
||||
<PostAlert class="mb-8" />
|
||||
<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" />
|
||||
<p>{{ getDetails().views }}</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="flex items-end gap-4 flex-wrap">
|
||||
<h1
|
||||
class="font-bold text-3xl text-black dark:text-white"
|
||||
>
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
||||
>
|
||||
<UIcon name="ph:calendar-duotone" size="16" />
|
||||
<p>{{ useDateFormat(post.publishedAt, 'DD MMMM YYYY').value }} </p>·
|
||||
<UIcon name="ph:timer-duotone" size="16" />
|
||||
<p>{{ post.readingTime }}min long</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="my-4 text-base">
|
||||
{{ post.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="post.body.toc && post.body.toc.links.length > 0" class="pt-4 top-0 flex justify-end sticky z-50">
|
||||
<UPopover
|
||||
mode="click"
|
||||
:content="{
|
||||
align: 'end',
|
||||
side: 'bottom',
|
||||
sideOffset: 8,
|
||||
}"
|
||||
>
|
||||
<UButton
|
||||
:label="t('toc')"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
||||
<template #content>
|
||||
<div class="p-2 z-50 flex flex-col gap-y-2">
|
||||
<div
|
||||
v-for="link in post!.body!.toc!.links"
|
||||
:key="link.id"
|
||||
class="inline"
|
||||
>
|
||||
<UButton
|
||||
size="lg"
|
||||
:label="link.text"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
:block="true"
|
||||
class="flex justify-start items-start p-1 cursor-pointer"
|
||||
@click="scrollToSection(link.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</div>
|
||||
<div
|
||||
v-if="post.cover"
|
||||
class="w-full rounded-md mb-8"
|
||||
>
|
||||
<ProseImg
|
||||
:src="`/writings/${post.cover}`"
|
||||
label="Writing cover"
|
||||
/>
|
||||
</div>
|
||||
<USeparator
|
||||
class="mt-4"
|
||||
icon="i-ph-pencil-line-duotone"
|
||||
/>
|
||||
<article class="mt-8">
|
||||
<ClientOnly>
|
||||
<ContentRenderer
|
||||
:value="post"
|
||||
class="!max-w-none prose dark:prose-invert"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<div class="space-y-4 mt-8">
|
||||
<PostFooter />
|
||||
<div class="flex gap-4 items-center flex-wrap justify-between sm:justify-start">
|
||||
<UButton
|
||||
:label="(postDB?.likes ?? 0) > 1 ? `${postDB?.likes ?? 0} likes` : `${postDB?.likes ?? 0} like`"
|
||||
:color="likeCookie ? 'red' : 'neutral'"
|
||||
icon="i-ph-heart-duotone"
|
||||
size="lg"
|
||||
:variant="likeCookie ? 'solid' : 'outline'"
|
||||
@click.prevent="handleLike()"
|
||||
/>
|
||||
<UButton
|
||||
color="neutral"
|
||||
icon="i-ph-arrow-fat-lines-up-duotone"
|
||||
:label="t('top')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="top()"
|
||||
/>
|
||||
<UButton
|
||||
v-if="copied"
|
||||
color="green"
|
||||
icon="i-ph-check-square-duotone"
|
||||
:label="t('link.copied')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
<UButton
|
||||
v-else
|
||||
color="neutral"
|
||||
icon="i-ph-square-duotone"
|
||||
:label="t('link.copy')"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click.prevent="copy()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.prose h2 a,
|
||||
.prose h3 a,
|
||||
.prose h4 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.katex-html {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"likes": {
|
||||
"one": "like",
|
||||
"many": "likes"
|
||||
},
|
||||
"views": {
|
||||
"one": "view",
|
||||
"many": "views"
|
||||
},
|
||||
"link": {
|
||||
"copied": "Link copied",
|
||||
"copy": "Copy link"
|
||||
},
|
||||
"top": "Go to top",
|
||||
"back": "Go back",
|
||||
"toc": "Table of contents"
|
||||
},
|
||||
"fr": {
|
||||
"likes": {
|
||||
"one": "like",
|
||||
"many": "likes"
|
||||
},
|
||||
"views": {
|
||||
"one": "vue",
|
||||
"many": "vues"
|
||||
},
|
||||
"link": {
|
||||
"copied": "Lien copié",
|
||||
"copy": "Copier le lien"
|
||||
},
|
||||
"top": "Remonter en haut",
|
||||
"back": "Retourner en arrière",
|
||||
"toc": "Table des matières"
|
||||
},
|
||||
"es": {
|
||||
"likes": {
|
||||
"one": "like",
|
||||
"many": "likes"
|
||||
},
|
||||
"views": {
|
||||
"one": "view",
|
||||
"many": "views"
|
||||
},
|
||||
"link": {
|
||||
"copied": "Link copiado",
|
||||
"copy": "Copiar link"
|
||||
},
|
||||
"top": "Ir arribaarr",
|
||||
"back": "Volver atrás",
|
||||
"toc": "Tabla de contenidos"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@@ -1,111 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { TAGS } from '~~/types'
|
||||
|
||||
const { t } = useI18n({
|
||||
useScope: 'local',
|
||||
})
|
||||
useSeoMeta({
|
||||
title: 'My Shelf',
|
||||
description: t('description'),
|
||||
})
|
||||
|
||||
const { data: writings } = await useAsyncData('all-writings', () => {
|
||||
return queryCollection('writings')
|
||||
.order('publishedAt', 'DESC')
|
||||
.all()
|
||||
})
|
||||
|
||||
const groupedWritings = computed(() => {
|
||||
const grouped: Record<string, any[]> = {}
|
||||
writings.value!.forEach((writing: any) => {
|
||||
const year = new Date(writing.publishedAt).getFullYear().toString()
|
||||
if (!grouped[year]) {
|
||||
grouped[year] = []
|
||||
}
|
||||
grouped[year].push(writing)
|
||||
})
|
||||
return Object.entries(grouped).reverse()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="space-y-12 mb-12 relative">
|
||||
<AppTitle
|
||||
:description="t('description')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
<PostAlert />
|
||||
<div class="space-y-8">
|
||||
<div v-for="year in groupedWritings" :key="year[0]" class="lg:space-y-6 relative">
|
||||
<h2 class="text-4xl lg:absolute top-2 -left-16 font-bold opacity-10 select-none pointer-events-none lg:[writing-mode:vertical-rl] lg:[text-orientation:upright] pl-1 lg:pl-0">
|
||||
{{ year[0] }}
|
||||
</h2>
|
||||
<ul class="relative grid grid-cols-1 gap-2">
|
||||
<NuxtLink
|
||||
v-for="(writing, id) in year[1]"
|
||||
:key="id"
|
||||
:to="writing.path"
|
||||
>
|
||||
<li
|
||||
class="h-full group hover:bg-neutral-200/50 duration-300 p-1 lg:p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<h1
|
||||
class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"
|
||||
>
|
||||
{{ writing.title }}
|
||||
</h1>
|
||||
<h3 class="text-neutral-600 dark:text-neutral-400 italic">
|
||||
{{ writing.description }}
|
||||
</h3>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-1">
|
||||
<div
|
||||
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
|
||||
>
|
||||
<ClientOnly>
|
||||
<p>{{ useDateFormat(writing.publishedAt, 'DD MMM').value }} </p>
|
||||
</ClientOnly>
|
||||
<span>·</span>
|
||||
<p>{{ writing.readingTime }}min</p>
|
||||
<span class="w-2" />
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<ClientOnly>
|
||||
<UBadge
|
||||
v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
|
||||
:key="tag"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
>
|
||||
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
|
||||
</UBadge>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</NuxtLink>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"title": "Writings on math, artificial intelligence, development, and my passions.",
|
||||
"description": "All my reflections on programming, mathematics, artificial intelligence design, etc., are organized chronologically."
|
||||
},
|
||||
"fr": {
|
||||
"title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions.",
|
||||
"description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique.",
|
||||
"alert": {
|
||||
"title": "Attentions aux traductions!",
|
||||
"description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones.",
|
||||
"description": "Todas mis reflexiones sobre programación, matemáticas, diseño de inteligencia artificial, etc., están organizadas cronológicamente."
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
Reference in New Issue
Block a user