From 51e472005c907e9e957a6eeae3f97582ff35d6f1 Mon Sep 17 00:00:00 2001
From: Wong Heung Sang <35202375+whs-dot-hk@users.noreply.github.com>
Date: Wed, 30 Jun 2021 13:26:22 +0000
Subject: [PATCH] Improve readability of examples on shortcode templates page

---
 content/en/templates/shortcode-templates.md | 34 ++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/en/templates/shortcode-templates.md b/content/en/templates/shortcode-templates.md
index 14add6f77..888b7ca42 100644
--- a/content/en/templates/shortcode-templates.md
+++ b/content/en/templates/shortcode-templates.md
@@ -88,14 +88,14 @@ For the second position, you would just use:
 `with` is great when the output depends on a parameter being set:
 
 ```
-{{ with .Get "class"}} class="{{.}}"{{ end }}
+{{ with .Get "class" }} class="{{ . }}"{{ end }}
 ```
 
 `.Get` can also be used to check if a parameter has been provided. This is
 most helpful when the condition depends on either of the values, or both:
 
 ```
-{{ if or (.Get "title") (.Get "alt") }} alt="{{ with .Get "alt"}}{{.}}{{else}}{{.Get "title"}}{{end}}"{{ end }}
+{{ if or (.Get "title") (.Get "alt") }} alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "title" }}{{ end }}"{{ end }}
 ```
 
 #### `.Inner`
@@ -130,16 +130,16 @@ The `.IsNamedParams` variable checks whether the shortcode declaration uses name
 For example, you could create an `image` shortcode that can take either a `src` named parameter or the first positional parameter, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows:
 
 ```
-{{</* image src="images/my-image.jpg"*/>}}
+{{</* image src="images/my-image.jpg" */>}}
 ```
 
 You could then include the following as part of your shortcode templating:
 
 ```
 {{ if .IsNamedParams }}
-<img src="{{.Get "src" }}" alt="">
+<img src="{{ .Get "src" }}" alt="">
 {{ else }}
-<img src="{{.Get 0}}" alt="">
+<img src="{{ .Get 0 }}" alt="">
 {{ end }}
 ```
 
@@ -213,17 +213,17 @@ You have created the shortcode at `/layouts/shortcodes/img.html`, which loads th
 {{< code file="/layouts/shortcodes/img.html" >}}
 <!-- image -->
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
-    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
-        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
-    {{ if .Get "link"}}</a>{{ end }}
-    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+    {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
+        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
+    {{ if .Get "link" }}</a>{{ end }}
+    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
     <figcaption>{{ if isset .Params "title" }}
         <h4>{{ .Get "title" }}</h4>{{ end }}
-        {{ if or (.Get "caption") (.Get "attr")}}<p>
+        {{ if or (.Get "caption") (.Get "attr") }}<p>
         {{ .Get "caption" }}
-        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+        {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
             {{ .Get "attr" }}
-        {{ if .Get "attrlink"}}</a> {{ end }}
+        {{ if .Get "attrlink" }}</a> {{ end }}
         </p> {{ end }}
     </figcaption>
     {{ end }}
@@ -289,7 +289,7 @@ The following is taken from `highlight`, which is a [built-in shortcode][] that
 The template for the `highlight` shortcode uses the following code, which is already included in Hugo:
 
 ```
-{{ .Get 0 | highlight .Inner  }}
+{{ .Get 0 | highlight .Inner }}
 ```
 
 The rendered output of the HTML example code block will be as follows:
@@ -308,8 +308,8 @@ Hugo's [`.Parent` shortcode variable][parent] returns a boolean value depending
 The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter:
 
 {{< code file="layouts/shortcodes/gallery.html" >}}
-<div class="{{.Get "class"}}">
-  {{.Inner}}
+<div class="{{ .Get "class" }}">
+  {{ .Inner }}
 </div>
 {{< /code >}}
 
@@ -318,10 +318,10 @@ You also have an `img` shortcode with a single named `src` parameter that you wa
 {{< code file="layouts/shortcodes/img.html" >}}
 {{- $src := .Get "src" -}}
 {{- with .Parent -}}
-  <img src="{{$src}}" class="{{.Get "class"}}-image">
+  <img src="{{$src}}" class="{{ .Get "class" }}-image">
 {{- else -}}
   <img src="{{$src}}">
-{{- end }}
+{{- end -}}
 {{< /code >}}
 
 You can then call your shortcode in your content as follows: