.drone.yml

@@ -24,7 +24,7 @@ steps:
     - name: node
       image: node:17.9.0-slim
       commands:
-          - npm ci && npm run img && npm run prod && rm -R node_modules
+          - npm ci && npm run prod && npm run img && rm -R node_modules
 
     - name: phpunit_tests
       image: php:8.1.6

.gitignore

@@ -1,7 +1,11 @@
 /node_modules
-/public/build
-/public/sprite.svg
 /public/hot
+/public/storage
+/public/js
+/public/css
+/public/fonts
+/public/img
+/public/images
 /storage/*.key
 /vendor
 .env
@@ -13,12 +17,14 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 tags
+/public/vendor
 /storage/temp
 
 # Temporary files
 *.swp
 *.swo
 *.swm
+/public/mix-manifest.json
 resources/img/sprite.svg
 /.php-cs-fixer.cache
 /data

package.json

@@ -2,12 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "npx vite",
-        "watch": "npx vite",
-        "hot": "npx vite",
-        "prod": "npx vite build",
+        "development": "npx mix build",
+        "watch": "npx mix watch",
+        "hot": "npx mix watch --hot",
+        "prod": "npx mix build --production",
         "production": "npm run prod",
-        "img": "cd resources/img/svg && npx svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.css.svg ../../../public/sprite.svg && rm -R sprite",
+        "img": "rm -R public/img && cd resources/img/svg && npx svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.css.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img",
         "lint": "eslint \"resources/js/**/*.{js,vue}\"",
         "fix": "eslint \"resources/js/**/*.{js,vue}\" --fix"
     },
@@ -16,6 +16,7 @@
         "axios": "^1.3.4",
         "eslint": "^8.9.0",
         "eslint-plugin-vue": "^8.4.1",
+        "laravel-mix": "^6.0.1",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.3",
         "vue": "2.7",
@@ -27,9 +28,7 @@
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue": "^0.8.0",
         "@tailwindcss/typography": "^0.5.9",
-        "@vitejs/plugin-vue2": "^2.2.0",
         "change-case": "^4.1.2",
-        "laravel-vite-plugin": "^0.7.7",
         "leaflet": "^1.9.3",
         "lodash": "^4.17.21",
         "merge": "^2.1.1",
@@ -38,7 +37,6 @@
         "postcss-import": "^14.0.1",
         "svg-sprite": "^2.0.2",
         "v-tooltip": "^2.1.3",
-        "vite": "^4.3.8",
         "vue-toasted": "^1.1.28",
         "vue2-leaflet": "^2.7.1",
         "wnumb": "^1.2.0"

postcss.config.js

@@ -1,10 +0,0 @@
-const tailwindcss = require('tailwindcss');
-
-module.exports = {
-    plugins: {
-        'postcss-import': {},
-        'tailwindcss/nesting': {},
-        'tailwindcss': {},
-        'autoprefixer': {},
-    },
-};

resources/css/app.css

@@ -2,13 +2,15 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@import 'base.css';
-@import 'switch';
-@import 'layout';
-@import 'buttons';
-@import 'table';
-@import 'sidebar';
-@import 'bool';
-@import 'form';
-@import 'tooltip';
-@import 'leaflet';
+@layer components {
+    @import 'base';
+    @import 'switch';
+    @import 'layout';
+    @import 'buttons';
+    @import 'table';
+    @import 'sidebar';
+    @import 'bool';
+    @import 'form';
+    @import 'tooltip';
+    @import 'leaflet';
+}

resources/css/base.css

@@ -7,6 +7,7 @@
     @apply mb-4;
 }
 
+
 .form-control-font {
     @apply leading-tight text-gray-600 text-sm;
 }
@@ -17,8 +18,7 @@
     top: 34px;
     transition: color 02s, padding-bottom 02s, font-size 02s, top 02s;
 }
-.field-wrapperfocused label-placeholder,
-label-placeholder-focused {
+.field-wrapperfocused label-placeholder, label-placeholder-focused {
     top: 0;
     @apply text-sm text-gray-600;
     padding-bottom: 10px;
@@ -42,25 +42,24 @@ label-placeholder-focused {
     @apply py-2;
 }
 
-input,
-select {
+input, select {
     outline: none;
 }
 
-input[type='date'],
-input[type='datetime-local'],
-input[type='time'],
-input[type='month'],
+input[type="date"],
+input[type="datetime-local"],
+input[type="time"],
+input[type="month"],
 select,
-input[type='week'] {
+input[type="week"] {
     height: 37px;
     &::-webkit-inner-spin-button {
         display: none;
     }
 }
 
-input[type='date']::-webkit-inner-spin-button,
-input[type='date']::-webkit-calendar-picker-indicator {
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
     display: none;
     -webkit-appearance: none;
 }

resources/css/tooltip.css

@@ -82,8 +82,10 @@
     }
 
     &.popover {
+        $color: #f9f9f9;
+
         .popover-inner {
-            background: #f9f9f9;
+            background: $color;
             color: black;
             padding: 24px;
             border-radius: 5px;
@@ -91,7 +93,7 @@
         }
 
         .popover-arrow {
-            border-color: #f9f9f9;
+            border-color: $color;
         }
     }
 

resources/js/app.js

@@ -13,11 +13,6 @@ import AppLayout from './layouts/AppLayout.vue';
 import hasModule from './mixins/hasModule.js';
 import hasFlash from './mixins/hasFlash.js';
 
-import '../css/app.css';
-
-// ---------------------------------- Assets -----------------------------------
-import.meta.glob(['../img/**']);
-
 // ---------------------------------- Plugins ----------------------------------
 Vue.use(plugin);
 Vue.use(PortalVue);
@@ -30,9 +25,9 @@ Vue.component('SvgSprite', () => import('./components/SvgSprite.js'));
 Vue.component('ILink', ILink);
 
 // -------------------------------- Components ---------------------------------
-requireModules(import.meta.glob('./components/form/*.vue'), Vue, 'f');
-requireModules(import.meta.glob('./components/ui/*.vue'), Vue, 'ui');
-requireModules(import.meta.glob('./components/page/*.vue', {eager: true}), Vue, 'page');
+requireModules(require.context('./components/form', false, /\.vue$/, 'lazy'), Vue, 'f');
+requireModules(require.context('./components/ui', false, /\.vue$/, 'lazy'), Vue, 'ui');
+requireModules(require.context('./components/page', false, /\.vue$/), Vue, 'page');
 
 // ---------------------------------- mixins -----------------------------------
 Vue.mixin(hasModule);
@@ -44,7 +39,6 @@ const pinia = createPinia();
 
 Inertia.on('start', (event) => window.dispatchEvent(new Event('inertiaStart')));
 
-let views = import.meta.glob('./views/**/*.vue');
 new Vue({
     pinia,
     render: (h) =>
@@ -52,7 +46,7 @@ new Vue({
             props: {
                 initialPage: JSON.parse(el.dataset.page),
                 resolveComponent: async (name) => {
-                    var page = (await views[`./views/${name}.vue`]()).default;
+                    var page = (await import(`./views/${name}`)).default;
 
                     if (page.layout === undefined) {
                         page.layout = AppLayout;

resources/js/components/SvgSprite.js

@@ -1,25 +1,17 @@
 export default {
     props: {
-        src: {required: true, type: String},
+        src: { required: true, type: String }
     },
-    render: function (createElement) {
+    render: function(createElement) {
         var attr = this.$attrs.class ? this.$attrs.class : '';
-        return createElement(
-            'svg',
-            {
-                class: attr + ' fill-current',
-            },
-            [
-                createElement(
-                    'use',
-                    {
-                        attrs: {
-                            'xlink:href': `/sprite.svg#${this.$props.src}`,
-                        },
-                    },
-                    ''
-                ),
-            ]
-        );
-    },
+        return createElement('svg', {
+            class: attr + ' fill-current'
+        }, [
+            createElement('use', {
+                'attrs': {
+                    'xlink:href': `/img/sprite.svg#${this.$props.src}`
+                }
+            }, '')
+        ] );
+    }
 };

resources/js/lib/requireModules.js

@@ -1,9 +1,11 @@
 import {paramCase} from 'change-case';
 
 export default function (context, Vue, prefix) {
-    for (const file in context) {
-        let componentName = paramCase(`${prefix}${file.replace(/^.*\/(.*?)\.vue$/g, '$1')}`);
+    var isAsync = context.name === 'webpackAsyncContext';
 
-        Vue.component(componentName, typeof context[file] === 'function' ? context[file] : context[file].default);
-    }
+    context.keys().forEach((file) => {
+        let componentName = paramCase(`${prefix}${file.replace(/^\.\/(.*?)\.vue$/g, '$1')}`);
+
+        Vue.component(componentName, isAsync ? () => context(file) : context(file).default);
+    });
 }

resources/js/views/VLogin.vue

@@ -2,7 +2,7 @@
     <form @submit.prevent="submit">
         <div class="h-24 p-6 md:px-10 bg-primary-800 flex justify-between items-center w-full">
             <span class="text-primary-500 text-xl">Login</span>
-            <img src="../../img/dpsg.gif" class="w-24" />
+            <img src="/img/dpsg.gif" class="w-24" />
         </div>
         <div class="p-6 md:p-10 grid gap-5">
             <f-text id="email" label="E-Mail-Adresse" v-model="values.email"></f-text>
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import FullLayout from '../layouts/FullLayout.vue';
+import FullLayout from '../layouts/FullLayout';
 
 export default {
     layout: FullLayout,

resources/js/views/dashboard/VIndex.vue

@@ -16,7 +16,7 @@ export default {
     },
 
     components: {
-        'VBlock': () => import('./VBlock.vue'),
+        'VBlock': () => import('./VBlock'),
         'age-group-count': () => import('./AgeGroupCount.vue'),
         'efz-pending': () => import('./EfzPending.vue'),
         'ps-pending': () => import('./PsPending.vue'),

resources/js/views/member/ShowView.vue

@@ -95,15 +95,15 @@ export default {
     },
 
     components: {
-        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm.vue'),
-        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt.vue'),
-        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae.vue'),
-        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses.vue'),
-        system: () => import(/* webpackChunkName: "member" */ './boxes/System.vue'),
-        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments.vue'),
-        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships.vue'),
-        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap.vue'),
-        tabs: () => import(/* webpackChunkName: "member" */ './Tabs.vue'),
+        stamm: () => import(/* webpackChunkName: "member" */ './boxes/Stamm'),
+        kontakt: () => import(/* webpackChunkName: "member" */ './boxes/Kontakt'),
+        prae: () => import(/* webpackChunkName: "member" */ './boxes/Prae'),
+        courses: () => import(/* webpackChunkName: "member" */ './boxes/Courses'),
+        system: () => import(/* webpackChunkName: "member" */ './boxes/System'),
+        payments: () => import(/* webpackChunkName: "member" */ './boxes/Payments'),
+        memberships: () => import(/* webpackChunkName: "member" */ './boxes/Memberships'),
+        vmap: () => import(/* webpackChunkName: "member" */ './boxes/Vmap'),
+        tabs: () => import(/* webpackChunkName: "member" */ './Tabs'),
     },
 
     created() {

resources/js/views/member/VIndex.vue

@@ -153,9 +153,9 @@ export default {
         MemberMemberships,
         MemberPayments,
         MemberCourses,
-        'age-groups': () => import('./AgeGroups.vue'),
-        'tags': () => import('./Tags.vue'),
-        'actions': () => import('./index/Actions.vue'),
+        'age-groups': () => import(/* webpackChunkName: "member" */ './AgeGroups'),
+        'tags': () => import(/* webpackChunkName: "member" */ './Tags'),
+        'actions': () => import(/* webpackChunkName: "member" */ './index/Actions'),
     },
 
     methods: {

resources/views/app.blade.php

@@ -4,7 +4,8 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <meta name="socketport" content="{{env('SOCKET_PORT')}}" />
-        @vite('resources/js/app.js')
+        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
+        <script src="{{ mix('/js/app.js') }}" defer></script>
     </head>
     <body class="min-h-full flex flex-col">
         @inertia

vite.config.js

@@ -1,27 +0,0 @@
-import {defineConfig} from 'vite';
-import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue2';
-
-export default defineConfig({
-    plugins: [
-        laravel(['resources/js/app.js']),
-        vue({
-            template: {
-                transformAssetUrls: {
-                    // The Vue plugin will re-write asset URLs, when referenced
-                    // in Single File Components, to point to the Laravel web
-                    // server. Setting this to `null` allows the Laravel plugin
-                    // to instead re-write asset URLs to point to the Vite
-                    // server instead.
-                    base: null,
-
-                    // The Vue plugin will parse absolute URLs and treat them
-                    // as absolute paths to files on disk. Setting this to
-                    // `false` will leave absolute URLs un-touched so they can
-                    // reference assets in the public directory as expected.
-                    includeAbsolute: false,
-                },
-            },
-        }),
-    ],
-});