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!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay