[#754,landing page][xl]: added hero section and feature section, enabled dark mode, updated navbar, enabled toc

site/pages/[...slug].tsx

@@ -1,32 +1,46 @@
-import fs from "fs";
+import fs from 'fs';
 
-import parse from "../lib/markdown.mjs";
+import parse from '../lib/markdown.mjs';
 
-import MDXPage from "../components/MDXPage";
-import clientPromise from "@/lib/mddb";
-import { getAuthorsDetails } from "lib/getAuthorsDetails";
-import Layout from "components/Layout";
+import MDXPage from '../components/MDXPage';
+import clientPromise from '@/lib/mddb';
+import { getAuthorsDetails } from 'lib/getAuthorsDetails';
+import Layout from 'components/Layout';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router.js';
+import { collectHeadings } from '@flowershow/core';
 
 export default function DRDPage({ source, frontMatter }) {
   source = JSON.parse(source);
   frontMatter = JSON.parse(frontMatter);
 
+  const router = useRouter();
+
+  const [tableOfContents, setTableOfContents] = useState([]);
+
+  useEffect(() => {
+    const headingNodes = document.querySelectorAll('h2,h3');
+    const toc = collectHeadings(headingNodes);
+    setTableOfContents(toc ?? []);
+  }, [router.asPath]); // update table of contents on route change with next/link
+
+
   return (
-    <Layout title={frontMatter.title}>
+    <Layout tableOfContents={tableOfContents} title={frontMatter.title}>
       <MDXPage source={source} frontMatter={frontMatter} />
     </Layout>
   );
 }
 
 export const getStaticProps = async ({ params }) => {
-  const urlPath = params.slug ? params.slug.join("/") : "";
+  const urlPath = params.slug ? params.slug.join('/') : '';
 
   const mddb = await clientPromise;
   const dbFile = await mddb.getFileByUrl(urlPath);
 
   const dbBacklinks = await mddb.getLinks({
     fileId: dbFile._id,
-    direction: "backward",
+    direction: 'backward',
   });
   // TODO temporary solution, we will have a method on MddbFile to get these links
   const dbBacklinkFilesPromises = dbBacklinks.map((link) =>
@@ -39,14 +53,14 @@ export const getStaticProps = async ({ params }) => {
 
   // TODO we can already get frontmatter from dbFile.metadata
   // so parse could only return mdxSource
-  const source = fs.readFileSync(dbFile.file_path, { encoding: "utf-8" });
-  const { mdxSource, frontMatter } = await parse(source, "mdx", {
+  const source = fs.readFileSync(dbFile.file_path, { encoding: 'utf-8' });
+  const { mdxSource, frontMatter } = await parse(source, 'mdx', {
     backlinks: dbBacklinkUrls,
   });
 
   // Temporary, so that blogs work properly
-  if (dbFile.url_path.startsWith("blog/")) {
-    frontMatter.layout = "blog";
+  if (dbFile.url_path.startsWith('blog/')) {
+    frontMatter.layout = 'blog';
     frontMatter.authorsDetails = await getAuthorsDetails(
       dbFile.metadata.authors
     );
@@ -62,13 +76,15 @@ export const getStaticProps = async ({ params }) => {
 
 export async function getStaticPaths() {
   const mddb = await clientPromise;
-  let allDocuments = await mddb.getFiles({ extensions: ["md", "mdx"] });
+  let allDocuments = await mddb.getFiles({ extensions: ['md', 'mdx'] });
 
   //  Avoid duplicate path
-  allDocuments = allDocuments.filter(doc => !doc.url_path.startsWith('data-literate/'));
+  allDocuments = allDocuments.filter(
+    (doc) => !doc.url_path.startsWith('data-literate/')
+  );
 
   const paths = allDocuments.map((page) => {
-    const parts = page.url_path.split("/");
+    const parts = page.url_path.split('/');
     return { params: { slug: parts } };
   });
 

site/pages/index.tsx

@@ -1,63 +1,17 @@
-import Layout from '../components/Layout'
+import Features from '@/components/Features';
+import { Hero } from '@/components/Hero';
+import { UnstyledLayout } from '@flowershow/core';
+import Layout from '../components/Layout';
 
 export default function Home() {
-
   return (
-    <Layout>
-      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center py-10">
-        <h1 className="text-4xl sm:text-8xl font-bold">
-          <a href="https://portaljs.com/">
-            P🌀RTAL.<small>JS</small>
-          </a>
-        </h1>
-
-        <h2 className="mt-6 text-2xl sm:text-4xl font-normal leading-snug">
-          Rapidly build rich data portals using a modern frontend framework
-        </h2>
-
-        <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
-          <a
-            href="/docs/"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
-          >
-            <h3 className="text-2xl font-semibold">▸ Documentation</h3>
-            <p className="mt-4 text-xl">
-              Find in-depth information about Portal.js features and API.
-            </p>
-          </a>
-
-          <a
-            href="/learn/"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
-          >
-            <h3 className="text-2xl font-semibold">▸ Learn</h3>
-            <p className="mt-4 text-xl">
-              Learn about Portal.js in an interactive course.
-            </p>
-          </a>
-
-          <a
-            href="/gallery/"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
-          >
-            <h3 className="text-2xl font-semibold">▸ Gallery</h3>
-            <p className="mt-4 text-xl">
-              Discover examples of Portal.js projects.
-            </p>
-          </a>
-
-          <a
-            href="https://github.com/datopian/portal.js"
-            className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
-          >
-            <h3 className="text-2xl font-semibold">▸ Contribute</h3>
-            <p className="mt-4 text-xl">
-              Checkout the Portal.js repository on Github.
-            </p>
-          </a>
-
-        </div>
-      </main>
-    </Layout>
-  )
+    <>
+      <Layout>
+        <UnstyledLayout>
+          <Hero />
+          <Features />
+        </UnstyledLayout>
+      </Layout>
+    </>
+  );
 }