feat: add visited count

src/lib/index.ts

@@ -0,0 +1,15 @@
+import type { Cookies } from '@sveltejs/kit'
+
+export const scopeCookies = (cookies: Cookies, path: string) => {
+    return {
+        get: (key: string) => {
+            return cookies.get(key)
+        },
+        set: (key: string, value: string, props: import('cookie').CookieSerializeOptions = {}) => {
+            cookies.set(key, value, { ...props, path })
+        },
+        delete: (key: string, props: import('cookie').CookieSerializeOptions = {}) => {
+            cookies.delete(key, { ...props, path })
+        }
+    }
+}

src/routes/+layout.server.ts

@@ -0,0 +1,25 @@
+import { scopeCookies } from '$lib';
+import { get, writable } from 'svelte/store';
+
+export const csr = true;
+export const ssr = true;
+export const prerender = true;
+export const trailingSlash = 'always';
+
+const visitCount = writable(0);
+
+export async function load({ cookies, url, setHeaders }) {
+    setHeaders({ 'Cache-Control': 'no-cache' })
+    const scopedCookies = scopeCookies(cookies, '/')
+    const visitedTimestamp = parseInt(scopedCookies.get('visitedTimestamp') || "0")
+    const currentTime = new Date().getTime()
+    const timeSinceVisit = currentTime - visitedTimestamp
+    if (visitedTimestamp === 0 || timeSinceVisit > 1000 * 60 * 60) {
+        visitCount.set(get(visitCount) + 1)
+        scopedCookies.set('visitedTimestamp', currentTime.toString())
+    }
+    return {
+        route: url.pathname,
+        visitCount: get(visitCount),
+    }
+}

src/routes/+layout.svelte

@@ -150,16 +150,25 @@
 				{/if}
 			{/each}
 			<div class="hidden md:block grow" />
-			<div
-				class="flex gap-3 px-1.5 text-nowrap align-middle items-center text-center place-content-center border-ralsei-white border-groove border-4"
-			>
+			<div class="navbox">
 				<a title="previous site" class="hover:underline" href="https://xn--sr8hvo.ws/previous">⮜</a>
 				<a class="hover:underline" href="https://xn--sr8hvo.ws">IndieWeb Webring</a>
 				<a title="next site" class="hover:underline" href="https://xn--sr8hvo.ws/next">⮞</a>
 			</div>
-			<a class="align-middle" href="/entries/_rss">
-				<img class="min-w-fit hover:opacity-60" src="/valid-rss.png" alt="rss feed" />
-			</a>
+			<div class="navbox">
+				<p><span class="text-ralsei-green-light text-shadow-green">{data.visitCount}</span> visit(s)</p>
+			</div>
+			<div class="navbox [gap:0.25rem_!important]">
+				<a class="align-middle hover:underline" href="/entries/_rss">rss</a>
+				/
+				<a class="align-middle hover:underline" href="/entries/_jsonfeed">jsonfeed</a>
+			</div>
 		</div>
 	</div>
 </nav>
+
+<style lang="postcss">
+	.navbox {
+		@apply flex gap-3 px-1.5 text-nowrap align-middle items-center text-center place-content-center border-ralsei-white border-groove border-4;
+	}
+</style>

src/routes/+layout.ts

@@ -1,9 +0,0 @@
-export const csr = true;
-export const ssr = true;
-export const prerender = true;
-export const trailingSlash = 'always';
-
-export async function load({ url, setHeaders }) {
-    setHeaders({'Cache-Control': 'no-cache'})
-    return { route: url.pathname }
-}

src/routes/guestbook/+page.server.ts

@@ -1,6 +1,7 @@
 import { GUESTBOOK_BASE_URL } from '$env/static/private'
 import { redirect, type Cookies } from '@sveltejs/kit'
 import auth from '$lib/guestbookAuth'
+import { scopeCookies as _scopeCookies } from '$lib';
 
 export const prerender = false;
 
@@ -11,17 +12,7 @@ interface Entry {
 }
 
 const scopeCookies = (cookies: Cookies) => {
-    return {
-        get: (key: string) => {
-            return cookies.get(key)
-        },
-        set: (key: string, value: string, props: import('cookie').CookieSerializeOptions = {}) => {
-            cookies.set(key, value, { ...props, path: "/guestbook/" })
-        },
-        delete: (key: string, props: import('cookie').CookieSerializeOptions = {}) => {
-            cookies.delete(key, { ...props, path: "/guestbook/" })
-        }
-    }
+    return _scopeCookies(cookies, '/guestbook')
 }
 
 const postAction = (client: any, scopes: string[]) => {

src/styles/app.css

@@ -65,8 +65,12 @@
         text-shadow: 0 0 4px theme(colors.ralsei.pink.regular);
     }
 
-    a,button,input[type=submit] {
+    .text-shadow-green {
         text-shadow: 0 0 2px theme(colors.ralsei.black), 0 0 5px theme(colors.ralsei.green.light);
+    }
+
+    a,button,input[type=submit] {
+        @apply text-shadow-green;
         cursor: url('/icons/gaze.png'), pointer;
     }