Demystifying i18n with Hugo

Slide 1

Slide 1 text

Hugo Conf 22 Demystifying I18n with Hugo Jonyablonski.com • @jonyablonski

Slide 2

Slide 2 text

Hugo Conf 22 Designer. Developer. Creator of Laws of UX. That’s me

Slide 3

Slide 3 text

Hugo Conf 22 Lawsofux.com

Slide 4

Slide 4 text

Hugo Conf 22 +

Slide 5

Slide 5 text

Hugo Conf 22 How do I get started with internationalizing my website?

Slide 6

Slide 6 text

Hugo Conf 22 Photo by mishal ibrahim

Slide 7

Slide 7 text

Hugo Conf 22 ( Basic2 Conten Redirect2 ' Fine-Tuning WHAT WE‘LL COVER

Slide 8

Slide 8 text

Hugo Conf 22 Basics

Slide 9

Slide 9 text

Hugo Conf 22 Let’s start with configuration

Slide 10

Slide 10 text

Hugo Conf 22 config.toml

Slide 11

Slide 11 text

Hugo Conf 22 Next, let’s add the right HTML tags

Slide 12

Slide 12 text

Hugo Conf 22 Baseof.html

Slide 13

Slide 13 text

Hugo Conf 22 That’s the basics!

Slide 14

Slide 14 text

Hugo Conf 22 Content

Slide 15

Slide 15 text

Hugo Conf 22 Now let’s get organized

Slide 16

Slide 16 text

Hugo Conf 22 content directory with language-specific files

Slide 17

Slide 17 text

Hugo Conf 22 content directory output

Slide 18

Slide 18 text

Hugo Conf 22 Now let’s add that translated content

Slide 19

Slide 19 text

Hugo Conf 22 General translated content

Slide 20

Slide 20 text

Hugo Conf 22 What about text that’s global (e.g. nav links)?

Slide 21

Slide 21 text

Hugo Conf 22 i18n translation configuration files

Slide 22

Slide 22 text

Hugo Conf 22 i18n string reference

Slide 23

Slide 23 text

Hugo Conf 22 Let’s move on to redirects

Slide 24

Slide 24 text

Hugo Conf 22 Redirects

Slide 25

Slide 25 text

Hugo Conf 22 Let’s direct folks to the right place

Slide 26

Slide 26 text

Hugo Conf 22 netlify.toml

Slide 27

Slide 27 text

Hugo Conf 22 netlify.toml

Slide 28

Slide 28 text

Hugo Conf 22 netlify.toml

Slide 29

Slide 29 text

Hugo Conf 22 We’re almost done!

Slide 30

Slide 30 text

Hugo Conf 22 Fine-Tuning

Slide 31

Slide 31 text

Hugo Conf 22 ️ How do I make CSS adjustments between languages?

Slide 32

Slide 32 text

Hugo Conf 22 Logical Properties

Slide 33

Slide 33 text

Hugo Conf 22 English banners

Slide 34

Slide 34 text

Hugo Conf 22 Arabic banners

Slide 35

Slide 35 text

Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items: center; } .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width: 24rem; margin-left: calc(var(--base-spacing) * 2); } :dir(rtl) .banner__graphic { margin-left: 0; margin-right: calc(var(--base-spacing) * 2); }

Slide 36

Slide 36 text

Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items: center; }

Slide 37

Slide 37 text

Hugo Conf 22 .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width: 24rem; margin-left: calc(var(--base-spacing) * 2); }

Slide 38

Slide 38 text

Hugo Conf 22 :dir(rtl) .banner__graphic { margin-left: 0; margin-right: calc(var(--base-spacing) * 2); }

Slide 39

Slide 39 text

Hugo Conf 22 .banner__container { height: 100%; display: flex; align-items: center; } .banner__graphic { padding: calc(var(--base-spacing) * 2); max-width: 24rem; margin-inline: calc(var(--base-spacing) * 2); } Directionally-aware left/right margin

Slide 40

Slide 40 text

Hugo Conf 22 Less code. Easier maintenance. Better performance.

Slide 41

Slide 41 text

Hugo Conf 22 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

Slide 42

Slide 42 text

Hugo Conf 22 Logical property support on Caniuse.com

Slide 43

Slide 43 text

Hugo Conf 22 Logical property support on Caniuse.com 92.71% Global Support (unprefixed)

Slide 44

Slide 44 text

Hugo Conf 22 How do I get CSS Logical Properties prefixed?

Slide 45

Slide 45 text

Hugo Conf 22 + PostCSS Autoprefixer

Slide 46

Slide 46 text

Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists": ["last 3 versions"] package.json

Slide 47

Slide 47 text

Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists": ["last 3 versions"] package.json

Slide 48

Slide 48 text

Hugo Conf 22 $ npm i postcss-cli && autoprefixer "browserlists": ["last 3 versions"] package.json Determines which prefixes get applied

Slide 49

Slide 49 text

Hugo Conf 22 module.exports = { plugins: [ require('autoprefixer')() ] }; postcss.config.js

Slide 50

Slide 50 text

Hugo Conf 22 {{ $styles := resources.Get "css/app.css" | toCSS | postCSS (dict "config" "postcss.config.js") | minify }} postcss.config.js

Slide 51

Slide 51 text

Hugo Conf 22 {{ $styles := resources.Get "css/app.css" | toCSS | postCSS (dict "config" "postcss.config.js") | minify }} layouts/partials/styles.html

Slide 52

Slide 52 text

Hugo Conf 22 -webkit-margin-inline: calc(var(--base-spacing) * 2); -moz-margin-inline: calc(var(--base-spacing) * 2); -ms-margin-inline: calc(var(--base-spacing) * 2); -o-margin-inline: calc(var(--base-spacing) * 2); margin-inline: calc(var(--base-spacing) * 2); Prefixed logical properties

Slide 53

Slide 53 text

Hugo Conf 22 Pick fonts that are specific to the language * Pro tip

Slide 54

Slide 54 text

Hugo Conf 22 IBM Plex Arabic

Slide 55

Slide 55 text

Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; } :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }

Slide 56

Slide 56 text

Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; } Default (english)

Slide 57

Slide 57 text

Hugo Conf 22 :root:lang(en) { --base-font-family: 'IBM Plex Sans', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }

Slide 58

Slide 58 text

Hugo Conf 22 :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; } Arabic

Slide 59

Slide 59 text

Hugo Conf 22 :root:lang(ar) { --base-font-family: 'IBM Plex Sans Arabic', Sans-Serif; --secondary-font-family: 'IBM Plex Mono', monospace; }