Add support for Google Analytics GA4

README.md

@@ -1,5 +1,7 @@
 # Tale
 
+[![Build Status](https://travis-ci.com/EmielH/tale-hugo.svg?branch=master)](https://travis-ci.com/EmielH/tale-hugo)
+
 This is a port of the [Tale theme for Jekyll](https://github.com/chesterhow/tale) to Hugo. Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here](https://chesterhow.github.io/tale/). I did not design this theme; I only ported it from Jekyll to Hugo.
 
 ![Tale screenshot](https://raw.githubusercontent.com/EmielH/tale-hugo/master/images/screenshot.png)
@@ -36,7 +38,7 @@ hugo server -t tale
 
 ### Additional information
 
-For more information, read the official [setup guide]( https://gohugo.io/overview/installing/) of Hugo.
+For more information, read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
 
 ### Update the theme
 
@@ -48,13 +50,138 @@ git submodule update --remote --rebase
 
 If you have cloned the theme, you can run `git pull` inside the theme folder.
 
+## Configuration
+
+### Menu
+
+The top menu uses [Hugo Menus](https://gohugo.io/content-management/menus/), with the name of the menu being `main`. To turn on the menu, follow the steps there - you can either add something like this to the front-matter of your pages:
+
+```
+---
+menu: "main"
+---
+```
+
+... or you can add a menu section to your `config` file:
+
+```
+sectionPagesMenu = "main"
+```
+
+Or if you want more control, add a specific entry for each item in your menu:
+
+```
+[menu]
+  [[menu.main]]
+    identifier = "about"
+    name = "About"
+    title = "About"
+    url = "/about/"
+    weight = 0
+  [[menu.main]]
+    identifier = "posts"
+    name = "Posts"
+    title = "Posts"
+    url = "/posts/"
+    weight = 0
+```
+
+For menu internationalization/translation, see [Multilingual Mode: Menus](https://gohugo.io/content-management/multilingual/#menus).
+
+### Internationalisation (i18n)
+
+Tale supports using other languages than English. Language files for the texts Tale uses are provided in the `i18n` directory. The default language is English. To switch languages, add the key `defaultContentLanguage` to your `config.toml` file. For example:
+
+```
+defaultContentLanguage = "nl"
+```
+
+To translate texts your site uses, add an `i18n` folder to your site.
+
+Feel free to submit pull requests for other translations of Tale's texts.
+
+[Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/)
+
+### Disqus
+
+Tale supports Disqus integration, a comment system that empowers dynamic features to static websites. To install it, just add it to your config as described in [the Hugo Documentation](https://gohugo.io/content-management/comments/#configure-disqus).
+
+```toml
+disqusShortname = "disqus-example"
+```
+
+Add the parameter `comments` in the front-matter of the pages where you want to allow comments
+
+```
+---
+comments: true
+---
+```
+
+### Google Analytics
+
+Tale supports Google Analytics (UA and GA4) integration using Hugo's provided `google_analytics` template.
+
+To enable it, add the `googleAnalytics` tag to your `config.toml`. It will be added on all pages.
+
+```toml
+googleAnalytics = "UA-133700000-0" # or G-1337000000 for GA4
+```
+
+### Custom summaries
+
+Tale allows for writing the summary of your posts manually by setting the `summary` variable in the page frontmatter. If this variable is not set, the summary that Hugo automatically generates will be used.
+
+### Taxonomies
+
+Tale has basic support for taxonomies. Taxonomy and terms pages will be generated when you have defined taxonomies, but you need to include links to these pages yourself. For example, you can add a link to a taxonomy page in `header-menu.html`.
+
+### Placeholder partials
+
+The theme contains placeholder partials to make the theme more flexible and easier to adapt to your site without having to change the theme itself. These are:
+
+- `single/header.html`
+- `single/footer.html`
+
+These are included in the template for a single post, at the top of the post (below the title) and at the bottom of the post, respectively. These can be used, for example, to include additional information about the post author or for related posts. Create a file `/layouts/partials/single/header.html` or `footer.html` on your own site to have it included.
+
+- `index/introduction.html`
+
+This partial is included at the top of the list of posts on the index page, allowing you to add an introduction to your site.
+
+### Copyright message
+
+The copyright message in the footer uses the name of the author of the site, as defined in `config.toml`. For example:
+
+```
+[Author]
+    name = "Emiel"
+```
+
+### Additional CSS files
+
+The theme can load additional CSS files for you, e.g. to override some of the styles, or the CSS that goes with a component that you're using. To add additional CSS files, put these files in the `static` folder of your site and add the `css` parameter to `config.toml`, like so:
+
+```
+[Params]
+css = ["custom.css"]
+```
+
+To load multiple CSS files, use the parameter like this:
+
+```
+[Params]
+css = ["custom.css", "custom2.css"]
+```
+
 ## Acknowledgments
 
-Thanks 
+Thanks
 
 - to [Chester How](//github.com/chesterhow) for creating the original [Tale theme for Jekyll](https://chesterhow.github.io/tale/),
 - to [onedrawingperday](//github.com/onedrawingperday), [bep](//github.com/bep) and [digitalcraftsman](//github.com/digitalcraftsman) for their help in getting the theme working correctly with Hugo,
 - to [lucperkins](https://github.com/lucperkins) for the [Fresh theme](https://github.com/lucperkins/hugo-fresh) from which I used some useful snippets of code.
 
 ## License
-See [LICENSE](https://github.com/EmielH/tale-hugo/blob/master/LICENSE).
+
+See [LICENSE](https://github.com/EmielH/tale-hugo/blob/master/LICENSE).

assets/scss/tale.scss

@@ -4,5 +4,7 @@
 @import 'tale/post';
 @import 'tale/syntax';
 @import 'tale/layout';
+@import 'tale/toc';
 @import 'tale/pagination';
 @import 'tale/catalogue';
+@import 'tale/disqus';

assets/scss/tale/_base.scss

@@ -5,7 +5,8 @@
 
 html,
 body {
-  color: $default-color;
+  color: var(--default-color);
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
@@ -30,19 +31,19 @@ h3,
 h4,
 h5,
 h6 {
-  color: $default-shade;
+  color: var(--default-shade);
   font-family: $sans-serif;
   line-height: normal;
 }
 
 a {
-  color: $blue;
+  color: var(--blue);
   text-decoration: none;
 }
 
 blockquote {
-  border-left: .25rem solid $grey-2;
-  color: $grey-1;
+  border-left: .25rem solid var(--grey-2);
+  color: var(--grey-1);
   margin: .8rem 0;
   padding: .5rem 1rem;
 

assets/scss/tale/_catalogue.scss

@@ -1,8 +1,8 @@
 .catalogue {
   &-item {
-    border-bottom: 1px solid $grey-2;
-    color: $default-color;
-    display: inline-block;
+    border-bottom: 1px solid var(--grey-2);
+    color: var(--default-color);
+    display: block;
     padding: 2rem 0;
 
     &:hover .catalogue-line,
@@ -16,13 +16,13 @@
   }
 
   &-time {
-    color: $default-tint;
+    color: var(--default-tint);
     font-family: $serif-secondary;
     letter-spacing: .5px;
   }
 
   &-title {
-    color: $default-shade;
+    color: var(--default-shade);
     display: block;
     font-family: $sans-serif;
     font-size: 2rem;
@@ -31,8 +31,8 @@
   }
 
   &-line {
-    @include transition(all .3s ease-out);
-    border-top: .2rem solid $default-shade;
+    @include transition($color-transition, width .3s ease-out);
+    border-top: .2rem solid var(--default-shade);
     display: block;
     width: 2rem;
   }

assets/scss/tale/_code.scss

@@ -4,11 +4,12 @@ code {
 }
 
 code {
-  background-color: $grey-3;
+  background-color: var(--grey-4);
   border-radius: 3px;
-  color: $code-color;
+  color: var(--code-color);
   font-size: 85%;
   padding: .25em .5em;
+  white-space: pre-wrap;
 }
 
 pre {
@@ -22,8 +23,14 @@ pre code {
   padding: 0;
 }
 
+pre code > span {
+    // This isn't very pretty, but the precise RGB values are generated
+    // server-side, the usual trick of putting the colors in CSS variables does
+    // not quite work and this is the best I could come up with.
+    filter: var(--code-filter);
+}
 .highlight {
-  background-color: $grey-3;
+  background-color: var(--grey-4);
   border-radius: 3px;
   line-height: 1.4;
   margin: 0 0 1rem;
@@ -35,7 +42,7 @@ pre code {
   }
 
   .lineno {
-    color: $default-tint;
+    color: var(--default-tint);
     display: inline-block; // Ensures the null space also isn't selectable
     padding: 0 .75rem 0 .25rem;
     // Make sure numbers aren't selectable

assets/scss/tale/_disqus.scss

@@ -0,0 +1,3 @@
+.article-discussion {
+    margin: 0;
+}

assets/scss/tale/_layout.scss

@@ -1,10 +1,18 @@
+* {
+    @include transition($color-transition);
+}
+
 .container {
   margin: 0 auto;
   max-width: 800px;
   width: 80%;
 }
 
-main,
+// Carve out an exception from the 80% narrowing of the viewport for the table
+// of contents. This is ugly, but there isn't a better way, since the table of
+// contents must be a child of the "main" element so that it its scrolling
+// behavior is intuitive.
+main > *,
 footer,
 .nav-container {
   display: block;
@@ -13,8 +21,19 @@ footer,
   width: 80%;
 }
 
+#darkModeToggle {
+    float: right;
+    position: sticky;
+    top: 2rem;
+    margin-right: 2rem;
+    margin-top: 2rem;
+    font-size: 2rem;
+
+    cursor: pointer;
+}
+
 .nav {
-  box-shadow: 0 2px 2px -2px $shadow-color;
+  box-shadow: 0 2px 2px -2px var(--shadow-color);
   overflow: auto;
 
   &-container {
@@ -24,8 +43,8 @@ footer,
   }
 
   &-title {
-    @include transition(all .2s ease-out);
-    color: $default-color;
+    @include transition($color-transition, opacity .2s ease-out);
+    color: var(--default-color);
     display: inline-block;
     margin: 0;
     padding-right: .2rem;
@@ -44,8 +63,8 @@ footer,
   }
 
   li {
-    @include transition(all .2s ease-out);
-    color: $default-color;
+    @include transition($color-transition, opacity .2s ease-out);
+    color: var(--default-color);
     display: inline-block;
     opacity: .6;
     padding: 0 2rem 0 0;
@@ -61,7 +80,7 @@ footer,
   }
 
   a {
-    color: $default-color;
+    color: var(--default-color);
     font-family: $sans-serif;
   }
 }
@@ -86,7 +105,7 @@ footer {
   text-align: center;
 
   span {
-    color: $default-color;
+    color: var(--default-color);
     font-size: .8rem;
   }
 }

assets/scss/tale/_pagination.scss

@@ -1,18 +1,18 @@
 .pagination {
-  border-top: .5px solid $grey-2;
+  border-top: .5px solid var(--grey-2);
   font-family: $serif-secondary;
   padding-top: 2rem;
   position: relative;
   text-align: center;
 
   span {
-    color: $default-shade;
+    color: var(--default-shade);
     font-size: 1.1rem;
   }
 
   .top {
-    @include transition(all .3s ease-out);
-    color: $default-color;
+    @include transition($color-transition, opacity .3s ease-out);
+    color: var(--default-color);
     font-family: $sans-serif;
     font-size: 1.1rem;
     opacity: .6;
@@ -23,8 +23,8 @@
   }
 
   .arrow {
-    @include transition(all .3s ease-out);
-    color: $default-color;
+    @include transition($color-transition, opacity .3s ease-out);
+    color: var(--default-color);
     position: absolute;
 
     &:hover,