table of contents page

This commit is contained in:
lingdocs 2021-04-14 15:31:13 +03:00
parent ae869b04ae
commit 13efeefd5f
5 changed files with 60 additions and 4 deletions

View File

@ -107,6 +107,16 @@
text-decoration: none; text-decoration: none;
} }
.plain-link {
color: inherit;
text-decoration: none;
}
.plain-link:hover {
text-decoration: none;
color: #444;
}
.side-nav-item { .side-nav-item {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
width: 100%; width: 100%;

View File

@ -15,6 +15,7 @@ import Chapter from "./components/Chapter";
import { content } from "./content/index"; 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 { useEffect } from "react"; import { useEffect } from "react";
const chapters = content.reduce((chapters, item) => ( const chapters = content.reduce((chapters, item) => (
item.content item.content
@ -40,7 +41,7 @@ function App(props) {
/> />
<Switch> <Switch>
<Route path="/" exact> <Route path="/" exact>
<Chapter>{chapters[0]}</Chapter> <TableOfContentsPage />
</Route> </Route>
{chapters.map((chapter) => ( {chapters.map((chapter) => (
<Route key={chapter.path} path={chapter.path}> <Route key={chapter.path} path={chapter.path}>

View File

@ -7,7 +7,7 @@
*/ */
/* eslint-disable import/no-webpack-loader-syntax */ /* eslint-disable import/no-webpack-loader-syntax */
import * as about from "!babel-loader!mdx-loader!./about.mdx"; import * as intro from "!babel-loader!mdx-loader!./intro.mdx";
import * as presentEquative from "!babel-loader!mdx-loader!./equatives/present-equative.mdx" import * as presentEquative from "!babel-loader!mdx-loader!./equatives/present-equative.mdx"
import * as subjunctiveHabitualEquative from "!babel-loader!mdx-loader!./equatives/subjunctive-habitual-equative.mdx"; import * as subjunctiveHabitualEquative from "!babel-loader!mdx-loader!./equatives/subjunctive-habitual-equative.mdx";
@ -29,8 +29,8 @@ import * as inflectionPatterns from "!babel-loader!mdx-loader!./inflection/infle
const contentTree = [ const contentTree = [
{ {
import: about, import: intro,
slug: "about", slug: "intro",
}, },
{ {
heading: "Equatives", heading: "Equatives",

View File

@ -0,0 +1,45 @@
/**
* Copyright (c) 2021 lingdocs.com
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import React from 'react';
import { Link } from "react-router-dom";
import Footer from "../components/Footer";
import { content } from "../content/index";
const TableOfContentsPage = () => {
return <>
<main className="col bg-faded py-3 d-flex flex-column">
<div className="flex-shrink-0">
<h2 className="mb-3">Table of Contents</h2>
{content.map((section) => (
section.path ?
<Link to={section.path} className="plain-link">
<h3 className="mb-3">{section.frontMatter.title}</h3>
</Link>
: <div>
<Link to={section.chapters[0].path} className="plain-link">
<h3>{section.heading}</h3>
</Link>
<div className="ml-3">
{section.chapters.map((chapter) => (
<Link to={chapter.path} className="plain-link">
<div className="my-3" style={{ fontSize: "larger"}}>
{chapter.frontMatter.title}
</div>
</Link>
))}
</div>
</div>
))}
</div>
<Footer />
</main>
</>;
};
export default TableOfContentsPage;