Merge pull request 'Update dependency katex to ^0.17.0' (#9) from renovate/katex-0.x into nuxt

Reviewed-on: #9

.gitmodules

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

Dockerfile.dev

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

app/app2.vue

@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
-</template>

app/components/Embla.vue

@@ -1,6 +1,5 @@
-<script setup>
+<script setup lang="ts">
 import emblaCarouselVue from "embla-carousel-vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
 import { onMounted, ref } from "vue";
 import EmblaItem from "./EmblaItem.vue";
 
@@ -42,13 +41,22 @@ defineProps({
     type: Array,
     required: true,
   },
+  jahre: {
+    type: Array,
+    required: false,
+  },
+  fontSize:{
+    type: Number,
+    required: false,
+    default: 100
+  }
 });
 </script>
 
 <template>
   <div class="embla" ref="emblaRef">
     <div class="embla__container">
-      <EmblaItem v-for="el, i in src" :src="el" :link="links[i]" />
+      <EmblaItem v-for="el, i in src" :src="el" :jahr="jahre?jahre[i]:null" :link="links[i]" :font-size="fontSize"/>
     </div>
     <button class="embla__button embla__button--prev" @click="prev">
       <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

app/components/EmblaItem.vue

@@ -1,7 +1,5 @@
-<script lang="ts">
+<script lang="ts" setup>
-export default {
+const {src, link, jahr, fontSize}=defineProps(["src", "link","jahr","fontSize"]);
-  props: ["src", "link"],
-};
 </script>
 <template>
   <div
@@ -11,16 +9,31 @@ export default {
     <div class="slide-content">
       <div class="item-img">
         <div class="item-wrapper">
-          <RouterLink :to="link">
+          <NuxtLink :to="link">
             <img
               :src="
                 src
               "
             />
-          </RouterLink>
+            <span class="jahr-overlay" v-if="jahr" :style="{'font-size': fontSize+'px'}">
+              {{ jahr }}
+            </span>
+          </NuxtLink>
         </div>
       </div>
     </div>
   </div>
 </template>
-<style></style>
+<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/components/MyFooter.vue

@@ -17,7 +17,7 @@ export default {
   <section
     class="footer3 cid-u6k7q0Blvk"
     once="footers"
-    id="footer-6-u6k7q0Blvk"
+    id="footer"
   >
     <div class="container">
       <div class="row">
@@ -41,7 +41,7 @@ export default {
                   <br />
                   
                 </p>
-								<RouterLink to="/adminpanel/login">Admin Login</RouterLink>
+								<NuxtLink to="/adminpanel/login">Admin Login</NuxtLink>
               </Modal>
 
               <button @click="aboutVisible=true" class="text-white btn-ueber openBtn">Über</button>

app/components/Navbar.vue

@@ -15,8 +15,8 @@ export default {
     return {
       datalinks: [
         { link: "/galerie", title: "Galerie" },
-        { link: "/umgebung", title: "Umgebung" },
+        { link: "/#umgebung", title: "Umgebung" },
-        { link: "/footer", title: "Kontakt" },
+        { link: "/#footer", title: "Kontakt" },
         { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
       buttontextdata: "Über Ritzenbergen",
@@ -58,18 +58,18 @@ export default {
       <div class="container">
         <div class="navbar-brand">
           <span class="navbar-logo">
-            <span href="/">
+            <NuxtLink to="/">
               <img
                 class="navbar-logo-img"
                 src="../assets/RitzenbergenOrtsschild.png"
                 style="height: 60px; padding-left: 5px"
               />
-            </span>
+            </NuxtLink>
           </span>
           <span class="navbar-caption-wrap">
-            <span class="navbar-caption text-black display-4" href="/"
+            <NuxtLink to="/" class="navbar-caption text-black display-4">
-              >Amedorf & Ritzenbergen</span
+              Amedorf & Ritzenbergen
-            >
+            </NuxtLink>
           </span>
         </div>
         <button
@@ -95,13 +95,13 @@ export default {
 				<div class="navbar-collapse opacityScroll" :class="{show: !isNavCollapsed, collapsing: isCollapsing, collapse: !isCollapsing}" id="navbarSupportedContent">
           <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
             <li class="nav-item" v-for="link in datalinks">
-              <span
+              <NuxtLink
                 class="nav-link link text-black display-4"
-                :href="link.link"
+                :to="link.link"
                 aria-expanded="false"
               >
                 {{ link.title }}
-              </span>
+              </NuxtLink>
             </li>
           </ul>
           <div class="navbar-buttons mbr-section-btn">

app/components/startseite/Bilderbuch.vue

@@ -1,38 +1,37 @@
 <script lang="ts" setup>
-import RitzenbergenLib from "../../ritzenbergenlib.ts";
 import {ref} from "vue";
 
-async function loadImage(path: string) {
+// async function loadImage(path: string) {
-	try{
+// 	try{
-	const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
+// 	const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
-		headers: {
+// 		headers: {
-				"Accept":"image/png"
+// 				"Accept":"image/png"
-		}
+// 		}
-	});
+// 	});
-	if(!response.ok) return false;
+// 	if(!response.ok) return false;
-	const blob = await response.blob();
+// 	const blob = await response.blob();
-	return URL.createObjectURL(blob);
+// 	return URL.createObjectURL(blob);
 
-		}
+// 		}
-		catch(e){
+// 		catch(e){
-				console.warn(e);
+// 				console.warn(e);
-		}
+// 		}
-}
+// }
 
-loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
+// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
-		images.value[0]=url;
+// 		images.value[0]=url;
-});
+// });
-loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
+// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
-		images.value[1]=url;
+// 		images.value[1]=url;
-});
+// });
-loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
+// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
-		images.value[2]=url;
+// 		images.value[2]=url;
-});
+// });
-loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
+// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
-		images.value[3]=url;
+// 		images.value[3]=url;
-});
+// });
 
-const images=ref([]);
+const images=ref(["bild1","bild2","bild3","bild4"]);
 </script>
 <template>
 	<section
@@ -64,9 +63,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/doppelkopf"
+								<NuxtLink to="/galerie/#doppelkopf"
 									><img :src="images[0]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -75,9 +74,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/erntefest"
+								<NuxtLink to="/galerie/#erntefest"
 									><img :src="images[1]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -86,9 +85,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/fussball"
+								<NuxtLink to="/galerie/#fussball"
 									><img :src="images[2]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>
@@ -97,9 +96,9 @@ const images=ref([]);
 					>
 						<div class="item-wrapper">
 							<div class="item-img">
-								<RouterLink to="/galerie/osterfeuer"
+								<NuxtLink to="/galerie/#osterfeuer"
 									><img :src="images[3]"
-								/></RouterLink>
+								/></NuxtLink>
 							</div>
 						</div>
 					</div>

app/components/startseite/Forms.vue

@@ -5,8 +5,9 @@ import { ref } from "vue";
 import Modal from "../Modal.vue";
 import { Formular } from "../../dto/formular.dto";
 
-async function init() {
+const { $gql, $myfetch } = useNuxtApp();
-	forms.value=await RitzenbergenLib.graphqlClient.request<{formulare: Formular[] }>(`
+
+const forms = await $gql.request<{formulare: Formular[] }>(`
 {
 	formulare {
 		id
@@ -31,33 +32,18 @@ async function init() {
 	}
 }
 `
-	).then(data=>data.formulare);
+).then(data=>data.formulare);
 
-	console.log(forms.value);
-}
-
-const forms = ref([] as Formular[]);
-
-const props=defineProps({
-		formid: {
-				type: [Number, null],
-				required: false,
-				default: null 
-		}
-});
-
-init();
 
 function submit($event: Event) {
-	const url = new URL(
+	console.log($event);
-		RitzenbergenLib.RitzenbergenLib.api("/formulare/submit.php")
+	if($event.target==null) return;
-	);
 	const formData = new FormData(<HTMLFormElement>$event.target); 
-	fetch(url.toString(), {
+	const body = Object.fromEntries(formData);
+	$myfetch("/formulare/submit/"+(<HTMLFormElement>$event.target).dataset.formid,{
 		method: "POST",
-		body: formData	
+		body
 	}).then(() => {
-		init();
 		values.value={};
 	});
 }
@@ -109,6 +95,7 @@ const values=ref({});
 							:data-i="i"
 							@submit.prevent="submit"
 						>
+
 							<div v-for="(field, j) in form.fields" :key="j">
 								<label
 									v-if="field.placeholder == null"
@@ -160,7 +147,6 @@ const values=ref({});
 									Absenden
 								</button>
 							</div>
-							<input type="hidden" :value="form.id" name="internalformid" />
 						</form>
 					</div>
 				</div>

app/dto/README.md

@@ -1,3 +0,0 @@
-# Ritzenbergen DTO
-
-- Test

app/dto/event.dto.ts

@@ -1,23 +0,0 @@
-
-
-export class MyEvent {
-
-    id: number;
-    eventname: string;
-    datum: Date;
-    type: EventType;
-    content: string;
-    minitext: string;
-    link: string|null;
-    foto: string;
-    formular: number|null;
-
-}
-
-export enum EventType {
-    html = "html",
-    markdown = "markdown",
-    fotos = "fotos",
-    link = "link",
-    dlink = "dlink"
-}

app/dto/formular.dto.ts

@@ -1,55 +0,0 @@
-export class Formular {
-	public id: number;
-	public name: string;
-	public minitext: string;
-	public ispublic: boolean;
-	public multiple: boolean;
-	public fields: MyField[];
-	public results: FormularResults[];
-}
-
-export enum FieldType {
-	TEXT = "text",
-	PASSWORD = "password",
-	NUMBER = "number",
-	RANGE = "range",
-	DATE = "date",
-	TIME = "time",
-	CHECKBOX = "checkbox",
-	RADIO = "radio",
-	COLOR = "color",
-	SUBMIT = "submit",
-	TEXTAREA = "textarea"
-}
-
-export class MyField {
-	id?: number;
-	formular: number;
-	name: string;
-	displayname?: string | null;
-	value: string;
-	displayvalue?: string | null;
-	placeholder?: string | null;
-	type: FieldType;
-	title?: string | null; 
-	required: boolean;
-	maxlength?: number | null;
-	min?: number | null;
-	max?: number | null;
-	checked?: boolean | null;
-}
-
-export class FormularResult {
-	id: number;
-	parentid: number;
-	parentobj: FormularResults;
-	name: string;
-	value: string;
-}
-
-export class FormularResults {
-	id:number;
-	formular: Formular;
-	formularid: number;
-	results: FormularResult[];
-}

app/pages/Galerie.vue

@@ -1,164 +0,0 @@
-<script lang="js">
-import Navbar from "../components/Navbar.vue";
-import Embla from "../components/Embla.vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
-import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
-import $ from "jquery";
-
-export default {
-  components: {
-    Navbar,
-    Embla,
-    MyFooter, // Geändert von Footer auf MyFooter
-  },
-  computed: {
-    events() {
-      let erntefeste = this.get_jahre("erntefest");
-      let osterfeuer = this.get_jahre("osterfeuer");
-      let doppelkopf = this.get_jahre("doppelkopf");
-      let fussball = this.get_jahre("fussball");
-			if(erntefeste==undefined) return []; 
-				let result = [
-        {
-          src: erntefeste.map((erntefest) =>
-            RitzenbergenLib.RitzenbergenLib.api(
-              "randomimage.php?path=/erntefest/" +
-                erntefest +
-                "&recursive=1&tn=1&text=" +
-                erntefest +
-                "&color=white"
-            )
-          ),
-          title: "Erntefeste",
-          ev: "erntefest",
-        },
-        {
-          src: osterfeuer.map((osterfeuer) =>
-            RitzenbergenLib.RitzenbergenLib.api(
-              "randomimage.php?path=/osterfeuer/" +
-                osterfeuer +
-                "&recursive=1&tn=1&text=" +
-                osterfeuer +
-                "&color=white"
-            )
-          ),
-          title: "Osterfeuer",
-          ev: "osterfeuer",
-        },
-        {
-          src: doppelkopf.map((doppelkopf) =>
-            RitzenbergenLib.RitzenbergenLib.api(
-              "randomimage.php?path=/doppelkopf/" +
-                doppelkopf +
-                "&recursive=1&tn=1&text=" +
-                doppelkopf +
-                "&color=white"
-            )
-          ),
-          title: "Doppelkopf",
-          ev: "doppelkopf",
-        },
-        {
-          src: fussball.map((fussball) =>
-            RitzenbergenLib.RitzenbergenLib.api(
-              "randomimage.php?path=/fussball/" +
-                fussball +
-                "&recursive=1&tn=1&text=" +
-                fussball +
-                "&color=white"
-            )
-          ),
-          title: "Fußballturniere",
-          ev: "fussball",
-        },
-      ];
-
-      return result.map((ev) => {
-        let jahre = this.get_jahre(ev.ev);
-        ev.links = jahre.map((jahr) => {
-          return "/bild/" + ev.ev + "/" + jahr;
-        });
-        return ev;
-      });
-    },
-  },
-  methods: {
-    get_jahre(event) {
-      let result;
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_jahre.php"), {
-        success(data) {
-          result = JSON.parse(data);
-        },
-        async: false,
-        data: { event },
-      });
-      return result;
-    },
-  },
-  mounted(){
-    if(this.$route.params.ev){
-      let ev = this.$route.params.ev;
-      
-      if(this.$refs[ev]) this.$refs[ev][0].scrollIntoView();
-      this.$router.push("/galerie");
-    }
-  }
-};
-</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"
-    :ref="event.ev"
-    v-for="event in events"
-  >
-    <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 />
-          <Embla :src="event.src" :links="event.links" />
-        </div>
-      </div>
-    </div>
-    <br /><br /><br />
-  </section>
-	<h1 v-if="events.length==0">Keine Internetverbindung!</h1>
-    <br /><br /><br />
-  <MyFooter />
-</template>
-<style scoped></style>

app/pages/adminpanel/login.vue

@@ -2,7 +2,7 @@
 		import Navbar from "../../components/Navbar.vue";
 		import { ref } from "vue";
 		import { useRouter } from 'vue-router'
-		import RitzenbergenLib from "../../ritzenbergenlib.ts";
+		import RitzenbergenLib from "../../ritzenbergenlib";
 		
 		
 

app/pages/bildschau/[event]/[year]/[i].vue

@@ -1,28 +1,71 @@
 <script lang="ts">
-import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
+import type { JahrMitBild } from "~/dto/galerie.dto";
-import Navbar from "../components/Navbar.vue";
+import MyFooter from "../../../../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
-import RitzenbergenLib from "../ritzenbergenlib";
+import Navbar from "../../../../components/Navbar.vue";
-import $ from "jquery";
+import RitzenbergenLib from "../../../../ritzenbergenlib";
+const route=useRoute();
+
+const {$gql} = useNuxtApp();
+
 
 export default {
 	components: {
 		Navbar,
 		MyFooter, // Geändert von Footer auf MyFooter
 	},
+	onMounted(){
+		console.log($gql.request<{bilder:JahrMitBild[]}>(`
+{
+	bilder(event: "${route.params.ev}", jahr: ${route.params.jahr}) {
+
+		jahr
+		bild
+	
+	}
+}
+		`));
+		
+	},
 	data() {
+		
+
 		return {
-			bild: parseInt(<string>this.$route.params.bild),
+			bild: parseInt(<string>route.params.i),
-			ev: this.$route.params.ev,
+			ev: route.params.ev,
-			jahr: this.$route.params.jahr,
+			jahr: route.params.jahr,
 			RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
 			username: "",
 			kommentar: "",
-			reloader: false
+			reloader: false,
+			bilder: [],
 		};
 	},
 	asyncComputed: {
 		kommentare: {
 			get() {
+							},
+			default: null,
+			watch: ["bild", "ev", "jahr","reloader"],
+		},
+		bilder: {
+			get(){
+				// erwartete Rückgabe: ["/erntefest/2011/pi01.jpg"]
+				return $gql.request(`
+{
+	bilder(event: "${route.params.event}", jahr: ${route.params.year})
+}
+
+`).then(()=>{
+
+				});
+			},
+			default: [],
+			watch: []
+
+		}
+	},
+	methods: {
+		getKommentare(){
 				const url = new URL(
 					RitzenbergenLib.RitzenbergenLib.api(
 						"/galerie/get_kommentare.php"
@@ -34,34 +77,8 @@ export default {
 				return fetch(url, {
 					method: "GET",
 				}).then((response) => response.json());
-			},
-			default: null,
-			watch: ["bild", "ev", "jahr","reloader"],
-		},
-	},
-	computed: {
-		bilder() {
-			let result: any[] = [];
 
-			$.ajax(
-				RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),
-				{
-					async: false,
-					success(data: string) {
-						result = JSON.parse(data);
-					},
-					method: "GET",
-					data: {
-						ev: this.ev,
-						jahr: this.jahr,
-					},
-				}
-			);
-
-			return result;
 		},
-	},
-	methods: {
 		kommentarsubmit() {
 			const url = new URL(
 				RitzenbergenLib.RitzenbergenLib.api(
@@ -153,7 +170,7 @@ export default {
 	<MyFooter></MyFooter>
 </template>
 <style scoped lang="scss">
-@import "../assets/bildschau/style.sass";
+@import "../../../../assets/bildschau/style.sass";
 
 .roboto-thin {
 	font-family: "Roboto", sans-serif;

app/pages/bildvorschau/[event]/[year].vue

@@ -1,83 +1,76 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { RouterLink } from "vue-router";
+import Navbar from "../../../components/Navbar.vue";
-import Navbar from "../components/Navbar.vue";
+import Footer from "../../../components/MyFooter.vue";
-import RitzenbergenLib from "../ritzenbergenlib";
+import type { JahrMitBild } from "~/dto/galerie.dto";
-import Footer from "../components/MyFooter.vue";
-import $ from "jquery";
 
-export default {
+const route=useRoute();
-  data() {
-    return {
-      ev: this.$route.params.ev,
-      jahr: this.$route.params.jahr,
-      RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
-    };
-  },
-  computed: {
-    bilder() {
-      let result: any[] = [];
 
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_bilder.php"),{
+const {event, year} = route.params;
-        async: false,
+
-        success(data: string) {
+function capitalizeFirstLetter(str: string){
-          result=JSON.parse(data);
+
-        },
+  if (str.length === 0) return str;
-        method: "GET",
+  return str[0].toUpperCase() + str.slice(1);
-        data: {
+
-          ev: this.ev,
+}
-          jahr: this.jahr
+
-        }
+const {$gql} = useNuxtApp();
-      });
+
+const bilder: string[]=(await $gql.request<{bilder:JahrMitBild[]}>(`
+{
+  bilder(event: "${event}", jahr: ${year}) {
+    jahr
+    bild
+  }
+}
+`)).bilder[0].bild;
+
+function toTable<T>(input: T[], columns: number = 5): T[][] {
+    if (columns <= 0) {
+        throw new Error("columns must be > 0");
+    }
+
+    const result: T[][] = [];
+
+    for (let i = 0; i < input.length; i += columns) {
+        const row = input.slice(i, i + columns);
+        result.push(row);
+    }
+
+    return result;
+}
+
+function getImg(filename){
+
+  return 'http://localhost:3000/api/galerie/bild/'+event+'/'+year+'/'+filename;
+
+}
+
+const bildersplitted=toTable<string>(bilder);
+console.log(bildersplitted);;
 
-      return result;
-    },
-    bildersplitted() {
-      let result: any[] = [];
-      this.bilder.forEach((element, i) => {
-        if (i % 5 == 0) {
-          result.push([]);
-        }
-        result[result.length - 1].push(element);
-      });
-      return result;
-    },
-    einereihe() {
-      return this.bilder.length <= 5;
-    },
-  },
-  components: {
-    RouterLink,
-    Navbar,
-    Footer,
-  },
-  methods: {
-    capitalizeFirstLetter(str: string) {
-      return str.charAt(0).toUpperCase() + str.slice(1);
-    },
-  },
-};
 </script>
 <template>
   <Navbar />
   <section class="galerie-section">
     <div class="galerie-container">
-      <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
+      <h2>{{ capitalizeFirstLetter(<string>event) }} {{ year }}</h2>
       Vorschaubilder <br />
       {{ bilder.length }} Bilder
       <table>
         <tbody>
           <tr v-for="row, i in bildersplitted">
             <td v-for="column, j in row">
-              <RouterLink :to="jahr+'/'+(i*5+j).toString()"
+              <NuxtLink :to="'/bildschau/'+event+'/'+year+'/'+(i*5+j)"
-                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
+                ><img :src="getImg(column)" alt="Vorschaubild"
-              /></RouterLink>
+              /></NuxtLink>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   </section>
-  <div class="platzhalter" v-if="einereihe"></div>
+  <div class="platzhalter" v-if="bilder.length<=5"></div> <!-- Eine Reihe -->
   <Footer></Footer>
 </template>
 <style scoped>

app/pages/bulitipp.vue

@@ -6,10 +6,9 @@ import Uebersicht from "../components/bulitipp/Uebersicht.vue";
 import Rangliste from "../components/bulitipp/Rangliste.vue";
 import Paarungsergebnisse from "../components/bulitipp/Paarungsergebnisse.vue";
 import Tabelle from "../components/bulitipp/Tabelle.vue";
-import RitzenbergenLib from "../ritzenbergenlib.ts";
+import RitzenbergenLib from "../ritzenbergenlib";
-import SpieltagSumme from "../ritzenbergenlib.ts";
+import SpieltagSumme from "../ritzenbergenlib";
 import Loading from "../components/bulitipp/Loading.vue";
-import $ from "jquery";
 import Tippen from "../components/bulitipp/Tippen.vue";
 import TippenEinloggen from "../components/bulitipp/TippenEinloggen.vue";
 

app/pages/galerie.vue

@@ -0,0 +1,131 @@
+<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,10 +1,8 @@
 <script lang="ts" setup>
 import Navbar from "../components/Navbar.vue";
-import Modal from "../components/Modal.vue";
 import Embla from "../components/Embla.vue";
 import Umgebung from "../components/startseite/Umgebung.vue";
-import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
+import MyFooter from "../components/MyFooter.vue"; 
-import RitzenbergenLib from "../ritzenbergenlib";
 import WillkommenText from "../components/startseite/WillkommenText.vue";
 import Bilderbuch from "../components/startseite/Bilderbuch.vue";
 import Forms from "../components/startseite/Forms.vue";
@@ -13,35 +11,7 @@ import Willkommen from "../components/startseite/Willkommen.vue";
 import { ref } from "vue";
 
 
-const images=ref([]);
+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"]);
-async function loadImage(path: string) {
-	try{
-	const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
-		headers: {
-				"Accept":"image/png"
-		}
-	});
-	if(!response.ok) return false;
-	const blob = await response.blob();
-	return URL.createObjectURL(blob);
-}catch(e){
-		console.warn(e);
-}
-}
-
-// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
-// 		images.value[0]=url;
-// });
-// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
-// 		images.value[1]=url;
-// });
-// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
-// 		images.value[2]=url;
-// });
-// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
-// 		images.value[3]=url;
-// });
-
 </script>
 
 <template>
@@ -55,24 +25,26 @@ async function loadImage(path: string) {
   <Forms/>
       
 
-  <!-- <Bilderbuch/> -->
+  <Bilderbuch/>
 
 
 
-	<!-- <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
+	<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/#erntefest",
-            "/galerie/osterfeuer",
+            "/galerie/#osterfeuer",
-            "/galerie/doppelkopf",
+            "/galerie/#doppelkopf",
-            "/galerie/fussball",
+            "/galerie/#fussball",
             ""
           ]'
+          :jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
           />
         </div>
       </div>
@@ -86,10 +58,10 @@ async function loadImage(path: string) {
 
 
   <br>
-  <br> -->
+  <br>
 
 
-  <Umgebung ref="umgebung" />
+  <Umgebung ref="umgebung" id="umgebung" />
   <MyFooter ref="footer" />
 
 </template>

app/plugins/graphql.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+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,
+    },
+  }
+})

nuxt.config.ts

@@ -1,8 +1,22 @@
+import { GraphQLClient } from "graphql-request";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-  modules: [],
+  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',

package.json

@@ -10,16 +10,31 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/nuxt": "^2.0.0",
+    "@formkit/themes": "^2.0.0",
+    "@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",
-    "katex": "^0.16.45",
+    "katex": "^0.17.0",
+    "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-renderer-markdown": "^0.0.62",
     "vue-router": "^5.0.4"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^2.10.1",
+    "@types/markdown-it": "^14.1.2",
     "sass-embedded": "^1.99.0"
   }
 }