feat(lyricova): shift hanging punctuations in OpenGraph posters

blueset · Aug 22, 2024 · 3562c7f · 3562c7f
1 parent e28fbb4
commit 3562c7f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/packages/lyricova/src/components/public/PlainTextHangingPunct.tsx b/packages/lyricova/src/components/public/PlainTextHangingPunct.tsx
@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useRef } from "react";
 import classes from "./PlainTextHangingPunct.module.scss";
+import { shiftinPuncts } from "src/utils/typography";
 
 function CollapsedSpan({ children }: { children: string }) {
   const ref = useRef<HTMLSpanElement>(null);
@@ -29,17 +30,6 @@ interface PlainTextHangingPunctProps {
   children: string;
 }
 
-function shiftinPuncts(line: string, match: RegExpMatchArray | null, start: string, end: string ): RegExpMatchArray | null {
-  if (match && line.match(new RegExp(`${start}.*${end}`, "g"))) {
-    const front = match[1].split(start);
-    const back = match[3].split(end);
-    match[2] = `${start.repeat(front.length - 1)}${match[2]}${end.repeat(back.length - 1)}`;
-    match[1] = front.join("");
-    match[3] = back.join("");
-  }
-  return match;
-}
-
 export function PlainTextHangingPunct({
   children,
 }: PlainTextHangingPunctProps) {

diff --git a/packages/lyricova/src/controllers/public.ts b/packages/lyricova/src/controllers/public.ts
@@ -10,6 +10,7 @@ import { Resvg } from "@resvg/resvg-js";
 import { Readable } from "stream";
 import React from "react";
 import satori from "satori";
+import { shiftinPuncts } from "src/utils/typography";
 
 const sourceHanExtraLight = readFile(
   resolve(__dirname, "../../src/fonts/SourceHanSans-ExtraLight-Subset-hhea.otf")
@@ -192,7 +193,12 @@ export class PublicApiController {
     const lines = mainVerse.text
       .replace(/——/g, "⸺")
       .split("\n")
-      .map((line) => line.match(/^([\p{Ps}\p{Pi}"]*)(.*)$/u));
+      .map((line) => {
+        let match = line.match(/^([\p{Ps}\p{Pi}"]*)(.*)$/u);
+        match = shiftinPuncts(line, match, "「", "」");
+        match = shiftinPuncts(line, match, "『", "』");
+        match = shiftinPuncts(line, match, "｢", "｣");
+      });
 
     const [
       sourceHanExtraLightData,

diff --git a/packages/lyricova/src/utils/typography.ts b/packages/lyricova/src/utils/typography.ts
@@ -0,0 +1,11 @@
+export function shiftinPuncts(line: string, match: RegExpMatchArray | null, start: string, end: string ): RegExpMatchArray | null {
+    if (match && line.match(new RegExp(`${start}.*${end}`, "g"))) {
+      const front = match[1].split(start);
+      const back = match[3].split(end);
+      match[2] = `${start.repeat(front.length - 1)}${match[2]}${end.repeat(back.length - 1)}`;
+      match[1] = front.join("");
+      match[3] = back.join("");
+    }
+    return match;
+  }
+