github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-12-22 17:41:32 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(opengraph): add opengraph support

Browse source 
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-01-09 01:46:23 +01:00
parent 532713a218
commit 09c2eaba9d
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/editor-page/editor-page-content.tsx
View file

@ -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}
<CommunicatorImageLightbox />
<NoteAndAppTitleHead />
<OpengraphHead />
<MotdModal />
<div className={'d-flex flex-column vh-100'}>
<AppBar mode={AppBarMode.EDITOR} />

28
frontend/src/components/editor-page/opengraph-head/opengraph-head.tsx Normal file
View file

@ -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]) => <meta property={`og:${key}`} content={value} key={key} />)
if (!Object.prototype.hasOwnProperty.call(openGraphData, 'title')) {
elements.push(<meta property={'og:title'} content={noteTitle} />)
}
return elements
}, [noteTitle, openGraphData])
return <Head>{openGraphMetaElements}</Head>
}