LuckPerms/LuckPermsWeb

Make URL case-insensitive

Andre601 opened this issue · 2 comments

Right now does the wiki care a lot about upper and lowercase in the URL.
If I would for example head towards https://luckperms.net/wiki/home would it lead me to a 404 page because home needs to be Home.

If doable should the wiki be case-insensitive in terms of the URLs or at the very least try to update the URL to the proper version (in my example turn home into Home.

I think what we could do here is maybe adding a list of all the wiki files using fs with webpack like here.
Then (if no page is found, so if it is home) we could loop trough the file/page names and see if the capitalization is different and then redirect to the correct route.
These are my changes, maybe that helps.

Changes
diff --git a/src/components/Wiki/Article.vue b/src/components/Wiki/Article.vue
index 5c3cee5..f7ff152 100644
--- a/src/components/Wiki/Article.vue
+++ b/src/components/Wiki/Article.vue
@@ -43,6 +43,9 @@ export default {
     title() {
       return this.route.split('-').join(' ');
     },
+    wikiFiles() {
+      return Object.values(wikiFiles);
+    },
   },
   created() {
     if (this.route) {
@@ -56,6 +59,17 @@ export default {
         this.article = require(`@/wiki/pages/${this.route}.md`).default;
       } catch (e) {
         this.article = null;
+
+        let route = this.route;
+        this.wikiFiles.some(file => {
+          if (route.toLowerCase() === file.toLowerCase()) {
+            route = file;
+            return true; // Stop loop;
+          }
+        });
+        console.log(route, this.route);
+        if (route !== this.route) this.$router.push(`/wiki/${route}`);
+
         return;
       }
 
diff --git a/vue.config.js b/vue.config.js
index 1f310a6..4c0b3c1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,6 +2,9 @@ const { gitDescribeSync } = require('git-describe');
 const hljs = require('highlight.js/lib/core');
 const config = require('./config.json');
 
+const { DefinePlugin } = require('webpack');
+const fs = require('fs');
+
 process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
 
 const hljsLanguages = [
@@ -20,6 +23,12 @@ function registerHljsLanguages() {
   }
 }
 
+function getWikiFiles() {
+  const files = fs.readdirSync('./src/wiki/pages');
+  console.log(files.map(file => `"${file.replace('.md', '')}"`));
+  return files.map(file => `"${file.replace('.md', '')}"`);
+}
+
 module.exports = {
   publicPath: config.base,
   css: {
@@ -58,5 +67,10 @@ module.exports = {
           [require('markdown-it-highlightjs'), { hljs }],
         ],
       });
+      webpackConfig
+        .plugin('add-wiki-pages')
+        .use(DefinePlugin, [{
+          'wikiFiles': getWikiFiles(),
+        }]);
   },
 };

If that works, then it's good.