From 9af7bf36e41b8fd83567be8be6a008f797e2b58a Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Tue, 1 Oct 2024 02:44:39 +0300
Subject: [PATCH] feat: add visited count

---
 src/lib/index.ts                     | 15 +++++++++++++++
 src/routes/+layout.server.ts         | 25 +++++++++++++++++++++++++
 src/routes/+layout.svelte            | 21 +++++++++++++++------
 src/routes/+layout.ts                |  9 ---------
 src/routes/guestbook/+page.server.ts | 13 ++-----------
 src/styles/app.css                   |  6 +++++-
 6 files changed, 62 insertions(+), 27 deletions(-)
 create mode 100644 src/routes/+layout.server.ts
 delete mode 100644 src/routes/+layout.ts

diff --git a/src/lib/index.ts b/src/lib/index.ts
index e69de29..46540d3 100644
--- a/src/lib/index.ts
+++ b/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 })
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..f33adb7
--- /dev/null
+++ b/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),
+    }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fe08266..a4d97d2 100644
--- a/src/routes/+layout.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
deleted file mode 100644
index ee4e645..0000000
--- a/src/routes/+layout.ts
+++ /dev/null
@@ -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 }
-}
\ No newline at end of file
diff --git a/src/routes/guestbook/+page.server.ts b/src/routes/guestbook/+page.server.ts
index 5a7ae91..afb2eaf 100644
--- a/src/routes/guestbook/+page.server.ts
+++ b/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[]) => {
diff --git a/src/styles/app.css b/src/styles/app.css
index a03d99e..23ee585 100644
--- a/src/styles/app.css
+++ b/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;
     }