Hugoでシンプルなリンクカード（ブログカード）を作った

{{- $url := (.Get 0) -}}
{{- $target_url := urls.Parse $url -}}

{{- $title := "" -}}
{{- $favicon_url := "" -}}

{{- with $result := resources.GetRemote $url -}}
    {{- with $result.Err -}}
      {{- $title = (print $url "にアクセスできませんでした") -}}
    {{- else -}}
        <!-- headを取得 -->
        {{- $head := index (findRE "<head[^>]*?>(.|\n)*?</head>" $result.Content) 0 -}}

        <!-- headからタイトルを取得 -->
        {{- $title = index (findRE "<title.*?>(.|\n)*?</title>" $head) 0 -}}
        {{- if $title -}}
          {{- $title = replaceRE "</?title>" "" $title -}}
        {{- end -}}

        <!-- headからfaviconを取得 -->
        {{- $linktag := index (findRE "<link[^<>]*rel=[\"']?icon[\"']?.*?>" $head) 0 -}}
        {{- if not $linktag -}}
          {{- $linktag = index (findRE "<link[^<>]*?rel=[\"']?shortcut icon[\"']?.*?>" $head) 0 -}}
        {{- end -}}
        {{- if $linktag -}}
          {{- $href := index (findRE "href=[\"']?[^ >]*[\"']?" $linktag) 0 -}}
          {{- $href = replace $href "href=" "" | replaceRE "[\"']" "" -}}
          {{- if eq (strings.Substr $href 0 1) "/"  -}}
            {{- $favicon_url = print $target_url.Scheme "://" $target_url.Hostname $href -}}
          {{- else if gt (len (findRE "^http[s]?://" $href)) 0 -}}
            {{- $favicon_url = $href -}}
          {{- end -}}
        {{- end -}}

        <!-- /favicon.icoを取得 -->
        {{- if not $favicon_url -}}
          {{- range $favicon_ext := (slice ".ico" ".png" ".gif") -}}
            {{- $root_favicon_path := print $target_url.Scheme "://" $target_url.Hostname "/favicon" $favicon_ext -}}
            {{- $favicon := resources.GetRemote $root_favicon_path -}}
           {{- if not $favicon -}}
             {{- continue -}}
           {{- else -}}
             {{- $favicon_url = $root_favicon_path -}}
             {{- break -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

<!-- HTMLを生成 -->
<a href="{{- htmlUnescape $target_url -}}">
  <div class="link-card">
    <div class="link-card-title">
      {{- $title | htmlUnescape | truncate 100 -}}
    </div>
    <div class="link-card-hostname">
      {{ if $favicon_url }}
      <div class="link-card-hostname-img">
        <img alt="icon" src="{{- $favicon_url -}}">
      </div>
      {{ end }}
      <span>
        {{- $target_url.Hostname -}}
      </span>
    </div>
  </div>
</a>

.link-card {
  display: flex;
  flex-direction: column;
  padding: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
  /* 以下はお好みで */
  border:solid 2px rgba(0,0,0,0.15);
  border-radius:5px;
}

/* マウスホバー時の挙動 */
.link-card:hover {
  opacity: 0.6;
  transition: 0.1s;
}

.link-card-title {
  font-weight: bold;
  margin-bottom: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-card-hostname {
  display: flex;
  align-items: center;
  height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-card-hostname-img {
  height: 100%;
  display: flex;
  align-items: center;
}

.link-card-hostname-img img {
  max-height: 100%;
  width: auto;
  margin-right: 1em;
}

.link-card-hostname span {
  font-size: 0.9em;
}

{{< linkcard "https://example.com/" >}}