.prettierrc

@@ -1,7 +0,0 @@
-{
-  "printWidth": 200,
-  "singleQuote": true,
-  "tabWidth": 4,
-  "quoteProps": "consistent",
-  "bracketSpacing": false
-}

package.json

@@ -18,20 +18,20 @@
     "devDependencies": {
         "@spiriit/vite-plugin-svg-spritemap": "^2.2.4",
         "autoprefixer": "^10.4.0",
-        "axios": "^1.7.7",
         "postcss": "^8.4.4",
+        "postcss-import": "^14.0.2",
         "tailwind-clip-path": "^1.0.0",
         "tailwindcss": "latest",
-        "toastify-js": "^1.12.0",
+        "vite": "^4.0",
-        "vite": "^5.0",
+        "vite-plugin-live-reload": "^2.1.0"
-        "vite-plugin-live-reload": "^3.0"
     },
     "dependencies": {
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.0",
         "alpinejs": "^3.13.5",
         "dayjs": "^1.11.10",
-        "flowbite": "^2.5.2",
+        "dotenv": "^10.0.0",
+        "flowbite": "^2.2.1",
         "flowbite-datepicker": "^1.2.6"
     }
 }

pages/homepage.htm

@@ -66,7 +66,9 @@ is_hidden = 0
                 </div>
             </section>
 
-            {% component 'anfrage' class='mt-10 self-center md:self-start md:mt-0 max-w-lg w-full md:w-2/5 flex-none' %}
+            <section class="shadow-xl mt-10 self-center md:self-none md:mt-0 bg-zinc-900 border border-zinc-700 rounded-xl p-3 max-w-lg w-full md:w-2/5 flex-none">
+                {% component 'anfrage' %}
+            </section>
         </div>
     </div>
 </div>

partials/anfrage/default.htm

@@ -1,67 +1,67 @@
 {% set maingrid = "grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" %}
 
-<section class="relative rounded-xl p-5 duration-500 shadow-xl {{__SELF__.outerClass}}" x-data="form" :class="{'bg-zinc-900 border border-zinc-700': sent === false, 'bg-green-900 border border-green-700': sent === true}">
+<div id="anfrageform" x-data="form">
 
-    <form @submit.prevent="submit" class="sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" :class="{'grid': sent === false, 'hidden': sent === true}">
+    <form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
 
         <div>
           <label for="reason" class="block text-sm font-medium text-zinc-100">Grund für die Feier</label>
-          <input x-model="value.reason" id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
+          <input id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
         </div>
 
         <div>
           <label for="date" class="block text-sm font-medium text-zinc-100">Gewünschtes Datum</label>
-          <input x-model="value.date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="guests" class="block text-sm font-medium text-zinc-100">Anzahl Gäste (ca)</label>
-          <input x-model="value.guests" id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="birthday" class="block text-sm font-medium text-zinc-100">Geburtsdatum</label>
-          <input x-model="value.birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="firstname" class="block text-sm font-medium text-zinc-100">Vorname</label>
-          <input x-model="value.firstname" id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="lastname" class="block text-sm font-medium text-zinc-100">Nachname</label>
-          <input x-model="value.lastname" id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="address" class="block text-sm font-medium text-zinc-100">Adresse</label>
-          <input x-model="value.address" id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="zip" class="block text-sm font-medium text-zinc-100">PLZ</label>
-          <input x-model="value.zip" id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="location" class="block text-sm font-medium text-zinc-100">Ort</label>
-          <input x-model="value.location" id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="phone" class="block text-sm font-medium text-zinc-100">Telefonnummer</label>
-          <input x-model="value.phone" id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div class="col-span-full">
           <label for="email" class="block text-sm font-medium text-zinc-100">E-Mail-Adresse</label>
-          <input x-model="value.email" id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div class="col-span-full">
           <label for="misc" class="block text-sm font-medium text-zinc-100">Was du sonst noch loswerden willst …</label>
-          <textarea x-model="value.misc" id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
+          <textarea id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
         </div>
 
         <div x-show="isUnder18" class="col-span-full text-sm items-center p-4 border-2 rounded-lg form-group shadow-sm group bg-red-950 border-red-900">
@@ -71,15 +71,15 @@
             <div class="{{maingrid}}">
                 <div>
                     <label for="parent_name" class="block text-sm font-bold mt-2 text-red-50">Name eines Erz. Ber.</label>
-                    <input x-model="value.parent_name" id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
                 <div>
                     <label for="parent_email" class="block text-sm font-bold mt-2 text-red-50">Email eines Erz. Ber.</label>
-                    <input x-model="value.parent_email" id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
                 <div>
                     <label for="parent_phone" class="block text-sm font-bold mt-2 text-red-50">TelNr. eines Erz. Ber.</label>
-                    <input x-model="value.parent_phone" id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
             </div>
         </div>
@@ -87,7 +87,7 @@
         <div class="relative col-span-full">
             <div class="grid grid-cols-1 gap-2">
                 <label for="datenschutz" class="p-0 block leading-none relative flex items-start">
-                    <input x-model="value.datenschutz" id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
+                    <input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
                     <span class="border-neutral-400 border-4 border-solid peer-checked:border-indigo-500 absolute left-0 w-6 h-6 rounded block top-0"></span>
                     <span class="peer-checked:bg-indigo-500 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
                     <span class="pl-8 pt-1 @sm:pt-0 text-zinc-100 text-sm @sm:text-base">
@@ -98,26 +98,7 @@
             </div>
         </div>
         <div class="flex justify-center col-span-full mt-5">
-            <button class="relative py-2 px-10 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">
+            <button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
-                <template x-if="sending">
-                    <div class="flex absolute left-2 top-0 h-full flex items-center">
-                        <span class="loader w-6 h-6"></span>
-                    </div>
-                </template>
-                Absenden
-            </button>
         </div>
     </form>
-
+</div>
-    <div class="text-green-100" :class="{'hidden': sent === false, 'grid': sent === true}">
-        <p class="text-xl">Vielen Dank für deine Anfrage.</p>
-        <p class="mt-2 text-lg">Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden. </p>
-
-        <div class="absolute flex items-center justify-center top-0 left-0 mt-[-13px] ml-[-13px] w-8 h-8">
-            <svg class="absolute top-0 left-0 flex-none rotate-[104deg] stroke-green-700 fill-green-900" viewBox="-21 -21 41 41">
-                <circle cx="0" cy="0" r="20" stroke-dasharray="83.77564 41.88782" stroke-width="1" stroke-location="inside"></circle>
-            </svg>
-            <svg class="relative size-4 text-green-500 fill-current"> <use xlink:href="{{ 'check' | sprite }}"></use> </svg>
-        </div>
-    </div>
-</section>

partials/anfrage/success.htm

@@ -0,0 +1,3 @@
+<div>
+    Vielen Dank für deine Anfrage. Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden.
+</div>

partials/headassets/default.htm

@@ -1,6 +1,6 @@
 {% if devServerIsRunning %}
-<script type="module" src="http://localhost:3000/themes/vite-tailwind/@vite/client"></script>
+<script type="module" src="http://localhost:3000/@vite/client"></script>
-<script type="module" src="http://localhost:3000/themes/vite-tailwind/resources/js/app.js"></script>
+<script type="module" src="http://localhost:3000/resources/js/app.js"></script>
 {% else %}
     {% for css in cssPaths %}
         <link rel="stylesheet" href="{{ ('assets/public/' ~ css)|theme }}">

resources/css/app.css

@@ -1,13 +1,13 @@
-@import '_tailwind-base.css';
+@import "_tailwind-base.css";
 /*@import "_custom-base-styles.css";*/
 
-@import '_tailwind-components.css';
+@import "_tailwind-components.css";
 /*@import '_custom-components.css';*/
 
-@import '_tailwind-utilities.css';
+@import "_tailwind-utilities.css";
 /*@import "_custom-utilities.css";*/
 
-@import './fonts.css';
+@import "./fonts.css";
 
 .outer-container {
   @apply py-10;
@@ -15,21 +15,3 @@
 .container {
   @apply max-w-6xl mx-auto px-5 md:px-10;
 }
-
-.loader {
-    border-radius: 50%;
-    display: inline-block;
-    border-top: 3px solid #fff;
-    border-right: 3px solid transparent;
-    box-sizing: border-box;
-    animation: rotation 0.8s linear infinite;
-}
-
-@keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}

resources/css/toastify.css

@@ -1,82 +0,0 @@
-/*!
- * Toastify js 1.12.0
- * https://github.com/apvarun/toastify-js
- * @license MIT licensed
- *
- * Copyright (C) 2018 Varun A P
- */
-
-.toastify {
-    padding: 12px 20px;
-    color: #ffffff;
-    display: inline-block;
-    position: fixed;
-    opacity: 0;
-    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
-    border-radius: 2px;
-    cursor: pointer;
-    text-decoration: none;
-    z-index: 2147483647;
-}
-
-.toastify.on {
-    opacity: 1;
-}
-
-.toast-close {
-    background: transparent;
-    border: 0;
-    color: white;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: 1em;
-    opacity: 0.4;
-    padding: 0 5px;
-}
-
-.toastify-right {
-    right: 15px;
-}
-
-.toastify-left {
-    left: 15px;
-}
-
-.toastify-top {
-    top: -150px;
-}
-
-.toastify-bottom {
-    bottom: -150px;
-}
-
-.toastify-rounded {
-    border-radius: 25px;
-}
-
-.toastify-avatar {
-    width: 1.5em;
-    height: 1.5em;
-    margin: -7px 5px;
-    border-radius: 2px;
-}
-
-.toastify-center {
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0;
-    max-width: fit-content;
-    max-width: -moz-fit-content;
-}
-
-@media only screen and (max-width: 360px) {
-    .toastify-right,
-    .toastify-left {
-        margin-left: auto;
-        margin-right: auto;
-        left: 0;
-        right: 0;
-        max-width: fit-content;
-    }
-}

resources/icons/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>

resources/js/app.js

@@ -1,87 +1,38 @@
-import Alpine from 'alpinejs';
+import "../css/app.css";
-import Datepicker from 'flowbite-datepicker/Datepicker';
+import Alpine from "alpinejs";
-import de from '../../node_modules/flowbite-datepicker/js/i18n/locales/de.js';
+import Datepicker from "flowbite-datepicker/Datepicker";
+import de from "../../node_modules/flowbite-datepicker/js/i18n/locales/de.js";
 Datepicker.locales.de = de.de;
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import customParseFormat from 'dayjs/plugin/customParseFormat';
+import customParseFormat from "dayjs/plugin/customParseFormat";
 dayjs.extend(customParseFormat);
-import axios from 'axios';
-import {error} from './toast.js';
-
-import '../css/toastify.css';
-import '../css/app.css';
 
 function initDatepicker(el) {
   new Datepicker(el, {
     autohide: true,
-        format: 'dd.mm.yyyy',
+    format: "dd.mm.yyyy",
-        language: 'de',
+    language: "de",
     update: true,
   });
-    el.addEventListener('changeDate', function (event) {
+  el.addEventListener("changeDate", function (event) {
-        event.target.dispatchEvent(new Event('input'));
+    event.target.dispatchEvent(new Event("input"));
   });
 }
 
-document.querySelectorAll('[datepicker]').forEach((el) => initDatepicker(el));
+document.querySelectorAll("[datepicker]").forEach((el) => initDatepicker(el));
 
 window.Alpine = Alpine;
-Alpine.data('form', () => ({
+Alpine.data("form", () => ({
-    sent: false,
-    sending: false,
-    value: {
-        reason: '',
-        date: null,
-        guests: '',
   birthday: null,
-        firstname: '',
+  date: null,
-        lastname: '',
-        address: '',
-        zip: '',
-        location: '',
-        phone: '',
-        email: '',
-        misc: '',
-        parent_email: '',
-        parent_phone: '',
-        parent_name: '',
-        datenschutz: false,
-    },
   isUnder18: function () {
-        if (!this.value.birthday || !this.value.date) {
+    if (!this.birthday || !this.date) {
       return false;
     }
 
-        return dayjs(this.value.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.value.date, 'DD.MM.YYYY'));
+    return dayjs(this.birthday, "DD.MM.YYYY")
-    },
+      .add(18, "year")
-    submit: async function () {
+      .isAfter(dayjs(this.date, "DD.MM.YYYY"));
-        if (this.sending === true) {
-            return;
-        }
-        this.sending = true;
-        try {
-            await axios.post(window.location.pathname, this.value, {
-                headers: {
-                    'X-Winter-Request-Handler': 'anfrage::onSubmit',
-                    'X-Requested-With': 'XMLHttpRequest',
-                },
-            });
-            this.sent = true;
-            window.scrollTo({
-                top: this.$el.getBoundingClientRect().top + window.scrollY - 50,
-                behaviour: 'smooth',
-            });
-            this.sending = false;
-        } catch (e) {
-            this.sending = false;
-            if (!e instanceof axios.AxiosError || !e.response || !e.response.data || !e.response.data['X_WINTER_ERROR_FIELDS']) {
-                throw e;
-            }
-            const errors = e.response.data['X_WINTER_ERROR_FIELDS'];
-            Object.keys(errors).forEach((k) => {
-                errors[k].forEach((msg) => error(msg));
-            });
-        }
   },
 }));
 

resources/js/toast.js

@@ -1,10 +0,0 @@
-import Toastify from 'toastify-js';
-
-export function error(message) {
-    Toastify({
-        text: message,
-        gravity: 'bottom', // `top` or `bottom`
-        className: 'bg-red-800 glow-red-100 text-red-100 text-lg font-semibold max-w-[95vw] md:max-w-[40vw] ring-2 ring-red-500',
-        onClick: function () {}, // Callback after click
-    }).showToast();
-}

tailwind.config.js

@@ -1,12 +1,17 @@
 module.exports = {
-    content: ['./**/*.htm', './node_modules/flowbite/**/*.js', './resources/js/toast.js'],
+  content: ["./**/*.htm", "./node_modules/flowbite/**/*.js"],
-    darkMode: 'class',
+  darkMode: "class",
   theme: {
     extend: {
       fontFamily: {
-                nunito: ['Nunito', 'sans-serif'],
+        nunito: ["Nunito", "sans-serif"],
       },
     },
   },
-    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('flowbite/plugin'), require('tailwind-clip-path')],
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("flowbite/plugin"),
+    require("tailwind-clip-path"),
+  ],
 };

vite.config.js

@@ -1,16 +1,26 @@
-import liveReload from 'vite-plugin-live-reload';
+const Dotenv = require("dotenv");
-import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';
+import liveReload from "vite-plugin-live-reload";
+import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";
 
-export default ({command}) => {
+Dotenv.config();
+
+const ASSET_URL = process.env.ASSET_URL || "http://localhost:3000";
+const VITE_INPUT = process.env.VITE_INPUT || "resources/js/app.js";
+
+export default ({ command }) => {
   return {
-        base: command === 'serve' ? '/themes/vite-tailwind/' : '/themes/vite-tailwind/assets/public/',
+    base:
-        publicDir: 'resources/public',
+      command === "serve"
+        ? "/themes/vite-tailwind/"
+        : "/themes/vite-tailwind/assets/public/",
+    /*base: `${ASSET_URL}`,*/
+    publicDir: "resources/public",
     build: {
-            manifest: 'manifest.json',
+      manifest: "manifest.json",
-            outDir: 'assets/public',
+      outDir: "assets/public",
-            assetsDir: '',
+      assetsDir: "",
       rollupOptions: {
-                input: 'resources/js/app.js',
+        input: `${VITE_INPUT}`,
       },
     },
     server: {
@@ -18,8 +28,11 @@ export default ({command}) => {
       port: 3000,
     },
     resolve: {
-            extensions: ['.js', '.mjs'],
+      extensions: [".js", ".mjs"],
     },
-        plugins: [liveReload('./**/*.htm'), VitePluginSvgSpritemap('./resources/icons/*.svg')],
+    plugins: [
+      liveReload("./**/*.htm"),
+      VitePluginSvgSpritemap("./resources/icons/*.svg"),
+    ],
   };
 };