Technology stack of this blog

As a Note

I haven't done anything special because the Nuxt ecosystem is amazing.
If I consolidate the focused time, I can probably implement it in less than a day.
It really was that great. (Thank you very much)

So, I don't have much to say, but I'll write down what I used.

1. Nuxt Content

Nuxt Content made easy for Vue Developers

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.

https://content.nuxt.com/

Nuxt Content made easy for Vue Developers

Used in Document Driven Mode.

According to the documentation, quickly create a project, enable Document Driven in nuxt.config.ts, implement pages/[...all].vue, and create content in markdown files in content/.

It's quite easy.

In pages/[...all].vue, all content is trapped.

import { useContent } from "#imports";
const { page, layout } = useContent();

With this, you can access structured page information.

Then, casually write layouts and render content with ContentRenderer provided by Nuxt Content.
Style it to your liking.

<template>
  <NuxtLayout :name="layout as string || 'default'">
    <ContentRenderer
      v-if="page"
      :key="(page as any)._id"
      :value="page"
    />
  </NuxtLayout>
</template>

Embedding links didn't seem to be supported by default, so I tried adding a few remark plugins.

remark plugins

You can configure plugins in Nuxt Content settings, so make use of that.

Configuration - Nuxt Content

Nuxt Content has many properties that can be configured to fit your needs.

https://content.nuxt.com/get-started/configuration#markdown

2. Nuxt OG Image

I use Nuxt OG Image for dynamically generating OG images.

Install Nuxt OG Image · Nuxt SEO

Get started with Nuxt OG Image by installing the dependency to your project.

https://nuxtseo.com/og-image/getting-started/installation

This was also a very good experience.

Create a component representing OG, and simply set it up on the necessary pages using defineOgImage.

<!-- MyOgImage.vue -->
<script setup lang="ts">
defineProps<{ title: string; description?: string }>();
</script>

<template>
  <div class="og-container">
    <h1>{{ title }}</h1>
    <p
      v-if="description"
      class="description"
    >
      {{ description }}
    </p>
  </div>
</template>

<style scoped>
/* TODO: styling */
</style>

import { defineOgImage, useContent } from "#imports";

const { page } = useContent();

defineOgImage({
  component: "MyOgImage",
  title: page.value.title,
  description: page.value.description,
  ...page.value.ogImage || {},
});

3. @unocss/nuxt

I tried using the unocss Nuxt Module for styling.

UnoCSS

The instant on-demand Atomic CSS engine

https://unocss.dev/integrations/nuxt

Although I say that, I often write directly in the SFC style.

I'm not familiar with unocss, which is a major factor, but for a blog like this, it was faster to write CSS quickly.
I'll try to write only with unocss somewhere.