Smarter docs links

docs/src/components/Link.astro

@@ -0,0 +1,29 @@
+---
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+import { linkMap } from "../utils/utils";
+
+type LinkType = keyof typeof linkMap;
+
+interface Props {
+    label?: string;
+    type: LinkType;
+}
+
+const { label, type } = Astro.props as Props;
+const displayLabel = label || type;
+
+if (!(type in linkMap)) {
+    throw new Error(
+        `Invalid link type: ${type}. Maybe you forgot to add it to the linkMap?`,
+    );
+}
+
+// The base is set in astro.config.mjs
+const base = import.meta.env.BASE_URL;
+const fullHref = `${base}${linkMap[type].href}`;
+---
+
+<a href={fullHref}><span>{displayLabel}</span></a>
+

docs/src/content/docs/guide/development/debugging_techniques.md → docs/src/content/docs/guide/development/debugging_techniques.mdx

@@ -4,11 +4,13 @@ title: Debugging Techniques
 description: Debugging Techniques
 ---
 
+import Link from '../../../../components/Link.astro';
+
 On this page we share different techniques and tools we've built into Slint that help you track down different issues you may be running into, during the design and development.
 
 ## Debugging Property Values
 
-Use the [`debug()`](/master/docs/slint/reference/builtins/builtinfunctions#debug) function to print the values of properties to stderr.
+Use the <Link type="DebugFn" label="debug()" /> function to print the values of properties to stderr.
 
 ## Slow Motion Animations
 

docs/src/content/docs/guide/language/basics.mdx

@@ -8,7 +8,7 @@ import { Aside, LinkCard } from '@astrojs/starlight/components';
 
 <LinkCard
   title="Quick start"
-  href="/master/docs/slint/getting-started/intro"
+  href="../../getting-started/intro"
   description="Follow along with the Slint VS Code extension and live code tooling."
 />
 

docs/src/content/docs/guide/language/types.mdx

@@ -4,17 +4,18 @@ title: Types
 description: All Slint types
 ---
 
+import Link from '../../../../components/Link.astro';
 
 All properties in Slint have a type. Slint knows these basic types:
 
 | Name  | description  | Default value |
 | -------------------------- | -------------------------------------- | ------------- | 
 | `angle`   | Angle measurement, corresponds to a literal like `90deg`, `1.2rad`, `0 25turn`    | `0deg`        |
 | `bool`    | boolean whose value can be either `true` or `false`.                              | `false`       |                                                                                                                                          
-| `brush`   | A brush is a special type that can be either initialized from a `color` or a `gradient`. See [Colors & Brushes](/master/docs/slint/reference/builtins/colors)   | `transparent` |
-| `color`   | RGB color with an alpha channel, with 8 bit precision for each channel. CSS color names as well as the hexadecimal color encodings are supported, such as #RRGGBBAA or #RGB. See [Colors & Brushes](/master/docs/slint/reference/builtins/colors)   | `transparent` |
+| `brush`   | A brush is a special type that can be either initialized from a `color` or a `gradient`. See <Link type="ColorsRef" label="Colors & Brushes" />.   | `transparent` |
+| `color`   | RGB color with an alpha channel, with 8 bit precision for each channel. CSS color names as well as the hexadecimal color encodings are supported, such as #RRGGBBAA or #RGB. See <Link type="ColorsRef" label="Colors & Brushes" />.   | `transparent` |
 | `duration` | Type for the duration of animations. A suffix like `ms` (millisecond) or `s` (second) is used to indicate the precision.  | `0ms` |                                                                                                                                                                                  
-| `easing`             | Property animation allow specifying an easing curve. See [animations](animations.md) for list of values.      | `linear` |                                                                                                                                                                                 
+| `easing`             | Property animation allow specifying an easing curve. See <Link type="AnimationRef" label="animations"/> for list of values.      | `linear` |                                                                                                                                                                                 
 | `float`              | Signed, 32-bit floating point number. Numbers with a `%` suffix are automatically divided by 100, so for example `30%` is the same as `0.30`.  | `0` |                                                                                                                                                     
 | `image`              | A reference to an image, can be initialized with the `@image-url("...")` construct  | empty image |                                                                                                                                                                                                         
 | `int`                | Signed integral number.                                                | `0` |                                                                                                                                                                                                                               

docs/src/content/docs/reference/gestures/flickable.mdx

@@ -5,6 +5,7 @@ description: Flickable element api.
 ---
 import SlintProperty  from '../../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 ```slint playground
 export component Example inherits Window {
@@ -23,7 +24,7 @@ export component Example inherits Window {
 ```
 
 The `Flickable` is a low-level element that is the base for scrollable
-widgets, such as the [`ScrollView`](/master/docs/slint/reference/std-widgets/scrollview). When the `viewport-width` or the
+widgets, such as the <Link type="ScrollView"/>. When the `viewport-width` or the
 `viewport-height` is greater than the parent's `width` or `height`
 respectively, the element becomes scrollable. Note that the `Flickable`
 doesn't create a scrollbar. When unset, the `viewport-width` and `viewport-height` are

docs/src/content/docs/reference/overview.mdx

@@ -6,6 +6,7 @@ description: Reference Overview
 
 import SlintProperty  from '../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../components/CodeSnippetMD.astro';
+import Link from '../../../components/Link.astro';
 
 The Slint elements have many common properties, callbacks and behavior. 
 This page describes these properties and their usage.
@@ -161,7 +162,7 @@ Rectangle {
 
 These properties are valid on all visible items and can be used to specify constraints when used in layouts:
 
--   **`col`**, **`row`**, **`colspan`**, **`rowspan`** (_in_ _int_): See [`GridLayout`](/master/docs/slint/reference/layouts/gridlayout).
+-   **`col`**, **`row`**, **`colspan`**, **`rowspan`** (_in_ _int_): See <Link type="GridLayout" />.
 -   **`horizontal-stretch`** and **`vertical-stretch`** (_in-out_ _float_): Specify how much relative space these elements are stretching in a layout. When 0, this means that the elements won't be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1.
 -   **`max-width`** and **`max-height`** (_in_ _length_): The maximum size of an element
 -   **`min-width`** and **`min-height`** (_in_ _length_): The minimum size of an element

docs/src/content/docs/reference/std-widgets/button.mdx

@@ -4,6 +4,7 @@ title: Button
 description: Button api.
 ---
 import SlintProperty  from '../../../../components/SlintProperty.astro';
+import Link from '../../../../components/Link.astro';
 
 ```slint playground
 import { Button, VerticalBox } from "std-widgets.slint";
@@ -24,7 +25,10 @@ export component Example inherits Window {
 }
 ```
 
-A simple button. Common types of buttons can also be created with [`StandardButton`](/master/docs/slint/reference/std-widgets/standardbutton).
+A simple button. Common types of buttons can also be created with <Link type="StandardButton" />.
+
+
+
 
 ## Properties
 

docs/src/content/docs/reference/std-widgets/gridbox.mdx

@@ -4,5 +4,7 @@ title: GridBox
 description: GridBox api.
 ---
 
-A `GridBox` is a [`GridLayout`](/master/docs/slint/reference/layouts/gridlayout/) where the spacing and padding values
+import Link from '../../../../components/Link.astro';
+
+A `GridBox` is a <Link type="GridLayout" /> where the spacing and padding values
 depend on the style instead of defaulting to 0.

docs/src/content/docs/reference/std-widgets/horizontalbox.mdx

@@ -4,7 +4,9 @@ title: HorizontalBox
 description: HorizontalBox api.
 ---
 
-A `HorizontalBox` is a [`HorizontalLayout`](/master/docs/slint/reference/layouts/horizontallayout/) where the spacing and padding values
+import Link from '../../../../components/Link.astro';
+
+A `HorizontalBox` is a <Link type="HorizontalLayout" /> where the spacing and padding values
 depend on the style instead of defaulting to 0.
 
-See also [`VerticalBox`](/master/docs/slint/reference/std-widgets/verticalbox/).
+See also <Link type="VerticalBox"/>.

docs/src/content/docs/reference/std-widgets/listview.mdx

@@ -5,6 +5,7 @@ description: ListView api.
 ---
 
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-listview-example.png"  imageWidth="200" imageHeight="200"  imageAlt='listview example'>
 ```slint playground
@@ -46,9 +47,9 @@ Elements are only instantiated if they are visible
 
 ## Properties
 
-Same as [`ScrollView`](/master/docs/slint/reference/std-widgets/scrollview/)
+Same as <Link type="ScrollView"/>.
 
 
 ## Callbacks
 
-Same as [`ScrollView`](/master/docs/slint/reference/std-widgets/scrollview/)
+Same as <Link type="ScrollView"/>.

docs/src/content/docs/reference/std-widgets/overview.mdx

@@ -6,6 +6,7 @@ description: Widgets Overview.
 
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
 import SlintProperty  from '../../../../components/SlintProperty.astro';
+import Link from '../../../../components/Link.astro';
 
 ```slint playground
 import { Palette, HorizontalBox } from "std-widgets.slint";
@@ -29,10 +30,10 @@ export component MyCustomWidget {
 Slint provides a series of built-in widgets that can be imported from `"std-widgets.slint"`.
 
 The widget appearance depends on the selected style.
-See [Selecting a Widget Style](/master/docs/slint/reference/std-widgets/style) for details how to select the style. If no style is selected, `native` is the default. If `native` isn't available, `fluent` is the default.
+See <Link type="StyleWidgets" label="Selecting a Widget Style"/> for details how to select the style. If no style is selected, `native` is the default. If `native` isn't available, `fluent` is the default.
 
 
-All widgets support all [properties common to builtin elements](/master/docs/slint/reference/overview).
+All widgets support all <Link type="CommonProperties" label="properties common to builtin elements"/>.
 
 ## Palette Properties
 

docs/src/content/docs/reference/std-widgets/spinner.mdx

@@ -6,6 +6,7 @@ description: Spinner api.
 
 import SlintProperty  from '../../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-spinner.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets spinner example'>
 
@@ -22,7 +23,7 @@ export component Example inherits Window {
 </CodeSnippetMD>
 
 The `Spinner` informs the user about the status of an on-going operation, such as loading data from the network. It provides the same properties as
-[`ProgressIndicator`](/master/docs/slint/reference/std-widgets/progressindicator/) but differs in shape.
+<Link type="ProgressIndicator" /> but differs in shape.
 
 ## Properties
 

docs/src/content/docs/reference/std-widgets/standardlistview.mdx

@@ -6,6 +6,7 @@ description: StandardListView api.
 
 import SlintProperty  from '../../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardlistview.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardlistview example'>
 ```slint
@@ -30,7 +31,7 @@ Like ListView, but with a default delegate, and a `model` property.
 
 ## Properties
 
-Same as [`ListView`](/master/docs/slint/reference/std-widgets/listview/), and in addition:
+Same as <Link type="ListView" />, and in addition:
 
 ### current-item
 <SlintProperty typeName="int" propName="current-item" default="-1" propertyVisibility="in-out">

docs/src/content/docs/reference/std-widgets/standardtableview.mdx

@@ -6,6 +6,7 @@ description: StandardTableView api.
 
 import SlintProperty  from '../../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardtableview.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardtableview example'>
 ```slint playground
@@ -44,7 +45,7 @@ are organized in a model where each row is a model of
 
 ## Properties
 
-Same as [`ListView`](/master/docs/slint/reference/std-widgets/listview/), and in addition:
+Same as <Link type="ListView" />, and in addition:
 
 ### current-sort-column
 <SlintProperty typeName="int" propName="current-sort-column" default="-1" propertyVisibility="out">

docs/src/content/docs/reference/std-widgets/textedit.mdx

@@ -7,6 +7,7 @@ description: TextEdit api.
 
 import SlintProperty  from '../../../../components/SlintProperty.astro';
 import CodeSnippetMD from '../../../../components/CodeSnippetMD.astro';
+import Link from '../../../../components/Link.astro';
 
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-textedit.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets textedit example'>
 ```slint playground
@@ -25,7 +26,7 @@ export component Example inherits Window {
 ```
 </CodeSnippetMD>
 
-Similar to [`LineEdit`](/master/docs/slint/reference/std-widgets/lineedit), but can be used to enter several lines of text
+Similar to <Link type="LineEdit" />, but can be used to enter several lines of text
 
 ## Properties
 
@@ -68,7 +69,7 @@ The horizontal alignment of the text.
 ## Functions
 
 -   **`focus()`** Call this function to focus the TextEdit and make it receive future keyboard events.
--   **`clear-focus()`** Call this function to remove keyboard focus from this `TextEdit` if it currently has the focus. See also [focus handling](/master/docs/slint/guide/focus).
+-   **`clear-focus()`** Call this function to remove keyboard focus from this `TextEdit` if it currently has the focus. See also <Link type="FocusHandling" label="focus handling" />.
 -   **`set-selection-offsets(int, int)`** Selects the text between two UTF-8 offsets.
 -   **`select-all()`** Selects all text.
 -   **`clear-selection()`** Clears the selection.

docs/src/content/docs/reference/std-widgets/verticalbox.mdx

@@ -4,7 +4,9 @@ title: VerticalBox
 description: VerticalBox api.
 ---
 
-A `VerticalBox` is a [`VerticalLayout`](/master/docs/slint/reference/layouts/verticallayout) where the spacing and padding values
+import Link from '../../../../components/Link.astro';
+
+A `VerticalBox` is a <Link type="VerticalLayout"/> where the spacing and padding values
 depend on the style instead of defaulting to 0.
 
-See also [`HorizontalBox`](/master/docs/slint/reference/std-widgets/horizontalbox).
+See also <Link type="HorizontalBox"/>.

docs/src/content/docs/tutorial/ideas_for_the_reader.md → docs/src/content/docs/tutorial/ideas_for_the_reader.mdx

@@ -4,13 +4,15 @@ title: Ideas For The Reader
 description: Ideas For The Reader
 ---
 
+import Link from '../../../components/Link.astro';
+
 The game is visually bare. Here are some ideas on how you could make further changes to enhance it:
 
--   The tiles could have rounded corners, to look less sharp. Use the [border-radius](/master/docs/slint/reference/elements/rectangle#border-radius)
-    property of _[Rectangle](/master/docs/slint/reference/elements/rectangle)_ to achieve that.
+-   The tiles could have rounded corners, to look less sharp. Use the <Link type="BorderRadiusRectangle" label="border-radius" />
+    property of <Link type="Rectangle" /> to achieve that.
 
 -   In real-world memory games, the back of the tiles often have some common graphic. You could add an image with
-    the help of another _[Image](/master/docs/slint/reference/elements/image)_
+    the help of another <Link type="Image" />
     element. Note that you may have to use _Rectangle_'s _clip property_
     element around it to ensure that the image is clipped away when the curtain effect opens.
 

docs/src/utils/utils.ts

@@ -1,6 +1,8 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: MIT
 
+import { h } from "@astrojs/starlight/expressive-code/hast";
+
 export async function getEnumContent(enumName: string | undefined) {
     if (enumName) {
         try {
@@ -187,3 +189,75 @@ export function removeLeadingSpaces(input: string, spaces: number = 4): string {
     });
     return modifiedLines.join("\n");
 }
+
+export const linkMap = {
+    AnimationRef: {
+        href: "/reference/builtins/animations",
+    },
+    BorderRadiusRectangle: {
+        href: "/reference/elements/rectangle#border-radius-properties",
+    },
+    ColorsRef: {
+        href: "/reference/builtins/colors",
+    },
+    CommonProperties: {
+        href: "/reference/overview",
+    },
+    DebugFn: {
+        href: "/reference/builtins/builtinfunctions#debug",
+    },
+    FocusHandling: {
+        href: "/guide/focus",
+    },
+    GridLayout: {
+        href: "/reference/layouts/gridlayout",
+    },
+    HorizontalBox: {
+        href: "/reference/std-widgets/horizontalbox",
+    },
+    HorizontalLayout: {
+        href: "/reference/layouts/horizontallayout",
+    },
+    Image: {
+        href: "/reference/elements/image",
+    },
+    ListView: {
+        href: "/reference/std-widgets/listview",
+    },
+    LineEdit: {
+        href: "/reference/std-widgets/lineedit",
+    },
+    Path: {
+        href: "/reference/elements/path",
+    },
+    ProgressIndicator: {
+        href: "/reference/std-widgets/progressindicator",
+    },
+    Rectangle: {
+        href: "/reference/elements/rectangle",
+    },
+    ScrollView: {
+        href: "/reference/std-widgets/scrollview",
+    },
+    StandardButton: {
+        href: "/reference/std-widgets/standardbutton",
+    },
+    StyleWidgets: {
+        href: "/reference/std-widgets/style",
+    },
+    Text: {
+        href: "/reference/elements/text/",
+    },
+    TextInput: {
+        href: "/reference/elements/textinput/",
+    },
+    Timer: {
+        href: "/reference/elements/timer/",
+    },
+    VerticalBox: {
+        href: "/reference/std-widgets/verticalbox",
+    },
+    VerticalLayout: {
+        href: "/reference/layouts/verticallayout",
+    },
+} as const;