🚧 WIP general improvements

Yeah, I'm getting lazy with these commit messages

Author: SnaveSutit

.prettierrc

@@ -1,9 +1,41 @@
 {
+	"$schema": "http://json.schemastore.org/prettierrc",
+	"tabWidth": 4,
 	"useTabs": true,
+	"semi": false,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"arrowParens": "avoid",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
-	"semi": false
+	"trailingComma": "es5",
+	"bracketSameLine": false,
+	"endOfLine": "auto",
+	"overrides": [
+		{
+			"files": ["**/*.yml", "**/*.yaml"],
+			"options": {
+				"parser": "yaml",
+				"tabWidth": 2,
+				"useTabs": false
+			}
+		},
+		{
+			"files": "**/*.ts",
+			"options": {
+				"parser": "typescript"
+			}
+		},
+		{
+			"files": "**/*.svelte",
+			"options": {
+				"parser": "svelte",
+				"plugins": ["prettier-plugin-svelte"]
+			}
+		},
+		{
+			"files": "**/*.svg",
+			"options": {
+				"parser": "html"
+			}
+		}
+	]
 }

.yarn/install-state.gz

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -48,5 +48,5 @@
 	"dependencies": {
 		"svelte-youtube-embed": "^0.3.0"
 	},
-	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+	"packageManager": "yarn@4.7.0+sha512.5a0afa1d4c1d844b3447ee3319633797bcd6385d9a44be07993ae52ff4facabccafb4af5dcd1c2f9a94ac113e5e9ff56f6130431905884414229e284e37bb7c9"
 }

package.json

@@ -5,19 +5,6 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<!-- <meta property="og:type" content="website" />
-		<meta content="Animated Java" property="og:title" />
-		<meta
-			content="A Blockbench plugin that makes complex animation a breeze in Minecraft: Java Edition."
-			property="og:description"
-		/>
-		<meta content="https://animated-java.github.io" property="og:url" />
-		<meta
-			content="https://animated-java.github.io/img/animated_java_animated_icon.png"
-			property="og:image"
-		/>
-		<meta content="#00ACED" data-react-helmet="true" name="theme-color" /> -->
-
 		<script>
 			const key = 'svelteness::color-scheme'
 			const scheme = localStorage[key]

src/app.html

@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { inView, scrollAnimator } from '$lib'
 	import { Button } from '@svelteness/kit-docs'
 </script>
 
@@ -24,7 +25,7 @@
 		'-6pLFvW5_Dk', // Camera Animation Test
 		'sC3FqzpDrpQ', // Diamond Golem
 		'fs0NUGmsa10', // Butter Dog
-		'4VlwyI0EHo4' // Funny Mobile Game
+		'4VlwyI0EHo4', // Funny Mobile Game
 	]
 
 	async function getYoutubeVideoTitle(id: string) {
@@ -50,10 +51,8 @@
 	{:catch error}
 		<!--  -->
 	{/await}
-	<!-- {#key $index}
-	{/key} -->
 	<div class="grid">
-		{#each VIDEOS as id}
+		{#each VIDEOS as id, index}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
@@ -67,6 +66,21 @@
 						class="thumbnail-image"
 						style={`background-image: url(https://img.youtube.com/vi/${id}/0.jpg);`}
 					></div>
+					<div
+						use:inView={{ top: 100 }}
+						on:enter={e => {
+							if (
+								e.target.parentElement?.parentElement?.parentElement?.classList.contains(
+									'transition-in'
+								)
+							)
+								return
+							e.target.parentElement.parentElement.parentElement.classList.add(
+								'transition-in'
+							)
+						}}
+					></div>
+
 					{#await getYoutubeVideoTitle(id)}
 						<p class="loading">Loading Title...</p>
 					{:then title}
@@ -102,6 +116,15 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		transition:
+			transform 0.2s ease 0s,
+			opacity 0.2s ease 0s;
+		transform: translateY(16px) scale(0.9);
+		opacity: 0;
+	}
+	.thumbnail-container:global(.transition-in) {
+		transform: translateY(0) scale(1);
+		opacity: 1;
 	}
 	.thumbnail-container :global(button span) {
 		display: flex;

src/components/VideoCarousel.svelte

@@ -27,4 +27,10 @@
 		animation: wave 1.5s infinite;
 		animation-timing-function: ease-in-out;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wiggly-text {
+			animation: none;
+		}
+	}
 </style>

src/kit-docs/WigglyText.svelte

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="1.2em" width="1.2em">
+	<title>Ko-fi</title>
+	<path
+		fill="currentColor"
+		d="M23.881 8.948c-0.773 -4.085 -4.859 -4.593 -4.859 -4.593H0.723c-0.604 0 -0.679 0.798 -0.679 0.798s-0.082 7.324 -0.022 11.822c0.164 2.424 2.586 2.672 2.586 2.672s8.267 -0.023 11.966 -0.049c2.438 -0.426 2.683 -2.566 2.658 -3.734 4.352 0.24 7.422 -2.831 6.649 -6.916zm-11.062 3.511c-1.246 1.453 -4.011 3.976 -4.011 3.976s-0.121 0.119 -0.31 0.023c-0.076 -0.057 -0.108 -0.09 -0.108 -0.09 -0.443 -0.441 -3.368 -3.049 -4.034 -3.954 -0.709 -0.965 -1.041 -2.7 -0.091 -3.71 0.951 -1.01 3.005 -1.086 4.363 0.407 0 0 1.565 -1.782 3.468 -0.963 1.904 0.82 1.832 3.011 0.723 4.311zm6.173 0.478c-0.928 0.116 -1.682 0.028 -1.682 0.028V7.284h1.77s1.971 0.551 1.971 2.638c0 1.913 -0.985 2.667 -2.059 3.015z"
+		stroke-width="1"
+	></path>
+</svg>

src/kit-docs/kofi-logo.svelte

@@ -4,10 +4,10 @@ interface ISetObserverOptions {
 	bottom?: number
 }
 
-export default function inView(node: HTMLElement, options: ISetObserverOptions = {}) {
+export function inView(node: HTMLElement, options: ISetObserverOptions = {}) {
 	let observer: IntersectionObserver
 
-	const handleIntersect: IntersectionObserverCallback = (e) => {
+	const handleIntersect: IntersectionObserverCallback = e => {
 		const v = e[0].isIntersecting ? 'enter' : 'exit'
 		node.dispatchEvent(new CustomEvent(v))
 	}
@@ -31,6 +31,6 @@ export default function inView(node: HTMLElement, options: ISetObserverOptions =
 
 		destroy() {
 			if (observer) observer.disconnect()
-		}
+		},
 	}
 }

src/lib/inView.ts

@@ -1,2 +1,3 @@
 // place files you want to import through the `$lib` alias in this folder.
-export { default as inView } from './inView'
+export * from './scrollAnim'
+export * from './inView'

src/lib/index.ts

@@ -0,0 +1,70 @@
+import { quartOut } from 'svelte/easing'
+
+interface IScrollAnimatorOptions {
+	x?: number
+	yOffset?: number
+	opacity?: number
+	scale?: number
+	rate?: number
+	easing?: (t: number) => number
+}
+
+export function scrollAnimator(element: HTMLElement, options: IScrollAnimatorOptions = {}) {
+	const rect = element.getBoundingClientRect()
+	const docRect = document.body.getBoundingClientRect()
+	element.style.opacity = '0'
+	element.style.transition = 'opacity 0.1s ease, transform 0.1s ease'
+
+	const rate = options.rate || 1
+
+	let top = rect.top - docRect.top - window.innerHeight / 2
+	if (options.yOffset) top += options.yOffset
+	else top += -rect.height / 2
+
+	const moveX = options.x || 0
+	const scale = options.scale
+
+	const updateTransform = (t: number) => {
+		t = (options.easing ?? quartOut)(t)
+		const x = -moveX + moveX * t
+		let s = 1
+		if (scale) {
+			s = scale + (1 - scale) * t
+		}
+		element.style.transform = `translateX(${x}px) scale(${s})`
+	}
+
+	const updateOpacity = (t: number) => {
+		element.style.opacity = `${Math.min(t * 1.25, 1)}`
+	}
+
+	const observer = () => {
+		const scroll = window.scrollY
+
+		const localScroll = Math.min(Math.max(scroll - top, 0), rect.height)
+		const percent = Math.min(Math.max(localScroll / (rect.height * rate), 0), 1)
+		updateTransform(percent)
+		updateOpacity(percent)
+	}
+
+	let intervalID: number | undefined
+	const setObserver = ({}: IScrollAnimatorOptions) => {
+		if (intervalID) clearInterval(intervalID)
+		// if (observer) removeEventListener('scroll', observer)
+		intervalID = setInterval(observer, 16)
+		// addEventListener('scroll', observer, { passive: true })
+		observer()
+	}
+
+	setObserver(options)
+
+	return {
+		update(args: IScrollAnimatorOptions) {
+			setObserver(args)
+		},
+
+		destroy() {
+			if (observer) removeEventListener('scroll', observer)
+		},
+	}
+}

src/lib/scrollAnim.ts

@@ -0,0 +1 @@
+export const SLOGAN = 'Effortlessly craft complex animations for Minecraft: Java Edition'

src/lib/strings.ts

@@ -8,15 +8,15 @@
 	--kd-color-inverse: 5 11 23;
 	--kd-color-border: 209 213 219;
 
-	--kd-color-subtle: rgb(181 186 199);
+	--kd-color-subtle: rgb(103 111 124);
 
 	--kd-code-fence-bg: rgb(212 217 251);
 	--kd-code-fence-fg: rgb(26, 29, 36);
 }
 
 :root {
 	font-size: 16px;
-	scroll-padding-top: 6rem;
+	scroll-padding-top: 8rem;
 
 	--kd-font-family-sans: Inter VF, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
 		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
@@ -77,7 +77,7 @@
 	--kd-color-body: 31 33 40;
 	--kd-color-focus: 129 140 248;
 
-	--kd-color-subtle: rgb(106, 116, 132);
+	--kd-color-subtle: rgb(144 156 176);
 
 	--kd-code-fence-bg: rgb(22 23 27);
 	--kd-code-fence-fg: rgb(186 190 216);
@@ -111,3 +111,7 @@ code:not(pre code) {
 td {
 	text-wrap: balance !important;
 }
+
+.on-this-page {
+	display: none !important;
+}