[Copy Stack] 1.1.0 패치 - Favicon 추가

https://github.com/dev2820/copy-stack/releases/tag/v1.1.0

1.1.0 버전을 업데이트 했습니다. 사실 업데이트를 별도의 글로 작성하는게 좋을지 고민을 좀 했는데 중간 이상 규모의 기능 업데이트가 있으면 문서를 남기는게 좋을 것 같아 나중되어서야 문서로 남깁니다.

Favicon 추가

1.0.0 화면

(1.1.0 화면)

복사본의 소스 옆에 해당 사이트의 Favicon을 추가했습니다.

Favicon 추가 방법

특정 사이트의 Favicon은 구글에서 API를 지원해서 쉽게 얻을 수 있습니다.

https://dev.to/derlin/get-favicons-from-any-website-using-a-hidden-google-api-3p1e
(위 사이트 참고)

https://www.google.com/s2/favicons?domain=${domain}&sz=${size}

이렇게 www.google.com/s2/favicons를 통해 특정 domain의 Favicon을 얻을 수 있습니다. size는 Favicon의 사이즈인데 default가 16입니다.

Favicon을 불러오는 유틸함수를 만들어줍니다.

export default function getFaviconUrl(domain: string, size: number) {
  return `https://www.google.com/s2/favicons?domain=${domain}&sz=${size}`;
}

다음 Favicon을 불러오는 컴포넌트를 별도로 만들어줬습니다.

import { LitElement, css, html } from "lit";
import { customElement, property, query } from "lit/decorators.js";
import getFaviconUrl from "@/utils/getFaviconUrl";
import noImage from "@/assets/images/no-image.jpg";

@customElement("favicon-img")
export default class FaviconImg extends LitElement {
  @property({ type: String })
  domain!: string;

  @property({ type: Number })
  size: number = 32;

  @query("img.favicon")
  $favicon!: HTMLImageElement;

  constructor() {
    super();
  }
  render() {
    return html` <img
      class="favicon"
      @error="${this.#showNoImage}"
      src="${getFaviconUrl(this.domain, this.size)}"
      width="${this.size}"
      height="${this.size}"
    />`;
  }

  #showNoImage() {
    this.$favicon.src = noImage;
  }
  static styles = css`
    :host {
      display: inline-block;
      line-height: 2rem;
    }
    img.favicon {
      object-fit: cover;
      aspect-ratio: 1/1;
    }
  `;
}

이미지를 불러오지 못한다면 기본 이미지 (아래)가 나오도록 했습니다.

다음 Favicon을 카드에 추가하면 끝