📝 ブログの構築

Next.js でブログを構築する

  • Qiita で色々記事を書き始めたのですが、技術と関係ないものも書くことができるブログが欲しいなと思って、自分のブログを作ることにしました。
  • 技術書やビジネス書の読書メモと、考えをまとめた思考メモ、Qiita でまとめる以前の技術メモをとりあえずの用途としています。
  • 私は趣味でパンを焼くので、ブログにも絵文字を散りばめてみました。
    • パンくずリストにめっちゃパンが出てるのがお気に入りです。

何で組むか

使ったものたち

Next.js

  • 言わずと知れた React のメタフレームワーク。
  • 今回はApp Routerで作っています。

Contentlayer

  • Markdown 形式のドキュメントを型つきの JSON として扱えるようにしてくれるツールです。

Tailwind CSS

  • Next.js のスターターに最初から入ってるやつ。
    • @applyは結構積極的に使っていくタイプ。
      • これを使うと Tailwind らしさが多少損なわれるものの、似たようなスタイルが何度も出てくるようなら、DRY の精神で@applyしたほうがいいと思ってます。
  • なお、Markdown ブログを作る記事でよく出てくるtailwindcss/typographyですが、今回は使わずにコードブロック以外は自力でスタイルを当てました。

UI ライブラリ

  • UI ライブラリは使いませんでした。
    • あんまりリッチな UI という感じはないですが、Tailwind CSS でスタイリングしたらまあ十分じゃないかなと思っています。
      • App Router使ってると、なるべく Client Component を使わないようにしたくなりませんか？
    • この意味では、daisyUIなどの CSS フレームワークは検討の価値ありです。

トップページ

  • Qiita APIを叩いて Qiita の記事を直近 4 件表示しています。

  • ナビゲーションは最初primaryのベタだったのですが、そこはかとなくダサかったので着色はborderだけで我慢しました。

    • デザインって難しいですね。

  • テーマはライトとダークの 2 種類ですが、Qiita に書いた通り、キーカラーを 3 色(primary、secondary、tertiary)決めたら生成するようになっています。

    • 季節とかで変えても楽しいかもしれません。

コードブロック

// tailwind.config.ts
import generateColorScales from './generateColorScales';
 
const config: Config = {
  content: [
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
     colors: {
      ...generateColorScales({
        primary: "#8ec07c",
        secondary: "#458588",
        tertiary: "#d79921",
      }),
    },
  }
};

カスタムエレメント

  • あまりお行儀がいいとは言えないかもしれませんが、remark-directive-rehypeを使って、tag-[color]とnote-[color]の 2 種のカスタムエレメントを追加しています。
    • これらのカラーもテーマに定義してあるので、モードを切り替えると追従します。
    • オレオレ記法が増えるのはどうかというのはありますが、ブログとしての表現力は上がりますね。
#### tag
 
- :tag-primary[primary / 第一色]
- :tag-secondary[secondary / 第二色]
- :tag-tertiary[tertiary / 第三色]
- :tag-notice[notice / 注意]
- :tag-warning[warning / 警告]
- :tag-error[error / エラー]
 
#### note
 
:::note-primary
primary / 第一色
:::
 
:::note-secondary
secondary / 第二色
:::
 
:::note-tertiary
tertiary / 第三色
:::
 
:::note-notice
notice / 注意
:::
 
:::note-warning
warning / 警告
:::
 
:::note-error
error / エラー
:::

tag

  • primary / 第一色
  • secondary / 第二色
  • tertiary / 第三色
  • notice / 注意
  • warning / 警告
  • error / エラー

note

primary / 第一色

secondary / 第二色

tertiary / 第三色

notice / 注意

warning / 警告

error / エラー

定義

  • 定義しなくてもブラウザ側がよし何やってくれますが、ブラウザの解釈に甘えるのもアレなので、カスタムエレメントとして定義しています。
    • スタイルは Tailwind でやるので、単にspanやdivでラップしているだけですが。
// タグ
class TagPrimary extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('span');
    wrapper.innerHTML = '<slot></slot>';
    wrapper.setAttribute('class', 'tag-primary');
    this.shadowRoot.append(wrapper);
  }
}
 
// ノート
class NotePrimary extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('div');
    wrapper.innerHTML = '<slot></slot>';
    wrapper.setAttribute('class', 'note-primary');
    this.shadowRoot.append(wrapper);
  }
}

終わりに

  • 結構いい感じですが、まだまだやることがあります。

    • 少なくとも RSS 配信の対応と OGP イメージの対応はなんとかしたい。