mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-02-01 10:29:31 +01:00
Working on v2
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user