versia-pub/blog
2
0
Fork 0
mirror of https://github.com/versia-pub/blog.git synced 2026-03-13 09:39:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: 📝 Write article about Versia 0.5

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-01-17 17:27:22 +01:00
parent d97efab9f3
commit 7589afd7b7
No known key found for this signature in database
16 changed files with 291 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/article/content.vue
View file

@ -1,7 +1,4 @@
<template>
<!-- <article
class="$style.content mx-auto max-w-3xl prose prose-invert mt-10 prose-code:before:content-none prose-code:after:content-none prose-a:text-orange-500 prose-a:underline"
v-html="body"></article> -->
<article :class="[$style.content, 'prose prose-invert prose-code:before:content-none prose-code:after:content-none']" v-html="body"></article>
</template>
@ -29,8 +26,12 @@ defineProps<{
@apply h-6 w-6 flex-none rounded-full bg-gray-800;
}
.content :global :has(.header-anchor):hover .header-anchor {
@apply opacity-100;
}
.content :global .header-anchor {
@apply no-underline absolute w-16 md:w-auto text-right left-[calc(100%-3.75rem)] md:-left-10 text-gray-200
@apply no-underline absolute size-6 md:w-auto text-right opacity-0 duration-75 left-[calc(100%-3.75rem)] md:-left-10 text-gray-200
}
.content :global .header-anchor::before {

8
components/article/image.vue
View file

@ -1,6 +1,9 @@
<template>
<nuxt-img :src="image" :width="width" :height="height" format="webp" alt="" :preload="true"
class="drop-shadow-2xl w-full rounded bg-zinc-900 ring-1 ring-white/10" />
<figure class="space-y-3 w-full">
<nuxt-img :src="image" :width="width" :height="height" format="webp" alt="" :preload="true"
class="drop-shadow-2xl w-full rounded bg-zinc-900 ring-1 ring-white/10" />
<figcaption v-if="caption" class="text-center text-sm text-gray-400">{{ caption }}</figcaption>
</figure>
</template>
<script lang="ts" setup>
@ -8,5 +11,6 @@ defineProps<{
image: string;
width?: number;
height?: number;
caption?: string;
}>();
</script>

4
components/article/title.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mx-auto max-w-2xl text-center flex items-center justify-center gap-8 flex-col">
<h1 v-if="title" class="text-4xl font-bold tracking-tight text-gray-50 sm:text-5xl">
<h1 v-if="title" class="text-4xl font-bold tracking-tight text-gray-50 sm:text-5xl font-title">
{{ title }}
</h1>
<div>
@ -18,7 +18,7 @@ defineProps<{
}>();
const formatDate = (date?: string) => {
return new Intl.DateTimeFormat(undefined, {
return new Intl.DateTimeFormat("en-GB", {
year: "numeric",
month: "long",
day: "numeric",