add template page metas (chartdb#308)

panrein-dev · Nov 3, 2024 · 1880789 · 1880789
1 parent 9ac26db
commit 1880789
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 6 deletions.
diff --git a/src/lib/env.ts b/src/lib/env.ts
@@ -2,3 +2,4 @@ export const OPENAI_API_KEY: string = import.meta.env.VITE_OPENAI_API_KEY;
 export const IS_CHARTDB_IO: boolean =
     import.meta.env.VITE_IS_CHARTDB_IO === 'true';
 export const APP_URL: string = import.meta.env.VITE_APP_URL;
+export const HOST_URL: string = import.meta.env.VITE_HOST_URL ?? '';
diff --git a/src/pages/template-page/template-page.tsx b/src/pages/template-page/template-page.tsx
@@ -31,7 +31,7 @@ import { Canvas } from '../editor-page/canvas/canvas';
 import { ReactFlowProvider } from '@xyflow/react';
 import { ChartDBProvider } from '@/context/chartdb-context/chartdb-provider';
 import { Helmet } from 'react-helmet-async';
-import { APP_URL } from '@/lib/env';
+import { APP_URL, HOST_URL } from '@/lib/env';
 
 export interface TemplatePageLoaderData {
     template: Template | undefined;
@@ -63,11 +63,58 @@ const TemplatePageComponent: React.FC = () => {
     return (
         <>
             <Helmet>
-                <title>
-                    {template
-                        ? `ChartDB - ${template.name} - ${template.shortDescription}`
-                        : 'ChartDB - Database Schema Template'}
-                </title>
+                {template ? (
+                    <>
+                        <title>
+                            Database schema diagram for {template.name} |
+                            ChartDB
+                        </title>
+                        <meta
+                            name="title"
+                            content={`Database schema for - ${template.name} | ChartDB`}
+                        />
+                        <meta
+                            name="description"
+                            content={`${template.shortDescription}: ${template.description}`}
+                        />
+                        <meta
+                            name="keywords"
+                            content={`${template.keywords.join(', ')}`}
+                        />
+                        <meta
+                            property="og:title"
+                            content={`Database schema for - ${template.name} | ChartDB`}
+                        />
+                        <meta
+                            property="og:description"
+                            content={`${template.shortDescription}: ${template.description}`}
+                        />
+                        <meta
+                            property="og:image"
+                            content={`${HOST_URL}${template.image}`}
+                        />
+                        <meta property="og:type" content="website" />
+
+                        <meta
+                            name="twitter:title"
+                            content={`Database schema for - ${template.name} | ChartDB`}
+                        />
+                        <meta
+                            name="twitter:description"
+                            content={`${template.shortDescription}: ${template.description}`}
+                        />
+                        <meta
+                            name="twitter:image"
+                            content={`${HOST_URL}${template.image}`}
+                        />
+                        <meta
+                            name="twitter:card"
+                            content="summary_large_image"
+                        />
+                    </>
+                ) : (
+                    <title>Database Schema Diagram | ChartDB</title>
+                )}
             </Helmet>
 
             <section className="flex h-screen w-screen flex-col bg-background">

diff --git a/vite.config.ts b/vite.config.ts
@@ -30,4 +30,21 @@ export default defineConfig({
             '@': path.resolve(__dirname, './src'),
         },
     },
+    build: {
+        rollupOptions: {
+            output: {
+                assetFileNames: (assetInfo) => {
+                    if (
+                        assetInfo.names &&
+                        assetInfo.originalFileNames.some((name) =>
+                            name.startsWith('src/assets/templates/')
+                        )
+                    ) {
+                        return 'assets/[name][extname]';
+                    }
+                    return 'assets/[name]-[hash][extname]';
+                },
+            },
+        },
+    },
 });