z0x/z0x.ca
Code Activity Actions

feat(index): replace inline svg with lucide icons & make logo unselectable
All checks were successful
build dist / build-dist (push) Successful in 35s
Details

Browse source
This commit is contained in:
z0x 2025-06-01 11:40:23 -04:00
parent 53ae4c2fdd
commit 69e584cea6
6 changed files with 20 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

5
astro.config.ts
View file

@ -1,7 +1,10 @@
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import icon from "astro-icon";
export default defineConfig({
integrations: [icon()],
vite: {
plugins: [tailwindcss()],
},

2
package.json
View file

@ -12,9 +12,11 @@
"@astrojs/check": "^0.9.4",
"@biomejs/biome": "1.9.4",
"@fontsource-variable/geist": "^5.2.6",
"@iconify-json/lucide": "^1.2.45",
"@tailwindcss/vite": "^4.1.8",
"@types/node": "^22.15.29",
"astro": "^5.8.1",
"astro-icon": "^1.1.5",
"motion": "^12.15.0",
"tailwindcss": "^4.1.8"
},

65
src/components/Links.astro
View file

@ -1,36 +1,19 @@
---
import { Icon } from "astro-icon/components";
---
<ul class="flex gap-6">
<li class="opacity-0 motion-links group">
<a
aria-label="git"
href="https://git.z0x.ca?utm_source=z0x.ca"
target="_blank"
class="git flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
>
<div
class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="32"
height="32"
stroke-width="2"
>
<path d="M16 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 8m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 15v-6"></path>
<path d="M15 11l-2 -2"></path>
<path d="M11 7l-1.9 -1.9"></path>
<path
d="M13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1 -2.892 0l-7.955 -7.955a2.045 2.045 0 0 1 0 -2.892l7.955 -7.955a2.045 2.045 0 0 1 2.892 0z"
></path>
</svg>
<Icon name="lucide:github" />
</a>
</li>
<li class="opacity-0 motion-links group">
@ -38,28 +21,13 @@
aria-label="blog"
href="https://blog.z0x.ca?utm_source=z0x.ca"
target="_blank"
class="blog flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
>
<div
class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="relative w-8 aspect-square transition"
>
<path
d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
></path>
<path d="M13 8l2 0"></path>
<path d="M13 12l2 0"></path>
</svg>
<Icon name="lucide:library-big" />
</a>
</li>
<li class="opacity-0 motion-links group">
@ -67,28 +35,13 @@
aria-label="matrix"
href="https://matrix.to/#/@z0x:z0x.ca"
target="_blank"
class="matrix flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
>
<div
class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="relative w-8 aspect-square transition"
>
<path d="M4 3h-1v18h1"></path>
<path d="M20 21h1v-18h-1"></path>
<path d="M7 9v6"></path>
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
</svg>
<Icon name="lucide:message-circle" />
</a>
</li>
</ul>

2
src/components/Logo.astro
View file

@ -7,6 +7,6 @@ import logo from "/src/assets/logo.svg";
src={logo}
alt="logo"
loading="eager"
class="w-48 opacity-0 motion-logo"
class="w-48 select-none opacity-0 motion-logo"
fetchpriority="high"
/>

25
src/js/index.ts
View file

@ -15,28 +15,3 @@ animate(
ease: "easeIn",
},
);
document.addEventListener("keydown", ({ key }: KeyboardEvent) => {
const shortcuts: Record<string, string> = {
g: "a.git",
b: "a.blog",
m: "a.matrix",
};
const selector = shortcuts[key.toLowerCase()];
if (!selector) return;
const link = document.querySelector(selector) as HTMLAnchorElement | null;
if (!link?.href) return;
const a = Object.assign(document.createElement("a"), {
href: link.href,
target: link.target,
rel: link.rel,
style: "display: none",
});
document.body.append(a);
a.click();
a.remove();
});

4
src/styles/globals.css
View file

@ -14,6 +14,10 @@
main {
@apply flex flex-col flex-auto gap-4 justify-center items-center;
}
[data-icon] {
@apply w-8 h-8;
}
}
:root {