mirror of
https://github.com/chartdb/chartdb.git
synced 2025-11-04 05:53:15 +00:00
refactor template page - remove helmet data to a new component (#415)
* refactor template page - remove helmet data to a new component * change texts --------- Co-authored-by: johnnyfish <jonathanfishner11@gmail.com>
This commit is contained in:
Guy Ben-Aharon
GitHub
121
src/pages/templates-page/templates-page-helmet.tsx
Normal file
121
src/pages/templates-page/templates-page-helmet.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { HOST_URL } from '@/lib/env';
|
||||
|
||||
export interface TemplatesPageHelmetProps {
|
||||
tag?: string;
|
||||
isFeatured: boolean;
|
||||
}
|
||||
|
||||
export const TemplatesPageHelmet: React.FC<TemplatesPageHelmetProps> = ({
|
||||
tag,
|
||||
isFeatured,
|
||||
}) => {
|
||||
const { tag: tagParam } = useParams<{ tag: string }>();
|
||||
|
||||
return (
|
||||
<Helmet>
|
||||
{HOST_URL !== 'https://chartdb.io' ? (
|
||||
<link rel="canonical" href="https://chartdb.io/templates" />
|
||||
) : null}
|
||||
|
||||
{tag ? (
|
||||
<title>{`${tag} database schema diagram templates | ChartDB`}</title>
|
||||
) : isFeatured ? (
|
||||
<title>
|
||||
Featured database schema diagram templates | ChartDB
|
||||
</title>
|
||||
) : (
|
||||
<title>Database schema diagram templates | ChartDB</title>
|
||||
)}
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
name="description"
|
||||
content={`Discover a collection of real-world database schema diagrams for ${tag}, featuring example applications and popular open-source projects.`}
|
||||
/>
|
||||
) : (
|
||||
<meta
|
||||
name="description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
)}
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`${tag} database schema diagram templates | ChartDB`}
|
||||
/>
|
||||
) : isFeatured ? (
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Featured database schema diagram templates | ChartDB"
|
||||
/>
|
||||
) : (
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Database schema diagram templates | ChartDB"
|
||||
/>
|
||||
)}
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
property="og:url"
|
||||
content={`${HOST_URL}/templates/${tagParam}`}
|
||||
/>
|
||||
) : isFeatured ? (
|
||||
<meta
|
||||
property="og:url"
|
||||
content={`${HOST_URL}/templates/featured`}
|
||||
/>
|
||||
) : (
|
||||
<meta property="og:url" content={`${HOST_URL}/templates`} />
|
||||
)}
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Discover a collection of real-world database schema diagrams for ${tag}, featuring example applications and popular open-source projects.`}
|
||||
/>
|
||||
) : (
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
)}
|
||||
<meta property="og:image" content={`${HOST_URL}/chartdb.png`} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="ChartDB" />
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`${tag} database schema diagram templates | ChartDB`}
|
||||
/>
|
||||
) : (
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="Database schema diagram templates | ChartDB"
|
||||
/>
|
||||
)}
|
||||
|
||||
{tag ? (
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Discover a collection of real-world database schema diagrams for ${tag}, featuring example applications and popular open-source projects.`}
|
||||
/>
|
||||
) : (
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
)}
|
||||
|
||||
<meta name="twitter:image" content={`${HOST_URL}/chartdb.png`} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@ChartDB_io" />
|
||||
<meta name="twitter:creator" content="@ChartDB_io" />
|
||||
</Helmet>
|
||||
);
|
||||
};
|
||||
@@ -10,8 +10,7 @@ import { TemplateCard } from './template-card/template-card';
|
||||
import { useLoaderData, useMatches, useParams } from 'react-router-dom';
|
||||
import type { Template } from '@/templates-data/templates-data';
|
||||
import { Spinner } from '@/components/spinner/spinner';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { HOST_URL } from '@/lib/env';
|
||||
import { TemplatesPageHelmet } from './templates-page-helmet';
|
||||
|
||||
export interface TemplatesPageLoaderData {
|
||||
templates: Template[] | undefined;
|
||||
@@ -23,53 +22,21 @@ const TemplatesPageComponent: React.FC = () => {
|
||||
const data = useLoaderData() as TemplatesPageLoaderData;
|
||||
|
||||
const { templates, allTags } = data ?? {};
|
||||
const { tag } = useParams<{ tag: string }>();
|
||||
const { tag: tagParam } = useParams<{ tag: string }>();
|
||||
const matches = useMatches();
|
||||
const isFeatured = matches.some(
|
||||
(match) => match.id === 'templates_featured'
|
||||
);
|
||||
const isAllTemplates = matches.some((match) => match.id === 'templates');
|
||||
const tag = allTags?.find(
|
||||
(currentTag) =>
|
||||
tagParam?.toLowerCase().replace(/-/g, ' ') ===
|
||||
currentTag.toLowerCase()
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
{HOST_URL !== 'https://chartdb.io' ? (
|
||||
<link rel="canonical" href="https://chartdb.io/templates" />
|
||||
) : null}
|
||||
<title>Database Schema Diagram Templates | ChartDB</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Database Schema Diagram Templates | ChartDB"
|
||||
/>
|
||||
<meta property="og:url" content={`${HOST_URL}/templates`} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
<meta property="og:image" content={`${HOST_URL}/chartdb.png`} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="ChartDB" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="Database Schema Diagram Templates | ChartDB"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Discover a collection of real-world database schema diagrams, featuring example applications and popular open-source projects."
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content={`${HOST_URL}/chartdb.png`}
|
||||
/>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@ChartDB_io" />
|
||||
<meta name="twitter:creator" content="@ChartDB_io" />
|
||||
</Helmet>
|
||||
|
||||
<TemplatesPageHelmet tag={tag} isFeatured={isFeatured} />
|
||||
<section className="flex w-screen flex-col bg-background">
|
||||
<nav className="flex h-12 shrink-0 flex-row items-center justify-between border-b px-4">
|
||||
<div className="flex flex-1 justify-start gap-x-3">
|
||||
@@ -102,12 +69,23 @@ const TemplatesPageComponent: React.FC = () => {
|
||||
</nav>
|
||||
<div className="flex flex-col p-3 text-center md:px-28 md:text-left">
|
||||
<h1 className="font-primary text-2xl font-bold">
|
||||
Database Schema Templates
|
||||
{isFeatured
|
||||
? 'Featured database Schema Templates'
|
||||
: 'Database Schema Templates'}
|
||||
</h1>
|
||||
<h2 className="mt-1 font-primary text-base text-muted-foreground">
|
||||
Discover a collection of real-world database schema
|
||||
diagrams, featuring example applications and popular
|
||||
open-source projects.
|
||||
diagrams
|
||||
{tag ? (
|
||||
<>
|
||||
{' for '}
|
||||
<span className="font-semibold">{tag}</span>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
, featuring example applications and popular open-source
|
||||
projects.
|
||||
</h2>
|
||||
{!templates ? (
|
||||
<Spinner
|
||||
@@ -143,11 +121,7 @@ const TemplatesPageComponent: React.FC = () => {
|
||||
items={allTags.map((currentTag) => ({
|
||||
title: currentTag,
|
||||
href: `/templates/tags/${currentTag.toLowerCase().replace(/ /g, '-')}`,
|
||||
selected:
|
||||
tag
|
||||
?.toLowerCase()
|
||||
.replace(/-/g, ' ') ===
|
||||
currentTag.toLowerCase(),
|
||||
selected: tag === currentTag,
|
||||
}))}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user