OGPのテキストを任意の行で省略する、lineClampとbudoux

import { ImageResponse } from "next/og";
 
export const runtime = "edge";
 
export const alt = "alt";
export const size = {
  width: 1200,
  height: 630,
};
 
export const contentType = "image/png";
 
const WAGAHAI_IS_CAT =
  "吾輩は猫である。名前はまだない。どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮て食うという話である。しかしその当時は何という考（かんがえ）もなかったから別段恐しいとも思わなかった。";
 
export default async function Image() {
  const text = WAGAHAI_IS_CAT;
 
  return new ImageResponse(
    (
      <div
        style={{
          background: "white",
          width: "100%",
          height: "100%",
          padding: "200px",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "center",
        }}
      >
        <div
          style={{
            display: "block",
            lineClamp: 3,
            fontSize: "24px",
            lineHeight: "1.5",
            textAlign: "left",
          }}
        >
          {text}
        </div>
      </div>
    ),
    {
      ...size,
    }
  );
}

import { ImageResponse } from "next/og";
import { Parser, jaModel } from "budoux";
 
const parser = new Parser(jaModel);
 
export const runtime = "edge";
export const alt = "alt";
export const size = {
  width: 1200,
  height: 630,
};
export const contentType = "image/png";
 
const PADDING = 200;
const FONT_SIZE = 24;
const MAX_LINES = 3;
const CONTENT_WIDTH = size.width - PADDING * 2;
const AVERAGE_CHAR_WIDTH = FONT_SIZE;
const MAX_CHARS_PER_LINE = Math.floor(CONTENT_WIDTH / AVERAGE_CHAR_WIDTH);
const WAGAHAI_IS_CAT =
  "吾輩は猫である。名前はまだない。どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮て食うという話である。しかしその当時は何という考（かんがえ）もなかったから別段恐しいとも思わなかった。";
 
export default async function Image() {
  const text = WAGAHAI_IS_CAT;
  const lines = splitTextIntoLines(text, MAX_LINES, MAX_CHARS_PER_LINE);
 
  return new ImageResponse(
    (
      <div
        style={{
          background: "white",
          width: "100%",
          height: "100%",
          padding: `${PADDING}px`,
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "center",
        }}
      >
        {lines.map((line, index) => (
          <div
            key={index}
            style={{
              fontSize: `${FONT_SIZE}px`,
              lineHeight: "1.5",
              textAlign: "left",
            }}
          >
            {line}
          </div>
        ))}
      </div>
    ),
    {
      ...size,
    }
  );
}
 
/**
 * テキストを指定した行数と文字数で分割し、必要に応じて省略記号を追加する関数
 * @param text - 分割するテキスト
 * @param maxLines - 最大行数
 * @param maxCharsPerLine - 1行あたりの最大文字数
 * @returns - 分割されたテキストの配列
 */
function splitTextIntoLines(
  text: string,
  maxLines: number,
  maxCharsPerLine: number
) {
  const parsedText = parser.parse(text);
  const lines = [];
  let currentLine = "";
 
  parsedText.forEach((segment) => {
    if (currentLine.length + segment.length <= maxCharsPerLine) {
      currentLine += segment;
    } else {
      lines.push(currentLine);
      currentLine = segment;
    }
  });
  if (currentLine) {
    lines.push(currentLine);
  }
 
  if (lines.length > maxLines) {
    lines[maxLines - 1] =
      lines[maxLines - 1].slice(0, maxCharsPerLine - 3) + "...";
    lines.length = maxLines;
  }
 
  return lines;
}