Site: download and Gitea icons on the hero links [skip ci]

The Gitea mark is its logo's two cup paths in the link color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

site/e2e/text.spec.ts

@@ -68,6 +68,15 @@ test.describe("English locale", () => {
     await expect(lang).toHaveCSS("opacity", "1");
   });
 
+  test("the hero links keep their icons in either language", async ({ page }) => {
+    await page.goto("/");
+    const icons = page.locator(".hero .links a > svg[aria-hidden=true]");
+    await expect(icons).toHaveCount(2);
+    await page.locator(".lang").click();
+    await expect(icons).toHaveCount(2);
+    await expect(page.locator(".hero .links a")).toHaveText(["前往下载", "源码"]);
+  });
+
   test("the language button switches every text and back", async ({ page }) => {
     await page.goto("/");
     const lang = page.locator(".lang");
@@ -88,7 +97,7 @@ test.describe("English locale", () => {
     await expect(page.locator("#download [data-t=get]")).toHaveAttribute("href", RELEASES);
     await expect(page.locator(".hero .links a").last()).toHaveText("Source");
     await expect(page.locator(".hero .links a").last()).toHaveAttribute("href", REPO);
-    await expect(page.locator(".hero [data-t=get]")).toHaveAttribute("href", RELEASES);
+    await expect(page.locator(".hero .links a").first()).toHaveAttribute("href", RELEASES);
     const files = await page.locator("a[href]").evaluateAll((as) =>
       as.map((a) => (a as HTMLAnchorElement).href).filter((h) => /\.(dmg|tar\.gz|zip|exe|AppImage)$/.test(h)),
     );

site/src/icons.ts

@@ -0,0 +1,18 @@
+// Link icons, drawn in the link's color.
+import { said, type Key } from "./text.ts";
+
+const ICONS = {
+  download: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>`,
+  gitea: `<svg viewBox="4 140 632 392" fill="currentColor"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z"/></svg>`,
+};
+
+/** A link with `icon` before its keyed text. */
+export function iconLink(icon: keyof typeof ICONS, key: Key, href: string): HTMLAnchorElement {
+  const a = document.createElement("a");
+  a.href = href;
+  a.className = "icon";
+  a.innerHTML = ICONS[icon];
+  a.firstElementChild!.setAttribute("aria-hidden", "true");
+  a.append(said("span", key));
+  return a;
+}

site/src/main.ts

@@ -9,6 +9,7 @@ import { playground } from "./play.ts";
 import { film } from "./film.ts";
 import { said, speak, word, type Lang } from "./text.ts";
 import { RELEASES, latest } from "./release.ts";
+import { iconLink } from "./icons.ts";
 
 const REPO = "https://git.zacharyzhang.com/ZacharyZhang-NY/ElyOffice";
 
@@ -18,10 +19,8 @@ if (!app) throw new Error("index.html has no #app");
 const hero = document.createElement("header");
 const title = document.createElement("h1");
 title.textContent = "Ely Office";
-const source = said("a", "source");
-source.href = REPO;
-const download = said("a", "get");
-download.href = RELEASES;
+const source = iconLink("gitea", "source", REPO);
+const download = iconLink("download", "get", RELEASES);
 const links = document.createElement("div");
 links.className = "links";
 links.append(download, source);

site/src/style.css

@@ -66,6 +66,13 @@ button:focus-visible {
   gap: 1.5rem;
 }
 
+a.icon svg {
+  height: 1em;
+  width: auto;
+  margin-inline-end: 0.35em;
+  vertical-align: -0.125em;
+}
+
 .stage {
   display: block;
   max-width: 100%;