Merge pull request #348 from nunocoracao/347-refactor-custom-landing-page

♻️ Refactor custom landing page and recent articles

exampleSite/config/_default/params.toml

@@ -36,7 +36,7 @@ defaultBackgroundImage = "/img/iceland.jpg"
   showRecentItems = 10
   showMoreLink = true
   showMoreLinkDest = "docs"
-  cardView = true
+  cardView = false
   cardViewScreenWidth = false
   layoutBackgroundBlur = true # only used when layout equals background
 

exampleSite/layouts/partials/recent-articles-demo.html

@@ -18,33 +18,15 @@
 </div>
 
 <div id="CardViewScreenWidth" class="">
-    <section
+    {{ partial "recent-articles-cardview-fullwidth.html" . }}
-        class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-        style="left: calc(max(-50vw,-800px) + 50%);">
-        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-        .Site.Params.mainSections)).Pages }}
-        {{ partial "article-link-card.html" . }}
-        {{ end }}
-    </section>
 </div>
 
 <div id="CardViewProse" class="hidden h-full">
-    <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+    {{ partial "recent-articles-cardview.html" . }}
-        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-        .Site.Params.mainSections)).Pages }}
-        {{ partial "article-link-card.html" . }}
-        {{ end }}
-    </section>
 </div>
 
 <div id="NormalView" class="hidden h-full">
-    <section class="space-y-10 w-full">
+    {{ partial "recent-articles-list.html" . }}
-        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-        .Site.Params.mainSections)).Pages
-        }}
-        {{ partial "article-link.html" . }}
-        {{ end }}
-    </section>
 </div>
 
 {{ if .Site.Params.homepage.showMoreLink | default false }}

layouts/partials/recent-articles-cardview-fullwidth.html

@@ -0,0 +1,11 @@
+{{ $recentArticles := 5 }}
+{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
+
+<section
+  class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+  style="left: calc(max(-50vw,-800px) + 50%);">
+  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+  .Site.Params.mainSections)).Pages }}
+  {{ partial "article-link-card.html" . }}
+  {{ end }}
+</section>

layouts/partials/recent-articles-cardview.html

@@ -0,0 +1,9 @@
+{{ $recentArticles := 5 }}
+{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
+
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+  .Site.Params.mainSections)).Pages }}
+  {{ partial "article-link-card.html" . }}
+  {{ end }}
+</section>

layouts/partials/recent-articles-list.html

@@ -0,0 +1,9 @@
+{{ $recentArticles := 5 }}
+{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
+
+<section class="space-y-10 w-full">
+  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
+  }}
+  {{ partial "article-link.html" . }}
+  {{ end }}
+</section>

layouts/partials/recent-articles.html

@@ -6,25 +6,12 @@
 {{ end }}
 <h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>
 
-{{ if .Site.Params.homepage.cardView | default false }}
+{{ if and .Site.Params.homepage.cardView (not .Site.Params.homepage.cardViewScreenWidth) | default false }}
-{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
+  {{ partial "recent-articles-cardview.html" . }}
-<section class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+{{ else if and .Site.Params.homepage.cardView .Site.Params.homepage.cardViewScreenWidth | default false }}
-    style="left: calc(max(-50vw,-800px) + 50%);">
+  {{ partial "recent-articles-cardview-fullwidth.html" . }}
 {{ else }}
-<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+  {{ partial "recent-articles-list.html" . }}
-  {{ end }}
-    {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-    .Site.Params.mainSections)).Pages }}
-      {{ partial "article-link-card.html" . }}
-    {{ end }}
-</section>
-{{ else }}
-<section class="space-y-10 w-full">
-  {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
-  }}
-  {{ partial "article-link.html" . }}
-  {{ end }}
-</section>
 {{ end }}
 
 {{ if .Site.Params.homepage.showMoreLink | default false }}