Add Simple Analytics

src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import 'bulma/css/bulma.css';
 	import { addMessages, init, getLocaleFromQueryString } from 'svelte-i18n';
+	import { dev } from '$app/environment';
 	import en from '$lib/locales/en.json';
 	import de from '$lib/locales/de.json';
 	import ch from '$lib/locales/ch.json';
 	import Navigation from './Navigation.svelte';
 	import Footer from './Footer.svelte';
+	import Analytics from './Analytics.svelte';
 	import './styles.css';
 
 	addMessages('en-US', en);
@@ -27,3 +29,7 @@
 
 	<Footer />
 </div>
+
+{#if !dev}
+	<Analytics />
+{/if}

src/routes/Analytics.svelte

@@ -0,0 +1,3 @@
+<svelte:head>
+	<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
+</svelte:head>

svelte.config.js

@@ -12,9 +12,10 @@ const config = {
 		csp: {
 			directives: {
 				'default-src': ['self'],
-				'script-src': ['unsafe-inline', 'self'],
+				'script-src': ['unsafe-inline', 'self', 'https://scripts.simpleanalyticscdn.com'],
+				'connect-src': ['self', 'https://queue.simpleanalyticscdn.com'],
 				'style-src': ['unsafe-inline', 'self'],
-				'img-src': ['self', 'data:'],
+				'img-src': ['self', 'data:', 'https://queue.simpleanalyticscdn.com'],
 				'font-src': ['self', 'data:'],
 				'object-src': ['none'],
 				'frame-ancestors': ['none'],