singlechat/client/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import ChatView from '../views/ChatView.vue';
import PartnersView from '../views/PartnersView.vue';
import MockupView from '../views/MockupView.vue';
import FeedbackView from '../views/FeedbackView.vue';

const SITE_URL = 'https://ypchat.net';
const DEFAULT_IMAGE = `${SITE_URL}/static/favicon.png`;

const homeSchema = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'SingleChat',
  url: `${SITE_URL}/`,
  description: 'Willkommen auf SingleChat - deine erste Adresse für Chat, Single-Chat und Bildaustausch.',
  inLanguage: 'de-DE'
};

const partnersSchema = {
  '@context': 'https://schema.org',
  '@type': 'CollectionPage',
  name: 'Partner - SingleChat',
  url: `${SITE_URL}/partners`,
  description: 'Unsere Partner und befreundete Seiten. Entdecke weitere interessante Angebote und Communities.',
  isPartOf: {
    '@type': 'WebSite',
    name: 'SingleChat',
    url: `${SITE_URL}/`
  },
  inLanguage: 'de-DE'
};

const feedbackSchema = {
  '@context': 'https://schema.org',
  '@type': 'CollectionPage',
  name: 'Feedback - SingleChat',
  url: `${SITE_URL}/feedback`,
  description: 'Oeffentliche Rueckmeldungen, Meinungen und Verbesserungsvorschlaege zu SingleChat.',
  isPartOf: {
    '@type': 'WebSite',
    name: 'SingleChat',
    url: `${SITE_URL}/`
  },
  inLanguage: 'de-DE'
};

const routes = [
  {
    path: '/',
    name: 'chat',
    component: ChatView,
    meta: {
      title: 'SingleChat - Chat, Single-Chat und Bildaustausch',
      description: 'Willkommen auf SingleChat - deine erste Adresse für Chat, Single-Chat und Bildaustausch. Chatte mit Menschen aus aller Welt, finde neue Kontakte und teile Erinnerungen sicher und komfortabel.',
      keywords: 'Chat, Single-Chat, Bildaustausch, Online-Chat, Singles, Kontakte, Community',
      ogTitle: 'SingleChat - Chat, Single-Chat und Bildaustausch',
      ogDescription: 'Willkommen auf SingleChat - deine erste Adresse für Chat, Single-Chat und Bildaustausch.',
      ogType: 'website',
      image: DEFAULT_IMAGE,
      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
      schema: homeSchema
    }
  },
  {
    path: '/partners',
    name: 'partners',
    component: PartnersView,
    meta: {
      title: 'Partner - SingleChat',
      description: 'Unsere Partner und befreundete Seiten. Entdecke weitere interessante Angebote und Communities.',
      keywords: 'Partner, Links, befreundete Seiten, Community',
      ogTitle: 'Partner - SingleChat',
      ogDescription: 'Unsere Partner und befreundete Seiten.',
      ogType: 'website',
      image: DEFAULT_IMAGE,
      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
      schema: partnersSchema
    }
  },
  {
    path: '/feedback',
    name: 'feedback',
    component: FeedbackView,
    meta: {
      title: 'Feedback - SingleChat',
      description: 'Oeffentliche Rueckmeldungen, Meinungen und Verbesserungsvorschlaege zu SingleChat.',
      keywords: 'SingleChat Feedback, Kommentare, Rueckmeldungen, Verbesserungsvorschlaege',
      ogTitle: 'Feedback - SingleChat',
      ogDescription: 'Oeffentliche Rueckmeldungen, Meinungen und Verbesserungsvorschlaege zu SingleChat.',
      ogType: 'website',
      image: DEFAULT_IMAGE,
      robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
      schema: feedbackSchema
    }
  },
  {
    path: '/mockup-redesign',
    name: 'mockup-redesign',
    component: MockupView,
    meta: {
      title: 'Design Mockup - SingleChat',
      description: 'Visuelle Vorschau des geplanten Design-Refreshs fuer SingleChat.',
      keywords: 'SingleChat, Mockup, Design, Redesign, Vorschau',
      ogTitle: 'Design Mockup - SingleChat',
      ogDescription: 'Interne Vorschau des geplanten Design-Refreshs fuer SingleChat.',
      ogType: 'website',
      image: DEFAULT_IMAGE,
      robots: 'noindex, nofollow, noarchive',
      schema: null
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

function updateMetaTag(name, content, attribute = 'name') {
  let element = document.querySelector(`meta[${attribute}="${name}"]`);
  if (!element) {
    element = document.createElement('meta');
    element.setAttribute(attribute, name);
    document.head.appendChild(element);
  }
  element.setAttribute('content', content);
}

function updateLinkTag(rel, href) {
  let element = document.querySelector(`link[rel="${rel}"]`);
  if (!element) {
    element = document.createElement('link');
    element.setAttribute('rel', rel);
    document.head.appendChild(element);
  }
  element.setAttribute('href', href);
}

function updateJsonLd(schema) {
  let element = document.querySelector('#seo-json-ld');
  if (!element) {
    element = document.createElement('script');
    element.id = 'seo-json-ld';
    element.type = 'application/ld+json';
    document.head.appendChild(element);
  }

  element.textContent = schema ? JSON.stringify(schema) : '';
}

router.beforeEach((to, from, next) => {
  const meta = to.meta || {};
  const pageUrl = `${SITE_URL}${to.path}`;
  const title = meta.title || 'SingleChat';
  const description = meta.description || '';
  const keywords = meta.keywords || '';
  const ogTitle = meta.ogTitle || title;
  const ogDescription = meta.ogDescription || description;
  const ogType = meta.ogType || 'website';
  const image = meta.image || DEFAULT_IMAGE;
  const robots = meta.robots || 'index, follow';

  document.title = title;

  updateMetaTag('description', description);
  updateMetaTag('keywords', keywords);
  updateMetaTag('robots', robots);
  updateMetaTag('theme-color', '#2f6f46');

  updateMetaTag('og:title', ogTitle, 'property');
  updateMetaTag('og:description', ogDescription, 'property');
  updateMetaTag('og:type', ogType, 'property');
  updateMetaTag('og:url', pageUrl, 'property');
  updateMetaTag('og:image', image, 'property');
  updateMetaTag('og:site_name', 'SingleChat', 'property');
  updateMetaTag('og:locale', 'de_DE', 'property');

  updateMetaTag('twitter:card', robots.startsWith('noindex') ? 'summary' : 'summary_large_image');
  updateMetaTag('twitter:title', ogTitle);
  updateMetaTag('twitter:description', ogDescription);
  updateMetaTag('twitter:image', image);

  updateLinkTag('canonical', pageUrl);
  updateJsonLd(meta.schema || null);

  next();
});

export default router;