@windrun-huaiin/third-ui 31.3.0 → 31.3.2

package/dist/fuma/mdx/toc-footer-wrapper.js

@@ -4,9 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var tocBase = require('./toc-base.js');
 
+function joinUrlPath(baseUrl, path) {
+    return `${baseUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
+}
 function TocFooterWrapper({ lastModified, editPath, githubBaseUrl, copyButtonComponent }) {
     const showEdit = githubBaseUrl && editPath;
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2 items-start m-4", children: [jsxRuntime.jsx(tocBase.LastUpdatedDate, { date: lastModified }), copyButtonComponent, showEdit && jsxRuntime.jsx(tocBase.EditOnGitHub, { url: `${githubBaseUrl}${editPath}` })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2 items-start m-4", children: [jsxRuntime.jsx(tocBase.LastUpdatedDate, { date: lastModified }), copyButtonComponent, showEdit && jsxRuntime.jsx(tocBase.EditOnGitHub, { url: joinUrlPath(githubBaseUrl, editPath) })] }));
 }
 
 exports.TocFooterWrapper = TocFooterWrapper;

package/dist/fuma/mdx/toc-footer-wrapper.mjs

@@ -2,9 +2,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { LastUpdatedDate, EditOnGitHub } from './toc-base.mjs';
 
+function joinUrlPath(baseUrl, path) {
+    return `${baseUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
+}
 function TocFooterWrapper({ lastModified, editPath, githubBaseUrl, copyButtonComponent }) {
     const showEdit = githubBaseUrl && editPath;
-    return (jsxs("div", { className: "flex flex-col gap-y-2 items-start m-4", children: [jsx(LastUpdatedDate, { date: lastModified }), copyButtonComponent, showEdit && jsx(EditOnGitHub, { url: `${githubBaseUrl}${editPath}` })] }));
+    return (jsxs("div", { className: "flex flex-col gap-y-2 items-start m-4", children: [jsx(LastUpdatedDate, { date: lastModified }), copyButtonComponent, showEdit && jsx(EditOnGitHub, { url: joinUrlPath(githubBaseUrl, editPath) })] }));
 }
 
 export { TocFooterWrapper };

package/dist/lib/seo-metadata.d.ts

@@ -6,5 +6,24 @@ export interface CreateLocalizedSiteMetadataOptions {
     defaultLocale: string;
     localePrefixAsNeeded: boolean;
 }
-export type LocalizedSiteMetadata = Pick<Metadata, 'title' | 'description' | 'keywords' | 'alternates' | 'icons'>;
+export interface LocalizedPageUrlOptions extends CreateLocalizedSiteMetadataOptions {
+    pathname: string;
+}
+export type LocalizedSiteMetadata = Pick<Metadata, 'title' | 'description' | 'keywords' | 'icons' | 'openGraph' | 'twitter'>;
+export type LocalizedPageMetadataOverrides = Pick<Metadata, 'title' | 'description' | 'keywords' | 'icons' | 'openGraph' | 'twitter' | 'robots' | 'authors' | 'creator' | 'publisher' | 'category'>;
+export interface CreateLocalizedPageMetadataOptions {
+    url: LocalizedPageUrlOptions;
+    site?: LocalizedSiteMetadata;
+    page?: LocalizedPageMetadataOverrides;
+}
+export interface LocalizedNamespaceMetadataOptions {
+    url: LocalizedPageUrlOptions;
+    namespace: string;
+}
+export declare function resolveMetadataOverrides(options: {
+    locale: string;
+    namespace: string;
+}): Promise<LocalizedPageMetadataOverrides>;
 export declare function createLocalizedSiteMetadata(options: CreateLocalizedSiteMetadataOptions): Promise<LocalizedSiteMetadata>;
+export declare function createLocalizedPageMetadata(options: CreateLocalizedPageMetadataOptions): Metadata;
+export declare function createLocalizedMetadata(options: LocalizedNamespaceMetadataOptions): Promise<Metadata>;

package/dist/lib/seo-metadata.js

@@ -11,24 +11,130 @@ const DEFAULT_SITE_ICONS = [
     { rel: 'apple-touch-icon', sizes: '180x180', url: '/favicon-180x180.png' },
     { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
 ];
+function buildAlternateUrls(options) {
+    const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales, pathname } = options;
+    const canonicalPath = utils.getAsNeededLocalizedUrl(locale, pathname, localePrefixAsNeeded, defaultLocale);
+    const canonical = `${baseUrl}${canonicalPath}`;
+    const languages = Object.fromEntries(locales.map((siteLocale) => [
+        siteLocale,
+        `${baseUrl}${utils.getAsNeededLocalizedUrl(siteLocale, pathname, localePrefixAsNeeded, defaultLocale)}`,
+    ]));
+    return {
+        canonical,
+        languages,
+    };
+}
+function getOptionalTranslation(t, key) {
+    return t.has(key) ? t(key) : undefined;
+}
+function getNestedTranslation(t, key, fallback) {
+    var _a;
+    return (_a = getOptionalTranslation(t, key)) !== null && _a !== void 0 ? _a : fallback;
+}
+function getAbsoluteUrl(baseUrl, value) {
+    if (/^https?:\/\//i.test(value)) {
+        return value;
+    }
+    const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    const normalizedPath = value.startsWith('/') ? value : `/${value}`;
+    return `${normalizedBaseUrl}${normalizedPath}`;
+}
+function getImageUrls(baseUrl, value) {
+    if (!value)
+        return undefined;
+    const urls = Array.isArray(value) ? value : [value];
+    const cleaned = urls.map((item) => item.trim()).filter(Boolean);
+    return cleaned.length > 0
+        ? cleaned.map((url) => ({ url: getAbsoluteUrl(baseUrl, url) }))
+        : undefined;
+}
+function getEnvText(value) {
+    const trimmed = value === null || value === void 0 ? void 0 : value.trim();
+    return trimmed ? trimmed : undefined;
+}
+function resolveMetadataOverrides(options) {
+    return tslib.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const { locale, namespace } = options;
+        const t = yield server.getTranslations({ locale, namespace });
+        const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+        const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+        const baseUrl = (_a = getEnvText(process.env.NEXT_PUBLIC_BASE_URL)) !== null && _a !== void 0 ? _a : '';
+        const title = getOptionalTranslation(t, 'title');
+        const description = getOptionalTranslation(t, 'description');
+        return {
+            title,
+            description,
+            keywords: getOptionalTranslation(t, 'keywords'),
+            openGraph: Object.assign(Object.assign({}, (ogType ? { type: ogType } : {})), { title: getNestedTranslation(t, 'openGraph.title', title), description: getNestedTranslation(t, 'openGraph.description', description), images: getImageUrls(baseUrl, (_b = getOptionalTranslation(t, 'openGraph.image')) !== null && _b !== void 0 ? _b : getOptionalTranslation(t, 'openGraph.images')) }),
+            twitter: Object.assign(Object.assign({}, (xSiteName ? { site: xSiteName } : {})), { title: getNestedTranslation(t, 'twitter.title', title), description: getNestedTranslation(t, 'twitter.description', description), images: getImageUrls(baseUrl, (_c = getOptionalTranslation(t, 'twitter.image')) !== null && _c !== void 0 ? _c : getOptionalTranslation(t, 'twitter.images')) }),
+        };
+    });
+}
 function createLocalizedSiteMetadata(options) {
     return tslib.__awaiter(this, void 0, void 0, function* () {
-        const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+        var _a;
+        const { locale } = options;
         const t = yield server.getTranslations({ locale, namespace: 'home' });
+        const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+        const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+        const baseUrl = (_a = getEnvText(process.env.NEXT_PUBLIC_BASE_URL)) !== null && _a !== void 0 ? _a : '';
+        const title = t('webTitle');
+        const description = t('webDescription');
+        const ogTitle = getNestedTranslation(t, 'openGraph.title', title);
+        const ogDescription = getNestedTranslation(t, 'openGraph.description', description);
+        const twitterTitle = getNestedTranslation(t, 'twitter.title', title);
+        const twitterDescription = getNestedTranslation(t, 'twitter.description', description);
         return {
-            title: t('webTitle'),
-            description: t('webDescription'),
+            title,
+            description,
             keywords: t('keywords'),
-            alternates: {
-                canonical: `${baseUrl}${utils.getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
-                languages: Object.fromEntries(locales.map((siteLocale) => [
-                    siteLocale,
-                    `${baseUrl}${utils.getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
-                ])),
-            },
             icons: DEFAULT_SITE_ICONS,
+            openGraph: Object.assign(Object.assign({}, (ogType ? { type: ogType } : {})), { title: ogTitle, description: ogDescription, images: getImageUrls(baseUrl, getOptionalTranslation(t, 'openGraph.image')) }),
+            twitter: Object.assign(Object.assign({}, (xSiteName ? { site: xSiteName } : {})), { title: twitterTitle, description: twitterDescription, images: getImageUrls(baseUrl, getOptionalTranslation(t, 'twitter.image')) }),
         };
     });
 }
+function createLocalizedPageMetadata(options) {
+    var _a, _b, _c, _d;
+    const { page, site, url } = options;
+    const { baseUrl } = url;
+    const alternates = buildAlternateUrls(url);
+    const openGraph = Object.assign(Object.assign(Object.assign({}, site === null || site === void 0 ? void 0 : site.openGraph), page === null || page === void 0 ? void 0 : page.openGraph), { url: alternates.canonical });
+    const twitter = Object.assign(Object.assign({}, site === null || site === void 0 ? void 0 : site.twitter), page === null || page === void 0 ? void 0 : page.twitter);
+    return {
+        metadataBase: new URL(baseUrl),
+        title: (_a = page === null || page === void 0 ? void 0 : page.title) !== null && _a !== void 0 ? _a : site === null || site === void 0 ? void 0 : site.title,
+        description: (_b = page === null || page === void 0 ? void 0 : page.description) !== null && _b !== void 0 ? _b : site === null || site === void 0 ? void 0 : site.description,
+        keywords: (_c = page === null || page === void 0 ? void 0 : page.keywords) !== null && _c !== void 0 ? _c : site === null || site === void 0 ? void 0 : site.keywords,
+        icons: (_d = page === null || page === void 0 ? void 0 : page.icons) !== null && _d !== void 0 ? _d : site === null || site === void 0 ? void 0 : site.icons,
+        openGraph,
+        twitter,
+        robots: page === null || page === void 0 ? void 0 : page.robots,
+        authors: page === null || page === void 0 ? void 0 : page.authors,
+        creator: page === null || page === void 0 ? void 0 : page.creator,
+        publisher: page === null || page === void 0 ? void 0 : page.publisher,
+        category: page === null || page === void 0 ? void 0 : page.category,
+        alternates,
+    };
+}
+function createLocalizedMetadata(options) {
+    return tslib.__awaiter(this, void 0, void 0, function* () {
+        const { namespace, url } = options;
+        const site = yield createLocalizedSiteMetadata(url);
+        const page = yield resolveMetadataOverrides({
+            locale: url.locale,
+            namespace,
+        });
+        return createLocalizedPageMetadata({
+            url,
+            site,
+            page,
+        });
+    });
+}
 
+exports.createLocalizedMetadata = createLocalizedMetadata;
+exports.createLocalizedPageMetadata = createLocalizedPageMetadata;
 exports.createLocalizedSiteMetadata = createLocalizedSiteMetadata;
+exports.resolveMetadataOverrides = resolveMetadataOverrides;

package/dist/lib/seo-metadata.mjs

@@ -9,24 +9,127 @@ const DEFAULT_SITE_ICONS = [
     { rel: 'apple-touch-icon', sizes: '180x180', url: '/favicon-180x180.png' },
     { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
 ];
+function buildAlternateUrls(options) {
+    const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales, pathname } = options;
+    const canonicalPath = getAsNeededLocalizedUrl(locale, pathname, localePrefixAsNeeded, defaultLocale);
+    const canonical = `${baseUrl}${canonicalPath}`;
+    const languages = Object.fromEntries(locales.map((siteLocale) => [
+        siteLocale,
+        `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, pathname, localePrefixAsNeeded, defaultLocale)}`,
+    ]));
+    return {
+        canonical,
+        languages,
+    };
+}
+function getOptionalTranslation(t, key) {
+    return t.has(key) ? t(key) : undefined;
+}
+function getNestedTranslation(t, key, fallback) {
+    var _a;
+    return (_a = getOptionalTranslation(t, key)) !== null && _a !== void 0 ? _a : fallback;
+}
+function getAbsoluteUrl(baseUrl, value) {
+    if (/^https?:\/\//i.test(value)) {
+        return value;
+    }
+    const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    const normalizedPath = value.startsWith('/') ? value : `/${value}`;
+    return `${normalizedBaseUrl}${normalizedPath}`;
+}
+function getImageUrls(baseUrl, value) {
+    if (!value)
+        return undefined;
+    const urls = Array.isArray(value) ? value : [value];
+    const cleaned = urls.map((item) => item.trim()).filter(Boolean);
+    return cleaned.length > 0
+        ? cleaned.map((url) => ({ url: getAbsoluteUrl(baseUrl, url) }))
+        : undefined;
+}
+function getEnvText(value) {
+    const trimmed = value === null || value === void 0 ? void 0 : value.trim();
+    return trimmed ? trimmed : undefined;
+}
+function resolveMetadataOverrides(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const { locale, namespace } = options;
+        const t = yield getTranslations({ locale, namespace });
+        const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+        const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+        const baseUrl = (_a = getEnvText(process.env.NEXT_PUBLIC_BASE_URL)) !== null && _a !== void 0 ? _a : '';
+        const title = getOptionalTranslation(t, 'title');
+        const description = getOptionalTranslation(t, 'description');
+        return {
+            title,
+            description,
+            keywords: getOptionalTranslation(t, 'keywords'),
+            openGraph: Object.assign(Object.assign({}, (ogType ? { type: ogType } : {})), { title: getNestedTranslation(t, 'openGraph.title', title), description: getNestedTranslation(t, 'openGraph.description', description), images: getImageUrls(baseUrl, (_b = getOptionalTranslation(t, 'openGraph.image')) !== null && _b !== void 0 ? _b : getOptionalTranslation(t, 'openGraph.images')) }),
+            twitter: Object.assign(Object.assign({}, (xSiteName ? { site: xSiteName } : {})), { title: getNestedTranslation(t, 'twitter.title', title), description: getNestedTranslation(t, 'twitter.description', description), images: getImageUrls(baseUrl, (_c = getOptionalTranslation(t, 'twitter.image')) !== null && _c !== void 0 ? _c : getOptionalTranslation(t, 'twitter.images')) }),
+        };
+    });
+}
 function createLocalizedSiteMetadata(options) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+        var _a;
+        const { locale } = options;
         const t = yield getTranslations({ locale, namespace: 'home' });
+        const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+        const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+        const baseUrl = (_a = getEnvText(process.env.NEXT_PUBLIC_BASE_URL)) !== null && _a !== void 0 ? _a : '';
+        const title = t('webTitle');
+        const description = t('webDescription');
+        const ogTitle = getNestedTranslation(t, 'openGraph.title', title);
+        const ogDescription = getNestedTranslation(t, 'openGraph.description', description);
+        const twitterTitle = getNestedTranslation(t, 'twitter.title', title);
+        const twitterDescription = getNestedTranslation(t, 'twitter.description', description);
         return {
-            title: t('webTitle'),
-            description: t('webDescription'),
+            title,
+            description,
             keywords: t('keywords'),
-            alternates: {
-                canonical: `${baseUrl}${getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
-                languages: Object.fromEntries(locales.map((siteLocale) => [
-                    siteLocale,
-                    `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
-                ])),
-            },
             icons: DEFAULT_SITE_ICONS,
+            openGraph: Object.assign(Object.assign({}, (ogType ? { type: ogType } : {})), { title: ogTitle, description: ogDescription, images: getImageUrls(baseUrl, getOptionalTranslation(t, 'openGraph.image')) }),
+            twitter: Object.assign(Object.assign({}, (xSiteName ? { site: xSiteName } : {})), { title: twitterTitle, description: twitterDescription, images: getImageUrls(baseUrl, getOptionalTranslation(t, 'twitter.image')) }),
         };
     });
 }
+function createLocalizedPageMetadata(options) {
+    var _a, _b, _c, _d;
+    const { page, site, url } = options;
+    const { baseUrl } = url;
+    const alternates = buildAlternateUrls(url);
+    const openGraph = Object.assign(Object.assign(Object.assign({}, site === null || site === void 0 ? void 0 : site.openGraph), page === null || page === void 0 ? void 0 : page.openGraph), { url: alternates.canonical });
+    const twitter = Object.assign(Object.assign({}, site === null || site === void 0 ? void 0 : site.twitter), page === null || page === void 0 ? void 0 : page.twitter);
+    return {
+        metadataBase: new URL(baseUrl),
+        title: (_a = page === null || page === void 0 ? void 0 : page.title) !== null && _a !== void 0 ? _a : site === null || site === void 0 ? void 0 : site.title,
+        description: (_b = page === null || page === void 0 ? void 0 : page.description) !== null && _b !== void 0 ? _b : site === null || site === void 0 ? void 0 : site.description,
+        keywords: (_c = page === null || page === void 0 ? void 0 : page.keywords) !== null && _c !== void 0 ? _c : site === null || site === void 0 ? void 0 : site.keywords,
+        icons: (_d = page === null || page === void 0 ? void 0 : page.icons) !== null && _d !== void 0 ? _d : site === null || site === void 0 ? void 0 : site.icons,
+        openGraph,
+        twitter,
+        robots: page === null || page === void 0 ? void 0 : page.robots,
+        authors: page === null || page === void 0 ? void 0 : page.authors,
+        creator: page === null || page === void 0 ? void 0 : page.creator,
+        publisher: page === null || page === void 0 ? void 0 : page.publisher,
+        category: page === null || page === void 0 ? void 0 : page.category,
+        alternates,
+    };
+}
+function createLocalizedMetadata(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { namespace, url } = options;
+        const site = yield createLocalizedSiteMetadata(url);
+        const page = yield resolveMetadataOverrides({
+            locale: url.locale,
+            namespace,
+        });
+        return createLocalizedPageMetadata({
+            url,
+            site,
+            page,
+        });
+    });
+}
 
-export { createLocalizedSiteMetadata };
+export { createLocalizedMetadata, createLocalizedPageMetadata, createLocalizedSiteMetadata, resolveMetadataOverrides };

package/dist/main/cta.js

@@ -38,7 +38,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxRuntime.jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxRuntime.jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("p", { className: "mx-auto mb-8 max-w-3xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [data.description1, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: utils.cn(lib.themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
+        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxRuntime.jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxRuntime.jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("div", { className: "mx-auto mb-8 space-y-2 max-w-4xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [jsxRuntime.jsx("p", { children: data.description1 }), jsxRuntime.jsx("p", { className: utils.cn(lib.themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
     });
 }
 

package/dist/main/cta.mjs

@@ -36,7 +36,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), "?"] }), jsxs("p", { className: "mx-auto mb-8 max-w-3xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [data.description1, jsx("br", {}), jsx("span", { className: cn(themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
+        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsx("div", { className: "\n          third-ui-cta-surface\n          relative overflow-hidden rounded-2xl border border-black/5 py-3 text-center shadow-sm\n          animate-cta-gradient-wave\n          sm:py-6 md:py-8\n          dark:border-white/10 dark:shadow-none\n        ", style: createCTAStyle(), children: jsxs("div", { className: "relative z-10 px-4 sm:px-6", children: [jsxs("h2", { className: "mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), "?"] }), jsxs("div", { className: "mx-auto mb-8 space-y-2 max-w-4xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300", children: [jsx("p", { children: data.description1 }), jsx("p", { className: cn(themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }) }));
     });
 }
 

package/dist/main/section-layout.d.ts

@@ -1 +1 @@
-export declare const responsiveSection = "mx-auto max-w-6xl min-w-[calc(100vw-22rem)]  px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
+export declare const responsiveSection = "mx-auto max-w-6xl min-w-[calc(100vw-22rem)]  px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20 w-full";

package/dist/main/section-layout.js

@@ -2,6 +2,6 @@
 
 const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
 const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
-const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;
+const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing} w-full`;
 
 exports.responsiveSection = responsiveSection;

package/dist/main/section-layout.mjs

@@ -1,5 +1,5 @@
 const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
 const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
-const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;
+const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing} w-full`;
 
 export { responsiveSection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.3.0",
+  "version": "31.3.2",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -245,7 +245,7 @@
     "zod": "^4.3.6",
     "@windrun-huaiin/base-ui": "^31.0.0",
     "@windrun-huaiin/contracts": "^31.0.0",
-    "@windrun-huaiin/lib": "^31.0.2"
+    "@windrun-huaiin/lib": "^31.0.3"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/mdx/toc-footer-wrapper.tsx

@@ -10,13 +10,17 @@ interface TocFooterProps {
   copyButtonComponent?: React.ReactNode;
 }
 
+function joinUrlPath(baseUrl: string, path: string) {
+  return `${baseUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
+}
+
 export function TocFooterWrapper({ lastModified, editPath, githubBaseUrl, copyButtonComponent }: TocFooterProps) {
   const showEdit = githubBaseUrl && editPath;
   return (
     <div className="flex flex-col gap-y-2 items-start m-4">
       <LastUpdatedDate date={lastModified} />
       {copyButtonComponent}
-      {showEdit && <EditOnGitHub url={`${githubBaseUrl}${editPath}`} />}
+      {showEdit && <EditOnGitHub url={joinUrlPath(githubBaseUrl, editPath)} />}
     </div>
   );
 } 

package/src/lib/seo-metadata.ts

@@ -10,11 +10,41 @@ export interface CreateLocalizedSiteMetadataOptions {
   localePrefixAsNeeded: boolean;
 }
 
+export interface LocalizedPageUrlOptions extends CreateLocalizedSiteMetadataOptions {
+  pathname: string;
+}
+
 export type LocalizedSiteMetadata = Pick<
   Metadata,
-  'title' | 'description' | 'keywords' | 'alternates' | 'icons'
+  'title' | 'description' | 'keywords' | 'icons' | 'openGraph' | 'twitter'
+>;
+
+export type LocalizedPageMetadataOverrides = Pick<
+  Metadata,
+  | 'title'
+  | 'description'
+  | 'keywords'
+  | 'icons'
+  | 'openGraph'
+  | 'twitter'
+  | 'robots'
+  | 'authors'
+  | 'creator'
+  | 'publisher'
+  | 'category'
 >;
 
+export interface CreateLocalizedPageMetadataOptions {
+  url: LocalizedPageUrlOptions;
+  site?: LocalizedSiteMetadata;
+  page?: LocalizedPageMetadataOverrides;
+}
+
+export interface LocalizedNamespaceMetadataOptions {
+  url: LocalizedPageUrlOptions;
+  namespace: string;
+}
+
 const DEFAULT_SITE_ICONS = [
   { rel: 'icon', type: 'image/png', sizes: '16x16', url: '/favicon-16x16.png' },
   { rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
@@ -23,25 +53,180 @@ const DEFAULT_SITE_ICONS = [
   { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
 ];
 
+function buildAlternateUrls(options: LocalizedPageUrlOptions) {
+  const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales, pathname } = options;
+  const canonicalPath = getAsNeededLocalizedUrl(locale, pathname, localePrefixAsNeeded, defaultLocale);
+  const canonical = `${baseUrl}${canonicalPath}`;
+  const languages = Object.fromEntries(
+    locales.map((siteLocale) => [
+      siteLocale,
+      `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, pathname, localePrefixAsNeeded, defaultLocale)}`,
+    ]),
+  );
+
+  return {
+    canonical,
+    languages,
+  };
+}
+
+function getOptionalTranslation(
+  t: Awaited<ReturnType<typeof getTranslations>>,
+  key: string,
+): string | undefined {
+  return t.has(key) ? t(key) : undefined;
+}
+
+function getNestedTranslation(
+  t: Awaited<ReturnType<typeof getTranslations>>,
+  key: string,
+  fallback: string | undefined,
+): string | undefined {
+  return getOptionalTranslation(t, key) ?? fallback;
+}
+
+function getAbsoluteUrl(baseUrl: string, value: string): string {
+  if (/^https?:\/\//i.test(value)) {
+    return value;
+  }
+
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  const normalizedPath = value.startsWith('/') ? value : `/${value}`;
+  return `${normalizedBaseUrl}${normalizedPath}`;
+}
+
+function getImageUrls(baseUrl: string, value?: string | string[]): { url: string }[] | undefined {
+  if (!value) return undefined;
+  const urls = Array.isArray(value) ? value : [value];
+  const cleaned = urls.map((item) => item.trim()).filter(Boolean);
+  return cleaned.length > 0
+    ? cleaned.map((url) => ({ url: getAbsoluteUrl(baseUrl, url) }))
+    : undefined;
+}
+
+function getEnvText(value?: string): string | undefined {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : undefined;
+}
+
+export async function resolveMetadataOverrides(options: {
+  locale: string;
+  namespace: string;
+}): Promise<LocalizedPageMetadataOverrides> {
+  const { locale, namespace } = options;
+  const t = await getTranslations({ locale, namespace });
+  const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+  const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+  const baseUrl = getEnvText(process.env.NEXT_PUBLIC_BASE_URL) ?? '';
+  const title = getOptionalTranslation(t, 'title');
+  const description = getOptionalTranslation(t, 'description');
+
+  return {
+    title,
+    description,
+    keywords: getOptionalTranslation(t, 'keywords'),
+    openGraph: {
+      ...(ogType ? { type: ogType as any } : {}),
+      title: getNestedTranslation(t, 'openGraph.title', title),
+      description: getNestedTranslation(t, 'openGraph.description', description),
+      images: getImageUrls(
+        baseUrl,
+        getOptionalTranslation(t, 'openGraph.image') ?? getOptionalTranslation(t, 'openGraph.images'),
+      ),
+    },
+    twitter: {
+      ...(xSiteName ? { site: xSiteName } : {}),
+      title: getNestedTranslation(t, 'twitter.title', title),
+      description: getNestedTranslation(t, 'twitter.description', description),
+      images: getImageUrls(
+        baseUrl,
+        getOptionalTranslation(t, 'twitter.image') ?? getOptionalTranslation(t, 'twitter.images'),
+      ),
+    },
+  };
+}
+
 export async function createLocalizedSiteMetadata(
   options: CreateLocalizedSiteMetadataOptions,
 ): Promise<LocalizedSiteMetadata> {
-  const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+  const { locale } = options;
   const t = await getTranslations({ locale, namespace: 'home' });
+  const ogType = getEnvText(process.env.NEXT_PUBLIC_OG_TYPE);
+  const xSiteName = getEnvText(process.env.NEXT_PUBLIC_X_SITE_NAME);
+  const baseUrl = getEnvText(process.env.NEXT_PUBLIC_BASE_URL) ?? '';
+  const title = t('webTitle');
+  const description = t('webDescription');
+  const ogTitle = getNestedTranslation(t, 'openGraph.title', title);
+  const ogDescription = getNestedTranslation(t, 'openGraph.description', description);
+  const twitterTitle = getNestedTranslation(t, 'twitter.title', title);
+  const twitterDescription = getNestedTranslation(t, 'twitter.description', description);
 
   return {
-    title: t('webTitle'),
-    description: t('webDescription'),
+    title,
+    description,
     keywords: t('keywords'),
-    alternates: {
-      canonical: `${baseUrl}${getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
-      languages: Object.fromEntries(
-        locales.map((siteLocale) => [
-          siteLocale,
-          `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
-        ]),
-      ),
-    },
     icons: DEFAULT_SITE_ICONS,
+    openGraph: {
+      ...(ogType ? { type: ogType as any } : {}),
+      title: ogTitle,
+      description: ogDescription,
+      images: getImageUrls(baseUrl, getOptionalTranslation(t, 'openGraph.image')),
+    },
+    twitter: {
+      ...(xSiteName ? { site: xSiteName } : {}),
+      title: twitterTitle,
+      description: twitterDescription,
+      images: getImageUrls(baseUrl, getOptionalTranslation(t, 'twitter.image')),
+    },
   };
 }
+
+export function createLocalizedPageMetadata(
+  options: CreateLocalizedPageMetadataOptions,
+): Metadata {
+  const { page, site, url } = options;
+  const { baseUrl } = url;
+  const alternates = buildAlternateUrls(url);
+  const openGraph = {
+    ...site?.openGraph,
+    ...page?.openGraph,
+    url: alternates.canonical,
+  } as Metadata['openGraph'];
+  const twitter = {
+    ...site?.twitter,
+    ...page?.twitter,
+  } as Metadata['twitter'];
+
+  return {
+    metadataBase: new URL(baseUrl),
+    title: page?.title ?? site?.title,
+    description: page?.description ?? site?.description,
+    keywords: page?.keywords ?? site?.keywords,
+    icons: page?.icons ?? site?.icons,
+    openGraph,
+    twitter,
+    robots: page?.robots,
+    authors: page?.authors,
+    creator: page?.creator,
+    publisher: page?.publisher,
+    category: page?.category,
+    alternates,
+  };
+}
+
+export async function createLocalizedMetadata(
+  options: LocalizedNamespaceMetadataOptions,
+): Promise<Metadata> {
+  const { namespace, url } = options;
+  const site = await createLocalizedSiteMetadata(url);
+  const page = await resolveMetadataOverrides({
+    locale: url.locale,
+    namespace,
+  });
+
+  return createLocalizedPageMetadata({
+    url,
+    site,
+    page,
+  });
+}

package/src/main/cta.tsx

@@ -72,11 +72,10 @@ export async function CTA({
           <h2 className="mb-6 text-3xl font-bold text-neutral-950 md:text-4xl dark:text-neutral-50">
             {data.title} <span className={themeIconColor}>{data.eyesOn}</span>?
           </h2>
-          <p className="mx-auto mb-8 max-w-3xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300">
-            {data.description1}
-            <br />
-            <span className={cn(themeIconColor, "text-xl sm:text-2xl")}>{data.description2}</span>
-          </p>
+          <div className="mx-auto mb-8 space-y-2 max-w-4xl text-base text-neutral-700 sm:text-xl dark:text-neutral-300">
+            <p>{data.description1}</p>
+            <p className={cn(themeIconColor, "text-xl sm:text-2xl")}>{data.description2}</p>
+          </div>
           <GradientButton
             title={data.button}
             href={data.url}

package/src/main/section-layout.ts

@@ -2,4 +2,4 @@
 const sectionSpacing = "px-4 py-10 sm:px-6 md:px-8 lg:px-10 scroll-mt-20";
 const wideWidth = "max-w-6xl min-w-[calc(100vw-22rem)] ";
 
-export const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing}`;
+export const responsiveSection = `mx-auto ${wideWidth} ${sectionSpacing} w-full`;