harheimertc/pages/links.vue

<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Links
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <p class="text-lg text-gray-600 mb-10">
        Nützliche Verweise rund um Tischtennis, Verbände, Ergebnisse und Partner.
      </p>

      <div class="grid md:grid-cols-2 gap-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">
            {{ section.title }}
          </h2>
          <ul class="space-y-3">
            <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>
      </div>
    </div>
  </div>
</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',
})
</script>