Hugo: add tag shortcode

- Added example page for tag shortcode (/examples/shortcodes/tag/) - Added link to example page on example overview page - Fix color for lilac tag - Added styling for tag shortcode - Added html for tag shortcode Testing: check out the example page: /examples/shortcodes/tag/ For https://linear.app/usmedia/issue/CUE-327 Closes #437 as merged as of commit 2d69208. Signed-off-by: Anne van Gorkom <[email protected]> Change-Id: Id6634349f008d84477a444b1315611cc86c1eb81 Reviewed-on: https://review.gerrithub.io/c/cue-lang/cuelang.org/+/1172235 TryBot-Result: CUEcueckoo <[email protected]> Reviewed-by: Paul Jolly <[email protected]>
cue-lang · Nov 16, 2023 · c1c463f · c1c463f
1 parent 3da5049
commit c1c463f
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 15 deletions.
diff --git a/content/examples/_en.html b/content/examples/_en.html
@@ -130,18 +130,18 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Sidenote</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/search/">
+                                <span class="nav__text">Search</span>
+                            </a>
+                        </li>
                     </ul>
                 </div>
 
                 <div class="index__nav nav nav--index">
                     <p class="nav__title">Shortcodes</p>
 
                     <ul class="nav__list">
-                        <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/search/">
-                                <span class="nav__text">Search</span>
-                            </a>
-                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/spinner/">
                                 <span class="nav__text">Spinner</span>
@@ -162,6 +162,11 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Tabs</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/tag">
+                                <span class="nav__text">Tag</span>
+                            </a>
+                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/todo/">
                                 <span class="nav__text">Todo</span>

diff --git a/content/examples/shortcodes/tag/en.md b/content/examples/shortcodes/tag/en.md
@@ -0,0 +1,40 @@
+---
+title: Tag
+weight: 33
+---
+
+To use tags inline use the `{{</* tag */>}}` shortcode. Just add the tag name to the shortcode.
+Use quotes around the tag name if it contains a space. Only the tags added to the site Params will work.
+If a new tag is needed, also add that one to the params.toml.
+
+## Examples
+
+```
+Ecosystem: {{</* tag ecosystem */>}}
+
+Encodings: {{</* tag encodings */>}}
+
+Cue command: {{</* tag "cue command" */>}}
+
+Language: {{</* tag language */>}}
+
+Validation: {{</* tag validation */>}}
+
+Tooling: {{</* tag tooling */>}}
+
+Commented Cue: {{</* tag "commented cue" */>}}
+```
+
+Ecosystem: {{< tag ecosystem >}}
+
+Encodings: {{< tag encodings >}}
+
+Cue command: {{< tag "cue command" >}}
+
+Language: {{< tag language >}}
+
+Validation: {{< tag validation >}}
+
+Tooling: {{< tag tooling >}}
+
+Commented Cue: {{< tag "commented cue" >}}
diff --git a/content/examples/shortcodes/tag/page.cue b/content/examples/shortcodes/tag/page.cue
@@ -0,0 +1,3 @@
+package site
+
+content: examples: shortcodes: "tag": {}
diff --git a/hugo/assets/scss/components/filter.scss b/hugo/assets/scss/components/filter.scss
@@ -173,8 +173,8 @@
             --filter-color: #{ $c-filter-purple };
         }
 
-        &--lila {
-            --filter-color: #{ $c-filter-lila };
+        &--lilac {
+            --filter-color: #{ $c-filter-lilac };
         }
 
         &--blue {

diff --git a/hugo/assets/scss/components/tag.scss b/hugo/assets/scss/components/tag.scss
@@ -31,6 +31,10 @@
         width: 0.75rem;
     }
 
+    &--inline {
+        display: inline-flex;
+    }
+
     &--red {
         --tag-color: #{ $c-filter-red };
     }
@@ -51,8 +55,8 @@
         --tag-color: #{ $c-filter-purple };
     }
 
-    &--lila {
-        --tag-color: #{ $c-filter-lila };
+    &--lilac {
+        --tag-color: #{ $c-filter-lilac };
     }
 
     &--blue {

diff --git a/hugo/assets/scss/config/colors.scss b/hugo/assets/scss/config/colors.scss
@@ -30,7 +30,7 @@ $c-filter-orange:       #fcc199;
 $c-filter-green:        #cbdaaa;
 $c-filter-pink:         #fc97c3;
 $c-filter-purple:       #d6a0de;
-$c-filter-lila:         #9fb8de;
+$c-filter-lilac:        #9fb8de;
 $c-filter-blue:         #97d8fe;
 $c-filter-lavender:     #97b9fe;
 

diff --git a/hugo/content/en/examples/_index.html b/hugo/content/en/examples/_index.html
@@ -130,18 +130,18 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Sidenote</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/search/">
+                                <span class="nav__text">Search</span>
+                            </a>
+                        </li>
                     </ul>
                 </div>
 
                 <div class="index__nav nav nav--index">
                     <p class="nav__title">Shortcodes</p>
 
                     <ul class="nav__list">
-                        <li class="nav__item">
-                            <a class="nav__link" href="/examples/shortcodes/search/">
-                                <span class="nav__text">Search</span>
-                            </a>
-                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/spinner/">
                                 <span class="nav__text">Spinner</span>
@@ -162,6 +162,11 @@ <h1 class="section__title">Examples</h1>
                                 <span class="nav__text">Tabs</span>
                             </a>
                         </li>
+                        <li class="nav__item">
+                            <a class="nav__link" href="/examples/shortcodes/tag">
+                                <span class="nav__text">Tag</span>
+                            </a>
+                        </li>
                         <li class="nav__item">
                             <a class="nav__link" href="/examples/shortcodes/todo/">
                                 <span class="nav__text">Todo</span>

diff --git a/hugo/content/en/examples/shortcodes/tag/index.md b/hugo/content/en/examples/shortcodes/tag/index.md
@@ -0,0 +1,40 @@
+---
+title: Tag
+weight: 33
+---
+
+To use tags inline use the `{{</* tag */>}}` shortcode. Just add the tag name to the shortcode.
+Use quotes around the tag name if it contains a space. Only the tags added to the site Params will work.
+If a new tag is needed, also add that one to the params.toml.
+
+## Examples
+
+```
+Ecosystem: {{</* tag ecosystem */>}}
+
+Encodings: {{</* tag encodings */>}}
+
+Cue command: {{</* tag "cue command" */>}}
+
+Language: {{</* tag language */>}}
+
+Validation: {{</* tag validation */>}}
+
+Tooling: {{</* tag tooling */>}}
+
+Commented Cue: {{</* tag "commented cue" */>}}
+```
+
+Ecosystem: {{< tag ecosystem >}}
+
+Encodings: {{< tag encodings >}}
+
+Cue command: {{< tag "cue command" >}}
+
+Language: {{< tag language >}}
+
+Validation: {{< tag validation >}}
+
+Tooling: {{< tag tooling >}}
+
+Commented Cue: {{< tag "commented cue" >}}
diff --git a/hugo/layouts/shortcodes/tag.html b/hugo/layouts/shortcodes/tag.html
@@ -0,0 +1,13 @@
+{{- $tagName := .Get 0 | default "" -}}
+{{- $tagMap := where .Site.Params.tags "name" "eq" $tagName | first 1 -}}
+
+{{- if $tagMap -}}
+    {{- range $tag := $tagMap -}}
+        {{- $tagValue:= cond (strings.Contains $tag.name " ") (printf "\"%s\"" $tag.name) $tag.name -}}
+
+        <a href="/search?q=tag:{{ $tagValue }}"
+        class="tag tag--inline{{ if $tag.color }} tag--{{ $tag.color }}{{ end }}">
+            {{ $tag.name }}
+        </a>
+    {{- end -}}
+{{- end -}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		package site

		content: examples: shortcodes: "tag": {}