Refactor links section to use dynamic rendering with computed properties, enhancing maintainability and scalability. Add new 'Links' tab in CMS for better navigation.

2026-03-04 16:05:34 +01:00
parent 3fb40bd87d
commit 6230c96bc9
3 changed files with 439 additions and 93 deletions
--- a/pages/cms/inhalte.vue
+++ b/pages/cms/inhalte.vue
@@ -29,6 +29,7 @@
        <CmsGeschichte v-if="activeTab === 'geschichte'" />
        <CmsTtRegeln v-if="activeTab === 'tt-regeln'" />
        <CmsSatzung v-if="activeTab === 'satzung'" />
+        <CmsLinks v-if="activeTab === 'links'" />
      </div>
    </div>
  </div>
@@ -40,6 +41,7 @@ import CmsUeberUns from '~/components/cms/CmsUeberUns.vue'
 import CmsGeschichte from '~/components/cms/CmsGeschichte.vue'
 import CmsTtRegeln from '~/components/cms/CmsTtRegeln.vue'
 import CmsSatzung from '~/components/cms/CmsSatzung.vue'
+import CmsLinks from '~/components/cms/CmsLinks.vue'

 definePageMeta({
  middleware: 'auth',
@@ -56,6 +58,7 @@ const tabs = [
  { id: 'ueber-uns', label: 'Über uns' },
  { id: 'geschichte', label: 'Geschichte' },
  { id: 'tt-regeln', label: 'TT-Regeln' },
-  { id: 'satzung', label: 'Satzung' }
+  { id: 'satzung', label: 'Satzung' },
+  { id: 'links', label: 'Links' }
 ]
 </script>
--- a/pages/links.vue
+++ b/pages/links.vue
@@ -11,102 +11,31 @@
      </p>

      <div class="grid md:grid-cols-2 gap-6">
-        <section class="bg-white rounded-xl shadow-lg p-6">
+        <section
+          v-for="section in sections"
+          :key="section.title"
+          class="bg-white rounded-xl shadow-lg p-6"
+        >
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-            Ergebnisse & Portale
+            {{ section.title }}
          </h2>
          <ul class="space-y-3">
-            <li>
-              <a href="http://www.mytischtennis.de/public/home" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                MyTischtennis.de
-              </a>
-              <span class="text-gray-600"> (offizielle QTTR-Werte)</span>
-            </li>
-            <li>
-              <a href="http://httv.click-tt.de/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Click-tt Ergebnisse
-              </a>
-              <span class="text-gray-600"> (offizieller Ergebnisdienst HTTV)</span>
-            </li>
-            <li>
-              <a href="https://www.tischtennis-pur.de/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Tischtennis Pur - das Tischtennis Portal
-              </a>
-              <span class="text-gray-600"> (Informationen, Blogs, Fachbeiträge, Tipps)</span>
-            </li>
-            <li>
-              <a href="https://ticker.tt-news.com/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Liveticker 2. und 3. TT-Bundesliga
-              </a>
-            </li>
-          </ul>
-        </section>
-
-        <section class="bg-white rounded-xl shadow-lg p-6">
-          <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-            Verbände
-          </h2>
-          <ul class="space-y-3">
-            <li>
-              <a href="http://www.httv.de/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Hessischer Tischtennisverband (HTTV)
-              </a>
-            </li>
-            <li>
-              <a href="http://www.tischtennis.de/aktuelles/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Deutscher Tischtennisbund (DTTB)
-              </a>
-            </li>
-            <li>
-              <a href="http://www.ettu.org/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                European Table Tennis Union (ETTU)
-              </a>
-            </li>
-            <li>
-              <a href="https://www.ittf.com/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                International Table Tennis Federation (ITTF)
-              </a>
-            </li>
-          </ul>
-        </section>
-
-        <section class="bg-white rounded-xl shadow-lg p-6">
-          <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-            Regionale Links
-          </h2>
-          <ul class="space-y-3">
-            <li>
-              <a href="http://www.frankfurt.de/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Stadt Frankfurt
-              </a>
-            </li>
-            <li>
-              <a href="http://www.harheim.com/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Vereinsring Harheim
-              </a>
-            </li>
-          </ul>
-        </section>
-
-        <section class="bg-white rounded-xl shadow-lg p-6">
-          <h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
-            Partner & Vereine
-          </h2>
-          <ul class="space-y-3">
-            <li>
-              <a href="http://www.ttcoe.de/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                TTC OE Bad Homburg
-              </a>
-            </li>
-            <li>
-              <a href="https://www.spvgg-steinkirchen.de/menue-abteilungen/abteilungen/tischtennis" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                SpVgg Steinkirchen e.V.
-              </a>
-            </li>
-            <li>
-              <a href="https://www.mytischtennis.de/clicktt/ByTTV/24-25/ligen/Bezirksklasse-A-Gruppe-2-IN-PAF/gruppe/466925/tabelle/gesamt/" target="_blank" rel="noopener noreferrer" class="text-primary-700 hover:text-primary-900 font-medium">
-                Ergebnisse SpVgg Steinkirchen
+            <li
+              v-for="(item, idx) in section.items"
+              :key="`${section.title}-${idx}`"
+            >
+              <a
+                :href="item.href"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-primary-700 hover:text-primary-900 font-medium"
+              >
+                {{ item.label }}
              </a>
+              <span
+                v-if="item.description"
+                class="text-gray-600"
+              > {{ item.description }}</span>
            </li>
          </ul>
        </section>
@@ -116,6 +45,117 @@
 </template>

 <script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const rawContent = ref('')
+
+const defaultLinksHtml = `
+<h2>Ergebnisse &amp; Portale</h2>
+<ul>
+  <li><a href="http://www.mytischtennis.de/public/home" target="_blank" rel="noopener noreferrer">MyTischtennis.de</a> (offizielle QTTR-Werte)</li>
+  <li><a href="http://httv.click-tt.de/" target="_blank" rel="noopener noreferrer">Click-tt Ergebnisse</a> (offizieller Ergebnisdienst HTTV)</li>
+  <li><a href="https://www.tischtennis-pur.de/" target="_blank" rel="noopener noreferrer">Tischtennis Pur - das Tischtennis Portal</a> (Informationen, Blogs, Fachbeiträge, Tipps)</li>
+  <li><a href="https://ticker.tt-news.com/" target="_blank" rel="noopener noreferrer">Liveticker 2. und 3. TT-Bundesliga</a></li>
+</ul>
+<h2>Verbände</h2>
+<ul>
+  <li><a href="http://www.httv.de/" target="_blank" rel="noopener noreferrer">Hessischer Tischtennisverband (HTTV)</a></li>
+  <li><a href="http://www.tischtennis.de/aktuelles/" target="_blank" rel="noopener noreferrer">Deutscher Tischtennisbund (DTTB)</a></li>
+  <li><a href="http://www.ettu.org/" target="_blank" rel="noopener noreferrer">European Table Tennis Union (ETTU)</a></li>
+  <li><a href="https://www.ittf.com/" target="_blank" rel="noopener noreferrer">International Table Tennis Federation (ITTF)</a></li>
+</ul>
+<h2>Regionale Links</h2>
+<ul>
+  <li><a href="http://www.frankfurt.de/" target="_blank" rel="noopener noreferrer">Stadt Frankfurt</a></li>
+  <li><a href="http://www.harheim.com/" target="_blank" rel="noopener noreferrer">Vereinsring Harheim</a></li>
+</ul>
+<h2>Partner &amp; Vereine</h2>
+<ul>
+  <li><a href="http://www.ttcoe.de/" target="_blank" rel="noopener noreferrer">TTC OE Bad Homburg</a></li>
+  <li><a href="https://www.spvgg-steinkirchen.de/menue-abteilungen/abteilungen/tischtennis" target="_blank" rel="noopener noreferrer">SpVgg Steinkirchen e.V.</a></li>
+  <li><a href="https://www.mytischtennis.de/clicktt/ByTTV/24-25/ligen/Bezirksklasse-A-Gruppe-2-IN-PAF/gruppe/466925/tabelle/gesamt/" target="_blank" rel="noopener noreferrer">Ergebnisse SpVgg Steinkirchen</a></li>
+</ul>
+`
+
+const sections = computed(() => parseLinksHtml(rawContent.value))
+
+function stripTags(html) {
+  return String(html || '')
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function parseLinksHtml(html) {
+  const source = String(html || '')
+  const sectionRegex = /<h2[^>]*>([\s\S]*?)<\/h2>([\s\S]*?)(?=<h2[^>]*>|$)/gi
+  const liRegex = /<li[^>]*>([\s\S]*?)<\/li>/gi
+  const anchorRegex = /<a[^>]*href=["']([^"']+)["'][^>]*>([\s\S]*?)<\/a>/i
+
+  const parsed = []
+  let sectionMatch
+  while ((sectionMatch = sectionRegex.exec(source)) !== null) {
+    const title = stripTags(sectionMatch[1])
+    const body = sectionMatch[2]
+    const items = []
+
+    let liMatch
+    while ((liMatch = liRegex.exec(body)) !== null) {
+      const liContent = liMatch[1]
+      const anchorMatch = anchorRegex.exec(liContent)
+      if (!anchorMatch) continue
+
+      const href = anchorMatch[1].trim()
+      const label = stripTags(anchorMatch[2])
+      const remainder = liContent.replace(anchorMatch[0], '')
+      const desc = stripTags(remainder)
+
+      items.push({
+        href,
+        label,
+        description: desc || ''
+      })
+    }
+
+    if (title && items.length > 0) {
+      parsed.push({ title, items })
+    }
+  }
+
+  return parsed
+}
+
+async function loadConfig() {
+  try {
+    const data = await $fetch('/api/config')
+    const structured = data?.seiten?.linksStructured
+    if (Array.isArray(structured) && structured.length > 0) {
+      const htmlFromStructured = structured
+        .filter((section) => section?.title && Array.isArray(section?.items) && section.items.length > 0)
+        .map((section) => {
+          const itemsHtml = section.items
+            .filter((item) => item?.label && item?.href)
+            .map((item) => `<li><a href="${item.href}" target="_blank" rel="noopener noreferrer">${item.label}</a>${item.description ? ` ${item.description}` : ''}</li>`)
+            .join('')
+          return `<h2>${section.title}</h2><ul>${itemsHtml}</ul>`
+        })
+        .join('\n')
+      rawContent.value = htmlFromStructured || defaultLinksHtml
+      return
+    }
+    const links = data?.seiten?.links
+    rawContent.value = typeof links === 'string' && links.trim() ? links : defaultLinksHtml
+  } catch {
+    rawContent.value = defaultLinksHtml
+  }
+}
+
+onMounted(loadConfig)
+
 useHead({
  title: 'Links - Harheimer TC',
 })