Website v0.4 (#860)

* [#858,site][xl]: add Examples to the Navbar, rename gallery to showcases, remove examples from showcases, move github stars to the navbar, add view on github button to the hero section, reduce padding on buttons, add RHS image to the hero

* [#858,site][xl]: make sidebar consistent on all pages

* [site][xs]: fix ts error on GitHub button component

* [site][xs]: fix external links on navbar needing two clicks to open

* [site, hero][xs]: align RHS image to the top

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

@@ -65,7 +65,7 @@ export const getStaticProps: GetStaticProps = async ({
   // Temporary, docs pages should present the LHS sidebar
   if (dbFile.url_path.startsWith('docs')) {
     frontMatter.showSidebar = true;
-    frontMatter.sidebarTreeFile = 'content/docs/sidebar.json';
+    frontMatter.sidebarTreeFile = 'content/assets/sidebar.json';
   }
 
   const source = fs.readFileSync(filePath, { encoding: 'utf-8' });

site/pages/index.tsx

@@ -1,21 +1,46 @@
+import fs from 'fs';
+
 import Community from '@/components/Community';
 import Features from '@/components/Features';
-import Gallery from '@/components/Gallery';
-import { Hero } from '@/components/Hero';
-import { UnstyledLayout } from '@flowershow/core';
+import Showcases from '@/components/Showcases';
 import Layout from '../components/Layout';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { collectHeadings } from '@flowershow/core';
+
+export default function Home({ sidebarTree }) {
+  const router = useRouter();
+
+  const [tableOfContents, setTableOfContents] = useState([]);
+
+  useEffect(() => {
+    const headingNodes = document.querySelectorAll(
+      'h2,h3'
+    ) as NodeListOf<HTMLHeadingElement>;
+    const toc = collectHeadings(headingNodes);
+    setTableOfContents(toc ?? []);
+  }, [router.asPath]); // update table of contents on route change with next/link
 
-export default function Home() {
   return (
     <>
-      <Layout>
-        <UnstyledLayout>
-          <Hero />
-          <Features />
-          <Gallery />
-          <Community />
-        </UnstyledLayout>
+      <Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
+        <Features />
+        <Showcases />
+        <Community />
       </Layout>
     </>
   );
 }
+
+export function getStaticProps() {
+  const tree = fs.readFileSync('content/assets/sidebar.json', {
+    encoding: 'utf-8',
+  });
+  const sidebarTree = JSON.parse(tree);
+
+  return {
+    props: {
+      sidebarTree,
+    },
+  };
+}