1.9 Docs: Turn on link validator (#7057)

docs/astro/astro.config.mjs

@@ -173,13 +173,9 @@ export default defineConfig({
                     },
                     {
                         label: "Reference",
-                        link: "reference/slint-language",
+                        link: "reference/primitive-types",
                         icon: "information",
                         items: [
-                            {
-                                label: "Slint Language",
-                                slug: "reference/slint-language",
-                            },
                             {
                                 label: "Primitive Types",
                                 slug: "reference/primitive-types",
@@ -355,8 +351,8 @@ export default defineConfig({
                     },
                 ]),
                 starlightLinksValidator({
-                    errorOnRelativeLinks: false,
                     errorOnLocalLinks: false,
+                    exclude: ["**/index.mdx"],
                 }),
             ],
             social: {

docs/astro/src/content/docs/guide/backends-and-renderers/backend_qt.md → docs/astro/src/content/docs/guide/backends-and-renderers/backend_qt.mdx

@@ -3,8 +3,9 @@
 title: Qt Backend
 description: Qt Backend
 ---
+import Link from '/src/components/Link.astro';
+// cSpell: ignore qttype qttypes
 
-<!-- cSpell: ignore qttype qttypes -->
 
 The Qt backend uses the [Qt](https://www.qt.io) library to interact with the windowing system, for
 rendering, as well as widget style for a native look and feel.
@@ -19,7 +20,7 @@ The compilation step will detect whether Qt is installed or not using the qttype
 See the instructions in the [qttypes documentation](https://docs.rs/qttypes/latest/qttypes/#finding-qt)
 on how to set environment variables to point to the Qt installation.
 
-If Qt is not installed, the backend will be disabled, and Slint will fallback to another backend, usually the [Winit backend](backend_winit.md).
+If Qt is not installed, the backend will be disabled, and Slint will fallback to another backend, usually the <Link type="WinitBackend" label="Winit backend" />.
 
 ## Configuration Options
 

docs/astro/src/content/docs/guide/backends-and-renderers/backends_and_renderers.md → docs/astro/src/content/docs/guide/backends-and-renderers/backends_and_renderers.mdx

@@ -4,7 +4,9 @@ title: Backends & Renderers
 description: Backends & Renderers
 ---
 
-<!-- cSpell: ignore linuxkms mfloat BINDGEN OECORE CCARGS xcrun gnueabi -->
+import Link from '/src/components/Link.astro';
+// cSpell: ignore linuxkms mfloat BINDGEN OECORE CCARGS xcrun gnueabi
+
 
 In Slint, a backend is the module that encapsulates the interaction with the operating system,
 in particular the windowing sub-system. Multiple backends can be compiled into Slint and one
@@ -46,7 +48,7 @@ as well as the features you've selected at Slint compilation time.
 
 ### Qt Renderer
 
-The Qt renderer comes with the [Qt backend](backend_qt.md) and renders using QPainter:
+The Qt renderer comes with the <Link type="QtBackend" label="Qt backend" /> and renders using QPainter:
 
  - Software rendering, no GPU acceleration.
  - Available only in the Qt backend.
@@ -66,22 +68,22 @@ The Qt renderer comes with the [Qt backend](backend_qt.md) and renders using QPa
   * No circular gradients.
   * No text stroking/outlining.
 - Text rendering currently limited to western scripts.
-- Available in the [Winit backend](backend_winit.md).
+- Available in the <Link type="WinitBackend" label="Winit backend" />.
 - Public [Rust](slint-rust:platform/software_renderer/) and [C++](slint-cpp:api/classslint_1_1platform_1_1SoftwareRenderer) API.
 
 ### FemtoVG Renderer
 
  - Highly portable.
  - GPU acceleration with OpenGL (required).
  - Text and path rendering quality sometimes sub-optimal.
- - Available in the [Winit backend](backend_winit.md) and [LinuxKMS backend](backend_linuxkms.md).
+ - Available in the <Link type="WinitBackend" label="Winit backend" /> and <Link type="LinuxkmsBackend" label="LinuxKMS backend" />.
  - Public [Rust](slint-rust:platform/femtovg_renderer/) API.
 
 ### Skia Renderer
 
  - Sophisticated GPU acceleration with OpenGL, Metal, Vulkan, and Direct3D.
  - Heavy disk-footprint compared to other renderers.
- - Available in the [Winit backend](backend_winit.md) and [LinuxKMS backend](backend_linuxkms.md).
+ - Available in the <Link type="WinitBackend" label="Winit backend" /> and <Link type="LinuxkmsBackend" label="LinuxKMS backend" />.
  - Public [C++](slint-cpp:api/classslint_1_1platform_1_1SkiaRenderer) API.
 
 #### Troubleshooting

docs/astro/src/content/docs/guide/language/coding/animation.mdx

@@ -4,6 +4,8 @@ title: Animations
 description: UI Animations.
 ---
 
+import Link from '/src/components/Link.astro';
+
 Declare animations for properties with the `animate` keyword like this:
 
 ```slint
@@ -28,7 +30,7 @@ Fine-tune animations using the following parameters:
 -   `duration`: the amount of time it takes for the animation to complete
 -   `iteration-count`: The number of times an animation should run. A negative value specifies
     infinite reruns. Fractional values are possible.
-    For permanently running animations, see [`animation-tick()`](../language/builtins/functions.md#animation-tick-duration).
+    For permanently running animations, see <Link type="AnimationTick" label="`animation-tick()`" />.
 -   `easing`: can be any of the following. See [`easings.net`](https://easings.net/) for a visual reference:
 
     -   `linear`

docs/astro/src/content/docs/guide/language/coding/file.mdx

@@ -5,6 +5,7 @@ description:  The `.slint` File
 ---
 
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import Link from '/src/components/Link.astro';
 
 
 You write user interfaces in the Slint language and saved in files with the `.slint` extension.
@@ -75,7 +76,7 @@ export component MyApp inherits Window {
 ```
 
 :::note{Note}
-Names have to be valid [identifiers](../syntax/identifiers.md).
+Names have to be valid [identifiers](#identifiers).
 :::
 
 Some elements are also accessible under pre-defined names:
@@ -276,7 +277,7 @@ export component App inherits Rectangle {
 
 Elements, globals and structs can be exported and imported.
 
-It's also possible to export globals (see [Global Singletons](globals.md)) imported from
+It's also possible to export globals (see <Link type="Globals" label="Global Singletons" />) imported from
 other files:
 
 ```slint no-test

docs/astro/src/content/docs/guide/language/coding/functions-and-callbacks.mdx

@@ -4,6 +4,8 @@ title: Functions
 description: Functions
 ---
 
+import Link from '/src/components/Link.astro';
+
 Similar to other programming languages, functions in Slint are way to name, organize and reuse
 a piece of logic/code.
 
@@ -35,7 +37,7 @@ If a function does not explicitly return a value, the value of the last statemen
 
 Functions can be annotated with the `pure` keyword.
 This indicates that the function does not cause any side effects.
-More details can be found in the [Purity](../concepts/purity.md) chapter.
+More details can be found in the <Link type="Purity" /> chapter.
 
 ## Calling a function
 
@@ -125,7 +127,7 @@ See the language-specific documentation for the generated code to use.
 
 ## Functions vs. callbacks
 
-There are a lot of similarities between functions and [callbacks](callbacks.md):
+There are a lot of similarities between functions and [callbacks](#callbacks):
 
 - They are both callable blocks of logic/code
 - They are invoked in the same way

docs/astro/src/content/docs/guide/language/coding/globals.mdx

@@ -3,6 +3,7 @@
 title: Globals
 description: Globals
 ---
+import Link from '/src/components/Link.astro';
 
 Declare a global singleton with `global Name { /* .. properties or callbacks .. */ }` to
 make properties and callbacks available throughout the entire project. Access them using `Name.property`.
@@ -22,7 +23,7 @@ export component Example inherits Rectangle {
 }
 ```
 
-Export a global to make it accessible from other files (see [Modules](modules.md)). Export a global from
+Export a global to make it accessible from other files (see <Link type="Modules" />). Export a global from
 the file also exporting the main application component to make it visible
 to native code in the business logic.
 

docs/astro/src/content/docs/guide/language/coding/properties.mdx

@@ -4,9 +4,11 @@ title: Properties
 description: Properties
 ---
 
+import Link from '/src/components/Link.astro';
+
 All elements have properties. Built-in elements come with common properties such
 as color or dimensional properties. You can assign values or entire
-[expressions](expressions.md) to them:
+<Link type="Expressions" /> to them:
 
 ```slint
 export component Example inherits Window {

docs/astro/src/content/docs/guide/language/coding/repetition-and-data-models.mdx

@@ -11,7 +11,7 @@ The syntax looks like this: `for name[index] in model : id := Element { ... }`
 The _model_ can be of the following type:
 
 -   an integer, in which case the element will be repeated that amount of time
--   an [array type or a model](types.md#arrays-and-models) declared natively, in which case the element will be instantiated for each element in the array or model.
+-   an [array type or a model](#models) declared natively, in which case the element will be instantiated for each element in the array or model.
 
 The _name_ will be available for lookup within the element and is going to be like a pseudo-property set to the
 value of the model. The _index_ is optional and will be set to the index of this element in the model.
@@ -48,3 +48,5 @@ export component Example inherits Window {
     }
 }
 ```
+
+## Models

docs/astro/src/content/docs/guide/language/concepts/component-property.mdx

@@ -4,4 +4,112 @@ title: Components, Properties, and Functions
 description: Components, Properties, and Functions
 ---
 
-Component basics. It's components all the way down...
+import CodeSnippetMD from '/src/components/CodeSnippetMD.astro'; 
+
+The Slint language is designed around components that vary in complexity. The simplest can be a label
+which could be nothing more than a text element with a predefined font and point size. The most complex 
+being a view or even the entire app. But regardless of the complexity they always can be broken down
+into smaller components. 
+
+To understand this lets start from the opposite perspective. You build an app in a single file as one
+very complex component. It will require a lot of time to manage and edit that file. It's state will 
+be hard to understand and reason about. It will easily have parts that depend on each other so changing
+one part might cause unexpected behavior in another. Building an application this way doesn't work.
+
+## Slint Components
+
+Instead an app can be broken down into smaller components. Each one that has its own state and behavior.
+They can be independent of each other and not necessarily depend on any other part of the app. In many
+cases more complex components can be simply built by just composing multiple components together.
+
+It then becomes easier to reason about the state and behavior of the app. While a single complex app
+can seem smart the reality is it doesn't scale. While apps built from many dumb - or less smart - 
+components can be used to build seemingly complex apps. But the reality is simple components leading
+to complex behaviors or interfaces. One's that are easier to iterate on and reason about.
+
+## Quick Example
+
+The following example shows how to build a simple button.
+
+<CodeSnippetMD imagePath="/src/assets/generated/guide-comp1.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
+```slint no-test
+component MyButton {  
+}
+```
+</CodeSnippetMD>
+
+This component has a name, but nothing more. However it automaticaly gains some common properties.
+
+<CodeSnippetMD imagePath="/src/assets/generated/guide-comp2.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
+```slint no-test
+component MyButton {
+    width: 200px;
+    height: 50px;
+}
+```
+</CodeSnippetMD>
+
+This allows a default width and height to be set. It still won't show anything though.
+
+<CodeSnippetMD imagePath="/src/assets/generated/guide-comp3.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
+```slint no-test
+component MyButton {
+    width: 200px;
+    height: 50px;
+    Rectangle {
+        background: lightseagreen;
+    }
+}
+```
+</CodeSnippetMD>
+
+
+<CodeSnippetMD imagePath="/src/assets/generated/guide-comp4.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
+```slint no-test
+component MyButton {
+    width: 200px;
+    height: 50px;
+    Rectangle {
+        border-width: 2px;
+        border-color: black;
+        background: lightseagreen;
+    }
+    Text {
+        text: "Hello World";
+        color: white;
+    }
+}
+```
+</CodeSnippetMD>
+
+A button needs a border so this gives it a black border. It also adds some text.
+
+
+<CodeSnippetMD imagePath="/src/assets/generated/guide-comp5.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
+```slint no-test
+component MyButton {
+    width: 200px;
+    height: 50px;
+    Rectangle {
+        border-width: 2px;
+        border-color: black;
+        background: lightseagreen;
+
+    }
+    Text {
+        text: "Hello World";
+        color: white;
+    }
+    TouchArea {
+        clicked => {
+            debug("clicked");
+        }
+    }
+}
+```
+</CodeSnippetMD>
+
+To add touch you can use Slints built in `TouchArea` component. It automatically fills its parent
+and when touched or clicked it will call its built in 'callback' function called `clicked`.
+
+To then create a more complex component with multiple buttons it will look like this.

docs/astro/src/content/docs/index.mdx

@@ -34,31 +34,30 @@ The documentation is split into several sections:
   description="This will get you up and running with the tooling for Slint development including the IDE integration via the Slint Language Server (LSP) and Slint Viewer.
   <br/><br/>
   It then offers a guide explaining all the key concepts of Slint and how to understand and use the Slint language."
-  href="guide/getting-started"
+  href="/master/docs/slint"
 >
 </LinkCard>
 
 <LinkCard
   title="Reference"
   description="This contains the API reference for all aspects of the Slint language. All the elements, properties, functions, callbacks and namespaces. It also contains the
 API reference for the `std-widgets` library. A set of cross platform components that can be used to build desktop applications."
-  href="reference/overview"
+  href="/master/docs/slint/reference/primitive-types"
 >
 </LinkCard>
 
 <LinkCard
   title="Tutorial"
   description="For those that like to learn by example or want to see how to structure a simple application, this section contains a step-by-step tutorial that walks you 
 through the creation of a simple memory game example."
-href="tutorial/quickstart"
+href="/master/docs/slint/tutorial/quickstart/"
 >
 </LinkCard>
 
 <LinkCard
-  title="Platforms & Integration"
-  description="This contains details about the different platforms that Slint supports.
-The Language Integration sections detail the API for the Rust, C++, and JS-Runtime versions of Slint."
-href="platforms"
+  title="Language Integrations"
+  description="This details the API for the Rust, C++, and JS-Runtime versions of Slint."
+href="/master/docs/slint/language-integrations/"
 >
 </LinkCard>
 </CardGrid>

docs/astro/src/content/docs/reference/colors-and-brushes.mdx

@@ -4,7 +4,7 @@ title: Colors & Brushes
 description: Colors Namespaces
 ---
 
-
+import Link from '/src/components/Link.astro';
 
 Color literals follow the syntax of CSS:
 
@@ -113,7 +113,7 @@ that is rotated by the specified angle. This is called a linear gradient and is
 
 ### @linear-gradient(angle, color percentage, color percentage, ...)
 
-The first parameter to the macro is an angle (see [Types](types.md)). The gradient line's starting point
+The first parameter to the macro is an angle (see <Link type="Types"/>). The gradient line's starting point
 will be rotated by the specified value.
 
 Following the initial angle is one or multiple color stops, describe as a space separated pair of a