Jun 17, 2023

微妙に見た目更新した

タグ:#Gatsby #雑記

目次 +

はい、題の通りです。

ページトップにカテゴリリンク表示と日本語フォント追加して、ツイートボタン作って設置しただけです。本当に微妙な更新ですね。

※2023/07/14追記

tweet.jsでのツイート時にサイトタイトルを読み込み元から指定できるように変更、ちょっと説明追加

※2023/07/11追記

tweet.jsでのツイート時に日本語を含むURLだと、ツイート内容のURLも日本語表記になっていたのを修正

コードブロック周りの調整

デフォルトのままじゃあまりにも質素なのでDarkに変更しました。

行表示、行ハイライトは悩んだ末に以下で対応。

1
.line-numbers .line-numbers-rows {
2
  padding: 1rem 0 1rem 1rem;
3
}
4

5
.gatsby-highlight-code-line {
6
  background:hsla(24,20%,50%,.08);
7
  background:linear-gradient(to right,hsla(24,20%,50%,.3) 70%,hsla(24,20%,50%,0));
8
  display: block;
9
  left:0;
10
  right:0;
11
  margin-right: 0em;
12
  margin-left: -10em;
13
  padding-right: 1em;
14
  padding-left: 10em;
15
}

なんとか表示はできたのでこれで様子見。

これはまだマシだけど行表示、ハイライト周りが原因で表示がぶっ壊れる模様。これの場合MDファイル上では最後の改行入れてません。全文表示する設定なのに、本来存在しない改行が原因で縦のスクロールバーが出るようです。（gatsby-highlight-code-lineのどれか一文字削除すれば治るけど、コード張る意味がなくなる）

下にあるjsとか強調表示入れた瞬間にクエリ内のバッククオート間が全部改行1行ずつ挟まります。 gatsby-starter-blog のデフォ環境でも起こるし、調べてもよくわからないのでどうにもなりません。

そしてコードブロックのタイトル表示のために、大人しくプラグイン追加…ついでにコピーボタンも。

npm install gatsby-remark-prismjs-title --save-dev
npm install --save gatsby-remark-prismjs-copy-button

1
.gatsby-code-title {
2
  display: block;
3
  position: relative;
4
  width: 100%;
5
  top: 0.3em;
6
  border-top-left-radius: 0.3em;
7
  border-top-right-radius: 0.3em;
8
}
9

10
.gatsby-code-title span {
11
  display: inline;
12
  position: relative;
13
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
14
  color: #eee;
15
  background: hsl(30, 20%, 40%);
16
  border-top-left-radius: 0.3em;
17
  border-top-right-radius: 0.3em;
18
  padding-bottom: 5px;
19
  margin-bottom: -5px;
20
  border: .3em solid hsl(30, 20%, 40%);
21
}
22

23
.gatsby-remark-prismjs-copy-button-container {
24
  color: #eee;
25
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
26
  left: 0;
27
  padding-right: .3em;
28
}

プラグイン処理に割り込む方法が先にプラグイン挟むくらいしかないので、どうにもなりません。

コピーボタンのレイアウトは 2023/06/17 時点でバージョン0.4のためか、あまり設定できる部分がないようです。プラグイン自体に手を入れる行為は極力避けたいので、これも様子見。

日本語フォント追加

調べたら Google フォントを入れろと書いてあったので見たまんま以下を追加。

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

これで gatsby-starter-blog から計6種類の拡張インストールしたことに。「重くなったら意味ないから無闇に拡張入れるな」というのが、 Gatsby もとい SSG の基本のようですが、デフォ機能でどうにもならなくなったら入れるしかありません。

こちらは web フォントでも重くならないように、ある程度対策されているらしい。

記事にカテゴリリンク表示

カテゴリ一覧は BGM 側作った際にダミーで作ってあったので、表示とページへのジャンプ実装だけで済みました。

何のことはない URL に Frontmatter で取得したタグを追加したものをリンクとし、 Frontmatter の内容をそのまま表示するだけで完成。本ページ側で実装するときに AI と無限に殴り合った甲斐があった…

本当なら複数タグ個別読み込みに対応できるように作るべきなのでしょうが、とりあえず1ページにつきタグ1個しか付く予定ないので放置。

記事ツイートボタン作成

ツイートボタンはそういう Gatsby の拡張があるみたいですが、コンポーネントで対応できそうだったので自力で作ってみました。

1
import * as React from "react"
2
import { useStaticQuery, graphql } from "gatsby"
3
import { StaticImage } from "gatsby-plugin-image"
4

5
function encodeForUrl(value) {
6
  return encodeURIComponent(value).replace(/%2F/g, '/').replace(/%3A/g, ':');
7
}
8

9
const Share = ({ title, siteSub, siteSlug, siteTitle }) => {
10
  const { site } = useStaticQuery(
11
    graphql`
12
      query {
13
        site {
14
          siteMetadata {
15
            siteUrl
16
          }
17
        }
18
      }
19
    `
20
  )
21

22
  // Set these values by editing "siteMetadata" in gatsby-config.js
23
  const siteUrl = site.siteMetadata?.siteUrl
24
  const encodedSiteUrl = encodeForUrl(siteUrl);
25
  const encodedSiteSlug = encodeForUrl(siteSlug);
26
  const encodedSiteSub = encodeForUrl(siteSub);
27
  const tweetUrl = `${encodedSiteUrl}/${encodedSiteSub}${encodedSiteSlug}`;
28

29
  return (
30
    <>
31
      <a
32
        className="tweet-button"
33
        rel="nofollow"
34
        href={`https://twitter.com/intent/tweet?url=${encodeForUrl(tweetUrl)}&via=doranarasi&text=Title : ${title} - ${siteTitle}`}
35
      >
36
      <StaticImage
37
        className="tweet-icon"
38
        src="../images/Twitter.svg"
39
        width={20}
40
        alt="Tweet"
41
      />
42
      <div style={{ marginLeft: "0.2rem" }}>Tweet</div></a>
43
    </>
44
  )
45
}
46

47
export default Share

1
.tweet-button{
2
  text-decoration: none;
3
  display: inline-flex;
4
  align-items: center;
5
  justify-content: center;
6
  width: 5.8rem;
7
  height: 1.5rem;
8
  border-radius: 2px;
9
  background-color: #1c9bf0;
10
  color: #f4f4f4;
11
  font-weight: 600;
12
  margin-top: 3px;
13
  text-shadow: 0px 0px 0px #000000;
14
}
15

16
.tweet-icon {
17
  filter: brightness(0%) invert(98%);
18
}

blog-post.jsなりのテンプレートでコンポーネントを読み込み、siteTitle, title, siteSub, siteSlugの値を設定して使用します。このブログのテンプレートだと以下のように設定しています。

    <Share
      siteTitle={"なんか書く"}
      title={post.frontmatter.title}
      siteSub={contentType}
      siteSlug={post.fields.slug}
    />

散々 AI と格闘したせいかこのくらいなら聞かなくても作れるようになってた… もうちょっとスマートにしたいけど。

ボタンそのものを blog-post.js に入れたら邪魔すぎたのでコンポーネント化、青鳥にフィルターかけて白くして使い回し、cssでバックグラウンド整形して完成。このページ上部にあるのが出来上がったボタンです。 blog-post.js 上でクエリから各値を渡してURLを生成しています。

画像追加せずボタン作ることが目的だったのでとりあえず満足。 URL 周りはもっとスマートにしたいんですが、ページ生成関連を好き勝手弄った結果なのでどうにもなりません。

他 SNS も URL 変えれば普通に応用できるみたいですが、やるとしても FB くらいでしょうか。 og:image のメタタグは既にあるので、恐らくボタン追加だけで可能。まあ気が向いたらってことで…

ついでに…

記事別のツイッターカードにも対応。ブログ側でサムネ無いページが全部BGM側のトップページになるのは流石にいかんので、そっちも雑に対応。 ~~雑にも程があるだろとか言わない~~

SEO 周りはこっちに BGM 側で使ってるキーワード要らんよねってことでフラグ作ってそもそも無効化。こんだけ文章ぶち込んでるんだから Google 先生が何とかしてくれるようん。

あとはアイコンを SVG 形式に変えたり前後記事の ID 周りの対応と長文時に折り返すの忘れてたり色々と修正。

当面の目標

流石に見た目何とかしないといかん。あとタグ一覧もどっかで見れるようにしないといけないけど、そこはシンプルに横表示するくらいしかなさそう。

あとは出来れば記事のヘッダに対するリンクも生成したいけど、拡張入れないとどうにもならん予感。