chore: lint

package.json

@@ -15,8 +15,8 @@
         "@astrojs/rss": "^4.0.10",
         "@astrojs/sitemap": "^3.2.1",
         "@astrojs/tailwind": "^5.1.4",
-        "@iconify-json/fa-brands": "^1.2.1",
         "@iconify-json/mdi": "^1.2.2",
+        "@iconify-json/simple-icons": "^1.2.18",
         "astro": "^5.1.1",
         "astro-icon": "^1.1.4",
         "fuse.js": "^7.0.0",

src/assets/scripts/article.ts

@@ -28,7 +28,9 @@ class ArticleState {
             return;
         }
         const defaultHeadingId = Object.keys(this.headings)[0];
-        if (!defaultHeadingId) return;
+        if (!defaultHeadingId) {
+            return;
+        }
         const defaultHeading = this.headings[defaultHeadingId]!!;
         this.highlightTocHeading(defaultHeading);
     }
@@ -53,7 +55,9 @@ class ArticleState {
     }
 
     async updateCurrentHeading(heading: ArticleHeading) {
-        if (this.currentHeading?.id === heading.id) return;
+        if (this.currentHeading?.id === heading.id) {
+            return;
+        }
         this.highlightContentHeading(heading);
         heading.content.scrollIntoView({ behavior: "smooth" });
         history.replaceState(null, "", `#${heading.id}`);
@@ -76,14 +80,18 @@ class ArticleState {
             clearInterval(onScrollEndInterval ?? undefined);
             onScrollEndInterval = setTimeout(() => this.emitOnScrollEnd(), 50);
             const scrollingElement = document.scrollingElement;
-            if (!scrollingElement) return;
+            if (!scrollingElement) {
+                return;
+            }
             const visibleHeight = document.documentElement.clientHeight;
             const scrollBottom = scrollingElement.scrollTop + visibleHeight;
             if (scrollBottom === document.body.clientHeight) {
                 const headings = Object.values(this.headings);
                 const lastHeading =
                     headings[headings.length - 1] ?? this.currentHeading;
-                if (!lastHeading) return;
+                if (!lastHeading) {
+                    return;
+                }
                 this.highlightTocHeading(lastHeading);
                 return;
             }
@@ -96,7 +104,9 @@ class ArticleState {
                 }
                 visibleHeading = x;
             }
-            if (!visibleHeading) return;
+            if (!visibleHeading) {
+                return;
+            }
             this.highlightTocHeading(visibleHeading);
         });
     }
@@ -133,7 +143,9 @@ class ArticleState {
         const headings: Record<string, ArticleHeading> = {};
         document.querySelectorAll(this.tocHeadingSelector).forEach((x) => {
             const id = x.getAttribute(this.headingIdAttribute);
-            if (!id) return;
+            if (!id) {
+                return;
+            }
             headings[id] = this.getHeading(id);
         });
         return headings;

src/assets/scripts/home.ts

@@ -1,3 +1,5 @@
+import { CancellableTimeout, Utils } from "~/core/utils";
+
 interface HeroElements {
     container: HTMLElement;
     enabled: boolean;
@@ -54,13 +56,28 @@ const attachHero = () => {
     }, 200);
 };
 
-const onProjectsScroll = (
+let onProjectsScrollScrollTimeout: CancellableTimeout | undefined;
+
+const onProjectsScroll = async (
     projectElement: HTMLElement,
     projectItemElements: HTMLElement[],
     scrollingElement: Element,
 ) => {
+    if (document.body.clientWidth < Utils.BREAKPOINT_MD) {
+        return;
+    }
+    onProjectsScrollScrollTimeout?.cancel();
+    const timeout = new CancellableTimeout(500);
+    onProjectsScrollScrollTimeout = timeout;
+    try {
+        await timeout.start();
+    } catch (err) {}
+    if (timeout.cancelled) {
+        return;
+    }
+    onProjectsScrollScrollTimeout = undefined;
     const snapIndexAttribute = "data-snapped-index";
-    const snapThreshold = scrollingElement.clientHeight * 0.15;
+    const snapThreshold = scrollingElement.clientHeight * 0.2;
     const { scrollTop } = scrollingElement;
     if (
         scrollTop < projectItemElements[0]!!.offsetTop - snapThreshold ||

src/assets/scripts/redirect.ts

@@ -2,7 +2,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const url = document.querySelector<HTMLMetaElement>(
         "meta[name='redirect-url']",
     )?.content;
-    if (!url) return;
+    if (!url) {
+        return;
+    }
     location.assign(url);
 });
 

src/assets/scripts/scroll-to-top.ts

@@ -28,7 +28,9 @@ class ScrollToTop {
 
     onScroll() {
         const { scrollingElement } = document;
-        if (!scrollingElement) return;
+        if (!scrollingElement) {
+            return;
+        }
         const { clientHeight, scrollTop, scrollHeight } = scrollingElement;
         const clientHeightQuarter = clientHeight * 0.25;
         this.setVisibility(
@@ -40,7 +42,9 @@ class ScrollToTop {
     }
 
     setVisibility(visible: boolean) {
-        if (this.isVisible === visible) return;
+        if (this.isVisible === visible) {
+            return;
+        }
         this.isVisible = visible;
         const element = document.getElementById(this.scrollToTopId);
         element?.setAttribute(this.activeAttribute, visible ? "true" : "");

src/components/base/Footer.astro

@@ -14,7 +14,6 @@ import FooterSecondaryLink from "~/components/base/FooterSecondaryLink.astro";
         <p class="mb-1">
             Made by
             <span class="text-primary-500">{Metadata.title}</span>
-            with ❤️
         </p>
 
         <div class="mb-1 flex flex-wrap justify-center">

src/components/base/NavBar.astro

@@ -1,5 +1,6 @@
 ---
 import { Routes } from "~/core/routes";
+import { StaticAssets } from "~/core/urls";
 import NavBarLink from "~/components/base/NavBarLink.astro";
 
 const replaceSlashes = (route: string) => route.replaceAll(/^\/|\/$/g, "");
@@ -8,12 +9,18 @@ const isCurrentPage = (route: string) =>
 ---
 
 <nav>
-    <div class="py-4 md:py-6">
+    <div class="pt-5 pb-4 md:pb-5">
         <div
-            class="u-flex !flex-col md:!flex-row !justify-around gap-4 md:gap-8"
+            class="u-flex !flex-col sm:!flex-row !justify-around gap-4 md:gap-8"
         >
             <div class="font-bold font-mono">
-                <NavBarLink link={Routes.home}>zyrouge</NavBarLink>
+                <NavBarLink link={Routes.home}>
+                    <img
+                        src={StaticAssets.icon}
+                        alt="Logo"
+                        class="h-auto w-8"
+                    />
+                </NavBarLink>
             </div>
 
             <div class="u-flex gap-8">

src/components/home/Hero.astro

@@ -36,16 +36,22 @@ import HeroParticles from "~/components/home/HeroParticles.astro";
 
         <div class="u-container pb-6 u-flex !justify-start gap-6">
             <SocialButton name="GitHub" link={ExternalUrls.github}>
-                <Icon name="fa-brands:github" />
+                <Icon name="simple-icons:github" />
             </SocialButton>
             <SocialButton name="Discord" link={ExternalUrls.discord}>
-                <Icon name="fa-brands:discord" />
+                <Icon name="simple-icons:discord" />
             </SocialButton>
             <SocialButton name="Mastodon" link={ExternalUrls.mastodon}>
-                <Icon name="fa-brands:mastodon" />
+                <Icon name="simple-icons:mastodon" />
             </SocialButton>
             <SocialButton name="Reddit" link={ExternalUrls.reddit}>
-                <Icon name="fa-brands:reddit-alien" />
+                <Icon name="simple-icons:reddit" />
+            </SocialButton>
+            <SocialButton name="Blusky" link={ExternalUrls.bsky}>
+                <Icon name="simple-icons:bluesky" />
+            </SocialButton>
+            <SocialButton name="Mail" link={ExternalUrls.mail}>
+                <Icon name="mdi:alternate-email" />
             </SocialButton>
         </div>
     </div>

src/components/home/ProjectItem.astro

@@ -16,7 +16,7 @@ const { name, description, link, image, tags, backgroundColor } = Astro.props;
 
 <div
     class:list={[
-        "u-container min-h-screen u-flex py-32 u-flex !flex-col",
+        "u-container md:min-h-screen u-flex pt-28 md:pt-32 pb-16 md:pb-32 u-flex !flex-col",
         backgroundColor,
     ]}
     id="project-item"

src/core/urls.ts

@@ -1,6 +1,5 @@
 const domain = "zyrouge.me";
-const base = "/static";
-const images = `${base}/images`;
+const images = "/static/images";
 
 export const baseUrl = `https://${domain}`;
 
@@ -9,13 +8,16 @@ export class ExternalUrls {
     static discord = "https://discord.gg/8KV5zCg";
     static mastodon = "https://mastodon.social/@zyrouge";
     static reddit = "https://www.reddit.com/user/zyrouge";
+    static bsky = "https://bsky.app/profile/zyrouge.me";
+    static mail = "mailto:[email protected]";
 
     static ghRepo = `${ExternalUrls.github}/${domain}`;
     static ghRepoLicense = `${ExternalUrls.ghRepo}/blob/main/LICENSE`;
     static ghRepoContentLicense = `${ExternalUrls.ghRepo}/blob/main/src/content/articles/LICENSE`;
 }
 
 export class StaticAssets {
+    static icon = "/icon.png";
     static css = `${images}/css.png`;
     static dart = `${images}/dart.png`;
     static electron = `${images}/electron.png`;

src/core/utils.ts

@@ -1,4 +1,6 @@
 export class Utils {
+    static BREAKPOINT_MD = 768;
+
     static random(length: number) {
         const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=&".split("");
         return Array(length)
@@ -62,3 +64,42 @@ export class Utils {
         throw new Error("Unable to find astro content id");
     }
 }
+
+export class CancellableTimeout {
+    _promiseWithResolvers: PromiseWithResolvers<void> | undefined;
+    _timeout: ReturnType<typeof setTimeout> | undefined;
+    started = false;
+    ended = false;
+    cancelled = false;
+
+    constructor(public readonly ms: number) {}
+
+    start() {
+        if (this.started) {
+            throw new Error("Timeout was already started");
+        }
+        if (this.ended) {
+            throw new Error("Timeout has already ended");
+        }
+        const promiseWithResolvers = Promise.withResolvers<void>();
+        this._promiseWithResolvers = promiseWithResolvers;
+        this.started = true;
+        this._timeout = setTimeout(() => {
+            delete this._timeout;
+            delete this._promiseWithResolvers;
+            this.ended = true;
+            promiseWithResolvers.resolve();
+        }, this.ms);
+        return this._promiseWithResolvers.promise;
+    }
+
+    cancel() {
+        if (!this._promiseWithResolvers) {
+            throw new Error("Timeout is not active");
+        }
+        this.ended = true;
+        this.cancelled = true;
+        clearTimeout(this._timeout);
+        this._promiseWithResolvers!.reject(new Error("Timeout interrupted"));
+    }
+}

src/layouts/Base.astro

@@ -1,6 +1,7 @@
 ---
 import "~/assets/styles.scss";
 import type { HeadMetadata } from "~/core/metadata";
+import { StaticAssets } from "~/core/urls";
 import Head from "~/components/base/Head.astro";
 import NavBar from "~/components/base/NavBar.astro";
 import Footer from "~/components/base/Footer.astro";
@@ -17,7 +18,7 @@ const { head } = Astro.props;
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/icon.png" />
+        <link rel="icon" type="image/png" href={StaticAssets.icon} />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <Head head={head} />
     </head>

src/pages/redirect/bsky.astro

@@ -0,0 +1,6 @@
+---
+import { ExternalUrls } from "~/core/urls";
+import Redirect from "~/components/redirect/Redirect.astro";
+---
+
+<Redirect title="Bluesky" url={ExternalUrls.bsky} />