Merge pull request #356 from rejas/linking

Fix internal link rewriting

Author: sdetweil

.vitepress/theme/index.ts

@@ -7,6 +7,14 @@ import "./style.css";
 import BackToTopButton from "@miletorix/vitepress-back-to-top-button";
 import "@miletorix/vitepress-back-to-top-button/style.css";
 
+function rewrite(path: string): string | null {
+  // Example: VuePress legacy prefix
+  if (path.startsWith("/development/"))
+    return path.replace("/development/", "/module-development/");
+
+  return null;
+}
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -16,5 +24,13 @@ export default {
   },
   enhanceApp({ app, router, siteData }) {
     BackToTopButton(app);
+    router.onBeforeRouteChange = (to) => {
+      const next = rewrite(to);
+      if (next && next !== to) {
+        // Replace instead of push: avoids back-button loops
+        router.go(next);
+        return false; // cancel original navigation
+      }
+    };
   },
 } satisfies Theme;

configuration/introduction.md

@@ -21,11 +21,11 @@
    };
    ```
 
-   See [module configuration](/modules/configuration.md) for more information
-   and examples.
+   See [module configuration](/modules/configuration) for more information and
+   examples.
 
 4. Run your magic mirror. Refer back to
-   [installation](/getting-started/installation.md) if you're not sure how to do
+   [installation](/getting-started/installation) if you're not sure how to do
    so.
 
 ## More useful configuration of your MagicMirror
@@ -56,13 +56,13 @@ The following properties can be configured, place them above the modules item:
 | `language`         | The language of the interface. (Note: Not all elements will be localized.) Possible values are `en`, `nl`, `ru`, `fr`, etc. for the full list see: [List of ISO 639-1 codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)                                                                                                                                                                                                                                                                                                                       | `en`                                       |
 | `timeFormat`       | The form of time notation that will be used. Possible values are `12` or `24`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 24                                         |
 | `units`            | The units that will be used in the default weather modules. Possible values are `metric` or `imperial`.                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `metric`                                   |
-| `electronOptions`  | An optional array of Electron (browser) options. This allows configuration of e.g. the browser screen size and position (example: `electronOptions: { fullscreen: false, width: 800, height: 600 }`). Kiosk mode can be enabled by setting `kiosk: true`, `autoHideMenuBar: false` and `fullscreen: false`. More options can be found [here](https://github.com/electron/electron/blob/master/docs/api/browser-window.md). This will most likely be used in advanced installations, below.                                                                | []                                         |
+| `electronOptions`  | An optional array of Electron (browser) options. This allows configuration of e.g. the browser screen size and position (example: `electronOptions: { fullscreen: false, width: 800, height: 600 }`). Kiosk mode can be enabled by setting `kiosk: true`, `autoHideMenuBar: false` and `fullscreen: false`. More options can be found [here](https://github.com/electron/electron/blob/master/docs/api/browser-window). This will most likely be used in advanced installations, below.                                                                   | []                                         |
 | `electronSwitches` | An optional array of Electron switches. This allows configuration of electron app itself. <br> This properties will not affect the `serveronly` mode. Usually normal `MM` users don't need this property, but if you are a hard-core hacker, you might need this to handle Electron itself over `MagicMirror` provides. More options can be found [here](https://www.electronjs.org/docs/latest/api/command-line-switches) (Not all available switches are described there.)<br>example:`electronSwitches:["enable-transparent-visuals", "disable-gpu"];` | []                                         |
 | `customCss`        | The path of the `custom.css` stylesheet. The default is `css/custom.css`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `css/custom.css`                           |
-| `watchTargets`     | An optional array of file paths to monitor when using `node --run server:watch`. When any of these files change, the server automatically restarts and connected browsers reload. Particularly useful when frequently modifying `config.js`, `custom.css`, or module files during development or setup. Example: `watchTargets: ["config/config.js", "css/custom.css", "modules/MMM-MyModule/MMM-MyModule.js"]`. See [Development Mode](/core-development/debugging.md#watch-mode-with-auto-reload) for more details.                                     | `undefined`                                |
+| `watchTargets`     | An optional array of file paths to monitor when using `node --run server:watch`. When any of these files change, the server automatically restarts and connected browsers reload. Particularly useful when frequently modifying `config.js`, `custom.css`, or module files during development or setup. Example: `watchTargets: ["config/config.js", "css/custom.css", "modules/MMM-MyModule/MMM-MyModule.js"]`. See [Development Mode](/core-development/debugging#watch-mode-with-auto-reload) for more details.                                        | `undefined`                                |
 
 After the above options, you will then add modules. See
-[module configuration](/modules/configuration.md) for more information.
+[module configuration](/modules/configuration) for more information.
 
 ### Advanced configuration and frequently asked how to configure examples
 

core-development/introduction.md

@@ -9,7 +9,7 @@ This documentation describes core MagicMirror² development.
 ## General
 
 MagicMirror² is a community-driven development effort, and
-[contributions](/about/contributing.md) are welcome!
+[contributions](/about/contributing) are welcome!
 
 In general, new features and bug fixes should be tracked against an
 [issue in the MagicMirror repo](https://github.com/MagicMirrorOrg/MagicMirror/issues).

enhanceApp.js

@@ -143,7 +143,7 @@ controlled by settings inside the `config/config.js` file by interface and ip:
 - Change `ipWhitelist` to the list of IP's you want to allow to connect
 
 Sample Configuration below
-[and link to full configuration options](/configuration/introduction.md)
+[and link to full configuration options](/configuration/introduction)
 
 ```js
 let config = {

getting-started/installation.md

@@ -9,7 +9,7 @@ Raspberry Pi.
 _Electron_, the app wrapper around MagicMirror², only supports the Raspberry Pi
 2, 3, 4 & 5. The Raspberry Pi 0/1 is currently **not** supported. If you want to
 run this on a Raspberry Pi 1, use the
-[server only](/getting-started/installation.md#server-only) feature and setup a
+[server only](/getting-started/installation#server-only) feature and setup a
 fullscreen browser yourself. (Yes, people have managed to run MM² also on a Pi0,
 so if you insist, search in the forums.)
 
@@ -20,7 +20,7 @@ You will need to install the latest full version of
 Raspbian).
 
 If you want to run the software on other Operating Systems, take a look at
-[this section](/getting-started/installation.md#alternative-installation-methods)
+[this section](/getting-started/installation#alternative-installation-methods)
 
 ::: warning NOTE You **do** need a desktop environment to run Electron!
 

getting-started/requirements.md

@@ -206,7 +206,7 @@ system calls the getDom method. This method should therefore return a dom
 object.
 
 Read more about Rendering Components
-[in the Rendering Component documentation](/module-development/rendering.md).
+[in the Rendering Component documentation](/module-development/rendering).
 
 **Example:**
 
@@ -232,7 +232,7 @@ An example of a default module that uses this method is
 [newsfeed](https://github.com/MagicMirrorOrg/MagicMirror/blob/master/modules/default/newsfeed/newsfeed.js).
 
 Read more about Rendering Components
-[in the Rendering Component documentation](/module-development/rendering.md).
+[in the Rendering Component documentation](/module-development/rendering).
 
 **Example:**
 
@@ -283,7 +283,7 @@ getTemplateData: function() {
 Whenever the MagicMirror needs to update the information on screen (because it
 starts, or because your module asked a refresh using `this.updateDom()`), the
 system calls the getHeader method to retrieve the module's header. This method
-should therefor return a string. If this method is not subclassed, this function
+should therefore return a string. If this method is not subclassed, this function
 will return the user's configured header.
 
 If you want to use the original user's configured header, reference
@@ -394,9 +394,9 @@ the content update will be animated, but only if the content will really change.
 
 Note that the rendering of the updated dom on the screen will happen
 asynchronously. You can listen for the
-[`DOM_OBJECTS_UPDATED` notification](/module-development/notifications.md) to
-know when the rendering is complete and the new dom is safe to interact with.
-This notification only fires if the content will really change.
+[`DOM_OBJECTS_UPDATED` notification](/module-development/notifications) to know
+when the rendering is complete and the new dom is safe to interact with. This
+notification only fires if the content will really change.
 
 **Example:**
 
@@ -422,10 +422,10 @@ module needs to be updated
 
 **animate Object**
 
-| animate | type   | description                                                                                                                                                |
-| ------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| in      | String | Animate name when module will be shown (after dom update), it will use an `animateIn` type name (see [Animation Guide](/modules/animate.md#animatein))     |
-| out     | String | Animate name when module will be hidden (before dom update), it will use an `animateOut` type name (see [Animation Guide](/modules/animate.md#animateout)) |
+| animate | type   | description                                                                                                                                             |
+| ------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| in      | String | Animate name when module will be shown (after dom update), it will use an `animateIn` type name (see [Animation Guide](/modules/animate#animatein))     |
+| out     | String | Animate name when module will be hidden (before dom update), it will use an `animateOut` type name (see [Animation Guide](/modules/animate#animateout)) |
 
 **Example:**
 
@@ -499,7 +499,7 @@ Possible configurable options:
 
 - `animate` - String - (_Introduced in version: 2.25.0._) Hide the module with a
   special animate. It will use an `animateOut` type name. All animations name
-  are available in [Animation Guide](/modules/animate.md#animateout)
+  are available in [Animation Guide](/modules/animate#animateout)
 
 ::: warning Notes:
 
@@ -542,7 +542,7 @@ Possible configurable options:
   object, if specified in the options (_Introduced in version: 2.15.0_).
 - `animate` - String - (_Introduced in version: 2.25.0._) Show the module with a
   special animation. It will use an `animateIn` type name. All animations name
-  are available in [Animation Guide](/modules/animate.md#animatein)
+  are available in [Animation Guide](/modules/animate#animatein)
 
 ::: warning Notes:
 

module-development/core-module-file.md

@@ -20,7 +20,7 @@ for more info.
 
 **Note:** This method returns an empty array if not all modules are started yet.
 Wait for the `ALL_MODULES_STARTED`
-[notification](/module-development/core-module-file.md#notificationreceived-notification-payload-sender).
+[notification](/module-development/core-module-file#notificationreceived-notification-payload-sender).
 
 #### `.withClass(classnames)`
 

module-development/helper-methods.md

@@ -23,7 +23,7 @@ information in your README file.**
   it free?)
 - **Do not use `new Date()` for the current timestamp, instead prefer
   `new Date(Date.now())` as it can be more
-  [easily overridden for debugging](/core-development/debugging.md#date)**.
+  [easily overridden for debugging](/core-development/debugging#date)**.
 
 Surely this also help you get better recognition and feedback for your work.
 

module-development/introduction.md

@@ -130,7 +130,7 @@ When this method is called, it has 2 arguments:
 
 **Note:** The socket connection is established as soon as the module sends its
 first message using
-[sendSocketNotification](/module-development/core-module-file.md#this-sendsocketnotification-notification-payload).
+[sendSocketNotification](/module-development/core-module-file#this-sendsocketnotification-notification-payload).
 
 **Example:**