blog.sh1ma.dev

// readdir, pathのimport
import { readdir } from "fs/promises"
import path from "path"
 
// 記事一覧を取得する関数
// これを記事一覧ページで使っていた
export const getArticles = async () => {
  // .mdxファイルがあるディレクトリからファイル一覧を取得
  const postDirPath = path.join(process.cwd(), "src/markdown/posts")
  const postFilePaths = await readdir(postDirPath)
 
  const postMetas = await Promise.all(
    // ファイルパス一覧をmapで処理していく
    postFilePath
      .map(async (filePath) => {
        // .mdxファイルから`meta`を一度インポートする。
        // `meta`にはタイトルの情報と公開日の情報が含まれている
        const { meta } = (await import(`@/markdown/posts/${filePath}`)) as {
          meta: { title: string; publishedAt: string }
        }
 
        // metaと記事のidを生成して返す
        return { ...meta, id: filePath.replace(/\.mdx$/, "") }
      })
      // ソートして降順にする
      .sort()
      .reverse(),
  )
  return postMetas
}

 
// 記事のmarkdownファイルの定義
export const Article = defineDocumentType(() => ({
  // ここで指定した名前が生成される型の名前になります
  name: "Article",
  // どのようなフォルダに入っているか指定します
  // ここではフルパスは指定しません
  // 下記のmakeSourceに渡すパスの以下をここに記述すればよいです
  filePathPattern: `**/posts/*.md`,
  // contentType: "mdx",
 
  // フィールドの設定です
  // フィールドではmarkdownのyaml headerに書かれたmetadataを定義しておきます
  fields: {
    title: { type: "string", required: true },
    publishedAt: { type: "date", required: true },
  },
  // computedFieldsは生成時に自動で計算されるメタデータです
  // 自分は記事のidを.mdファイルのファイル名にしたかったのでその定義を行いました
  computedFields: {
    id: {
      type: "string",
      resolve: (doc) => doc._raw.sourceFileName.replace(/\.md$/, ""),
    },
  },
}))
 
// about.mdの設定
export const About = ...
 

import { allArticles } from "contentlayer/generated"

const getContent = async (slug: string) => {
  const { default: Content, meta } = (await import(
    `@/markdown/posts/${slug}.mdx`
  )) as { default: React.FC; meta: { title: string; publishedAt: string } }
 
  return { Content, meta }
}

import { allArticles } from "contentlayer/generated"
const post = allArticles.find((post) => post.id === slug)