gatsby-starter-lumen を更新
ブログに使用した Gatsby 製スターターの gatsby-starter-lumen が TypeScript 化、ディレクトリ構成の変更、husky を使った Jest の実行等かなり変わっていたので、インストールからやり直した際のメモ。
目次
スターターのインストール
gatsby-starter-lumen をインストール
プロジェクトフォルダに gatsby-starter-lumen をインストールします。
gatsby new プロジェクト名 https://github.com/alxshelepenok/gatsby-starter-lumen.gitlab-ci.yml ファイルを作成
プロジェクトルートに GitLab Pages 用の .gitlab-ci.yml ファイルを作成します。
# This file is a template, and might need editing before it works on your project.
image: node:18.16.0
# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
paths:
- node_modules/
pages:
script:
- yarn install
- ./node_modules/.bin/gatsby build --prefix-paths
artifacts:
paths:
- public
only:
- masterpackage.json ファイルに "engines": { "node": ">=v18.16.0" } と指定があったので、image: node:18.16.0 を設定しました。
目次の自動生成
gatsby-remark-table-of-contents をインストール
記事の目次を自動生成する gatsby-remark-table-of-contents - npm をインストールします。
yarn add gatsby-remark-table-of-contentsgatsby-remark-autolink-headers - npm はインストール済だったので、gatsby-remark-table-of-contents のみをインストールしました。
gatsby-remark-table-of-contents を有効化
プロジェクトルートの gatsby-config.ts ファイルを編集します。
module.exports = {
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{ resolve: "gatsby-remark-table-of-contents", options: { exclude: "目次", tight: true, ordered: false, fromHeading: 2, toHeading: 6, className: "toc", }, }, "gatsby-remark-autolink-headers",
],
},
},
],
};gatsby-remark-autolink-headers の前に gatsby-remark-table-of-contents を追加しました。
メタ情報の変更
config.json ファイルを編集
siteMetadata は gatsby-config.ts ファイルに直接設定せずに config.json ファイルを参照しているので、content\config.json ファイルを編集します。
{
"title": "ブログのタイトル", "url": "ブログの URL", "subtitle": "ブログのサブタイトル", "copyright": "ブログのコピーライト表記", "googleAnalyticsId": "グーグルアナリティクスのトラッキング ID", "disqusShortname": "ディスカスのショートネーム", "postsLimit": 4,
"pathPrefix": "/",
"menu": [
{
"label": "Articles",
"path": "/"
}
],
"author": {
"name": "著者名", "photo": "/photo.jpg",
"bio": "著者紹介文", "contacts": {
"rss": "/rss.xml", "email": "",
"github": "",
"facebook": "",
"telegram": "",
"twitter": "",
"linkedin": "",
"instagram": "",
"mastodon": "",
"line": "",
"weibo": "",
"gitlab": "",
"medium": "",
"youtube": "",
"codepen": "",
"soundcloud": ""
}
}
}menu の About me と Contact me はとりあえず後回しにしようと削除しました。
lang 属性の変更
HTML の言語が英語に設定されているので日本語に変更します。
on-render-body.ts ファイルを編集
internal\gatsby\on-render-body.ts ファイルを編集します。
const onRenderBody = ({
setHtmlAttributes,
setPreBodyComponents,
}: RenderBodyArgs) => {
setHtmlAttributes({ lang: "ja" });};lang を en から ja に変更しました。
ファビコン兼著者画像の変更
ファビコン兼著者画像ファイルを差し換え
ファビコンと著者画像を兼用している content\photo.jpg ファイルを差し換えます。
スタイルシートの適用
サイト全体に適用するスタイルシートを作成します。
_global.scss ファイルを作成
src\assets\scss\_global.scss ファイルを作成します。
/* Prism */
pre[class*="language-"] .gatsby-highlight-code-line {
background-color: #515151;
border-left: 0.25em solid #f2777a;
display: block;
margin-left: -1em;
margin-right: -1em;
max-width: none;
padding-left: 0.75em;
padding-right: 1em;
width: max-content;
}
:not(pre) > code[class*="language-"] {
white-space: pre-wrap;
}
/* Table of Contents */
.toc {
border: 1px solid #e6e6e6;
border-radius: 1rem;
ul li {
margin-bottom: 0;
}
}コードブロックの指定行ハイライト、目次のスタイルを追加しました。
スタイルシートを適用
src\assets\scss\main.scss ファイルを編集します。
@charset "UTF-8";
@import "variables";
@import "themes";
@import "mixins";
@import "base";
@import "global";@import "global"; を追加しました。
サイドバーの編集
Sidebar.tsx ファイルを編集
src\components\Sidebar\Sidebar.tsx ファイルを編集します。
const Sidebar = ({ isIndex }: Props) => {
const { author, copyright, menu, subtitle, title } = useSiteMetadata();
return (
<div className={styles.sidebar}>
<div className={styles.inner}>
<Author
author={author}
isIndex={isIndex}
subtitle={subtitle} title={title} />
<Menu menu={menu} />
<Contacts contacts={author.contacts} />
<Copyright copyright={copyright} />
</div>
</div>
);
};props で subtitle, title も渡せるように追加しました。
サイドバー用 Author.tsx ファイルを編集
src\components\Sidebar\Author\Author.tsx ファイルを編集します。
type Props = {
author: {
name: string;
bio: string;
photo: string;
};
isIndex?: boolean;
subtitle: string; title: string;};
const Author = ({ author, isIndex, subtitle, title }: Props) => ( <div className={styles.author}>
{isIndex ? ( <h1 className={styles.title}> <Link className={styles.link} to="/"> {title} </Link> </h1> ) : ( <h2 className={styles.title}> <Link className={styles.link} to="/"> {title} </Link> </h2> )} <p className={styles.subtitle}>{subtitle}</p> <Link to="/">
<Image alt={author.name} path={author.photo} className={styles.photo} />
</Link>
<div className={styles.titleContainer}>
{isIndex ? (
<h2 className={styles.title}> <Link className={styles.link} to="/">
{author.name}
</Link>
</h2> ) : (
<h3 className={styles.title}> <Link className={styles.link} to="/">
{author.name}
</Link>
</h3> )}
<ThemeSwitcher />
</div>
<p className={styles.subtitle}>{author.bio}</p>
</div>
);props で subtitle, title も受け取り、サイドバーにサイトのサブタイトル、タイトルを追加しました。
著者情報の変更
記事の下に表示する著者情報を変更します。
記事用 Author.tsx ファイルを編集
src\components\Post\Author\Author.tsx ファイルを編集します。
import { Link } from "gatsby";
const Author = () => {
const { author, copyright, subtitle, title } = useSiteMetadata();
return (
<div className={styles.author}>
<h2 className={styles.title}> <Link className={styles.link} to="/"> {title} </Link> </h2> <p className={styles.subtitle}>{subtitle}</p> <h3 className={styles.title}> <Link className={styles.link} to="/"> {author.name} </Link> </h3> <p className={styles.subtitle}>{author.bio}</p> <div className={styles.copyright}>{copyright}</div> </div>
);
};使わなくなった getContactHref を削除、新たに使用する Link を import し、著者情報にサイトのコピーライト、サブタイトル、タイトルを追加しました。
記事用 Author.module.scss ファイルを編集
src\components\Post\Author\Author.module.scss ファイルを編集します。
.author {
.copyright { color: $color-gray; font-size: $typographic-small-font-size; }
.subtitle { color: $color-gray; @include line-height(1); @include margin-bottom(1); }
.title { font-size: $typographic-base-font-size * 1.125; font-weight: 600; margin: 0; @include line-height(1.125); .link { color: var(--color-typographic-base-font); &:hover, &:focus { color: var(--color-typographic-base-font); } } }}.author__copyright, .author__subtitle, .author__title を追加しました。
Jest のスナップショットを更新
変更により Jest のスナップショットテストが失敗するのでスナップショットを更新します。
yarn run test:update-snapshot