versia-pub/blog
2
0
Fork 0
mirror of https://github.com/versia-pub/blog.git synced 2026-03-13 01:29: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",

40
components/navigation/navbar.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<header class="shadow bg-zinc-800">
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="relative flex h-16 justify-between">
<div class="relative z-10 flex px-2 lg:px-0">
<div class="flex flex-shrink-0 items-center">
<img class="h-8 w-auto" src="https://cdn.versia.pub/branding/icon.svg"
alt="Pink rounded square with three white star icons in the center" />
</div>
</div>
<div class="relative z-0 flex flex-1 items-center justify-center px-2">
<div class="w-full max-w-xl">
<label for="search" class="sr-only">Search</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Icon name="tabler:search" class="size-5 text-gray-300" aria-hidden="true" />
</div>
<input id="search" name="search"
class="block w-full rounded-md border-0 bg-zinc-700 py-1.5 pl-10 pr-3 text-gray-200 ring-1 ring-inset ring-gray-700 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6"
placeholder="Search" type="search" />
</div>
</div>
</div>
</div>
<nav class="hidden sm:flex sm:flex-row flex-col justify-evenly gap-x-8 gap-y-2 py-2" aria-label="Global">
<a v-for="item in navigation" :key="item.name" :href="item.href"
:class="['text-gray-100 hover:bg-zinc-700 hover:text-gray-50 inline-flex items-center justify-center rounded py-2 px-3 text-sm font-medium duration-200 w-full']">{{ item.name }}</a>
</nav>
</div>
</header>
</template>
<script lang="ts" setup>
const navigation = [
{ name: "Dashboard", href: "#", current: true },
{ name: "Team", href: "#", current: false },
{ name: "Projects", href: "#", current: false },
{ name: "Calendar", href: "#", current: false },
];
</script>