quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

Merge branch 'main' into dev, fix guide Collapsible

Browse source
This commit is contained in:
Oleksandr 2026-02-13 15:46:00 +02:00
commit 8c961c729b
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
9 changed files with 76 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Collapsible.astro
View file

@ -12,5 +12,5 @@ const { title } = Astro.props;
<Fragment set:html={collapsibleMarker}/>
{title}
</div>
<slot>
<slot />
</Accordion>

139
src/config/io/markdown.ts
View file

@ -35,90 +35,79 @@ const remarkParseAtTypes: RemarkPlugin<[]> =
(rawNode as Md.Code).lang === "qml")
) {
const node = rawNode as Md.Literal;
node.value = node.value.replace(
/@@(?<path>([A-Z]\w*\.)*([A-Z]\w*))?((?<member>[a-z]\w*)((?<function>\(\))|(?<signal>\(s\)))?)?(?=[$.,;:)\s]|$)/g,
(_full, ...args) => {
type Capture = {
path: string | undefined;
member: string | undefined;
function: string | undefined;
signal: string | undefined;
};
node.value = node.value.replace(
/@@((?<module>([A-Z]\w*\.)*)(?<type>([A-Z]\w*))(\.(?!\s|$))?)?((?<member>[a-z]\w*)((?<function>\(\))|(?<signal>\(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 `<a class="type${linkObject.mtype}-link typedata-link" href=${link}>${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}</a>`;
}
);
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 `<a class="type${linkObject.mtype}-link typedata-link" href=${link}>${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}</a>`;
}
);
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<[]> =
() =>

2
src/content.config.ts
View file

@ -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(),

4
src/guide/v0_1_0/introduction.md
View file

@ -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]

2
src/guide/v0_1_0/qml-language.md
View file

@ -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

3
src/guide/v0_2_0/qml-language.md → src/guide/v0_2_0/qml-language.mdx
View file

@ -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

4
src/pages/docs/[version]/guide/[...id].astro
View file

@ -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!);
---
<GuideLayout title={page.data.title} description="" headings={headings}>
<Fragment set:html={html}/>
<Content/>
</GuideLayout>

4
src/styles/css-config/code.css
View file

@ -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);
}

2
src/styles/docs/docs.css
View file

@ -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);