
アイコン入ると質素な感じがなくなってかっこいい〜

# fontawesome で追加しました

Markdown 記事の YAML に icon を追加しました。
icon には fontawesome の class を記載すると記事一覧にアイコンとして表示します。

```yaml
---
title: "記事アイコンを追加しました"
date: "2022-04-09"
topics: ["blog"]
icon: "fa-solid fa-paw"
---
```

https://fontawesome.com/icons/paw?s=solid

# デフォルトアイコン設定

記事ごとにアイコンセットするのが面倒なときは、空欄（ `icon: ""` ）にするとデフォルトアイコンにセットしたアイコンを表示します。

```json:site.config.json
{
  ...
  "defaultPostIcon": "fa-solid fa-folder-open"
}
```

# ランダムカラーモード

記事名からアイコンカラーを計算する機能も追加しました。
`true` にするとランダム、`false` にするとサイトのプライマリカラーです。

```json:site.config.json
{
  ...
  "randomColorPostIcon": true
}
```

## 実装

タイトル文字列から各文字のコードを取得して足していき、hsl を使って色調整をしています。

```typescript:slugCard.tsx
const stringToNumber = (str: string): number =>
  Array.from(str)
    .map((ch) => ch.charCodeAt(0))
    .reduce((a, b) => a + b);
const iconColorNum = stringToNumber(title) % 360;
const iconColorHsl = config.randomColorPostIcon
  ? `hsl(${iconColorNum}, 40%, 60%)`
  : "";
```

`<Icon>` コンポーネントは `sx={{ color: "" }}` だと `color="primary"` が優先されます。

```typescript:slugCard.tsx
<Icon
  className={icon || config.defaultPostIcon}
  color="primary"
  sx={{
    fontSize: "40px",
    m: 2,
    color: iconColorHsl,
  }}
/>
```

# 困ったこと

## Google Material Icons のフォントサイズが変更できない

記事の Markdown にアイコン名をセットしたかったので、SVG Icon を利用することができず、
Web Font のアイコンセットを利用することにしました。

最初は、Material UI 5 の `<Icon></Icon>` コンポーネントのデフォルトである Google Material Icons を利用することを考えていました。

ただ、この場合は Google Material Icons の CSS をオーバライドすることができずフォントサイズが変更できません。

```jsx
// 以下の書き方だとフォントサイズが変更されない
<Icon sx={{ fontSize: "50px" }}>
```

https://mui.com/material-ui/icons/

公式サイトに書いてあるとおり、フォントサイズは変更されません。
MUI の Issue として挙げられており、解決策も書いてありますがあとから見たときにわからなくなると思ったので素直に fontawesome を利用することにしました。

https://github.com/mui/material-ui/issues/19746

## Google Material Icons vs Fontawesome

Lighthouse でパフォーマンスを測定すると若干ですが Google Material Icons のほうが軽かったです。

- Google Material Icons = -3 パフォーマンス
- Fontawesome = -5 パフォーマンス

# Github

コードはここです。

https://github.com/potof/nextjs-blog-ts-mui-starter


記事アイコンを追加しました


記事の下部に同じトピックスからの記事を出力する関連記事機能を追加しました。

```json:site.config.json
{
  "isViewRelatedPosts": true,   // 表示有無
  "relatedPostsMaxCount": 3     // 表示件数
}
```


Git で別リポジトリの変更を取り込む


# なぜ作ったのか

もともと、旅行記録を取るためのブログを作っていたのですが、旅行以外の記録は別のブログにしたいと思って作りました。

https://potof.net/

# Obsidian との棲み分け

今まではこの手のメモはすべて Obsidian & Github（Private）で Knowledge 管理していたのですが、
せっかくなので Web 公開する道筋も作ってもいいかなって思って用意しました。

しばらくは Obsidian に書いた内容を整理してこのブログに入れていこうかなって思います。

# Next.js

旅行のブログはもともと Wordpress で作っており、サーバ代を無料するために SSG なブログへ作り直しました。
ほぼ初のモダンなフロントエンドなこともあって苦戦しました。

どうせブログに必要な機能なんて決まっているので、
もう少し簡単に作られればいいのに、、、と思い、初回の反省を踏まえてスタータキットをまず作りました。

https://github.com/potof/nextjs-blog-ts-mui-starter

このブログは上記リポジトリをベースに作っています。
自分でほしい機能は作ったつもりですが、今後、なにか必要になれば上記を更新していこうと思います。

このブログとの差異はコンテンツと `site.config.json` だけなのでメンテナンスも簡単ですね。

## Markdown ブログ

流行り廃りによって技術要素は変わってくるので、
このブログは特殊な記法をしないピュアな Markdown で記事を管理します。

一応、Zenn の特殊記法も使えるのですが、普段使わないしぱっとかけないので使いません。

## Vercel にデプロイしました

アドセンスやアフィリエイト目的ではないので、無料枠で使える Vercel にしました。
やっぱり Next.js の胴元なだけあってめちゃはやです。すごい！

## YAML front-matter

YAML front-matter はブログの機能に直結するので、少なすぎるとできること少ないし、多いと更新するのがめんどいので結構悩みました。
結局、以下の 3 つだけ指定することにしました。

```yaml
---
title: "Next.js でブログを作りました"
date: "2022-03-30"
topics: ["blog", "Next.js"]
---
```

どっかで Vercel が有料になった〜とかで移行する場合を考え、
その時も Zenn はあるかなってことで Zenn への移行性を考慮しました。

ちなみに Zenn は以下です。

```yaml
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
```

`type` を実装するかすごく悩んだのですが、個人ブログの規模で `type` は不要だし、
移行する場合は大半が技術記事かなって思い捨てました。

`emoji` はキャッチーな割にサムネイル画像のように重たくもならないので魅力的ですが、
シンプルなサイトゆえに使う絵文字でサイトコンセプトがごちゃごちゃになってしまうのでやめました。

CatNose さんの個人ブログがとても素敵ですが、これは絵文字じゃなくて画像だからかっこいいですよね。

https://archived.catnose.me/

これに対抗して fontawesome をキャッチアイコンにしようかとも思ったのですが、
`Next.js Icon` も `React Icon` も `MUI Icon` もいずれも import しないのといけない関係上、動的にはできないのでやめました。

ここは webfont な方式でいけば解消できるかもなので実装できるようであれば作ってみようかな。


blog

記事アイコンを追加しました

関連記事を追加しました

Git で別リポジトリの変更を取り込む

Next.js でブログを作りました