Merge pull request #1136 from alxhslm/keyword-lists

✨ Keyword shortcode

exampleSite/content/docs/shortcodes/index.md

@@ -377,6 +377,39 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}
 
 <br/><br/><br/>
 
+
+## Keyword
+
+
+The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
+
+
+<!-- prettier-ignore-start -->
+| Parameter   | Description                                  |
+| ----------- | -------------------------------------------- |
+| `icon`      | Optional icon to be used in the keyword      |
+<!-- prettier-ignore-end -->
+
+The input is written in Markdown so you can format it however you please.
+
+**Example:**
+
+```md
+{{</* keywordList */>}}
+{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
+{{</* keyword icon="code" */>}} **Important** skill {{</* /keyword */>}}
+{{</* /keywordList */>}}
+{{</* keyword */>}} *Standalone* skill {{</* /keyword */>}}
+```
+
+{{< keywordList >}}
+{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
+{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
+{{< /keywordList >}}
+{{< keyword >}} *Standalone* skill {{< /keyword >}}
+
+<br/><br/><br/>
+
 ## Lead
 
 `lead` is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the `lead` shortcode.

layouts/shortcodes/keyword.html

@@ -0,0 +1,13 @@
+{{ $icon := .Get "icon"}}
+<div class="flex mt-2">
+<span
+  class="rounded-full bg-primary-500 dark:bg-primary-300 text-neutral-50 dark:text-neutral-700 px-1.5 py-[1px] text-xs font-normal"
+>
+  <span class="flex flex-row items-center">
+    {{if $icon}}
+    <span class="mr-1">{{ partial "icon" $icon }}</span>
+    {{ end }}
+    <span> {{- .Inner | markdownify -}} </span>
+  </span>
+</span>
+</div>

layouts/shortcodes/keywordList.html

@@ -0,0 +1 @@
+<div class="flex flex-row flex-wrap items-center space-x-2">{{- .Inner -}}</div>