Favicon

package.json

@@ -2,17 +2,17 @@
     "name": "@encode42/erora.live",
     "description": "Issues arise, bugs form. Error is inevitable.",
     "author": {
-      "name": "encode42",
-      "email": "[email protected]",
-      "url": "https://encode42.dev"
+        "name": "encode42",
+        "email": "[email protected]",
+        "url": "https://encode42.dev"
     },
     "funding": {
-      "type": "github",
-      "url": "https://github.com/sponsors/encode42"
+        "type": "github",
+        "url": "https://github.com/sponsors/encode42"
     },
     "repository": {
-      "type": "git",
-      "url": "https://github.com/encode42/erora.live.git"
+        "type": "git",
+        "url": "https://github.com/encode42/erora.live.git"
     },
     "homepage": "https://erora.live",
     "license": "MIT",

public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/favicon/site.webmanifest

@@ -0,0 +1,18 @@
+{
+    "name": "erora",
+    "short_name": "erora",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#24273a",
+    "background_color": "#24273a"
+}

src/components/releases/releases.module.css

@@ -0,0 +1,13 @@
+.releases {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 4rem;
+    overflow: auto
+}
+
+.releases iframe {
+    width: 100%;
+    border: none;
+    border-radius: 2rem;
+    aspect-ratio: 1/1
+}

src/components/releases/releases.tsx

@@ -0,0 +1,17 @@
+import type { Release } from "~/util/type/release";
+import { component$ } from "@builder.io/qwik";
+import styles from "./releases.module.css";
+
+export interface ReleasesProps {
+    "releases": Release[]
+}
+
+export const Releases = component$<ReleasesProps>(({ releases }) => {
+    return (
+        <div class={styles.releases}>
+            {releases.map(release => (
+                <iframe key={release.id} title={release.title} src={`https://bandcamp.com/EmbeddedPlayer/track=${release.id}/size=large/bgcol=1e2030/linkcol=c6a0f6/minimal=true/transparent=true/`}/>
+            ))}
+        </div>
+    );
+});

src/components/router-head/router-head.tsx

@@ -15,12 +15,19 @@ export const RouterHead = component$(() => {
             <meta property="og:title" content={title}/>
             <meta property="og:description" content={description}/>
             <meta name="theme-color" content="#cad3f5"/>
+            <meta name="msapplication-TileColor" content="#603cba"/>
             <link rel="canonical" href={location.url.href}/>
             <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-            <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
             {head.meta.map(meta => (
                 <meta key={meta.key} {...meta}/>
             ))}
+            <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg"/>
+            <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/>
+            <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/>
+            <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/>
+            <link rel="manifest" href="/favicon/site.webmanifest"/>
+            <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#24273a"/>
+            <meta property="og:image" content="https://erora.live/badge.png"/>
             {head.links.map(link => (
                 <link key={link.key} {...link}/>
             ))}