better landing page
This commit is contained in:
lingdocs
parent
b0e1789914
commit
5c4b65b483
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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
|
||||
? (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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">
|
||||
Loading…
Reference in New Issue