搬來 Astro 的第一篇文章

其實想從頭再弄一個 blog 已經想很久了，但因為懶才拖到現在才弄。但其實主要原因還是想找一個好看一點的 theme, 以及可以用 markdown 書寫的 SSG.

也不確定會不會持續更新，只能有想到再來寫了

Astro Cactus theme

目前是使用 Astro Cactus 這個簡單好看的 theme, 因為要 build html, 我就說說目前有遇到的問題以及我有修改的部分吧

Invalid datetime

[InvalidContentEntryDataError] note → hola data does not match collection schema.

  publishDate**: **publishDate: Invalid datetime

原來是在 content.config.ts 裡有規定 publishDate 需要有 timezone 的資訊，但其他的 content 卻又不用 timezone 的資訊？我也不太想加入 timezone, 因為覺得有點麻煩吶，所以就把它 comment 掉了

// in content.config.ts
const note = defineCollection({
  loader: glob({ base: "./src/content/note", pattern: "**/*.{md,mdx}" }),
  schema: baseSchema.extend({
    description: z.string().optional(),
    publishDate: z
      .string()
      .or(z.date())
      // .datetime({ offset: true }) // Ensures ISO 8601 format with offsets allowed (e.g. "2024-01-01T00:00:00Z" and "2024-01-01T00:00:00+02:00")
      .transform((val) => new Date(val)),
  }),
});

更換 Icon

我是從 twemoji 裡找到 emoji 的 svg icon,從裡面挑了一個 android icon. 如果你直接換掉 public/icon.svg 的話，會發現到有兩個地方不會一起更換，是需要手動調整的部分

1. src/pages/og-image/[…slug].png.ts

這個 ts 的是將你文章的標題、日期、作者做成一張 OG image, 如果要加入你自己的 icon 的話，需要把這 ts 裡的 svg 換成你的 icon 的 svg

2. src/components/layout/Header.astro

這個是 header 的部分，作者也是將原本 cactus svg hard code 在這裡，也是需要把這 ts 裡的 svg 換成你的 icon 的 svg

增加 layout 寬度

覺得原始的 layout 的原始寬度有點窄，

1. src/layouts/Base.astro

把寬度從 max-w-3xl 改為 max-w-5xl

2. src/components/blog/Masthead.astro

這裡的原本 image 的寬度跟高度是固定的，我是改為寬度固定 960 後，讓他等比例縮放

<Image
  alt={data.coverImage.alt}
  layout="constrained"
  // width={748}
  // height={420}
  weight={960}
  priority
  src={data.coverImage.src}
/>

OG image 無法顯示繁體中文

因為 og image 是使用 satori 這個套件產生的，產生的時候會需要繁體中文字型。因此你可以在 Google Fonts 裡找到你想要字型，下載回來後放到 src/assets/ 裡，再讓 src/pages/og-image/[...slug].png.ts 裡的 satori 可以讀取到字型就可以產生有中文的 og image 了

src/pages/og-image/[…slug].png.ts

import NotoSansTc from "@/assets/NotoSansTC-Regular.ttf";

const ogOptions: SatoriOptions = {
  // debug: true,
  fonts: [
    {
      data: Buffer.from(RobotoMono),
      name: "Roboto Mono",
      style: "normal",
      weight: 400,
    },
    {
      data: Buffer.from(RobotoMonoBold),
      name: "Roboto Mono",
      style: "normal",
      weight: 700,
    },
    // 加入下方的字型
    {
      data: Buffer.from(NotoSansTc),
      name: "Noto Sans Tc",
      style: "normal",
      weight: 400,
    },
  ],
  height: 630,
  width: 1200,
};

關於 Note

這邊我還沒有想好該記些什麼，但目前是有個初步的想法，想把這邊東西變成像是存放小廢文的地方。但還在想要怎麼整合，才可以讓我輕鬆的在手機上發些也許只有 20 ~ 30 字的廢文 XD