add support for utteranc.es comments

README.md

@@ -7,10 +7,14 @@ A simple monospaced resume theme for Hugo. It was ported from Jekyll theme
 ![thumbnail](https://github.com/ojroques/hugo-researcher/blob/master/images/tn.png)
 
 ## Installation
+This theme uses Sass to generate CSS files so make sure you have the
+*extended* Hugo version installed.
+
 Add the theme to your site's `themes` directory:
 ```bash
-mkdir themes  # if the themes folder does not exist yet
-git clone https://github.com/ojroques/hugo-researcher themes/researcher
+git submodule add https://github.com/ojroques/hugo-researcher.git themes/researcher
+# if your website is not managed by git:
+# git clone https://github.com/ojroques/hugo-researcher.git themes/researcher
 ```
 
 Update the theme option in `config.toml`:
@@ -23,5 +27,9 @@ A self-explanatory configuration file is present in
 [exampleSite/config.toml](https://github.com/ojroques/hugo-researcher/blob/master/exampleSite/config.toml),
 along the files of a demo website.
 
+You can enable [KaTeX](https://katex.org/) (math typesetting) by including
+`math: true` in your content files. Or you can enable it globally by setting
+`math` to `true` in your project config.
+
 ## License
 [GPL-3.0 License](https://github.com/ojroques/hugo-researcher/blob/master/LICENSE)

assets/sass/researcher.scss

@@ -1,10 +1,52 @@
-@import "variables";
-@import "typography";
+// Sizes
+$max-width: {{ .Param "style.pageWidth" | default "750px;" }};
+$avatar-size: {{ .Param "style.avatarSize" | default "90px;" }};
 
+// Colors
+$black: {{ .Param "style.colorBlack" | default "#222222" }};
+$red: {{ .Param "style.colorRed" | default "#dc3545" }};
+
+// Font
+$font-family: {{ .Param "style.fontFamily" | default "Inconsolata" }};
+
+// Margins
+$y-small: 0.6rem;
+$y-medium: 1.0rem;
+
+// Placeholders
+%link-default {
+    color: $red;
+    text-decoration: none;
+    & * {
+        color: $red;
+    }
+    &:hover {
+        color: $red;
+        text-decoration: underline;
+    }
+}
+%link-dark {
+    color: $black;
+    text-decoration: none;
+    & * {
+        color: $black;
+    }
+    &:hover {
+        color: $black;
+        text-decoration: underline;
+    }
+}
+%table-cell {
+    border: 1px solid #cccccc;
+    padding: 6px 12px;
+    text-align: left;
+}
+
+// Style
 * {
-    color: $dark;
-    font-family: "Inconsolata";
-    line-height: normal;
+    color: $black;
+    font-family: $font-family;
+    line-height: 1.2;
 }
 .container {
     max-width: $max-width;
@@ -16,7 +58,102 @@
 .nav-link {
     @extend %link-default;
 }
-footer {
+#content {
+    a {
+        @extend %link-default;
+    }
+    p {
+        margin-bottom: $y-small;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        font-size: medium;
+        font-weight: bold;
+        margin: $y-medium 0 $y-small 0;
+    }
+    @for $i from 1 through 4 {
+        h#{$i} {
+            font-size: 1.2rem + 0.2 * (4 - $i);
+        }
+    }
+    img {
+        display: block;
+        margin: $y-medium auto;
+        max-width: 100%;
+    }
+    .avatar > img {
+        border-radius: 50%;
+        float: right;
+        margin: -8px 0 0 16px;
+        height: $avatar-size;
+        width: $avatar-size;
+    }
+    ol {
+        counter-reset: list;
+        list-style: none;
+        padding-left: 2rem;
+        & > li {
+            display: table-row;
+        }
+        & > li:before {
+            content: "[" counter(list, decimal) "] ";
+            counter-increment: list;
+            display: table-cell;
+            text-align: right;
+            padding-right: .5em;
+        }
+    }
+    .container > ol, .footnotes > ol {
+        padding-left: 0;
+    }
+    ul {
+        list-style: inside;
+        padding-left: 2rem;
+        & > li {
+            list-style-position: outside;
+            margin-left: 1em;
+        }
+    }
+    .container > ul, .footnotes > ul {
+        padding-left: 0;
+    }
+    table {
+        margin: $y-medium auto;
+        width: 100%;
+        & th {
+            @extend %table-cell;
+            font-weight: bold;
+        }
+        & td {
+            @extend %table-cell;
+        }
+        & tr:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+    blockquote {
+        border-left: 4px solid;
+        font-style: italic;
+        margin: $y-medium 0;
+        padding: 8px 8px;
+    }
+    code {
+        color: $black;
+        background-color: #f8f8f8;
+        border: 1px solid #cccccc;
+        border-radius: 10%;
+        padding: 0px 4px;
+    }
+    pre code {
+        all: unset;
+    }
+    .highlight {
+        margin: $y-medium auto;
+        & > pre {
+            padding: 8px 8px;
+        }
+    }
+}
+#footer {
     a {
         @extend %link-dark;
     }

exampleSite/config.toml

@@ -1,16 +1,37 @@
 title = "Researcher"
 baseURL = "https://example.com"
 theme = "researcher"
-disableKinds = ["taxonomy", "term", "RSS", "sitemap", "robotsTXT"]
+disableKinds = ["taxonomy", "term"]
 enableEmoji = true
+math = false          # enable KaTeX (https://katex.org/) globally
+googleAnalytics = ""  # add your tracking id
 
 [params]
   author = "Olivier Roques"
   description = "A simple monospaced resume theme for Hugo."
-  favicon = "favicon.ico"
+  favicon = "favicon.ico"  # path to a .ico to use as favicon
+  logo = ""  # url or path to a logo to put in the header
+  [params.utterances]
+    repo = "ojroques/comments-hugo-researcher"
+    issueTerm = "pathname"
+    theme = "github-light" # preferred-color-scheme, github-light, github-dark
   [params.footer]
     text = "By Olivier Roques"
     url = "https://github.com/ojroques/hugo-researcher"
+  [params.style]  # appearance options (can be omitted)
+    fontFamily = "Inconsolata"
+    pageWidth = "750px"
+    avatarSize = "90px"
+    colorBlack = "#222222"
+    colorRed = "#dc3545"
+  [[params.socialIcons]]
+    icon = "fab fa-twitter"
+    title = "Twitter"
+    url = "https://twitter.com/"
+  [[params.socialIcons]]
+    icon = "fas fa-envelope"
+    title = "E-mail"
+    url = "mailto:[email protected]"
 
 [permalinks]
   "/" = "/:filename"
@@ -23,6 +44,9 @@ enableEmoji = true
   [[menu.main]]
     name = "Resume"
     url = "/resume.pdf"
+    # 'pre' and 'post' hooks are available
+    # here we use an icon from Bootstrap https://icons.getbootstrap.com/
+    pre = '<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 2a2 2 0 0 1 2-2h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm7.5 1.5v-2l3 3h-2a1 1 0 0 1-1-1zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm2 5.755S12 12 8 12s-5 1.755-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-.245z"/></svg> '
     weight = 2
   [[menu.main]]
     name = "Contact"