+1

src/lib/components/layout/index.ts

reviewed

··· 1 1 export { default as Navigation } from "./header/Navigation.svelte"; 2 2 export { default as Footer } from "./footer/Main.svelte"; 3 3 export { default as ThemeToggle } from "./header/ThemeToggle.svelte"; 4 4 + export { default as HeaderMain } from "./header/Main.svelte";

+67

src/lib/components/shared/NoScriptFallback.svelte

reviewed

··· 1 1 + <noscript> 2 2 + <div 3 3 + class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-md flex justify-center items-center z-50 p-4 sm:p-6" 4 4 + role="alertdialog" 5 5 + aria-modal="true" 6 6 + tabindex="0" 7 7 + > 8 8 + <div 9 9 + class="w-full max-w-xs sm:max-w-sm md:max-w-md bg-card rounded-lg shadow-lg overflow-hidden" 10 10 + > 11 11 + <article class="flex flex-col p-4 sm:p-5"> 12 12 + <header class="flex flex-col items-start gap-1 sm:gap-2 mb-3 sm:mb-4"> 13 13 + <h3 14 14 + class="text-base sm:text-lg font-semibold m-0 text-[var(--link-color)] leading-tight" 15 15 + > 16 16 + JavaScript is disabled. Please enable it to use this site. 17 17 + </h3> 18 18 + <p class="text-xs opacity-60"> 19 19 + Sorry for the inconvenience, but the site needs JavaScript to work 20 20 + properly. 21 21 + </p> 22 22 + </header> 23 23 + 24 24 + <div class="text-sm sm:text-base text-[var(--text-color)]"> 25 25 + <p class="mb-3 sm:mb-4"> 26 26 + Here’s how to enable JavaScript in your browser: 27 27 + </p> 28 28 + <ul class="list-disc list-inside mb-3 sm:mb-4 space-y-1 sm:space-y-2"> 29 29 + <a 30 30 + href="https://www.ionos.co.uk/digitalguide/websites/web-development/enable-javascript-in-safari/" 31 31 + target="_blank" 32 32 + rel="noopener noreferrer" 33 33 + lang="en-gb" 34 34 + class="font-semibold text-[var(--link-color)] underline hover:text-[var(--link-hover-color)] focus:outline-none focus:ring-2 focus:ring-[var(--link-color)]" 35 35 + > 36 36 + Enable JavaScript in Safari 37 37 + </a> 38 38 + <a 39 39 + href="https://www.ionos.co.uk/digitalguide/websites/web-development/enable-javascript/" 40 40 + target="_blank" 41 41 + rel="noopener noreferrer" 42 42 + lang="en-gb" 43 43 + class="font-semibold text-[var(--link-color)] underline hover:text-[var(--link-hover-color)] focus:outline-none focus:ring-2 focus:ring-[var(--link-color)]" 44 44 + > 45 45 + Enable JavaScript in Chrome 46 46 + </a> 47 47 + <a 48 48 + href="https://www.ionos.co.uk/digitalguide/websites/web-development/enable-javascript-in-firefox/" 49 49 + target="_blank" 50 50 + rel="noopener noreferrer" 51 51 + lang="en-gb" 52 52 + class="font-semibold text-[var(--link-color)] underline hover:text-[var(--link-hover-color)] focus:outline-none focus:ring-2 focus:ring-[var(--link-color)]" 53 53 + > 54 54 + Enable JavaScript in Firefox 55 55 + </a> 56 56 + </ul> 57 57 + <p> 58 58 + This website relies heavily on JavaScript to load content, manage 59 59 + navigation, and provide interactive features. Without JavaScript 60 60 + enabled, many parts of the site won’t function correctly, and you 61 61 + may miss out on the full experience. 62 62 + </p> 63 63 + </div> 64 64 + </article> 65 65 + </div> 66 66 + </div> 67 67 + </noscript>

+1

src/lib/components/shared/index.ts

reviewed

··· 1 1 export * from "./interfaces"; 2 2 export { default as NotFoundMessage } from "./NotFoundMessage.svelte"; 3 3 + export { default as NoScriptMessage } from "./NoScriptFallback.svelte";

+6 -2

src/routes/+layout.svelte

reviewed

··· 3 3 import { getStores } from "$app/stores"; 4 4 const { page } = getStores(); 5 5 import Profile from "$components/profile/Profile.svelte"; 6 6 - import { Footer } from "$components/layout"; 7 7 - import HeaderMain from "$components/layout/header/Main.svelte"; 6 6 + import { Footer, HeaderMain } from "$components/layout"; 7 7 + import { NoScriptMessage } from "$components/shared"; 8 8 9 9 let { data, children } = $props(); 10 10 ··· 16 16 const isBlogIndex = $derived($page.route.id === "/blog"); 17 17 </script> 18 18 19 19 + <!-- NoScript fallback --> 20 20 + <NoScriptMessage /> 21 21 + 22 22 + <!-- Main layout structure --> 19 23 <div class="box-border mx-auto px-4 sm:px-8 max-w-[1000px] pb-8"> 20 24 <HeaderMain {isHomePage} {isBlogIndex} /> 21 25