content: update for doks v0.4.0

assets/scss/components/_alerts.scss

@@ -25,6 +25,16 @@
  color: $white;
 }
 
+.alert-info {
+ color: #055160;
+ background-color: #cff4fc;
+ border-color: #b6effb;
+}
+
+.alert-info .alert-link {
+ color: #04414d;
+}
+
 .alert-light {
  color: $black;
 }

content/blog/doks-v04/index.md

@@ -1,8 +1,8 @@
 ---
 title: "Doks v0.4"
 emoji: ":tada:"
-description: ""
-lead: "Version 0.4 is here! Multi level section menu (three levels deep), auto generated section menu, new docs tree — with a single command, sub navigation main menu (one level deep), and more."
+description: "Version 0.4 is here! Multi level section menu (three levels deep), auto generated section menu, new docs based tree — with a single command, sub navigation main menu (one level deep), and more."
+lead: "Version 0.4 is here! Multi level section menu (three levels deep), auto generated section menu, new docs based tree — with a single command, sub navigation main menu (one level deep), and more."
 date: 2022-02-14T11:58:45+01:00
 lastmod: 2022-02-14T11:58:45+01:00
 draft: false
@@ -19,7 +19,7 @@ Now you can have a multi level section menu (three levels deep). Works with the
 
 {{< img-simple src="multi-level-breadcrumb.png" alt="Multi level breadcrumb" class="d-block mx-auto shadow my-5" >}}
 
-[Menus →]({{< relref "docs/recipes/menus" >}})
+[Menus →]({{< relref "docs/recipes/menus#add-to-docs-menu" >}})
 
 ## Auto generated section menu
 
@@ -34,37 +34,37 @@ You now have the option to let Doks auto generate the section menu from the dire
 
 The auto generated section menu is available for both the collapsibile section menu and the default one.
 
-[Menus →]({{< relref "docs/recipes/menus" >}})
+[Menus →]({{< relref "docs/recipes/menus#configure" >}})
 
-## New docs tree
+## New docs based tree
 
-Add a new docs tree — with a single command:
+Create a docs based tree — with a single command:
 
 ```bash
 npm run create -- --kind docs [section]
 ```
 
-For example, create a new docs tree named guides:
+For example, create a docs based tree named guides:
 
 ```bash
 npm run create -- --kind docs guides
 ```
 
-[Commands →]({{< relref "docs/prologue/commands" >}})
+[Commands →]({{< relref "docs/prologue/commands#docs-based-tree" >}})
 
 ## Sub navigation main menu
 
 {{< img-simple src="sub-navigation-main-menu.png" alt="Sub navigation main menu" class="d-block mx-auto shadow my-5" >}}
 
 Doks now also comes with sub navigation for the main menu (one level deep).
 
-[Menus →]({{< relref "docs/recipes/menus" >}})
+[Menus →]({{< relref "docs/recipes/menus#add-to-main-menu" >}})
 
 ## Details shortcode
 
 {{< img-simple src="details-shortcode.png" alt="Details shortcode" class="d-block mx-auto shadow my-5" >}}
 
-Use the details shortcode to easily create a disclosure widget in which information is visible only when the widget is toggled into `open` state.
+Add a disclosure widget with the Doks details shortcode. Information is visible only when the widget is toggled into open state.
 
 ```md
 {{</* details "Markdown and HTML" */>}}
@@ -78,17 +78,44 @@ _Markdown_ and <em>HTML</em> will be rendered.
 
 {{< img-simple src="alert-types.png" alt="Alert types" class="d-block mx-auto shadow my-5" >}}
 
-You can now add one of the contextual Bootstrap class names to page alerts.
+You can now add context to page alerts (info, success, warning, or danger).
 
 ```md
 {{</* alert icon="👉" context="info" text="A simple info alert — check it out!" /*/>}}
 ```
 
-[Alerts →]({{< relref "docs/recipes/alerts" >}})
+[Alerts →]({{< relref "docs/recipes/alerts#context" >}})
 
 ## Other features and fixes
 
-- Adds scroll position lock for default docs sidebar
+### UX
+
+- Add scroll position lock for default docs sidebar
+- Set font weight active page to 500
+- Add [full width]({{< relref "docs/recipes/project-configuration#options" >}}) as an option
+- Support local Jost font from both [Google Fonts](https://fonts.google.com/specimen/Jost) and [indestructible type*](https://indestructibletype.com/Jost.html)
+
+### Edit page link
+
+- Support [docs repository subpath]({{< relref "docs/recipes/project-configuration#edit-page" >}})
+- Support [repository hosts]({{< relref "docs/recipes/project-configuration#edit-page" >}}) Bitbucket and BitbucketServer
+
+### Rendering
+
+- Simplify heading rendering
+- Add error handling image not found
+
+### Global alert
+
+- Make global alert uniquely dismissible (using MD5 hash on alert text)
+- Fix [Cumulative Layout Shift](https://web.dev/cls/) global alert
+
+### FlexSearch
+
+- Improve feedback no results found
+- Plainify index values
+- Fix arrow key navigation error
+- Add .Summary as fallback for description search results
 
 [Full changelog →](https://github.com/h-enk/doks/blob/master/CHANGELOG.md)
 

content/docs/prologue/commands.md

@@ -25,6 +25,20 @@ npm run create [path] [flags]
 
 See also the Hugo docs: [hugo new](https://gohugo.io/commands/hugo_new/).
 
+### Docs based tree
+
+Create a docs based tree — with a single command:
+
+```bash
+npm run create -- --kind docs [section]
+```
+
+For example, create a docs based tree named guides:
+
+```bash
+npm run create -- --kind docs guides
+```
+
 ## lint
 
 Check scripts, styles, and markdown for errors:

content/docs/recipes/alerts/index.md

@@ -59,3 +59,15 @@ Will be processed into:
 {{< alert icon="👉" >}}
 _Markdown_ and <em>HTML</em> will be rendered.
 {{< /alert >}}
+
+### Context
+
+Add context to page alerts (info, success, warning, or danger).
+
+```md
+{{</* alert icon="👉" context="info" text="A simple info alert — check it out!" /*/>}}
+```
+
+Will be processed into:
+
+{{< alert icon="👉" context="info" text="A simple info alert — check it out!" />}}

content/docs/recipes/details/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Details"
-description: ""
-lead: ""
+description: "Add a disclosure widget with the Doks details shortcode. Information is visible only when the widget is toggled into open state."
+lead: "Add a disclosure widget with the Doks details shortcode. Information is visible only when the widget is toggled into open state."
 date: 2022-02-15T14:14:29+01:00
 lastmod: 2022-02-15T14:14:29+01:00
 draft: false
@@ -12,3 +12,93 @@ menu:
 weight: 156
 toc: true
 ---
+
+## Usage
+
+```md
+{{</* details <summary> [state] */>}}
+<content>
+{{</* /details */>}}
+```
+
+## Examples
+
+### Markdown and HTML
+
+```md
+{{</* details "Markdown and HTML" */>}}
+_Markdown_ and <em>HTML</em> will be rendered.
+{{</* /details */>}}
+```
+
+{{< details "Markdown and HTML" >}}
+_Markdown_ and <em>HTML</em> will be rendered.
+{{< /details >}}
+
+### Ordered list
+
+```md
+{{</* details "Ordered list" */>}}
+
+1. step 1
+2. step 2
+3. step 3
+
+{{</* /details */>}}
+```
+
+{{< details "Ordered list" >}}
+
+1. step 1
+2. step 2
+3. step 3
+
+{{< /details >}}
+
+### Nested details
+
+```md
+{{</* details "Parent" */>}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{</* details "Child" */>}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{</* details "Grandchild" */>}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{</* /details */>}}
+{{</* /details */>}}
+{{</* /details */>}}
+```
+
+{{< details "Parent" >}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{< details "Child" >}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{< details "Grandchild" >}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{< /details >}}
+{{< /details >}}
+{{< /details >}}
+
+### Start in open state
+
+```md
+{{</* details "Start in open state" open */>}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{</* /details */>}}
+```
+
+{{< details "Start in open state" open >}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{< /details >}}
+
+### Custom HTML styled summary</span>
+
+```md
+{{</* details "<span class=\"fw-bold\">Custom HTML styled summary</span>" */>}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{</* /details */>}}
+```
+
+{{< details "<span class=\"fw-bold\">Custom HTML styled summary</span>" >}}
+Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+{{< /details >}}

content/docs/recipes/menus/index.md

@@ -30,12 +30,33 @@ See also the Hugo docs: [Menus](https://gohugo.io/content-management/menus/).
 [[main]]
  name = "Docs"
  url = "/docs/prologue/introduction/"
+# url = "/docs/1.0/prologue/introduction/"
  weight = 10
 
 [[main]]
  name = "Blog"
  url = "/blog/"
  weight = 20
+
+[[main]]
+ name = "Get Started"
+ weight = 30
+ identifier = "get-started"
+ url = "/docs/prologue/introduction/"
+
+[[main]]
+ name = "Quick Start"
+ weight = 40
+ identifier = "quick-start"
+ url = "/docs/prologue/quick-start/"
+ parent = "get-started"
+
+[[main]]
+ name = "Tutorial"
+ weight = 50
+ identifier = "tutorial"
+ url = "https://getdoks.org/tutorial/introduction/"
+ parent = "get-started"
 ```
 
 ### Add to social menu
@@ -59,11 +80,27 @@ See also the Hugo docs: [Menus](https://gohugo.io/content-management/menus/).
 
 ## Section navigation
 
+### Configure
+
+In `./config/_default/params.toml` set menu options:
+
+```toml
+[menu]
+ [menu.section]
+ auto = true
+ collapsibleSidebar = true
+```
+
+You have the option to let Doks auto generate the section menu from the directory folder (tree) structure (no manual configuration needed and respects set weight).
+
+The auto generated section menu is available for both the collapsibile section menu and the default section menu.
+
 ### Add to docs menu
 
-Add first level menu items:
+Set first level menu items in `./config/_default/menus/menus.en.toml`:
 
 ```toml
+..
 [[docs]]
  name = "Prologue"
  weight = 10
@@ -72,19 +109,36 @@ Add first level menu items:
 
 [[docs]]
  name = "Help"
- weight = 50
+ weight = 60
  identifier = "help"
  url = "/docs/help/"
+
+# [[docs]]
+# name = "Lorem"
+# weight = 70
+# identifier = "lorem"
+# url = "/docs/lorem/"
+..
+```
+
+Set second level menu items in the frontmatter of a docs page (manual mode):
+
+```md
+..
+menu:
+ docs:
+ parent: "lorem"
+ identifier: "ipsum"
+..
 ```
 
-Add second level menu items in the frontmatter of a docs page:
+Set third level menu items in the frontmatter of a docs page (manual mode):
 
 ```md
 ..
 menu:
  docs:
- parent: "prologue"
-weight: 010
+ parent: "ipsum"
 ..
 ```
 

content/docs/recipes/project-configuration.md

@@ -274,8 +274,14 @@ alertText = "Like Doks? <a class=\"alert-link\" href=\"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/h-enk/
 #### Edit page
 
 ```toml
+# repoHost [Github | Gitea | GitLab | Bitbucket | BitbucketServer ] is used for building the edit link based on git hoster
+repoHost = "GitHub"
+#repoHost = "Gitea"
 docsRepo = "https://github.com/h-enk/doks"
-editPage = true
+docsRepoBranch = "master"
+docsRepoSubPath = ""
+editPage = false
+lastMod = false
 ```
 
 #### Options
@@ -293,6 +299,7 @@ Switch main functionalities on/off — also optimizing CSS + JS footprint.
  breadCrumb = false
  highLight = true
  kaTex = false
+ fullWidth = false
 ```
 
 ## next