diff --git a/docs/public/index.css b/docs/public/index.css index e8b49cf88..9ccbabd32 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -115,6 +115,10 @@ article > section :is(ul, ol) > * + * { margin-top: 0.75rem; } +article > section nav :is(ul, ol) > * + * { + margin-top: inherit; +} + article > section li > :is(p, pre, blockquote):not(:first-child) { margin-top: 1rem; } @@ -123,6 +127,15 @@ article > section :is(ul, ol) { padding-left: 1em; } +article > section nav :is(ul, ol) { + padding-left: inherit; +} + +article > section nav { + margin-top: 1rem; + margin-bottom: 2rem; +} + article > section ::marker { font-weight: bold; color: var(--theme-text-light); diff --git a/docs/src/components/DocSidebar.tsx b/docs/src/components/DocSidebar.tsx deleted file mode 100644 index 245a1c10b..000000000 --- a/docs/src/components/DocSidebar.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import type { FunctionalComponent } from 'preact'; -import { h } from 'preact'; -import { useState, useEffect, useRef } from 'preact/hooks'; -import EditOnGithub from './EditOnGithub'; -import ThemeToggle from './ThemeToggle'; - -const DocSidebar: FunctionalComponent<{ headers: any[]; editHref: string }> = ({ - headers = [], - editHref, -}) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState(undefined); - - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; - - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); - - return () => { - window.removeEventListener('resize', getItemOffsets); - }; - }, []); - - return ( - - ); -}; - -export default DocSidebar; diff --git a/docs/src/components/DocSidebar/DocSidebar.tsx b/docs/src/components/DocSidebar/DocSidebar.tsx new file mode 100644 index 000000000..ebf3dbf0d --- /dev/null +++ b/docs/src/components/DocSidebar/DocSidebar.tsx @@ -0,0 +1,22 @@ +import type { FunctionalComponent } from 'preact'; +import { h } from 'preact'; +import More from './More'; +import TableOfContents from './TableOfContents'; + +export const DocSidebar: FunctionalComponent<{ + headers: any[]; + editHref: string; +}> = ({ headers = [], editHref }) => { + return ( + + ); +}; + +export default DocSidebar; +export { default as More } from './More'; +export { default as TableOfContents } from './TableOfContents'; diff --git a/docs/src/components/DocSidebar/More.tsx b/docs/src/components/DocSidebar/More.tsx new file mode 100644 index 000000000..82c5d3b25 --- /dev/null +++ b/docs/src/components/DocSidebar/More.tsx @@ -0,0 +1,69 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import EditOnGithub from '../EditOnGithub'; +import ThemeToggle from '../ThemeToggle'; + +const More: FunctionalComponent<{ editHref: string }> = ({ editHref }) => { + return ( + <> +

More

+ +
+ +
+ + ); +}; + +export default More; diff --git a/docs/src/components/DocSidebar/TableOfContents.tsx b/docs/src/components/DocSidebar/TableOfContents.tsx new file mode 100644 index 000000000..803b05568 --- /dev/null +++ b/docs/src/components/DocSidebar/TableOfContents.tsx @@ -0,0 +1,55 @@ +import type { FunctionalComponent } from 'preact'; +import { h, Fragment } from 'preact'; +import { useState, useEffect, useRef } from 'preact/hooks'; + +const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ + headers = [], +}) => { + const itemOffsets = useRef([]); + const [activeId, setActiveId] = useState(undefined); + + useEffect(() => { + const getItemOffsets = () => { + const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); + itemOffsets.current = Array.from(titles).map((title) => ({ + id: title.id, + topOffset: title.getBoundingClientRect().top + window.scrollY, + })); + }; + + getItemOffsets(); + window.addEventListener('resize', getItemOffsets); + + return () => { + window.removeEventListener('resize', getItemOffsets); + }; + }, []); + + return ( + <> +

On this page

+ + + ); +}; + +export default TableOfContents; diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro index c7ef2adce..332147cf3 100644 --- a/docs/src/layouts/Main.astro +++ b/docs/src/layouts/Main.astro @@ -1,7 +1,7 @@ --- import ArticleFooter from '../components/ArticleFooter.astro'; import SiteSidebar from '../components/SiteSidebar.astro'; -import DocSidebar from '../components/DocSidebar.tsx'; +import DocSidebar, { TableOfContents, More } from '../components/DocSidebar/DocSidebar.tsx'; import MenuToggle from '../components/MenuToggle.tsx'; import MetaData from "../components/MetaData.astro"; import { site } from "../config.ts"; @@ -205,10 +205,7 @@ if (currentPage) { #sidebar-content { display: none; - } - .theme-toggle-wrapper { - display: none; - } + } #sidebar-site { display: none; } @@ -219,6 +216,9 @@ if (currentPage) { display: block; top: 0; } + .block { + display: block; + } @media (min-width: 50em) { header { position: static; @@ -261,8 +261,8 @@ if (currentPage) { /* display: flex; */ grid-column: 3; } - .theme-toggle-wrapper { - display: block; + .sm\:hidden { + display: none; } } @@ -335,15 +335,21 @@ if (currentPage) {
-
+

{content?.title}

+ {currentPage && }
+ {currentPage && } {currentPage && }