Improve documentation (#82)

* Propose new doc architecture

* Many improvements to documentation (styling, structure...)

* Remove modules added inadvertently + continue improving styling

* Swizzle navbar item to add support for custom icon

* Additional doc styling

* Setup docs for API and redirect homepage for docs

docs/src/css/custom.css

@@ -10,11 +10,11 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-global-radius: 8px;
-  --ifm-code-font-size: var(14px);
+  --ifm-code-font-size: 14px;
   --ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
   --ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
-  --ifm-font-size-base: var(14px);
-  --ifm-base-spacing: 16px;
+  --ifm-font-size-base: 14px;
+  --ifm-base-spacing: 14px;
   --ifm-line-height-base: var(--twenty-body-regular-line-height);
   --ifm-font-weight-base: var(--twenty-body-regular-font-weight);
   --ifm-color-primary: #11181c;
@@ -25,6 +25,35 @@
   --ifm-toc-padding-vertical: 0.5rem;
   --ifm-breadcrumb-border-radius: 8px;
   --ifm-navbar-link-color: #687076;
+
+
+  --ifm-heading-font-weight: 600;
+
+  --ifm-h1-font-size: 1.7rem !important;
+  --ifm-h2-font-size: 1.25rem !important;
+  --ifm-h3-font-size: 1rem !important;
+  --ifm-h4-font-size: 0.875rem !important;
+  --ifm-h5-font-size: 0.85rem !important;
+
+  --ifm-spacing-horizontal: 2rem;
+
+  --ifm-menu-link-padding-vertical: 0.2rem;
+}
+
+.markdown > h1 {
+  --ifm-h1-font-size: 1.7rem !important;
+}
+.markdown > h2 {
+  --ifm-h2-font-size: 1.25rem;
+}
+.markdown > h3 {
+  --ifm-h3-font-size: 1rem;
+}
+.markdown > h4 {
+  --ifm-h4-font-size: 0.875rem;
+}
+.markdown > h5 {
+  --ifm-h5-font-size: 0.85rem;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -41,7 +70,7 @@ body {
 }
 
 html {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .DocSearch-Button {
@@ -54,4 +83,49 @@ html {
 
 .DocSearch-Button-Placeholder {
   padding: 0 100px 0 6px !important;
+}
+
+.theme-edit-this-page {
+  font-size: 70%;
+}
+.theme-edit-this-page svg {
+  height: 14px;
+  width: 14px;
+}
+
+li.coming-soon {
+  display: flex;
+}
+
+
+li.coming-soon a {
+  display: inline-block;
+  pointer-events: none;
+  cursor: default;
+}
+
+li.coming-soon a::after {
+  float: right;
+  content: "soon";
+  border-color: #373737;
+  border: 1px solid;
+  border-radius: 4px;
+  text-align: center;
+  float:right;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-bottom: 2px;
+  font-size: 80%;
+}
+
+.menu__list-item-collapsible > a {
+  text-transform: uppercase;
+}
+
+.theme-doc-sidebar-item-category {
+  padding-top: 1.5rem;
+}
+
+.sidebar-item-icon {
+  padding-right: 0.5rem;
 }

docs/src/pages/index.module.css

@@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

docs/src/pages/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import styles from './index.module.css';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}

docs/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.

docs/src/theme/DocSidebarItem/Link/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+import styles from './styles.module.css';
+export default function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) {
+  const {href, label, className, autoAddBaseUrl, customProps = {}} = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        'menu__list-item',
+        className,
+      )}
+      key={label}>
+      <Link
+        className={clsx(
+          'menu__link',
+          !isInternalLink && styles.menuExternalLink,
+          {
+            'menu__link--active': isActive,
+          },
+        )}
+        autoAddBaseUrl={autoAddBaseUrl}
+        aria-current={isActive ? 'page' : undefined}
+        to={href}
+        {...(isInternalLink && {
+          onClick: onItemClick ? () => onItemClick(item) : undefined,
+        })}
+        {...props}>
+        <i className={"sidebar-item-icon fa-light " + (customProps && customProps.icon ? ("fa-"+customProps.icon) : "fa-notdef")}></i>
+        {label}
+        {!isInternalLink && <IconExternalLink />}
+      </Link>
+    </li>
+  );
+}

docs/src/theme/DocSidebarItem/Link/styles.module.css

@@ -0,0 +1,3 @@
+.menuExternalLink {
+  align-items: center;
+}