Tweet2Hugo

This python script fetches the latest tweet of a public user from twitter and outputs a json file to Hugo's data directory. This script expects two json files in /etc/tw2hugo, which should have chmod 700 for a non-privileged user and no rights for the group. All files should have chmod 400.

Needed configuration files

/etc/tw2hugo/mail_credentials.json

{
  "smtp-server": "mail server",
  "smtp-port": 465,
  "email-user": "username for smtp",
  "email-sendfrom": "sender mail",
  "email-password": "passw0rd",
  "email-sendto": "receiving mail"
}

/etc/tw2hugo/twitter.json

{
    "bearer": "bearer token of your twitter app",
    "twitter-handle": "twitter handle",
    "output-location": "hugo base dir/data/latest_tweet.json"
}

Why does it need email credentials?

The script has the specialty that sends an email when something goes wrong, so I am notifed and can fix the issue. If you don't want that, simply open mail/mail.py and replace everyting in the init function with a simple pass.

How does it integrate into Hugo?

It puts the full json reply from twitter into the data directory, if correctly configured. From there you can do two things:

• Automate the build (strongly recommended)
• Build a template that uses the json data to build a twitter card.

I build the template using a partial template. It sits in the directory layouts/partials and is called latest_tweet.html. The content is not very interesting:

<div class="box has-text-white brdr-yayellow bg-darkslate">
    <div class="content p-4">
        {{ with .Site.Data.latest_tweet }}
        <div class="columns">
            <div class="column is-half is-offset-one-quarter">
                <figure class="image is-128x128 is-centered">
                     <img class="is-rounded" src="/images/twitter_profile.webp">
                </figure>
            </div>
        </div>
        <p class="has-text-centered">
            <a target="_blank" rel="nofollow noreferrer noopener" href="https://twitter.com/{{.user.name}}">
                @{{ .user.name }}
            </a>
        </p>
        <hr class="twitter-hr">
        <p class="mt-5 has-text-justified">
            {{ .full_text | safeHTML }}
        </p>
        <hr class="twitter-hr">

        <div class="level mb-0">
            <span class="level-left">
                <a target="_blank" rel="nofollow noreferrer noopener" href="https://twitter.com/{{.user.name}}/status/{{.id_str}}">{{ slicestr .created_at 0 20 }}</a>
            </span>
            <span class="level-right">
               via {{ .source | safeHTML }}
            </span>
        </div>
        <hr class="twitter-hr">
        <div class="level">
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/like?tweet_id={{.id_str}}">
                    <span class="icon"><i class="fas fa-heart"></i></span>
                </a>
            </span>
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/retweet?tweet_id={{.id_str}}">
                    <span class="icon"><i class="fas fa-retweet"></i></span>
                </a>
            </span>
            <span class="level-item is-size-4 mr-5">
                <a href="https://twitter.com/intent/tweet?in_reply_to={{.id_str}}">
                    <span class="icon"><i class="fas fa-reply"></i></span>
                </a>
            </span>
        </div>
        {{ end }}
    </div>
</div>

The important bit is this go template instruction:

{{ with .Site.Data.latest_tweet }}
{{ end }}

Between these you can simple call the keys from the json, so name in dict user becomes simple {{ .user.name }}.
Neato, isn't it? If you want to know how it looks like, head over to my website and scroll down to the footer.