z0x/home.arpa
Code Actions

feat(all): tailwind v5 rewrite, astro components

Browse source
This commit is contained in:
z0x 2025-01-05 00:25:48 -05:00
parent ffebd2652b
commit 27314ccb15
31 changed files with 280 additions and 7623 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/pages/index.astro
View file

@ -1,4 +1,9 @@
<!doctype html>
---
import ServiceCard from "../components/ServiceCard.astro";
const services = [{ serviceName: "Dockge" }, { serviceName: "Dozzle" }, { serviceName: "Element" }, { serviceName: "Gitea", serviceUrl: "https://git.home.arpa" }, { serviceName: "Immich" }, { serviceName: "Navidrome" }, { serviceName: "Radicale" }, { serviceName: "Redlib" }, { serviceName: "Scrutiny" }, { serviceName: "Synapse Admin" }, { serviceName: "Tailscale", serviceUrl: "https://login.tailscale.com/admin" }, { serviceName: "Unifi" }, { serviceName: "Vaultwarden" }, { serviceName: "Zyxel", serviceUrl: "https://10.0.0.1" }, { serviceName: "z0x" }];
---
<html lang="en">
<head>
<meta charset="utf-8" />
@ -7,203 +12,11 @@
<link rel="icon" type="image/x-icon" sizes="192x192" href="/img/favicon.svg" />
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon.svg" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/img/favicon.svg" />
<link rel="stylesheet" href="/src/css/app.css" />
</head>
<body class="flex items-center justify-center min-h-screen p-4 bg-neutral-900 text-neutral-300">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="https://immich.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M7.5 7c2.485 0 4.5 1.974 4.5 4.409v.591h-8.397a.61 .61 0 0 1 -.426 -.173a.585 .585 0 0 1 -.177 -.418c0 -2.435 2.015 -4.409 4.5 -4.409z"></path>
<path d="M16.5 17c-2.485 0 -4.5 -1.974 -4.5 -4.409v-.591h8.397c.333 0 .603 .265 .603 .591c0 2.435 -2.015 4.409 -4.5 4.409z"></path>
<path d="M7 16.5c0 -2.485 1.972 -4.5 4.405 -4.5h.595v8.392a.61 .61 0 0 1 -.173 .431a.584 .584 0 0 1 -.422 .177c-2.433 0 -4.405 -2.015 -4.405 -4.5z"></path>
<path d="M17 7.5c0 2.485 -1.972 4.5 -4.405 4.5h-.595v-8.397a.61 .61 0 0 1 .175 -.428a.584 .584 0 0 1 .42 -.175c2.433 0 4.405 2.015 4.405 4.5z"></path>
</svg>
<span>Immich</span>
</div>
</a>
<a href="https://vaultwarden.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path>
<path d="M8 11v-4a4 4 0 1 1 8 0v4"></path>
<path d="M15 16h.01"></path>
<path d="M12.01 16h.01"></path>
<path d="M9.02 16h.01"></path>
</svg>
<span>Vaultwarden</span>
</div>
</a>
<a href="https://radicale.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
</svg>
<span>Radicale</span>
</div>
</a>
<a href="https://dockge.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M12 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M17 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M7 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
</svg>
<span>Dockge</span>
</div>
</a>
<a href="https://git.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<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>
<span>Gitea</span>
</div>
</a>
<a href="https://element.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path>
</svg>
<span>Element</span>
</div>
</a>
<a href="https://synapse.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M7 4h-4v16h4"></path>
<path d="M17 4h4v16h-4"></path>
<path d="M8 16h.0"></path>
<path d="M12 16h.0"></path>
<path d="M16 16h.0"></path>
<path d="M8 8h.0"></path>
<path d="M12 8h.0"></path>
<path d="M16 8h.0"></path>
<path d="M8 12h.0"></path>
<path d="M12 12h.0"></path>
<path d="M16 12h.0"></path>
</svg>
<span>Synapse Admin</span>
</div>
</a>
<a href="https://navidrome.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M7 12a5 5 0 0 1 5 -5"></path>
<path d="M12 17a5 5 0 0 0 5 -5"></path>
</svg>
<span>Navidrome</span>
</div>
</a>
<a href="https://scrutiny.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
<path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
<path d="M7 8l0 .01"></path>
<path d="M7 16l0 .01"></path>
<path d="M11 8h6"></path>
<path d="M11 16h6"></path>
</svg>
<span>Scrutiny</span>
</div>
</a>
<a href="https://redlib.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14z"></path>
<path d="M12 8l1 -5l6 1"></path>
<path d="M19 4m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<circle cx="9" cy="13" r=".5" fill="currentColor"></circle>
<circle cx="15" cy="13" r=".5" fill="currentColor"></circle>
<path d="M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5"></path>
</svg>
<span>Redlib</span>
</div>
</a>
<a href="https://dozzle.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M4 12h.01"></path>
<path d="M4 6h.01"></path>
<path d="M4 18h.01"></path>
<path d="M8 18h2"></path>
<path d="M8 12h2"></path>
<path d="M8 6h2"></path>
<path d="M14 6h6"></path>
<path d="M14 12h6"></path>
<path d="M14 18h6"></path>
</svg>
<span>Dozzle</span>
</div>
</a>
<a href="https://unifi.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M12 12l0 .01"></path>
<path d="M14.828 9.172a4 4 0 0 1 0 5.656"></path>
<path d="M17.657 6.343a8 8 0 0 1 0 11.314"></path>
<path d="M9.168 14.828a4 4 0 0 1 0 -5.656"></path>
<path d="M6.337 17.657a8 8 0 0 1 0 -11.314"></path>
</svg>
<span>Unifi</span>
</div>
</a>
<a href="https://10.0.0.1" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M3 13m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
<path d="M17 17l0 .01"></path>
<path d="M13 17l0 .01"></path>
<path d="M15 13l0 -2"></path>
<path d="M11.75 8.75a4 4 0 0 1 6.5 0"></path>
<path d="M8.5 6.5a8 8 0 0 1 13 0"></path>
</svg>
<span>Zyxel</span>
</div>
</a>
<a href="https://login.tailscale.com/admin" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" 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">
<path d="M5 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M19 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
<path d="M19 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
</svg>
<span>Tailscale</span>
</div>
</a>
<a href="https://z0x.home.arpa" target="_blank">
<div class="flex items-center space-x-2 p-4 bg-neutral-700 rounded-lg shadow-md">
<svg class="sm:w-12 w-10 aspect-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient id="radialGradient27" cx="250" cy="250" fx="250" fy="250" r="250" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.3"></stop>
<stop offset="0.9638136" stop-color="#ffffff" stop-opacity="0"></stop>
</radialGradient>
<filter id="filter1" x="-0.243" y="-0.243" width="1.486" height="1.486">
<feGaussianBlur stdDeviation="30.375"></feGaussianBlur>
</filter>
</defs>
<circle cx="250" cy="250" r="150" fill="url(#radialGradient27)" filter="url(#filter1)"></circle>
<path d="M 250.00005,25 268,151 c 3.11463,19.35442 13.1387,38.54023 27,52.39957 13.86121,13.8621 34.64617,25.48527 54,28.60043 L 475,250.00001 349,268 c -19.35383,3.11517 -40.13879,14.73834 -54,28.60043 C 281.1387,310.45977 271.11463,329.64558 268,349 L 250.00005,475 232,349 C 228.88537,329.64558 218.86121,310.45977 205,296.60043 191.1387,282.73834 170.35383,271.11517 151,268 L 25,250.00001 151,232 c 19.35383,-3.11516 40.1387,-14.73833 54,-28.60043 C 218.86121,189.54023 228.88537,170.35442 232,151 Z" fill="#ffffff"></path>
</svg>
<span>z0x</span>
</div>
</a>
{services.map((service) => <ServiceCard serviceName={service.serviceName} svg={service.svg} serviceUrl={service.serviceUrl} />)}
</div>
</body>
</html>