feat: add secondary navbar to docs

.gitignore

@@ -7,6 +7,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.deno-lock
 
 # Misc
 .DS_Store

docusaurus.config.js

@@ -146,9 +146,14 @@ const config = {
  activeBaseRegex: `^/examples`,
  },
  {
- href: "https://deno.land/api?unstable=true",
+ to: "/api/deno",
  label: "API Reference",
- position: "right",
+ position: "left",
+ items: [
+ { to: "/api/deno", label: "Deno" },
+ { to: "/api/web", label: "Web" },
+ { to: "/api/node", label: "Node" },
+ ],
  },
  {
  href: "https://www.deno.com",

src/components/APIReferenceIndex/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Footer from "@theme/Footer";
+
+interface Link {
+ id: string;
+ title: string;
+ url: string;
+ description?: string;
+}
+
+interface APIReferenceIndexProps {
+ apiLinks: Link[];
+}
+
+const APIReferenceIndex: React.FC<APIReferenceIndexProps> = ({ apiLinks }) => {
+ return (
+ <Layout
+ title={"Deno: the easiest, most secure JavaScript runtime"}
+ description="Reference documentation for the Deno runtime and Deno Deploy"
+ >
+ <div className="w-full mt-8 h-screen max-w-screen-xl mx-auto">
+ <div className="max-w-prose flex flex-col gap-8 mt-32">
+ <header>
+ <h1 className="text-3xl mb-2">Deno API Reference</h1>
+ <div
+ role="doc-subtitle"
+ className="text-gray-500 dark:text-gray-0 text-lg"
+ >
+ Description about Deno APIs. These are APIs you can use with Deno.
+ </div>
+ </header>
+ <ul className="pl-0">
+ {apiLinks.map((link) => {
+ return (
+ <li className="list-none flex flex-col gap-1" key={link.id}>
+ <a
+ href={link.url}
+ className="text-lg link underline underline-offset-4 text-[--ifm-color-primary] decoration-[--deploy-medium] dark:decoration-[--runtime-dark]"
+ title={link.description}
+ >
+ {link.title}
+ </a>
+ <p className="text-gray-500 dark:text-gray-0 leading-normal">
+ {link.description}
+ </p>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </div>
+
+ <Footer />
+ </Layout>
+ );
+};
+
+export default APIReferenceIndex;

src/components/SecondaryNavbar.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+
+function SecondaryNavbar() {
+ return (
+ <div className="secondary-navbar w-full">
+ <div className="secondary-navbar-content">
+ <NavbarNavLink
+ activeClassName="navbar__link--active"
+ className="navbar__item navbar__link"
+ to="/api/deno"
+ position="left"
+ label="Deno"
+ />
+ <NavbarNavLink
+ activeClassName="navbar__link--active"
+ className="navbar__item navbar__link"
+ to="/api/web"
+ position="left"
+ label="Web"
+ />
+ <NavbarNavLink
+ activeClassName="navbar__link--active"
+ className="navbar__item navbar__link"
+ to="/api/node"
+ position="left"
+ label="Node"
+ />
+ </div>
+ </div>
+ );
+}
+
+export default SecondaryNavbar;

src/css/custom.css

@@ -32,6 +32,7 @@ html:root {
  --subhosting: #ff8a01;
  --subhosting-dark: #251c11;
 
+ --gray-000: #e3e5e9;
  --gray-00: #cfd1d6;
  --gray-0: #9ea0a5;
  --gray-1: #868789;
@@ -61,15 +62,19 @@ html:root {
  --ifm-alert-padding-horizontal: 2rem;
  --ifm-color-info-dark: var(--deploy-medium);
  --ifm-color-info-contrast-background: var(--deploy-lightest);
+ --ifm-color-emphasis-300: var(--gray-00);
  --ifm-menu-color-background-hover: var(--deploy-lightest);
  --ifm-code-font-size: 0.875em;
  --ifm-code-padding-horizontal: 0.375em;
  --ifm-code-padding-vertical: 0.1875em;
  --ifm-code-background: #f6f8fa; /* Matches Prism highlighting */
  --ifm-code-color: #393a34;
- --ifm-menu-color: var(--gray-3);
+ --ifm-toc-padding-vertical: 0.5rem;
+ --ifm-toc-border-color: var(--gray-00);
+ --ifm-color-content-secondary: var(--gray-2);
+ --ifm-menu-color: var(--gray-2);
  --ifm-navbar-search-input-background-color: var(--white);
- --ifm-tabs-padding-vertical: 0.5rem;
+ --ifm-tabs-padding-vertical: 0.25rem;
  --ifm-list-item-margin: 0.5em;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --docsearch-muted-color: var(--gray-2);
@@ -93,7 +98,7 @@ html:root {
  }
 
  .pagination-nav__link {
- padding: 2rem 1rem;
+ padding: 1rem 1.5rem;
  }
 }
 
@@ -107,29 +112,54 @@ html[data-theme="dark"][data-theme="dark"] {
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
  --ifm-background-color: var(--black);
- --ifm-background-surface-color: var(--gray-4);
+ --ifm-background-surface-color: var(--black);
+ --ifm-toc-border-color: var(--gray-3);
+ --ifm-color-emphasis-300: var(--gray-3);
+ --ifm-menu-color: var(--gray-3);
  --ifm-link-color: var(--runtime);
  --ifm-link-hover-color: var(--runtime);
  --ifm-color-info-dark: var(--deploy-medium);
  --ifm-color-info-contrast-background: var(--deploy-dark);
+ --ifm-color-content-secondary: var(--gray-0);
  --ifm-menu-color-background-active: var(--runtime-dark);
  --ifm-code-background: #282a36;
  --ifm-menu-color: var(--gray-00);
+ --ifm-navbar-shadow-dark: 0 1px 2px 0 rgba(255, 255, 255, 0.1);
  --docsearch-footer-background: var(--runtime-dark);
  --docsearch-muted-color: var(--gray-0);
 }
 
 html[data-theme="dark"] kbd.DocSearch-Button-Key,
 html[data-theme="dark"] kbd.DocSearch-Commands-Key {
  box-shadow: none;
- color: var(--gray-0);
+ color: var(--gray-2);
 }
 
 html[data-theme="dark"] .DocSearch-Button {
- border: 1px solid var(--gray-1);
+ border: 1px solid var(--gray-3);
  padding: 0 1rem;
 }
 
+html[data-theme="dark"] .section-header,
+.subsection-header,
+.product-header {
+ border-bottom: 1px solid var(--gray-3);
+}
+
+html[data-theme="dark"] .navbar {
+ box-shadow: var(--ifm-navbar-shadow-dark);
+}
+
+html[data-theme="dark"] .secondary-navbar {
+ background-color: var(--gray-4);
+}
+
+/* Multiple selectors to override defaults in light mode */
+
+html[data-theme="light"] .secondary-navbar {
+ border-top: 1px solid var(--gray-000);
+}
+
 html[data-theme="light"] kbd.DocSearch-Button-Key,
 html[data-theme="light"] kbd.DocSearch-Commands-Key {
  box-shadow: none;
@@ -163,7 +193,7 @@ article {
 
 h1,
 .markdown h1:first-child {
- font-size: clamp(2rem, 5vw, 2.75rem);
+ font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  margin-bottom: 1.25rem;
 }
 
@@ -173,17 +203,17 @@ h1,
 
 h2 {
  --ifm-h2-vertical-rhythm-top: 2;
- font-size: clamp(1.5rem, 4vw, 2rem);
+ font-size: clamp(1.25rem, 3.5vw, 1.75rem);
 }
 
 h3 {
  --ifm-h3-vertical-rhythm-top: 1.75;
- font-size: clamp(1.25rem, 3vw, 1.5rem);
+ font-size: clamp(1rem, 3vw, 1.25rem);
 }
 
 h4 {
  --ifm-h4-vertical-rhythm-top: 1.5;
- font-size: clamp(1.1rem, 2vw, 1.25rem);
+ font-size: clamp(0.9rem, 1.5vw, 1.1rem);
 }
 
 :where(h1, h2, h3) {
@@ -205,6 +235,9 @@ code {
 
 .markdown a {
  text-decoration: underline;
+ text-decoration-color: var(--ifm-color-primary);
+ text-underline-offset: 0.25rem;
+ text-decoration-thickness: 0.05rem;
 }
 
 td p:last-child {
@@ -214,6 +247,20 @@ td p:last-child {
 .navbar {
  position: fixed;
  width: 100%;
+ display: flex;
+ height: auto;
+ flex-direction: column;
+ padding: 0;
+}
+
+.navbar__inner {
+ padding: var(--ifm-navbar-padding-vertical)
+ var(--ifm-navbar-padding-horizontal);
+}
+
+.secondary-navbar-content {
+ padding: var(--ifm-navbar-padding-vertical)
+ var(--ifm-navbar-padding-horizontal);
 }
 
 .table-of-contents a {
@@ -255,7 +302,7 @@ td p:last-child {
  color: var(--ifm-navbar-link-color);
  font-size: 0.75rem;
  text-transform: uppercase;
- border-bottom: 1px solid var(--gray-1);
+ border-bottom: 1px solid var(--gray-00);
  margin: 1rem var(--ifm-menu-link-padding-horizontal);
  padding: 0.5rem 0 0.1rem 0;
 }
@@ -273,7 +320,7 @@ td p:last-child {
 .subsection-header {
  padding: 2px 0;
  margin: 5px var(--ifm-menu-link-padding-horizontal);
- border-bottom: 1px solid #aaa;
+ border-bottom: 1px solid var(--gray-00);
  font-size: 0.8rem;
 }
 
@@ -293,14 +340,23 @@ td p:last-child {
  padding: 0 2px;
 }
 
+.navbar__secondary a {
+ display: inline-block;
+}
+
+.navbar__secondary a:first-child {
+ margin-left: 0;
+}
+
 .navbar__link {
  margin-left: 10px;
  margin-right: 10px;
+ margin-top: 4px;
+ border-bottom: 2px solid transparent;
 }
 
 .navbar__link--active {
- font-weight: bold;
- margin-top: 3px;
+ font-weight: 500;
  border-bottom: 2px solid var(--ifm-color-primary);
 }
 
@@ -315,7 +371,11 @@ td p:last-child {
 }
 
 .navbar__title {
- font-size: 1.2rem;
+ font-size: 1.3rem;
+}
+
+.secondary-navbar {
+ background-color: var(--white);
 }
 
 /* Mobile Nav Customize */
@@ -463,7 +523,7 @@ td p:last-child {
 }
 
 html .breadcrumbsContainer_src-theme-DocBreadcrumbs-styles-module {
- --ifm-breadcrumb-size-multiplier: 0.9;
+ --ifm-breadcrumb-size-multiplier: 1;
  margin-bottom: 0.5rem;
 }
 
@@ -530,3 +590,12 @@ kbd.DocSearch-Commands-Key {
  background: transparent;
  color: var(--docsearch-muted-color);
 }
+
+.tabs__item {
+ border-bottom: 2px solid transparent;
+}
+
+.tabs__item--active {
+ border-bottom-color: var(--ifm-tabs-color-active-border);
+ color: var(--ifm-tabs-color-active);
+}