Hugo: add linenos option to code tabs

Added attribute linenos to code tab shortcode so code blocks (with a language set) will show line numbers, just as the regular code blocks. Testing: added linenos examples to /examples/shortcodes/code-tabs/ (see both data.yaml in the first code tabs example) For https://linear.app/usmedia/issue/CUE-333 Closes #436 as merged as of commit ec8ae3c6. Signed-off-by: Anne van Gorkom <[email protected]> Change-Id: Ib9f7ec440e20c6b7afd5e377c4924c4aa863afa2 Dispatch-Trailer: {"type":"trybot","CL":1172178,"patchset":1,"ref":"refs/changes/78/1172178/1","targetBranch":"alpha"}
cue-lang · Nov 14, 2023 · 3a2843a · 3a2843a
1 parent 7250b84
commit 3a2843a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/content/examples/shortcodes/code-tabs/en.md b/content/examples/shortcodes/code-tabs/en.md
@@ -19,7 +19,17 @@ A code-tab shortcode always needs to be part of a code-tabs shortcode.
 languages: [...#Language]
 {{</* /code-tab */>}}
 
-{{</* code-tab name="data.yaml" language="yaml" area="bottom-left" */>}}
+{{</* code-tab name="data.yaml" language="yaml" linenos="table" area="top-left" */>}}
+languages:
+  - tag: en
+    name: English
+  - tag: nl
+    name: dutch
+  - tag: no
+    name: Norwegian
+{{</* /code-tab */>}}
+
+{{</* code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" */>}}
 languages:
   - tag: en
     name: English
@@ -48,7 +58,7 @@ name: =~"^\\p{Lu}" // Must start with an uppercase letter.
 languages: [...#Language]
 {{< /code-tab >}}
 
-{{< code-tab name="data.yaml" language="yaml" area="top-left" >}}
+{{< code-tab name="data.yaml" language="yaml" linenos="table" area="top-left" >}}
 languages:
 - tag: en
   name: English
@@ -58,7 +68,7 @@ languages:
   name: Norwegian
 {{< /code-tab >}}
 
-{{< code-tab name="data.yaml" language="yaml" area="bottom-left" >}}
+{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" >}}
 languages:
 - tag: en
   name: English
@@ -107,6 +117,9 @@ language
 type
 : optional - Tab code type. Can be 'default' or 'terminal'. For default you can also omit this attribute
 
+linenos
+: option - Only works when a language is set. Possible values are `true`, `false`, `table`, or `inline`. Default is set to `false`. Any other value will add line numbers.
+
 codeToCopy
 : optional - By default the copy button copies the inner content. You can change that by passing in code with this attribute.
 Make sure it's base64 encoded when you pass something to this attribute.

diff --git a/hugo/content/en/examples/shortcodes/code-tabs/index.md b/hugo/content/en/examples/shortcodes/code-tabs/index.md
@@ -19,7 +19,17 @@ A code-tab shortcode always needs to be part of a code-tabs shortcode.
 languages: [...#Language]
 {{</* /code-tab */>}}
 
-{{</* code-tab name="data.yaml" language="yaml" area="bottom-left" */>}}
+{{</* code-tab name="data.yaml" language="yaml" linenos="table" area="top-left" */>}}
+languages:
+  - tag: en
+    name: English
+  - tag: nl
+    name: dutch
+  - tag: no
+    name: Norwegian
+{{</* /code-tab */>}}
+
+{{</* code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" */>}}
 languages:
   - tag: en
     name: English
@@ -48,7 +58,7 @@ name: =~"^\\p{Lu}" // Must start with an uppercase letter.
 languages: [...#Language]
 {{< /code-tab >}}
 
-{{< code-tab name="data.yaml" language="yaml" area="top-left" >}}
+{{< code-tab name="data.yaml" language="yaml" linenos="table" area="top-left" >}}
 languages:
 - tag: en
   name: English
@@ -58,7 +68,7 @@ languages:
   name: Norwegian
 {{< /code-tab >}}
 
-{{< code-tab name="data.yaml" language="yaml" area="bottom-left" >}}
+{{< code-tab name="data.yaml" language="yaml" linenos="true" area="bottom-left" >}}
 languages:
 - tag: en
   name: English
@@ -107,6 +117,9 @@ language
 type
 : optional - Tab code type. Can be 'default' or 'terminal'. For default you can also omit this attribute
 
+linenos
+: option - Only works when a language is set. Possible values are `true`, `false`, `table`, or `inline`. Default is set to `false`. Any other value will add line numbers.
+
 codeToCopy
 : optional - By default the copy button copies the inner content. You can change that by passing in code with this attribute.
 Make sure it's base64 encoded when you pass something to this attribute.

diff --git a/hugo/layouts/shortcodes/code-tab.html b/hugo/layouts/shortcodes/code-tab.html
@@ -4,13 +4,15 @@
     {{ $language := .Get "language" | default "" }}
     {{ $codeToCopy := .Get "codetocopy" }}
     {{ $type := .Get "type" | default "default" }}
+    {{ $lineos := .Get "linenos" | default "false" }}
     {{ $groupId := .Get "groupId" | default "default" }}
     {{ $arrayName := printf "tabs-%s" $area }}
-    {{ $content := printf "```%s {type=\"%s\" codeToCopy=\"%s\" modifier=\"code-block--tab\" }%s```" $language $type $codeToCopy .Inner }}
+    {{ $content := printf "```%s {type=\"%s\", linenos=\"%s\", codeToCopy=\"%s\" modifier=\"code-block--tab\" }%s```" $language $type $lineos $codeToCopy .Inner }}
 
     {{ if not (.Parent.Scratch.Get $arrayName) }}
         {{ .Parent.Scratch.Set $arrayName slice }}
     {{ end }}
+
     {{ with .Inner }}
         {{ $.Parent.Scratch.Add $arrayName (dict
             "name" $name