From cf60aacb0f02166b7c27c9bb39270013ac5564dc Mon Sep 17 00:00:00 2001
From: Henrik Jess Nielsen <henrik@i80.dk>
Date: Sat, 21 Dec 2024 20:55:41 +0100
Subject: [PATCH] Lets see what lighthouse says

---
 templates/base_template.html | 54 +++++++++++++++++++++++++++++-------
 templates/navigation.html    |  2 +-
 2 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/templates/base_template.html b/templates/base_template.html
index a30d304..0ac0b92 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -1,26 +1,61 @@
 <!DOCTYPE HTML>
-<html  lang="da">
+<html lang="da">
 <head>
     <!-- Dynamisk titel for SEO -->
     <title>{% block title %} - {{ page_title }}{% endblock %}</title>
+
     <!-- Karakter-encoding -->
     <meta charset="utf-8">
+
     <!-- Responsivt layout -->
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
+
     <!-- Beskrivelse til søgemaskiner -->
     <meta name="description" content="{{ meta_description | default('Din ultimative guide til Portugal og vores rejse mod en frisk start.') }}">
+
     <!-- Nøgleord til søgemaskiner -->
     <meta name="keywords" content="{{ meta_keywords | default('Portugal, FAQ, Rejser, Henrik, Erika, Flytte til Portugal, Livskvalitet') }}">
+
     <!-- Forfatter -->
     <meta name="author" content="Henrik og Erika">
-    <!-- Defer non-critical CSS -->
-    <link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}" media="print" onload="this.media='all';">
-    <noscript><link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}"></noscript>
-    <!-- Just to make lighthouse happy -->
-    <link rel="preload" href="/static/images/pic11.jpg" as="image">
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style">
+
+    <!-- Kritisk CSS for at forhindre FOUC -->
+    <style>
+        /* Skjul kroppen indtil CSS er klar for at forhindre FOUC */
+        body {
+            visibility: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+
+        /* Initial preload-klasse */
+        .is-preload #wrapper {
+            opacity: 0;
+            transition: opacity 0.3s ease-in;
+        }
+
+        /* Kritisk CSS for vigtig styling */
+        body.loaded {
+            visibility: visible;
+        }
+    </style>
+
+    <!-- Skrifttyper og CSS -->
+    <link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}">
+
+    <!-- Fallback for brugere uden JavaScript -->
+    <noscript>
+        <link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}">
+    </noscript>
 </head>
 <body class="is-preload" lang="da">
+<script>
+    // Fjern preload-klasse og vis siden, når alt er indlæst
+    window.addEventListener('load', () => {
+        document.body.classList.remove('is-preload');
+        document.body.classList.add('loaded');
+    });
+</script>
+
 <!-- Wrapper -->
 <div id="wrapper">
     <!-- Main -->
@@ -63,13 +98,12 @@
     </div> <!-- Closing sidebar div -->
 </div> <!-- Closing wrapper div -->
 
-<!-- Scripts -->
+<!-- Scripts med defer for at undgå blokerende indlæsning -->
 <script src="/static/js/jquery.min.js" defer></script>
 <script src="/static/js/browser.min.js" defer></script>
 <script src="/static/js/breakpoints.min.js" defer></script>
 <script src="/static/js/util.js" defer></script>
 <script src="/static/js/main.js" defer></script>
-<script src="/static/js/modal_handler.js?v={{ timestamp }}"></script>
-
+<script src="/static/js/modal_handler.js?v={{ timestamp }}" defer></script>
 </body>
 </html>
diff --git a/templates/navigation.html b/templates/navigation.html
index 3ea9825..f27dad0 100644
--- a/templates/navigation.html
+++ b/templates/navigation.html
@@ -25,7 +25,7 @@
     <div class="mini-posts">
         {% for favorite in data.favorites %}
         <article>
-            <a href="{{  favorite.path }}" class="image">
+            <a href="/category/{{  favorite.path }}" class="image">
                 <img src="/static/{{favorite.image}}" alt="{{ favorite.name }}" height=300 width=40/>
             </a>
             <p><b>{{ favorite.path }}</b>: {{ favorite.description }}</p>
