Technology stack of this blog

Nuxt Content

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.
Nuxt Content made easy for Vue Developers favicon 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.
Configuration - Nuxt Content favicon https://content.nuxt.com/get-started/configuration#markdown
Configuration - Nuxt Content

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.
Install Nuxt OG Image · Nuxt SEO favicon https://nuxtseo.com/og-image/getting-started/installation
Install Nuxt OG Image · Nuxt SEO

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
UnoCSS favicon https://unocss.dev/integrations/nuxt
UnoCSS

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.

4. @nuxt/eslint

Nuxt ESLint
Collection of ESLint-related packages for Nuxt
Nuxt ESLint favicon https://eslint.nuxt.com/
Nuxt ESLint

I don't think I need to explain this.

As a personal preference,

{
  quotes: "double",
  semi: true,
}

is essential, but everything else is used by default.

It's really nice and easy because with one command, it's mostly set up. (npx nuxi module add eslint does almost all the setup).

5. Others

I write markdown styling and other things normally with CSS.
I think it turned out pretty much to my liking. Simple.
I'm also setting up textlint.

GitHub - textlint/textlint: The pluggable natural language linter for text and markdown.
The pluggable natural language linter for text and markdown. - textlint/textlint
GitHub - textlint/textlint: The pluggable natural language linter for text and markdown. favicon https://github.com/textlint/textlint
GitHub - textlint/textlint: The pluggable natural language linter for text and markdown.

It was really convenient to preview OG images with Nuxt DevTools.

Hosting is done on Vercel.

I'll probably move somewhere to Nuxt Hub.

Build, Deploy & Manage Nuxt apps that scale · NuxtHub
NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. Deploy your Nuxt apps at low cost and with ease, ensuring lightning-fast performance for your users anywhere on the planet. Ship faster with our built-in full-stack features: AI, Database, Files Storage, KV, Caching and more.
Build, Deploy & Manage Nuxt apps that scale · NuxtHub favicon https://hub.nuxt.com
Build, Deploy & Manage Nuxt apps that scale · NuxtHub

I'll... probably release the source code for this blog when I feel like it.

© 2024-PRESENT ubugeeei. All rights reserved.