improve: links avatar fallback (#3)

src/main.ts

@@ -38,6 +38,8 @@ function loadPageScript(type: string): Promise<IInit> {
     case "post":
     case "page":
       return import("@/pages/post");
+    case "page-links":
+      return import("@/pages/links");
     default:
       return import("@/pages/index");
   }

src/page-links.php

@@ -32,10 +32,12 @@
     </div>
     <div class="grid grid-gap-2 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
         <?php foreach ($links as $link) { ?>
-            <a href="<?php echo $link["url"] ?>" title="<?php echo $link["name"] ?>">
-                <mdui-card clickable class="w-full h-full pa-4 px-2">
+            <a href="<?php echo $link["url"] ?>" title="<?php echo $link["name"] ?>" target="_blank">
+                <mdui-card clickable class="w-full h-full pa-4 px-2 dark:bg-m-surface-container">
                     <div class="flex items-center">
-                        <mdui-avatar class="mr-2 flex-shrink-0" src="<?php echo $link["image"] ?>"></mdui-avatar>
+                        <mdui-avatar class="mr-2 flex-shrink-0">
+                            <img class="w-full h-full object-contain matecho-link-avatar" src="<?php echo $link["image"] ?>" name="<?php echo $link["name"] ?>">
+                        </mdui-avatar>
                         <span class="text-xl truncate"><?php echo $link["name"] ?></span>
                     </div>
                     <div class="opacity-80 pl-48px text-xs"><?php echo $link["description"] ?></div>

src/pages/links.ts

@@ -0,0 +1,27 @@
+import "@mdui/icons/person--rounded";
+
+export const init = () => {
+  const img = document.querySelectorAll<HTMLImageElement>(
+    "img.matecho-link-avatar"
+  );
+  img.forEach(imgEl => {
+    const name = imgEl.getAttribute("name");
+    const span = name
+      ? document.createElement("span")
+      : document.createElement("mdui-icon-person--rounded");
+    if (name) {
+      span.textContent = name.substring(0, 1).toUpperCase();
+    }
+    imgEl.style.display = "none";
+    imgEl.after(span);
+    if (imgEl.height != 0) {
+      imgEl.style.display = "";
+      span.remove();
+    } else {
+      imgEl.addEventListener("load", () => {
+        imgEl.style.display = "";
+        span.remove();
+      });
+    }
+  });
+};

unocss.config.ts

@@ -1,6 +1,11 @@
-import { defineConfig } from "unocss";
+import { defineConfig, presetUno } from "unocss";
 
 export default defineConfig({
+  presets: [
+    presetUno({
+      dark: "media"
+    })
+  ],
   theme: {
     breakpoints: {
       xs: "0px",
@@ -17,6 +22,12 @@ export default defineConfig({
       ([, c]) => {
         return { color: `rgb(var(--mdui-color-${c}))` };
       }
+    ],
+    [
+      /^bg-m-(.*)$/,
+      ([, c]) => {
+        return { "background-color": `rgb(var(--mdui-color-${c}))` };
+      }
     ]
   ]
 });