add customisable welcome message and FAQ on index page (#1952)

loculus-project · May 19, 2024 · 8b2563c · 8b2563c
1 parent 9db32da
commit 8b2563c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/website/src/components/IndexPage/FAQ.mdx b/website/src/components/IndexPage/FAQ.mdx
@@ -0,0 +1,3 @@
+---
+title: FAQ
+---
diff --git a/website/src/components/IndexPage/WelcomeMessage.astro b/website/src/components/IndexPage/WelcomeMessage.astro
@@ -0,0 +1,7 @@
+---
+const websiteName = Astro.props.websiteName;
+---
+
+<p class='text-gray-700 my-4'>
+    Welcome to {websiteName}, a system for sharing pathogen genome data.
+</p>
diff --git a/website/src/layouts/DocLayout.astro b/website/src/layouts/DocLayout.astro
@@ -9,7 +9,7 @@ const { frontmatter } = Astro.props;
 <BaseLayout title={frontmatter.title}>
     <div class='flex justify-between max-w-5xl mx-auto items-start gap-10'>
         <DocMenu />
-        <div class='mdContainer text-gray-700 leading-relaxed'>
+        <div class='mdContainer mdContainerItself text-gray-700 leading-relaxed'>
             <h1>{frontmatter.title}</h1>
             <slot />
         </div>

diff --git a/website/src/layouts/MdLayout.astro b/website/src/layouts/MdLayout.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
 ---
 
 <BaseLayout title={frontmatter.title}>
-    <div class='mdContainer'>
+    <div class='mdContainer mdContainerItself'>
         <slot />
     </div>
 </BaseLayout>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
@@ -1,16 +1,18 @@
 ---
+import Faq from '../components/IndexPage/FAQ.mdx';
+import WelcomeMessage from '../components/IndexPage/WelcomeMessage.astro';
 import { getConfiguredOrganisms, getWebsiteConfig } from '../config';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { routes } from '../routes/routes';
 const websiteConfig = getWebsiteConfig();
 const { name: websiteName } = websiteConfig;
+import '../styles/mdcontainer.scss';
 ---
 
 <BaseLayout title='Home'>
     <div class='max-w-6xl mx-auto'>
-        <p class='text-gray-700 my-4'>
-            Welcome to {websiteName}, a system for sharing pathogen genome data.
-        </p>
+        <WelcomeMessage websiteName={websiteName} />
+
         <h2 class='font-semibold text-gray-700 my-3 text-lg'>Explore {websiteName} data!</h2>
 
         <div class='flex flex-wrap'>
@@ -27,5 +29,8 @@ const { name: websiteName } = websiteConfig;
                 ))
             }
         </div>
+        <div class='mdContainer'>
+            <Faq />
+        </div>
     </div>
 </BaseLayout>
diff --git a/website/src/styles/mdcontainer.scss b/website/src/styles/mdcontainer.scss
@@ -1,5 +1,5 @@
 
-.mdContainer{
+.mdContainerItself{
     @apply max-w-3xl mx-auto break-normal;
   }