Merge pull request #85 from markdumay/develop

Configurable font

README.md

@@ -110,7 +110,7 @@ The main site configuration is available in `./config/_default`. Some remarks:
 
 - **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
 - **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
+- **Theme style** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
 - **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
 - **Security policy** - The theme uses rather strict security policies by default. Be sure to include references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
 

assets/scss/app.scss

@@ -1,5 +1,6 @@
 // Define template variables 
 $themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
+$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
 $carousel-control-prev-icon-bg: url("/img/carousel_prev.svg") !default;
 $carousel-control-next-icon-bg: url("/img/carousel_next.svg") !default;
 

assets/scss/common/_variables.scss

@@ -8,7 +8,7 @@ $fa-font-path:                  "../fonts";
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
-$font-family-sans-serif:        "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;

config/_default/params.toml

@@ -46,6 +46,8 @@ schemaSection = "blog"
 [style]
     themeColor = "#D43900" #00b0f0
     themeOpacity = "10"
+    themeFont = "Inter"
+    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
 
 [main]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk

content/en/blog/custom-shortcodes.md

@@ -187,7 +187,7 @@ Use the `image` shortcode to display a responsive image with a specific aspect r
 | Argument  | Required | Description |
 |-----------|----------|-------------|
 | src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
-| ratio     | No  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". It not specified the original aspect ratio of the image is preserved. |
+| ratio     | No  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is resized and cropped to match the ratio. Else the original aspect ratio of the image is kept. |
 | class     | No  | Optional class attribute of the inner `img` element, e.g. "rounded". |
 | title     | No  | Optional alternate text of the image. |
 | caption   | No  | Optional figure caption. |

content/en/blog/rich-content.md

@@ -3,7 +3,7 @@ author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
 description: "A brief description of Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

content/nl/blog/custom-shortcodes.md

@@ -188,7 +188,7 @@ Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhoudi
 | Parameter | Verplicht | Toelichting |
 |-----------|----------|-------------|
 | src       | Ja  | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
-| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3", "16x9", en "21x9". Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
+| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3", "16x9", en "21x9". Indien opgegeven wordt het plaatje bijgesneden en verkleind om te voldoen aan de ratio. Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
 | class     | Nee | Optionele `class` waarde van het `img` element, bijvoorbeeld "rounded". |
 | title     | Nee | Optionele beschrijving van het plaatje. |
 | caption   | Nee | Optioneel onderschrift van het plaatje. |

content/nl/blog/rich-content.md

@@ -4,7 +4,7 @@ slug: "multimedia"
 title: "Multimedia"
 date: 2021-07-13
 description: "Een overzicht van enkele Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

layouts/partials/assets/blog-card.html

@@ -10,8 +10,8 @@
                 {{- partial "utilities/date.html" (dict "date" .Date "format" "long") -}}
                 • {{ .ReadingTime }} {{ i18n "minutesShort" }} {{ i18n "read" }}
                 {{ if isset .Params "tags" -}}
-                    {{ range first 1 .Params.tags -}}
-                        &bull; <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                    {{ range first 1 (.GetTerms "tags") -}}
+                        &bull; <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                     {{ end -}}
                 {{ end -}}
             </small>

layouts/partials/assets/project-card.html

@@ -9,9 +9,9 @@
             
                 {{ if isset .Params "tags" }}
                     <small class="text-muted text-uppercase">
-                        {{ range $index, $element := .Params.tags }}
+                        {{ range $index, $element := (.GetTerms "tags") }}
                             {{ if gt $index 0 }}&bull; {{ end }}
-                            <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                            <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                         {{ end }}
                     </small>
                 {{ end }}            

layouts/partials/head/stylesheet.html

@@ -8,4 +8,4 @@
 {{ end -}}
     <link rel="preconnect" href="https://fonts.googleapis.com"> 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap">
+    <link rel="stylesheet" href="{{ site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">

layouts/partials/image.html

@@ -5,8 +5,8 @@
     wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
     partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
-                    Instead, the original aspect ratio of the image is preserved.
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
+                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -62,12 +62,27 @@
         {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
     {{ end -}}
 
-    {{- $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
-    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
-    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
-    {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
-    {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
-    {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{- $sm := "" -}}
+    {{ $md := "" -}}
+    {{ $lg := "" -}}
+    {{ $xl := "" -}}
+    {{ $xxl := "" -}}
+    {{ $fallback := "" -}}
+    {{ if $ratio }}
+        {{- $sm = ($img.Fill (printf "%s webp" $smDim)) -}}
+        {{ $md = ($img.Fill (printf "%s webp" $mdDim)) -}}
+        {{ $lg = ($img.Fill (printf "%s webp" $lgDim)) -}}
+        {{ $xl = ($img.Fill (printf "%s webp" $xlDim)) -}}
+        {{ $xxl = ($img.Fill (printf "%s webp" $xxlDim)) -}}
+        {{ $fallback = ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{ else }}
+        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
+        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
+        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
+        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
+        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
+        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
+    {{ end}}
 
     {{- with $caption -}}
         <figure class="figure">

layouts/shortcodes/carousel.html

@@ -1,10 +1,11 @@
 <!-- 
     Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
     elements to define individual image slides. The shortcode supports the following arguments:
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
 -->
 
-{{ $ratio := "4x3" -}}
+{{ $ratio := "" -}}
 {{ $class := "" -}}
 {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ with .Get "class" }}{{ $class = . }}{{ end -}}

layouts/shortcodes/img.html

@@ -2,13 +2,14 @@
     Renders a carousel item with a responsive image (see the image shortcode for more details). The shortcode
     supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
     "caption":      Optional carousel slide caption.
 -->
 
 {{- $src := .Get "src" -}}
 {{ $caption := .Get "caption" -}}
-{{- $ratio := "4x3" -}}
+{{- $ratio := "" -}}
 {{ with .Parent -}}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ else }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.2",
+  "version": "0.7.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.7.2",
+      "version": "0.7.7",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.3",
+  "version": "0.7.7",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {