DEV Community

r_tanaka
r_tanaka

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Use it on hugo markdown file like below.

{{< linkcard "https://bsky.app/profile/callas1900.bsky.social" "bsky">}}
Enter fullscreen mode Exit fullscreen mode

have fun!

Top comments (0)