Docs UI update (#3)

* markdownsteps, add lightmode color to scss * markdowntabs, add tabs/tab component for docs * markdownaccordion, add accordion component for docs * update docs scrollbar, display onhover only * markdownpre, code ui update and add lightmode * add lightmode to copytoclipboard and move svgs * fix doc toc parsing bug * update toc edit page / scroll to top * reorder docs secondary nav and add stack exchange * update svg paths with /@@ * update contentApi regex * tsignore
solana-foundation · Aug 1, 2024 · e78f45e · e78f45e
1 parent 3ff8960
commit e78f45e
Show file tree

Hide file tree

Showing 27 changed files with 850 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "@builder.io/react": "^3.2.6",
     "@docsearch/react": "^3.6.0",
     "@mdx-js/react": "^3.0.1",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@shikijs/transformers": "^1.6.0",
     "@sindresorhus/slugify": "^2.2.1",
     "@solana-foundation/solana-lib": "^2.39.0",

diff --git a/public/src/img/icons/Copy.inline.svg b/public/src/img/icons/Copy.inline.svg
diff --git a/public/src/img/icons/CopyConfirm.inline.svg b/public/src/img/icons/CopyConfirm.inline.svg
diff --git a/public/src/img/icons/FileDiff.inline.svg b/public/src/img/icons/FileDiff.inline.svg
diff --git a/public/src/img/icons/Rust.inline.svg b/public/src/img/icons/Rust.inline.svg
diff --git a/public/src/img/icons/Terminal.inline.svg b/public/src/img/icons/Terminal.inline.svg
diff --git a/public/src/img/icons/Typescript.inline.svg b/public/src/img/icons/Typescript.inline.svg
diff --git a/src/components/developers/DevelopersContentPage/DevelopersContentPage.module.scss b/src/components/developers/DevelopersContentPage/DevelopersContentPage.module.scss
@@ -38,6 +38,16 @@
     background: var(--scrollbar-thumb-hover);
   }
 
+  @mixin custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s ease;
+
+    &:hover {
+      scrollbar-color: var(--scrollbar-thumb) transparent;
+    }
+  }
+
   > * + * {
     margin-top: 1.5rem;
   }
@@ -343,6 +353,7 @@
       max-height: calc(100vh - 8rem);
       overflow-y: auto;
       overflow-x: hidden;
+      @include custom-scrollbar;
     }
 
     @media (max-width: 992px) {
@@ -389,6 +400,7 @@
       order: 3 !important;
       position: sticky !important;
       max-width: 248px;
+      @include custom-scrollbar;
     }
 
     @media (max-width: 992px) {
@@ -541,4 +553,28 @@
       }
     }
   }
+
+  .scroll-to-top {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.2s ease,
+      visibility 0.2s ease;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .toc-action-item {
+    justify-content: flex-start;
+    gap: 0.7rem;
+    padding: 0.5rem 1rem;
+    color: inherit;
+  }
+
+  .toc-action-item:hover {
+    background-color: transparent;
+  }
 }
diff --git a/src/components/developers/DevelopersContentPage/DevelopersContentPage.tsx b/src/components/developers/DevelopersContentPage/DevelopersContentPage.tsx
@@ -5,14 +5,9 @@ import styles from "./DevelopersContentPage.module.scss";
 import { FormattedDate } from "@/components/SolFormattedMessage";
 import MarkdownRenderer from "@/components/shared/MarkdownRenderer/MarkdownRenderer";
 import Link from "next/link";
-import ContentApi from "@/utils/contentApi";
 import Image from "next/image";
-
 import defaultImg from "@@/public/social/solana.jpg";
 import blurImage from "@@/public/img/blurImage.png";
-import ArrowLeft from "@@/public/src/img/icons/ArrowLeft.inline.svg";
-
-import GithubIcon from "@@/public/src/img/footer/github.inline.svg";
 import SocialShareButtons from "@/components/sharedPageSections/SocialShareButtons";
 import { config } from "src/config";
 import { useRouter } from "next/router";
@@ -156,17 +151,8 @@ export default memo(function DevelopersContentPage({
                 !!showSidebar &&
                 styles["developers-content-page__sidebar__active"]
               }
+              githubPath={record._raw.sourceFilePath}
             />
-
-            <Link
-              href={ContentApi.computeGitHubFileUrl(record._raw.sourceFilePath)}
-              target="_blank"
-              className={styles["developers-content-page__simpleButton"]}
-            >
-              <GithubIcon width="18" height="18" />
-              <span>{t("shared.general.edit-page")}</span>
-              <ArrowLeft style={{ transform: "rotate(180deg)" }} />
-            </Link>
           </section>
         </aside>
       </section>

diff --git a/src/components/developers/DevelopersContentPage/TableOfContents.tsx b/src/components/developers/DevelopersContentPage/TableOfContents.tsx
@@ -1,10 +1,11 @@
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
 import classNames from "classnames";
 import styles from "./DevelopersContentPage.module.scss";
 import Link from "next/link";
 import ContentApi from "@/utils/contentApi";
 import { TOC_HEADING_SIZE } from "@/constants/developerContentConfig";
 import ArrowLeft from "@@/public/src/img/icons/ArrowLeft.inline.svg";
+import GithubIcon from "@@/public/src/img/footer/github.inline.svg";
 import { useTranslation } from "next-i18next";
 
 type TableOfContentsProps = {
@@ -18,6 +19,8 @@ type TableOfContentsProps = {
   content: string;
   /** the current router's path */
   currentPath: string;
+  /** the path to the github repo */
+  githubPath: string;
 };
 
 /**
@@ -31,6 +34,7 @@ export const TableOfContents = memo(
     content = "",
     className = "",
     currentPath = "",
+    githubPath = "",
   }: TableOfContentsProps) => {
     const { t } = useTranslation("common");
 
@@ -42,6 +46,21 @@ export const TableOfContents = memo(
     // show nothing if we are unable to parse the TOC
     // if (!toc || toc?.length <= 0) return <></>;
 
+    const [showScrollToTop, setShowScrollToTop] = useState(false);
+
+    useEffect(() => {
+      const checkScroll = () => {
+        setShowScrollToTop(window.scrollY > window.innerHeight);
+      };
+
+      window.addEventListener("scroll", checkScroll);
+      return () => window.removeEventListener("scroll", checkScroll);
+    }, []);
+
+    const scrollToTop = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
     return (
       <div id={id} className={classNames(className)}>
         {!!title && <h5>{title}</h5>}
@@ -69,17 +88,27 @@ export const TableOfContents = memo(
           ))}
         </ul>
 
-        <Link
-          href="#"
-          onClick={() =>
-            typeof window != "undefined" &&
-            window.scrollTo({ top: 0, behavior: "instant" })
-          }
-          className={styles["developers-content-page__simpleButton"]}
+        <li>
+          <Link
+            href={ContentApi.computeGitHubFileUrl(githubPath)}
+            target="_blank"
+            className={styles["toc-action-item"]}
+          >
+            <GithubIcon width="18" height="18" />
+            <span>{t("shared.general.edit-page")}</span>
+          </Link>
+        </li>
+
+        <li
+          className={`${styles["scroll-to-top"]} ${
+            showScrollToTop ? styles["show"] : ""
+          }`}
         >
-          <ArrowLeft style={{ transform: "rotate(90deg)" }} />
-          <span>{t("shared.general.scroll-to-top")}</span>
-        </Link>
+          <button onClick={scrollToTop} className={styles["toc-action-item"]}>
+            <ArrowLeft style={{ transform: "rotate(90deg)" }} />
+            <span>{t("shared.general.scroll-to-top")}</span>
+          </button>
+        </li>
       </div>
     );
   },

diff --git a/src/components/developers/DevelopersNav/DevelopersNav.jsx b/src/components/developers/DevelopersNav/DevelopersNav.jsx
@@ -1,11 +1,12 @@
 import styles from "./DevelopersNav.module.scss";
 import Link from "@/utils/Link";
-import DocsIcon from "../../../../public/src/img/developers/docs.inline.svg";
-import RpcApiIcon from "../../../../public/src/img/developers/api.inline.svg";
-import CookbookIcon from "../../../../public/src/img/developers/cookbook.inline.svg";
-import GuidesIcon from "../../../../public/src/img/developers/guides.inline.svg";
-import TerminologyIcon from "../../../../public/src/img/developers/terminology.inline.svg";
-import CoursesIcon from "../../../../public/src/img/developers/courses.inline.svg";
+import DocsIcon from "@@/public/src/img/developers/docs.inline.svg";
+import RpcApiIcon from "@@/public/src/img/developers/api.inline.svg";
+import CookbookIcon from "@@/public/src/img/developers/cookbook.inline.svg";
+import GuidesIcon from "@@/public/src/img/developers/guides.inline.svg";
+import TerminologyIcon from "@@/public/src/img/developers/terminology.inline.svg";
+import CoursesIcon from "@@/public/src/img/developers/courses.inline.svg";
+import StackExchangeIcon from "@@/assets/developers/stackexchange.inline.svg";
 import { useTranslation } from "next-i18next";
 
 export default function DevelopersNav({ containerClassName }) {
@@ -27,20 +28,6 @@ export default function DevelopersNav({ containerClassName }) {
                 {t("developers.nav.documentation")}
               </span>
             </Link>
-            <Link partiallyActive to="/docs/rpc" activeClassName="active">
-              <RpcApiIcon height="16" width="16" className="me-2" />
-              <span className="align-middle">{t("developers.nav.rpc")}</span>
-            </Link>
-            <Link
-              partiallyActive
-              to="/developers/cookbook"
-              activeClassName="active"
-            >
-              <CookbookIcon height="16" width="16" className="me-2" />
-              <span className="align-middle">
-                {t("developers.nav.cookbook")}
-              </span>
-            </Link>
             <Link
               partiallyActive
               to="/developers/courses"
@@ -59,12 +46,39 @@ export default function DevelopersNav({ containerClassName }) {
               <GuidesIcon height="16" width="16" className="me-2" />
               <span className="align-middle">{t("developers.nav.guides")}</span>
             </Link>
+            <Link
+              partiallyActive
+              to="/developers/cookbook"
+              activeClassName="active"
+            >
+              <CookbookIcon height="16" width="16" className="me-2" />
+              <span className="align-middle">
+                {t("developers.nav.cookbook")}
+              </span>
+            </Link>
             <Link to="/docs/terminology" activeClassName="active">
               <TerminologyIcon height="16" width="16" className="me-2" />
               <span className="align-middle">
                 {t("developers.nav.terminology")}
               </span>
             </Link>
+            <Link partiallyActive to="/docs/rpc" activeClassName="active">
+              <RpcApiIcon height="16" width="16" className="me-2" />
+              <span className="align-middle">{t("developers.nav.rpc")}</span>
+            </Link>
+            <Link
+              href="https://solana.stackexchange.com/"
+              target="_blank"
+              activeClassName="active"
+            >
+              <StackExchangeIcon
+                height="16"
+                width="16"
+                className="me-2"
+                fill="currentColor"
+              />
+              <span className="align-middle">Stack Exchange</span>
+            </Link>
           </nav>
         </div>
       </div>

diff --git a/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx b/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
@@ -16,6 +16,10 @@ import {
   MarkdownPre,
   MarkdownImage,
   MarkdownSteps,
+  MarkdownTabs,
+  MarkdownTab,
+  MarkdownAccordion,
+  MarkdownAccordionItem,
 } from "./components";
 
 /**
@@ -223,6 +227,10 @@ const DEFAULT_COMPONENTS: MDXRemoteProps["components"] = {
   Callout: MarkdownCallout,
   Embed: MarkdownEmbed,
   Steps: MarkdownSteps,
+  Tabs: MarkdownTabs,
+  Tab: MarkdownTab,
+  Accordion: MarkdownAccordion,
+  AccordionItem: MarkdownAccordionItem,
 };
 
 type MarkdownRendererProps = {