🐛 Fix shareable URL 404 (#119)

pages/_.vue

@@ -0,0 +1,29 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    /**
+     * Parse the route params from the path and commit to store.
+     * @todo Add param validation and error page redirects.
+     */
+    middleware({ params, store, redirect }) {
+        let { pathMatch } = params
+        let re = /mode\/([a-z]+)\/start\/([a-z0-9]+)\/end\/([a-z0-9]+)\/angle\/(\d+)/g
+        let [found] = [...pathMatch.matchAll(re)]
+
+        store.dispatch('changeMode', found[1])
+        store.dispatch('changeColor', { color: `#${found[2]}`, stop: 0 })
+        store.dispatch('changeColor', { color: `#${found[3]}`, stop: 1 })
+        store.dispatch('rotate', found[4])
+    },
+
+    /**
+     * Redirect to main page without changing browser history.
+     */
+    created: function() {
+        this.$router.replace('/')
+    },
+}
+</script>

pages/index.vue

@@ -144,7 +144,7 @@ export default {
         },
 
         changeColorStop(color, stop) {
-            this.$store.commit('changeColor', { color, stop })
+            this.$store.dispatch('changeColor', { color, stop })
         },
     },
 }

store/index.js

@@ -17,15 +17,15 @@ export const state = () => ({
 })
 
 export const mutations = {
-    rotate(state, direction) {
+    CHANGE_ANGLE(state, direction) {
         state.direction = direction
     },
 
     CHANGE_MODE(state, mode) {
         state.colorMode = mode
     },
 
-    changeColor(state, { color, stop }) {
+    CHANGE_STOP(state, { color, stop }) {
         state.colorStops[stop].color.hex = color
     },
 }
@@ -39,6 +39,10 @@ export const actions = {
     },
 
     rotate({ commit }, direction) {
-        commit('rotate', direction)
+        commit('CHANGE_ANGLE', Number.parseInt(direction))
+    },
+
+    changeColor({ commit }, { color, stop }) {
+        commit('CHANGE_STOP', { color, stop })
     },
 }