From 09c2eaba9d23b10fc54cc112beced7f0935250a4 Mon Sep 17 00:00:00 2001 From: Erik Michelson Date: Mon, 9 Jan 2023 01:46:23 +0100 Subject: [PATCH] feat(opengraph): add opengraph support Signed-off-by: Erik Michelson --- .../editor-page/editor-page-content.tsx | 2 ++ .../opengraph-head/opengraph-head.tsx | 28 +++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 frontend/src/components/editor-page/opengraph-head/opengraph-head.tsx 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} +}