chore: add components

.website/.vitepress/config.mts

@@ -35,6 +35,10 @@ export default defineConfig({
         text: 'Pub.dev',
         link: 'https://pub.dev/packages/serinus'
       },
+      {
+        text: 'Blog',
+        link: '/blog/'
+      }
     ],
     sidebar: [
       {

.website/blog/index.md

@@ -0,0 +1,28 @@
+---
+title: Serinus Blog
+layout: page
+sidebar: false
+editLink: false
+search: false
+head:
+    - - meta
+      - property: 'og:title'
+        content: Blog - Serinus
+
+    - - meta
+      - name: 'description'
+        content: Updates and release notes of Serinus
+
+    - - meta
+      - property: 'og:description'
+        content: Updates and release notes of Serinus
+---
+
+<script setup>
+    import Blog from '../components/blog.vue'
+</script>
+
+<Blog
+	:posts="[
+	]"
+/>

.website/components/blog.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+    posts: Array
+})
+
+</script>
+
+<template>
+
+	<div>
+		<header class="flex flex-col justify-center items-center max-w-3xl gap-3 w-full mx-auto pt-20 pb-4">
+			<h1 class="text-5xl font-bold">
+				Serinus Blog
+			</h1>
+			<p class="text-gray-300 text-lg">
+				Release notes, updates, and more.
+			</p>
+		</header>
+		<main class="flex flex-col max-w-xl gap-4 w-full mx-auto my-8">
+			<a v-for="(post, index) in props.posts"
+				class="p-4 rounded-lg hover:bg-orange-500/25 focus:bg-orange-500/25 transition-colors cursor-pointer"
+				:href="post.href" :key="post.date + post.href">
+				<article v-if="index == 0" class="flex flex-col gap-2">
+					<img :src="post.src" :alt="post.alt" class="rounded-lg" />
+					<h2 class="text-3xl font-bold">
+						{{ post.title }}
+					</h2>
+					<h3 class="text-sm text-gray-400"> {{ post.date }}</h3>
+				</article>
+				<article v-if="index > 0" class="flex gap-2">
+					<div class="rounded-lg w-24 h-24 bg-cover bg-center" :style="'background-image: url('+post.src+')'"></div>
+					<div class="flex flex-col gap-2">
+						<h2 class="text-2xl font-bold">
+							{{ post.title }}
+						</h2>
+						<h3 class="text-sm text-gray-400"> {{ post.date }}</h3>
+					</div>
+				</article>
+			</a>
+		</main>
+	</div>
+
+</template>

.website/components/blog_page.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { defineProps, onMounted, onUnmounted } from 'vue'
+
+const authors = {
+    "Francesco Vallone": {
+        src: 'francesco_vallone.webp',
+        twitter: 'francescovll'
+    }
+}
+
+type Authors = typeof authors
+
+const props = defineProps<{
+    title: string
+    src: string
+    alt: string
+    author: keyof Authors
+    date: string
+    shadow?: boolean
+}>()
+
+const author = authors[props.author]
+const profile = `/blog/authors/${author.src}`
+const twitter = `https://twitter.com/${author.twitter}`
+
+const mutated = ['.aside', '.content', '.content-container', '.VPDocFooter']
+onMounted(() => {
+    mutated.forEach((selector) => {
+        document.querySelector(selector)?.classList.add('blog')
+    })
+})
+
+onUnmounted(() => {
+    mutated.forEach((selector) => {
+        document.querySelector(selector)?.classList.remove('blog')
+    })
+})
+</script>
+
+<template>
+    <article id="blog" class="flex flex-col max-w-3xl w-full mx-auto mt-8">
+        <h1 class="!text-3xl !md:text-4xl font-medium">
+            {{ props.title }}
+        </h1>
+        <aside class="flex gap-3 items-center mt-4">
+            <img
+                class="w-9 h-9 rounded-full"
+                :src="profile"
+                :alt="props.author"
+            />
+            <div class="flex flex-col justify-start">
+                <h3 class="!text-sm !m-0 opacity-75">{{ props.author }}</h3>
+                <p
+                    class="flex flex-row items-center gap-2 !text-xs !m-0 opacity-75"
+                >
+                    <span>{{ props.date }}</span>
+                    <span>ー</span>
+                    <a :href="twitter" target="_blank">@{{ author.twitter }}</a>
+                </p>
+            </div>
+        </aside>
+        <img :src="props.src" :alt="props.alt" class="w-full mt-6 mb-2" :class="props.shadow ? 'shadow-xl' : 'border'" />
+        <main id="blog-content">
+            <slot />
+        </main>
+    </article>
+</template>
+
+<style>
+.blog.aside {
+    position: fixed !important;
+    z-index: 10;
+    left: calc(50% + 48rem / 2 + 2rem) !important;
+}
+
+.blog.content,
+.blog.content-container {
+    max-width: unset !important;
+}
+
+.blog.VPDocFooter {
+    display: none !important;
+}
+
+#blog {
+    @apply text-lg mt-0;
+}
+
+#blog>img {
+    @apply rounded-lg;
+}
+
+#blog>h1 {
+    @apply !text-3xl md:!text-4xl font-semibold;
+}
+
+#blog>h2 {
+    @apply !text-2xl md:!text-3xl font-semibold;
+}
+
+#blog>h3 {
+    @apply !text-xl md:!text-2xl font-semibold;
+}
+
+#blog-content>video,
+#blog-content>*>video,
+#blog-content>img,
+#blog-content>*>img {
+    @apply rounded-xl my-4;
+    /* box-shadow: 0 8px 25px rgba(0,0,0,.1) */
+}
+
+.-png {
+    box-shadow: unset !important;
+    background: transparent !important;
+}
+
+@media (min-width: 768px) {
+    #blog>h1 {
+        line-height: 3.25rem !important;
+    }
+}
+</style>

.website/components/graph_line.vue

@@ -15,8 +15,6 @@ const scalePadding = (value, max) =>
 	`padding-left: ${((value / max) * 100).toFixed(2)}%`
 const format = new Intl.NumberFormat().format
 
-console.log(scale(props.value, props.max))
-
 </script>
 
 <template>

.website/package.json

@@ -16,6 +16,6 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
-    "vitepress": "^1.3.1"
+    "vitepress": "^1.4.1"
   }
 }