Don't show error if no intro.md was found (#1221)

cypress/integration/intro.spec.ts

@@ -11,11 +11,20 @@ describe('Intro page', () => {
     cy.visit('/')
   })
 
-  describe('content', () => {
+  describe('customizable content', () => {
     it('fetches and shows the correct intro page content', () => {
       cy.getMarkdownBody()
         .contains('test content')
     })
+
+    it('won\'t show anything if no content was found', () => {
+      cy.intercept('/mock-backend/public/intro.md', {
+        statusCode: 404
+      })
+
+      cy.get(`iframe[data-cy="documentIframe"]`)
+        .should('not.exist')
+    })
   })
 
   describe('features button', () => {

src/components/intro-page/hooks/use-intro-page-content.ts

@@ -9,20 +9,15 @@ import { useTranslation } from 'react-i18next'
 import { fetchFrontPageContent } from '../requests'
 import { useCustomizeAssetsUrl } from '../../../hooks/common/use-customize-assets-url'
 
-const MARKDOWN_WHILE_LOADING = ':zzz: {message}'
-const MARKDOWN_IF_ERROR = ':::danger\n' +
-  '{message}\n' +
-  ':::'
-
-export const useIntroPageContent = (): string => {
+export const useIntroPageContent = (): string | undefined => {
   const { t } = useTranslation()
-  const [content, setContent] = useState<string>(() => MARKDOWN_WHILE_LOADING.replace('{message}', t('landing.intro.markdownWhileLoading')))
+  const [content, setContent] = useState<string | undefined>(undefined)
   const customizeAssetsUrl = useCustomizeAssetsUrl()
 
   useEffect(() => {
     fetchFrontPageContent(customizeAssetsUrl)
       .then((content) => setContent(content))
-      .catch(() => setContent(MARKDOWN_IF_ERROR.replace('{message}', t('landing.intro.markdownLoadingError'))))
+      .catch(() => setContent(undefined))
   }, [customizeAssetsUrl, t])
 
   return content

src/components/intro-page/intro-page.tsx

@@ -22,12 +22,12 @@ import { WaitSpinner } from '../common/wait-spinner/wait-spinner'
 
 export const IntroPage: React.FC = () => {
   const introPageContent = useIntroPageContent()
-  const [showSpinner, setShowSpinner] = useState<boolean>(true)
+  const [rendererReady, setRendererReady] = useState<boolean>(true)
 
   return (
     <Fragment>
       <div className={ 'flex-fill mt-3' }>
-        <h1 dir='auto' className={ 'align-items-center d-flex justify-content-center flex-column' }>
+        <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">
@@ -37,16 +37,18 @@ export const IntroPage: React.FC = () => {
           <Branding delimiter={ false }/>
         </div>
         <CoverButtons/>
-        <ShowIf condition={ showSpinner }>
+        <ShowIf condition={ !rendererReady && introPageContent !== undefined }>
           <WaitSpinner/>
         </ShowIf>
-        <RenderIframe
-          frameClasses={ 'w-100 overflow-y-hidden' }
-          markdownContent={ introPageContent }
-          disableToc={ true }
-          onRendererReadyChange={ (rendererReady => setShowSpinner(!rendererReady)) }
-          rendererType={ RendererType.INTRO }
-          forcedDarkMode={ true }/>
+        <ShowIf condition={ !!introPageContent }>
+          <RenderIframe
+            frameClasses={ 'w-100 overflow-y-hidden' }
+            markdownContent={ introPageContent as string }
+            disableToc={ true }
+            onRendererReadyChange={ (rendererReady => setRendererReady(!rendererReady)) }
+            rendererType={ RendererType.INTRO }
+            forcedDarkMode={ true }/>
+        </ShowIf>
         <hr className={ 'mb-5' }/>
       </div>
       <FeatureLinks/>