mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-08 10:22:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: migrate frontend app to nextjs app router

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-05-29 17:32:44 +02:00
parent 5b5dabc84e
commit 8602645bea
108 changed files with 893 additions and 1188 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/layout/app-bar/app-bar-elements/help-dropdown/submenues/legal-submenu.tsx
View file

@ -3,24 +3,23 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useFrontendConfig } from '../../../../../common/frontend-config-context/use-frontend-config'
import { ShowIf } from '../../../../../common/show-if/show-if'
import { DropdownHeader } from '../dropdown-header'
import { TranslatedDropdownItem } from '../translated-dropdown-item'
import React, { Fragment, useMemo } from 'react'
import type { ReactElement } from 'react'
import React, { Fragment } from 'react'
import { Dropdown } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useFrontendConfig } from '../../../../../common/frontend-config-context/use-frontend-config'
/**
* Renders the legal submenu for the help dropdown.
*/
export const LegalSubmenu: React.FC = () => {
export const LegalSubmenu: React.FC = (): null | ReactElement => {
useTranslation()
const specialUrls = useFrontendConfig().specialUrls
const linksConfigured = useMemo(
() => specialUrls.privacy || specialUrls.termsOfUse || specialUrls.imprint,
[specialUrls]
)
const linksConfigured = specialUrls?.privacy || specialUrls?.termsOfUse || specialUrls?.imprint
if (!linksConfigured) {
return null

23
frontend/src/components/layout/base-head.tsx
View file

@ -1,23 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useAppTitle } from '../../hooks/common/use-app-title'
import { FavIcon } from './fav-icon'
import Head from 'next/head'
import React from 'react'
/**
* Sets basic browser meta tags.
*/
export const BaseHead: React.FC = () => {
const appTitle = useAppTitle()
return (
<Head>
<title>{appTitle}</title>
<FavIcon />
<meta content='width=device-width, initial-scale=1' name='viewport' />
</Head>
)
}

14
frontend/src/components/layout/dark-mode/dark-mode.tsx Normal file
View file

@ -0,0 +1,14 @@
'use client'
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplyDarkModeStyle } from './use-apply-dark-mode-style'
import type React from 'react'
export const DarkMode: React.FC = () => {
useApplyDarkModeStyle()
return null
}

28
frontend/src/components/layout/dark-mode/use-apply-dark-mode-style.ts 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 { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
import { useEffect } from 'react'
/**
* Applies the dark mode by adding a css class to the body tag.
*/
export const useApplyDarkModeStyle = (): void => {
const darkMode = useDarkModeState()
useEffect(() => {
if (darkMode) {
window.document.body.dataset.bsTheme = 'dark'
} else {
window.document.body.dataset.bsTheme = 'light'
}
}, [darkMode])
useEffect(
() => () => {
window.document.body.dataset.bsTheme = 'light'
},
[]
)
}

37
frontend/src/components/layout/expected-origin-boundary.tsx Normal file
View file

@ -0,0 +1,37 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { headers } from 'next/headers'
import type { PropsWithChildren } from 'react'
import React from 'react'
export interface ExpectedOriginBoundaryProps extends PropsWithChildren {
expectedOrigin: string
}
export const buildOriginFromHeaders = (): string | undefined => {
const headers1 = headers()
const host = headers1.get('x-forwarded-host') ?? headers1.get('host')
if (host === null) {
return undefined
}
const protocol = headers1.get('x-forwarded-proto')?.split(',')[0] ?? 'http'
return `${protocol}://${host}`
}
export const ExpectedOriginBoundary: React.FC<ExpectedOriginBoundaryProps> = ({ children, expectedOrigin }) => {
const currentOrigin = buildOriginFromHeaders()
if (new URL(expectedOrigin).origin !== currentOrigin) {
return (
<span
className={
'text-white bg-dark'
}>{`You can't open this page using this URL. For this endpoint "${expectedOrigin}" is expected.`}</span>
)
}
return children
}

28
frontend/src/components/layout/fav-icon.tsx
View file

@ -1,28 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
/**
* Sets meta tags for the favicon.
*/
export const FavIcon: React.FC = () => {
return (
<Fragment>
<link href='/icons/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180' />
<link href='/icons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='/icons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<link href='/icons/site.webmanifest' rel='manifest' />
<link href='/icons/favicon.ico' rel='shortcut icon' />
<link color='#b51f08' href='/icons/safari-pinned-tab.svg' rel='mask-icon' />
<meta name='apple-mobile-web-app-title' content='HedgeDoc' />
<meta name='application-name' content='HedgeDoc' />
<meta name='msapplication-TileColor' content='#b51f08' />
<meta name='theme-color' content='#b51f08' />
<meta content='/icons/browserconfig.xml' name='msapplication-config' />
<meta content='HedgeDoc - Collaborative markdown notes' name='description' />
</Fragment>
)
}