Merge pull request #269 from gethinode/develop

Fixes

assets/js/clipboard.js

@@ -14,10 +14,12 @@ const addCopyButtons = (clipboard) => {
     // 2. Create a button that will trigger a copy operation
     const button = document.createElement('button')
     button.className = 'clipboard-button'
+    button.setAttribute('data-toast-target', 'toast-copied-code-message')
     button.type = 'button'
     button.innerHTML = svgCopy
     button.addEventListener('click', () => {
-      clipboard.writeText(codeBlock.innerText).then(
+      const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
+      clipboard.writeText(text).then(
         () => {
           button.blur()
           button.innerHTML = svgCheck

assets/js/toast.js

@@ -1,37 +1,24 @@
-// Script to move all embedded toast messages into a container. The container ensures multiple toast messages are
-// stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures the click event
-// of the origin is linked as well.
+// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple
+// toast messages are stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures
+// the click event of the origin is linked as well.
 
-// create a HTML fragment
-function createFragment (htmlStr) {
-  const fragment = document.createDocumentFragment()
-  const temp = document.createElement('div')
-  temp.innerHTML = htmlStr
-  while (temp.firstChild) {
-    fragment.appendChild(temp.firstChild)
-  }
-  return fragment
-}
+const container = document.getElementById('toast-container')
+if (container !== null) {
+  // process all data-toast-target elements
+  document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+    const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+    if (target !== null) {
+      // move the element to the toast containr
+      container.appendChild(target)
 
-// insert a toast container in the DOM
-const container = '<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>'
-document.body.appendChild(createFragment(container))
-const parent = document.getElementById('toast-container')
-
-// process all data-toast-target elements
-document.querySelectorAll('[data-toast-target]').forEach(trigger => {
-  const target = document.getElementById(trigger.getAttribute('data-toast-target'))
-  if (target !== null) {
-    // move the element to the toast containr
-    parent.appendChild(target)
-
-    // eslint-disable-next-line no-undef
-    const toast = bootstrap.Toast.getOrCreateInstance(target)
-    if (toast !== null) {
-      // associate the click event of the origin with the toast element
-      trigger.addEventListener('click', () => {
-        toast.show()
-      })
+      // eslint-disable-next-line no-undef
+      const toast = bootstrap.Toast.getOrCreateInstance(target)
+      if (toast !== null) {
+        // associate the click event of the origin with the toast element
+        trigger.addEventListener('click', () => {
+          toast.show()
+        })
+      }
     }
-  }
-})
+  })
+}

config/_default/params.toml

@@ -36,6 +36,11 @@
     sidebar = true
 # toml-docs-end navigation
 
+# toml-docs-start messages
+[messages]
+    placement = "bottom-right"
+# toml-docs-end messages
+
 # toml-docs-start sharing
 [sharing]
     enabled = true

i18n/en.yaml

@@ -82,7 +82,11 @@
 - id: shareLink
   translation: "Share via"
 - id: copiedToClipboard
-  translation: "Copied to clipboard"
+  translation: "copied to clipboard"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Code"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -72,7 +72,11 @@
 - id: shareLink
   translation: "Delen via"
 - id: copiedToClipboard
-  translation: "Gekopieerd naar clipboard"
+  translation: "gekopieerd naar clipboard"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Code"
 
 # 404 page
 - id: pageNotFound

layouts/_default/baseof.html

@@ -68,6 +68,7 @@
             </div>
         {{ end }}
 
+        {{- partial "footer/toast-container.html" . -}}
         {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
     </body>
 </html>

layouts/partials/assets/sharing.html

@@ -19,7 +19,7 @@
                     {{- $target = (printf "toast-message-%s-%d" (anchorize $item.name) $index ) -}}
                     {{- $clipboard = $url -}}
                     {{- $url = "#!" -}}
-                    {{- partial "assets/toast.html" (dict "id" $target "message" (T "copiedToClipboard")) -}}
+                    {{- partial "assets/toast.html" (dict "id" $target "message" (printf "%s %s" (T "link")  (T "copiedToClipboard"))) -}}
                 {{- end -}}
                 {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" $item.icon "class" "btn-social px-1" )}}
             {{- end -}}

layouts/partials/footer/toast-container.html

@@ -0,0 +1,31 @@
+<!-- 
+    Defines a container to stack toast messages. By default, toast messages are displayed in the bottom right of the
+    viewport. Multiple toast messages are stacked vertically. Adjust the configuration by adjusting 'messages' in the
+    site parameters. The following arguments are supported:
+    "placement"     Optional position of the toast messages relative to the viewport: "top-left", "top-center",
+                    "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", or
+                    "bottom-right" (default).
+-->
+
+{{- $placement := "bottom-right" -}}
+{{- $position := "bottom-0 end-0" -}}
+{{- with site.Params.messages.placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top-left" "top-center" "top-right" "middle-left" "middle-center" "middle-right" "bottom-left" "bottom-center" "bottom-right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [footer/toast-container.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
+
+{{- if eq $placement "top-left" }}{{ $position = "top-0 start-0" -}}
+{{- else if eq $placement "top-center" }}{{ $position = "top-0 start-50 translate-middle-x" -}}
+{{- else if eq $placement "top-right" }}{{ $position = "top-0 end-0" -}}
+{{- else if eq $placement "middle-left" }}{{ $position = "top-50 start-0 translate-middle-y" -}}
+{{- else if eq $placement "middle-center" }}{{ $position = "top-50 start-50 translate-middle" -}}
+{{- else if eq $placement "middle-right" }}{{ $position = "top-50 end-0 translate-middle-y" -}}
+{{- else if eq $placement "bottom-left" }}{{ $position = "bottom-0 start-0" -}}
+{{- else if eq $placement "bottom-center" }}{{ $position = "bottom-0 start-50 translate-middle-x" -}}
+{{- else if eq $placement "bottom-right" }}{{ $position = "bottom-0 end-0" -}}
+{{- end -}}
+
+<div id="toast-container" class="toast-container position-fixed {{ $position }} p-3">
+    {{- partial "assets/toast.html" (dict "id" "toast-copied-code-message" "message" (printf "%s %s" (T "code")  (T "copiedToClipboard"))) -}}
+</div>

layouts/shortcodes/toast.html

@@ -4,6 +4,7 @@
     "header":       Optional header of the toast message. Uses the site title by default.
 -->
 
+{{- $error := false -}}
 {{- $id := printf "toast-message-%d" .Ordinal -}}
 {{- with .Get "id" }}{{ $id = . }}{{ end -}}
 {{ $header := .Get "header" -}}
@@ -11,6 +12,6 @@
 
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
-{{ else }}
+{{ else if not $error -}}
     {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
 {{ end -}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.14.3",
+      "version": "0.14.4",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",