halo-sigs · ruibaby · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/build.gradle b/build.gradle
@@ -53,4 +53,5 @@ build {
 
 halo {
     version = '2.15'
+    debug = true
 }
diff --git a/packages/hyperlink-card/index.html b/packages/hyperlink-card/index.html
@@ -2,12 +2,71 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hyperlink Card Preview</title>
     <script type="module" src="/src/index.ts"></script>
+
+    <style>
+      body {
+        margin: 0 auto;
+        max-width: 1024px;
+        padding: 2rem;
+      }
+
+      :root {
+        /* color-scheme: dark;
+        --halo-hyperlink-card-bg-color: #18181b;
+        --halo-hyperlink-card-inline-bg-color: #3f3f46;
+        --halo-hyperlink-card-inline-hover-bg-color: #52525b;
+
+        --halo-hyperlink-card-title-color: #f4f4f5;
+        --halo-hyperlink-card-inline-title-color: #f4f4f5;
+
+        --halo-hyperlink-card-description-color: #a1a1aa;
+        --halo-hyperlink-card-link-color: #e4e4e7;
+        --halo-hyperlink-card-bg-gradient: linear-gradient(#454545, #454545),
+          linear-gradient(transparent, transparent);
+        --halo-hyperlink-card-border-color: #52525b;
+        --halo-hyperlink-card-border-hover-color: #e4e4e7; */
+      }
+
+      body > * {
+        margin: 1rem 0;
+      }
+    </style>
   </head>
   <body>
-    <hyperlink-card></hyperlink-card>
+    <div style="display: flex; gap: 10px">
+      <hyperlink-card
+        href="https://www.halo.run/store/apps/app-WgWHe"
+        theme="grid"
+      ></hyperlink-card>
+      <hyperlink-card
+        href="https://www.halo.run/store/apps/app-acJAD"
+        theme="grid"
+      ></hyperlink-card>
+      <hyperlink-card
+        href="https://www.halo.run/store/apps/app-TbQVd"
+        theme="grid"
+      ></hyperlink-card>
+      <hyperlink-card
+        href="https://www.halo.run/store/apps/app-gFkMn"
+        theme="grid"
+      ></hyperlink-card>
+    </div>
+    <p>
+      123<hyperlink-inline-card
+        href="https://www.halo.run/store/apps/app-WgWHe"
+      ></hyperlink-inline-card
+      >123
+    </p>
+    <hyperlink-card href="https://www.halo.run" theme="small"></hyperlink-card>
+    <hyperlink-card href="https://ryanc.cc/archives/open-source-repo-issue"></hyperlink-card>
+    <hyperlink-card href="https://ryanc.cc/archives/2023" theme="small"></hyperlink-card>
+    <hyperlink-card href="https://github.com" theme="small"></hyperlink-card>
+    <hyperlink-card href="https://github.com/halo-dev/halo"></hyperlink-card>
+    <hyperlink-card href="https://github.com/tanstack/query"></hyperlink-card>
+    <hyperlink-card href="https://www.halo.run/store/apps/app-gFkMn"></hyperlink-card>
+    <hyperlink-card href="https://bbs.halo.run/"></hyperlink-card>
   </body>
 </html>
diff --git a/packages/hyperlink-card/package.json b/packages/hyperlink-card/package.json
@@ -15,19 +15,23 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/hyperlink-card.js"
-    }
+    },
+    "./var.css": "./var.css"
   },
   "main": "./dist/hyperlink-card.js",
   "module": "./dist/hyperlink-card.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "var.css"
   ],
   "scripts": {
     "dev": "vite --config vite.config.dev.ts",
     "build": "vite build --config vite.config.lib.ts",
     "lint": "lit-analyzer && eslint 'src/**/*.ts'",
-    "prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"
+    "prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write",
+    "test": "vitest",
+    "test:ci": "vitest --run"
   },
   "dependencies": {
     "lit": "^3.1.3"
@@ -49,6 +53,7 @@
     "typescript": "^5.4.5",
     "unocss": "^0.60.4",
     "vite": "^5.2.12",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/packages/hyperlink-card/src/hyperlink-card.ts b/packages/hyperlink-card/src/hyperlink-card.ts
@@ -1,25 +1,24 @@
 import resetStyles from '@unocss/reset/tailwind.css?inline';
 import { LitElement, css, html, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import './loading-bar';
+import './themes/grid-card';
+import './themes/regular-card';
+import './themes/small-card';
+import { SiteData } from './types';
 
 export class HyperlinkCard extends LitElement {
   @property({ type: String })
-  href = location.href; // Mock
+  href = '';
 
   @property({ type: String })
   target: '_blank' | '_self' = '_self';
 
   @property({ type: String })
-  theme: 'normal' | 'big' = 'normal';
+  theme: 'small' | 'regular' | 'grid' = 'regular';
 
-  // Mock
   @state()
-  siteTitle = '';
-
-  @state()
-  siteDescription = '';
+  siteData?: SiteData;
 
   @state()
   loading = false;
@@ -33,59 +32,63 @@ export class HyperlinkCard extends LitElement {
     // Mock
     try {
       this.loading = true;
-      const response = await fetch(this.href);
-      const html = await response.text();
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, 'text/html');
-      const title = doc.querySelector('title')?.textContent;
-      const description = doc.querySelector('meta[name="description"]')?.getAttribute('content');
-      this.siteTitle = title || '';
-      this.siteDescription = description || '';
+      const response = await fetch(
+        `/apis/api.hyperlink.halo.run/v1alpha1/link-detail?url=${this.href}`
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch site data');
+      }
+
+      this.siteData = (await response.json()) as SiteData;
     } catch (error) {
       console.error(error);
     } finally {
       this.loading = false;
     }
   }
 
+  renderCard() {
+    switch (this.theme) {
+      case 'small':
+        return html`<hyperlink-small-card
+          .href=${this.href}
+          .siteData=${this.siteData}
+        ></hyperlink-small-card>`;
+      case 'regular':
+        return html`<hyperlink-regular-card
+          .href=${this.href}
+          .siteData=${this.siteData}
+        ></hyperlink-regular-card>`;
+      case 'grid':
+        return html`<hyperlink-grid-card
+          .href=${this.href}
+          .siteData=${this.siteData}
+        ></hyperlink-grid-card>`;
+      default:
+        return html`<hyperlink-regular-card
+          .href=${this.href}
+          .siteData=${this.siteData}
+        ></hyperlink-regular-card>`;
+    }
+  }
+
   override render() {
-    return this.loading
-      ? html`<loading-bar></loading-bar>`
-      : html`
-          <a
-            href=${this.href}
-            target=${this.target}
-            class="border items-center relative rounded-xl overflow-hidden grid grid-cols-12 p-2 gap-3 hover:border-indigo-400 transition-all"
-          >
-            <div
-              class="h-full z-0 w-full rounded-b-none absolute inset-0 rounded-t-md bg-cover bg-center bg-no-repeat"
-              style=${styleMap({
-                backgroundImage: `linear-gradient(#f2f2f2, #f2f2f2), linear-gradient(#000000, #000000), url('https://repository-images.githubusercontent.com/126178683/adbb35f3-5a34-48a3-8183-1c1da0b3a3ac')`,
-                backgroundBlendMode: `luminosity, overlay, normal`,
-                transform: `scale(1.5) translate3d(0, 0, 0)`,
-                filter: `blur(64px) saturate(4) contrast(90%)`,
-              })}
-            ></div>
-            <div class="col-span-12 lg:col-span-4 xl:col-span-3 z-[1]">
-              <img
-                class="rounded-lg size-full object-cover"
-                src="https://repository-images.githubusercontent.com/126178683/adbb35f3-5a34-48a3-8183-1c1da0b3a3ac"
-              />
-            </div>
-            <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-1 z-[1]">
-              <div>
-                <span class="text-indigo-600 text-xs"> https://www.halo.run </span>
-              </div>
-              <div>
-                <h2 class="font-semibold text-base">Halo - 强大易用的开源建站工具</h2>
-              </div>
-              <p class="text-sm text-zinc-500">
-                Halo
-                是一款强大易用的开源建站工具，配合上不同的模板与插件，可以很好地帮助你构建你心中的理想站点。
-              </p>
-            </div>
-          </a>
-        `;
+    if (this.loading) {
+      return html`<loading-bar></loading-bar>`;
+    }
+
+    return html`
+      <a
+        href=${this.href}
+        target=${this.target}
+        class="border border-card relative flex rounded-xl overflow-hidden border-hover-card bg-card transition-all"
+      >
+        ${this.siteData
+          ? html` ${this.renderCard()} `
+          : html`<span class="text-link text-xs p-1 px-2">${this.href}</span>`}
+      </a>
+    `;
   }
 
   static override styles = [

diff --git a/packages/hyperlink-card/src/hyperlink-inline-card.ts b/packages/hyperlink-card/src/hyperlink-inline-card.ts
@@ -0,0 +1,94 @@
+import resetStyles from '@unocss/reset/tailwind.css?inline';
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { SiteData } from './types';
+
+export class HyperlinkInlineCard extends LitElement {
+  @property({ type: String })
+  href = '';
+
+  @property({ type: String })
+  target: '_blank' | '_self' = '_self';
+
+  @state()
+  siteData?: SiteData;
+
+  @state()
+  loading = false;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.fetchSiteData();
+  }
+
+  async fetchSiteData() {
+    // Mock
+    try {
+      this.loading = true;
+      const response = await fetch(
+        `/apis/api.hyperlink.halo.run/v1alpha1/link-detail?url=${this.href}`
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch site data');
+      }
+
+      this.siteData = (await response.json()) as SiteData;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  override render() {
+    const fallback = html`<a class="text-indigo-600" href=${this.href} target=${this.target}>
+      ${this.href}
+    </a>`;
+
+    if (this.loading) {
+      return fallback;
+    }
+
+    if (this.siteData) {
+      return html`<a
+        class="inline-flex items-center group space-x-1.5 px-1.5 text-inline-title bg-hover-inline-card text-[90%] rounded bg-inline-card transition-all mx-1 py-0.5"
+        href=${this.href}
+        target=${this.target}
+      >
+        ${!!this.siteData.icon || !!this.siteData.image
+          ? html`<img
+              class="size-4 rounded-sm"
+              src=${this.siteData.icon || this.siteData.image || ''}
+            />`
+          : ''}
+        <span>${this.siteData.title || this.href}</span>
+        ${!this.href.startsWith(location.origin)
+          ? html` <span class="i-tabler-external-link text-inline-title"></span>`
+          : ''}
+      </a>`;
+    }
+
+    return fallback;
+  }
+
+  static override styles = [
+    unsafeCSS(resetStyles),
+    css`
+      :host {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      @unocss-placeholder;
+    `,
+  ];
+}
+
+customElements.get('hyperlink-inline-card') ||
+  customElements.define('hyperlink-inline-card', HyperlinkInlineCard);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hyperlink-inline-card': HyperlinkInlineCard;
+  }
+}
diff --git a/packages/hyperlink-card/src/index.ts b/packages/hyperlink-card/src/index.ts
@@ -1 +1,3 @@
 export * from './hyperlink-card';
+export * from './hyperlink-inline-card';
+