Astro.js 小ネタ集 その②

$ npm i astro-iconify

---
import { Icon } from 'astro-iconify'
---

<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon pack="mdi" name="account" />

<!-- Equivalent shorthand -->
<Icon name="mdi:account" />

...
const tags = defineCollection({
  type: 'data',
  schema: z.object({
    title: z.string(),
    icon: z.string(),
  }),
});
...
export const collections = {
  tags,
  blog,
};

{
    "title": "Redis",
    "icon": "redis" 
}

import { getCollection, getEntry } from 'astro:content';

...

const tags = await Promise.all([...(await getCollection('blog'))
    .flatMap((blog) => blog.data.tags)
    .reduce((uniq, tag) => uniq.add(tag), new Set<string>())]
    .map(async (tag) => {
        const e = await getEntry('tags', tag);
        return e ?? {
            id : tag,
            collection: 'tags',
            data: {
                title : tag,
                icon : ``,
            }
        };
    }));  

import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
  return [
    { params: { tag: "astro" } },
    { params: { tag: "successes" } },
    { params: { tag: "community" } },
    { params: { tag: "blogging" } },
    { params: { tag: "setbacks" } },
    { params: { tag: "learning in public" } },
  ];
}

const { tag } = Astro.params;
---
<BaseLayout pageTitle={tag}>
  <p>Posts tagged with {tag}</p>
</BaseLayout>

...
export async function getStaticPaths() {
  return Promise.all([...(await getCollection('blog'))
    ...
  ].map(async (tag) => {
        const e = await getEntry('tags', tag);
        return e ? {
            params: {
                id: e.id,
            },
            props: {
                tag: e.id,
                tagName: e.data.title,
                icon: e.data.icon,
            }
          } : {
            params: {
                id: tag,
            },
            props: {
                tag,
                tagName: tag,
                icon: '',
            }
          }
    })
  );
}

interface Props {
    tag: string;
    tagName: string;
    icon: string;
};

const { tag, tagName, icon } = Astro.props as Props;
const blog = await getCollection('blog', (blog) => blog.data.tags.includes(tag));

$ npm install reading-time mdast-util-to-string

import type { Plugin } from "unified";

import readingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() :Plugin {
    return function (tree, { data }) {
      const textOnPage = toString(tree);
      const stat = readingTime(textOnPage);

      data.astro.frontmatter.minutesRead = stat.minutes;
    };
}

...
import { remarkReadingTime } from "./src/lib/remark-reading-time";
...

export default defineConfig({
...
  markdown: {
    remarkPlugins: [
      ...
      remarkReadingTime
      ...
    ],
  ...
  }
});

---
...
interface Props {
  entry: CollectionEntry<'blog'>;
  nextEntry?: CollectionEntry<'blog'>;
  prevEntry?: CollectionEntry<'blog'>;
}

const { entry, nextEntry, prevEntry } = Astro.props;
const { Content, headings, remarkPluginFrontmatter} = await entry.render();
---
<Blog entry={entry} minutesRead={remarkPluginFrontmatter["minutesRead"]} ... >
  <Content/>
</Blog>

$ npm install sharp

import { defineConfig, sharpImageService } from 'astro/config';
...
export default defineConfig({
  ...
  experimental: {
    assets: true
  },
  image: {
    service: sharpImageService(),
  },
  ...
});

$ npm install astro-imagetools

...
  <BackgroundPicture
    src={`src/assets/cover/${entry.data.cover}`}
    saturation={0.5}
  >
      <h2>{p.data.title}</h2>
  </BackgroundPicture>
...

$ npm i satori satori-html @resvg/resvg-js

import satori from 'satori';
import { html } from 'satori-html';
import Sawarabi from '../../lib/sawarabi-gothic-medium.ttf'

export async function getStaticPaths() {
  return (await getCollection('blog')).map((post) => ({
    params: { slug: post.slug },
    props: { collection: 'blog' }
  }) as any);
}

const height = 630;
const width = 1200;

export async function get({ url, params, props }: APIContext) {
  const { slug } = params;
  const { collection } = props as { collection: 'blog' };

  let post: CollectionEntry<'blog'> | undefined;
  let qrCode : Buffer | undefined;

  post = await getEntryBySlug(collection, slug);

  const out = html`<div tw="flex w-full flex-col bg-red-400">
    <div tw="h-93 mx-6 px-4 flex flex-col bg-white">
      <h1 tw="text-4xl">${post?.data.title}</h1>
      <p tw="text-[1.8rem] w-[56rem] bottom-0">${(post?.data as any).description ?? ''}</p>
    </div>
    <div tw="flex flex-row mx-6 bg-white rounded-b-2xl mb-8">
      <p tw="text-[1.5rem] text-zinc-600">あそぴテックのごった煮ブログ</p>
    </div>
  </div>`

  let svg = await satori(out, {
    fonts: [
      {
        name: 'Open Sans',
        data: Buffer.from(Sawarabi),
        style: 'normal'
      }
    ],
    height,
    width
  });

  const resvg = new Resvg(svg, {
    font: {
      loadSystemFonts: false
    },
    fitTo: {
      mode: 'width',
      value: width
    }
  });

  const image = resvg.render();

  return {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable'
    },

    body: image.asPng()
  }
}

---
...
export interface Props {
	title?: string;
  description?: string;
  thumbnail?: {
    src: string;
  };
}

const { title, description, thumbnail} = Astro.props;

---
<!DOCTYPE html>
<html lang="en">
	<head>
....
    <meta property="og:title" content={title} />
    <meta property="og:type" content="website" />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={thumbnail.src} />
    <meta property="og:url" content={Astro.request.url} />
    <meta name="twitter:card" content="summary_large_image" />

....

$ npm i qrcode

import * as QRCode from 'qrcode';
import * as fs from 'fs';
import * as os from 'os';
import * as path from 'path';
...
export async function get({ url, params, props }: APIContext) {
...
  const appPrefix = 'my-blog';
  const linkUrl = `${SITE_URL}/blog/${slug}`;
  let tmpDir;
  try {
    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), appPrefix));

    const file_path = tmpDir + Date.now() +".png";

    await QRCode.toFile(file_path, linkUrl, { width , margin });

    qrCode = fs.readFileSync(file_path);
  }
  finally {
    try {
      if (tmpDir) {
        fs.rmSync(tmpDir, { recursive: true });
      }
    }
    catch (e) {
      console.error(`An error has occurred while removing the temp folder at ${tmpDir}. Please remove it manually. Error: ${e}`);
    }
  }
...

const favicon = import.meta.glob('../../../public/favicon.svg', {eager:true, as: 'raw'})["../../../public/favicon.svg"];

...

  const out = html`<div tw="flex w-full flex-col bg-red-400">
    <div tw="h-93 mx-6 px-4 flex flex-col bg-white">
      <h1 tw="text-4xl">${post?.data.title}</h1>
      <p tw="text-[1.8rem] w-[56rem] bottom-0">${(post?.data as any).description ?? ''}</p>
    </div>
    <div tw="flex flex-row mx-6 bg-white rounded-b-2xl mb-8">
    <img tw="w-30 h-30 ml-10 mb-2 inline-block grow-0" src="data:image/png;base64,${qrCode ? qrCode.toString('base64'):''}" />
    <div tw="flex flex-row-reverse w-230 mt-15">
        <p tw="text-[1.5rem] text-zinc-600">あそぴテックのごった煮ブログ</p>
        <img tw="w-12 h-12 rounded-full inline-block" src="data:image/svg+xml;base64,${btoa(favicon)}" />
      </div>
    </div>
  </div>`