✨ Add multiple homepage layouts

exampleSite/config.toml

@@ -13,8 +13,8 @@ languageCode = "en-AU"
 title = "Congo"
 
 [author]
-  name = "Freddy Blogger"
-  image = "https://i.pravatar.cc/150?img=11"
+  name = "Congo Profile"
+  image = "/img/author.jpg"
   links = [
     { twitter = "https://twitter.com/" },
     { facebook = "https://facebook.com/" },
@@ -22,6 +22,10 @@ title = "Congo"
     { youtube = "https://youtube.com/" },
   ]
 
+[params.homepage]
+  layout = "custom"
+  showList = true
+
 [[menu.main]]
   name = "Blog"
   pageRef = "blog"

exampleSite/content/_index.md

@@ -1,5 +1,5 @@
 ---
-title: "Welcome to Congo! 🎉"
+title: "Welcome to Congo! :tada:"
 description: "This is a demo of the Congo theme for Hugo"
 ---
 
@@ -7,8 +7,6 @@ description: "This is a demo of the Congo theme for Hugo"
 A simple, lightweight theme for Hugo built with Tailwind CSS.
 {{< /lead >}}
 
-This is the homepage. It's just plain Markdown content and can render whatever you wish.
-
-Perhaps you'll link to an [about](/about/) page, or direct people to check out your [blog posts](/blog/). It's really up to you.
+This is the homepage. It's just plain Markdown content and can render whatever you wish. Perhaps you'll link to an [about](/about/) page, or direct people to check out your [blog posts](/blog/). It's really up to you.
 
 {{< figure src="mountains.jpg" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}}

exampleSite/layouts/partials/home/custom.html

@@ -0,0 +1,33 @@
+<script type="text/javascript">
+  function displayFunction() {
+    var pageDiv = document.getElementById("page");
+    var profileDiv = document.getElementById("profile");
+    var layoutSpan = document.getElementById("layout");
+    if (pageDiv.style.display === "none") {
+      pageDiv.style.display = "block";
+      profileDiv.style.display = "none";
+      layoutSpan.innerHTML = "page";
+    } else {
+      pageDiv.style.display = "none";
+      profileDiv.style.display = "block";
+      layoutSpan.innerHTML = "profile";
+    }
+  }
+</script>
+
+<div class="flex px-4 py-3 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+  <span class="pr-3 text-primary-400">
+    {{ partial "icon.html" "exclamation-triangle" }}
+  </span>
+  <span class="no-prose dark:text-gray-300">
+    This is a demo of the `<code id="layout" class="">page</code>` homepage layout.
+    <button class="px-2 py-2 font-bold" onclick="displayFunction()">Switch</button>
+  </span>
+</div>
+
+<div id="page">
+  {{ partial "partials/home/page.html" . }}
+</div>
+<div id="profile">
+  {{ partial "partials/home/profile.html" . }}
+</div>