mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-21 10:45:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch the base framework from Create React App to Next.JS

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Renovate Bot 2021-12-25 15:44:24 +00:00 • committed by Tilman Vatteroth
parent a979b6ffdd
commit 77a60c6c48
361 changed files with 5130 additions and 9605 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/components/intro-page/cover-buttons/cover-buttons.scss → src/components/intro-page/cover-buttons/cover-buttons.module.scss
View file

6
src/components/intro-page/cover-buttons/cover-buttons.tsx
View file

@ -7,12 +7,12 @@
import React from 'react'
import { Button } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { ShowIf } from '../../common/show-if/show-if'
import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
import './cover-buttons.scss'
import './cover-buttons.module.scss'
import { cypressId } from '../../../utils/cypress-attribute'
import Link from 'next/link'
export const CoverButtons: React.FC = () => {
useTranslation()
@ -33,7 +33,7 @@ export const CoverButtons: React.FC = () => {
<Trans i18nKey='common.or' />
</span>
</ShowIf>
<Link to='/n/features'>
<Link href='/n/features' passHref={true}>
<Button {...cypressId('features-button')} className='cover-button' variant='primary' size='lg'>
<Trans i18nKey='landing.intro.exploreFeatures' />
</Button>

44
src/components/intro-page/feature-links.tsx
View file

@ -1,13 +1,13 @@
/*
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import Link from 'next/link'
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
export const FeatureLinks: React.FC = () => {
@ -15,27 +15,33 @@ export const FeatureLinks: React.FC = () => {
return (
<Row className='mb-5 d-flex flex-row justify-content-center'>
<Col md={3}>
<Link to={'/n/features#Share-Notes'} className='text-light'>
<ForkAwesomeIcon icon='bolt' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.collaboration' />
</h6>
<Link href={'/n/features#Share-Notes'}>
<a className='text-light'>
<ForkAwesomeIcon icon='bolt' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.collaboration' />
</h6>
</a>
</Link>
</Col>
<Col md={3}>
<Link to={'/n/features#MathJax'} className='text-light'>
<ForkAwesomeIcon icon='bar-chart' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.katex' />
</h6>
<Link href={'/n/features#MathJax'}>
<a className='text-light'>
<ForkAwesomeIcon icon='bar-chart' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.katex' />
</h6>
</a>
</Link>
</Col>
<Col md={3}>
<Link to={'/n/features#Slide-Mode'} className='text-light'>
<ForkAwesomeIcon icon='television' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.slides' />
</h6>
<Link href={'/n/features#Slide-Mode'}>
<a className='text-light'>
<ForkAwesomeIcon icon='television' size='2x' />
<h6>
<Trans i18nKey='landing.intro.features.slides' />
</h6>
</a>
</Link>
</Col>
</Row>

46
src/components/intro-page/intro-custom-content.tsx Normal file
View file

@ -0,0 +1,46 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment, useMemo } from 'react'
import { useIntroPageContent } from './hooks/use-intro-page-content'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { WaitSpinner } from '../common/wait-spinner/wait-spinner'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
/**
* Fetches the content for the customizable part of the intro page and renders it.
*/
export const IntroCustomContent: React.FC = () => {
const introPageContent = useIntroPageContent()
const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
const spinner = useMemo(() => {
if (!rendererReady && introPageContent !== undefined) {
return <WaitSpinner />
}
}, [introPageContent, rendererReady])
const introContent = useMemo(() => {
if (introPageContent !== undefined) {
return (
<RenderIframe
frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={introPageContent}
rendererType={RendererType.INTRO}
forcedDarkMode={true}
/>
)
}
}, [introPageContent])
return (
<Fragment>
{spinner}
{introContent}
</Fragment>
)
}

67
src/components/intro-page/intro-page.tsx
View file

@ -1,67 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useMemo } from 'react'
import { Trans } from 'react-i18next'
import { Branding } from '../common/branding/branding'
import {
HedgeDocLogoSize,
HedgeDocLogoType,
HedgeDocLogoWithText
} from '../common/hedge-doc-logo/hedge-doc-logo-with-text'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { CoverButtons } from './cover-buttons/cover-buttons'
import { FeatureLinks } from './feature-links'
import { useIntroPageContent } from './hooks/use-intro-page-content'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
import { WaitSpinner } from '../common/wait-spinner/wait-spinner'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { EditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/editor-to-renderer-communicator-context-provider'
export const IntroPage: React.FC = () => {
const introPageContent = useIntroPageContent()
const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
const spinner = useMemo(() => {
if (!rendererReady && introPageContent !== undefined) {
return <WaitSpinner />
}
}, [introPageContent, rendererReady])
const introContent = useMemo(() => {
if (introPageContent !== undefined) {
return (
<RenderIframe
frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={introPageContent}
rendererType={RendererType.INTRO}
forcedDarkMode={true}
/>
)
}
}, [introPageContent])
return (
<EditorToRendererCommunicatorContextProvider>
<div className={'flex-fill mt-3'}>
<h1 dir='auto' className={'align-items-center d-flex justify-content-center flex-column'}>
<HedgeDocLogoWithText logoType={HedgeDocLogoType.COLOR_VERTICAL} size={HedgeDocLogoSize.BIG} />
</h1>
<p className='lead'>
<Trans i18nKey='app.slogan' />
</p>
<div className={'mb-5'}>
<Branding delimiter={false} />
</div>
<CoverButtons />
{spinner}
{introContent}
<hr className={'mb-5'} />
</div>
<FeatureLinks />
</EditorToRendererCommunicatorContextProvider>
)
}