refactor: replace gulp by webpack and npm scripts (#258)

BREAKING CHANGE: We have replaced `gulp` with `webpack` and `npm scripts` to build this theme. If you build it on your own or use build commands during the deployment, you may have to adjust your setup.

BREAKING CHANGE: The `GeekblogIcons` font is using the icon name as Unicode now. As a consequence, you have to replace all references to Icons from this font if you have customized the theme.

BREAKING CHANGE: We have refactored the search integration to split Hugo templates from JavaScript code. To get it working again, you need to adjust the `outputFormats` and `outputs` in your Hugo configuration file, as [documented](https://geekdocs.de/usage/configuration/#site-configuration).

exampleSite/config.yaml

@@ -23,9 +23,22 @@ markup:
 taxonomies:
   tag: tags
 
+outputFormats:
+  Search:
+    name: "Search"
+    mediaType: "application/json"
+    # generated file: <baseName>.<mediaType."application/feed+json".suffixes[0]> = feed.json
+    baseName: "searchconfig"
+    isPlainText: false
+    rel: "alternate"
+    isHTML: false
+    noUgly: true
+    permalinkable: false
+
 outputs:
   home:
     - HTML
+    - SEARCH
   page:
     - HTML
   section:

exampleSite/content/shortcodes/buttons.md

@@ -4,10 +4,12 @@ title: Buttons
 
 Buttons are styled links that can lead to local page or external link.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* button relref="/" [class="...", size="large|regular"] */>}}Get Home{{</* /button */>}}
 {{</* button href="https://github.com/thegeeklab/hugo-geekdoc" */>}}Contribute{{</* /button */>}}
 ```
+<!-- prettier-ignore-end -->
 
 ## Example
 

exampleSite/content/shortcodes/expand.md

@@ -8,12 +8,14 @@ Expand shortcode can help to decrease clutter on screen by hiding part of text.
 
 ### Default
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* expand */>}}
 ## Markdown content
 Dolor sit, sumo unique ...
 {{</* /expand */>}}
 ```
+<!-- prettier-ignore-end -->
 
 {{< expand >}}
 
@@ -24,12 +26,14 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
 
 ### With Custom Label
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* expand "Custom Label" "..." */>}}
 ## Markdown content
 Dolor sit, sumo unique ...
 {{</* /expand */>}}
 ```
+<!-- prettier-ignore-end -->
 
 {{< expand "Custom Label" "..." >}}
 

exampleSite/content/shortcodes/hints.md

@@ -5,6 +5,7 @@ title: Hints
 Hint shortcode can be used as hint/alerts/notification block.
 There are four colors to choose: `info`, `ok`, `warning` and `danger`.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* hint [info|warning|danger] */>}}
 **Markdown content**\
@@ -12,6 +13,7 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
  Ornateness bland it ex enc, est yeti am bongo detract re.
 {{</* /hint */>}}
 ```
+<!-- prettier-ignore-end -->
 
 ## Example
 

exampleSite/content/shortcodes/icons.md

@@ -4,9 +4,11 @@ title: Icons
 
 Simple shortcode to include icons from SVG sprites outside of menus.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* icon "thumbs-up" */>}}
 ```
+<!-- prettier-ignore-end -->
 
 **Example:**
 

exampleSite/content/shortcodes/includes.md

@@ -6,9 +6,11 @@ title: Includes
 
 Include shortcode can include files of different types. By specifying a language, the included file will have syntax highlighting.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* include file="relative/path/from/hugo/root" language="go" markdown=[false|true] */>}}
 ```
+<!-- prettier-ignore-end -->
 
 Attributes:
 
@@ -30,9 +32,11 @@ If no other options are specified, files will be rendered as Markdown using the
 If you include markdown files that should not get a menu entry, place them outside the content folder or exclude them otherwise.
 {{< /hint >}}
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* include file="/static/_includes/example.md.part" */>}}
 ```
+<!-- prettier-ignore-end -->
 
 <!-- prettier-ignore-start -->
 <!-- spellchecker-disable -->
@@ -44,9 +48,13 @@ If you include markdown files that should not get a menu entry, place them outsi
 
 This method can be used to include source code files and keep them automatically up to date.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* include file="config.yaml" language="yaml" options="linenos=table,hl_lines=5-6,linenostart=100" */>}}
 ```
+<!-- prettier-ignore-end -->
+
+Result:
 
 <!-- prettier-ignore-start -->
 <!-- spellchecker-disable -->
@@ -60,9 +68,11 @@ This method can be used to include source code files and keep them automatically
 
 HTML content will be filtered by the `safeHTML` filter and added to the rendered page output.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* include file="/static/_includes/example.html.part" */>}}
 ```
+<!-- prettier-ignore-end -->
 
 {{< include file="/static/_includes/example.html.part" type="html" >}}
 

exampleSite/content/shortcodes/tabs.md

@@ -4,6 +4,7 @@ title: Tabs
 
 Tabs let you organize content by context, for example installation instructions for each supported platform.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* tabs "uniqueid" */>}}
 {{</* tab "macOS" */>}} # macOS Content {{</* /tab */>}}
@@ -11,6 +12,7 @@ Tabs let you organize content by context, for example installation instructions
 {{</* tab "Windows" */>}} # Windows Content {{</* /tab */>}}
 {{</* /tabs */>}}
 ```
+<!-- prettier-ignore-end -->
 
 ## Example
 

exampleSite/content/shortcodes/toc-tree.md

@@ -4,9 +4,11 @@ title: ToC-Tree
 
 The `toc-tree` shortcode will generate a Table of Content from a section file tree of your content directory. The root of the resulting ToC will be the page on which you define the shortcode.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* toc-tree */>}}
 ```
+<!-- prettier-ignore-end -->
 
 ## Example
 

exampleSite/content/shortcodes/toc.md

@@ -4,9 +4,11 @@ title: ToC
 
 Simple wrapper to generate a page Table of Content from a shortcode.
 
+<!-- prettier-ignore-start -->
 ```tpl
 {{</* toc */>}}
 ```
+<!-- prettier-ignore-end -->
 
 {{< toc >}}
 

exampleSite/content/usage/configuration.md

@@ -32,6 +32,19 @@ enableRobotsTXT = true
     startLevel = 1
     endLevel = 9
 
+[outputFormats.Search]
+name = "Search"
+mediaType = "application/json"
+baseName = "searchconfig"
+isPlainText = false
+rel = "alternate"
+isHTML = false
+noUgly = true
+permalinkable = false
+
+[outputs]
+home = [ "HTML", "SEARCH" ]
+
 [taxonomies]
   tag = "tags"
 
@@ -70,7 +83,8 @@ enableRobotsTXT = true
   # You can also specify this parameter per page in front matter.
   geekdocEditPath = "edit/main/exampleSite/content"
 
-  # (Optional, default true) Enables search function with flexsearch.
+  # (Optional, default true) Enables search function with flexsearch. To use the search you
+  # have to ensure `outputFormats` and `outputs` are properly configured as well (see below).
   # Index is built on the fly and might slow down your website.
   geekdocSearch = false
 
@@ -148,6 +162,23 @@ markup:
 taxonomies:
   tag: tags
 
+outputFormats:
+  Search:
+    name: "Search"
+    mediaType: "application/json"
+    # generated file: <baseName>.<mediaType."application/feed+json".suffixes[0]> = feed.json
+    baseName: "searchconfig"
+    isPlainText: false
+    rel: "alternate"
+    isHTML: false
+    noUgly: true
+    permalinkable: false
+
+outputs:
+  home:
+    - HTML
+    - SEARCH
+
 params:
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@@ -183,8 +214,9 @@ params:
   # You can also specify this parameter per page in front matter.
   geekdocEditPath: edit/main/exampleSite/content
 
-  # (Optional, default true) Enables search function with flexsearch.
-  # Index is built on the fly and might slowdown your website.
+  # (Optional, default true) Enables search function with flexsearch. To use the search you
+  # have to ensure `outputFormats` and `outputs` are properly configured as well (see below).
+  # Index is built on the fly and might slow down your website.
   geekdocSearch: false
 
   # (Optional, default false) Display search results with the parent folder as prefix. This

exampleSite/content/usage/getting-started.md

@@ -69,6 +69,19 @@ To prepare your new site environment just a few steps are required:
 
    [taxonomies]
       tag = "tags"
+
+   [outputFormats.Search]
+   name = "Search"
+   mediaType = "application/json"
+   baseName = "searchconfig"
+   isPlainText = false
+   rel = "alternate"
+   isHTML = false
+   noUgly = true
+   permalinkable = false
+
+   [outputs]
+   home = [ "HTML", "SEARCH" ]
    ```
 
 5. Test your site.

exampleSite/layouts/shortcodes/sprites.html

@@ -1,12 +1,12 @@
 <div class="flex flex-wrap justify-center">
-    {{ range .Site.Data.sprites.geekdoc }}
+  {{ range $key, $value := .Site.Data.sprites.geekdoc }}
     <div class="flex flex-grid icon-grid">
-        <div class="flex align-center justify-center icon-grid__line">
-            <svg class="icon gdoc_{{ . }}"><use xlink:href="#gdoc_{{ . }}"></use></svg>
-        </div>
-        <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
-            <span>#gdoc_{{ (replace . "_" "_<wbr>") | safeHTML }}</span>
-        </div>
+      <div class="flex align-center justify-center icon-grid__line">
+        <svg class="icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg>
+      </div>
+      <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
+        <span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span>
+      </div>
     </div>
-    {{ end }}
+  {{ end }}
 </div>