Switch to cleanUrls

Author: skirtles-code

docs/.vitepress/config.mjs

@@ -2,6 +2,7 @@ import { defineConfigWithTheme } from 'vitepress'
 
 export default defineConfigWithTheme({
   outDir: '../dist',
+  cleanUrls: true,
   base: '/vue-examples',
   title: 'Vue Examples',
   lang: 'en-US',
@@ -29,47 +30,47 @@ export default defineConfigWithTheme({
         items: [
           {
             text: 'Checkbox',
-            link: '/components/checkbox.html',
+            link: '/components/checkbox',
           }, {
             text: 'Radio',
-            link: '/components/radio.html',
+            link: '/components/radio',
           }, {
             text: 'Toggle Switch',
-            link: '/components/toggle-switch.html',
+            link: '/components/toggle-switch',
           }, {
             text: 'Radio Group',
-            link: '/components/radio-group.html'
+            link: '/components/radio-group'
           }, {
             text: 'Accordion',
-            link: '/components/accordion.html',
+            link: '/components/accordion',
           }, {
             text: 'Tabs',
-            link: '/components/tabs.html',
+            link: '/components/tabs',
           }
         ]
       }, {
         text: 'Patterns',
         items: [
           {
             text: 'Computed with v-model',
-            link: '/patterns/computed-v-model.html'
+            link: '/patterns/computed-v-model'
           }, {
             text: 'Global Properties',
-            link: '/patterns/global-properties.html'
+            link: '/patterns/global-properties'
           }, {
             text: 'Coupled Components with provide/inject',
-            link: '/patterns/coupled-components-with-provide-inject.html'
+            link: '/patterns/coupled-components-with-provide-inject'
           }
         ]
       }, {
         text: 'Guides',
         items: [
           {
             text: 'Working with Image Assets',
-            link: '/guides/working-with-image-assets.html'
+            link: '/guides/working-with-image-assets'
           }, {
             text: 'Understanding the Vue Source Code',
-            link: '/advanced/understanding-the-vue-source-code.html'
+            link: '/advanced/understanding-the-vue-source-code'
           }
         ]
       }, {
@@ -78,16 +79,16 @@ export default defineConfigWithTheme({
         items: [
           {
             text: 'Tic-tac-toe',
-            link: '/exercises/tic-tac-toe.html'
+            link: '/exercises/tic-tac-toe'
           }, {
             text: 'Quiz',
-            link: '/exercises/quiz.html'
+            link: '/exercises/quiz'
           }, {
             text: 'Minesweeper',
-            link: '/exercises/minesweeper.html'
+            link: '/exercises/minesweeper'
           }, {
             text: 'Numbers Game',
-            link: '/exercises/numbers-game.html'
+            link: '/exercises/numbers-game'
           }
         ]
       }

docs/components/accordion.md

@@ -31,7 +31,7 @@ The corresponding `accordion-panel.vue` is:
 
 ## Vue Patterns
 
-See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject.html).
+See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject).
 
 <!--
 ## Missing Functionality

docs/components/checkbox.md

@@ -92,7 +92,7 @@ The wrapper `<div>` will receive any extra attributes specified on the parent, i
 
 ## Related Components
 
-An individual checkbox represents a choice between two values. This is effectively the same as a [Toggle Switch](./toggle-switch.html) (left/right) or a Toggle Button (pressed/unpressed).
+An individual checkbox represents a choice between two values. This is effectively the same as a [Toggle Switch](./toggle-switch) (left/right) or a Toggle Button (pressed/unpressed).
 
 Multiple checkboxes can be used to model multiple selections, often represented using an `Array` or `Set` containing the selected values. This can also be represented using a list, like a `<select multiple>`. Some dropdowns also support multiple selections, often in combination with a tag/chip/pill component to show the selected values when the list is collapsed.
 

docs/components/radio-group.md

@@ -54,11 +54,11 @@ The `radio.vue` here is specially written to use `inject` instead of a `modelVal
 
 <<< @/components/radio-group/radio.vue
 
-Support for direct use of `v-model` with the `radio` component has been omitted from this example. That technique is shown in the [Radio example](./radio.html). The two can be combined by using a default value with `inject` and then checking whether that value is set.
+Support for direct use of `v-model` with the `radio` component has been omitted from this example. That technique is shown in the [Radio example](./radio). The two can be combined by using a default value with `inject` and then checking whether that value is set.
 
 ## Vue Patterns
 
-See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject.html)
+See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject)
 
 Apart from the naming choices, there's nothing in this `radio-group.vue` implementation that assumes the children are radio buttons. It could be made to work with checkboxes, toggle switches or any similar components that involve picking from a list of options.
 

docs/components/tabs.md

@@ -31,7 +31,7 @@ The code for `tabs.vue` looks long, but a lot of it is CSS:
 
 ## Vue Patterns
 
-See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject.html)
+See [Coupled Components with `provide`/`inject`](../patterns/coupled-components-with-provide-inject)
 
 <!--
 ## Missing Functionality

docs/components/toggle-switch.md

@@ -48,7 +48,7 @@ The implementation includes a lot of CSS, but it is otherwise very similar to a
 
 ## Related Components
 
-An individual toggle switch represents a choice between two values. This is effectively the same as a [Checkbox](./checkbox.html) (checked/unchecked) or a Toggle Button (pressed/unpressed).
+An individual toggle switch represents a choice between two values. This is effectively the same as a [Checkbox](./checkbox) (checked/unchecked) or a Toggle Button (pressed/unpressed).
 
 Multiple toggle switches can be used to model multiple selections, often represented using an `Array` or `Set` containing the selected values. This can also be represented using a list, like a `<select multiple>`. Some dropdowns also support multiple selections, often in combination with a tag/chip/pill component to show the selected values when the list is collapsed.
 

docs/exercises/index.md

@@ -7,10 +7,10 @@ import NumbersGame from './numbers-game.vue'
 
 # Exercises
 
-* [Tic-tac-toe](./tic-tac-toe.html)
-* [Quiz](./quiz.html)
-* [Minesweeper](./minesweeper.html)
-* [Numbers Game](./numbers-game.html)
+* [Tic-tac-toe](./tic-tac-toe)
+* [Quiz](./quiz)
+* [Minesweeper](./minesweeper)
+* [Numbers Game](./numbers-game)
 
 These exercises are intended for programmers new to Vue to practice their skills. You should read through the [official Vue documentation](https://vuejs.org/) first. Keep the documentation open while working on these exercises, as you'll likely need to look things up as you go.
 

docs/index.md

@@ -6,7 +6,7 @@ if (typeof window !== 'undefined') {
 
   if (['#component-libraries', '#component-libraries-notes'].includes(hash)) {
     onMounted(() => {
-      window.location = './component-libraries.html' + hash
+      window.location = './component-libraries' + hash
     })
   }
 }
@@ -31,23 +31,23 @@ In pretty much all cases, the styling and accessibility of these components is n
 
 ## Example components
 
-* [Checkbox](./components/checkbox.html)
-* [Radio](./components/radio.html)
-* [Toggle Switch](./components/toggle-switch.html)
-* [Radio Group](./components/radio-group.html)
-* [Accordion](./components/accordion.html)
-* [Tabs](./components/tabs.html)
+* [Checkbox](./components/checkbox)
+* [Radio](./components/radio)
+* [Toggle Switch](./components/toggle-switch)
+* [Radio Group](./components/radio-group)
+* [Accordion](./components/accordion)
+* [Tabs](./components/tabs)
 
 ## Patterns
 
-* [Computed with v-model](./patterns/computed-v-model.html)
-* [Global Properties](./patterns/global-properties.html)
-* [Coupled Components with `provide`/`inject`](./patterns/coupled-components-with-provide-inject.html)
+* [Computed with v-model](./patterns/computed-v-model)
+* [Global Properties](./patterns/global-properties)
+* [Coupled Components with `provide`/`inject`](./patterns/coupled-components-with-provide-inject)
 
 ## Guides
 
-* [Working with Image Assets](./guides/working-with-image-assets.html)
-* [Understanding the Vue Source Code](./advanced/understanding-the-vue-source-code.html)
+* [Working with Image Assets](./guides/working-with-image-assets)
+* [Understanding the Vue Source Code](./advanced/understanding-the-vue-source-code)
 
 ## Exercises
 

docs/patterns/computed-v-model.md

@@ -11,7 +11,7 @@ The principle of one-way data flow, with 'props down, events up', is just an ext
 
 This causes problems when working with `v-model`, which attempts to modify the value directly. One way we can address this is by using `computed()` with `get` and `set`.
 
-There are more complete examples for [Checkbox](../components/checkbox.html) and [Radio](../components/radio.html) components, but to reduce it down to the essentials with an `<input>`:
+There are more complete examples for [Checkbox](../components/checkbox) and [Radio](../components/radio) components, but to reduce it down to the essentials with an `<input>`:
 
 ```vue-html
 <input v-model="inputValue">

docs/patterns/coupled-components-with-provide-inject.md

@@ -6,9 +6,9 @@ It's common to hear `provide` and `inject` described as 'long-range props' or 'd
 
 The term 'coupling' is often used as a criticism of a design, but there are many cases where tightly coupled components make sense. These are cases where a particular component needs to be a child (or deeper descendant) of another, specific component. A few examples:
 
-1. An [accordion](../components/accordion.html) is often implemented using a parent container and expandable child panels.
-2. A [tabs](../components/tabs.html) component may be broken down into several smaller components, e.g. for the tab buttons and the content containers. These all need to communicate to ensure the correct thing is showing at any given time.
-3. A [radio group](../components/radio-group.html) or checkbox group, for communicating with the radio/checkbox children.
+1. An [accordion](../components/accordion) is often implemented using a parent container and expandable child panels.
+2. A [tabs](../components/tabs) component may be broken down into several smaller components, e.g. for the tab buttons and the content containers. These all need to communicate to ensure the correct thing is showing at any given time.
+3. A [radio group](../components/radio-group) or checkbox group, for communicating with the radio/checkbox children.
 4. A map component will need to communicate with marker components.
 5. A table component may need to communicate with headers, rows and cells.
 
@@ -54,13 +54,13 @@ onUnmounted(unregister)
 
 The usage pattern here is very similar to using a composable. The `register` function behaves much like a `useX` function, returning an object that contains everything the caller might need.
 
-For more complete examples of this pattern, see the [accordion](../components/accordion.html) and [tabs](../components/tabs.html) components.
+For more complete examples of this pattern, see the [accordion](../components/accordion) and [tabs](../components/tabs) components.
 
-While this registration pattern can be useful, it isn't the only way to use `provide` and `inject` for communicating between tightly coupled components. Data and functions can be passed down to emulate props and events respectively. The [Radio Group example](../components/radio-group.html) does something similar.
+While this registration pattern can be useful, it isn't the only way to use `provide` and `inject` for communicating between tightly coupled components. Data and functions can be passed down to emulate props and events respectively. The [Radio Group example](../components/radio-group) does something similar.
 
 ## Alternatives
 
-Sometimes it's possible to implement this type of tight coupling using `render` functions and direct manipulation of the VNodes. That requires digging into the internals of Vue, which can lead to some unpleasant surprises if you aren't sure what you're doing. I created a library called [`@skirtle/vue-vnode-utils`](https://skirtles-code.github.io/vue-vnode-utils/) that makes this kind of VNode manipulation a little easier. There's an [accordion example](https://skirtles-code.github.io/vue-vnode-utils/examples.html#adding-component-v-model) in that library's docs that is functionally very similar to the one mentioned above.
+Sometimes it's possible to implement this type of tight coupling using `render` functions and direct manipulation of the VNodes. That requires digging into the internals of Vue, which can lead to some unpleasant surprises if you aren't sure what you're doing. I created a library called [`@skirtle/vue-vnode-utils`](https://skirtles-code.github.io/vue-vnode-utils/) that makes this kind of VNode manipulation a little easier. There's an [accordion example](https://skirtles-code.github.io/vue-vnode-utils/examples#adding-component-v-model) in that library's docs that is functionally very similar to the one mentioned above.
 
 Another alternative is to use scoped slots, though they require the consuming template to get involved.