mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-23 11:37:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add license frontmatter field for link header

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/editor-page/head-meta-properties/head-meta-properties.tsx Normal file
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>
)
}

24
frontend/src/components/editor-page/head-meta-properties/license-link-head.tsx Normal file
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>
}

27
frontend/src/components/editor-page/head-meta-properties/note-and-app-title-head.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
* 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 Head from 'next/head'
import React, { useMemo } from 'react'
/**
* Sets the note and app title for the browser window
*/
export const NoteAndAppTitleHead: React.FC = () => {
const noteTitle = useNoteTitle()
const appTitle = useAppTitle()
const noteAndAppTitle = useMemo(() => {
return noteTitle + ' - ' + appTitle
}, [appTitle, noteTitle])
return (
<Head>
<title>{noteAndAppTitle}</title>
</Head>
)
}

28
frontend/src/components/editor-page/head-meta-properties/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 (!('title' in openGraphData)) {
elements.push(<meta property={'og:title'} content={noteTitle} />)
}
return elements
}, [noteTitle, openGraphData])
return <Head>{openGraphMetaElements}</Head>
}