diff --git a/frontend/src/components/editor-page/editor-page-content.tsx b/frontend/src/components/editor-page/editor-page-content.tsx index 37e3b668f..473a0fa98 100644 --- a/frontend/src/components/editor-page/editor-page-content.tsx +++ b/frontend/src/components/editor-page/editor-page-content.tsx @@ -17,6 +17,7 @@ import { EditorDocumentRenderer } from './editor-document-renderer/editor-docume import { EditorPane } from './editor-pane/editor-pane' import { useComponentsFromAppExtensions } from './editor-pane/hooks/use-components-from-app-extensions' import { useUpdateLocalHistoryEntry } from './hooks/use-update-local-history-entry' +import { OpengraphHead } from './opengraph-head/opengraph-head' import { Sidebar } from './sidebar/sidebar' import { Splitter } from './splitter/splitter' import type { DualScrollState, ScrollState } from './synced-scroll/scroll-props' @@ -128,6 +129,7 @@ export const EditorPageContent: React.FC = () => { {editorExtensionComponents} +
diff --git a/frontend/src/components/editor-page/opengraph-head/opengraph-head.tsx b/frontend/src/components/editor-page/opengraph-head/opengraph-head.tsx new file mode 100644 index 000000000..b68065f30 --- /dev/null +++ b/frontend/src/components/editor-page/opengraph-head/opengraph-head.tsx @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { useApplicationState } from '../../../hooks/common/use-application-state' +import { useNoteTitle } from '../../../hooks/common/use-note-title' +import Head from 'next/head' +import React, { useMemo } from 'react' + +/** + * Returns the meta tags for the opengraph protocol as defined in the note frontmatter. + */ +export const OpengraphHead: React.FC = () => { + const noteTitle = useNoteTitle() + const openGraphData = useApplicationState((state) => state.noteDetails.frontmatter.opengraph) + const openGraphMetaElements = useMemo(() => { + const elements = Object.entries(openGraphData) + .filter(([, value]) => value && String(value).trim() !== '') + .map(([key, value]) => ) + if (!Object.prototype.hasOwnProperty.call(openGraphData, 'title')) { + elements.push() + } + return elements + }, [noteTitle, openGraphData]) + + return {openGraphMetaElements} +}