refactored a new component and cleaned up base page code

cef3c406 · FionaDmello · 3a536f9b · 3a536f9b · cef3c406 · cef3c406
Commit cef3c406 authored 3 weeks ago by FionaDmello
--- a/docs/index.md
+++ b/docs/index.md
---
-displayed_sidebar: aboutSidebar
-sidebar_position: 1
---
-
-# About
-
-In this module we cover the origin story of the project. We will also take a look at the data model that we use to store the metadata records sourced for the Helmholtz Knowledge Graph.
--- a/src/components/HomepageHeader/index.tsx
+++ b/src/components/HomepageHeader/index.tsx
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero shadow--lw", styles.heroBanner)}>
+      <div className={clsx("bg-kg-img", styles.bgImage)}></div>
+      <div className={clsx("container text--primary", styles.bgText)}>
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/about/introduction"
+          >
+            Get Started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
--- a/src/components/HomepageHeader/styles.module.css
+++ b/src/components/HomepageHeader/styles.module.css
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bgImage {
+  /* Add the blur effect */
+  filter: blur(2px);
+  -webkit-filter: blur(2px);
+
+  position: absolute;
+  height: 38%;
+  width: 100%;
+}
+
+.bgText {
+  z-index: 2;
+  padding: 2rem;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */

-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
-.bgImage {
-  /* Add the blur effect */
-  filter: blur(2px);
-  -webkit-filter: blur(2px);
-
-  position: absolute;
-  height: 38%;
-  width: 100%;
-}
-
-.bgText {
-  z-index: 2;
-  padding: 2rem;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
-import clsx from "clsx";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
-import Heading from "@theme/Heading";
-
-import styles from "./index.module.css";
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero shadow--lw", styles.heroBanner)}>
-      <div className={clsx("bg-kg-img", styles.bgImage)}></div>
-      <div className={clsx("container text--primary", styles.bgText)}>
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/about/introduction"
-          >
-            Get Started
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import HomepageHeader from "@site/src/components/HomepageHeader";

 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Helmholtz KG - Docs`}
-      description="Description will go into a meta tag in <head />"
+      description="Documentation for the Helmholtz KG project, its interfaces and the Unhide platform"
    >
      <HomepageHeader />
      <main>