All Articles

gatsby-starter-lumen を更新

Gatsby * GitLab

ブログに使用した Gatsby 製スターターの gatsby-starter-lumenTypeScript 化、ディレクトリ構成の変更、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:
    - master

package.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-contents

gatsby-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": ""
    }
  }
}

menuAbout meContact me はとりあえず後回しにしようと削除しました。

lang 属性の変更

HTML の言語が英語に設定されているので日本語に変更します。

on-render-body.ts ファイルを編集

internal\gatsby\on-render-body.ts ファイルを編集します。

const onRenderBody = ({
  setHtmlAttributes,
  setPreBodyComponents,
}: RenderBodyArgs) => {
  setHtmlAttributes({ lang: "ja" });};

langen から 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

Published May 7, 2023

ありふれた備忘録

いつか役立つかもしれないメモ

isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。