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

Add custom intro page by fetching markdown content from a file (#697)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-02-08 15:03:11 +01:00 • committed by GitHub
parent 4b2e2a7c93
commit 7f6e0e53a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 373 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,37 +1,54 @@
/*
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 React, { Fragment } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import React, { Fragment, useState } 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 screenshot from './img/screenshot.png'
import { useIntroPageContent } from './hooks/use-intro-page-content'
import { ShowIf } from '../common/show-if/show-if'
import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
import { RendererType } from '../render-page/rendering-message'
export const IntroPage: React.FC = () => {
const { t } = useTranslation()
const introPageContent = useIntroPageContent()
const [showSpinner, setShowSpinner] = useState<boolean>(true)
return <Fragment>
<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/>
<img alt={ t('landing.intro.screenShotAltText') } src={ screenshot } className="img-fluid mb-5"/>
<FeatureLinks/>
</Fragment>
return (
<Fragment>
<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/>
<ShowIf condition={ showSpinner }>
<ForkAwesomeIcon icon={ 'spinner' } className={ 'fa-spin' }/>
</ShowIf>
<RenderIframe
frameClasses={ 'w-100 overflow-y-hidden' }
markdownContent={ introPageContent }
disableToc={ true }
onRendererReadyChange={ (rendererReady => setShowSpinner(!rendererReady)) }
rendererType={ RendererType.INTRO }
forcedDarkMode={ true }/>
<hr className={ 'mb-5' }/>
</div>
<FeatureLinks/>
</Fragment>)
}