Merge pull request #631 from gethinode/develop

Make page breakpoint configurable
Merge branch 'main' into develop
2025-10-07 18:14:28 +00:00 · 2023-11-14 13:01:08 +01:00 · 2023-11-14 12:10:40 +01:00 · 2023-11-14 12:10:07 +01:00 · 2023-11-14 12:09:16 +01:00 · 2023-11-14 12:06:41 +01:00
12 changed files with 67 additions and 36 deletions
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -8,6 +8,7 @@
    endorse = true
    footerBelowFold = false
    loading = "lazy"
    breakpoint = "md"
    [main.externalLinks]
        cue = false
        tab = false
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -6,6 +6,7 @@
    canonifyAssetsURLs = false
    footerBelowFold = false
    loading = "lazy"
    breakpoint = "md"
    [main.externalLinks]
        cue = true
        tab = true
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -120,12 +120,15 @@
      "col-8",
      "col-9",
      "col-auto",
      "col-lg-2",
      "col-lg-4",
      "col-lg-8",
      "col-md-10",
      "col-md-2",
      "col-md-3",
      "col-md-4",
      "col-md-8",
      "col-md-9",
      "col-md-auto",
      "col-sm-12",
      "col-sm-3",
@@ -141,6 +144,7 @@
      "d-grid",
      "d-inline",
      "d-inline-flex",
      "d-lg-block",
      "d-md-block",
      "d-md-flex",
      "d-md-none",
@@ -332,6 +336,7 @@
      "row",
      "row-cols-1",
      "row-cols-2",
      "row-cols-lg-3",
      "row-cols-md-2",
      "row-cols-md-3",
      "row-cols-sm-2",
@@ -341,6 +346,7 @@
      "search-suggestions",
      "shadow",
      "show",
      "sidebar-overflow",
      "slide",
      "small",
      "spinner-border",
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -48,6 +48,9 @@
 {{ $sections := partial "utilities/GetSections.html" (dict "page" . "loading" $loading) }}
 {{- $.Scratch.Set "sections" $sections -}}
 {{- /* Define main breakpoint */ -}}
 {{- $.Scratch.Set "breakpoint" (partial "utilities/GetBreakpoint.html") }}
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
    <head>
--- a/layouts/_default/list/body.html
+++ b/layouts/_default/list/body.html
@@ -1,9 +1,10 @@
 {{- $sections := $.Scratch.Get "sections" -}}
 {{- $fullCover := $.Scratch.Get "fullCover" -}}
 {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
 {{- $layout := .Params.layout -}}
-<div class="row row-cols-1 row-cols-sm-2">
+<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
-    <div class="col col-sm-12 col-md-8">
+    <div class="col-12 col-{{ $breakpoint.current }}-9">
        {{ if not .IsHome }}
            {{ with .Title }}<p id="{{ anchorize . }}" class="display-4 mt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
        {{ end }}
@@ -15,9 +16,12 @@
            {{- if $fullCover }}{{ $loading = site.Params.main.loading }}{{ end }}
        {{ end }}
        {{- $content := partial "utilities/ProcessContent" (dict "page" . "raw" .RawContent "loading" $loading) -}}
-        {{ $content | safeHTML }}
+        {{- $content | safeHTML -}}
        {{ if and (and $sections (eq (len $sections) 1)) (not $content) }}
            <p class="pt-4">{{- T "emptyList" }}.</p>
        {{ end }}
    </div>
    <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
        {{/* Empty in default layout */}}        
    </div>
 </div>    
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,10 +1,11 @@
 {{- define "partials/single-main.html" -}}
    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
    {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
    {{ .Render "single/header" }}
    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+        <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
    {{- end -}}
    {{ .Render "single/body" }}
@@ -18,6 +19,7 @@
 {{ define "main" -}}
    {{- $menu := .Scratch.Get "sidebar" -}}
    {{- $version := .Scratch.Get "version" -}}
    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
    {{ $sidebar := "" }}
    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
@@ -38,34 +40,24 @@
    {{ end }}
    <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if and $menu $hasSidebar -}}
+        {{ if $hasSidebar -}}
-            <div class="row row-cols-md-2 row-cols-lg-3">
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
-                <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
+                <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                    {{ $sidebar | safeHTML }}
                </div>
-                <div class="col col-md-9 col-lg-8 mb-5 p-4">
+                <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 p-4">
                    {{ partial "partials/single-main.html" . }}
                </div>
-                <div class="col col-lg-2 d-none d-lg-block pt-5">
+                <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
                    {{ $toc | safeHTML }}
                </div>
            </div>
        {{ else if $hasSidebar }}
            <div class="row row-cols-1 row-cols-sm-3">
                <div class="col col-md-2 d-none d-md-block"></div>
                <div class="col col-sm-12 col-md-8">
                    {{ partial "partials/single-main.html" . }}
                </div>
                <div class="col col-md-2 d-none d-md-block">
                    {{ $toc | safeHTML }}
                </div>
            </div>
        {{ else }}
-            <div class="row row-cols-1 row-cols-sm-2">
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
-                <div class="col col-sm-12 col-md-9">
+                <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
                    {{ partial "partials/single-main.html" . }}
                </div>
-                <div class="col col-md-3 d-none d-md-block">
+                <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
                    {{ $toc | safeHTML }}
                </div>
            </div>    
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -36,6 +36,7 @@
 -->
 {{- $page := .page -}}
 {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
 {{- if not (in (slice "*hugolib.pageState" "*hugolib.pageForShortcode") (printf "%T" $page)) -}}
    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page': %T" $page -}}
@@ -108,10 +109,10 @@
 {{- end -}}
 {{- $colGrid := "" -}}
 {{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
-{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
+{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
-{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
+{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
-{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
+{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
-{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
 {{ end -}}
 {{- $gutter := .gutter | default "4" -}}
--- a/layouts/partials/utilities/GetBreakpoint.html
+++ b/layouts/partials/utilities/GetBreakpoint.html
@@ -0,0 +1,21 @@
 {{- /* Define main breakpoint */ -}}
 {{ $prev := 0 }}
 {{ $next := 0 }}
 {{ $result := dict }}
 {{- $breakpoints := slice "xs" "sm" "md" "lg" "xl" "xxl" }}
 {{- $breakpoint := site.Params.main.breakpoint | default "md" -}}
 {{- if not (in $breakpoints $breakpoint) -}}
    {{- errorf "layout [_default/baseof.html] - Invalid value for param 'breakpoint': %s" $breakpoint -}}
 {{ else }}
    {{ range $index, $item := $breakpoints }}
        {{ if eq $item $breakpoint }}
            {{ $prev = sub $index 1 }}
            {{ $next = add $index 1 }}
        {{ end }}
    {{ end }}
    {{ if lt $prev 0 }}{{ $prev = 0 }}{{ end }}
    {{ if ge $next (len $breakpoints) }}{{ $next = sub (len $breakpoints) 1 }}{{ end }}
    {{ $result = dict "prev" (index $breakpoints $prev) "current" $breakpoint "next" (index $breakpoints $next) }}
 {{- end -}}
 {{ return $result }}
--- a/layouts/partials/utilities/GetSections.html
+++ b/layouts/partials/utilities/GetSections.html
@@ -48,7 +48,8 @@
    {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
    {{- $icon := $sectionPage.Params.Icon -}}
-    {{- $content := $sectionPage.Content -}}
+    {{- $content := "" -}}
    {{ if not $sectionPage.IsSection }}{{ $content = $sectionPage.Content }}{{ end -}}
    {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
    {{- $moreTitle := "" -}}
    {{- with (index site.Params.sections $section) -}}
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -1,11 +1,12 @@
 {{ define "main" }}
    {{- $page := . -}}
    {{- $layout := $page.Params.layout -}}
    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
    <div class="container-xxl flex-fill p-4 px-xxl-0">
-        <div class="row row-cols-1 row-cols-sm-3">
+        <div class="row row-cols-1 row-cols-{{ $breakpoint.prev }}-3">
-            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
-            <div class="col col-sm-12 col-md-8">
+            <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-8">
                {{- if ne $layout "featured" -}}
                    {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
                        <div>{{ partial "assets/breadcrumb.html" $page }}</div>
@@ -36,7 +37,7 @@
                        {{ $year := .Date.Year }}
                        {{ $lastYear := $.Scratch.Get "lastYear"}}
                        <div class="row mt-2">
-                            <div class="d-none d-sm-block col-sm-3 mt-auto text-right">
+                            <div class="d-none d-{{ $breakpoint.prev }}-block col-{{ $breakpoint.prev }}-3 mt-auto text-right">
                                <time class="post-date" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
                                    {{ (partial "utilities/date.html" (dict "date" .Date "format" "medium")) }}
                                </time>
@@ -52,7 +53,7 @@
                    {{ end }}
                {{ end }}
            </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
        </div>
    </div>
 {{ end }}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.21.6",
+  "version": "0.21.7",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.21.6",
+      "version": "0.21.7",
      "license": "MIT",
      "devDependencies": {
        "@fullhuman/postcss-purgecss": "^5.0.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.21.6",
+  "version": "0.21.7",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
Author	SHA1	Message	Date
Mark Dumay	cc4a4766a9	Merge pull request #631 from gethinode/develop Make page breakpoint configurable	2023-11-14 13:01:08 +01:00
Mark Dumay	6821ac2b60	Merge branch 'main' into develop	2023-11-14 12:10:40 +01:00
mark	06e10655ec	Bump package release	2023-11-14 12:10:07 +01:00
mark	d32fdfa987	Make page breakpoint configurable	2023-11-14 12:09:16 +01:00
mark	9e97f063e5	Update build stats	2023-11-14 12:06:41 +01:00
mark	627f174ae4	Fix duplicate rendering of section body	2023-11-14 12:06:26 +01:00