Updating to latest version of main, resolving merge conflicts

minvws · Aug 21, 2024 · bd94ff8 · bd94ff8
2 parents 1885966 + 63bd451
commit bd94ff8
Show file tree

Hide file tree

Showing 531 changed files with 74,677 additions and 5,471 deletions.
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -17,9 +17,7 @@ runs:
         registry-url: ${{ inputs.registry-url }}
 
     - name: Setup pnpm
-      uses: pnpm/action-setup@v3
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
 
     - name: Get pnpm store directory
       shell: bash

diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -30,19 +30,8 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
-      - name: Setup pnpm
-        uses: pnpm/[email protected]
-        with:
-          version: 8
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --ignore-scripts
+      - name: Setup
+        uses: ./.github/actions/setup
 
       - name: Build the documentation
         working-directory: docs

diff --git a/docs/package.json b/docs/package.json
@@ -14,20 +14,20 @@
   "dependencies": {
     "@minvws/manon": "workspace:*",
     "@minvws/manon-themes": "workspace:*",
-    "highlight.js": "^11.9.0"
+    "highlight.js": "^11.10.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
-    "rimraf": "^5.0.5",
-    "sass": "^1.77.1",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.9",
+    "@sveltejs/adapter-static": "^3.0.2",
+    "@sveltejs/kit": "^2.5.24",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "rimraf": "^6.0.1",
+    "sass": "^1.77.8",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
     "svelte-preprocess-import-assets": "^1.1.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
   }
 }
diff --git a/docs/src/lib/BreadcrumbNav.svelte b/docs/src/lib/BreadcrumbNav.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { base } from "$app/paths";
   import { page } from "$app/stores";
   import { getBreadcrumbs } from "$lib/breadcrumbs.js";
   import NavLink from "./NavLink.svelte";
@@ -10,7 +11,7 @@
     <div>
       <ul>
         {#each breadcrumbs as crumb}
-          <li><NavLink href={crumb.route}>{crumb.name}</NavLink></li>
+          <li><NavLink href="{base}{crumb.route}">{crumb.name}</NavLink></li>
         {/each}
       </ul>
     </div>

diff --git a/docs/src/lib/Code.svelte b/docs/src/lib/Code.svelte
@@ -24,9 +24,6 @@
   $: highlighted = hljs.highlight(trimmed, { language }).value;
 </script>
 
-{@html `<!--
-${trimmed}
--->`}
 <pre><code>{@html highlighted}</code></pre>
 
 <style>

diff --git a/docs/src/routes/(docs)/components/accordion/+page.svelte b/docs/src/routes/(docs)/components/accordion/+page.svelte
@@ -347,20 +347,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">
-            Componenten gebruiken en styling toevoegen
-          </a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>accordion.scss</code></li>
-          <li><code>accordion.js</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>accordion-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/accordion";
+`}
+        />
       </section>
 
       <section id="variables">

diff --git a/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte b/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
@@ -83,18 +83,20 @@
       <section id="requirements">
         <h2>Bijbehorende bestanden</h2>
         <p>
-          Voor meer informatie over het importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>button/button-cta.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>button/button-cta-variables-variables.scss</code></li>
-        </ul>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-cta";
+      `}
+        />
       </section>
 
       <section id="related">

diff --git a/docs/src/routes/(docs)/components/button-destructive/+page.svelte b/docs/src/routes/(docs)/components/button-destructive/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Destructieve knop</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -82,6 +92,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-destructive";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>

diff --git a/docs/src/routes/(docs)/components/button-dropdown/+page.svelte b/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
@@ -3,17 +3,27 @@
 </script>
 
 <script>
+  import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import { initCollapsible } from "$lib/manon.js";
   onMount(initCollapsible);
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Dropdown button</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -129,6 +139,25 @@ class="collapsible">
 `}
         />
       </section>
+
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/dropdown";
+      `}
+        />
+      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/button-ghost/+page.svelte b/docs/src/routes/(docs)/components/button-ghost/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Ghost button</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -82,6 +92,24 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-ghost";
+      `}
+        />
+      </section>
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>

diff --git a/docs/src/routes/(docs)/components/button-icon-only/+page.svelte b/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
@@ -5,13 +5,22 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Icoonknoppen zonder achtergrond</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -84,6 +93,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-icon-only";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>