update

Author: seadfeng

src/app/[locale]/(frontend)/(home)/page.tsx

@@ -2,6 +2,7 @@
 import { StyleMain } from "@/components/frontend/page/style/main";
 import { appConfig, LocaleType } from "@/config";
 import { getComponentMarkdown } from "@/i18n";
+import { getOrigin } from "@/lib/utils";
 import { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import { headers } from 'next/headers';
@@ -25,11 +26,8 @@ export default async function  Home({
   params: { locale: string; };
 }>) {
   const headersList = headers();
-  const host = headersList.get('host') || appConfig.appDomain;
-   
-  const protocol = ['localhost','127.0.0.1'].includes(host.split(":")[0] )? 'http' : 'https';
-  const origin = `${protocol}://${host}`;
-
+  const origin = getOrigin({headers: headersList});
+  const url = new URL(headersList.get('x-request-url')!);
   // Load by key: public/data/generated/components-markdown.json
   const markdownContents = {
     block1: await getComponentMarkdown({
@@ -41,7 +39,7 @@ export default async function  Home({
 
   return (
     <div className="px-8 flex">
-      <StyleMain style="all" markdownContents={markdownContents} />
+      <StyleMain style="all" markdownContents={markdownContents} text={url.searchParams.get("text")} />
     </div>
   );
 }

src/app/[locale]/(frontend)/[style]/page.tsx

@@ -3,7 +3,7 @@ import { StyleMain } from "@/components/frontend/page/style/main";
 import { Crumb } from "@/components/frontend/shared/crumb";
 import { LocaleType } from "@/config";
 import { getComponentMarkdown } from "@/i18n";
-import { origin } from "@/lib/utils";
+import { getOrigin } from "@/lib/utils";
 import { styleMetadata } from "@/metadata";
 import { StyleKey } from "@/slugs";
 import { CrumbItem } from "@/types";
@@ -19,16 +19,18 @@ export default async function  Style({
   params: { locale: LocaleType; style: StyleKey; };
 }>) {
   const { locale, style } = params; 
-   
+  const headersList = headers(); 
+  const origin = getOrigin({headers: headersList});
+
   // Load by key: public/data/generated/components-markdown.json
   const markdownContents = {
     block1: await getComponentMarkdown({
       locale, 
       componentPathName: `style/${style}/block1`,
-      origin: origin({headers: headers()})
+      origin
     })
-  }
-
+  } 
+  const url = new URL(headersList.get('x-request-url')!);
   const items: CrumbItem[] = [ 
     {
       name: style,
@@ -40,7 +42,7 @@ export default async function  Style({
   return ( 
     <div className="px-8">
       <Crumb items={items} className="" params={params} /> 
-      <StyleMain markdownContents={markdownContents} style={style}/>
+      <StyleMain markdownContents={markdownContents} style={style} text={url.searchParams.get("text")} />
     </div> 
   );
 }

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

@@ -31,8 +31,9 @@ export const Fonts = ({
     const transformAndAdjust = (text: string) => {
       return Array.from(text).map(char => {
         let newChar = chars[char] || char; 
+
         if(style === "underline"){
-          if(underline) newChar = addUnderline({char: newChar, fontKey});
+          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}); 
@@ -61,12 +62,12 @@ export const Fonts = ({
             className="data-[underline='true']:font-extrabold data-[underline='true']:bg-primary/25 underline underline-offset-3 rounded-lg dark:border-white/10">
             {"U"} 
           </Button>
-          <Button aria-label="Double Underline" size="icon" data-doubleUnderline={doubleUnderline} variant="outline" onClick={()=>  setDoubleUnderline(!doubleUnderline) } 
-            className="data-[doubleUnderline='true']:font-extrabold data-[doubleUnderline='true']:bg-primary/25 rounded-lg dark:border-white/10">
+          <Button aria-label="Double Underline" size="icon" data-double-underline={doubleUnderline} variant="outline" onClick={()=>  setDoubleUnderline(!doubleUnderline) } 
+            className="data-[doubleu-underline='true']:font-extrabold data-[double-underline='true']:bg-primary/25 rounded-lg dark:border-white/10">
             {"U" + '\u0333'} 
           </Button> 
-          <Button aria-label="WavyUnderline" size="icon" data-wavyUnderline={wavyUnderline} variant="outline" onClick={()=>  setWavyUnderline(!wavyUnderline) } 
-            className="data-[wavyUnderline='true']:font-extrabold data-[wavyUnderline='true']:bg-primary/25 rounded-lg dark:border-white/10">
+          <Button aria-label="Wavy nderline" size="icon" data-wavy-underline={wavyUnderline} variant="outline" onClick={()=>  setWavyUnderline(!wavyUnderline) } 
+            className="data-[wavy-underline='true']:font-extrabold data-[wavy-underline='true']:bg-primary/25 rounded-lg dark:border-white/10">
             {"U" + '\u0330'} 
           </Button>
           <Button aria-label="Strikethrough" size="icon" data-strikethrough={strikethrough} variant="outline" onClick={()=>  setStrikethrough(!strikethrough) } 

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

@@ -2,24 +2,32 @@
 
 import { Markdown } from "@/components/shared/markdown";
 import { Textarea } from "@/components/ui/textarea";
+import { usePathname } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 import { styleFonts, StyleKey } from "@/slugs";
 import { fontKeys } from "@/transforms";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { Fonts } from "./fonts";
 import { Sidebar } from "./sidebar";
 
 export function StyleMain({
   markdownContents,
-  style = "all" 
+  style = "all",
+  text = "Hello my old friend",
 }: Readonly<{  
   markdownContents: Record<string, string | undefined>;
-  style: StyleKey,
- 
+  style: StyleKey;
+  text?: string | null;
 }>) {
   const { block1, block2 } = markdownContents; 
-  const [content, setContent] = useState<string>("Hello my old friend");   
+  const [content, setContent] = useState<string>(text ? text : "");
+  const pathname = usePathname();
+  const search = useSearchParams().toString();
 
+  console.log("text", text)
+  console.log("search", search)
+   
   const onChange=(e: React.ChangeEvent<HTMLTextAreaElement>)=>{
     setContent(e.target.value);
   }

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

@@ -2,9 +2,13 @@ import { Link } from "@/lib/i18n";
 import { styleFonts, StyleKey } from "@/slugs";
 import { ALargeSmallIcon, BoldIcon, FeatherIcon, ItalicIcon, StarsIcon, UnderlineIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
 import { ClassNameValue } from "tailwind-merge";
 
-export const Sidebar =( )=>{   
+export const Sidebar =( )=>{    
+  let search = useSearchParams().toString();
+  if(search) search = `?${search}`;
+  
   const t = useTranslations();
   const linkCls: ClassNameValue = "border w-full h-12 flex rounded-lg items-center gap-3 px-5 font-semibold mb-5";
 
@@ -52,19 +56,19 @@ export const Sidebar =( )=>{
       default:
         return null;
     }
-  }
+  } 
 
   return(
     <>
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-1 gap-x-3  md:flex-row">
-        <Link href="/" className={linkCls}>
+        <Link href={`/${search}`} className={linkCls}>
           <span>{t('frontend.style.sidebar.all')}</span> 
         </Link>
         { Object.entries(styleFonts).map(([slug]) =>{ 
           const name = i18nName(slug as StyleKey); 
           if(!name) return;
           return(
-            <Link href={`/${slug}`} key={slug} className={linkCls}>
+            <Link href={`/${slug}${search}`} key={slug} className={linkCls}>
               <NavIcon slug={slug as StyleKey} />
               <span className="text-sm">{name}</span>
             </Link>

src/components/frontend/shared/nav-bar.tsx

@@ -3,15 +3,14 @@
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Link } from "@/lib/i18n";
-import { useTranslations } from "next-intl";
 
 import { appConfig } from "@/config";
 import {
   Menu
 } from "lucide-react";
 import Image from "next/image";
 export function NavBar() {
-  const t = useTranslations();
+
   const memu = [
     {
       name: appConfig.appName,

src/lib/utils.ts

@@ -11,7 +11,7 @@ export const canonicalLink = (domain: string, pathname: string) => {
   return `${isProduction ? "https" : "http"}://${domain}${pathname}`;
 }
 
-export const origin = ({ headers }: { headers: Headers }) => {
+export const getOrigin = ({ headers }: { headers: Headers }) => {
   const host = headers.get('host') || appConfig.appDomain;
 
   const protocol = ['localhost', '127.0.0.1'].includes(host.split(":")[0]) ? 'http' : 'https';
@@ -26,12 +26,26 @@ type appendChar = {
 
 export const addUnderline = ({ char, 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":
     case "script":
     case "subscript":
-      return char + '\u035f';
+      return char + '\u0332';
     default:
-      return char;
+      return char + '\u0332';
   }
 }
 export const addDoubleUnderline = ({ char, oldChar, fontKey }: appendChar) => {

src/middleware.ts

@@ -3,6 +3,15 @@ import createMiddleware from "next-intl/middleware";
 import { NextRequest } from "next/server";
 
 export default async function middleware(req: NextRequest) {
+  const reqHeaders = new Headers(req.headers);
+  reqHeaders.set('x-request-url', req.url);
+
+  // Create a new request with updated headers
+  const modifiedRequest = new NextRequest(req.url, {
+    headers: reqHeaders,
+    method: req.method,
+    body: req.body
+  });
   const intlMiddleware = createMiddleware({
     locales: appConfig.i18n.locales,
     defaultLocale: appConfig.i18n.defaultLocale,
@@ -11,7 +20,7 @@ export default async function middleware(req: NextRequest) {
     alternateLinks: true
   });
 
-  return intlMiddleware(req);
+  return intlMiddleware(modifiedRequest);
 }
 
 export const config = {