diff --git a/src/app/[locale]/editor/[data]/page.tsx b/src/app/[locale]/editor/[data]/page.tsx index a090266..cd02ba4 100644 --- a/src/app/[locale]/editor/[data]/page.tsx +++ b/src/app/[locale]/editor/[data]/page.tsx @@ -1,5 +1,7 @@ import { OnlyPage } from "@/components/editor/OnlyPage"; import { decodeText } from "@/lib/utils"; +import { Metadata } from "next"; +import { getTranslations } from "next-intl/server"; export default async function Page({ params }: { params: Promise<{ data: string }> }) { @@ -20,4 +22,64 @@ export default async function Page({ params }: { params: Promise<{ data: string return () -} \ No newline at end of file +} + +const host = process.env.NEXT_PUBLIC_HOST; + +export async function generateMetadata({ + params, +}: { + params: Promise<{ locale: string, data: string }>; +}): Promise { + const { locale, data } = await params; + const t = await getTranslations({ locale, namespace: "TextEditor" }); + + const name = `editor/${data}`; + let backgroundProp, textProp + + if (data) { + try { + const { bg, text } = JSON.parse(decodeText(data)); + + backgroundProp = bg; + textProp = text; + } catch (error) { + console.error("parse data from url error", error) + } + } + + const description = t("seoDescription") + `bacground: ${JSON.stringify(backgroundProp)}; text: ${JSON.stringify(textProp)})}`; + + return { + title: t("seoTitle"), + description, + openGraph: { + title: t("seoTitle"), + description, + url: `${host}/${locale}/${name}`, + images: [ + { + url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`, + width: 1200, + height: 630, + alt: t("seoTitle"), + }, + ], + locale: locale, + type: "website", + }, + twitter: { + card: "summary_large_image", + title: t("seoTitle"), + description, + images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`], + }, + alternates: { + canonical: `${host}/${name}`, + languages: { + en: `${host}/en/${name}`, + zh: `${host}/zh/${name}`, + }, + }, + }; +} diff --git a/src/app/[locale]/features-form/page.tsx b/src/app/[locale]/features-form/page.tsx index 4af1089..0b9dc3b 100644 --- a/src/app/[locale]/features-form/page.tsx +++ b/src/app/[locale]/features-form/page.tsx @@ -1,6 +1,7 @@ import Footer from "@/components/Footer"; import Header from "@/components/Header"; import { Box, Flex } from "@radix-ui/themes"; +import { Metadata } from "next"; export default function Page() { @@ -15,4 +16,51 @@ export default function Page() { ) +} + +const host = process.env.NEXT_PUBLIC_HOST; + +export async function generateMetadata({ + params, +}: { + params: Promise<{ locale: string }>; +}): Promise { + const { locale } = await params; + + const name = "features-form"; + + const title = "new features wanted"; + const description = title; + return { + title, + description, + openGraph: { + title, + description, + url: `${host}/${locale}/${name}`, + images: [ + { + url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`, + width: 1200, + height: 630, + alt: title, + }, + ], + locale: locale, + type: "website", + }, + twitter: { + card: "summary_large_image", + title, + description, + images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`], + }, + alternates: { + canonical: `${host}/${name}`, + languages: { + en: `${host}/en/${name}`, + zh: `${host}/zh/${name}`, + }, + }, + }; } \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d55750b..f907bb7 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -37,10 +37,12 @@ export default function Header() { {t("blogName")} - + + +