Markdown Renderer hinzugefügt

README.md

@@ -7,7 +7,7 @@ TODO:
 - Addhit
 - Galerie (Kommentare fixen, Rest geht)
 - BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
-- Startseite (Events testen, type=fotos?)
+- Startseite Event Markdown-HTML Support
 - Footer, Texte?
 - Navbar Hamburger Menu
 - Klönkasten ungelesen Punkt (localStorage)

package.json

@@ -18,11 +18,13 @@
     "embla-carousel-vue": "^8.6.0",
     "jarallax": "^2.2.1",
     "jquery": "^3.7.1",
+    "katex": "^0.16.27",
     "moment": "^2.30.1",
     "sloc": "^0.3.2",
     "striptags": "^3.2.0",
     "vue": "^3.5.13",
     "vue-async-computed": "^4.0.1",
+    "vue-renderer-markdown": "^0.0.62",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

src/components/startseite/Events.vue

@@ -4,6 +4,8 @@ import striptags from "striptags";
 import moment, { Moment } from "moment";
 import Modal from "../Modal.vue";
 import $ from "jquery";
+import MarkdownRender from 'vue-renderer-markdown'
+import 'katex/dist/katex.min.css'
 
 export default {
 	data() {
@@ -16,12 +18,12 @@ export default {
 	},
 	computed: {
 		events() {
-      let result: any[]=[];
+			let result: any[] = [];
 
-      $.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"),{
+			$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
 				crossDomain: true,
 				async: false,
-        success: function (data:string) {
+				success: function (data: string) {
 					result = JSON.parse(data);
 				},
 			});
@@ -38,6 +40,7 @@ export default {
           content: "<h1>Test</h1>",
           link: undefined,
           foto: "erntefest/2011/pic08.jpg",
+					minitext: ""
         },
         {
           id: 1,
@@ -47,6 +50,8 @@ export default {
           content: "<h1>Testlink</h1>",
           link: "#/test",
           foto: "erntefest/2011/pic08.jpg",
+					minitext: ""
+        },
         },
         {
           id: 2,
@@ -56,6 +61,8 @@ export default {
           content: "<h1>Testlink2</h1>",
           link: "/",
           foto: "erntefest/2011/pic08.jpg",
+					minitext: ""
+        },
         },
         {
           id: 3,
@@ -65,6 +72,8 @@ export default {
           content: "Fotos vom Erntefest 2011",
           link: "erntefest/2011",
           foto: "erntefest/2011/pic08.jpg",
+					minitext: ""
+        },
         },
         {
           id: 4,
@@ -74,28 +83,34 @@ export default {
           content: "<h1>Test2</h1>",
           link: undefined,
           foto: "erntefest/2011/pic08.jpg",
+					minitext: ""
+        },
         },
       ];*/
 		},
 	},
-  methods:{
-    vorschautext(content:string) {
-        let stripped=striptags(content);
-        let vorschaulen=30;
-        if(stripped.length>vorschaulen){
-            return stripped.substring(0,vorschaulen)+"...";
-        }else{
+	methods: {
+		vorschautext(content: string) {
+			let stripped = striptags(content);
+			let vorschaulen = 30;
+			if (stripped.length > vorschaulen) {
+				return stripped.substring(0, vorschaulen) + "...";
+			} else {
 				return stripped;
 			}
 		},
-    format_date(date: string){
-        let mymoment:Moment=moment(date);
+		format_date(date: string) {
+			let mymoment: Moment = moment(date);
 
 			return mymoment.format("DD.MM.YYYY");
-    }
+		},
+		galerie(content: string) {
+			this.$router.push({ path: "/bild/" + content });
+		},
 	},
 	components: {
 		Modal,
+		MarkdownRender
 	},
 };
 </script>
@@ -127,21 +142,33 @@ export default {
 				>
 					<Modal
 						v-show="
-              openedModals.includes(event.id) && modaltypes.includes(event.type)
+							openedModals.includes(event.id) &&
+							modaltypes.includes(event.type)
 						"
-            @closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)"
-            :content="event.content"
-          ></Modal>
+						@closemodal="
+							openedModals.splice(
+								openedModals.indexOf(event.id),
+								1
+							)
+						"
+					>
+					<MarkdownRender :content="event.content" :options="{'allowHtml': true}"/>
+					</Modal>
+
 					<div class="item-wrapper">
 						<div class="item-img mb-3">
 							<img :src="RitzenbergenLib.get_img(event.foto)" />
 						</div>
 						<div class="item-content align-left">
-              <h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
+							<h6
+								class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5"
+							>
 								<strong
-                  ><a class="text-black fw-bold" :data-id="event.id">{{
-                    event.eventname
-                  }}</a></strong
+									><a
+										class="text-black fw-bold"
+										:data-id="event.id"
+										>{{ event.eventname }}</a
+									></strong
 								>
 							</h6>
 							<p class="mbr-text mbr-fonts-style mb-3 display-7">
@@ -152,18 +179,28 @@ export default {
 							</p>
 							<div class="mbr-section-btn item-footer">
 								<a
-                  :download="event.type == 'dlink' ? event.link : undefined"
+									:download="
+										event.type == 'dlink'
+											? event.link
+											: undefined
+									"
 									:href="event.link"
 									><button
 										class="btn item-btn btn-primary display-7"
 										:data-id="event.id"
 										@click="openedModals.push(event.id)"
 									>
-                    <span v-if="event.type == 'link'">Einladung öffnen</span>
+										<span v-if="event.type == 'link'"
+											>Einladung öffnen</span
+										>
 										<span v-else-if="event.type == 'dlink'"
 											>Einladung runterladen</span
 										>
-                    <span v-else-if="event.type == 'fotos'" @click="galerie(event.content)">Fotos ansehen</span>
+										<span
+											v-else-if="event.type == 'fotos'"
+											@click="galerie(event.content)"
+											>Fotos ansehen</span
+										>
 										<span v-else>Mehr</span>
 									</button></a
 								>