Demystifying i18n with Hugo

Transcript

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

   View Slide

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

   View Slide

3. Hugo Conf 22
   Lawsofux.com
   

   View Slide

4. Hugo Conf 22
   +
   

   View Slide

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

   View Slide

6. Hugo Conf 22
   Photo by mishal ibrahim
   

   View Slide

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

   View Slide

8. Hugo Conf 22
   Basics
   

   View Slide

9. Hugo Conf 22
   Let’s start with
   configuration
   

   View Slide

10. Hugo Conf 22
    config.toml
    

    View Slide

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

    View Slide

12. Hugo Conf 22
    Baseof.html
    

    View Slide

13. Hugo Conf 22
    That’s the basics!
    

    View Slide

14. Hugo Conf 22
    Content
    

    View Slide

15. Hugo Conf 22
    Now let’s get organized
    

    View Slide

16. Hugo Conf 22
    content directory with language-specific files
    

    View Slide

17. Hugo Conf 22
    content directory output
    

    View Slide

18. Hugo Conf 22
    Now let’s add that
    translated content
    

    View Slide

19. Hugo Conf 22
    General translated content
    

    View Slide

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

    View Slide

21. Hugo Conf 22
    i18n translation configuration files
    

    View Slide

22. Hugo Conf 22
    i18n string reference
    

    View Slide

23. Hugo Conf 22
    Let’s move on to
    redirects
    

    View Slide

24. Hugo Conf 22
    Redirects
    

    View Slide

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

    View Slide

26. Hugo Conf 22
    netlify.toml
    

    View Slide

27. Hugo Conf 22
    netlify.toml
    

    View Slide

28. Hugo Conf 22
    netlify.toml
    

    View Slide

29. Hugo Conf 22
    We’re almost done!
    

    View Slide

30. Hugo Conf 22
    Fine-Tuning
    

    View Slide

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

    View Slide

32. Hugo Conf 22
    Logical Properties
    

    View Slide

33. Hugo Conf 22
    English banners
    

    View Slide

34. Hugo Conf 22
    Arabic banners
    

    View Slide

35. 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);
    
    }
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. 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
    

    View Slide

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

    View Slide

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

    View Slide

42. Hugo Conf 22
    Logical property support on Caniuse.com
    

    View Slide

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

    View Slide

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

    View Slide

45. Hugo Conf 22
    +
    PostCSS Autoprefixer
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. 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
    

    View Slide

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

    View Slide

54. Hugo Conf 22
    IBM Plex Arabic
    

    View Slide

55. 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;
    
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. Hugo Conf 22
    What about giving
    users the ability to
    manually switch
    languages?
    

    View Slide

61. Hugo Conf 22
    Laws of Ux Language switcher
    

    View Slide

62. Hugo Conf 22
    
    
    {{ range .AllTranslations }}
    
    
    
    
    
    {{ .Language.LanguageName }}
    
    
    
    
    
    {{ end }}
    
    
    

    View Slide

63. Hugo Conf 22
    
    
    {{ range .AllTranslations }}
    
    
    
    
    
    {{ .Language.LanguageName }}
    
    
    
    
    
    {{ end }}
    
    
    

    View Slide

64. Hugo Conf 22
    
    
    {{ range .AllTranslations }}
    
    
    
    
    
    {{ .Language.LanguageName }}
    
    
    
    
    
    {{ end }}
    
    
    

    View Slide

65. Hugo Conf 22
    
    
    {{ range .AllTranslations }}
    
    
    
    
    
    {{ .Language.LanguageName }}
    
    
    
    
    
    {{ end }}
    
    
    

    View Slide

66. Hugo Conf 22
    Arabic Edition of Lawsofux.com
    

    View Slide

67. Hugo Conf 22
    Thank you
    

    View Slide