Merge pull request #13 from nunocoracao/12-dynamic-number-of-recent-items

added variable to define how many articles appear in recent

docs/docs/index.html

@@ -22,7 +22,7 @@
 /blowfish/docs/featured_hud8adc593272aed8f1224d3593fe9b187_99792_1024x0_resize_box_3.png 1024w,
 /blowfish/docs/featured_hud8adc593272aed8f1224d3593fe9b187_99792_1320x0_resize_box_3.png 2x" src=/blowfish/docs/featured_hud8adc593272aed8f1224d3593fe9b187_99792_660x0_resize_box_3.png alt="Featured Blowfish image"></figure></p><p>This section contains everything you need to know about Blowfish. If you&rsquo;re new, check out the <a href=https://nunocoracao.github.io/blowfish/docs/installation/>Installation</a> guide to begin or visit the <a href=https://nunocoracao.github.io/blowfish/samples/>Samples</a> section to see what Blowfish can do.</p><hr></div></section><section class=space-y-10><a class="sm:flex mb-10 article" href=/blowfish/docs/welcome/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/welcome/>Welcome to Blowfish 🐡</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>595 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/welcome/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/installation/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/installation/>Installation</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>976 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">5 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/installation/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Simply follow the standard Hugo Quick Start procedure to get up and running quickly.
 Detailed installation instructions can be found below. Instructions for updating the theme are also available.
-Installation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/getting-started/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/getting-started/>Getting Started</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>897 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">5 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/getting-started/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/configuration/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/configuration/>Configuration</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>2306 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">11 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/configuration/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
+Installation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/getting-started/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/getting-started/>Getting Started</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>897 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">5 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/getting-started/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/configuration/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/configuration/>Configuration</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>2335 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">11 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/configuration/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
 The theme ships with a default configuration that gets you up and running with a basic blog or static website.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/homepage-layout/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/homepage-layout/>Homepage Layout</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>478 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/homepage-layout/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/front-matter/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/front-matter/>Front Matter</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>542 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/front-matter/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/shortcodes/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/shortcodes/>Shortcodes</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>954 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">5 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/shortcodes/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.
 Alert # alert outputs its contents as a stylised message box within your article. It&rsquo;s useful for drawing attention to important information that you don&rsquo;t want the reader to miss.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/partials/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/partials/>Partials</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>734 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/partials/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">Analytics # Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
 Fathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/content-examples/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/content-examples/>Content Examples</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>2005 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">10 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/content-examples/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">If you&rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/advanced-customisation/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/advanced-customisation/>Advanced Customisation</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>1519 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">8 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/advanced-customisation/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.</div></div></a><a class="sm:flex mb-10 article" href=/blowfish/docs/hosting-deployment/><div class="mb-[5rem] md:mb-0"><h3 class="flex items-center text-xl font-semibold"><p class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/hosting-deployment/>Hosting & Deployment</p></h3><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span>822 words</span><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span><span id=views_docs/hosting-deployment/index.md title=views>0 views</span></div></div><div class="py-1 prose dark:prose-invert">There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.

docs/docs/shortcodes/index.html

@@ -45,8 +45,8 @@
 </span></span><span class=line><span class=cl>  <span class=p>}]</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
 </span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
-</span></span></code></pre></div><div class=chart><canvas id=924867351></canvas>
+</span></span></code></pre></div><div class=chart><canvas id=231468579></canvas>
-<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("924867351"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
+<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("231468579"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
 </span></span></code></pre></div><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span>
 </span></span><span class=line><span class=cl>    <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
 </span></span><span class=line><span class=cl>    <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>

exampleSite/config/_default/params.toml

@@ -24,6 +24,7 @@ mainSections = ["docs", "samples"]
 [homepage]
   layout = "custom" # valid options: page, profile, custom
   showRecent = false
+  showRecentItems = 5
  
 [article]
   showDate = true

exampleSite/content/docs/configuration/index.md

@@ -130,6 +130,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`footer.showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.|
 |`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
 |`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
+|`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.|
 |`article.showDate`|`true`|Whether or not article dates are displayed.|
 |`article.showViews`|`false`|Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.|
 |`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|

layouts/partials/recent-articles.html

@@ -1,6 +1,10 @@
+{{ $recentArticles := 5 }}
 {{ if .Site.Params.homepage.showRecent | default false }}
+  {{ if index .Site.Params.homepage "showRecentItems" }}
+    {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
+  {{ end }}
   <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
-  {{ range first 5 (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
+  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
     {{ partial "article-link.html" . }}
   {{ end }}
 {{ end }}