better landing page

This commit is contained in:
lingdocs 2022-09-10 23:10:54 +04:00
parent b0e1789914
commit 5c4b65b483
4 changed files with 99 additions and 8 deletions

View File

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

View File

@ -29,6 +29,14 @@ function Sidebar({ content, navOpen, setNavOpen, pathname }) {
{ "side-nav-closed": !navOpen } { "side-nav-closed": !navOpen }
)}> )}>
<nav className="sticky-on-big flex-column align-items-start"> <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) => ( {content.map((item) => (
item.content item.content
? ( ? (

76
src/pages/LandingPage.tsx Normal file
View File

@ -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;

View File

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