{% extends "base.html" %}

{% block extrahead %}
  {{ super() }}
  
  {# Import K2D font from Google Fonts for branding - weight 600 for header title #}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=K2D:wght@600&display=swap" rel="stylesheet">
  
  {% if page %}
    {# Page-specific meta description from frontmatter #}
    {% if page.meta.description %}
      <meta name="description" content="{{ page.meta.description }}">
    {% endif %}
    
    {# Page-specific keywords from frontmatter #}
    {% if page.meta.keywords %}
      <meta name="keywords" content="{{ page.meta.keywords | join(', ') if page.meta.keywords is iterable and page.meta.keywords is not string else page.meta.keywords }}">
    {% endif %}
    
    {# Open Graph meta tags #}
    <meta property="og:title" content="{% if page.meta.title %}{{ page.meta.title }}{% else %}{{ page.title }} - {{ config.site_name }}{% endif %}">
    {% if page.meta.description %}
      <meta property="og:description" content="{{ page.meta.description }}">
    {% else %}
      <meta property="og:description" content="{{ config.site_description }}">
    {% endif %}
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ page.canonical_url }}">
    <meta property="og:site_name" content="{{ config.site_name }}">
    <meta property="og:image" content="https://raw.githubusercontent.com/mylonics/zephyr-ide/main/media/logo.png">
    
    {# Twitter Card meta tags #}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@mylonics">
    <meta name="twitter:title" content="{% if page.meta.title %}{{ page.meta.title }}{% else %}{{ page.title }} - {{ config.site_name }}{% endif %}">
    {% if page.meta.description %}
      <meta name="twitter:description" content="{{ page.meta.description }}">
    {% else %}
      <meta name="twitter:description" content="{{ config.site_description }}">
    {% endif %}
    <meta name="twitter:image" content="https://raw.githubusercontent.com/mylonics/zephyr-ide/main/media/logo.png">
    
    {# Canonical URL #}
    <link rel="canonical" href="{{ page.canonical_url }}">
  {% endif %}
  
  {# Structured data for search engines #}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "zephyr ide",
    "applicationCategory": "DeveloperApplication",
    "description": "{{ config.site_description }}",
    "operatingSystem": "Windows, macOS, Linux",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "author": {
      "@type": "Organization",
      "name": "Mylonics",
      "url": "https://mylonics.com"
    },
    "softwareVersion": "{{ config.extra.version | default('2.2.0', true) }}",
    "url": "{{ config.site_url }}",
    "downloadUrl": "https://marketplace.visualstudio.com/items?itemName=mylonics.zephyr-ide",
    "screenshot": "https://raw.githubusercontent.com/mylonics/zephyr-ide/main/media/logo.png"
  }
  </script>
{% endblock %}

{% block htmltitle %}
  {% if page %}
    {% if page.meta.title %}
      <title>{{ page.meta.title }}</title>
    {% else %}
      <title>{{ page.title }} - {{ config.site_name }}</title>
    {% endif %}
  {% else %}
    <title>{{ config.site_name }}</title>
  {% endif %}
{% endblock %}