<!DOCTYPE html>

<meta charset="utf-8">
<meta name="description" content="{{ config('meta_description') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="{{ asset('images/favicon.light.png') }}">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="{{ asset('app.css') }}">

<link x-data rel="stylesheet" href="{{ asset('hljs-github.css') }}" :disabled="$store.theme !== 'light'">
<link x-data rel="stylesheet" href="{{ asset('hljs-github-dark.css') }}" :disabled="$store.theme !== 'dark'">

<script src="{{ asset('app.js') }}" defer></script>

{{ analytics() | raw }}

{# NOTE: To be removed in a future release #}
{% if config('google_analytics_id', false) %}
    {% include 'components/analytics/google.twig' %}
{% endif %}

{# NOTE: To be removed in a future release #}
{% if config('matomo_analytics_url', false) and config('matomo_analytics_site_id', false) %}
    {% include 'components/analytics/matomo.twig' %}
{% endif %}

<title>{{ title }} &bull; {{ config('site_title') }}</title>

<div class="{{ theme }}" x-data="application" x-effect="storeThemeCookie($store.theme)" :class="{ 'dark': $store.theme === 'dark' }">
    <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
        {% block content %}{% endblock %}
    </div>
</div>
