From 372329c13da2f0ee5f1a87d592c495ef43f92e00 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 10 Jan 2025 01:22:17 +0100
Subject: [PATCH] chore(ui-docs): minor additions

---
 front/ui-docs/components/ui/layout/section.md | 40 +++++++++------
 front/ui-docs/components/ui/layout/spacer.md  | 51 +++++++++----------
 front/ui-docs/components/ui/link.md           | 33 ++++++------
 3 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/front/ui-docs/components/ui/layout/section.md b/front/ui-docs/components/ui/layout/section.md
index a0462835b..e91ae06d8 100644
--- a/front/ui-docs/components/ui/layout/section.md
+++ b/front/ui-docs/components/ui/layout/section.md
@@ -101,6 +101,10 @@ const user: User = {
 }
 </script>
 
+```ts
+import Section from "~/components/ui/Section.vue"
+```
+
 # Layout section
 
 Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
@@ -112,7 +116,7 @@ Sections divide the page vertically. Choose an appropriate heading level for eac
 ### Align the section to the page
 
 ```vue-html
-<Section alignLeft />
+<Section h3="My title" alignLeft />
 ```
 
 ### Make the section header align with the section contents
@@ -132,14 +136,16 @@ The link or button will be shown on the right side of the header.
 ```vue-html
 <Layout stack gap-64>
   <Spacer />
-  <Section h3="With a link" :action="{ text:'My library', to:'/' }" />
+  <Section h3="With a link" 
+    :action="{ text:'My library', to:'/' }" />
 
-  <Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+  <Section h3="With a button" 
+    :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 </Layout>
 ```
 
+<Spacer />
 <Layout stack gap-64>
-  <Spacer />
 <Section h3="With a link" :action="{ text:'My library', to:'/' }" />
 <Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 </Layout>
@@ -148,33 +154,35 @@ You can add props to the Link or Button, for example to make them `primary` or a
 
 ```vue-html{1}
 <Section solid primary icon="bi-star"
-    h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+    h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 ```
 
 <Spacer :size="40"/>
 
 <Section solid primary icon="bi-star"
-    h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+    h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 
 ::: tip Gaps between consecutive sections
 
-Place consecutive sections into a `<Layout stack gap-64></Layout>` to space them out.
-You can add spacers (negatice or positive) if you want to manually make one distance smaller or larger.
+Place consecutive sections into a [Layout stack](../layout) width a size of 64px give them a regular vertical rhythm. Use different sizes for very small or very large headings.
+You can add spacers with negative or positive size if you want to manually make a specific distance smaller or larger than the others.
 
 ```vue-html
 <Layout stack gap-64>
   <Spacer />
-  <Section h3="Section 1"></Section>
-  <Section h3="Section 2"></Section>
+  <Section h3="Section 1" />
+  <Section h3="Section 2" />
 </Layout>
 ```
 
 <Layout stack gap-64>
-  <Spacer />
-  <Section h3="Section 1"></Section>
-  <Section h3="Section 2"></Section>
+  <Spacer no-size />
+  <Section h3="Section 1" />
+  <Section h3="Section 2" />
 </Layout>
 
+<Spacer />
+
 :::
 
 ::: tip Let items cover the whole grid width
@@ -223,13 +231,13 @@ To prevent items from being put on a grid, add `style="grid-column: 1 / -1"` whi
 <Toggle v-model="alignLeft" label="Left-align the layout"/>
 </Layout>
 
-<Spacer />
-
 ---
 
+<Spacer />
+
 <Layout stack gap-64 class="preview" style="margin: 0 -40px; padding: 0 25px;">
 
-<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Go to library', to:'/' }">
+<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Documentation on Cards', to:'../card' }">
     <Card small title="Relatively Long Album Name">
         Artist Name
     </Card>
diff --git a/front/ui-docs/components/ui/layout/spacer.md b/front/ui-docs/components/ui/layout/spacer.md
index e07eed563..23ac5c44c 100644
--- a/front/ui-docs/components/ui/layout/spacer.md
+++ b/front/ui-docs/components/ui/layout/spacer.md
@@ -18,7 +18,7 @@ const size = ref(32)
 </style>
 
 ```ts
-import Spacer from "~/components/ui/Spacer.vue"
+import Spacer from "~/components/ui/Spacer.vue";
 ```
 
 # Spacer
@@ -97,7 +97,7 @@ const size = ref(1);
   <Input v-model="size" type="range" />
 
   <Alert yellow>A</Alert>
-  <Spacer :size="size" />
+  <Spacer :size="+size" />
   <Alert purple>B</Alert>
 </template>
 ```
@@ -108,51 +108,50 @@ const size = ref(1);
 </div>
 <div class="preview">
   <Alert yellow>A</Alert>
-  <Spacer :size="size" />
+  <Spacer :size="+size" />
   <Alert purple>B</Alert>
 </div>
 </Layout>
 
+Note the `+` before `size`. Some browsers will output a string for the `Input` value, and the JavaScript `+` prefix parses it into a number. Spacers need numeric `size` values because positive size values affect the dimensions of the element while negative sizes cause negative margins.
+
 ## Make the Spacer elastic (responsive)
 
 <Layout flex>
 
-```vue-html
-<Layout flex style="height:30em;">
-  <Input v-model="size"
-    type="range"
-    style="writing-mode: vertical-lr; height:100%"
-  />
+<div style="width: min-content;">
 
-  <Layout stack no-gap
-    :style="{ height: size + '%' }"
-  >
-    <Alert blue>A</Alert>
-    <Spacer grow title="grow" />
-    <Alert red>B</Alert>
-    <Alert green>C</Alert>
-    <Spacer shrink title="shrink" />
-    <Alert purple>D</Alert>
-    <Spacer grow shrink title="grow shrink" />
-    <Alert yellow>E</Alert>
-  </Layout>
+```vue-html
+<Layout stack no-gap
+  :style="{ height: size + '%' }"
+>
+  <Button min-content outline>A</Button>
+  <Spacer grow title="grow" />
+  <Button min-content outline>B</Button>
+  <Button min-content outline>C</Button>
+  <Spacer shrink title="shrink" />
+  <Button min-content outline>D</Button>
+  <Spacer grow shrink title="grow shrink" />
+  <Button min-content outline>E</Button>
 </Layout>
 ```
 
+</div>
+
 <div class="preview" style="flex-wrap:nowrap">
 <Layout flex style="height:30em">
 
 <Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>
 
 <Layout stack no-gap :style="{ height: size + '%'}">
-  <Alert blue>A</Alert>
+  <Button min-content outline>A</Button>
   <Spacer grow title="grow" />
-  <Alert red>B</Alert>
-  <Alert green>C</Alert>
+  <Button min-content outline>B</Button>
+  <Button min-content outline>C</Button>
   <Spacer shrink title="shrink" />
-  <Alert purple>D</Alert>
+  <Button min-content outline>D</Button>
   <Spacer grow shrink title="grow shrink" />
-  <Alert yellow>E</Alert>
+  <Button min-content outline>E</Button>
 </Layout>
 
 </Layout>
diff --git a/front/ui-docs/components/ui/link.md b/front/ui-docs/components/ui/link.md
index fcb6b905d..68c595ba0 100644
--- a/front/ui-docs/components/ui/link.md
+++ b/front/ui-docs/components/ui/link.md
@@ -9,6 +9,7 @@ import Alert from '~/components/ui/Alert.vue'
 ```ts
 import Link from "~/components/ui/Link.vue"
 ```
+
 # Link
 
 Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action.
@@ -122,26 +123,26 @@ _Only use on top of solid surfaces, else the text may be unreadable!_
 
 ## Set width and alignment
 
-See [Using width](/using-width) and [Using alignment](/using-alignment)
+See [Using width](/using-width) and [Using alignment](/using-alignment).
 
 <Layout flex>
 
 ```vue-html
-    <Link solid primary min-content to="/">min-content</Link>
-    <Link solid primary tiny to="/">tiny</Link>
-    <Link solid primary buttonWidth to="/">buttonWidth</Link>
-    <Link solid primary small to="/">small</Link>
-    <Link solid primary medium to="/">medium</Link>
-    <Link solid primary full to="/">full</Link>
-    <Link solid primary auto to="/">auto</Link>
-    <hr />
-    <Link solid primary alignSelf="start" to="/">🐌</Link>
-    <Link solid primary alignSelf="center" to="/">🐌</Link>
-    <Link solid primary alignSelf="end" to="/">🐌</Link>
-    <hr />
-    <Link solid primary alignText="left" to="/">🐌</Link>
-    <Link solid primary alignText="center" to="/">🐌</Link>
-    <Link solid primary alignText="right" to="/">🐌</Link>
+  <Link solid primary min-content to="/">min-content</Link>
+  <Link solid primary tiny to="/">tiny</Link>
+  <Link solid primary buttonWidth to="/">buttonWidth</Link>
+  <Link solid primary small to="/">small</Link>
+  <Link solid primary medium to="/">medium</Link>
+  <Link solid primary full to="/">full</Link>
+  <Link solid primary auto to="/">auto</Link>
+  <hr />
+  <Link solid primary alignSelf="start" to="/">🐌</Link>
+  <Link solid primary alignSelf="center" to="/">🐌</Link>
+  <Link solid primary alignSelf="end" to="/">🐌</Link>
+  <hr />
+  <Link solid primary alignText="left" to="/">🐌</Link>
+  <Link solid primary alignText="center" to="/">🐌</Link>
+  <Link solid primary alignText="right" to="/">🐌</Link>
 ```
 
   <Layout class="preview" stack style="--gap:4px;">