Hugo shortcode - responsive Bootstrap 4 card that parses external web URL and populates meta data.

ext-link-card.html

<!-- fsharp_webparser parses meta from passed-in url and returns json that's then used in the population of the snippet  -->
{{ with getJSON (printf "https://h3portfoliosite.azurewebsites.net/api/gethtmlmeta?url=%s&code=[REDACTED]" (.Get 0 )) }}
<div class="card centered" style="max-width:36rem;width:100%;margin-bottom:2rem;">
    <div class="card-header font-weight-bold" style="letter-spacing:.15rem;">
        <a href="{{ .ogurl }}" target="_blank">{{ .ogtitle | title }}</a>
    </div>
    <div class="card-body">
        <img src="{{ .ogimage }}" alt="" class="card-img-top rounded bordered mb-2" style="width:100%;height:auto">
        <div class="mt-2 small">
                {{ with .ogdescription }}<caption>{{ . | htmlUnescape | markdownify }}</caption>{{ end }}
        </div>
    </div>
    <div class="card-footer">
        <div class="font-italic text-muted small">
            {{ with .author }}Author: {{ . }},&nbsp;{{ end }}
            {{ if .applicationname }}
                {{ with .applicationname }}Source: {{ . }} {{ end }}
            {{ else }} 
                {{ with .ogsite_name }}Source: {{ . }} {{ end }}
            {{ end }}
            {{ if in .articlepublished_time "T" }}
                {{ with .articlepublished_time }}&nbsp;&middot;&nbsp;&nbsp;{{ dateFormat "Jan 02, 2006" . }} {{ end }}
            {{ else }}
                {{ with .articlepublished_time}}&nbsp;&middot;&nbsp;&nbsp;{{ . }} {{ end }}
            {{ end }}</div>
    </div>
</div>
{{ end }}