Introduce landing page and card shortcode

assets/_defaults.scss

@@ -28,9 +28,9 @@ $hint-colors: (
   warning: #f59e42,
   danger: #d84747,
 
-  note: #64748b,
+  note: #4486dd,
   tip: #3bad3b,
-  important: #4486dd,
+  important: #8144dd,
   caution: #d84747
 ) !default;
 

assets/_main.scss

@@ -217,6 +217,22 @@ body[dir="rtl"] .book-menu {
     height: 1.5em;
     width: 1.5em;
   }
+
+  > ul {
+    margin: 0;
+    padding: 0 $padding-16;
+    display: flex;
+    gap: $padding-16;
+    justify-content: end;
+
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+.book-kind-home .book-header {
+  display: block;
 }
 
 .book-search {
@@ -338,7 +354,7 @@ body[dir="rtl"] .book-menu {
   }
 
   .book-header {
-    display: block;
+    display: block !important;
   }
 
   #menu-control:focus ~ main label[for="menu-control"] {

assets/_shortcodes.scss

@@ -132,17 +132,17 @@
     }
 
     span.book-badge-title {
-      background-color: var(--body-background);
-      opacity: 0.9;
+      --background-opacity: 0.1;
     }
 
     span.book-badge-value {
+      --background-opacity: 1;
       color: var(--body-background);
     }
 
     @each $name, $color in $hint-colors {
-      &.#{$name} {
-        background-color: $color;
+      &.#{$name} span {
+        background-color: rgba($color, var(--background-opacity));
       }
     }
   }
@@ -192,4 +192,41 @@
       }
     }
   }
+
+  // {{< card >}}
+  .book-card {
+    display: block;
+    overflow: hidden;
+    height: 100%;
+    border-radius: $border-radius;
+    border: $padding-1 solid var(--gray-200);
+    
+    &[href]:hover {
+      text-decoration: none;
+      background: var(--gray-100);
+    }
+    &[href]:visited {
+      color: var(--body-font-color);
+    }
+
+    img {
+      display: block;
+      object-fit: contain;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+
+    .markdown-inner {
+      padding: $padding-16;
+    }
+  }
+
+  .book-hero {
+    min-height: $padding-16 * 24;
+    align-content: center;
+
+    h1 {
+      font-size: 3em;
+    }
+  }
 }

exampleSite/content.en/_index.md

@@ -1,41 +1,62 @@
 ---
 title: Introduction
-type: docs
+bookHeadingAnchor: false
 ---
 
-# Acerbo datus maxime
+<div class="book-hero">
+
+# HUGO BOOK
+[Hugo](https://gohugo.io) documentation theme as simple as plain book
+
+{{< badge style="info" title="Badge" value="Value" >}} {{< badge style="default" title="Badge" value="Value" >}}
+
+{{<button relref="/docs/example">}}Button{{</button>}}
+
+</div>
 
 {{% columns %}}
-## Astris ipse furtiva
+- ## Astris ipse furtiva
+  Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
+  olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis,
+  modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
 
-Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut
-olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis,
-modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies
-
-<--->
-
-## Suis quot vota
-
-Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
-miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
-nunc! Fragosis suae dextra geruntur functus vulgata.
+- ## Suis quot vota
+  Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat:
+  miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod
+  nunc! Fragosis suae dextra geruntur functus vulgata.
 {{% /columns %}}
 
 
-## Tempora nisi nunc
+{{% columns %}}
+- {{< card title="Card" image="" >}}
+  # Heading
+  Nullam feugiat urna massa, et fringilla metus consectetur molestie. Suspendisse sed congue orci, eu congue metus.
+  {{< /card >}}
 
-Lorem **markdownum** emicat gestu. Cannis sol pressit ducta. **Est** Idaei,
-tremens ausim se tutaeque, illi ulnis hausit, sed, lumina cutem. Quae avis
-sequens!
+- {{< card title="Card" image="" >}}
+  # Heading
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
+  {{< /card >}}
 
-    var panel = ram_design;
-    if (backup + system) {
-        file.readPoint = network_native;
-        sidebar_engine_device(cell_tftp_raster,
-                dual_login_paper.adf_vci.application_reader_design(
-                graphicsNvramCdma, lpi_footer_snmp, integer_model));
-    }
+- {{< card title="Card" image="" >}}
+  # Heading
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
+  {{< /card >}}
+{{% /columns %}}
 
-## Locis suis novi cum suoque decidit eadem
+{{% columns %}}
+- {{< card title="Card" >}}
+  ### Heading
+  Nullam feugiat urna massa, et fringilla metus consectetur molestie. Suspendisse sed congue orci, eu congue metus.
+  {{< /card >}}
 
-Idmoniae ripis, at aves, ali missa adest, ut _et autem_, et ab?
+- {{< card title="Card" >}}
+  ### Heading
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
+  {{< /card >}}
+
+- {{< card title="Card" >}}
+  ### Heading
+  Nullam feugiat urna massa, et fringilla metus consectetur molestie. Suspendisse sed congue orci, eu congue metus.
+  {{< /card >}}
+{{% /columns %}}

exampleSite/content.en/docs/shortcodes/cards.md

@@ -0,0 +1,30 @@
+# Cards
+
+## Example
+
+{{% columns %}}
+- {{< card image="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" >}}
+  ### Line 1
+  Line 2
+  {{< /card >}}
+
+- {{< card image="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" >}}
+  This is tab MacOS content.
+  {{< /card >}}
+{{% /columns %}}
+
+{{% columns %}}
+- {{< card href="/" >}}
+  **Markdown**  
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
+  {{< /card >}}
+
+- {{< card >}}
+  Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie.
+  {{< /card >}}
+
+- {{< card title="Card" >}}
+  ### Heading
+  This is tab MacOS content.
+  {{< /card >}}
+{{% /columns %}}

exampleSite/content.en/docs/shortcodes/hints.md

@@ -13,7 +13,6 @@ stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 > **Markdown content**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-
 ```
 
 ## Example
@@ -51,26 +50,26 @@ stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 ## Support for markdown alerts
 
 > [!NOTE]
-> **Markdown content**  
+> **Note**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 
 > [!TIP]
-> **Markdown content**  
+> **Tip**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 
 > [!IMPORTANT]
-> **Markdown content**  
+> **Important**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 
 > [!WARNING]
-> **Markdown content**  
+> **Warning**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 
 > [!CAUTION]
-> **Markdown content**  
+> **Caution**  
 > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
 > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

exampleSite/hugo.toml

@@ -38,10 +38,25 @@ enableGitInfo = true
   weight = 3
 
 [menu]
+[[menu.home]]
+  name = "Documentation"
+  url = "/docs/example/"
+  weight = 1
+
+[[menu.home]]
+  name = "Showcases"
+  url = "/showcases/"
+  weight = 2
+
+[[menu.home]]
+  name = "Github"
+  url = "https://github.com/alex-shpak/hugo-book/"
+  weight = 3
+
 # [[menu.before]]
 [[menu.after]]
   name = "Github"
-  url = "https://github.com/alex-shpak/hugo-book"
+  url = "https://github.com/alex-shpak/hugo-book/"
   weight = 10
 
 [[menu.after]]

exampleSite/hugo.yaml

@@ -36,6 +36,17 @@ languages:
     weight: 3
 
 menu:
+  home:
+    - name: "Documentation"
+      url: "/docs/example/"
+      weight: 1
+    - name: "Showcases"
+      url: "/showcases/"
+      weight: 2
+    - name: "Github"
+      url: "https://github.com/alex-shpak/hugo-book/"
+      weight: 3
+
   # before: []
   after:
     - name: "Github"

layouts/_markup/render-codeblock-katex.html

@@ -9,5 +9,5 @@
 {{- end -}}
 
 {{- with .Inner }}
-<span>\[ {{ . }} \]</span>
+<span>\[ {{ .| htmlEscape | safeHTML  }} \]</span>
 {{ end -}}

layouts/_markup/render-heading.html

@@ -1,4 +1,6 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">
-  {{ .Text | safeHTML }}
-  <a class="anchor" href="#{{ .Anchor | safeURL }}">#</a>
+<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
+  {{ .Text }}
+  {{ if default true .Page.Params.bookHeadingAnchor }}
+  <a class="anchor" href="#{{ .Anchor }}">#</a>
+  {{ end }}
 </h{{ .Level }}>

layouts/_shortcodes/card.html

@@ -0,0 +1,20 @@
+{{- /* remove whitespace */ -}}
+{{- if .Get "href" -}}
+<a class="book-card{{ with .Get "class" }} {{ . }}{{ end }}"{{ with .Get "href" }} href="{{ . | relURL }}"{{ end }}>
+{{- template "book-card-content" . -}}
+</a>
+{{- else -}}
+<div class="book-card{{ with .Get "class" }} {{ . }}{{ end }}">
+{{- template "book-card-content" . -}}
+</div>
+{{- end -}}
+
+{{- define "book-card-content" -}}
+{{- with .Get "image" -}}
+  <img src="{{ . | urls.RelLangURL }}" />
+{{- end }}
+  <div class="markdown-inner">
+  {{ with .InnerDeindent }}{{ . }}{{ end }}
+  </div>
+{{- end -}}
+{{- /* remove whitespace */ -}}

layouts/_shortcodes/mermaid.html

@@ -8,5 +8,5 @@
 {{ end }}
 
 <pre class="mermaid{{ with .Get "class" }} {{ . }}{{ end }}">
-  {{- .Inner -}}
+  {{- .Inner | htmlEscape | safeHTML  -}}
 </pre>

layouts/baseof.html

@@ -4,15 +4,11 @@
   {{ partial "docs/html-head" . }}
   {{ partial "docs/inject/head" . }}
 </head>
-<body dir="{{ default "ltr" .Site.Language.LanguageDirection }}">
+<body dir="{{ default "ltr" .Site.Language.LanguageDirection }}" class="book-kind-{{ .Kind }} book-type-{{ .Type }}">
   <input type="checkbox" class="hidden toggle" id="menu-control" />
   <input type="checkbox" class="hidden toggle" id="toc-control" />
   <main class="container flex">
-    <aside class="book-menu">
-      <div class="book-menu-content">
-        {{ template "menu" . }} <!-- Left menu Content -->
-      </div>
-    </aside>
+    {{ template "menu-container" . }} <!-- Left menu -->
 
     <div class="book-page">
       <header class="book-header">
@@ -29,23 +25,24 @@
       </footer>
 
       {{ template "comments" . }} <!-- Comments block -->
-
       <label for="menu-control" class="hidden book-menu-overlay"></label>
     </div>
 
-    {{ if partial "docs/toc-show" . }}
-    <aside class="book-toc">
-      <div class="book-toc-content">
-        {{ template "toc" . }} <!-- Table of Contents -->
-      </div>
-    </aside>
-    {{ end }}
+    {{ template "toc-container" . }} <!-- Table of Contents -->
   </main>
 
   {{ partial "docs/inject/body" . }}
 </body>
 </html>
 
+{{ define "menu-container" }}
+<aside class="book-menu">
+  <div class="book-menu-content">
+    {{ template "menu" . }}
+  </div>
+</aside>
+{{ end }}
+
 {{ define "menu" }}
   {{ partial "docs/menu" . }}
 {{ end }}
@@ -78,6 +75,16 @@
   </article>
 {{ end }}
 
+{{ define "toc-container" }}
+{{ if partial "docs/toc-show" . }}
+<aside class="book-toc">
+  <div class="book-toc-content">
+    {{ template "toc" . }}
+  </div>
+</aside>
+{{ end }}
+{{ end }}
+
 {{ define "toc" }}
   {{ partial "docs/toc" . }}
 {{ end }}

layouts/home.html

@@ -0,0 +1,13 @@
+{{ define "menu-container" }}
+<!-- -->
+{{ end }}
+{{ define "toc-container" }}
+<!-- -->
+{{ end }}
+{{ define "footer" }}
+<!-- -->
+{{ end }}
+
+{{ define "header" }}
+  {{ partial "docs/menu-hugo" .Site.Menus.home }}
+{{ end }}