Add Web Ring

swayam25 · swayam25 · commit bcc5c19f1a3b · 2025-07-12T11:45:00.000+05:30
- Added webring support.
- Updated the terminal command to reflect the new feature.
- Minor UI updates.
- Minor bug fixes.
diff --git a/package.json b/package.json
@@ -12,21 +12,21 @@
         "lint": "prettier --check ."
     },
     "devDependencies": {
-        "@iconify/json": "^2.2.323",
+        "@iconify/json": "^2.2.357",
         "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.20.6",
+        "@sveltejs/kit": "^2.22.5",
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
-        "@tailwindcss/postcss": "^4.1.2",
-        "@tailwindcss/vite": "^4.1.2",
-        "postcss": "^8.5.3",
-        "prettier": "^3.5.3",
-        "prettier-plugin-svelte": "^3.3.3",
-        "prettier-plugin-tailwindcss": "^0.6.11",
-        "svelte": "^5.25.6",
-        "svelte-check": "^4.1.5",
-        "tailwindcss": "^4.1.2",
+        "@tailwindcss/postcss": "^4.1.11",
+        "@tailwindcss/vite": "^4.1.11",
+        "postcss": "^8.5.6",
+        "prettier": "^3.6.2",
+        "prettier-plugin-svelte": "^3.4.0",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "svelte": "^5.35.6",
+        "svelte-check": "^4.2.2",
+        "tailwindcss": "^4.1.11",
         "tslib": "^2.8.1",
-        "typescript": "^5.8.2",
+        "typescript": "^5.8.3",
         "unplugin-icons": "^22.1.0",
         "vite": "^5.4.19"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.css b/src/app.css
@@ -7,9 +7,9 @@
     font-weight: 100 800;
     src: url(@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2)
         format("woff2-variations");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-        U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 body {
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -37,7 +37,7 @@
     this={href ? "a" : "button"}
     role={href ? "link" : "button"}
     tabindex="0"
-    class="z-50 flex items-center justify-center gap-2 rounded-lg bg-slate-800 {sizeClass} {className} transition-all duration-200 hover:brightness-90"
+    class="z-50 flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-slate-800 {sizeClass} {className} transition-all duration-200 hover:brightness-90"
     {onclick}
     {href}
     data-sveltekit-preload-data="hover"
diff --git a/src/lib/components/InlineLink.svelte b/src/lib/components/InlineLink.svelte
@@ -8,7 +8,7 @@
         children?: Snippet;
     }
 
-    let { class: className = "", href, icon = null, children }: Props = $props();
+    let { class: className = "", href, icon, children }: Props = $props();
 </script>
 
 <a
diff --git a/src/lib/components/Ring.svelte b/src/lib/components/Ring.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { page } from "$app/state";
+    import { getRing, type Ring } from "$lib/data/ring";
+    import { onMount } from "svelte";
+    import SolarArrowLeftLinear from "~icons/solar/arrow-left-linear";
+    import SolarArrowRightLinear from "~icons/solar/arrow-right-linear";
+    import SolarLinkCircleOutline from "~icons/solar/link-circle-outline";
+    import SolarMagicStickOutline from "~icons/solar/magic-stick-outline";
+
+    let ring: Ring | null = null;
+    onMount(() => {
+        ring = getRing(page.url.host);
+    });
+</script>
+
+<div
+    class="group flex w-full flex-col gap-2 rounded-lg bg-slate-900 p-4 transition-all duration-300"
+>
+    <!-- Header -->
+    <p class="text-center text-sm font-medium">{ring?.name}</p>
+
+    <!-- Navigation Links -->
+    <div
+        class="flex items-center justify-center gap-1 *:flex *:items-center *:gap-1 *:rounded-lg *:px-3 *:py-1.5 *:text-xs *:font-medium *:text-slate-400 *:transition-all *:duration-200 *:hover:bg-slate-800 *:hover:text-slate-100"
+    >
+        <a href="{ring?.base}/{ring?.previous}" target="_blank" title="Previous site">
+            <SolarArrowLeftLinear class="size-3" />
+            <span>Prev</span>
+        </a>
+
+        <a href={ring?.base} target="_blank" title="Visit {ring?.name}">
+            <SolarLinkCircleOutline class="size-3" />
+            <span>Ring</span>
+        </a>
+
+        <a href="{ring?.base}/{ring?.next}" target="_blank" title="Next site">
+            <span>Next</span>
+            <SolarArrowRightLinear class="size-3" />
+        </a>
+
+        <a href="{ring?.base}/{ring?.random}" target="_blank" title="Random site">
+            <SolarMagicStickOutline class="size-3" />
+            <span>Random</span>
+        </a>
+    </div>
+</div>
diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
@@ -2,8 +2,8 @@
     import { cmds, output, setDefaultModeSetter } from "$lib/terminal/cmds";
     import { showCommandHelp } from "$lib/terminal/help";
     import { handleKeys, setInput } from "$lib/terminal/keys";
-    import { onMount, type SvelteComponent } from "svelte";
-    import type { SvelteHTMLElements } from "svelte/elements";
+    import type { Component } from "svelte";
+    import { onMount } from "svelte";
     import { fade } from "svelte/transition";
     import MaterialSymbolsArrowForwardIosRounded from "~icons/material-symbols/arrow-forward-ios-rounded";
     import MaterialSymbolsChromeRestoreOutlineRounded from "~icons/material-symbols/chrome-restore-outline-rounded";
@@ -69,20 +69,20 @@
         };
     });
 
-    const windowIcons: [typeof SvelteComponent<SvelteHTMLElements["svg"]>, string][] = [
+    const windowIcons: [Component, string][] = [
         [MaterialSymbolsHorizontalRuleRounded, "mt-1.5"],
         [MaterialSymbolsChromeRestoreOutlineRounded, "rotate-180"],
         [MaterialSymbolsCloseRounded, ""]
     ];
 </script>
 
 <div in:fade class="flex h-screen flex-col overflow-hidden">
-    <div class="sticky top-0 flex items-center py-5">
+    <div class="flex items-center py-5">
         <div class="text-md flex-1 text-center text-slate-400">Terminal</div>
-        <div class="fixed right-0 flex gap-2 p-2 text-slate-200">
+        <div class="fixed right-0 flex gap-2 p-2 text-slate-100">
             {#each windowIcons as [Icon, cls]}
                 <button
-                    class="flex size-6 cursor-default items-center justify-center overflow-hidden rounded-full bg-slate-800 p-1 transition-all duration-200 group-hover:scale-110 hover:bg-slate-800/80"
+                    class="flex size-6 cursor-default items-center justify-center overflow-hidden rounded-full bg-slate-800 p-1 transition-all duration-200 hover:bg-slate-800/80"
                     onclick={() => (defaultMode = true)}
                 >
                     <Icon class={cls} />
diff --git a/src/lib/data/ring.ts b/src/lib/data/ring.ts
@@ -0,0 +1,17 @@
+export interface Ring {
+    name: string;
+    base: string;
+    previous: string;
+    next: string;
+    random: string;
+}
+
+export const getRing = (host: string): Ring => {
+    return {
+        name: "Yellow Brick Ring",
+        base: "https://yellowbrickring.com",
+        previous: `webring?from=${host}&to=prev`,
+        next: `webring?from=${host}&to=next`,
+        random: `webring?from=${host}&to=random`
+    };
+};
diff --git a/src/lib/terminal/cmds.ts b/src/lib/terminal/cmds.ts
@@ -1,4 +1,5 @@
 import projects from "$lib/data/projects";
+import { getRing } from "$lib/data/ring";
 import socials from "$lib/data/socials";
 import { showHelp } from "$lib/terminal/help";
 import { writable, type Writable } from "svelte/store";
@@ -20,6 +21,8 @@ interface Cmds {
     };
 }
 
+const ring = getRing(window.location.host);
+
 export const cmds: Cmds = {
     help: {
         help: "List all available commands",
@@ -162,6 +165,76 @@ export const cmds: Cmds = {
             }
         ]
     },
+    ring: {
+        help: "View the ring",
+        func: (args, input) => {
+            output.update((prev) => [
+                ...prev,
+                {
+                    inp: input,
+                    res: `You're viewing the ${makeHyperlink(ring.name, ring.base)}. Use the options to navigate.`
+                }
+            ]);
+        },
+        opts: [
+            {
+                opts: ["-o", "--open"],
+                help: "Opens the ring",
+                func: (args, input) => {
+                    output.update((prev) => [
+                        ...prev,
+                        {
+                            inp: input,
+                            res: `Opening ${makeHyperlink(ring.name, ring.base)}...`
+                        }
+                    ]);
+                    window.open(ring.base, "_blank");
+                }
+            },
+            {
+                opts: ["-n", "--next"],
+                help: "Go to the next ring",
+                func: (args, input) => {
+                    output.update((prev) => [
+                        ...prev,
+                        {
+                            inp: input,
+                            res: `Opening the next ring...`
+                        }
+                    ]);
+                    window.open(`${ring.base}/${ring.next}`, "_blank");
+                }
+            },
+            {
+                opts: ["-p", "--previous"],
+                help: "Go to the previous ring",
+                func: (args, input) => {
+                    output.update((prev) => [
+                        ...prev,
+                        {
+                            inp: input,
+                            res: `Opening the previous ring...`
+                        }
+                    ]);
+                    window.open(`${ring.base}/${ring.previous}`, "_blank");
+                }
+            },
+            {
+                opts: ["-r", "--random"],
+                help: "Go to a random ring",
+                func: (args, input) => {
+                    output.update((prev) => [
+                        ...prev,
+                        {
+                            inp: input,
+                            res: `Opening a random ring...`
+                        }
+                    ]);
+                    window.open(`${ring.base}/${ring.random}`, "_blank");
+                }
+            }
+        ]
+    },
     echo: {
         help: "Prints the given text",
         func: (args, input) => {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`children?: Snippet;`
`9`	`9`	`}`
`10`	`10`
`11`		`- let { class: className = "", href, icon = null, children }: Props = $props();`
	`11`	`+ let { class: className = "", href, icon, children }: Props = $props();`
`12`	`12`	`</script>`
`13`	`13`
`14`	`14`	`<a`