Merge pull request #3 from apvarun/custom-menu

Add support for custom menu option

README.md

@@ -14,6 +14,7 @@ Features:
 - Responsive content
 - Filtering content
 - Social links
+- Custom menu
 
 ## Get the theme
 
@@ -63,10 +64,17 @@ From `exampleSite/`, copy `config.toml` to the root folder of your Hugo site and
 
 Menu in Showcase theme is auto-generated from the sections inside your content folder.
 
+You can also add a custom menu item using the `config.toml` and disable auto-generated sections if not required. Refer config in [exampleSite](https://github.com/apvarun/showcase-hugo-theme/blob/master/exampleSite/config.toml)
+
 ## Google Analytics
 
 Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics).
 
+## Used By
+
+- [Madhu Akula](https://madhuakula.com/content/)
+- [@cloudmiracle](http://cloud.vn/)
+
 ## Issues
 
 If you have a question, please [open an issue](https://github.com/apvarun/showcase-hugo-theme/issues) for help and to help those who come after you. The more information you can provide, the better!

exampleSite/config.toml

@@ -10,6 +10,11 @@ disableKinds = ["taxonomy", "taxonomyTerm", "RSS"]
   author = "showcase"
   description = "Minimal, one page, theme for showcasing your work"
   message = ""
+  hideAutoMenu = false
+
+[[menu.main]]
+  name = "External"
+  url = "https://example.com"
 
 [social]
   facebook = "https://facebook.com"

layouts/_default/single.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+
+<section class="text-gray-700 body-font">
+  <div class="container px-5 py-8 mx-auto">
+    <h1 class="text-2xl font-bold my-4">{{ .Title }}</h1>
+    <div>
+      {{ .Content }}
+    </div>
+  </div>
+</section>
+
+{{ end }}

layouts/index.html

@@ -6,6 +6,7 @@
 
     <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
       {{ range where .Site.Pages "Kind" "page" }}
+      {{ if ne .Params.Exclude true }}
       <a
         target="_blank"
         rel="noopener"
@@ -37,6 +38,7 @@
         </div>
       </a>
       {{ end }}
+      {{ end }}
     </div>
   </div>
 </section>

layouts/partials/footer.html

@@ -131,5 +131,6 @@
       );
   });
 
-  document.querySelector(`.show-all`).addEventListener("click", showAll);
+  const showAllButton = document.querySelector(`.show-all`)
+  if(showAllButton) showAllButton.addEventListener("click", showAll);
 </script>

layouts/partials/header.html

@@ -25,6 +25,7 @@
     <nav
       class="md:ml-auto flex flex-wrap items-center text-base justify-center"
     >
+      {{ if eq .Site.Params.hideAutoMenu false }}
       <a
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all"
         >All</a
@@ -34,6 +35,12 @@
         class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}"
         >{{.Title}}</a
       >
+      {{ end }}{{ end }}
+      {{ range .Site.Menus.main }}
+      <a
+      href="{{ .URL }}"
+      class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900"
+      >{{ .Name }}</a>
       {{ end }}
     </nav>
   </div>

theme.toml

@@ -2,7 +2,7 @@ name = "Showcase"
 license = "MIT"
 licenselink = "https://github.com/apvarun/showcase-hugo-theme/blob/master/LICENSE"
 description = "Minimal, one page, theme for showcasing your work"
-homepage = "https://showcase-hugo-theme.now.sh/"
+homepage = "https://github.com/apvarun/showcase-hugo-theme"
 tags = ["clean", "gallery", "minimal", "minimalist", "mobile", "one page", "personal", "responsive", "simple", "single page", "tailwind", "starter", "projects", "white" ]
 features = ["responsive", "portfolio", "gallery"]
 min_version = "0.41.0"