Building a multi-language Taylor Swift fan site (10 Minute Version) (Zach's Version)
December 22, 2023
Watch in 10 minutes
In the above video I walk through a Taylor Swift lyrics fansite I built to demonstrate a few internationalization features with Eleventy and CloudCannon.
Features
- Supports English and Spanish (any number of languages can be added)
- Custom redirects are not necessary! The HTML links just work.
- For-free inter-language page-aware language chooser (e.g. “Also available in…”)
- Translated header, footer, and banner (in a different repo via Site Mounting)
- For-free locale aware search from Pagefind
- Album art pulled from Spotify Open Graph images
- Deep links to various streaming services
- Built with Eleventy v3.0
- Using
nodefront matter insongs.liquid(to enable thebeforepagination callback in JavaScript) - Using custom dual pagination with
beforechunking data between languages and songs.
- Using
- Using the seasonally appropriate
<snow-fall>web component.
Searchable Transcript
all right what's up everybody today Iwant to talk to you aboutinternationalization or creating awebsite that can have multiple languages
and locals to really show off yourcontent to a variety of global users andthe term internationalization is oftenseen as i8n the secret behind the
shortening of that term is there's 18letters between the I and the n and theyjust get removed and replaced with an 18so when you see someone talking about I
18n they're really just talking aboutinternationalizationnow there are a couple of ways to dothis with Cloud Canon today you can go
into your Cloud Canon application openup the site settings there's an i8n pagein the build section of your sitesettings and you can click this little
check box that will opt into theinternationalization workflow that cloudCannon has set up and this is great itwill take your site create a couple of
different languages for it based on somedata files that exist in your repositoryand it will auto automatically redirectusers to the localized version of your
site depending on what languagePreference they have set in their webbrowser another great tool in CloudCannon's Arsenal is a tool called Rosie
now Rosie works very similarly it's alittle bit more powerful we'll take theoutput of your statically generated siteand again it will postprocess it to
create internationalized versions of thesite but today I'm going to show you athird option that allows you to edityour internationalized strings inside of
the cloud Cannon application using Elsinternationalization plugin and we'regoing to do that through the lens ofthis Taylor Swift Super Fan website that
I've built this is a site that um has atwo different languages on it it's gotEnglish and Spanish and it's a lyricswebsite so we got a couple of songs here
but the internationalization piece ofthis is that we have each website isgenerated in English and Spanish usingthe 11d internationalization plugin so
the internationalization plugingenerates links for all of the languagesthat you are specifying in your siteevery single page on your site will then
have an internationalized link so I canclick through to a specific song pageand that will also have a customizedlink to the Spanish version and one of
the other things here is I built a tinylittle web component to highlight whenthe user's browser language preferencedoesn't match the language of the page
being shown to the users and you can seethe URLs are internationalized as wellif you look up in the URL bar if weclick over to the Spanish version you
can see that the URL changes to includethe local here and then also the titleof the song has been changed to theSpanish version as well now the other
neat thing here is that all of thecontent on the page has beeninternationalized so this content isactually coming through using Cloud
Cannon site mounting feature so we havea banner that's set across all of mydifferent demos we have a drop down herethat shows links to all of the different
demos that I've built so far using CloudCannon to show off Cloud Cannon featuresand all the content inside of this menuhas been internationalized as well but
that actually lives in a separaterepository and you can if you scrolldown to the bottom you also see the thelinks and the footer have been
internationalized as well so the otherthing you'll notice is that when youclick around on the site if you are inthe Spanish version you will remain in
the Spanish version all the links arerelative to the current language thatyou're browsing and if you switch backall the links will then be to English
versions so we're using the 11dinternationalization plugin to generatethe HTML for this site we have theEnglish version of the website is
available by default on sort of the rootof the URL structure and Es exists as aSpanish version and if you go into thecloud Cannon app the sort of extra
benefit that we get now is that we canedit these songs in Cloud Cannon soTechnical and non-technical editors nowhave access to editing the lyrics of the
site in different languages as well sowe have our English version here we havethe title and the lyrics and we alsohave the Spanish version here which has
a separate title and also separateSpanish lyrics and so if we have amistake here we can come in and easilyedit it we also have a URL section to
sort of link out to stream mobileversions of the song if you want to playthe song and the nice thing here is thatwe can extend this and add as many
languages as we want and all of thatlyric content and song title contentwill be internationalized as well allright so let's go out to the source code
of the site which links back to the demothat I've already shown and we're usinga package called Rosetta for stringtransformation and this is just a tiny
general purpose internationalizationLibrary we have a for free locala Wearesearch which I think is just anincredible feature that you get for free
with page find so we have page find ifyou noticed in the demonstration at thevery bottom you can search for a lyricbut I didn't have to do anything to make
sure that the search is segmented acrosslanguage so I can search for Farm armhere and we'll get sort of the indexpage which has the title here and we'll
also get the song page but if I searchfor a Spanish lyric here and I searchfor that you'll notice that it it onlyshows Spanish Pages for the Spanish
contextual search which I think is agreat feature I didn't have to do anyextra configuration it workedautomatically off of the document Lang
attribute that was set on the HTMLelement for the page now one other thinghere is we're usingalbum art from Spotify um we're actually
pulling in open graph images fromspotify's song pages so that we can showsome nice album art here and this isbuilt with 11d 3.0 uh which just
released in our Alpha versions this lastweek you can go to the 11d blog and readmore about it I'll link it up in theshow notes as well and maybe one more
nice thing that you might have noticedis that on the demo we have a nicelittle seasonallyappropriate snow web component here this
is called snowfalland I'll link that up in the show notesas well you can add that to your site sowhat's the source code look like it's a
pretty standard 11d site you can seesome of the the front-end dependenciesare linked up here you can see thebackend dependencies we're using 113.0
the 11d image plugin to sort of fetchthose open graph images from Spotifywe're using page find for search andRosetta as I mentioned to
internationalize our strings and then inour configuration file this entiresection is just an El image piece andthen sort of the magic gets into we
declare our languages here these are allthe languages that we want to use on oursite we set those languages as an arrayin our global data so we can use those
in various places throughout our site'scode and then we also add the 11dinternationalization plugin here nowthis 11d Dobe config event is a pretty
little known event and this is to sortof work around synchronous versusasynchronous limitationin the in your 11d config file so this
is only an 11d 3.0 feature and this isto add asynchronous configuration codeinside of a synchronous configurationcallback now again we're setting the
default language to English here an 11sinternationalization plugin and thisfilter here is an i18n filter um so thisis a way to translate string content
into the final output that goes into thesite and you can see this is the shortcode that will fetch the album art forus as well it's using 11 open graph API
uh to fetch again the URL from Spotifyand that's pretty much it for theconfiguration file next we can sort oflook at the index page which uses LDS
pagination feature to iterate over thelanguages that we set in our global dataso that's English and Spanish and sowe're generating two different versions
of our homepage one for English and onefor Spanish so now let's look at thisinternationalization filter so you cansee using Rosetta you feed it a key that
then is a lookup for Rosetta's stringlibrary that it knows about and I'vewired this up to two sort of Json filesin global data um you can see one is for
English one is for Spanish and we havejust a bunch of internationalizedstrings here and so Rosetta will lookthose up but this is the key that we're
feeding in in the template so when yousee songs here referenced in our headingthat just calls out to the key in ourdata file songs so pretty
straightforward we're iterating hereover our song pages that I'll go overnext all right so the next thing I wantto go over is the cloud Canon data files
that we're using and those are markdownfiles that are in our songs folder soyou can see we kind of have twodifferent songs here and then an 11d
data that then adds a tag to everysingle song in this directory so let'slook at what one of those song datafiles looks like and we have our English
version which you can see the title andthe lyrics here if you scroll downyou'll see the Spanish version heretitle and lyrics and then we have our
URLs here at the bottom that's the samefor the other song as well EnglishSpanish and URLs at the bottom all rightso we have our markdown files those are
populated into a collection using thistags property here so we can now iterateover our songs in our songs. liquidtemplate and you can see that in the
pagination here as well importantly inthe before callback here this is acallback that 110 uses to allow folks tomodify the pagination data set before
it's fed into 11 to generate pages and Iwon't go over this code too much butwe're using it here to iterate over thesongs for each individual song we want
to Output an English version of the pageand a Spanish version of the page we'reiterating over the songs we're iteratingover the languages we're creating one
page for each song and languagecombination and one last piece I want togo over here is we have our 11d layoutfile this is an 11d internationalization
plug-in feature that gives you a list oflinks for the current page in all of theother languages so we're just iteratingover that and showing those let me show
you what that looks like in the demothat's this piece right here so it'salso available in English can clickthrough there also available in Spanish
and if we added more languages to oursite then those links would also berepresented here we could add SpanishGerman whatever you want to add all
right so that's how you set up aninternationalization site using 7 withCloud Cannon while allowing your editingteam to come in and edit the
internationalized strings as well rightin the cloud Canon app hope you enjoyedit if you have any more questions youcan post them in the comments below or
just send us a message on social mediathanks and keep building for theweb
5 Comments
Jens Oliver Meiert
@zachleat, I didn’t know Eleventy is a Swiftie
Matt Stein
@zachleat It’s nice to see a common use case get the attention it deserves.
Philip
@zachleat @cloudcannon @eleventy The title, I see what you did there.
Curtis Wilcox
@zachleat @mikeneu Neat! I think it could benefit from a toggle to make it a static transcript, without the interactivity, so people can read it without the timecodes or button semantics while using a screen reader or any text-to-speech tech. The toggle control could do somethi… Truncated
Curtis Wilcox
@zachleat @mikeneu Also, the spans have `role="button"` but shouldn't. `<span data-offset="0" role="button"><button type="button">00:00</button>All right, what's up everybody?</span>`