HUGO

[Advice?] Multilingual Static-site Index for language agnostic content?

Hello there!

Bit of a quandary that I’m hoping for some help with.

I’m someone who is not a complete Hugo newbie (I’ve deployed about half a dozen static sites on Netlify via Hugo), but I’m definitely not as versed in Hugo’s more advanced features, and so I’m feeling in over my head with this project, and not sure if Hugo is the right tool for the job… but hoping it might be :crossed_fingers:t4::crossed_fingers:t4:

The situation:

I have a series of creative commons videos available on a few different platforms (YouTube, LBRY, torrent, etc.). I need to make an index of the videos, so users can see all the places each video can be accessed. I also need the page to be multilingual, but the videos are language agnostic (all the languages will point to the same videos). The idea would be something like:

Video X’s Name

Watch on YouTube
Watch/download on LBRY
Torrent

There is currently 100 videos, and more added every week. There will also be translators from at least 20 different languages involved in translating the site, most without programming experience.

The translation process for a new language, then, would be something like:

  • Translate strings for the page template (introduction to the videos, maybe small instructions about torrents/LBRY, etc.)
  • Translate strings for video list template (“Watch on LBRY”, “Download Torrent”, etc.)
  • Translate the names of the videos (“Name for Video 1”, “Name for Video 2”, etc.)
  • Translate names of the new videos when they become available

What I want to do is figure out as streamlined of a way as possible to deploy this, both for the translators, and for myself.

What I’ve been thinking

What I’ve been thinking is using shortcodes and i18n.

On the translation side, I think if I could just have all the translations in a single [TO/YA]ML file, I could use Gitlocalize as the interface for the translators.

On the platform side, then I have a shortcode drawn up where I could do something like these:

Kode

Shortcode used inline:

{{< vid vid="1"
yt="youtube addres"
lbry="lbry address"
>}}

layout/shortcodes/vid.html :

{{ with .Get "vid" }}<h3>{{ T "{{.}}" }}</h3>{{ end }}
{{ with .Get "yt"}}<div><a href="https://www.youtube.com/watch?v={{.}}">{{ T watchyoutube }}</a></div> {{ end }}
{{ with .Get "lbry"}}<div><a href="https://lbry.tv/{{.}}">{{ T watchlbry }}</a></div> {{ end }}
etc.

Then, I just have the page with the 100 of the shortcodes, one for each video.

The problem I’m coming up with is multi-fold.

First, and least importantly, that specific code above doesn’t work yet… just haven’t debugged it… Probably some basic syntax I screwed up somewhere, or something I’m missing with getting i18n and shortcodes to play nicely together. But, before I put in the effort to fix that, I wanted to see if I was missing something majorly important… which leads to…

Second and most important , it’s seeming like if we do this I’d need a completely different page with iterations of those shortcodes for every language we support, wouldn’t I? So, I’d need a “videos.en.md”, “videos.es.md”, et al., right? And so, when I needed to add to each video, I’d have to manually add a shortcode to every one of the 20+ languages.

Ideally, whenever a new video is available, I would like to just grab the 4-6 links we’ll be pointing to, put it in one file, and be done. Editing 20+ files once a week seems silly to me. Even if I script my side of it, it still seems like that’s a massive band-aid covering a much more systematic problem :sweat_smile:

I have a lot more experience with PHP/MySQL, and I can picture pretty easily what I want to do with that.

Blasphemy

Basically, have one table with the video URLs, and another table with the translations/indexes, and script them together; adding a new video is just a matter of adding a line in the DB, and having the PHP do the heavy lifting of putting everything together (or, when a translation is missing, showing the appropriate want to translate this? link.)

But for a myriad of reasons I’m sure I don’t need to re-iterate to you reading, I’d much rather just do this as a static site, and even more ideally as something on Jamstacks/Netlify so I don’t need to manage a server for it.

All that to ask, does anyone have any recommendations for how to do this? Any clever Hugo-fu that can be suggested which I’ve been missing?

Or, if I’m married to static site but Hugo isn’t up for the job, is this just going to end up being something I’ll need to script myself?

Any advice is more than welcome!
thanks so much!
~ Josh

I don’t pretend to understand the nuances of your project, but if I were you I would find a way to stuff everything into a JSON, TOML, or YAML file that sits in the data folder, and iterate through with a range site.Data.xxx.

See https://gohugo.io/templates/data-templates.

You might have to invest some time to figure out how to automate the creation of the data file, but in the long term I suspect this will pay off in efficiency and error avoidance.

1 Like

Thanks so much for your reply! I realized my project was a lot to take in after I posted this. But I didn’t know how to explain my problem more concisely.

But yes, ranging through stuff in the data folder is exactly what I needed to do. I didn’t know about the data folder when I made this post.

I also didn’t realize that I would need to put the logic of this stuff in the layouts folder instead of content.

Those were the two big pieces I needed to understand to eventually make the project work.

Thanks again for your reply, Joe.