{% extends "base.html" %}

{% block extrahead %}
  {{ super() }}

  {# SEO / Open Graph #}
  <meta name="description" content="Sinlib — A Python toolkit for Sinhala NLP: phonological tokenization, spell checking, and preprocessing.">
  <meta name="keywords" content="Sinhala, NLP, tokenization, spell check, romanization, Python, sinlib">
  <meta name="author" content="Ransaka Ravihara">
  <meta property="og:title" content="Sinlib — Sinhala NLP Toolkit">
  <meta property="og:description" content="Phonological tokenization, n-gram spell checking, and preprocessing utilities for the Sinhala language.">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://raw.githubusercontent.com/Ransaka/sinlib/refs/heads/main/welcome.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Sinlib — Sinhala NLP Toolkit">
  <meta name="twitter:description" content="Phonological tokenization, n-gram spell checking, and preprocessing utilities for the Sinhala language.">
  <meta name="twitter:image" content="https://raw.githubusercontent.com/Ransaka/sinlib/refs/heads/main/welcome.png">

  {# Fonts: Inter + JetBrains Mono + Noto Sans Sinhala #}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Sinhala:wght@400;500;600&display=swap">
{% endblock %}

{% block content %}
  {{ super() }}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Apply Sinhala font class to elements containing Sinhala Unicode
      const sinhalaRegex = /[\u0D80-\u0DFF]+/;
      document.querySelectorAll('p, li, td, th').forEach(function (el) {
        if (sinhalaRegex.test(el.textContent)) {
          el.classList.add('sinhala-text');
        }
      });

      // Default to dark mode on first visit
      if (!localStorage.getItem('data-md-color-scheme')) {
        const scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'slate' : 'default';
        document.body.setAttribute('data-md-color-scheme', scheme);
      }
    });
  </script>
{% endblock %}