Custom css and localization support (#28)

* Adds i18n support for theme

* Adds a way for sites to have custom css.

This change adds a param to the theme (called customCss), which allows sites to
provide extra css under static/, so that they don't need to copy the theme's css
whole file.

If no custom css is in the params, this change is NOP.

README.md

@@ -17,6 +17,8 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Shortcodes](#shortcodes)
 - [Syntax highlighting](#syntax-highlighting)
 - [Disable toc for a blog post](#disable-toc-for-a-blog-post)
+- [Localization](#localization)
+- [Custom css](#custom-css)
 - [Getting help](#getting-help)
 - [Credits](#credits)
 
@@ -84,6 +86,18 @@ toc: false
 ---
 ```
 
+## Localization
+
+The strings in the templates of this theme can be localized. Make a copy of <THEME_BASE_FOLDER>/i18n/en.yaml to <YOUR_SITE_FOLDER>/i18n/<YOUR_SITE_LANGUAGE>.yaml, and translate one by one, changing the 'translation' field.
+
+[Here is a tutorial that goes more in depth about this.](https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
+
+## Custom css
+
+Instead of coppying the theme's css file to your own installation and modifiying this large file, you can provide a list of css files that will be loaded after the theme's one. This ennables you to override individual style while getting theme updates when they come.
+
+Please see the params section of the example site config.yaml for more details.
+
 ## Getting help
 
 If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/cupper-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132).

exampleSite/config.yaml

@@ -24,6 +24,14 @@ params:
   dateFormat: Jan 2, 2006
   codePenUser: someUser
   katex: true
+  # A list of custom css files can be provided, which must be placed inside
+  # 'static/'.
+  # This is useful to override just specific css classes, instead of copying
+  # the entire theme's css file to your own site.
+  # Usage:
+  # customCss:
+  #   - css/foo.css # relative path starting from static/
+  #- css/bar.css
 
 menu:
   nav:

i18n/en.yaml

@@ -0,0 +1,25 @@
+- id: skip_to_content
+  translation: skip to content
+- id: nav_main_navigation
+  translation: Main navigation
+- id: nav_button_menu
+  translation: Menu
+- id: discuss_show_comments_button
+  translation: Show comments
+- id: discuss_comments_disabled
+  translation: Disqus comments are disabled.
+- id: discuss_js_disabled
+  translation: Enable JavaScript to view Disqus comments.
+- id: dark_theme
+  translation: "dark theme:"
+- id: table_of_contents
+  translation: Table of contents
+- id: publish_date
+  translation: "Publish date:"
+- id: last_updated
+  translation: "Last updated:"
+- id: tags
+  translation: "Tags:"
+- id: aria_label_tags
+  translation: tags
+

layouts/partials/disqus.html

@@ -1,11 +1,11 @@
 <div id="disqus-container">
   {{ with .Site.DisqusShortname }}
-    <button id="disqus-button" onclick="showComments()">Show comments</button>
+    <button id="disqus-button" onclick="showComments()">{{ T "discuss_show_comments_button" }}</button>
     <div id="disqus-comments">
       {{ $isDummyName := eq . "yourdiscussshortname" }}
       {{ $isServer := $.Site.IsServer }}
       {{ if or $isDummyName $isServer }}
-        <p><em>Disqus comments are disabled.</em></p>
+        <p><em>{{ T "discuss_comments_disabled" }}</em></p>
         <script type="application/javascript">
           function showComments() {
             {{ partial "disqus-js-common.js" . | safeJS }}
@@ -21,7 +21,7 @@
           }
         </script>
       {{ end }}
-      <noscript>Enable JavaScript to view Disqus comments.</noscript>
+      <noscript>{{ T "discuss_js_disabled" }}</noscript>
     </div>
   {{ end }}
 </div>

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <footer role="contentinfo">
   <div>
     <label for="themer">
-      dark theme: <input type="checkbox" id="themer" class="vh">
+      {{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh">
       <span aria-hidden="true"></span>
     </label>
   </div>

layouts/partials/head.html

@@ -26,6 +26,10 @@
   {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }}
   <link rel="stylesheet" type="text/css" href="{{ $styles.Permalink }}">
 
+  {{ range .Site.Params.customCss -}}
+    <link rel="stylesheet" href="{{ . | absURL }}">
+  {{- end }}
+
   <style id="inverter" media="none">
     .intro-and-nav, .main-and-footer { filter: invert(100%) }
     * { background-color: inherit }

layouts/partials/nav.html

@@ -1,10 +1,10 @@
 <nav id="patterns-nav" class="patterns" role="navigation">
-  <h2 class="vh">Main navigation</h2>
+  <h2 class="vh">{{ T "nav_main_navigation" }}</h2>
   <button id="menu-button" aria-expanded="false">
     <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
       <use xlink:href="#menu"></use>
     </svg>
-    Menu
+    {{ T "nav_button_menu" }}
   </button>
   {{ $current := . }}
   <ul id="patterns-list">

layouts/partials/toc.html

@@ -1,7 +1,7 @@
 {{ $headings := findRE "<h2.*?>(.|\n])+?</h2>" .Content }}
 {{ if ge (len $headings) 2 }}
   <nav class="toc" aria-labelledby="toc-heading">
-    <h2 id="toc-heading">Table of contents</h2>
+    <h2 id="toc-heading">{{ T "table_of_contents" }}</h2>
     <ol>
       {{ range $headings }}
         <li>

layouts/post/single.html

@@ -10,19 +10,19 @@
     <div class="date">
       {{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }}
       {{ $publishDate := .PublishDate }}
-      <strong aria-hidden="true">Publish date: </strong>{{ $publishDate.Format $dateFormat }}
+      <strong aria-hidden="true">{{ T "publish_date" }} </strong>{{ $publishDate.Format $dateFormat }}
       {{ with .Lastmod }}
         {{ if gt . $publishDate }}
           <br>
-          <strong aria-hidden="true">Last updated: </strong>{{ .Format $dateFormat }}
+          <strong aria-hidden="true">{{ T "last_updated" }} </strong>{{ .Format $dateFormat }}
         {{ end }}
       {{ end }}
     </div>
 
     {{ with .Params.tags }}
       <div class="tags">
-        <strong aria-hidden="true">Tags: </strong>
+        <strong aria-hidden="true">{{ T "tags" }} </strong>
-        <ul aria-label="tags">
+        <ul aria-label="{{ T "aria_label_tags" }}">
           {{ range . }}
             <li>
               <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">