diff --git a/src/components/Collapsible.astro b/src/components/Collapsible.astro index a6e1a74..8f651a4 100644 --- a/src/components/Collapsible.astro +++ b/src/components/Collapsible.astro @@ -12,5 +12,5 @@ const { title } = Astro.props; {title} - + diff --git a/src/config/io/markdown.ts b/src/config/io/markdown.ts index 7e8c37a..fdb70a5 100644 --- a/src/config/io/markdown.ts +++ b/src/config/io/markdown.ts @@ -35,90 +35,79 @@ const remarkParseAtTypes: RemarkPlugin<[]> = (rawNode as Md.Code).lang === "qml") ) { const node = rawNode as Md.Literal; + node.value = node.value.replace( + /@@(?([A-Z]\w*\.)*([A-Z]\w*))?((?[a-z]\w*)((?\(\))|(?\(s\)))?)?(?=[$.,;:)\s]|$)/g, + (_full, ...args) => { + type Capture = { + path: string | undefined; + member: string | undefined; + function: string | undefined; + signal: string | undefined; + }; - node.value = node.value.replace( - /@@((?([A-Z]\w*\.)*)(?([A-Z]\w*))(\.(?!\s|$))?)?((?[a-z]\w*)((?\(\))|(?\(s\)))?)?(?=[$.,;:)\s]|$)/g, - (_full, ...args) => { - type Capture = { - module: string | undefined; - type: string | undefined; - member: string | undefined; - function: string | undefined; - signal: string | undefined; - }; + const groups = args.pop() as Capture; + const pathp = (groups.path ?? "").split('.').filter(Boolean); + let type = (pathp.length >= 1 ? pathp.pop() : ""); + let module = pathp.join('_'); - const groups = args.pop() as Capture; + if (module) { + const isQs = module.startsWith("Quickshell"); + module = `99M${isQs ? "QS" : "QT_qml"}_${module}`; + } else module = ""; // WARNING: rehype parser can't currently handle intra-module links - if (groups.module) { - groups.module = groups.module.substring( - 0, - groups.module.length - 1 - ); - const isQs = groups.module.startsWith("Quickshell"); - groups.module = `99M${isQs ? "QS" : "QT_qml"}_${groups.module.replace(".", "_")}`; - } else groups.module = ""; // WARNING: rehype parser can't currently handle intra-module links + type = type ? `99N${type}` : ""; + groups.member = groups.member + ? `99V${groups.member}` + : ""; + const typep = groups.member + ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}` + : ""; + return `TYPE${module}${type}${groups.member}${typep}99TYPE`; + } + ); + } + }); + return root; +}; - groups.type = groups.type ? `99N${groups.type}` : ""; - groups.member = groups.member - ? `99V${groups.member}` - : ""; - const type = groups.member - ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}` - : ""; - return `TYPE${groups.module}${groups.type}${groups.member}${type}99TYPE`; - } - ); +const rehypeRewriteTypelinks: RehypePlugin<[]> = () => (root: Html.Root): Html.Root => { + visit( + root as Unist.Parent, + "text", + (node: Html.Text, index: number, parent: Html.Parent) => { + let changed = false; + + node.value = node.value.replace( + /TYPE99(\w+.)99TYPE/g, + (_full: string, match: string) => { + changed = true; + + const linkObject = getQMLTypeLinkObject(match); + const link = getQMLTypeLink(currentVersion, linkObject); + const icon = + linkObject.mtype && linkObject.mtype !== "func" + ? getIconForLink(linkObject.mtype, false) + : null; + const hasParens = + linkObject.mtype === "func" || + linkObject.mtype === "signal"; + const hasDot = linkObject.name && linkObject.mname; + + return `${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}`; + } + ); + + if (changed) { + const fragment = fromHtml(node.value, { + fragment: true, + }); + parent.children.splice(index, 1, ...fragment.children); + return SKIP; } }); return root; }; -const rehypeRewriteTypelinks: RehypePlugin<[]> = - () => - (root: Html.Root): Html.Root => { - visit( - root as Unist.Parent, - "text", - (node: Html.Text, index: number, parent: Html.Parent) => { - let changed = false; - - node.value = node.value.replace( - /TYPE99(\w+.)99TYPE/g, - (_full: string, match: string) => { - changed = true; - - const linkObject = getQMLTypeLinkObject(match); - const link = getQMLTypeLink( - currentVersion, - linkObject - ); - const icon = - linkObject.mtype && linkObject.mtype !== "func" - ? getIconForLink(linkObject.mtype, false) - : null; - const hasParens = - linkObject.mtype === "func" || - linkObject.mtype === "signal"; - const hasDot = linkObject.name && linkObject.mname; - - return `${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}`; - } - ); - - if (changed) { - const fragment = fromHtml(node.value, { - fragment: true, - }); - parent.children.splice(index, 1, ...fragment.children); - return SKIP; - } - - return CONTINUE; - } - ); - - return root; - }; const rehypeRewriteVersionedDoclinks: RehypePlugin<[]> = () => diff --git a/src/content.config.ts b/src/content.config.ts index 3653264..9ab0d71 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -2,7 +2,7 @@ import { defineCollection, z } from "astro:content"; import { glob } from "astro/loaders"; const guide = defineCollection({ - loader: glob({ pattern: "**/*.md", base: "src/guide" }), + loader: glob({ pattern: "**/*.{md,mdx}", base: "src/guide" }), schema: z.object({ title: z.string(), index: z.number(), diff --git a/src/guide/v0_1_0/introduction.md b/src/guide/v0_1_0/introduction.md index 41686f4..4e06703 100644 --- a/src/guide/v0_1_0/introduction.md +++ b/src/guide/v0_1_0/introduction.md @@ -75,11 +75,11 @@ To start with, let's make a clock. To get the time, we'll use the `date` command > [!note/Note] > Quickshell can do more than just run processes. Read until the end for more information. -We can use a [Process](@docs/types/quickshell.io/process) object to run commands +We can use a [Process](@docs/types/Quickshell.Io/Process) object to run commands and a @@Quickshell.Io.StdioCollector to read their output. We'll listen to the @@Quickshell.Io.StdioCollector.streamFinished(s) signal with -a [signal handler](@docs/guide/qml-language/#signal-handlers) +a [signal handler](@docs/guide/qml-language#signal-handlers) to update the text on the clock. > [!note/Note] diff --git a/src/guide/v0_1_0/qml-language.md b/src/guide/v0_1_0/qml-language.md index 8016d7d..9d64694 100644 --- a/src/guide/v0_1_0/qml-language.md +++ b/src/guide/v0_1_0/qml-language.md @@ -172,7 +172,7 @@ Name { Every object can contain [properties](#properties), [functions](#functions), and [signals](#signals). You can find out what properties are available for a type -by looking it up in the [Type Reference](@docs/types/). +by looking it up in the [Type Reference](@docs/types). #### Properties diff --git a/src/guide/v0_2_0/qml-language.md b/src/guide/v0_2_0/qml-language.mdx similarity index 99% rename from src/guide/v0_2_0/qml-language.md rename to src/guide/v0_2_0/qml-language.mdx index 8c8a249..319a73a 100644 --- a/src/guide/v0_2_0/qml-language.md +++ b/src/guide/v0_2_0/qml-language.mdx @@ -2,6 +2,7 @@ title: "QML Language" index: 10 --- + import Collapsible from "@components/Collapsible.astro"; Quickshell is configured using the Qt Modeling Language, or QML. @@ -187,7 +188,7 @@ Name { Every object can contain [properties](#properties), [functions](#functions), and [signals](#signals). You can find out what properties are available for a type -by looking it up in the [Type Reference](@docs/types/). +by looking it up in the [Type Reference](@docs/types). #### Properties diff --git a/src/pages/docs/[version]/guide/[...id].astro b/src/pages/docs/[version]/guide/[...id].astro index d0438a0..54d2deb 100644 --- a/src/pages/docs/[version]/guide/[...id].astro +++ b/src/pages/docs/[version]/guide/[...id].astro @@ -27,11 +27,11 @@ export async function getStaticPaths() { } const { version, page } = Astro.props; -const { headings } = await render(page); +const { headings, Content } = await render(page); // we can't use 'Content' because there isn't a way to pass in a version const html = await processMarkdown(version.name, page.body!); --- - + diff --git a/src/styles/css-config/code.css b/src/styles/css-config/code.css index 69732b0..d7688bd 100644 --- a/src/styles/css-config/code.css +++ b/src/styles/css-config/code.css @@ -3,8 +3,8 @@ pre.shiki { } :where(p, li):has(> code) code { - padding-inline: var(--2xl); - border-radius: var(--2xl); + padding-inline: var(--sm); + border-radius: var(--radius-xs); color: hsl(var(--blue) 100 69); background-color: hsla(var(--blue) 85 35 / 0.1); } diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css index 59b2430..7daee14 100644 --- a/src/styles/docs/docs.css +++ b/src/styles/docs/docs.css @@ -9,7 +9,7 @@ margin-inline: 0.618rem; margin-top: 3.5rem; display: flex; - justify-content: center; + justify-content: safe center; flex-direction: row; flex-grow: 1; transition: filter var(--theme-transition);