update

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

@@ -1,20 +1,42 @@
 
 import { StyleMain } from "@/components/frontend/page/style/main";
-import { LocaleType } from "@/config";
+import { appConfig, LocaleType } from "@/config";
 import { getComponentMarkdown } from "@/i18n";
-
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { headers } from 'next/headers';
 export const runtime = 'edge';
 
+export async function generateMetadata({ params }:{ params: any }): Promise<Metadata> { 
+  const t = await getTranslations(params); 
+  return {
+    title: {
+      absolute: t('frontend.meta.default.title'),
+      default: t('frontend.meta.default.title'),
+      template: `${appConfig.appName}: %s`,
+    },
+    description: t('frontend.meta.default.description')
+  };
+}
+
+
 export default async function  Home({
   params
 }: Readonly<{ 
   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}`;
+
   // Load by key: public/data/generated/components-markdown.json
   const markdownContents = {
     block1: await getComponentMarkdown({
       locale: params.locale as LocaleType, 
-      componentPathName: "home/block1"
+      componentPathName: "home/block1",
+      origin
     })
   }
 

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

@@ -2,21 +2,28 @@
 import { StyleMain } from "@/components/frontend/page/style/main";
 import { LocaleType } from "@/config";
 import { getComponentMarkdown } from "@/i18n";
+import { origin } from "@/lib/utils";
+import { styleMetadata } from "@/metadata";
 import { SlugKey } from "@/slugs";
+import { headers } from "next/headers";
 
 export const runtime = 'edge';
 
-export default async function  Home({
+export { styleMetadata as generateMetadata };
+
+export default async function  Style({
   params
 }: Readonly<{ 
   params: { locale: LocaleType; style: SlugKey; };
 }>) {
-  const { locale, style } = params;
+  const { locale, style } = params; 
+
   // Load by key: public/data/generated/components-markdown.json
   const markdownContents = {
     block1: await getComponentMarkdown({
       locale, 
-      componentPathName: `style/${style}/block1`
+      componentPathName: `style/${style}/block1`,
+      origin: origin({headers: headers()})
     })
   }
 

src/app/[locale]/layout.tsx

@@ -18,8 +18,8 @@ const fontMono = FontMono({
   variable: "--font-mono",
 })
 
-export async function generateMetadata(locale: LocaleType): Promise<Metadata> { 
-  const t = await getTranslations(locale); 
+export async function generateMetadata({ params }:{ params: any }): Promise<Metadata> { 
+  const t = await getTranslations(params); 
   return {
     title: {
       absolute: t('frontend.meta.default.title'),

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

@@ -52,7 +52,7 @@ export const Sidebar =( )=>{
 
   return(
     <>
-      <Link href="" className={linkCls}>
+      <Link href="/" className={linkCls}>
         <span>{t('frontend.style.sidebar.all')}</span> 
       </Link>
       { Object.entries(slugFonts).map(([slug]) =>{ 

src/config.ts

@@ -10,7 +10,6 @@ export const appConfig = {
   appName: "Font Generator",
   appDescription: "font-generator",
   gaId: process.env.NEXT_PUBLIC_GA_ID,
-  origin: process.env.NODE_ENV === "development" ? "http://127.0.0.1:3000" : "https://font-generator.pages.dev",
   i18n: {
     locales,
     defaultLocale,

src/i18n.ts

@@ -58,10 +58,12 @@ const loadComponentsMarkdown = async () => {
 }
 export const getComponentMarkdown = async ({
   locale,
-  componentPathName
+  componentPathName,
+  origin
 }: {
   locale: LocaleType;
   componentPathName: string;
+  origin: string;
 }): Promise<string | undefined> => {
   const componentsMarkdownData = await loadComponentsMarkdown();
   if (!componentsMarkdownData) return undefined;
@@ -74,7 +76,7 @@ export const getComponentMarkdown = async ({
 
   const filePath = `/${contentComponentsMarkdownDir}/${componentPathName}/${currentLocale}.md`;
   try {
-    const response = await fetch(`${appConfig.origin}${filePath}`);
+    const response = await fetch(`${origin}${filePath}`);
     return await response.text();
   } catch (error) {
     console.error(`Error reading Markdown file: ${error}`);

src/lib/utils.ts

@@ -1,3 +1,4 @@
+import { appConfig } from "@/config";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -7,4 +8,11 @@ export function cn(...inputs: ClassValue[]) {
 export const canonicalLink = (domain: string, pathname: string) => {
   const isProduction = process.env.NODE_ENV === 'production';
   return `${isProduction ? "https" : "http"}://${domain}${pathname}`;
+}
+
+export const origin = ({ headers }: { headers: Headers }) => {
+  const host = headers.get('host') || appConfig.appDomain;
+
+  const protocol = ['localhost', '127.0.0.1'].includes(host.split(":")[0]) ? 'http' : 'https';
+  return `${protocol}://${host}`;
 }

src/metadata.ts

@@ -0,0 +1,53 @@
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { LocaleType } from "./config";
+import { SlugKey } from "./slugs";
+
+
+/**
+ * Metadata for src/app/[locale]/(frontend)/[style]/page.tsx
+ * 
+ * @returns 
+ */
+export const styleMetadata = async ({ params }: { params: { locale: LocaleType, style: SlugKey } }): Promise<Metadata> => {
+  const t = await getTranslations(params);
+  const { style } = params;
+  let title = "";
+  let description = "";
+  switch (style) {
+    case "bold":
+      title = t('frontend.style.bold.meta.title');
+      description = t('frontend.style.bold.meta.description');
+      break;
+    case "cool":
+      title = t('frontend.style.cool.meta.title');
+      description = t('frontend.style.cool.meta.description');
+      break;
+    case "fancy":
+      title = t('frontend.style.fancy.meta.title');
+      description = t('frontend.style.fancy.meta.description');
+      break;
+    case "italic":
+      title = t('frontend.style.italic.meta.title');
+      description = t('frontend.style.italic.meta.description');
+      break;
+    case "normal":
+      title = t('frontend.style.normal.meta.title');
+      description = t('frontend.style.normal.meta.description');
+      break;
+    case "small":
+      title = t('frontend.style.small.meta.title');
+      description = t('frontend.style.small.meta.description');
+      break;
+    case "bold-italic":
+      title = t('frontend.style.bold-italic.meta.title');
+      description = t('frontend.style.bold-italic.meta.description');
+      break;
+    default:
+      title = "";
+  }
+  return {
+    title,
+    description
+  };
+}