diff --git a/index.html b/index.html index 998937a6..b840c1db 100644 --- a/index.html +++ b/index.html @@ -4,41 +4,8 @@ - - - - - - - - - - - - - ChartDB - Database schema diagrams visualizer + ChartDB - Create & Visualize Database Schema Diagrams { return ( - - - + + + + + + + + + + + + + ChartDB - Database schema diagrams visualizer + + + + + ); }; diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx index 968448dd..e2f30aef 100644 --- a/src/context/chartdb-context/chartdb-provider.tsx +++ b/src/context/chartdb-context/chartdb-provider.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import type { DBTable } from '@/lib/domain/db-table'; import { deepCopy, generateId } from '@/lib/utils'; import { randomColor } from '@/lib/colors'; @@ -28,11 +28,10 @@ import { storageInitialValue } from '../storage-context/storage-context'; export interface ChartDBProviderProps { diagram?: Diagram; readonly?: boolean; - skipTitleUpdate?: boolean; } export const ChartDBProvider: React.FC< React.PropsWithChildren -> = ({ children, diagram, readonly, skipTitleUpdate }) => { +> = ({ children, diagram, readonly }) => { let db = useStorage(); const events = useEventEmitter(); const navigate = useNavigate(); @@ -64,19 +63,6 @@ export const ChartDBProvider: React.FC< db = storageInitialValue; } - useEffect(() => { - if (skipTitleUpdate) { - return; - } - - if (diagramName) { - document.title = `ChartDB - ${diagramName} Diagram | Visualize Database Schemas`; - } else { - document.title = - 'ChartDB - Create & Visualize Database Schema Diagrams'; - } - }, [diagramName, skipTitleUpdate]); - const schemas = useMemo( () => databasesWithSchemas.includes(databaseType) diff --git a/src/pages/editor-page/editor-page.tsx b/src/pages/editor-page/editor-page.tsx index 2893a015..2e5c9bb5 100644 --- a/src/pages/editor-page/editor-page.tsx +++ b/src/pages/editor-page/editor-page.tsx @@ -34,6 +34,7 @@ import { ExportImageProvider } from '@/context/export-image-context/export-image import { DialogProvider } from '@/context/dialog-context/dialog-provider'; import { KeyboardShortcutsProvider } from '@/context/keyboard-shortcuts-context/keyboard-shortcuts-provider'; import { Spinner } from '@/components/spinner/spinner'; +import { Helmet } from 'react-helmet-async'; const OPEN_STAR_US_AFTER_SECONDS = 30; const SHOW_STAR_US_AGAIN_AFTER_DAYS = 1; @@ -47,8 +48,13 @@ export const EditorMobileLayoutLazy = React.lazy( ); const EditorPageComponent: React.FC = () => { - const { loadDiagram, currentDiagram, schemas, filteredSchemas } = - useChartDB(); + const { + loadDiagram, + diagramName, + currentDiagram, + schemas, + filteredSchemas, + } = useChartDB(); const { openSelectSchema, showSidePanel } = useLayout(); const { resetRedoStack, resetUndoStack } = useRedoUndoStack(); const { showLoader, hideLoader } = useFullScreenLoader(); @@ -210,6 +216,13 @@ const EditorPageComponent: React.FC = () => { return ( <> + + + {diagramName + ? `ChartDB - ${diagramName} Diagram | Visualize Database Schemas` + : 'ChartDB - Create & Visualize Database Schema Diagrams'} + +
diff --git a/src/pages/examples-page/examples-page.tsx b/src/pages/examples-page/examples-page.tsx index ee892baa..91bb1fb1 100644 --- a/src/pages/examples-page/examples-page.tsx +++ b/src/pages/examples-page/examples-page.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import ChartDBLogo from '@/assets/logo-light.png'; import ChartDBDarkLogo from '@/assets/logo-dark.png'; import { examples } from './examples-data/examples-data'; @@ -7,51 +7,56 @@ import { useTheme } from '@/hooks/use-theme'; import { LocalConfigProvider } from '@/context/local-config-context/local-config-provider'; import { StorageProvider } from '@/context/storage-context/storage-provider'; import { ThemeProvider } from '@/context/theme-context/theme-provider'; +import { Helmet } from 'react-helmet-async'; const ExamplesPageComponent: React.FC = () => { const { effectiveTheme } = useTheme(); - useEffect(() => { - document.title = 'ChartDB - Example Database Diagrams & Schemas'; - }, []); return ( -
- -
-

Examples

-

- A collection of examples to help you get started with - ChartDB. -

-
- {examples.map((example) => ( - - ))} -
-
-
+
+ ); }; diff --git a/src/pages/template-page/template-page.tsx b/src/pages/template-page/template-page.tsx index acf2dab3..1bc963d7 100644 --- a/src/pages/template-page/template-page.tsx +++ b/src/pages/template-page/template-page.tsx @@ -7,7 +7,7 @@ import { StorageProvider } from '@/context/storage-context/storage-provider'; import { ThemeProvider } from '@/context/theme-context/theme-provider'; import { Button } from '@/components/button/button'; import { CloudDownload } from 'lucide-react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useLoaderData, useNavigate, useParams } from 'react-router-dom'; import type { Template } from '../../templates-data/templates-data'; import { Breadcrumb, @@ -34,37 +34,27 @@ import { ChartDBProvider } from '@/context/chartdb-context/chartdb-provider'; import { convertTemplateToNewDiagram } from '@/templates-data/template-utils'; import { useStorage } from '@/hooks/use-storage'; import type { Diagram } from '@/lib/domain/diagram'; +import { Helmet } from 'react-helmet-async'; + +export interface TemplatePageLoaderData { + template: Template | undefined; +} const TemplatePageComponent: React.FC = () => { const { addDiagram } = useStorage(); const { templateSlug } = useParams<{ templateSlug: string }>(); - const [template, setTemplate] = React.useState