目次
- 概要
- 参考サイト様
- 前提
- フォントファミリーを日本語用に変更
- ソーシャルリンクを新しいタブで開くように変更
- 投稿記事内の外部リンクを新しいタブで開くように変更
- 投稿記事内の引用ブロックに二重引用符が付与されないように変更
- TOCのヘッダーを「Table of contents」から「目次」に変更、かつ省略表示を無効化
- 雑感
概要
AstroPaperでブログをリニューアルする際にやったカスタマイズをまとめます。
細かすぎるやつは割愛。
参考サイト様
前提
$ npx astro info
Astro v4.2.1
Node v20.10.0
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations @astrojs/tailwind
@astrojs/react
@astrojs/sitemap- Release v4.2.0 · satnaing/astro-paper 🔗
- 開発環境はUbuntu 20 on WSL2、VSCode。
フォントファミリーを日本語用に変更
デフォルトのフォントだと目も当てられないので日本語向けに変更する。
フォントファミリーの選定には以下のサイトを参考にした。
2024年に最適なfont-familyの書き方 - ICS MEDIA 🔗
また、tailwind cssの設定については公式ドキュメントの他に以下のサイトも参考にした。
- Font Family #Customizing the default font - Tailwind CSS 🔗
- Astro＋Cloudflare Pagesでブログ構築 | WEBOO.DEV 🔗
変更箇所は以下の通り。
不要なフォントの読み込みを削除。
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -83,14 +82,6 @@ const socialImageURL = new URL(
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={socialImageURL} />
- <!-- Google Font -->
- <link rel="preconnect" href="https://fonts.googleapis.com" />
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- <link
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap"
- rel="stylesheet"
- />
-
<meta name="theme-color" content="" />
{font familyをfont-sansに変更。
完全にこの部分は参考にしたサイトのものをそのまま使わせてもらった。
調べてみると、驚いたことにデフォルトフォントが monospace になっていたので一般的な sans-serif に変更した。また漢字を含む日本語は大きい方が読みやすいのでフォントサイズを一回り大きくした。ちょっとした事だけど、この変更だけでサイトの印象が劇的に変わる。
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -29,7 +29,7 @@
display: block;
}
body {
- @apply flex min-h-[100svh] flex-col bg-skin-fill font-mono text-skin-base
+ @apply flex min-h-[100svh] flex-col bg-skin-fill font-sans text-skin-base
selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted;
}
section,
@@ -92,6 +92,7 @@
/* ===== scrollbar ===== */
html {
+ font-size: 17px;
overflow-y: scroll;
}--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -53,8 +53,10 @@ module.exports = {
},
transparent: "transparent",
},
- fontFamily: {
- mono: ["IBM Plex Mono", "monospace"],
+ extend: {
+ fontFamily: {
+ sans: ["Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", "sans-serif"],
+ },
},
typography: {蛇足: OG画像のフォント変更
まだデバッグをしていないので設定を変えただけだが、一応変更点を記載しておく。
以下のフォントをダウンロード。
BIZ UDPGothic - Google Fonts 🔗
ダウンロードしたフォントをpublic/fonts/に配置。
コードの変更は以下の通り。
--- a/src/utils/generateOgImages.tsx
+++ b/src/utils/generateOgImages.tsx
@@ -1,26 +1,14 @@
import satori, { type SatoriOptions } from "satori";
+import fs from "fs/promises";
import { Resvg } from "@resvg/resvg-js";
import { type CollectionEntry } from "astro:content";
import postOgImage from "./og-templates/post";
import siteOgImage from "./og-templates/site";
-const fetchFonts = async () => {
- // Regular Font
- const fontFileRegular = await fetch(
- "https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf"
- );
- const fontRegular: ArrayBuffer = await fontFileRegular.arrayBuffer();
-
- // Bold Font
- const fontFileBold = await fetch(
- "https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf"
- );
- const fontBold: ArrayBuffer = await fontFileBold.arrayBuffer();
-
- return { fontRegular, fontBold };
-};
-
-const { fontRegular, fontBold } = await fetchFonts();
+const [fontRegular, fontBold] = await Promise.all([
+ fs.readFile("./public/fonts/BIZUDPGothic-Regular.ttf"),
+ fs.readFile("./public/fonts/BIZUDPGothic-Bold.ttf"),
+]);
const options: SatoriOptions = {
width: 1200,
@@ -28,13 +16,13 @@ const options: SatoriOptions = {
embedFont: true,
fonts: [
{
- name: "IBM Plex Mono",
+ name: "Biz UDPGothic",
data: fontRegular,
weight: 400,
style: "normal",
},
{
- name: "IBM Plex Mono",
+ name: "Biz UDPGothic",
data: fontBold,
weight: 600,
style: "normal",ソーシャルリンクを新しいタブで開くように変更
シェアボタン、各種SNSリンクを新しいタブで開くようにtarget="_blank"属性を付与した。
src/components/LinkButton.astroに新しいプロパティを定義して各所で利用するように修正。
ちなみにClaude3が書いてくれた。
--- a/src/components/LinkButton.astro
+++ b/src/components/LinkButton.astro
@@ -5,9 +5,17 @@ export interface Props {
ariaLabel?: string;
title?: string;
disabled?: boolean;
+ showInNewTab?: boolean;
}
-const { href, className, ariaLabel, title, disabled = false } = Astro.props;
+const {
+ href,
+ className,
+ ariaLabel,
+ title,
+ disabled = false,
+ showInNewTab = false,
+} = Astro.props;
---
{
@@ -26,6 +34,8 @@ const { href, className, ariaLabel, title, disabled = false } = Astro.props;
class={`group inline-block hover:text-skin-accent ${className}`}
aria-label={ariaLabel}
title={title}
+ {...(showInNewTab ? { rel: "noopener noreferrer" } : {})}
+ target={showInNewTab ? "_blank" : "_self"}
>
<slot />
</a>--- a/src/components/ShareLinks.astro
+++ b/src/components/ShareLinks.astro
@@ -47,6 +47,7 @@ const shareLinks = [
href={`${social.href + URL}`}
className="link-button"
title={social.linkTitle}
+ showInNewTab={true}
>
<Fragment set:html={socialIcons[social.name]} />
<span class="sr-only">{social.linkTitle}</span>--- a/src/components/Socials.astro
+++ b/src/components/Socials.astro
@@ -17,6 +17,7 @@ const { centered = false } = Astro.props;
href={social.href}
className="link-button"
title={social.linkTitle}
+ showInNewTab={true}
>
<Fragment set:html={socialIcons[social.name]} />
<span class="sr-only">{social.linkTitle}</span>投稿記事内の外部リンクを新しいタブで開くように変更
投稿記事内の外部リンクをどうにか新しいタブで開きたい、どうしようかな～と思ってたらAstro公式に答えが書いてあった。以下を参照。
Add icons to external links | Docs 🔗
プラグインをインストールする。
npm install rehype-external-linkspluginの設定を追加。
設定プロパティは以下を参照。
rehype-external-links/readme.md at 3.0.0 · rehypejs/rehype-external-links 🔗
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -3,6 +3,7 @@ import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import remarkToc from "remark-toc";
import sitemap from "@astrojs/sitemap";
+import rehypeExternalLinks from "rehype-external-links";
import { SITE } from "./src/config";
// https://astro.build/config
@@ -28,6 +29,16 @@ export default defineConfig({
theme: "one-dark-pro",
wrap: true,
},
+ rehypePlugins: [
+ [
+ rehypeExternalLinks,
+ {
+ content: { type: "text", value: " 🔗" },
+ target: "_blank",
+ rel: ["noopener", "noreferrer"],
+ },
+ ],
+ ],
},
vite: {
optimizeDeps: {投稿記事内の引用ブロックに二重引用符が付与されないように変更
投稿記事の中で引用をすると自動的に二重引用符が自動的に付与されてしまうのが気に食わなかったので、自動付与されないように変更。
| before | after |
|---|---|
 |  |
やはり同じことを考えてる人はいるらしくissueに答えが書いてあった。
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -68,6 +68,9 @@ module.exports = {
code: {
color: false,
},
+ blockquote: {
+ quotes: "none",
+ }
},
},
},TOCのヘッダーを「Table of contents」から「目次」に変更、かつ省略表示を無効化
目次を挿入する検索キーとなる文字列を「Table of contents」から「目次」に変更し、一々開くのが面倒なので<details>タグによる省略表示も無効化する。
これも案の定、同じことをやりたい人がいたのでissueに答えが書いてあった。
合わせてremark-tocとremark-collapseのREADMEもリンクを記載しておく。
- How change «Table of contents» lettering? · Issue #278 · satnaing/astro-paper 🔗
- remark-toc/readme.md at 9.0.0 · remarkjs/remark-toc 🔗
- Rokt33r/remark-collapse: Make a section collapsible! 🔗
以下の通り、変更。
remark-collapseが省略表示のプラグインなので利用を停止（削除）。remarkTocの設定を追加し、TOC挿入先の文字列に「目次」を指定。
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import remarkToc from "remark-toc";
-import remarkCollapse from "remark-collapse";
import sitemap from "@astrojs/sitemap";
import { SITE } from "./src/config";
@@ -18,11 +17,10 @@ export default defineConfig({
],
markdown: {
remarkPlugins: [
- remarkToc,
[
- remarkCollapse,
+ remarkToc,
{
- test: "Table of contents",
+ heading: "目次",
},
],
],雑感
気になる部分はまだまだ残っているが、公開しないと飽きて放置してしまいそうだったのでとりあえず公開した。
リニューアルしたブログをモチベにブログでのアウトプットを再開できるといいな～。