Switched from Vue.js to Alpine.js

2025-08-22 13:43:15 +02:00 · 2021-06-15 18:48:03 -07:00
parent f1330a3051
commit 70d6bb12f7
18 changed files with 164 additions and 795 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,7 +5,6 @@ module.exports = {
    },
    'extends': [
        'eslint:recommended',
-        'plugin:vue/essential'
    ],
    'parserOptions': {
        'ecmaVersion': 12,
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -1,51 +1,15 @@
-import Vue from 'vue';
-import FileInfoModal from './components/file-info-modal.vue';
+import Alpine from 'alpinejs';
 import hljs from 'highlight.js';

-new Vue({
-    el: '#app',
-    components: { FileInfoModal },
-    data: () => ({
-        loading: true,
-        theme: 'light',
-    }),
-    computed: {
-        darkMode() {
-            return this.theme === 'dark';
-        },
-        lightMode() {
-            return this.theme === 'light';
-        }
-    },
-    methods: {
-        showFileInfo(filePath) {
-            this.$refs.fileInfoModal.show(filePath);
-        },
-        toggleTheme() {
-            this.theme = this.lightMode ? 'dark' : 'light';
-        },
-    },
-    created: function () {
-        this.theme = localStorage.theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
-    },
-    mounted: function () {
-        window.addEventListener('keyup', e => e.key === '/' && this.$refs.searchInput.focus());
+// Alpine.js components
+import Application from './components/application.js';
+import FileInfoModal from './components/file-info-modal.js';

-        window.addEventListener('scroll', function () {
-            if (window.scrollY > 10) {
-                this.$refs.scrollToTop.classList.remove('hidden');
-            } else {
-                this.$refs.scrollToTop.classList.add('hidden');
-            }
-        }.bind(this));
+Alpine.data('application', Application);
+Alpine.data('file-info-modal', FileInfoModal);

-        this.loading = false;
-    },
-    watch: {
-        theme(value) {
-            localStorage.setItem('theme', value);
-        }
-    }
-});
+// Run Alpine.js
+Alpine.start();

+// Highlight.js
 hljs.highlightAll();
--- a/app/resources/js/components/application.js
+++ b/app/resources/js/components/application.js
@@ -0,0 +1,12 @@
+export default () => ({
+    theme: 'light',
+    loading: true,
+
+    init() {
+        this.theme = localStorage.theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+    },
+
+    toggleTheme() {
+        this.theme = this.theme == 'light' ? 'dark' : 'light';
+    },
+});
--- a/app/resources/js/components/file-info-modal.js
+++ b/app/resources/js/components/file-info-modal.js
@@ -0,0 +1,40 @@
+import axios from 'axios';
+
+export default () => ({
+    error: null,
+    filePath: 'file.info',
+    hashes: {
+        md5: '••••••••••••••••••••••••••••••••',
+        sha1: '••••••••••••••••••••••••••••••••••••••••',
+        sha256: '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••'
+    },
+    loading: true,
+    visible: false,
+
+    get title() {
+        return this.filePath.split('/').pop();
+    },
+
+    async show(filePath) {
+        this.filePath = filePath;
+        this.visible = true;
+
+        try {
+            var response = await axios.get('?info=' + filePath);
+        } catch (error) {
+            this.error = error.response.request.statusText;
+        }
+
+        this.hashes = response.data.hashes;
+        this.loading = false;
+    },
+
+    hide() {
+        this.visible = false;
+
+        this.$nextTick(() => {
+            this.loading = true;
+            this.error = null;
+        });
+    }
+});
--- a/app/resources/js/components/file-info-modal.vue
+++ b/app/resources/js/components/file-info-modal.vue
@@ -1,92 +0,0 @@
-<template>
-    <div id="file-info-modal" v-bind:class="this.styles" v-on:click.self="hide()"
-        class="fixed inset-0 flex justify-center items-center bg-gray-800 bg-opacity-50 p-4 z-50 dark:bg-gray-600 dark:bg-opacity-50"
-    >
-        <div id="file-info-dialogue" v-show="! loading"
-            class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white"
-        >
-            <header class="flex justify-between items-center bg-blue-600 p-4 dark:bg-purple-700">
-                <i class="fas fa-info-circle fa-lg text-white"></i>
-
-                <div class="items-center text-xl text-white font-mono mx-4">
-                    {{ title }}
-                </div>
-
-                <button v-on:click="hide()"
-                    class="flex justify-center items-center rounded-full w-6 h-6 text-gray-900 text-opacity-50 text-sm hover:bg-red-700 hover:text-white hover:shadow"
-                >
-                    <i class="fas fa-times"></i>
-                </button>
-            </header>
-
-            <content class="flex justify-center items-center p-4">
-                <div class="overflow-x-auto">
-                    <p class="font-thin text-2xl text-gray-600 m-4" v-if="error">
-                        {{ error }}
-                    </p>
-
-                    <table class="table-auto" v-else>
-                        <tbody>
-                            <tr v-for="(hash, title) in this.hashes" v-bind:key="hash">
-                                <td class="border font-bold px-4 py-2">{{ title }}</td>
-                                <td class="border font-mono px-4 py-2">{{ hash }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </content>
-        </div>
-
-        <i class="fas fa-spinner fa-pulse fa-5x text-white" v-show="loading"></i>
-    </div>
-</template>
-
-<script>
-import axios from 'axios';
-
-export default {
-    data: function () {
-        return {
-            error: null,
-            filePath: 'file-info.txt',
-            hashes: {
-                'md5': '••••••••••••••••••••••••••••••••',
-                'sha1': '••••••••••••••••••••••••••••••••••••••••',
-                'sha256': '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••'
-            },
-            loading: true,
-            visible: false,
-        };
-    },
-    computed: {
-        styles() {
-            return { 'hidden': ! this.visible };
-        },
-        title() {
-            return this.filePath.split('/').pop();
-        }
-    },
-    methods: {
-        async show(filePath) {
-            this.filePath = filePath;
-            this.visible = true;
-
-            await axios.get('?info=' + filePath).then(function (response) {
-                this.hashes = response.data.hashes;
-            }.bind(this)).catch(function (error) {
-                this.error = error.response.request.statusText;
-            }.bind(this));
-
-            this.loading = false;
-        },
-        hide() {
-            this.visible = false;
-            this.loading = true;
-            this.error = null;
-        }
-    },
-    mounted() {
-        window.addEventListener('keyup', e => e.key == 'Escape' && this.hide());
-    }
-};
-</script>
--- a/app/resources/sass/app.scss
+++ b/app/resources/sass/app.scss
@@ -19,6 +19,6 @@ $fa-font-path: "./webfonts";
@import "markdown.scss";

 // Miscellaneous
-[v-cloak] {
-    display: none;
+[x-cloak] {
+    display: none !important;
 }
--- a/app/views/components/file-info-modal.twig
+++ b/app/views/components/file-info-modal.twig
@@ -0,0 +1,35 @@
+<div class="fixed inset-0 flex justify-center items-center bg-gray-800 bg-opacity-50 p-4 z-50 dark:bg-gray-600 dark:bg-opacity-50"
+    x-data="file-info-modal" x-show="visible" @click.self="hide()" @keyup.escape.window="hide()"
+    @show-file-info.window="show($event.detail.file)" x-transition x-cloak
+>
+    <div x-show="!loading" x-transition @click.away="hide()" class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white">
+        <header class="flex justify-between items-center bg-blue-600 p-4 dark:bg-purple-700">
+            <i class="fas fa-info-circle fa-lg text-white"></i>
+
+            <div class="items-center text-xl text-white font-mono mx-4" x-text="title"></div>
+
+            <button @click="hide()" class="flex justify-center items-center rounded-full w-6 h-6 text-gray-900 text-opacity-50 text-sm hover:bg-red-700 hover:text-white hover:shadow">
+                <i class="fas fa-times"></i>
+            </button>
+        </header>
+
+        <content class="flex justify-center items-center p-4">
+            <div class="overflow-x-auto">
+                <p class="font-thin text-2xl text-gray-600 m-4" x-if="error" x-text="error"></p>
+
+                <table x-if="error === undefined" class="table-auto">
+                    <tbody>
+                        <template x-for="[name, value] in Object.entries(hashes)" :key="name">
+                            <tr>
+                                <td class="border font-bold px-4 py-2" x-text="name"></td>
+                                <td class="border font-mono px-4 py-2" x-text="value"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </content>
+    </div>
+
+    <i class="fas fa-spinner fa-pulse fa-5x text-white" x-show="loading"></i>
+</div>
--- a/app/views/components/file.twig
+++ b/app/views/components/file.twig
@@ -17,10 +17,8 @@

        {% if file.isFile %}
            <div class="ml-2">
-                <button
-                    title="{{ translate('file.info') }}"
-                    class="flex justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-300 hover:shadow dark:hover:bg-purple-900 group-hover:visible"
-                    v-on:click.prevent="showFileInfo('{{ url(file.getPathname) | escape('js') }}')"
+                <button title="{{ translate('file.info') }}" @click.prevent="$dispatch('show-file-info', { file: '{{ url(file.getPathname) | escape('js') }}' })"
+                    class="justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-300 hover:shadow dark:hover:bg-purple-900 group-hover:visible"
                >
                    <i class="fas fa-info-circle"></i>
                </button>
--- a/app/views/components/header.twig
+++ b/app/views/components/header.twig
@@ -1,4 +1,4 @@
-<header id="header" class="bg-blue-600 shadow sticky top-0 dark:bg-purple-700">
+<header class="bg-blue-600 shadow sticky top-0 dark:bg-purple-700">
    <div class="border-b border-blue-700 dark:border-purple-800">
        <div class="container flex flex-wrap justify-between items-center space-x-6 mx-auto p-4 md:flex-row xl:max-w-screen-xl">
            <a href="." class="flex items-center space-x-2 p-1" title="{{ config('site_title') }}">
--- a/app/views/components/scroll-to-top.twig
+++ b/app/views/components/scroll-to-top.twig
@@ -1,8 +1,9 @@
-<div class="fixed bottom-0 left-0 right-0 pointer-events-none">
+<div class="fixed bottom-0 left-0 right-0 pointer-events-none" x-data="{ visible: false }" x-show="visible" x-transition.opacity>
    <div class="container flex justify-end mx-auto px-4 py-10 xl:max-w-screen-xl">
-        <button id="scroll-to-top" ref="scrollToTop"  title="{{ translate('scroll_to_top') }}"
-            class="hidden flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-blue-600 text-white cursor-pointer pointer-events-auto hover:bg-blue-700 dark:bg-purple-700 dark:hover:bg-purple-800"
-            onclick="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });"
+        <button title="{{ translate('scroll_to_top') }}"
+            class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-blue-600 text-white cursor-pointer pointer-events-auto hover:bg-blue-700 dark:bg-purple-700 dark:hover:bg-purple-800"
+            @click="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });"
+            @scroll.window="visible = window.scrollY > 10"
        >
            <i class="fas fa-arrow-up fa-lg"></i>
        </button>
--- a/app/views/components/search.twig
+++ b/app/views/components/search.twig
@@ -1,7 +1,7 @@
-<form id="search" action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner dark:bg-purple-800">
+<form action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner dark:bg-purple-800">
    <input type="text" value="{{ search }}" name="search" placeholder="{{ translate('search') }}..."
        class="bg-transparent placeholder-gray-900 text-white w-full px-10 py-2"
-        ref="searchInput" v-on:focus="$event.target.select()"
+        @keyup.?.prevent.window="$el.focus()" @focus="$event.target.select()"
    >

    <div class="flex items-center absolute left-0 inset-y-0 ml-2 pointer-events-none">
@@ -12,7 +12,7 @@

    {% if search %}
        <div class="flex items-center absolute right-0 inset-y-0 mr-2">
-            <a href="."  class="flex justify-center items-center rounded-full text-gray-900 text-opacity-50 w-6 h-6 hover:bg-red-700 hover:text-white hover:text-opacity-100 hover:shadow">
+            <a href="." class="flex justify-center items-center rounded-full text-gray-900 text-opacity-50 w-6 h-6 hover:bg-red-700 hover:text-white hover:text-opacity-100 hover:shadow">
                <i class="fas fa-times"></i>
            </a>
        </div>
--- a/app/views/components/theme-toggle.twig
+++ b/app/views/components/theme-toggle.twig
@@ -1,5 +1,5 @@
-<div class="flex flex-col justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer w-4 h-8" title="{{ translate('toggle_theme') }}" v-on:click="toggleTheme">
-    <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" v-bind:class="{ '-translate-y-2': lightMode, 'translate-y-2': darkMode }">
-        <i class="fas fa-lightbulb fa-xs" v-bind:class="{ 'text-gray-600': darkMode, 'text-yellow-400': lightMode }"></i>
+<div class="flex flex-col justify-center items-center bg-gray-900 bg-opacity-30 rounded-full cursor-pointer w-4 h-8" title="{{ translate('toggle_theme') }}" @click="toggleTheme()">
+    <div class="flex justify-center items-center bg-white w-5 h-5 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ '-translate-y-2': theme === 'light', 'translate-y-2': theme === 'dark' }" x-cloak>
+        <i class="fas fa-lightbulb fa-xs" :class="{ 'text-gray-600': theme === 'dark', 'text-yellow-400': theme === 'light' }"></i>
    </div>
 </div>
--- a/app/views/error.twig
+++ b/app/views/error.twig
@@ -4,7 +4,7 @@
 {% block content %}
    {% include 'components/header.twig' %}

-    <div id="content" class="flex-grow container flex flex-col justify-center items-center mx-auto px-4 xl:max-w-screen-xl">
+    <div class="flex-grow container flex flex-col justify-center items-center mx-auto px-4 xl:max-w-screen-xl">
        <p class="font-thin text-4xl text-gray-600">
            {{ message | default('An unexpected error occured') }}
        </p>
--- a/app/views/index.twig
+++ b/app/views/index.twig
@@ -3,7 +3,7 @@
 {% block content %}
    {% include "components/header.twig" %}

-    <div id="content" class="flex flex-col flex-grow container mx-auto px-4 xl:max-w-screen-xl dark:text-white">
+    <div class="flex flex-col flex-grow container mx-auto px-4 xl:max-w-screen-xl dark:text-white">
        <div class="my-4">
            <div class="flex justify-between font-bold p-4">
                <div class="flex-grow font-mono mr-2">
@@ -19,7 +19,7 @@
                </div>
            </div>

-            <ul id="file-list">
+            <ul>
                <li>
                    {% if path and path != '.' %}
                        {{ include('components/file.twig', { parentDir: true }) }}
@@ -42,5 +42,6 @@
    {% include 'components/footer.twig' %}

    {% include 'components/scroll-to-top.twig' %}
-    <file-info-modal ref="fileInfoModal"></file-info-modal>
+
+    {% include 'components/file-info-modal.twig' %}
 {% endblock %}
--- a/app/views/layouts/app.twig
+++ b/app/views/layouts/app.twig
@@ -9,6 +9,8 @@
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link rel="stylesheet" href="{{ asset('app.css') }}">

+<script src="{{ asset('app.js') }}" defer></script>
+
 {% if config('google_analytics_id', false) %}
    {% include 'components/analytics/google.twig' %}
 {% endif %}
@@ -19,14 +21,12 @@

 <title>{{ title }} &bull; {{ config('site_title') }}</title>

-<div id="app" v-bind:class="{ dark: darkMode }">
+<div x-data="application" x-init="loading = false" x-effect="localStorage.setItem('theme', theme)" :class="{ 'dark': theme === 'dark' }">
    <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
        {% block content %}{% endblock %}
    </div>

-    <div class="fixed inset-0 flex items-center justify-center bg-gray-600 p-4 z-50" v-show="loading">
+    <div class="fixed inset-0 flex items-center justify-center bg-gray-600 p-4 z-50" x-show="loading" x-transition>
        <i class="fas fa-spinner fa-pulse fa-5x text-white"></i>
    </div>
 </div>
-
-<script src="{{ asset('app.js') }}"></script>
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,24 +7,21 @@
            "name": "directory-lister",
            "license": "MIT",
            "dependencies": {
+                "alpinejs": "^3.0.1",
                "autoprefixer": "^10.2.5",
                "axios": "^0.21.1",
                "highlight.js": "^10.6.0",
-                "postcss": "^8.2.7",
-                "vue": "^2.6.12"
+                "postcss": "^8.2.7"
            },
            "devDependencies": {
                "@fortawesome/fontawesome-free": "^5.15.2",
                "cross-env": "^7.0.3",
                "eslint": "^7.21.0",
-                "eslint-plugin-vue": "^7.7.0",
                "laravel-mix": "^6.0.19",
                "resolve-url-loader": "^4.0.0",
                "sass": "^1.32.8",
                "sass-loader": "^11.0.1",
-                "tailwindcss": "^2.1.0",
-                "vue-loader": "^15.9.6",
-                "vue-template-compiler": "^2.6.12"
+                "tailwindcss": "^2.1.0"
            }
        },
        "node_modules/@babel/code-frame": {
@@ -2238,150 +2235,18 @@
            "integrity": "sha512-y9Pw8IK50OqFRDpdI9Is29KlWiENVW9FDvlTmGHelvTfR2brYFJbsClvulZfeq6YKacFrDsG9a39w0kJZdHLaw==",
            "dev": true
        },
-        "node_modules/@vue/component-compiler-utils": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz",
-            "integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==",
-            "dev": true,
+        "node_modules/@vue/reactivity": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.1.tgz",
+            "integrity": "sha512-DsH5woNVCcPK1M0RRYVgJEU1GJDU2ASOKpAqW3ppHk+XjoFLCbqc/26RTCgTpJYd9z8VN+79Q1u7/QqgQPbuLQ==",
            "dependencies": {
-                "consolidate": "^0.15.1",
-                "hash-sum": "^1.0.2",
-                "lru-cache": "^4.1.2",
-                "merge-source-map": "^1.1.0",
-                "postcss": "^7.0.14",
-                "postcss-selector-parser": "^6.0.2",
-                "source-map": "~0.6.1",
-                "vue-template-es2015-compiler": "^1.9.0"
-            },
-            "optionalDependencies": {
-                "prettier": "^1.18.2"
+                "@vue/shared": "3.1.1"
            }
        },
-        "node_modules/@vue/component-compiler-utils/node_modules/ansi-styles": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-            "dev": true,
-            "dependencies": {
-                "color-convert": "^1.9.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/chalk": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-            "dev": true,
-            "dependencies": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/chalk/node_modules/supports-color": {
-            "version": "5.5.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-            "dev": true,
-            "dependencies": {
-                "has-flag": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/color-convert": {
-            "version": "1.9.3",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
-            "dependencies": {
-                "color-name": "1.1.3"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/color-name": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-            "dev": true
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/escape-string-regexp": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-            "dev": true,
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/has-flag": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-            "dev": true,
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/lru-cache": {
-            "version": "4.1.5",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-            "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-            "dev": true,
-            "dependencies": {
-                "pseudomap": "^1.0.2",
-                "yallist": "^2.1.2"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/postcss": {
-            "version": "7.0.35",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-            "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-            "dev": true,
-            "dependencies": {
-                "chalk": "^2.4.2",
-                "source-map": "^0.6.1",
-                "supports-color": "^6.1.0"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/source-map": {
-            "version": "0.6.1",
-            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/supports-color": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-            "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-            "dev": true,
-            "dependencies": {
-                "has-flag": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-            "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-            "dev": true
+        "node_modules/@vue/shared": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.1.tgz",
+            "integrity": "sha512-g+4pzAw7PYSjARtLBoDq6DmcblX8i9KJHSCnyM5VDDFFifUaUT9iHbFpOF/KOizQ9f7QAqU2JH3Y6aXjzUMhVA=="
        },
        "node_modules/@webassemblyjs/ast": {
            "version": "1.11.0",
@@ -2688,6 +2553,14 @@
            "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
            "dev": true
        },
+        "node_modules/alpinejs": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.0.1.tgz",
+            "integrity": "sha512-a01c/52yg4tyuA1yMgR/Eip/4W/slUxr8DqbVz08ltmjBMoBxSNqIjN+UTz1xr7YFoT2f8EhlhwYJV7dCWxd2w==",
+            "dependencies": {
+                "@vue/reactivity": "^3.0.2"
+            }
+        },
        "node_modules/ansi-colors": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -3212,12 +3085,6 @@
                "file-uri-to-path": "1.0.0"
            }
        },
-        "node_modules/bluebird": {
-            "version": "3.7.2",
-            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-            "dev": true
-        },
        "node_modules/bn.js": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
@@ -4048,18 +3915,6 @@
            "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
            "dev": true
        },
-        "node_modules/consolidate": {
-            "version": "0.15.1",
-            "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
-            "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
-            "dev": true,
-            "dependencies": {
-                "bluebird": "^3.1.1"
-            },
-            "engines": {
-                "node": ">= 0.10.0"
-            }
-        },
        "node_modules/constants-browserify": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -5013,12 +4868,6 @@
                "node": ">=0.10.0"
            }
        },
-        "node_modules/de-indent": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
-            "dev": true
-        },
        "node_modules/debug": {
            "version": "4.3.1",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -5665,24 +5514,6 @@
                "url": "https://opencollective.com/eslint"
            }
        },
-        "node_modules/eslint-plugin-vue": {
-            "version": "7.10.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.10.0.tgz",
-            "integrity": "sha512-xdr6e4t/L2moRAeEQ9HKgge/hFq+w9v5Dj+BA54nTAzSFdUyKLiSOdZaRQjCHMY0Pk2WaQBFH9QiWG60xiC+6A==",
-            "dev": true,
-            "dependencies": {
-                "eslint-utils": "^2.1.0",
-                "natural-compare": "^1.4.0",
-                "semver": "^7.3.2",
-                "vue-eslint-parser": "^7.6.0"
-            },
-            "engines": {
-                "node": ">=8.10"
-            },
-            "peerDependencies": {
-                "eslint": "^6.2.0 || ^7.0.0"
-            }
-        },
        "node_modules/eslint-scope": {
            "version": "5.1.1",
            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -8248,24 +8079,6 @@
            "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
            "dev": true
        },
-        "node_modules/merge-source-map": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
-            "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
-            "dev": true,
-            "dependencies": {
-                "source-map": "^0.6.1"
-            }
-        },
-        "node_modules/merge-source-map/node_modules/source-map": {
-            "version": "0.6.1",
-            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
        "node_modules/merge-stream": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -13211,19 +13024,6 @@
                "node": ">= 0.8.0"
            }
        },
-        "node_modules/prettier": {
-            "version": "1.19.1",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-            "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
-            "dev": true,
-            "optional": true,
-            "bin": {
-                "prettier": "bin-prettier.js"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
        "node_modules/pretty-hrtime": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -13288,12 +13088,6 @@
                "node": ">= 0.10"
            }
        },
-        "node_modules/pseudomap": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-            "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-            "dev": true
-        },
        "node_modules/public-encrypt": {
            "version": "4.0.3",
            "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -15805,114 +15599,6 @@
            "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
            "dev": true
        },
-        "node_modules/vue": {
-            "version": "2.6.13",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.13.tgz",
-            "integrity": "sha512-O+pAdJkce1ooYS1XyoQtpBQr9An+Oys3w39rkqxukVO3ZD1ilYJkWBGoRuadiQEm2LLJnCL2utV4TMSf52ubjw=="
-        },
-        "node_modules/vue-eslint-parser": {
-            "version": "7.6.0",
-            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
-            "integrity": "sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==",
-            "dev": true,
-            "dependencies": {
-                "debug": "^4.1.1",
-                "eslint-scope": "^5.0.0",
-                "eslint-visitor-keys": "^1.1.0",
-                "espree": "^6.2.1",
-                "esquery": "^1.4.0",
-                "lodash": "^4.17.15"
-            },
-            "engines": {
-                "node": ">=8.10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/mysticatea"
-            },
-            "peerDependencies": {
-                "eslint": ">=5.0.0"
-            }
-        },
-        "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-            "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-            "dev": true,
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/vue-eslint-parser/node_modules/espree": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-            "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-            "dev": true,
-            "dependencies": {
-                "acorn": "^7.1.1",
-                "acorn-jsx": "^5.2.0",
-                "eslint-visitor-keys": "^1.1.0"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
-        "node_modules/vue-hot-reload-api": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
-            "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
-            "dev": true
-        },
-        "node_modules/vue-loader": {
-            "version": "15.9.7",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
-            "integrity": "sha512-qzlsbLV1HKEMf19IqCJqdNvFJRCI58WNbS6XbPqK13MrLz65es75w392MSQ5TsARAfIjUw+ATm3vlCXUJSOH9Q==",
-            "dev": true,
-            "dependencies": {
-                "@vue/component-compiler-utils": "^3.1.0",
-                "hash-sum": "^1.0.2",
-                "loader-utils": "^1.1.0",
-                "vue-hot-reload-api": "^2.3.0",
-                "vue-style-loader": "^4.1.0"
-            },
-            "peerDependencies": {
-                "css-loader": "*",
-                "webpack": "^3.0.0 || ^4.1.0 || ^5.0.0-0"
-            },
-            "peerDependenciesMeta": {
-                "cache-loader": {
-                    "optional": true
-                },
-                "vue-template-compiler": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/vue-loader/node_modules/json5": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-            "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-            "dev": true,
-            "dependencies": {
-                "minimist": "^1.2.0"
-            },
-            "bin": {
-                "json5": "lib/cli.js"
-            }
-        },
-        "node_modules/vue-loader/node_modules/loader-utils": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-            "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-            "dev": true,
-            "dependencies": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^1.0.1"
-            },
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
        "node_modules/vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -15949,22 +15635,6 @@
                "node": ">=4.0.0"
            }
        },
-        "node_modules/vue-template-compiler": {
-            "version": "2.6.13",
-            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.13.tgz",
-            "integrity": "sha512-latKAqpUjCkovB8XppW5gnZbSdYQzkf8pavsMBZYZrQcG6lAnj0EH4Ty7jMwAwFw5Cf4mybKBHlp1UTjnLPOWw==",
-            "dev": true,
-            "dependencies": {
-                "de-indent": "^1.0.2",
-                "he": "^1.1.0"
-            }
-        },
-        "node_modules/vue-template-es2015-compiler": {
-            "version": "1.9.1",
-            "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
-            "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
-            "dev": true
-        },
        "node_modules/watchpack": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
@@ -18311,125 +17981,19 @@
            "integrity": "sha512-y9Pw8IK50OqFRDpdI9Is29KlWiENVW9FDvlTmGHelvTfR2brYFJbsClvulZfeq6YKacFrDsG9a39w0kJZdHLaw==",
            "dev": true
        },
-        "@vue/component-compiler-utils": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz",
-            "integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==",
-            "dev": true,
+        "@vue/reactivity": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.1.tgz",
+            "integrity": "sha512-DsH5woNVCcPK1M0RRYVgJEU1GJDU2ASOKpAqW3ppHk+XjoFLCbqc/26RTCgTpJYd9z8VN+79Q1u7/QqgQPbuLQ==",
            "requires": {
-                "consolidate": "^0.15.1",
-                "hash-sum": "^1.0.2",
-                "lru-cache": "^4.1.2",
-                "merge-source-map": "^1.1.0",
-                "postcss": "^7.0.14",
-                "postcss-selector-parser": "^6.0.2",
-                "prettier": "^1.18.2",
-                "source-map": "~0.6.1",
-                "vue-template-es2015-compiler": "^1.9.0"
-            },
-            "dependencies": {
-                "ansi-styles": {
-                    "version": "3.2.1",
-                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-                    "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-                    "dev": true,
-                    "requires": {
-                        "color-convert": "^1.9.0"
-                    }
-                },
-                "chalk": {
-                    "version": "2.4.2",
-                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-                    "dev": true,
-                    "requires": {
-                        "ansi-styles": "^3.2.1",
-                        "escape-string-regexp": "^1.0.5",
-                        "supports-color": "^5.3.0"
-                    },
-                    "dependencies": {
-                        "supports-color": {
-                            "version": "5.5.0",
-                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-                            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-                            "dev": true,
-                            "requires": {
-                                "has-flag": "^3.0.0"
-                            }
-                        }
-                    }
-                },
-                "color-convert": {
-                    "version": "1.9.3",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-                    "dev": true,
-                    "requires": {
-                        "color-name": "1.1.3"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.3",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-                    "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-                    "dev": true
-                },
-                "escape-string-regexp": {
-                    "version": "1.0.5",
-                    "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-                    "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-                    "dev": true
-                },
-                "has-flag": {
-                    "version": "3.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-                    "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-                    "dev": true
-                },
-                "lru-cache": {
-                    "version": "4.1.5",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-                    "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-                    "dev": true,
-                    "requires": {
-                        "pseudomap": "^1.0.2",
-                        "yallist": "^2.1.2"
-                    }
-                },
-                "postcss": {
-                    "version": "7.0.35",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-                    "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
-                    "dev": true,
-                    "requires": {
-                        "chalk": "^2.4.2",
-                        "source-map": "^0.6.1",
-                        "supports-color": "^6.1.0"
-                    }
-                },
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-                    "dev": true
-                },
-                "supports-color": {
-                    "version": "6.1.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-                    "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-                    "dev": true,
-                    "requires": {
-                        "has-flag": "^3.0.0"
-                    }
-                },
-                "yallist": {
-                    "version": "2.1.2",
-                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-                    "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-                    "dev": true
-                }
+                "@vue/shared": "3.1.1"
            }
        },
+        "@vue/shared": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.1.tgz",
+            "integrity": "sha512-g+4pzAw7PYSjARtLBoDq6DmcblX8i9KJHSCnyM5VDDFFifUaUT9iHbFpOF/KOizQ9f7QAqU2JH3Y6aXjzUMhVA=="
+        },
        "@webassemblyjs/ast": {
            "version": "1.11.0",
            "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
@@ -18696,6 +18260,14 @@
            "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
            "dev": true
        },
+        "alpinejs": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.0.1.tgz",
+            "integrity": "sha512-a01c/52yg4tyuA1yMgR/Eip/4W/slUxr8DqbVz08ltmjBMoBxSNqIjN+UTz1xr7YFoT2f8EhlhwYJV7dCWxd2w==",
+            "requires": {
+                "@vue/reactivity": "^3.0.2"
+            }
+        },
        "ansi-colors": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -19089,12 +18661,6 @@
                "file-uri-to-path": "1.0.0"
            }
        },
-        "bluebird": {
-            "version": "3.7.2",
-            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-            "dev": true
-        },
        "bn.js": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
@@ -19795,15 +19361,6 @@
            "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
            "dev": true
        },
-        "consolidate": {
-            "version": "0.15.1",
-            "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
-            "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
-            "dev": true,
-            "requires": {
-                "bluebird": "^3.1.1"
-            }
-        },
        "constants-browserify": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -20568,12 +20125,6 @@
                }
            }
        },
-        "de-indent": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
-            "dev": true
-        },
        "debug": {
            "version": "4.3.1",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -21086,18 +20637,6 @@
                "v8-compile-cache": "^2.0.3"
            }
        },
-        "eslint-plugin-vue": {
-            "version": "7.10.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.10.0.tgz",
-            "integrity": "sha512-xdr6e4t/L2moRAeEQ9HKgge/hFq+w9v5Dj+BA54nTAzSFdUyKLiSOdZaRQjCHMY0Pk2WaQBFH9QiWG60xiC+6A==",
-            "dev": true,
-            "requires": {
-                "eslint-utils": "^2.1.0",
-                "natural-compare": "^1.4.0",
-                "semver": "^7.3.2",
-                "vue-eslint-parser": "^7.6.0"
-            }
-        },
        "eslint-scope": {
            "version": "5.1.1",
            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -23069,23 +22608,6 @@
            "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
            "dev": true
        },
-        "merge-source-map": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
-            "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
-            "dev": true,
-            "requires": {
-                "source-map": "^0.6.1"
-            },
-            "dependencies": {
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-                    "dev": true
-                }
-            }
-        },
        "merge-stream": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -26941,13 +26463,6 @@
            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
            "dev": true
        },
-        "prettier": {
-            "version": "1.19.1",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-            "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
-            "dev": true,
-            "optional": true
-        },
        "pretty-hrtime": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -26996,12 +26511,6 @@
                }
            }
        },
-        "pseudomap": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-            "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-            "dev": true
-        },
        "public-encrypt": {
            "version": "4.0.3",
            "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -28991,85 +28500,6 @@
            "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
            "dev": true
        },
-        "vue": {
-            "version": "2.6.13",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.13.tgz",
-            "integrity": "sha512-O+pAdJkce1ooYS1XyoQtpBQr9An+Oys3w39rkqxukVO3ZD1ilYJkWBGoRuadiQEm2LLJnCL2utV4TMSf52ubjw=="
-        },
-        "vue-eslint-parser": {
-            "version": "7.6.0",
-            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
-            "integrity": "sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==",
-            "dev": true,
-            "requires": {
-                "debug": "^4.1.1",
-                "eslint-scope": "^5.0.0",
-                "eslint-visitor-keys": "^1.1.0",
-                "espree": "^6.2.1",
-                "esquery": "^1.4.0",
-                "lodash": "^4.17.15"
-            },
-            "dependencies": {
-                "eslint-visitor-keys": {
-                    "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-                    "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-                    "dev": true
-                },
-                "espree": {
-                    "version": "6.2.1",
-                    "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-                    "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-                    "dev": true,
-                    "requires": {
-                        "acorn": "^7.1.1",
-                        "acorn-jsx": "^5.2.0",
-                        "eslint-visitor-keys": "^1.1.0"
-                    }
-                }
-            }
-        },
-        "vue-hot-reload-api": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
-            "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
-            "dev": true
-        },
-        "vue-loader": {
-            "version": "15.9.7",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
-            "integrity": "sha512-qzlsbLV1HKEMf19IqCJqdNvFJRCI58WNbS6XbPqK13MrLz65es75w392MSQ5TsARAfIjUw+ATm3vlCXUJSOH9Q==",
-            "dev": true,
-            "requires": {
-                "@vue/component-compiler-utils": "^3.1.0",
-                "hash-sum": "^1.0.2",
-                "loader-utils": "^1.1.0",
-                "vue-hot-reload-api": "^2.3.0",
-                "vue-style-loader": "^4.1.0"
-            },
-            "dependencies": {
-                "json5": {
-                    "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-                    "dev": true,
-                    "requires": {
-                        "minimist": "^1.2.0"
-                    }
-                },
-                "loader-utils": {
-                    "version": "1.4.0",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-                    "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-                    "dev": true,
-                    "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^3.0.0",
-                        "json5": "^1.0.1"
-                    }
-                }
-            }
-        },
        "vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -29102,22 +28532,6 @@
                }
            }
        },
-        "vue-template-compiler": {
-            "version": "2.6.13",
-            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.13.tgz",
-            "integrity": "sha512-latKAqpUjCkovB8XppW5gnZbSdYQzkf8pavsMBZYZrQcG6lAnj0EH4Ty7jMwAwFw5Cf4mybKBHlp1UTjnLPOWw==",
-            "dev": true,
-            "requires": {
-                "de-indent": "^1.0.2",
-                "he": "^1.1.0"
-            }
-        },
-        "vue-template-es2015-compiler": {
-            "version": "1.9.1",
-            "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
-            "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
-            "dev": true
-        },
        "watchpack": {
            "version": "2.2.0",
            "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
    "author": "Chris Kankiewicz",
    "license": "MIT",
    "scripts": {
-        "cs": "npx eslint app/resources/js/**/*.{js,vue} || true",
+        "cs": "npx eslint app/resources/js/**/*.js || true",
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
@@ -13,23 +13,20 @@
        "production": "mix --production"
    },
    "dependencies": {
+        "alpinejs": "^3.0.1",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21.1",
        "highlight.js": "^10.6.0",
-        "postcss": "^8.2.7",
-        "vue": "^2.6.12"
+        "postcss": "^8.2.7"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.2",
        "cross-env": "^7.0.3",
        "eslint": "^7.21.0",
-        "eslint-plugin-vue": "^7.7.0",
        "laravel-mix": "^6.0.19",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
-        "tailwindcss": "^2.1.0",
-        "vue-loader": "^15.9.6",
-        "vue-template-compiler": "^2.6.12"
+        "tailwindcss": "^2.1.0"
    }
 }
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -12,7 +12,7 @@ mix.sass('app/resources/sass/app.scss', 'app/assets/app.css').options({
    postCss: [tailwindcss('tailwind.config.js')]
 });

-mix.js('app/resources/js/app.js', 'app/assets/app.js').vue();
+mix.js('app/resources/js/app.js', 'app/assets/app.js');

 mix.copyDirectory('app/resources/images', 'app/assets/images');