Hugo shortcode for sns with unit.link like button

Hugo has shortcode feature in order to implement own code block like web card things which many blog service implements.

this is an example for my local environment

$ touch themes/terminal/layouts/shortcodes/linkcard.html

then, change the file like below.

{{ $url := .Get 0 }}
{{ $title := .Get 1 }}
{{ $u := urls.Parse $url }}
<div class="card">
  <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
    <div class="flex items-center card-content">
      <img src="https://www.google.com/s2/favicons?sz=32&domain_url={{ $u.Scheme }}://{{ $u.Host }}" class="fav-icon mr-3" alt="{{ $url }} favicon image" width="32" height="32">
      <h3>{{ $title }}</h3>
    </div>
  </a>
</div>
<style>
.card {
  background-color: #78e2a0;
  color: rgb(31, 34, 42);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  margin: 16px 0;
}
.card:hover {
  transform: translateY(-4px);
}
.card a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 12px 16px;
}
.card-content {
  display: flex;
  align-items: center;
}
.card-content h3 {
  margin: 0;
  margin-left: 30px;
  font-size: 1.25em;
}
.fav-icon {
  flex-shrink: 0;
}
</style>

Use it on hugo markdown file like below.

{{< linkcard "https://bsky.app/profile/callas1900.bsky.social" "bsky">}}

have fun!

Blog

Hugo shortcode for sns with unit.link like button

r_tanaka

Join Our Newsletter. No Spam, Only the good stuff.

Related