From d2cfc31c70af3f6cfddf72ccb19911729a5b63a2 Mon Sep 17 00:00:00 2001
From: Anne van Gorkom <anne.van.gorkom@usmedia.nl>
Date: Tue, 14 Nov 2023 15:52:21 +0100
Subject: [PATCH] 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 <anne.van.gorkom@usmedia.nl>
Change-Id: Ib9f7ec440e20c6b7afd5e377c4924c4aa863afa2
Preview-Path: /examples/shortcodes/code-tabs/
Reviewed-on: https://review.gerrithub.io/c/cue-lang/cuelang.org/+/1172178
Reviewed-by: Chief Cueckoo <chief.cueckoo@gmail.com>
TryBot-Result: CUEcueckoo <cueckoo@cuelang.org>
---
 content/examples/shortcodes/code-tabs/en.md   | 19 ++++++++++++++++---
 .../en/examples/shortcodes/code-tabs/index.md | 19 ++++++++++++++++---
 hugo/layouts/shortcodes/code-tab.html         |  4 +++-
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/content/examples/shortcodes/code-tabs/en.md b/content/examples/shortcodes/code-tabs/en.md
index 06c8609ee..337d759fa 100644
--- 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
index 06c8609ee..337d759fa 100644
--- 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
index 8ee37f077..e95ca38ea 100644
--- 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