2020-11-07 21:09:55 +01:00
2020-11-07 19:13:21 +01:00
2020-11-07 15:01:27 +01:00
2020-11-07 19:13:21 +01:00
2020-11-07 19:13:21 +01:00
2020-11-07 19:32:01 +01:00
2020-11-07 19:40:43 +01:00

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.

Description
Python script to convert tweets to Hugo data, so you can use it in templates. No JS, no hassle. ♥
https://tuxstash.de/
Readme 606 KiB
Languages
Python 100%