feat: favicon and astroneer

app/components/HomeElement.tsx

@@ -4,9 +4,9 @@ import type { ReactNode } from "react";
 type HomeElementProps = {
   title: string;
   description: string;
-  href: string;
+  href?: string;
   actionLabel: string;
-  variant: "jellyfin" | "minecraft";
+  variant: "jellyfin" | "minecraft" | "astroneer";
   external?: boolean;
   children: ReactNode;
 };
@@ -29,14 +29,18 @@ export default function HomeElement({
         <span>{description}</span>
       </span>
       <span className="service-action">
-        {actionLabel}
-        <ArrowIcon />
+        <span className="service-action-label">{actionLabel}</span>
+        {href ? <ArrowIcon /> : <SignalIcon />}
       </span>
     </>
   );
 
   const className = `service-card service-card--${variant}`;
 
+  if (!href) {
+    return <article className={className}>{content}</article>;
+  }
+
   if (external) {
     return (
       <a href={href} className={className} target="_blank" rel="noopener noreferrer">
@@ -94,6 +98,31 @@ export function MinecraftIcon() {
   );
 }
 
+export function AstroneerIcon() {
+  return (
+    <svg viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+      <defs>
+        <linearGradient id="astroneer-gradient" x1="16" y1="82" x2="80" y2="14">
+          <stop stopColor="#ffd54a" />
+          <stop offset="0.48" stopColor="#ff7a3d" />
+          <stop offset="1" stopColor="#6df4ff" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M14 54c13-25 44-39 68-28"
+        fill="none"
+        stroke="url(#astroneer-gradient)"
+        strokeLinecap="round"
+        strokeWidth="7"
+      />
+      <circle cx="45" cy="48" r="22" fill="#172341" stroke="#6df4ff" strokeWidth="6" />
+      <path d="M29 41h13l7 8h18" fill="none" stroke="#ffd54a" strokeLinecap="round" strokeWidth="6" />
+      <path d="M38 65h14l9-9" fill="none" stroke="#ff7a3d" strokeLinecap="round" strokeWidth="6" />
+      <circle cx="70" cy="25" r="8" fill="#ffd54a" />
+    </svg>
+  );
+}
+
 function ArrowIcon() {
   return (
     <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
@@ -102,3 +131,13 @@ function ArrowIcon() {
     </svg>
   );
 }
+
+function SignalIcon() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path d="M5 12.5a10 10 0 0 1 14 0" />
+      <path d="M8.5 16a5 5 0 0 1 7 0" />
+      <path d="M12 19h.01" />
+    </svg>
+  );
+}

app/components/MinecraftStatus.tsx

@@ -99,7 +99,7 @@ type StatusItemProps = {
 
 function StatusItem({ label, value, tone }: StatusItemProps) {
   return (
-    <div className="status-item">
+    <div className="status-item notranslate" translate="no">
       <span className="status-label">{label}</span>
       <strong className={tone ? `status-value status-value--${tone}` : "status-value"}>
         {tone ? <span className="status-light" aria-hidden="true" /> : null}