update

bin/transforms.js

@@ -12,14 +12,69 @@ fs.readdirSync(sourceDir).forEach(file => {
     const content = fs.readFileSync(filePath, 'utf8');
     const json = JSON.parse(content);
 
-    const key = Object.keys(json)[0];
-    transforms[key] = json[key];
+    transforms = {
+      ...transforms,
+      ...json
+    }
   }
 });
 
+const fontKeys = [
+  "circled",
+  "circledNegative",
+  "doubleStruck",
+  "fraktur",
+  "frakturBold",
+  "inverted",
+  "mathematicalBold",
+  "mathematicalItalic",
+  "mathematicalBoldItalic",
+  "mirrored",
+  "monospace",
+  "parenthesized",
+  "sans",
+  "sansBold",
+  "sansItalic",
+  "sansBoldItalic",
+  "sansSerif",
+  "sansSerifBold",
+  "sansSerifItalic",
+  "sansSerifBoldItalic",
+  "script",
+  "boldScript",
+  "serif",
+  "serifBold",
+  "serifItalic",
+  "serifBoldItalic",
+  "smallCaps",
+  "squared",
+  "squaredNegative",
+  "subscript",
+  "superscript"
+];
+
+function toReadableFontName(key) {
+  return key
+    .split(/(?=[A-Z])/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+    .replace(/Negative$/, ' Negative');
+}
+
+const fonts = Object.fromEntries(
+  fontKeys.map(key => [key, toReadableFontName(key)])
+);
+
 const tsCode = `
 // This file is auto-generated. Do not edit manually.
+
 export const transforms = ${JSON.stringify(transforms, null, 2)};
+
+export const fontKeys = ${JSON.stringify(fontKeys, null, 2)} as const;
+
+export type FontKey = typeof fontKeys[number];
+
+export const fonts: Record<FontKey, string> = ${JSON.stringify(fonts, null, 2)};
 `;
 
 fs.writeFileSync(outputFile, tsCode);

src/components/frontend/page/style/fonts.tsx

@@ -1,30 +1,54 @@
 "use client";
 import Copy from "@/components/shared/copy";
-import { FontKey, fonts } from "@/fonts";
+import { FontKey, fonts, transforms } from "@/transforms";
 import { HTMLAttributes } from "react";
+
+type TransformMap = { [key: string]: string };
 
-export const Fonts =({
+export const Fonts = ({
   className,
   content,
   currentFonts
-}:{
+}: {
   className?: HTMLAttributes<HTMLDivElement>["className"];
   currentFonts: Readonly<FontKey[]>;
   content: string;
-})=> {
+}) => { 
+  const FontItem = ({ fontKey }: { fontKey: FontKey }) => { 
+    const chars = transforms[fontKey] as TransformMap;
+
+    // const adjustUnicode = (char: string) => {
+    //   const code = char.charCodeAt(0); 
+    //   if (code >= 0x2000 && code <= 0x2FFF) {
+    //     return char + '\u034F\u0308';  
+    //   }
+    //   return char;
+    // };
+
+    const transformAndAdjust = (text: string) => {
+      return text.split('').map(char => {
+        return chars[char] || char;
+        // const transformedChar = chars[char] || char;
+        // return adjustUnicode(transformedChar); 
+      }).join('');
+    };
+
+    const transformedContent = transformAndAdjust(content); 
+
+    return (
+      <div className="mb-5 pb-4 border-b leading-8">
+        <div className="mb-3 relative flex justify-between">
+          <div>{transformedContent}</div>
+          <Copy>{transformedContent}</Copy>
+        </div>
+        <div className="text-muted-foreground text-sm">{fonts[fontKey]}</div>
+      </div>
+    );
+  };
+
   return (
     <div className={className}>
-      {currentFonts.map(key =>{
-        return(
-          <div key={key} className="mb-5 pb-4 border-b leading-8">
-            <div className="mb-3 relative flex justify-between">
-              <div>{content}</div>
-              <Copy>{content}</Copy>
-            </div>
-            <div className="text-muted-foreground text-sm">{fonts[key]}</div>
-          </div>
-        )
-      })}
+      {currentFonts.map(key => <FontItem key={key} fontKey={key} />)}
     </div>
   );
-}
+};

src/components/frontend/page/style/main.tsx

@@ -2,9 +2,9 @@
 
 import { Markdown } from "@/components/shared/markdown";
 import { Textarea } from "@/components/ui/textarea";
-import { fontKeys } from "@/fonts";
 import { cn } from "@/lib/utils";
 import { slugFonts, SlugKey } from "@/slugs";
+import { fontKeys } from "@/transforms";
 import { useState } from "react";
 import { Fonts } from "./fonts";
 import { Sidebar } from "./sidebar";

src/slugs.ts

@@ -1,4 +1,5 @@
-import { FontKey } from "./fonts";
+import { FontKey } from "./transforms";
+
 
 export const slugKeys = [
   "all",