CodingCatDev · codercatdev · Oct 9, 2023 · Oct 1, 2023 · Oct 1, 2023 · Oct 1, 2023
diff --git a/apps/codingcatdev/package.json b/apps/codingcatdev/package.json
@@ -17,6 +17,7 @@
 		"@auth/sveltekit": "^0.3.7",
 		"@codingcatdev/blackcatui": "^0.1.0",
 		"@firebase/app-types": "~0.9.0",
+		"@fontsource/shadows-into-light": "^5.0.13",
 		"@playwright/test": "^1.38.1",
 		"@steeze-ui/heroicons": "^2.2.3",
 		"@steeze-ui/simple-icons": "^1.5.1",
@@ -55,6 +56,7 @@
 		"@cloudinary/html": "^1.11.2",
 		"@cloudinary/url-gen": "^1.11.2",
 		"@floating-ui/dom": "^1.5.3",
+		"@steeze-ui/material-design-icons": "^1.1.2",
 		"esm-env": "^1.0.0",
 		"firebase": "^10.4.0",
 		"gsap": "^3.12.2",

diff --git a/apps/codingcatdev/src/app.postcss b/apps/codingcatdev/src/app.postcss
@@ -4,3 +4,4 @@
 @import './styles/nav-list.css';
 @import './styles/grid-card.css';
 @import './styles/markdown.css';
+@import '@fontsource/shadows-into-light'
diff --git a/apps/codingcatdev/src/lib/actions/inView.ts b/apps/codingcatdev/src/lib/actions/inView.ts
@@ -0,0 +1,44 @@
+/**
+ * This action triggers a custom event on node entering/exiting the viewport.
+ * example:
+ * <p
+ * 	use:inView
+ * 	on:enter={() => console.log("enter")}
+ * 	on:exit={() => console.log("exit")}
+ * >
+ * 
+ * optional params { root, top, bottom }
+ * top and bottom are numbers
+ * use:inView={ bottom: 100 } // 100 pixels from bottom of viewport
+ */
+import type { Action } from "svelte/action";
+
+export const inView: Action<HTMLElement, { root?: Element | Document | null, top?: number, bottom?: number } | undefined> = (node, params) => {
+    let observer: IntersectionObserver;
+
+    const handleIntersect = (e: IntersectionObserverEntry[]) => {
+        const v = e[0].isIntersecting ? "enter" : "exit";
+        node.dispatchEvent(new CustomEvent(v));
+    };
+
+    const setObserver = (params: { root: Element | Document | null, top: number, bottom: number } | undefined) => {
+        const marginTop = params?.top ? params?.top * -1 : 0;
+        const marginBottom = params?.bottom ? params?.bottom * -1 : 0;
+        const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
+        const options: IntersectionObserverInit = { root: params?.root, rootMargin };
+        if (observer) observer.disconnect();
+        observer = new IntersectionObserver(handleIntersect, options);;
+        observer.observe(node);
+    }
+    setObserver(params);
+
+    return {
+        update(params) {
+            setObserver(params);
+        },
+
+        destroy() {
+            if (observer) observer.disconnect();
+        }
+    };
+}
diff --git a/apps/codingcatdev/src/lib/components/content/Video.svelte b/apps/codingcatdev/src/lib/components/content/Video.svelte
@@ -17,6 +17,6 @@
 		frameborder="0"
 		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 		allowfullscreen
-		class="w-full h-full"
+		class={`w-full h-full ${$$props.class}`}
 	/>
 </div>
diff --git a/apps/codingcatdev/src/lib/components/global/icons/nav/Courses.svelte b/apps/codingcatdev/src/lib/components/global/icons/nav/Courses.svelte
@@ -10,7 +10,7 @@
 		/>
 		<path
 			d="M33.5617 10.8078L18.7429 5.22845C17.9354 4.92442 17.0642 4.92442 16.2572 5.22845L1.43793 10.8078C0.18736 11.2785 0.18789 12.8487 1.43846 13.3194L4.33547 14.408C3.76863 15.2667 3.14091 16.6548 3.10638 17.8019C2.59479 18.1613 2.2346 18.8097 2.2346 19.5838C2.2346 20.2856 2.53635 20.8761 2.97091 21.2537L1.61463 28.7329C1.49669 29.3832 1.92421 30.0004 2.46768 30.0004H4.57165C5.11565 30.0004 5.49563 29.3832 5.37769 28.7329L4.02141 21.2537C4.45597 20.8761 4.75772 20.2856 4.75772 19.5838C4.75772 18.8306 4.414 18.2004 3.92578 17.8345C3.96616 16.8566 4.41671 15.2664 5.0675 14.7182L16.2572 18.8994C16.7385 19.0804 17.6618 19.3063 18.7429 18.8994L33.5622 13.32C34.8133 12.8487 34.8128 11.2792 33.5617 10.8078ZM19.1741 21.987C17.6584 22.5573 16.3669 22.2422 15.6896 21.987L8.14868 19.086L7.46307 25.8331C7.46307 28.1346 11.8664 30.0004 17.4998 30.0004C23.1332 30.0004 27.6998 28.1352 27.6998 25.8338L26.8788 19.086L19.1741 21.987Z"
-			class="main"
+			fill="currentColor"
 		/>
 	</g>
 	<defs>
@@ -19,13 +19,3 @@
 		</clipPath>
 	</defs>
 </svg>
-
-<style>
-	.main {
-		fill: rgba(var(--color-primary-500) / 1);
-	}
-	.line {
-		stroke: rgb(var(--on-primary));
-		fill: rgb(var(--on-primary));
-	}
-</style>
diff --git a/apps/codingcatdev/src/lib/search/SearchLogo.svelte b/apps/codingcatdev/src/lib/search/SearchLogo.svelte
@@ -3,7 +3,6 @@
 	import Blog from '$lib/components/global/icons/nav/Blog.svelte';
 	import Courses from '$lib/components/global/icons/nav/Courses.svelte';
 	import Podcasts from '$lib/components/global/icons/nav/Podcasts.svelte';
-	import Tutorials from '$lib/components/global/icons/nav/Tutorials.svelte';
 	import { ContentType } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 
@@ -21,8 +20,6 @@
 				return { contentType, component: Courses };
 			case ContentType.podcast:
 				return { contentType, component: Podcasts };
-			case ContentType.tutorial:
-				return { contentType, component: Tutorials };
 			case ContentType.post:
 				return { contentType, component: Blog };
 			default:

diff --git a/...gcatdev/src/routes/(content-single)/(non-course)/author/alex-patterson/+page.md b/...gcatdev/src/routes/(content-single)/(non-course)/author/alex-patterson/+page.md
@@ -1,6 +1,6 @@
 ---
 type: author
-cover: 'https://media.codingcat.dev/image/upload/main-codingcatdev-photo/podcast-guest/codercatdev'
+cover: 'https://media.codingcat.dev/image/upload/v1654730163/main-codingcatdev-photo/headshots/Alex-Patterson-2022.jpg'
 name: Alex Patterson
 published: published
 slug: alex-patterson

diff --git a/apps/codingcatdev/src/routes/(home-partials)/(home-campaign)/Block.svelte b/apps/codingcatdev/src/routes/(home-partials)/(home-campaign)/Block.svelte
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 74 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect
+		x="-48"
+		y="29.3748"
+		width="99.6451"
+		height="99.6451"
+		rx="27"
+		transform="rotate(-21.4103 -48 29.3748)"
+		fill="currentColor"
+	/>
+</svg>