Writing article

README.md

@@ -25,7 +25,7 @@
 ### Writings
 
 Add a new `.md` file in `/content/writings/` and follow the same pattern as the other articles. Add images
-in `/public/images/writings/`.
+in `/public/writings/`.
 
 ### Uses
 

app/components/AppFooter.vue

@@ -34,7 +34,7 @@ const socials = [
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
         <h1>Find me on:</h1>
-        <div class="flex gap-4 flex-wrap">
+        <div class="flex gap-2 flex-wrap">
           <HomeLink
             v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
             :key="social.label"

app/components/content/ProseA.vue

@@ -0,0 +1,25 @@
+<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>

app/components/content/ProseH2.vue

@@ -5,7 +5,7 @@
     <a
       v-if="id && generate"
       :href="`#${id}`"
-      class="font-semibold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
+      class="text-xl font-bold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
     >
       <slot />
     </a>

app/components/content/ProseH3.vue

@@ -1,5 +1,23 @@
 <template>
-  <h3 class="text-base text-neutral-700 dark:text-neutral-300">
+  <h2
-    <slot />
+    :id="id"
-  </h3>
+  >
+    <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>
+
+<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>

app/components/content/Quote.vue

@@ -11,7 +11,7 @@
         </div>
       </UTooltip>
     </div>
-    <p class="my-0">
+    <p class="not-prose">
       Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions,
       appreciations, questions or anything!
     </p>

app/pages/writings/[slug].vue

@@ -65,7 +65,7 @@ async function handleLike() {
     <p class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
       {{ getDetails() }}
     </p>
-    <div>
+    <div class="mt-2">
       <div class="flex items-end gap-2 flex-wrap">
         <h1
           class="font-bold text-3xl text-black dark:text-white"
@@ -152,7 +152,8 @@ async function handleLike() {
 
 <style>
 .prose h2 a,
-.prose h3 a {
+.prose h3 a,
+.prose h4 a {
   @apply no-underline;
 }
 </style>

content/writings/how-does-my-website-work.md

@@ -1,39 +0,0 @@
----
-slug: how-does-my-website-work
-title: How does my website work?
-description: My new website is using a fantastical stack and I am explaining how my playground works
-publishedAt: 2024/06/21
-readingTime: 7
----
-
-## Ideas and Goals
-
-### A playground for ideas
-
-Testing frameworks (new nuxt 3), improving css style, discovering new technologies and frameworks
-
-### Fast
-
-Faster than the old one thanks to the new version of Nuxt
-
-## FrontEnd & BackEnd with Nuxt 3
-
-### Nuxt3 & NuxtUI, Tailwind
-
-### Database & Deployment
-
-NuxtHub & Cloudflare workers
-
-### Editing
-
-Nuxt Studio
-
-## How much everything costs
-
-0 thanks to nuxt free plan and cloudflare free plan
-
-## What's next
-
-### Performance
-
-### Style & Animation

content/writings/how-my-website-works.md

@@ -0,0 +1,146 @@
+---
+slug: how-my-website-works
+title: How my website works?
+description: My new website is using a fantastical stack and I am explaining how my playground works
+publishedAt: 2024/06/21
+readingTime: 5
+---
+
+My personal website is an over-engineered playground where I tinker, explore new technologies, experiment with tools,
+break conventional rules, and satisfy my deep curiosity about web software.
+
+While it's still fresh in my mind, I wanted to document how this version of the site works, the tools I used to build
+it, and the challenges I overcame to bring it to its current state.
+
+![Website](/writings/website.png)
+
+## Ideas and Goals
+
+Most of the time, I work on my site for fun and without any profit motive. However, while building this latest version,
+I managed to keep a few key ideas and goals in mind:
+
+### Reduce writing friction
+
+This new version of my website was built with the idea that I should be able to add, edit, and delete content directly
+from the front-end. This means that everything needs to be backed by a database or CMS, which quickly adds complexity.
+But at the end of the day, adding a bookmark should be a matter of pasting a URL and clicking save. Writing a blog post
+should be a matter of typing some markdown and clicking publish.
+
+Extra friction on these processes would make me less likely to keep things up to date or share new things.
+
+### A playground for ideas
+
+I want my website to be a playground where I can safely experiment with new technologies and packages, including testing
+frameworks (like the new Nuxt 3 stack), improving CSS styles with Tailwind, and discovering new technologies and
+frameworks, in a way that allows for easy isolation and deletion. This requirement made Nuxt.js an obvious choice,
+thanks to its support for hybrid page rendering strategies—static, server-rendered, or client-rendered. More on this
+below.
+
+### Fast
+
+The new version of my website is faster than the old one, thanks to the latest version of Nuxt. This improvement
+enhances the overall user experience and ensures that the site remains responsive and efficient.
+
+## FrontEnd & BackEnd with Nuxt 3
+
+I wanted this version of my site to reflect my personality, especially because it seemed like a fun project! What would
+a 'personal application' look like, showcasing everything I've created? I aimed for a clean, monochrome design with
+plenty of 'Easter eggs' to keep things interesting.
+
+### Nuxt 3
+
+Nuxt.js is my front-end framework of choice. I particularly appreciate it for its comprehensive and complementary Vue
+and Nuxt ecosystem. The filesystem-based router provides an intuitive and powerful abstraction for building the route
+hierarchy. Nuxt.js also benefits from a large community that has thoroughly tested the framework, addressing edge cases
+and developing creative solutions for common Vue, data recovery, and performance issues. Whenever I encounter a problem,
+I turn to the Nuxt.js discussions on [GitHub](https://github.com/nuxt) or
+their [Discord server](https://go.nuxt.com/discord). Almost every time, I find that others have already come up with
+innovative solutions to similar challenges.
+
+Nuxt.js is also fast. It optimizes performance by speeding up local builds, automatically compressing static assets, and
+ensuring quick deployment times. The regular project updates mean my site continually gets faster over time—at no extra
+cost!
+
+### Styling
+
+#### Tailwind CSS
+
+Tailwind is my favorite CSS authoring tool... ever. It's incredibly effective. I often see debates on Twitter about
+whether Tailwind is the best or worst thing ever, and I prefer not to engage in that discussion. Here's my take:
+
+Tailwind is a toolkit that makes everything great by default and fast. The magic lies in its token system and the
+default values built into the framework. Once I grasped the semantics of Tailwind, I was able to style my tags at the
+speed of thought.
+
+Tailwind provides everything I need out of the box, but I've gradually added a bit of custom CSS to make things more
+unique.
+
+#### Nuxt UI
+
+Nuxt UI is a new tool I've been using since its release to enhance and streamline my Nuxt projects. It’s a module that
+offers a collection of Vue components and composables built with Tailwind CSS and Headless UI, designed to help you
+create beautiful and accessible user interfaces.
+
+Nuxt UI aims to provide everything you need for the UI when building a Nuxt app, including components, icons, colors,
+dark mode, and keyboard shortcuts. It's an excellent tool for both beginners and experienced developers.
+
+### Database & Deployment
+
+#### NuxtHub & Cloudflare workers
+
+NuxtHub is an innovative deployment and management platform tailored for Nuxt, leveraging the power of Cloudflare.
+Deploy your application effortlessly with database, key-value, and blob storage—all configured seamlessly within your
+Cloudflare account.
+
+NuxtHub enables cost-effective hosting of high-performance Nuxt applications across multiple environments. It simplifies
+the process of launching your app swiftly, eliminating concerns about server setup or complex deployment pipelines with
+just a single command.
+
+#### Drizzle
+
+Drizzle is a unique ORM that offers both relational and SQL-like query APIs, combining the best of both worlds for
+accessing relational data. Lightweight, performant, typesafe, and designed to be serverless-ready, Drizzle is also
+flexible and gluten-free—delivering a sober and seamless experience.
+
+Drizzle isn't just a library; it's an exceptional journey 🤩. It empowers you to build your project without imposing on
+your structure or workflow. With Drizzle, you can define and manage database schemas in TypeScript, access your data
+using SQL-like or relational methods, and utilize optional tools to enhance your development experience significantly.
+
+One word : `If you know SQL — you know Drizzle.`
+
+### Writing
+
+#### Nuxt Studio
+
+Nuxt Studio introduces a fresh editing experience for your Nuxt Content website, providing limitless customization and a
+user-friendly interface. Edit your website effortlessly with our editor reminiscent of Notion, fostering seamless
+collaboration between developers and copywriters. It offers a rich text editor, markdown support, and a live preview,
+enabling you to create and edit content with ease.
+
+#### Markdown
+
+I've abandoned using rich text editors on the web. They're overly complex, each with its own intricate abstractions for
+blocks and elements. To avoid another major rewrite in the near future, I've sought the simplest, most straightforward
+solution for publishing content on my site: plain text.
+
+The article you're currently reading is plain text stored in MySQL, rendered using vue-markdown. You can view my custom
+element renderings here. I enhance my Markdown capabilities by employing plugins like remark-gfm, which adds support for
+tables, strikethroughs, footnotes, and other features.
+
+Compromises are inevitable! I've chosen to sacrifice some features for simplicity and speed. I'm content with my
+decision, as it aligns with my goal of reducing friction in the writing process.
+
+## How much everything costs
+
+I'm often asked how much it costs to run my website. Here's a breakdown of the costs:
+
+- NuxtHub: 0€
+- Cloudflare Workers: 0€
+- Nuxt Studio: 0€
+  Total: 0€ thanks to nuxt free plan and cloudflare free plan
+
+## Thanks
+
+I want to thank the Nuxt team for their hard work and dedication to the project. I also want to thank the community for
+their support and for providing me with the tools I needed to build this site. I want to add a special thanks
+to [Estéban](https://x.com/soubiran_) for solving `All` my problems and for inspiring me rewriting my website.