diff --git a/src/components/Header.astro b/src/components/Header.astro index e09ba42..f1a60a6 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -39,25 +39,21 @@ if (!data) { sidebarData = undefined; } -const { headings } = Astro.props; +const { + title = null, + headings = [], +} = Astro.props; ---
- {url.length > 2 ? -
)} diff --git a/src/components/navigation/sidebars/TOC.astro b/src/components/navigation/sidebars/TOC.astro index 11dd4fb..7933715 100644 --- a/src/components/navigation/sidebars/TOC.astro +++ b/src/components/navigation/sidebars/TOC.astro @@ -3,19 +3,22 @@ import TableOfContents from "./toc"; import type { ConfigHeading, TypeTOC } from "./types.d.ts"; export interface Props { + title?: string; headings?: ConfigHeading[]; types?: TypeTOC; mobile: boolean; } -const { headings, types, mobile } = Astro.props; +const { title, headings, types, mobile } = Astro.props; --- - -
- -
+{((headings?.length ?? 0) != 0 || types) && +
+ +
+} diff --git a/src/components/navigation/sidebars/toc/Table.tsx b/src/components/navigation/sidebars/toc/Table.tsx index 92c133d..2c241ca 100644 --- a/src/components/navigation/sidebars/toc/Table.tsx +++ b/src/components/navigation/sidebars/toc/Table.tsx @@ -11,15 +11,19 @@ import { import { Heading } from "./Heading"; export const Table: Component<{ + title?: string; typeTOC?: TypeTOC; configTOC?: ConfigTOC[]; }> = props => { - const { typeTOC, configTOC } = props; + const { title, typeTOC, configTOC } = props; if (configTOC) { return (
-

Contents

+ {title && <> +

{title}

+
+ } {heading => ( = props => { const [open, setOpen] = createSignal(false); const [clientWidth, setClientWidth] = createSignal(0); const [screenWidth, setScreenWidth] = createSignal(0); - const { mobile, config, type } = props; + const { mobile, title, config, type } = props; let tocRef: HTMLDivElement; function toggle(e: MouseEvent) { @@ -27,9 +27,10 @@ const TableOfContents: Component = props => { return type ? ( ) : ( -
+
); } + const handleClickOutside = (event: MouseEvent) => { const isLink = "href" in (event.target || {}); const isInBody = document.body.contains(event.target as Node); @@ -97,7 +98,7 @@ const TableOfContents: Component = props => { {type ? (
) : ( -
+
)} diff --git a/src/components/navigation/sidebars/types.d.ts b/src/components/navigation/sidebars/types.d.ts index 8e2cbb1..111e512 100644 --- a/src/components/navigation/sidebars/types.d.ts +++ b/src/components/navigation/sidebars/types.d.ts @@ -17,6 +17,7 @@ export interface TreeProps { // Right export interface TOCProps { + title?: string; config?: ConfigHeading[]; type?: TypeTableProps; mobile: boolean; diff --git a/src/config/io/helpers.ts b/src/config/io/helpers.ts index a77f629..be075c3 100644 --- a/src/config/io/helpers.ts +++ b/src/config/io/helpers.ts @@ -28,9 +28,16 @@ export function buildHierarchy(headings: ConfigHeading[]) { if (heading.depth === 1) { toc.push(heading); } else { - parentHeadings - .get(heading.depth - 1) - .subheadings.push(heading); + let depth = heading.depth - 1; + let parent = null; + + while (!parent && depth != 0) { + parent = parentHeadings.get(depth); + depth -= 1; + } + + if (parent) parent.subheadings.push(heading); + else toc.push(heading); } } return toc; diff --git a/src/guide/faq.mdx b/src/guide/faq.mdx index 58f88f9..015737f 100644 --- a/src/guide/faq.mdx +++ b/src/guide/faq.mdx @@ -3,8 +3,6 @@ title: "FAQ" description: "Frequently Asked Questions" index: 1000 --- -# {frontmatter.title} - This page is being actively expanded as common questions come up again. Make sure to also read the [Item Size and Position](/docs/guide/size-position) and diff --git a/src/guide/index.mdx b/src/guide/index.mdx index da09868..1cfb205 100644 --- a/src/guide/index.mdx +++ b/src/guide/index.mdx @@ -3,8 +3,6 @@ title: "Usage Guide" description: "Configuring the shell" index: -1 --- -# {frontmatter.title} - See the [Installation and Setup](/docs/guide/install-setup) page to get started. To write a Quickshell config, start by following the diff --git a/src/guide/install-setup.mdx b/src/guide/install-setup.mdx index 444c82b..430e490 100644 --- a/src/guide/install-setup.mdx +++ b/src/guide/install-setup.mdx @@ -2,7 +2,6 @@ title: "Installation & Setup" index: 0 --- -# {frontmatter.title} > [!NOTE] > Quickshell is still in a somewhat early stage of development. > There will be breaking changes before 1.0, however a migration guide will be provided. diff --git a/src/guide/introduction.mdx b/src/guide/introduction.mdx index b7bc674..3033da1 100644 --- a/src/guide/introduction.mdx +++ b/src/guide/introduction.mdx @@ -2,9 +2,6 @@ title: "Introduction" index: 2 --- - -# {frontmatter.title} - This page will walk you through the process of creating a simple bar/panel, and introduce you to all the basic concepts involved. You can use the [QML Language Reference](/docs/guide/qml-language) to learn about the syntax diff --git a/src/guide/qml-language.mdx b/src/guide/qml-language.mdx index 8bec9fb..71593d2 100644 --- a/src/guide/qml-language.mdx +++ b/src/guide/qml-language.mdx @@ -4,8 +4,6 @@ index: 10 --- import Collapsible from "@components/Collapsible.astro"; -# {frontmatter.title} - Quickshell is configured using the Qt Modeling Language, or QML. This page explains what you need to know about QML to start using quickshell. diff --git a/src/guide/size-position.mdx b/src/guide/size-position.mdx index fd7a1e9..1834d1b 100644 --- a/src/guide/size-position.mdx +++ b/src/guide/size-position.mdx @@ -2,8 +2,6 @@ title: "Item Size and Position" index: 2 --- -# {frontmatter.title} - > [!TIP] > Read the entire page, understanding this is critical to building a well designed shell. diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro index d35c255..ebce18d 100644 --- a/src/layouts/DocsLayout.astro +++ b/src/layouts/DocsLayout.astro @@ -59,7 +59,7 @@ if (url[2]) { -
+
-
+
diff --git a/src/layouts/GuideLayout.astro b/src/layouts/GuideLayout.astro index 86f7c9f..a299e2b 100644 --- a/src/layouts/GuideLayout.astro +++ b/src/layouts/GuideLayout.astro @@ -5,8 +5,8 @@ import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserv import type { ConfigHeading } from "@src/components/navigation/sidebars/types"; export interface Props { - headings: ConfigHeading[]; title: string; + headings: ConfigHeading[]; description: string; } @@ -15,11 +15,12 @@ const { title, description, headings } = Astro.props;
-
+
+

{title}

-
+ diff --git a/src/pages/docs/about.mdx b/src/pages/docs/about.mdx index ba3e003..6e3059d 100644 --- a/src/pages/docs/about.mdx +++ b/src/pages/docs/about.mdx @@ -2,7 +2,6 @@ layout: "@layouts/GuideMdLayout.astro" title: "About Quickshell" --- -# {frontmatter.title} Quickshell is a toolkit for building a desktop shell, which is to say components of your desktop like bars, widgets, lock screens, display managers, and the like. @@ -27,4 +26,4 @@ Quickshell is actively developed and will still receive breaking changes. A tagged release is planned soon, however there will be breakage before that point. -See the [Usage Guide](/docs/guide) to learn how to set up and use Quickshell \ No newline at end of file +See the [Usage Guide](/docs/guide) to learn how to set up and use Quickshell diff --git a/src/styles/docs/toc/intro-toc.css b/src/styles/docs/toc/intro-toc.css index a077071..ebdb7a5 100644 --- a/src/styles/docs/toc/intro-toc.css +++ b/src/styles/docs/toc/intro-toc.css @@ -22,8 +22,8 @@ margin: 0; margin-block: 0.618rem; - & * { - margin-left: 0.348rem; + & li { + margin-left: 0.618rem; } } } diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css index 7ed85db..1036323 100644 --- a/src/styles/docs/toc/toc.css +++ b/src/styles/docs/toc/toc.css @@ -17,6 +17,11 @@ background-color: transparent; } +.toc-content > p { + margin-top: calc(0.94rem - 6px); + margin-bottom: 0.318rem; +} + .toc-toggle { --width: 80svw; display: block; @@ -132,8 +137,8 @@ margin: 0; margin-block: 0.618rem; - & * { - margin-left: 0.348rem; + & li { + margin-left: 0.618rem; } } }