このサイトのAstro環境

2024-04-01

このサイトはAstroで構築しているので、以下は次やるときに忘れないようにメモ。node.jsはHomebrewでインストール・管理している。

npm create astro@latest

TypeScriptは一番緩いやつ。ある程度理解したらちゃんとStrictで書くぞ…という気持ち。Gitは入れてる。
作成したディレクトリに移動して以下を実行。それぞれMDX対応、サイトマップ、RSS、GAのPageSpeed Insightsパフォーマンス最適化。

npx astro add mdx
npx astro add sitemap
npm install @astrojs/rss
npm install -D @astrojs/partytown

コードブロック機能拡張のExpressive CodeとTailwind CSSを入れた。Tailwind CSSのことあまりよくわかってない。
remark-link-cardも入れる。

npx astro add astro-expressive-code
npx astro add tailwind
npm install remark-link-card

フォントはFontsourceからNoto Sans JPを入れた。Astroのベーステンプレートで読み込んで、tailwind.config.mjsで指定する。

npm install @fontsource-variable/noto-sans-jp

RSSフィードで記事の全文を出力するため、sanitize-htmlとmarkdown-itを入れる。

npm install sanitize-html
npm install markdown-it

設定ファイルはこんな感じ。

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import partytown from '@astrojs/partytown';
import tailwind from '@astrojs/tailwind';
import expressiveCode from 'astro-expressive-code';
import rlc from 'remark-link-card';

// https://astro.build/config
export default defineConfig({
  site: 'https://bblo-blog.com',
  markdown: {
    syntaxHighlight: false,
    remarkPlugins: [rlc]
  },
  integrations: [
    expressiveCode({
      themes: 'nord',
      styleOverrides: {
        codeFontSize: '1rem'
      }
    }),
    mdx(),
    sitemap(),
    partytown({
      config: {
        forward: ['dataLayer.push']
      }
    }),
    tailwind()
  ]
});

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Noto Sans JP Variable', ...defaultTheme.fontFamily.sans]
      },
      flex: {
        '1-100': '1 1 100px',
        '4-100': '4 1 100px'
      }
    }
  },
  plugins: [
    function({addComponents}) {
      addComponents({
        '.container': {
          maxWidth: '90%',
          '@screen sm': {
            maxWidth: '650px',
          },
          '@screen md': {
            maxWidth: '650px',
          },
          '@screen lg': {
            maxWidth: '650px',
          },
          '@screen xl': {
            maxWidth: '650px',
          },
        },
        '.list-circle': {
          listStyleType: 'circle'
        },
        '.list-square': {
          listStyleType: 'square'
        },
      })
    },
  ],
}

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
const parser = new MarkdownIt();

export async function GET(context) {
  const article = await getCollection('article');
  return rss({
    title: 'bblo-blog.com RSS Feed',
    description: 'bblo-blog.com RSS Feed',
    site: context.site,
    items: article.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      customData: post.data.customData,
      content: sanitizeHtml(parser.render(post.body)),
      link: `/article/${post.slug}/`,
    })),
  });
}

Astroをアップグレードする場合

npx @astrojs/upgrade