mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Docs/show docsidebar on mobile (#878)
This commit is contained in:
Caleb Jasik
GitHub
parent
c14d2550b2
commit
0c46a1dab2
6 changed files with 174 additions and 125 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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<string>(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 (
|
||||
<nav class="sidebar-nav" aria-labelledby="sidebar-content">
|
||||
<div class="sidebar-nav-inner">
|
||||
<h2 class="heading">On this page</h2>
|
||||
<ul>
|
||||
<li
|
||||
class={`header-link depth-2 ${
|
||||
activeId === 'overview' ? 'active' : ''
|
||||
}`.trim()}
|
||||
>
|
||||
<a href="#overview">Overview</a>
|
||||
</li>
|
||||
{headers
|
||||
.filter(({ depth }) => depth > 1 && depth < 4)
|
||||
.map((header) => (
|
||||
<li
|
||||
class={`header-link depth-${header.depth} ${
|
||||
activeId === header.slug ? 'active' : ''
|
||||
}`.trim()}
|
||||
>
|
||||
<a href={`#${header.slug}`}>{header.text}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2 class="heading">More</h2>
|
||||
<ul>
|
||||
<li class={`header-link depth-2`}>
|
||||
<EditOnGithub href={editHref} />
|
||||
</li>
|
||||
<li class={`header-link depth-2`}>
|
||||
<a
|
||||
href="https://github.com/snowpackjs/astro/issues/new/choose"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="bug"
|
||||
class="svg-inline--fa fa-bug fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Report a bug</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class={`header-link depth-2`}>
|
||||
<a href="https://astro.build/chat" target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="comment-alt"
|
||||
class="svg-inline--fa fa-comment-alt fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Join the community</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div style={{ margin: '2rem 0', textAlign: 'center' }}>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebar;
|
||||
22
docs/src/components/DocSidebar/DocSidebar.tsx
Normal file
22
docs/src/components/DocSidebar/DocSidebar.tsx
Normal file
|
|
@ -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 (
|
||||
<nav class="sidebar-nav" aria-labelledby="sidebar-content">
|
||||
<div class="sidebar-nav-inner">
|
||||
<TableOfContents headers={headers} />
|
||||
<More editHref={editHref} />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocSidebar;
|
||||
export { default as More } from './More';
|
||||
export { default as TableOfContents } from './TableOfContents';
|
||||
69
docs/src/components/DocSidebar/More.tsx
Normal file
69
docs/src/components/DocSidebar/More.tsx
Normal file
|
|
@ -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 (
|
||||
<>
|
||||
<h2 class="heading">More</h2>
|
||||
<ul>
|
||||
<li class={`header-link depth-2`}>
|
||||
<EditOnGithub href={editHref} />
|
||||
</li>
|
||||
<li class={`header-link depth-2`}>
|
||||
<a
|
||||
href="https://github.com/snowpackjs/astro/issues/new/choose"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="bug"
|
||||
class="svg-inline--fa fa-bug fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Report a bug</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class={`header-link depth-2`}>
|
||||
<a href="https://astro.build/chat" target="_blank">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="comment-alt"
|
||||
class="svg-inline--fa fa-comment-alt fa-w-16"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Join the community</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div style={{ margin: '2rem 0', textAlign: 'center' }}>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default More;
|
||||
55
docs/src/components/DocSidebar/TableOfContents.tsx
Normal file
55
docs/src/components/DocSidebar/TableOfContents.tsx
Normal file
|
|
@ -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<string>(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 (
|
||||
<>
|
||||
<h2 class="heading">On this page</h2>
|
||||
<ul>
|
||||
<li
|
||||
class={`header-link depth-2 ${
|
||||
activeId === 'overview' ? 'active' : ''
|
||||
}`.trim()}
|
||||
>
|
||||
<a href="#overview">Overview</a>
|
||||
</li>
|
||||
{headers
|
||||
.filter(({ depth }) => depth > 1 && depth < 4)
|
||||
.map((header) => (
|
||||
<li
|
||||
class={`header-link depth-${header.depth} ${
|
||||
activeId === header.slug ? 'active' : ''
|
||||
}`.trim()}
|
||||
>
|
||||
<a href={`#${header.slug}`}>{header.text}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableOfContents;
|
||||
|
|
@ -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) {
|
|||
</aside>
|
||||
<div id="article">
|
||||
<article class="content">
|
||||
<section>
|
||||
<section class="main-section">
|
||||
<h1 class="content-title" id="overview">{content?.title}</h1>
|
||||
{currentPage && <nav class="block sm:hidden">
|
||||
<TableOfContents client:media="(max-width: 50em)" headers={headers}/>
|
||||
</nav>}
|
||||
<slot />
|
||||
</section>
|
||||
{currentPage && <nav class="block sm:hidden">
|
||||
<More client:media="(max-width: 50em)" editHref={githubEditUrl}/>
|
||||
</nav>}
|
||||
{currentPage && <ArticleFooter path={currentFile} />}
|
||||
</article>
|
||||
</div>
|
||||
<aside class="sidebar" id="sidebar-content" title="Table of Contents">
|
||||
{currentPage && <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />}
|
||||
{currentPage && <DocSidebar client:media="(min-width: 50em)" headers={headers} editHref={githubEditUrl} />}
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue