update

seadfeng · Aug 23, 2024 · 265ac41 · 265ac41
1 parent f480b4a
commit 265ac41
Show file tree

Hide file tree

Showing 6 changed files with 855 additions and 19 deletions.
diff --git a/src/components/frontend/page/style/fonts.tsx b/src/components/frontend/page/style/fonts.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Copy from "@/components/shared/copy";
+import { addDoubleUnderline, addStrikethrough, addUnderline, addWavyUnderline } from "@/lib/utils";
 import { FontKey, fonts, transforms } from "@/transforms";
 import { HTMLAttributes } from "react";
 
@@ -8,40 +9,44 @@ type TransformMap = { [key: string]: string };
 export const Fonts = ({
   className,
   content,
-  currentFonts
+  currentFonts,
+  underline = false,
+  strikethrough = false,
+  doubleUnderline = false,
+  wavyUnderline = false,
 }: {
   className?: HTMLAttributes<HTMLDivElement>["className"];
   currentFonts: Readonly<FontKey[]>;
   content: string;
+  underline?: boolean;
+  strikethrough?: boolean;
+  doubleUnderline?: boolean;
+  wavyUnderline?: boolean;
+
 }) => { 
   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 Array.from(text).map(char => {
-        return chars[char] || char;
-        // const transformedChar = chars[char] || char;
-        // return adjustUnicode(transformedChar); 
+        let newChar = chars[char] || char;
+        if(underline) newChar = addUnderline({char: newChar, fontKey});
+        if(strikethrough) newChar = addStrikethrough({char: newChar, fontKey});
+        if(doubleUnderline) newChar = addDoubleUnderline({char: newChar, oldChar: char, fontKey});
+        if(wavyUnderline) newChar = addWavyUnderline({char: newChar, oldChar: char, fontKey});
+        return newChar;
       }).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 className="mb-5 pb-4 border-b leading-7 flex flex-col md:flex-row md:items-center justify-start gap-5">
+        <div className="text-muted-foreground text-sm md:w-[130px]">{fonts[fontKey]}</div>
+        <div className="relative flex justify-between w-full items-center">
           <div>{transformedContent}</div>
-          <Copy>{transformedContent}</Copy>
+          <Copy className="text-sm">{transformedContent}</Copy>
         </div>
-        <div className="text-muted-foreground text-sm">{fonts[fontKey]}</div>
       </div>
     );
   };

diff --git a/src/components/frontend/page/style/main.tsx b/src/components/frontend/page/style/main.tsx
@@ -18,7 +18,7 @@ export function StyleMain({
 
 }>) {
   const { block1, block2 } = markdownContents; 
-  const [content, setContent] = useState<string>("Hello My old Friend");   
+  const [content, setContent] = useState<string>("Hello my old friend");   
 
   const onChange=(e: React.ChangeEvent<HTMLTextAreaElement>)=>{
     setContent(e.target.value);

diff --git a/src/fonts.ts b/src/fonts.ts
@@ -3,6 +3,7 @@
 // Parts of this code are inspired by or adapted from:
 // https://github.com/DenverCoder1/unicode-formatter/blob/main/src/js/main.js
 export default {
+  // "\ !#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ
   normal: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
   sansSerif: "\"\\ !#$%&'()*+,-./𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫:;<=>?@𝖠𝖡𝖢𝖣𝖤𝖥𝖦𝖧𝖨𝖩𝖪𝖫𝖬𝖭𝖮𝖯𝖰𝖱𝖲𝖳𝖴𝖵𝖶𝖷𝖸𝖹[]^_`𝖺𝖻𝖼𝖽𝖾𝖿𝗀𝗁𝗂𝗃𝗄𝗅𝗆𝗇𝗈𝗉𝗊𝗋𝗌𝗍𝗎𝗏𝗐𝗑𝗒𝗓{|}~𝖺́𝖾́𝗂́𝗈́𝗎́𝖠́𝖤́𝖨́𝖮́𝖴́𝖺̀𝖺̂æ𝖼̧𝖾̀𝖾́𝖾̂𝖾̈𝗂̂𝗂̈𝗈̂œ𝗎̀𝗎̂𝗎̈𝗒̈𝖠̀𝖠̂Æ𝖢̧𝖤̀𝖤́𝖤̂𝖤̈𝖨̂𝖨̈𝖮̂Œ𝖴̀𝖴̂𝖴̈𝖸̈𝖼̧𝖢̧𝗀̆𝖦̆𝗈̈𝖮̈𝗌̧𝖲̧𝗎̈𝖴̈ı𝖨̇",
   sansBold: "\"\\ !#$%&'()*+,-./𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵:;<=>?@𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭[]^_`𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇{|}~𝗮́𝗲́𝗶́𝗼́𝘂́𝗔́𝗘́𝗜́𝗢́𝗨́𝗮̀𝗮̂æ𝗰̧𝗲̀𝗲́𝗲̂𝗲̈𝗶̂𝗶̈𝗼̂œ𝘂̀𝘂̂𝘂̈𝘆̈𝗔̀𝗔̂Æ𝗖̧𝗘̀𝗘́𝗘̂𝗘̈𝗜̂𝗜̈𝗢̂Œ𝗨̀𝗨̂𝗨̈𝗬̈𝗰̧𝗖̧𝗴̆𝗚̆𝗼̈𝗢̈𝘀̧𝗦̧𝘂̈𝗨̈ı𝗜̇",
@@ -32,4 +33,10 @@ export default {
   mirrored: "\"/ !#$%&')(*+,-.\\0߁ςƐ߂टმ٢8୧:;<=>⸮@AꓭↃꓷƎꟻӘHIႱꓘ⅃MИOꟼϘЯꙄTUVWXYZ][^_`ɒdↄbɘʇϱʜiįʞlmᴎoqpᴙꙅɈυvwxγz}|{~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
   rotatedLeft: "=/ !#$%&-⏝⏜*+`ǀ∙\\ⴰ↽വ𝈐ፓහமΓꝏᓂ⠒;˅𝄥∧ᣇ@ᗉߘ𝈱⌓ш𝈯ᘎ⌶𝄩⥟𝈎⨼∑Zⴰᓇⵚᓚᔕ⊢⊃𝈷ᕒ×⤚𝇙⎵⎴‹|`ơᓄ𝈱ᓀш𝈯თ𝈦𝄩ᓜ𝈎⨼ᗴ⊂ⴰᓇᓂᓚᔕ𝀏⊃𝈷З×⤚𝇙⏟_⏞ಽáéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
   rotatedRight: "=/ !#$%&-⏜⏝*+`ǀ∙\\ⴰ⇀ᘚω𝈦හの⨼ꝏᓄ⠒;∧𝄥˅?@ᗆϖᴒᗜጠ╖ᘏ⌶𝄩ᓚ⌤⌐ᕒZⴰᓀᓄᓓᔕ⊣⊂<ᓬ×⤙𝇙⎴⎵›|`⌕ᓂᴒ௨ጠ╖மፓ𝄩ᓚ⌤⌐ᴟᴝⴰᓀᓄᓓᔕ𝀏⊂<ᓬ×⤙𝇙⏞_⏟ಽáéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+  vaiLetterlike: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ꗇꕗꖀꕒꗍꘘꗱꖾꕯʆꗣꝆꕮꖦꗞꘝꕪ𐝥ꕷꖡꖹꘜⱲꘉꔇꕩ[]^_`ꗇꕗꖀꕒꗍꘘꗱꖾꕯʆꗣꝆꕮꖦꗞꘝꕪ𐝥ꕷꖡꖹꘜⱲꘉꔇꕩ{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+  bamumLetterlike: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𖧥𖧳𖥐𖦧𖠢𖨨ꛪ𖦙𖥣𖨗𖢉ꛚ𖢑ꛘ𖥕𖡮𖥨𖦪𖨚𖢧ꚶ𖡥𖧉𖧦ꚲ𖣩[]^_`𖧥𖧳𖥐𖦧𖠢𖨨ꛪ𖦙𖥣𖨗𖢉ꛚ𖢑ꛘ𖥕𖡮𖥨𖦪𖨚𖢧ꚶ𖡥𖧉𖧦ꚲ𖣩{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+  smallCherokeeLetterlike: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ꭺᏼꮯꭰꭼꮁᏽꮋꮖꭻꮶꮮꮇꮑꮎꮲꭴꭱꮪꭲꮼꮩꮤꮂꭹꮓ[]^_`ꭺᏼꮯꭰꭼꮁᏽꮋꮖꭻꮶꮮꮇꮑꮎꮲꭴꭱꮪꭲꮼꮩꮤꮂꭹꮓ{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+  canadianAboriginalLetterlike1: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ᗅᑲᐸᐅᗕᖴᘜᕼᓵᒍᖾᖶᗑᐱᗝᕈᑫᖇᔑᐪᑌᐯᗐ᙭ᖿᔨ[]^_`ᗅᑲᐸᐅᗕᖴᘜᕼᓵᒍᖾᖶᗑᐱᗝᕈᑫᖇᔑᐪᑌᐯᗐ᙭ᖿᔨ{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+  canadianAboriginalLetterlike2: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ᗩᗷᑕᗞᕮᒋᕋᖺᑊᒎᕙᘂᘻᘯᗜᑭᘝᖇᔕᘕᕞᕓᘺ᙮ᒉᓯ[]^_`ᗩᗷᑕᗞᕮᒋᕋᖺᑊᒎᕙᘂᘻᘯᗜᑭᘝᖇᔕᘕᕞᕓᘺ᙮ᒉᓯ{|}~áéíóúÁÉÍÓÚàâæçèéêëîïôœùûüÿÀÂÆÇÈÉÊËÎÏÔŒÙÛÜŸçÇğĞöÖşŞüÜıİ",
+
 }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,4 +1,5 @@
 import { appConfig } from "@/config";
+import { FontKey } from "@/transforms";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -15,4 +16,91 @@ export const origin = ({ headers }: { headers: Headers }) => {
 
   const protocol = ['localhost', '127.0.0.1'].includes(host.split(":")[0]) ? 'http' : 'https';
   return `${protocol}://${host}`;
+}
+
+type appendChar = {
+  char: string;
+  oldChar?: string;
+  fontKey: FontKey
+}
+
+export const addUnderline = ({ char, fontKey }: appendChar) => {
+  switch (fontKey) {
+    case "superscript":
+    case "script":
+    case "subscript":
+      return char + '\u035f';
+    default:
+      return char;
+  }
+}
+export const addDoubleUnderline = ({ char, oldChar, fontKey }: appendChar) => {
+  switch (fontKey) {
+    case "smallCaps":
+    case "boldScript":
+    case "boldFraktur":
+    case "superscript":
+    case "doubleStruck":
+    case "serifBoldItalic":
+    case "serifBold":
+    case "serifItalic":
+    case "sansSerif":
+    case "sansItalic":
+    case "sansBoldItalic":
+    case "sansBold":
+    case "monospace":
+    case "inverted":
+    case "mirrored":
+      return oldChar === " " ? char : char + '\u0333';
+    default:
+      return char;
+  }
+}
+
+export const addStrikethrough = ({ char, fontKey }: appendChar) => {
+  switch (fontKey) {
+    case "smallCaps":
+    case "boldScript":
+    case "superscript":
+    case "squaredNegative":
+    case "doubleStruck":
+    case "serifBoldItalic":
+    case "serifBold":
+    case "serifItalic":
+    case "sansSerif":
+    case "sansItalic":
+    case "sansBoldItalic":
+    case "sansBold":
+    case "monospace":
+    case "inverted":
+    case "mirrored":
+      return char + '\u0336';
+    default:
+      return char;
+  }
+}
+
+export const addWavyUnderline = ({ char, oldChar, fontKey }: appendChar) => {
+  switch (fontKey) {
+    case "smallCaps":
+    case "boldFraktur":
+    case "boldScript":
+    case "superscript":
+    case "squaredNegative":
+    case "doubleStruck":
+    case "serifBoldItalic":
+    case "serifBold":
+    case "serifItalic":
+    case "sansSerif":
+    case "sansItalic":
+    case "sansBoldItalic":
+    case "sansBold":
+    case "monospace":
+    case "inverted":
+    case "mirrored":
+    case "subscript":
+      return oldChar === " " ? char : char + '\u0330';
+    default:
+      return char;
+  }
 }
diff --git a/src/slugs.ts b/src/slugs.ts
@@ -21,6 +21,7 @@ export const styleFonts: Record<StyleKey, FontKey[]> = {
   ],
   "cool": [
     "circled", "circledNegative", "fullwidth", "squared",
+    "vaiLetterlike", "bamumLetterlike", "smallCherokeeLetterlike", "canadianAboriginalLetterlike1", "canadianAboriginalLetterlike2",
     "squaredNegative", "inverted", "mirrored", "rotatedLeft", "rotatedRight"
   ],
   "small": [