Astro@4でブログを再構築

import { visit } from 'unist-util-visit';const reCodeblock = () => {  return (tree) => {    visit(tree, 'code', (ele, index, parent) => {      const codeblockMeta = {        type: 'container',        data: {          hName: 'div',          hProperties: {            className: ['remark-codeblock'],          },        },        children: [          {            type: 'paragraph',            data: {              hName: 'div',              hProperties: {                className: ['remark-code-title'],              },            },            children: [{ type: 'text', value: ele.meta || '' }],          },          {            type: 'container',            data: {              hName: 'button',              hProperties: {                className: ['remark-code-copy-button'],              },            },            children: [{ type: 'text', value: 'Copy' }],          },        ],      };      parent.children.splice(index, 0, codeblockMeta);      // skip title element      return index + 2;    });  };};export default reCodeblock;

<script is:inline>  function attachListenerToCopyButton() {    async function copyCode(block, button) {      const code = block.querySelector('code');      const text = code?.innerText;      await navigator.clipboard.writeText(text ?? '');      button.innerText = 'Copied';      setTimeout(() => {        button.innerText = 'Copy';      }, 700);    }    let codeBlocks = Array.from(document.querySelectorAll('pre'));    for (let codeBlock of codeBlocks) {      let copyButton = codeBlock.previousElementSibling.querySelector(        '.remark-code-copy-button',      );      copyButton.addEventListener('click', async () => {        await copyCode(codeBlock, copyButton);      });    }  }  attachListenerToCopyButton();</script>

import type { APIContext } from 'astro';import { createOgImage } from '../../utils/og';import { getContents } from '../../utils/util';export async function getStaticPaths() {  const posts = await getContents();  return posts.map((post) => ({ params: { slug: post.slug } }));}export async function GET({ params }: APIContext) {  const { slug } = params;  if (!slug) return { status: 404 };  const posts = (await getContents()).find((post) => post.slug === slug);  if (!posts) return { status: 404 };  const body = await createOgImage(posts.data.title);  return new Response(body, {    status: 200,    headers: {      'Content-Type': 'image/webp',    },  });}

import fs from 'fs/promises';import { html } from 'satori-html';import satori from 'satori';import sharp from 'sharp';async function getFont(): Promise<Buffer> {  return await fs.readFile(    'src/fonts/noto-sans-jp-v52-japanese_latin-regular.woff',  );}async function createOgImage(title: string): Promise<Buffer> {  // create html markup  const markup = html`    <div      style="    display: flex;    height: 100%;    width: 100%;    align-items: center;    justify-content: center;    letter-spacing: 0.1em;    background-color: rgb(59, 66, 82);    color: rgb(216, 222, 233);    border: 8px solid rgba(147, 197, 253, 0.6);    background-image:  linear-gradient(30deg, #434c5e 12%, transparent 12.5%, transparent 87%, #434c5e 87.5%, #434c5e), linear-gradient(150deg, #434c5e 12%, transparent 12.5%, transparent 87%, #434c5e 87.5%, #434c5e), linear-gradient(30deg, #434c5e 12%, transparent 12.5%, transparent 87%, #434c5e 87.5%, #434c5e), linear-gradient(150deg, #434c5e 12%, transparent 12.5%, transparent 87%, #434c5e 87.5%, #434c5e), linear-gradient(60deg, #434c5e77 25%, transparent 25.5%, transparent 75%, #434c5e77 75%, #434c5e77), linear-gradient(60deg, #434c5e77 25%, transparent 25.5%, transparent 75%, #434c5e77 75%, #434c5e77);    background-size: 90px 157px;    background-position: 0 0, 0 0, 45px 81px, 45px 81px, 0 0, 45px 81px;  "    >      <div        style="      right: 42;      bottom: 42;      position: absolute;      display: flex;      align-items: center;    "      >        <span style="width: 16; height: 16; background: rgb(147, 197, 253);" />        <span style="margin-left: 8; font-size: 20; color: rgb(147, 197, 253);">          jsmz.dev        </span>      </div>      <div        style="      display: flex;      flex-wrap: wrap;      justify-content: center;      padding: 20px 50px;      margin: 0 42px;      font-size: 45;      width: auto;      max-width: 750;      text-align: center;      background-color: rgb(46, 52, 64);      line-height: 1.4;      border-bottom: 4px solid rgba(147, 197, 253, 0.6);    "      >        ${title}      </div>    </div>  `;  // create svg  const svg = await satori(markup, {    width: 1200,    height: 630,    embedFont: true,    fonts: [      {        name: 'NotoSansJP',        data: await getFont(),        weight: 400,        style: 'normal',      },    ],  });  // create png with sharp  return await sharp(Buffer.from(svg)).webp().toBuffer();}export { createOgImage };