add template page metas (#308)

This commit is contained in:
Guy Ben-Aharon
2024-11-03 22:29:36 +02:00
committed by GitHub
parent 9ac26dbf7a
commit 1880789b0f
3 changed files with 71 additions and 6 deletions

View File

@@ -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 ?? '';

View File

@@ -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">

View File

@@ -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]';
},
},
},
},
});