Skip to content

Commit

Permalink
feat: add secondary navbar to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
donjo committed Jun 6, 2024
1 parent 2b3ec0b commit a80c0aa
Show file tree
Hide file tree
Showing 11 changed files with 9,518 additions and 20 deletions.
9,211 changes: 9,211 additions & 0 deletions deno.lock

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,10 @@ const config = {
activeBaseRegex: `^/examples`,
},
{
href: "https://deno.land/api?unstable=true",
to: "/api",
label: "API Reference",
position: "right",
position: "left",
id: "toggleSecondaryNav",
},
{
href: "https://www.deno.com",
Expand Down
78 changes: 78 additions & 0 deletions src/components/APIReference/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from "react";
import Layout from "@theme/Layout";
import Footer from "@theme/Footer";

const APIReference = () => {
const apiLinks = [
{ id: "1", title: "API 1", url: "/api/1" },
{ id: "2", title: "API 2", url: "/api/2" },
{ id: "2", title: "API 2", url: "/api/2" },
{ id: "3", title: "API 3", url: "/api/3" },
{ id: "4", title: "API 4", url: "/api/4" },
{ id: "5", title: "API 5", url: "/api/5" },
{ id: "6", title: "API 6", url: "/api/6" },
{ id: "7", title: "API 7", url: "/api/7" },
{ id: "8", title: "API 8", url: "/api/8" },
{ id: "9", title: "API 9", url: "/api/9" },
{ id: "10", title: "API 10", url: "/api/10" },
{ id: "11", title: "API 11", url: "/api/11" },
{ id: "12", title: "API 12", url: "/api/12" },
{ id: "13", title: "API 13", url: "/api/13" },
{ id: "14", title: "API 14", url: "/api/14" },
{ id: "15", title: "API 15", url: "/api/15" },
{ id: "16", title: "API 16", url: "/api/16" },
{ id: "17", title: "API 17", url: "/api/17" },
{ id: "18", title: "API 18", url: "/api/18" },
{ id: "19", title: "API 19", url: "/api/19" },
{ id: "20", title: "API 20", url: "/api/20" },
{ id: "21", title: "API 21", url: "/api/21" },
{ id: "22", title: "API 22", url: "/api/22" },
{ id: "23", title: "API 23", url: "/api/23" },
{ id: "24", title: "API 24", url: "/api/24" },
{ id: "25", title: "API 25", url: "/api/25" },
{ id: "26", title: "API 26", url: "/api/26" },
{ id: "27", title: "API 27", url: "/api/27" },
{ id: "28", title: "API 28", url: "/api/28" },
{ id: "29", title: "API 29", url: "/api/29" },
{ id: "30", title: "API 30", url: "/api/30" },
{ id: "31", title: "API 31", url: "/api/31" },
{ id: "32", title: "API 32", url: "/api/32" },
{ id: "33", title: "API 33", url: "/api/33" },
{ id: "34", title: "API 34", url: "/api/34" },
{ id: "35", title: "API 35", url: "/api/35" },
{ id: "36", title: "API 36", url: "/api/36" },
{ id: "37", title: "API 37", url: "/api/37" },
// Add more links as needed
];

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="mt-24">
<h1>API Reference</h1>
<ul>
{apiLinks.map((link) => {
return (
<li key={link.id}>
<a
href={link.url}
className="text-inherit underline decoration-gray-300 dark:decoration-gray-600"
>
{link.title}
</a>
</li>
);
})}
</ul>
</div>
</div>

<Footer />
</Layout>
);
};

export default APIReference;
17 changes: 17 additions & 0 deletions src/components/SecondaryNavbar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";

function SecondaryNavbar() {
return (
<div className="secondary-navbar w-full">
<div className="secondary-navbar-content">
{/* Your nav items here */}
<a className="navbar__item navbar__link" href="/link1">Link 1</a>
<a className="navbar__item navbar__link" href="/link2">Link 2</a>
</div>
</div>
);
}

export default SecondaryNavbar;

// TODO MIGRATE STYLES FROM NAVBAR TO NAVBAR PRIMARY AND SECONDARY
89 changes: 73 additions & 16 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,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);
Expand All @@ -93,7 +97,7 @@ html:root {
}

.pagination-nav__link {
padding: 2rem 1rem;
padding: 1rem 1.5rem;
}
}

Expand All @@ -107,29 +111,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-00);
}

html[data-theme="light"] kbd.DocSearch-Button-Key,
html[data-theme="light"] kbd.DocSearch-Commands-Key {
box-shadow: none;
Expand Down Expand Up @@ -163,7 +192,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;
}

Expand All @@ -173,17 +202,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) {
Expand Down Expand Up @@ -214,6 +243,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 {
Expand Down Expand Up @@ -255,7 +298,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;
}
Expand All @@ -273,7 +316,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;
}

Expand All @@ -296,11 +339,12 @@ td p:last-child {
.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);
}

Expand All @@ -315,7 +359,11 @@ td p:last-child {
}

.navbar__title {
font-size: 1.2rem;
font-size: 1.3rem;
}

.secondary-navbar {
background-color: var(--white);
}

/* Mobile Nav Customize */
Expand Down Expand Up @@ -463,7 +511,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;
}

Expand Down Expand Up @@ -530,3 +578,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);
}
8 changes: 8 additions & 0 deletions src/pages/api.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import APIReference from "/src/components/APIReference";

const APIPage = () => {
return <APIReference />;
};

export default APIPage;
3 changes: 2 additions & 1 deletion src/theme/Layout/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import React, {useState} from "react";
import { useLocation } from "@docusaurus/router";
import clsx from "clsx";
import Head from "@docusaurus/Head";
import ErrorBoundary from "@docusaurus/ErrorBoundary";
Expand Down
Loading

0 comments on commit a80c0aa

Please sign in to comment.