QwikCityでブログを作り直した

import { defineConfig, defineCollection } from '@content-collections/core';
import crypto from 'crypto';
import * as fs from 'fs/promises';
import { Image, Root, RootContent } from 'mdast';
import * as path from 'path';
import remarkGfm from 'remark-gfm';
import remarkMdx from 'remark-mdx';
import remarkParse from 'remark-parse';
import sharp from 'sharp';
import { unified } from 'unified';

export type TransformedImage = {
  path: string;
  dim: {
    w: number;
    h: number;
  };
};

export type WithTransformedImage = {
  transformed?: TransformedImage[];
};

export type ImageTransformationConfig = {
  readonly outputRoot: string;
  readonly outputSubDir: string;
  readonly sourceBaseDir: string;
  readonly scaling: number;
};

type TransformContext = {
  readonly filePath: string;
};

function isAbslutePath(imgUrl: string): boolean {
  return /^https?:\/\//.test(imgUrl) || imgUrl.startsWith('/');
}

function srcImgPath(
  config: ImageTransformationConfig,
  ctx: TransformContext,
  imgUrl: string
): string {
  if (isAbslutePath(imgUrl)) {
    return imgUrl;
  }
  const contentDir = /^(.+)\/?$/.exec(config.sourceBaseDir)?.[0];
  if (contentDir == undefined) {
    return imgUrl;
  }

  const srcPath = path.parse(ctx.filePath);

  if (srcPath.dir === '') {
    return `${contentDir}/${imgUrl}`;
  } else {
    return `${contentDir}/${srcPath.dir}/${imgUrl}`;
  }
}

// Assume the output format is WebP
function generateImgDistFileName(
  config: ImageTransformationConfig,
  imgUrl: string,
  width: number,
  height: number
) {
  if (isAbslutePath(imgUrl)) {
    return imgUrl;
  }
  const baseNameHash = crypto.createHash('sha256').update(imgUrl).digest('base64').slice(0, 8);
  const baseName = path.parse(imgUrl).base;
  return `${baseName}-${baseNameHash}-${Math.round(width)}x${Math.round(height)}.webp`;
}

async function traverseMdAst<T extends RootContent>(
  config: ImageTransformationConfig,
  ctx: TransformContext,
  ast: T
) {
  switch (ast.type) {
    case 'break':
    case 'code':
    case 'definition':
    case 'html':
    case 'footnoteReference':
    case 'imageReference':
    case 'inlineCode':
    case 'text':
    case 'thematicBreak':
    case 'yaml':
    case 'mdxTextExpression':
    case 'mdxFlowExpression':
    case 'mdxjsEsm':
      return;
    case 'image':
      if (
        ast.url.startsWith('https://') ||
        ast.url.startsWith('http://') ||
        ast.url.startsWith('/')
      ) {
        return;
      }

      const buffer = await fs.readFile(srcImgPath(config, ctx, ast.url));
      const image = sharp(buffer);
      let { width, height } = await image.metadata();
      if (!(width && height)) return;

      const images: TransformedImage[] = [];

      while (width > 300) {
        const resized = await image.resize(Math.round(width), Math.round(height)).toBuffer();
        const fileName = generateImgDistFileName(config, ast.url, width, height);
        console.log(`INFO: transformed markdown image: ${fileName}`);
        const distPath = `${config.outputSubDir}/${fileName}`;
        await fs.writeFile(`${config.outputRoot}/${distPath}`, resized);
        images.push({
          path: distPath,
          dim: {
            w: width,
            h: height,
          },
        });
        width *= config.scaling;
        height *= config.scaling;
      }
      if (ast.data) {
        (ast.data as unknown as WithTransformedImage).transformed = images;
      } else {
        (ast as unknown as { data: WithTransformedImage }).data = {
          transformed: images,
        };
      }
      return;
    default:
      await Promise.all(ast.children.map(child => traverseMdAst(config, ctx, child)));
  }
}

async function generateImages(config: ImageTransformationConfig, ctx: TransformContext, ast: Root) {
  await fs.mkdir(`${config.outputRoot}/${config.outputSubDir}`, {
    recursive: true,
  });
  await Promise.all(ast.children.map(child => traverseMdAst(config, ctx, child)));
}

const blog = defineCollection({
  name: 'blog',
  directory: 'src/content/blog',
  include: '**/*.mdx',
  schema: z => ({
    title: z.string(),
    date: z.string(),
    tags: z.array(z.string()),
    publish: z.boolean(),
    description: z.string(),
  }),
  transform: async document => {
    const mdast = unified().use(remarkParse).use(remarkGfm).use(remarkMdx).parse(document.content);
    const config = {
      outputRoot: 'public',
      outputSubDir: 'img',
      scaling: 0.7,
      sourceBaseDir: 'src/content/blog',
    };
    const ctx = {
      filePath: document._meta.filePath,
    };
    await generateImages(config, ctx, mdast);
    return {
      ...document,
      mdast: mdast as any,
    };
  },
});

export default defineConfig({
  collections: [blog],
}); 

export async function loadPagefind(): Promise<PagefindApi> {
  const path = '/pagefind/pagefind.js';
  const module = import.meta.env.DEV
    ? await import('/pagefind/pagefind.js?url')
    : await import(path);
  return module as unknown as PagefindApi;
} 

import type { NoSerialize, QRL, TaskFn } from '@builder.io/qwik';
import { noSerialize, useStore, useVisibleTask$, implicit$FirstArg } from '@builder.io/qwik';
import { type Options, type PagefindApi, loadPagefind } from '~/lib/pagefind';

export function usePagefind(options?: Options): {
  api: NoSerialize<PagefindApi> | null;
} {
  const store = useStore<{ api: NoSerialize<PagefindApi> | null }>({
    api: null,
  });
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(async () => {
    const api = await loadPagefind();
    if (options) {
      await api.options(options);
    }
    await api.init();
    store.api = noSerialize(api);
  });
  return store;
}

export function useDebounceQrl(qrl: QRL<TaskFn>, debounce: number) {
  const state = useStore<{
    timeoutHandler: null | number;
    lastExecuted: number;
  }>({
    timeoutHandler: null,
    lastExecuted: 0,
  });
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(ctx => {
    if (state.timeoutHandler) {
      clearTimeout(state.timeoutHandler);
      state.timeoutHandler = null;
    }
    if (Date.now() > state.lastExecuted + debounce) {
      state.lastExecuted = Date.now();
      qrl(ctx);
    } else {
      state.timeoutHandler = setTimeout(() => {
        state.lastExecuted = Date.now();
        qrl(ctx);
      }, debounce) as unknown as number;
    }
  });
}

export const useDebounce$ = /*#__PURE__*/ implicit$FirstArg(useDebounceQrl);