better landing page

src/App.tsx

@@ -15,6 +15,7 @@ import { content } from "./content/index";
 import Sidebar from "./components/Sidebar";
 import Header from "./components/Header";
 import TableOfContentsPage from "./pages/TableOfContentsPage";
+import LandingPage from "./pages/LandingPage";
 import AccountPage from "./pages/AccountPage";
 import { useEffect } from "react";
 import { isProd } from "./lib/isProd";
@@ -62,6 +63,9 @@ function App(props: RouteComponentProps) {
           />
           <Switch>
             <Route path="/" exact>
+              <LandingPage />
+            </Route>
+            <Route path="/table-of-contents" exact>
               <TableOfContentsPage />
             </Route>
             {chapters.map((chapter: any) => (

src/components/Sidebar.js

@@ -29,6 +29,14 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
                 { "side-nav-closed": !navOpen }
             )}>
                 <nav className="sticky-on-big flex-column align-items-start">
+                        <Link to="/table-of-contents" style={{ textDecoration: "none", color: "inherit" }} onClick={() => setNavOpen(false)}>
+                            <div className={classNames(
+                                "side-nav-item",
+                                { "side-nav-item-selected": pathname === "/table-of-contents" }
+                            )}>
+                                Table of Contents
+                            </div>
+                        </Link>
                         {content.map((item) => (
                             item.content
                             ? (

src/pages/LandingPage.tsx

@@ -0,0 +1,76 @@
+import { Link } from "react-router-dom";
+import Footer from "../components/Footer";
+
+const content: {
+    title: string,
+    subTitle: string,
+    description: string,
+    linkDescription: string | JSX.Element,
+    link: string,
+}[] = [
+    {
+        title: "Read the Reference 📚",
+        subTitle: "Language Docs",
+        description: "Browse the reference to see how different elements of the language work, and how they interact with each other to build phrases. Look up whatever you need explanations for.",
+        link: "/table-of-contents",
+        linkDescription: "Table of Contents",
+    },
+    {
+        title: "Play Games 🎮",
+        subTitle: "Grammar Quizzes",
+        description: "Try to complete all the games to master the different elements of Pashto grammar: inflection, phrase building, verbs, etc. Learn the patterns of the language—how words and phrases form—through practice.",
+        link: "/games",
+        linkDescription: "Games Index",
+    },
+    {
+        title: "Watch Videos 📺",
+        subTitle: "LingDocs YouTube",
+        description: "Watch explanainer videos about different grammar topis, and see how you can use the phrase engine to play around with sentences",
+        link: "https://www.youtube.com/channel/UC1-yjDec5VDtia5s1gcMw4A",
+        linkDescription: "LingDocs YouTube Channel",
+    },
+    {
+        title: "Experiment with the Phrase Builder 🧪",
+        subTitle: "Interactive Phrase Structure Analysis",
+        description: "Build your own phrases in the interactive phrase builder. See how the words change and interact as you explore different tenses and forms.",
+        link: "/practice-tools/phrase-builder/",
+        linkDescription: "Phrase Builder",
+    },
+];
+
+const LandingPage = () => {
+//   function handleShare() {
+//     if (!navigator.share) {
+//       // should be impossible
+//       alert("Sorry, Sharing links are not supported on your device.");
+//       return;
+//     }
+//     navigator.share && navigator.share({
+//       title: "LingDocs Pashto Grammar",
+//       url: "https://grammar.lingdocs.com",
+//     });
+//   }
+  return <>
+    <main className="col bg-faded py-3 d-flex flex-column">
+        <h1>LingDocs Pashto Grammar</h1>
+        <p className="lead">To explore the wonderful language of Pashto you can:</p>
+        {content.map((block) => (
+            <Link to={block.link} className="plain-link">
+                <div className="card clickable my-2" style={{ maxWidth: "600px"}}>
+                    <div className="card-body">
+                        <h2 className="card-title">{block.title}</h2>
+                        <h5 className="card-subtitle mb-2 text-muted">{block.subTitle}</h5>
+                        <p className="card-text">{block.description}</p>
+                        <Link to={block.link} className="card-link">{block.linkDescription}</Link>
+                    </div>
+                </div>
+            </Link>
+        ))}
+        {/* //
+        @ts-ignore */}
+        <Footer />
+    </main>
+  </>;
+};
+
+export default LandingPage;

src/pages/TableOfContentsPage.jsx

@@ -9,13 +9,13 @@
 import { Link } from "react-router-dom";
 import Footer from "../components/Footer";
 import { content } from "../content/index";
-import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
+// import algoliasearch from 'algoliasearch/lite';
+// import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
 
-const searchClient = algoliasearch(
-  "EWHINHYXIN",
-  "7b26af65a81605dfea5ab0b973ee90cb",
-);
+// const searchClient = algoliasearch(
+//   "EWHINHYXIN",
+//   "7b26af65a81605dfea5ab0b973ee90cb",
+// );
 
 const TableOfContentsPage = () => {
   function handleShare() {
@@ -38,13 +38,16 @@ const TableOfContentsPage = () => {
             <i className="fas fa-share-alt" style={{ fontSize: "1.8rem" }} />
           </div>}
         </div>
-        {3 > 4 && <InstantSearch
+        {/* {3 > 4 && <InstantSearch
           indexName="netlify_150beb8b-aae1-4cef-a05c-2add5d8904f7_master_all"
           searchClient={searchClient}
         >
           <SearchBox />
           <Hits />
-        </InstantSearch>}
+        </InstantSearch>} */}
+        <Link to="/" className="plain-link">
+          <h3 className="mb-3">Home / Front Page</h3>
+        </Link>
         {content.map((section) => (
           section.path ?
             <Link to={section.path} className="plain-link">