Update submodules

.env.development

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://192.168.188.38/Jonas/ritzenbergenapi

.env.production

@@ -0,0 +1 @@
+VITE_BACKEND_URL=https://api.ritzenbergen.de

.gitignore

@@ -1,25 +1,28 @@
-# Nuxt dev/build outputs
-.output
-.data
-.nuxt
-.nitro
-.cache
-dist
-
-# Node dependencies
-node_modules
-
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Misc
+node_modules
-.DS_Store
+dist
-.fleet
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+package-lock.json
 
-# Local env files
+src-tauri/target
-.env
+src-tauri/gen
-.env.*
-!.env.example
-app/bilder

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "app/dto"]
+[submodule "src/dto"]
-	path = app/dto
+	path = src/dto
-	url = https://git.ritzenbergen.de/R40fendt/ritzenbergen-dto.git
+	url = https://git.ritzenbergen.de/Jonas/ritzenbergen-dto.git

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:26-alpine
+FROM node:20-alpine
 
 WORKDIR /app
 

README.md

@@ -1,75 +1,15 @@
-# Nuxt Minimal Starter
+# ritzenbergen
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+[https://ritzenbergen.de](https://ritzenbergen.de) - Neue, private Homepage für das kleine Dorf Ritzenbergen
 
-## Setup
 
-Make sure to install dependencies:
+Bei der Migration beachten:
-
+- neue galerie-kommentare Tabelle
-```bash
+- addhit URL in der index.html anpassen
-# npm
+- Event-Datenbank anpassen
-npm install
+- Neue Formulartabelle
-
+- .env.production anpassen 
-# pnpm
+- Salt ändern (secret.php in der API)
-pnpm install
+- Event-Tabelle updaten (neue Formular-Spalte)
-
+- Admin-Tabellen hinzufügen
-# yarn
+- WEBKIT_DISABLE_COMPOSITING_MODE=1 zum Starten der Tauri-App unter Wayland
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -1,3 +0,0 @@
-<template>
-    <NuxtPage/>
-</template>

app/assets/main.scss

@@ -1,9 +0,0 @@
-@use "~/assets/mobirise/css/additional.scss";
-@use "~/assets/dropdown/css/style.scss";
-
-html,
-body,
-#app {
-  width: 100vw;
-  margin: 0;
-}

app/components/EmblaItem.vue

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
-</script>
-<template>
-  <div
-    class="embla__slide slider-image item"
-    style="margin-left: 1rem; margin-right: 1rem"
-  >
-    <div class="slide-content">
-      <div class="item-img">
-        <div class="item-wrapper">
-          <NuxtLink :to="link">
-            <img
-              :src="
-                src
-              "
-            />
-            <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
-              {{ jahr }}
-            </span>
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.item-wrapper {
-  position: relative;
-}
-  .jahr-overlay {
-    color: white;
-    mix-blend-mode: difference;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-  }
-</style>

app/pages/galerie.vue

@@ -1,131 +0,0 @@
-<script lang="ts" setup>
-import Navbar from "../components/Navbar.vue";
-import Embla from "../components/Embla.vue";
-import MyFooter from "../components/MyFooter.vue"; 
-
-const { $gql } = useNuxtApp();
-
-function mapperSrc(event:string, jahr:number){
-  return "http://localhost:3000/api/galerie/randomimage/"+event+"/"+jahr;
-}
-function mapperLink(event:string, jahr:number){
-  return "/bildvorschau/"+event+"/"+jahr;
-}
-
-const events = await $gql.request<{
-  erntefest: Array<{jahr:number}>,
-  osterfeuer: Array<{jahr:number}>,
-  fussball: Array<{jahr:number}>,
-  doppelkopf: Array<{jahr:number}>
-}>(`
-{
-  erntefest: bilder(event: "erntefest") {
-    jahr
-  }
-
-  osterfeuer: bilder(event: "osterfeuer") {
-    jahr
-  }
-
-  doppelkopf: bilder(event: "doppelkopf") {
-    jahr
-  }
-
-  fussball: bilder(event: "fussball") {
-    jahr
-  }
-}
-
-`);
-  
-const mappedEvents=[
-  {
-    "title":"Erntefest",
-    "src": events.erntefest.map((event)=>mapperSrc("erntefest",event.jahr)),
-    "links": events.erntefest.map((event)=>mapperLink("erntefest",event.jahr)),
-    "id":"erntefest",
-    "jahre": events.erntefest.map((event)=>event.jahr)
-  },
-  {
-    "title":"Osterfeuer",
-    "src": events.osterfeuer.map((event)=>mapperSrc("osterfeuer",event.jahr)),
-    "links": events.osterfeuer.map((event)=>mapperLink("osterfeuer",event.jahr)),
-    "id":"osterfeuer",
-    "jahre": events.osterfeuer.map((ev)=>ev.jahr),
-  },
-  {
-    "title":"Preisdoppelkopf",
-    "src": events.doppelkopf.map((event)=>mapperSrc("doppelkopf",event.jahr)),
-    "links": events.doppelkopf.map((event)=>mapperLink("doppelkopf",event.jahr)),
-    "id":"doppelkopf",
-    "jahre": events.doppelkopf.map((ev)=>ev.jahr),
-  },
-  {
-    "title":"Fußballturniere",
-    "src": events.fussball.map((event)=>mapperSrc("fussball",event.jahr)),
-    "links": events.fussball.map((event)=>mapperLink("fussball",event.jahr)),
-    "id":"fussball",
-    "jahre": events.fussball.map((ev)=>ev.jahr),
-  },
-]
-
-
-</script>
-<template>
-  <Navbar :links="[
-    { title: 'Erntefest', link: '/galerie/#erntefest' },
-    { title: 'Osterfeuer', link: '/galerie/#osterfeuer' },
-    { title: 'Doppelkopf', link: '/galerie/#doppelkopf' },
-    { title: 'Fußballturniere', link: '/galerie/#fussball' },
-  ]" />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-  <br />
-
-  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-md-12 col-lg-10">
-          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
-            <strong>Willkommen in der Galerie</strong>
-          </h3>
-          <p class="mbr-text mbr-fonts-style display-7">
-            In unserem Fotoalbum findest du chronisch geordnete Bilder
-            verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
-            auf ein Bild mit einer Jahreszahl raufklicken.
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <br /><br />
-  <section
-    class="slider4 mbr-embla cid-u6k7q0yLdW"
-    v-for="event in mappedEvents"
-    :id="event.id"
-  >
-    <div class="container-fluid">
-      <div class="row">
-        <h4
-          class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
-        >
-          <strong>{{ event.title }}</strong>
-        </h4>
-        <div class="col-12">
-          <br />
-          <!-- src: Link zum Randomimage, links: Link zur Bildschau -->
-          <Embla :src="event.src" :links="event.links" :jahre="event.jahre" />
-        </div>
-      </div>
-    </div>
-    <br /><br /><br />
-  </section>
-	<h1 v-if="mappedEvents.length==0">Keine Internetverbindung!</h1>
-    <br /><br /><br />
-  <MyFooter />
-</template>
-<style scoped></style>

app/pages/index.vue

@@ -1,69 +0,0 @@
-<script lang="ts" setup>
-import Navbar from "../components/Navbar.vue";
-import Embla from "../components/Embla.vue";
-import Umgebung from "../components/startseite/Umgebung.vue";
-import MyFooter from "../components/MyFooter.vue"; 
-import WillkommenText from "../components/startseite/WillkommenText.vue";
-import Bilderbuch from "../components/startseite/Bilderbuch.vue";
-import Forms from "../components/startseite/Forms.vue";
-import Events from "../components/startseite/Events.vue";
-import Willkommen from "../components/startseite/Willkommen.vue";
-import { ref } from "vue";
-
-
-const images=ref(["http://localhost:3000/api/galerie/randomimage/erntefest","http://localhost:3000/api/galerie/randomimage/osterfeuer","http://localhost:3000/api/galerie/randomimage/doppelkopf","http://localhost:3000/api/galerie/randomimage/fussball","http://localhost:3000/api/galerie/bild/andere/0/hauptfoto.jpg"]);
-</script>
-
-<template>
-  <!-- Startseite -->
-  <Navbar />
-  <Willkommen/>
-  
-  
-  <Events style="margin-top: 120px;"/>
-
-  <Forms/>
-      
-
-  <Bilderbuch/>
-
-
-
-	<section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12">
-
-          <Embla :src="images"
-          :font-size="49"
-
-          :links='[
-            "/galerie/#erntefest",
-            "/galerie/#osterfeuer",
-            "/galerie/#doppelkopf",
-            "/galerie/#fussball",
-            ""
-          ]'
-          :jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-
-
-
-
-  <WillkommenText ref="willkommen"/>
-
-
-  <br>
-  <br>
-
-
-  <Umgebung ref="umgebung" id="umgebung" />
-  <MyFooter ref="footer" />
-
-</template>
-
-<style lang="css" scoped></style>

app/plugins/graphql.ts

@@ -1,16 +0,0 @@
-import { GraphQLClient } from "graphql-request";
-
-export default defineNuxtPlugin(() => {
-  const config=useRuntimeConfig();
-
-  const endpoint = import.meta.server
-  ? config.graphqlEndpoint
-  : config.public.graphqlEndpoint
-
-  const client = new GraphQLClient(endpoint);
-  return {
-    provide: {
-      gql: client
-    }
-  }
-});

app/plugins/my-fetch.ts

@@ -1,15 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig()
-
-  const myfetch = $fetch.create({
-    baseURL: import.meta.server ? config.apiBase : config.public.apiBase,
-    onRequest({ options }) {
-    },
-  })
-
-  return {
-    provide: {
-      myfetch: myfetch,
-    },
-  }
-})

eslint.config.js

@@ -0,0 +1,30 @@
+import eslint from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import typescriptEslint from "typescript-eslint";
+
+export default typescriptEslint.config(
+	{ ignores: ["*.d.ts", "**/coverage", "**/dist"] },
+	{
+		extends: [
+			eslint.configs.recommended,
+			...typescriptEslint.configs.recommended,
+			...eslintPluginVue.configs["flat/recommended"],
+		],
+		files: ["**/*.{ts,vue}"],
+		languageOptions: {
+			ecmaVersion: "latest",
+			sourceType: "module",
+			globals: globals.browser,
+			parserOptions: {
+				parser: typescriptEslint.parser,
+			},
+		},
+		rules: {
+			// your rules
+			"@typescript-eslint/no-explicit-any": "warn",
+		},
+	},
+	eslintConfigPrettier
+);

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Willkommen auf ritzenbergen.de</title>
+    
+
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap" as="style"
+      onload="this.onload=null;this.rel='stylesheet'">
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap">
+    </noscript>
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+		<!-- <script src="http://192.168.188.38/Jonas/ritzenbergenapi/addhit.php"></script> -->
+
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

nuxt.config.ts

@@ -1,55 +0,0 @@
-import { GraphQLClient } from "graphql-request";
-
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
-  devtools: { enabled: true },
-  ssr: false,
-  modules: ["@formkit/nuxt"],
-  devServer: {
-    port: 1420
-  },
-  runtimeConfig: {
-    graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_INTERNAL || "http://localhost:3000/graphql",
-    apiBase: process.env.API_BASE_INTERNAL || "http://localhost:3000/api",
-    public: {
-      graphqlEndpoint: process.env.GRAPHQL_ENDPOINT_PUBLIC || "http://backend:3000/graphql",
-      apiBase: process.env.API_BASE_PUBLIC || "http://backend:3000/api"
-    }
-  },
-
-  css: [
-    '~/assets/mobirise/css/additional.scss',
-    '~/assets/web/assets/mobirise-icons2/mobirise2.css',
-    '~/assets/parallax/jarallax.css',
-    '~/assets/bootstrap/css/bootstrap.min.css',
-    '~/assets/bootstrap/css/bootstrap-grid.min.css',
-    '~/assets/bootstrap/css/bootstrap-reboot.min.css',
-    '~/assets/dropdown/css/style.scss',
-    '~/assets/socicon/css/styles.css',
-    '~/assets/animatecss/animate.css',
-    '~/assets/theme/css/style.css',
-    '~/assets/css/index.css',
-    '~/assets/main.scss'
-  ],
-  app: {
-    head: {
-      link: [
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-        },
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap"
-        },
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
-        }
-      ]
-    }
-
-  }
-  
-})

package.json

@@ -1,40 +1,51 @@
 {
-  "name": "nuxt-test",
+  "name": "ritzenbergen",
-  "type": "module",
   "private": true,
+  "version": "0.1.0",
+  "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "dev": "vite",
-    "dev": "nuxt dev",
+    "build": "vite build",
-    "generate": "nuxt generate",
+    "preview": "vite preview",
-    "preview": "nuxt preview",
+    "tauri": "tauri",
-    "postinstall": "nuxt prepare"
+    "tauridev": "tauri dev",
+    "tauribuild": "tauri build"
   },
   "dependencies": {
-    "@formkit/nuxt": "^2.0.0",
+    "@formkit/themes": "^1.7.2",
-    "@formkit/themes": "^2.0.0",
+    "@formkit/vue": "^1.7.2",
-    "@formkit/vue": "^2.0.0",
-    "@nuxtjs/tailwindcss": "^6.14.0",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
     "bcryptjs": "^3.0.3",
     "crypto-js": "^4.2.0",
     "embla-carousel-vue": "^8.6.0",
     "graphql-request": "^7.4.0",
-    "jarallax": "^3.0.0",
+    "jarallax": "^2.2.1",
-    "katex": "^0.17.0",
+    "jquery": "^3.7.1",
+    "katex": "^0.16.27",
     "moment": "^2.30.1",
-    "nuxt": "^4.4.2",
     "process": "^0.11.10",
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vscode-langservers-extracted": "^4.10.0",
-    "vue": "^3.5.32",
+    "vue": "^3.5.13",
+    "vue-async-computed": "^4.0.1",
     "vue-renderer-markdown": "^0.0.62",
-    "vue-router": "^5.0.4"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^2.10.1",
+    "@tauri-apps/cli": "^2",
+    "@types/jquery": "^3.5.32",
     "@types/markdown-it": "^14.1.2",
-    "sass-embedded": "^1.99.0"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^16.5.0",
+    "sass-embedded": "^1.86.3",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
   }
 }

public/robots.txt

@@ -1,2 +0,0 @@
-User-Agent: *
-Disallow:

src/App.vue

@@ -0,0 +1,39 @@
+<script lang="js">
+import { RouterView } from 'vue-router';
+import Kloenkasten from "./components/Kloenkasten.vue";
+
+export default {
+    components: {
+        RouterView,
+				Kloenkasten
+    }
+}
+</script>
+
+<template>
+  <!-- Haupt-Component -->
+  <RouterView :key="$route.fullPath" />
+	
+	<Kloenkasten />
+</template>
+
+<style lang="scss">
+
+@use "assets/mobirise/css/additional.scss";
+    @import "assets/web/assets/mobirise-icons2/mobirise2.css";
+    @import "assets/parallax/jarallax.css";
+    @import "assets/bootstrap/css/bootstrap.min.css";
+    @import "assets/bootstrap/css/bootstrap-grid.min.css";
+    @import "assets/bootstrap/css/bootstrap-reboot.min.css";
+    @import "assets/dropdown/css/style.scss";
+    @import "assets/socicon/css/styles.css";
+    @import "assets/animatecss/animate.css";
+    @import "assets/theme/css/style.css";
+    @import "./assets/css/index.css";
+
+    html, body, #app{
+        width: 100vw;
+        margin: 0;
+    }
+    
+</style>