version docs pages

src/guide/introduction.md

@@ -4,7 +4,7 @@ index: 2
 ---
 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
+[QML Language Reference](@docs/guide/qml-language) to learn about the syntax
 of the QML language.
 
 > [!NOTE]
@@ -65,7 +65,7 @@ The above example creates a bar/panel on your currently focused monitor with
 a centered piece of [text](https://doc.qt.io/qt-6/qml-qtquick-text.html).
 It will also reserve space for itself on your monitor.
 
-More information about available properties is available in the [type reference](/docs/types/Quickshell/PanelWindow).
+More information about available properties is available in the [type reference](@docs/types/Quickshell/PanelWindow).
 
 ## Running a process
 
@@ -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/configuration/qml-overview/#signal-handlers)
+a [signal handler](@docs/guide/qml-language/#signal-handlers)
 to update the text on the clock.
 
 > [!note/Note]
@@ -252,14 +252,12 @@ import QtQuick
 }
 ```
 
-<span class="small">
-  See also: [Property Bindings](/docs/configuration/qml-overview/#property-bindings),
-  [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
-</span>
+See also: [Property Bindings](@docs/guide/qml-language#property-bindings),
+[Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
 
 With this example, bars will be created and destroyed as you plug and unplug them,
 due to the reactive nature of the @@Quickshell.Quickshell.screens property.
-(See: [Reactive Bindings](/docs/configuration/qml-overview/#reactive-bindings).)
+(See: [Reactive Bindings](@docs/guide/qml-language#reactive-bindings).)
 
 Now there's an important problem you might have noticed: when the window
 is created multiple times, we also make a new Process and Timer, which makes the
@@ -336,10 +334,10 @@ outside of its component. Remember, components can be created _any number of tim
 including zero, so `clock` may not exist or there may be more than one, meaning
 there isn't an object to refer to from here.
 
-We can fix it with a [Property Definition](/docs/configuration/qml-overview/#property-definitions).
+We can fix it with a [Property Definition](@docs/guide/qml-language#property-definitions).
 
 We can define a property inside of the ShellRoot and reference it from the clock
-text instead. Due to QML's [Reactive Bindings](/docs/configuration/qml-overview/#reactive-bindings),
+text instead. Due to QML's [Reactive Bindings](@docs/guide/qml-language#reactive-bindings),
 the clock text will be updated when we update the property for every clock that
 currently exists.
 
@@ -409,7 +407,7 @@ above code; however, we can make it more concise:
    component wrapping the window and place the window directly into the
    `delegate` property.
 2. The @@Quickshell.Variants.delegate property is a
-   [Default Property](/docs/configuration/qml-overview/#the-default-property),
+   [Default Property](@docs/guide/qml-language#the-default-property),
    which means we can skip the `delegate:` part of the assignment.
    We're already using the default property of @@Quickshell.ShellRoot to store our
    Variants, Process, and Timer components among other things.
@@ -533,11 +531,11 @@ import QtQuick
 }
 ```
 
-<span class="small">See also: [Scope](/docs/types/Quickshell/Scope/)</span>
+See also: @@Quickshell.Scope
 
 Any qml file that starts with an uppercase letter can be referenced this way.
 We can bring in other folders as well using
-[import statements](/docs/configuration/qml-overview/#explicit-imports).
+[import statements](@docs/guide/qml-language#explicit-imports).
 
 Now what about breaking out the clock? This is a bit more complex because
 the clock component in the bar need to be dealt with, as well as the necessary
@@ -683,7 +681,7 @@ import Quickshell
 
 Now you might be thinking, why do we need the `Time` type in
 our bar file, and the answer is we don't. We can make `Time`
-a [Singleton](/docs/configuration/qml-overview/#singletons).
+a [Singleton](@docs/guide/qml-language#singletons).
 
 A singleton object has only one instance, and is accessible from
 any scope.

src/guide/qml-language.md

@@ -7,10 +7,7 @@ import Collapsible from "@components/Collapsible.astro";
 Quickshell is configured using the Qt Modeling Language, or QML.
 This page explains what you need to know about QML to start using Quickshell.
 
-<span class="small">
-  See also: [Qt Documentation: QML
-  Tutorial](https://doc.qt.io/qt-6/qml-tutorial.html)
-</span>
+See also: [Qt Documentation: QML Tutorial](https://doc.qt.io/qt-6/qml-tutorial.html)
 
 ## Structure
 
@@ -143,10 +140,7 @@ import QtQuick.Layouts 6.0 as L
 import "jsfile.js" as JsFile
 ```
 
-<span class="small">
-  See also: [Qt Documentation: Import
-  syntax](https://doc.qt.io/qt-6/qtqml-syntax-imports.html)
-</span>
+See also: [Qt Documentation: Import syntax](https://doc.qt.io/qt-6/qtqml-syntax-imports.html)
 
 #### Implicit imports
 
@@ -222,7 +216,7 @@ All property bindings are [_reactive_](#reactive-bindings). This means that when
 property the expression depends on is updated, the expression is re-evaluated and the property
 is updated accordingly.
 
-<span class="small">See also [Reactive bindings](#reactive-bindings) for more information</span>
+See also [Reactive bindings](#reactive-bindings) for more information
 
 ##### Property definitions
 
@@ -374,10 +368,7 @@ all other objects, you should refer to them by id when accessing properties.
 }
 ```
 
-<span class="small">
-  See also: [Qt Documentation: Scope and Naming
-  Resolution](https://doc.qt.io/qt-6/qtqml-documents-scope.html)
-</span>
+See also: [Qt Documentation: Scope and Naming Resolution](https://doc.qt.io/qt-6/qtqml-documents-scope.html)
 
 #### Functions
 
@@ -486,10 +477,7 @@ A signal is basically an event emitter you can connect to and receive updates fr
 They can be declared everywhere [properties](#properties) and [functions](#functions)
 can, and follow the same [scoping rules](#property-access-scopes).
 
-<span class="small">
-  See also: [Qt Documentation: Signal and Handler Event
-  System](https://doc.qt.io/qt-6/qtqml-syntax-signals.html)
-</span>
+See also: [Qt Documentation: Signal and Handler Event System](https://doc.qt.io/qt-6/qtqml-syntax-signals.html)
 
 ##### Signal definitions
 
@@ -529,11 +517,8 @@ or signal when the signal is emitted.
 }
 ```
 
-<span class="small">
-  `Component.onCompleted` will be addressed later in [Attached
-  Properties](#attached-properties), but for now, just know that it runs
-  immediately once the object is fully initialized.
-</span>
+`Component.onCompleted` will be addressed later in [Attached Properties](#attached-properties),
+but for now, just know that it runs immediately once the object is fully initialized.
 
 When the button is clicked, the button emits the @@QtQuick.Controls.Button.clicked(s)
 signal, which we connected to `updateText`. The signal then invokes `updateText`,
@@ -788,11 +773,9 @@ files.
 
 ### Reactive bindings
 
-<span class="small">
-  This section assumes knowledge of: [Properties](#properties),
-  [Signals](#signals), and [Functions](#functions). See also the [Qt
-  documentation](https://doc.qt.io/qt-6/qtqml-syntax-propertybinding.html).
-</span>
+This section assumes knowledge of: [Properties](#properties), [Signals](#signals),
+and [Functions](#functions).
+See also the [Qt documentation](https://doc.qt.io/qt-6/qtqml-syntax-propertybinding.html).
 
 Reactivity is when a property is updated based on updates to another property.
 Every time one of the properties in a binding change, the binding is re-evaluated