From 02f6db69240f55bb4b06c0cac98f50bddc918b43 Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Mon, 23 Sep 2024 15:02:42 +0300
Subject: [PATCH] feat: add animation to windows, improve embeds, minor style
 improvements, use csr

---
 src/components/navButton.svelte   |  8 ++---
 src/components/window.svelte      |  4 +++
 src/routes/+layout.svelte         | 35 +++++++++------------
 src/routes/+layout.ts             |  2 +-
 src/routes/entries/_layout.svelte |  1 +
 src/routes/entries/test/+page.md  | 47 ++++++++++++++++++++++++++--
 src/styles/app.css                | 52 +++++++++++++++++++++++++++++++
 7 files changed, 121 insertions(+), 28 deletions(-)

diff --git a/src/components/navButton.svelte b/src/components/navButton.svelte
index fc66a63..97cd8c2 100644
--- a/src/components/navButton.svelte
+++ b/src/components/navButton.svelte
@@ -7,10 +7,10 @@
 
 <div
 	class="
-    p-0.5 pr-1.5 border-ralsei-white border-4
+    max-w-36 p-0.5 pr-1.5 border-ralsei-white border-4
     {highlight
-		? 'min-w-36 max-w-36 bg-gradient-to-l to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30% border-ridge motion-safe:animate-pulse hover:animate-none'
-		: 'border-double hover:border-solid motion-safe:hover:animate-bounce'}
+		? 'min-w-36 bg-gradient-to-l to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30% border-ridge motion-safe:animate-pulse hover:animate-none'
+		: 'w-fit border-double hover:border-solid motion-safe:hover:animate-bounce hover:underline'}
 "
 >
 	<a
@@ -25,6 +25,6 @@
 		data-sveltekit-preload-data="hover"
 	>
 		<img class="max-w-4" style="image-rendering: pixelated;" src={iconUri} alt={name} />
-		<div class="font-monospace text-sm/3 overflow-hidden text-ellipsis text-nowrap {highlight ? '' : 'hover:underline'}">{name}</div>
+		<div class="font-monospace text-sm/3 overflow-hidden text-ellipsis text-nowrap [text-decoration-line:inherit]">{name}</div>
 	</a>
 </div>
diff --git a/src/components/window.svelte b/src/components/window.svelte
index b51b0b5..a47be1f 100644
--- a/src/components/window.svelte
+++ b/src/components/window.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	export let title: string;
 	export let iconUri: string = '';
+
+	const scaleKeyframes = ["window-open", "window-open-vertical", "window-open-horizontal"];
+	const chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * 3))
 </script>
 
 <div
@@ -9,6 +12,7 @@
         max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit h-fit
         border-ralsei-white border-ridge border-8 border-t-[12px]
         bg-ralsei-black
+		animate-{chosenKeyframe}
     "
 >
 	<div
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 90d30c4..4c0046c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { PUBLIC_BASE_URL } from '$env/static/public';
-import getTitle from '$lib/getTitle';
+	import getTitle from '$lib/getTitle';
 	import NavButton from '../components/navButton.svelte';
 	import '../styles/app.css';
 
@@ -12,16 +11,16 @@ import getTitle from '$lib/getTitle';
 		iconUri: string;
 	}
 
-	let menuItems: MenuItem[] = [
+	const menuItems: MenuItem[] = [
 		{ href: '', name: 'home', iconUri: '/icons/home.png' },
 		{ href: 'entries', name: 'entries', iconUri: '/icons/entries.png' },
 		{ href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.png' },
 		{ href: 'about', name: 'about', iconUri: '/icons/about.png' }
 	];
 
-	const routeComponents = data.route.split('/');
-	const doAddPostItem = routeComponents.length > 3 && routeComponents[1] === 'entries';
-	const isRoute = (_route: string) => {
+	$: routeComponents = data.route.split('/');
+	$: doAddPostItem = routeComponents.length > 3 && routeComponents[1] === 'entries';
+	$: isRoute = (_route: string) => {
 		if (doAddPostItem) {
 			if (_route === 'entries') {
 				return false;
@@ -32,22 +31,13 @@ import getTitle from '$lib/getTitle';
 		return _route === routeComponents[1];
 	};
 
-	if (doAddPostItem) {
-		menuItems.splice(2, 0, {
-			href: data.route.slice(1),
-			name: routeComponents[2],
-			iconUri: '/icons/entry.png'
-		});
-	}
-
-	const title = getTitle(data.route);
+	$: title = getTitle(data.route);
 
 	const svgSquiggles = [[2], [3], [2], [3], [1]];
 </script>
 
 <svelte:head>
 	<title>{title}</title>
-	<meta property="og:title" content={title} />
 	<meta property="og:site_name" content="gaze.systems" />
 	<meta property="og:url" content="https://gaze.systems/" />
 	<meta property="og:image" content="https://gaze.systems/icons/gaze_website.png" />
@@ -152,18 +142,23 @@ import getTitle from '$lib/getTitle';
 		style="border-style: ridge hidden hidden hidden;"
 	>
 		<div class="flex flex-row flex-nowrap gap-2 justify-start overflow-x-auto">
-			{#each menuItems as item}
+			{#each menuItems as item, menuIdx}
 				{@const highlight = isRoute(item.href)}
 				<NavButton {highlight} {...item} />
+				{#if doAddPostItem && menuIdx == 1}
+					<NavButton highlight name={routeComponents[2]} href={data.route.slice(1)} iconUri='/icons/entry.png'/>
+				{/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="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"
+			>
 				<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"/>
+				<img class="min-w-fit hover:opacity-60" src="/valid-rss.png" alt="rss feed" />
 			</a>
 		</div>
 	</div>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 809f1bf..ee4e645 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,4 +1,4 @@
-export const csr = false;
+export const csr = true;
 export const ssr = true;
 export const prerender = true;
 export const trailingSlash = 'always';
diff --git a/src/routes/entries/_layout.svelte b/src/routes/entries/_layout.svelte
index 78c5e58..e35353d 100644
--- a/src/routes/entries/_layout.svelte
+++ b/src/routes/entries/_layout.svelte
@@ -9,6 +9,7 @@
 <svelte:head>
     <meta property="og:description" content={excerpt} />
     <meta property="og:type" content="article" />
+    <meta property="og:title" content={title} />
 </svelte:head>
 
 <div class="pb-[8vh]">
diff --git a/src/routes/entries/test/+page.md b/src/routes/entries/test/+page.md
index 95fe0c3..b574c80 100644
--- a/src/routes/entries/test/+page.md
+++ b/src/routes/entries/test/+page.md
@@ -10,8 +10,49 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ligula sed
 
 Pellentesque massa purus, ornare aliquam velit et, hendrerit lacinia felis. Fusce nec felis maximus, egestas lorem et, vehicula libero. Donec gravida sodales porta. Nunc ac urna vestibulum, finibus erat vitae, euismod nisi. Morbi auctor pretium diam ut pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar orci vitae dolor sodales placerat. Integer tristique condimentum massa, non euismod nisi sodales eu.
 
-Integer consectetur ligula quis mauris porta sodales. Morbi tincidunt elementum tortor ut auctor. Vestibulum vehicula sit amet augue sed bibendum. Cras sit amet elit ac tortor malesuada condimentum. Nunc ac mi sed lectus mollis tristique sit amet eu nunc. Nunc dapibus dignissim dolor. Nam sed quam ex. Cras vel pharetra lectus, a interdum ante. Sed condimentum efficitur auctor. Vestibulum dignissim erat in rutrum sodales. Mauris ultrices nibh eget luctus lobortis.
+1. a
+1. b
+1. c
+1. d
 
-Etiam sollicitudin suscipit odio, sed malesuada ipsum luctus id. Phasellus commodo, turpis non ornare viverra, arcu tortor tincidunt orci, at pellentesque justo est ut dui. Aliquam erat volutpat. Nulla gravida risus eget nunc commodo hendrerit. Aenean faucibus dui blandit ipsum gravida, non elementum orci fermentum. Morbi consequat elementum nulla, a dictum eros imperdiet sit amet. Sed ac vulputate ante, nec lobortis erat. Aliquam sodales nisi magna, ut molestie orci varius tincidunt. Suspendisse tempor orci quis erat accumsan, nec eleifend tellus interdum. Phasellus nec massa mi. Donec mattis mi imperdiet nisl varius, id vehicula felis tempor. Aliquam in tincidunt erat. Proin nec ornare enim, id lacinia urna. Morbi dolor lorem, porttitor quis orci ac, facilisis fringilla neque. Nulla tempor, dui sit amet lacinia faucibus, felis erat posuere nisi, ac condimentum lorem ex vel elit.
+- a
+- b
+- c
+- d
 
-Pellentesque vitae massa quis purus sodales consectetur. Aliquam ex leo, efficitur vitae nulla sed, pretium luctus ante. Proin et lacus dictum, bibendum leo at, rhoncus sem. Suspendisse non tellus odio. In pulvinar quam sed arcu ornare volutpat. Cras commodo a enim id accumsan. Etiam nec augue ullamcorper, consequat tellus varius, lacinia urna. Aenean rutrum a lorem quis dapibus. Curabitur vitae ipsum faucibus risus elementum condimentum. Proin pretium vulputate leo commodo molestie. Proin ultricies ac nibh vel molestie. Vestibulum vitae lorem lobortis, ultrices odio bibendum, lacinia risus.
\ No newline at end of file
+`test test test`
+
+```rust
+fn main() {
+    println!("howdy")
+}
+```
+
+```js
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null ? 0 : ipsum.sit;
+  dolor = sit - amet(dolor);
+  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
+}
+function adipiscing(...elit) {
+  if (!elit.sit) {
+    return [];
+  }
+  const sed = elit[0];
+  return eiusmod.tempor(sed) ? sed : [sed];
+}
+function incididunt(ipsum, ut = 1) {
+  ut = labore.et(amet(ut), 0);
+  const sit = ipsum == null ? 0 : ipsum.sit;
+  if (!sit || ut < 1) {
+    return [];
+  }
+  let dolore = 0;
+  let magna = 0;
+  const aliqua = new eiusmod(labore.ut(sit / ut));
+  while (dolore < sit) {
+    aliqua[magna++] = consectetur(ipsum, dolore, (dolore += ut));
+  }
+  return aliqua;
+}
+```
\ No newline at end of file
diff --git a/src/styles/app.css b/src/styles/app.css
index f154554..9544bed 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -188,4 +188,56 @@ a.app-selected-route {
         linear-gradient(theme(colors.ralsei.pink.neon / 0.4), transparent 1px),
         linear-gradient(to right, theme(colors.ralsei.pink.neon / 0.4), transparent 1px);
     background-size: 100% 24px, 24px 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .animate-window-open {
+        animation: 0.5s ease-out window-open-scale forwards;
+    }
+    
+    .animate-window-open-vertical {
+        animation: 0.5s ease-out window-open-scale-vertical forwards;
+        transform-origin: bottom;
+    }
+    
+    .animate-window-open-horizontal {
+        animation: 0.5s ease-out window-open-scale-horizontal forwards;
+        transform-origin: left;
+    }
+    
+    @keyframes window-open-scale {
+        0% {
+            transform: scale(0.0);
+        }
+        30% {
+            transform: scale(0.0);
+        }
+        100% {
+            transform: scale(1.0);
+        }
+    }
+    
+    @keyframes window-open-scale-vertical {
+        0% {
+            transform: scale(1.0, 0.0);
+        }
+        30% {
+            transform: scale(1.0, 0.0);
+        }
+        100% {
+            transform: scale(1.0, 1.0);
+        }
+    }
+    
+    @keyframes window-open-scale-horizontal {
+        0% {
+            transform: scale(0.0, 1.0);
+        }
+        30% {
+            transform: scale(0.0, 1.0);
+        }
+        100% {
+            transform: scale(1.0, 1.0);
+        }
+    }
 }
\ No newline at end of file