feat: add license frontmatter field for link header

This commit adds the "license" frontmatter property which sets a link with the "license" relation in the head of the HTML page.
Furthermore, this commit restructures the other head elements for a note altogether into a single component that can be used to inject all head elements at once.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-02-13 17:33:36 +01:00
parent 91e7056882
commit cf34df21b7
11 changed files with 59 additions and 11 deletions

View file

@ -8,7 +8,6 @@ import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { Logger } from '../../utils/logger'
import { MotdModal } from '../common/motd-modal/motd-modal'
import { NoteAndAppTitleHead } from '../layout/note-and-app-title-head'
import { CommunicatorImageLightbox } from '../markdown-renderer/extensions/image/communicator-image-lightbox'
import { ExtensionEventEmitterProvider } from '../markdown-renderer/hooks/use-extension-event-emitter'
import { AppBar, AppBarMode } from './app-bar/app-bar'
@ -16,8 +15,8 @@ import { ChangeEditorContentContextProvider } from './change-content-context/cha
import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer'
import { EditorPane } from './editor-pane/editor-pane'
import { useComponentsFromAppExtensions } from './editor-pane/hooks/use-components-from-app-extensions'
import { HeadMetaProperties } from './head-meta-properties/head-meta-properties'
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,8 +127,7 @@ export const EditorPageContent: React.FC = () => {
<ExtensionEventEmitterProvider>
{editorExtensionComponents}
<CommunicatorImageLightbox />
<NoteAndAppTitleHead />
<OpengraphHead />
<HeadMetaProperties />
<MotdModal />
<div className={'d-flex flex-column vh-100'}>
<AppBar mode={AppBarMode.EDITOR} />

View file

@ -0,0 +1,22 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { LicenseLinkHead } from './license-link-head'
import { NoteAndAppTitleHead } from './note-and-app-title-head'
import { OpengraphHead } from './opengraph-head'
import React, { Fragment } from 'react'
/**
* Renders all HTML head tags that should be present for a note.
*/
export const HeadMetaProperties: React.FC = () => {
return (
<Fragment>
<NoteAndAppTitleHead />
<OpengraphHead />
<LicenseLinkHead />
</Fragment>
)
}

View file

@ -0,0 +1,24 @@
/*
* 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 Head from 'next/head'
import React, { useMemo } from 'react'
/**
* Renders the license link tag if a license is set in the frontmatter.
*/
export const LicenseLinkHead: React.FC = () => {
const license = useApplicationState((state) => state.noteDetails.frontmatter.license)
const optionalLinkElement = useMemo(() => {
if (!license || license.trim() === '') {
return null
}
return <link rel={'license'} href={license} />
}, [license])
return <Head>{optionalLinkElement}</Head>
}

View file

@ -1,10 +1,10 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useAppTitle } from '../../hooks/common/use-app-title'
import { useNoteTitle } from '../../hooks/common/use-note-title'
import { useAppTitle } from '../../../hooks/common/use-app-title'
import { useNoteTitle } from '../../../hooks/common/use-note-title'
import Head from 'next/head'
import React, { useMemo } from 'react'