knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#809,docs][xl]: add LHS sidebar to docs

Browse Source
This commit is contained in:
deme
2023-05-05 15:33:17 -03:00
parent 0f65e253da
commit 91caeff6c3
15 changed files with 375 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
site/components/DocsPagination.tsx Normal file
View File

@@ -0,0 +1,44 @@
export default function DocsPagination({ prev = '', next = '' }) {
return (
<div className="w-full flex my-20">
{prev && (
<a href={prev} className="mr-10 no-underline">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-6 h-6 inline mr-2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
Prev
</a>
)}
{next && (
<a href={next} className="no-underline ml-auto">
Next Lesson
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 inline ml-2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</a>
)}
</div>
);
}

8
site/components/Layout.tsx
View File

@@ -55,13 +55,13 @@ export default function Layout({
title,
tableOfContents = [],
urlPath,
siteMap = []
sidebarTree = []
}: {
children;
title?: string;
tableOfContents?;
urlPath?: string;
siteMap?: [];
sidebarTree?: [];
}) {
// const { toc } = children.props;
const { theme, setTheme } = useTheme();
@@ -134,7 +134,7 @@ export default function Layout({
href={`#${subSection.id}`}
className={
isActive(subSection)
? 'text-sky-500'
? 'text-secondary'
: 'hover:text-slate-600 dark:hover:text-slate-300'
}
>
@@ -153,7 +153,7 @@ export default function Layout({
{/* LHS NAVIGATION */}
{/* {showSidebar && ( */}
<div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
<SiteToc currentPath={urlPath} nav={siteMap} />
<SiteToc currentPath={urlPath} nav={sidebarTree} />
</div>
{/* )} */}
</>

7
site/components/MDXPage.tsx
View File

@@ -1,5 +1,6 @@
import { MDXRemote } from "next-mdx-remote";
import layouts from "layouts";
import { MDXRemote } from 'next-mdx-remote';
import layouts from 'layouts';
import DocsPagination from './DocsPagination';
export default function MDXPage({ source, frontMatter }) {
const Layout = ({ children }) => {
@@ -32,7 +33,7 @@ export default function MDXPage({ source, frontMatter }) {
</header>
<main>
<Layout>
<MDXRemote {...source} />
<MDXRemote {...source} components={{ DocsPagination }} />
</Layout>
</main>
</div>

36
site/components/SiteToc.tsx
View File

@@ -1,6 +1,6 @@
import Link from "next/link.js";
import clsx from "clsx";
import { Disclosure, Transition } from "@headlessui/react";
import Link from 'next/link.js';
import clsx from 'clsx';
import { Disclosure, Transition } from '@headlessui/react';
export interface NavItem {
name: string;
@@ -40,15 +40,11 @@ function sortNavGroupChildren(items: Array<NavItem | NavGroup>) {
}
export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
function isActiveItem(item: NavItem) {
return item.href === currentPath;
}
return (
<nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
{/* {sortNavGroupChildren(nav).map((n) => ( */}
{nav.map((n) => (
<NavComponent item={n} isActive={false} />
<NavComponent item={n} currentPath={currentPath} />
))}
</nav>
);
@@ -56,30 +52,34 @@ export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
const NavComponent: React.FC<{
item: NavItem | NavGroup;
isActive: boolean;
}> = ({ item, isActive }) => {
currentPath: string;
}> = ({ item, currentPath }) => {
function isActiveItem(item: NavItem) {
return item.href === "/" + currentPath;
}
return !isNavGroup(item) ? (
<Link
key={item.name}
href={item.href}
className={clsx(
isActive
? "text-sky-500"
: "font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300",
"block"
isActiveItem(item)
? 'text-secondary'
: 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
'block'
)}
>
{item.name}
</Link>
) : (
<Disclosure as="div" key={item.name} className="flex flex-col space-y-3">
<Disclosure as="div" key={item.name} className="flex flex-col space-y-3" defaultOpen={true}>
{({ open }) => (
<div>
<Disclosure.Button className="group w-full flex items-center text-left text-md font-medium text-slate-900 dark:text-white">
<svg
className={clsx(
open ? "text-slate-400 rotate-90" : "text-slate-300",
"h-3 w-3 mr-2 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-slate-400"
open ? 'text-slate-400 rotate-90' : 'text-slate-300',
'h-3 w-3 mr-2 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-slate-400'
)}
viewBox="0 0 20 20"
aria-hidden="true"
@@ -99,7 +99,7 @@ const NavComponent: React.FC<{
<Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
{/* {sortNavGroupChildren(item.children).map((subItem) => ( */}
{item.children.map((subItem) => (
<NavComponent item={subItem} isActive={false} />
<NavComponent item={subItem} currentPath={currentPath} />
))}
</Disclosure.Panel>
</Transition>