Merge pull request #80 from nunocoracao/79-create-shordcode-to-import-articles-or-list-of-articles

added new shortcodes and respective docs

assets/css/compiled/main.css

@@ -1553,6 +1553,10 @@ select {
   margin-bottom: 2.25rem !important;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .-mr-2 {
   margin-right: -0.5rem;
 }

exampleSite/content/docs/shortcodes/index.md

@@ -37,6 +37,25 @@ Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
 {{< /alert >}}
 
+## Article
+`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent.
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`link`| **Required.** the `.RelPermalink` to the target article.|
+<!-- prettier-ignore-end -->
+
+**Example:**
+
+```md
+{{</* article link="/docs/welcome/" */>}}
+```
+
+{{< article link="/docs/welcome/" >}}
+
+
+
 ## Badge
 
 `badge` outputs a styled badge component which is useful for displaying metadata.
@@ -164,6 +183,33 @@ Custom icons can be added by providing your own icon assets in the `assets/icons
 
 Icons can also be used in partials by calling the [icon partial]({{< ref "partials#icon" >}}).
 
+## List
+`List` will display a list of recent articles. This shortcode requires a limit value to constraint the list. Additionally, it supports a `where` and a `value` in order to filter articles by their parameters. Note that this shortcode will not display its parent page but it will count for the limit value.
+
+<!-- prettier-ignore-start -->
+|Parameter|Description|
+|---|---|
+|`limit`| **Required.** the number of recent articles to display.|
+|`where`| the number of recent articles to display.|
+|`value`| the number of recent articles to display.|
+
+<!-- prettier-ignore-end -->
+
+**Example #1:**
+```md
+{{</* list limit=2 */>}}
+```
+
+{{< list limit=2 >}}
+
+**Example #2:**
+```md
+{{</* list limit=2 where="Type" value="sample" */>}}
+```
+
+{{< list limit=2 where="Type" value="sample">}}
+
+
 ## Swatches
 `swatches` outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the `HEX` codes of each color and creates the visual elements for each.
 

exampleSite/content/samples/emoji.md

@@ -4,6 +4,7 @@ date: 2019-03-05
 description: "Guide to Emoji usage in Blowfish"
 summary: "📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸"
 tags: ["emoji", "sample"]
+type: 'sample'
 ---
 
 Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.

layouts/partials/article-link.html

@@ -41,7 +41,7 @@
 
 
     <div class="{{ $articleInnerClasses }}">
-      <h3 class="items-center text-xl font-semibold">
+      <div class="items-center text-xl font-semibold">
         {{ with .Params.externalUrl }}
         <div>
           <div
@@ -55,8 +55,8 @@
 
         </div>
         {{ else }}
-        <p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
+        <div class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-          href="{{ .RelPermalink }}">{{ .Title | emojify }}</p>
+          href="{{ .RelPermalink }}">{{ .Title | emojify }}</div>
         {{ end }}
         {{ if and .Draft .Site.Params.article.showDraftLabel }}
         <div class=" ltr:ml-2 rtl:mr-2">
@@ -66,7 +66,7 @@
         {{ if templates.Exists "partials/extend-article-link.html" }}
         {{ partial "extend-article-link.html" . }}
         {{ end }}
-      </h3>
+      </div>
       <div class="text-sm text-neutral-500 dark:text-neutral-400">
         {{ partial "article-meta.html" . }}
       </div>

layouts/shortcodes/article.html

@@ -0,0 +1,9 @@
+{{ $parent := .Page.RelPermalink }}
+<section class="w-full mt-10 mb-10">
+    {{ $RelPermalink := .Get "link" }}
+    {{ range ( where .Site.RegularPages "RelPermalink" $RelPermalink | first 1 ) }}
+        {{ if not (eq .RelPermalink $parent) }}
+            {{ partial "article-link.html" . }}
+        {{ end }}
+    {{end}}
+</section>

layouts/shortcodes/list.html

@@ -0,0 +1,21 @@
+
+{{ $limit := .Get "limit" }}
+{{ $parent := .Page.RelPermalink }}
+{{ $where := .Get "where" }}
+{{ $value := .Get "value" }}
+<h2 class="mt-20 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
+<section class="space-y-10 w-full mt-10 mb-10">
+    {{ if $where }}
+        {{ range ( where .Site.RegularPages $where $value | first 1 ) }}
+            {{ if not (eq .RelPermalink $parent) }}
+                {{ partial "article-link.html" . }}
+            {{ end }}
+        {{end}}
+    {{ else }}
+        {{ range .Site.RegularPages | first $limit }}
+            {{ if not (eq .RelPermalink $parent) }}
+                {{ partial "article-link.html" . }}
+            {{ end }}
+        {{end}}
+    {{ end }}
+</section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/vendor",