Merge pull request #12 from wiremock/featured-tab

Add Featured page + Improve Categories listing

Author: oleg-nenashev

content/how-to-contribute.md

@@ -1,7 +1,14 @@
 ---
-title: How to contribute
+title: Contribute!
 description: 
 heading: How to edit and add new templates
+description: Add new templates
+# We add the page to the listing for better UX
+tags:
+- all
+- featured
+tags_weight: 999
+logoPath: "/images/add.svg"
 ---
 
 ## If you would like to contribute

data/navigation.yml

@@ -0,0 +1,41 @@
+# Shows the categories order for the navigation bar
+tags:
+- id: featured
+- id: all
+- id: wiremock
+  display: "WireMock"
+- id: analytics
+- id: backend
+- id: cloud
+- id: collaboration
+- id: customer_relation
+- id: developer_tools
+- id: ecommerce
+  display: "E-Commerce"
+- id: education
+- id: email
+- id: enterprise
+- id: entertainment
+- id: financial
+- id: forms
+- id: hosting
+- id: iot
+  display: "Internet of Things"
+- id: location
+- id: machine_learning
+- id: marketing
+- id: media
+- id: messaging
+- id: monitoring
+- id: open_data
+  display: "Open Data"
+- id: payment
+- id: search
+- id: security
+- id: social
+- id: storage
+- id: support
+- id: telecom
+- id: text
+- id: tools
+- id: transport

i18n/en.yaml

@@ -2,6 +2,8 @@ categories:
   other: "Categories"
 all:
   other: "All"
+featured:
+  other: "Featured"
 back:
   other: "Back"
 description:
@@ -10,5 +12,3 @@ use_api:
   other: "Use this API in your project"
 how_use:
   other: "How to use ?"
-
-  

layouts/index.html

@@ -7,12 +7,14 @@
 
   <section class="px-6 sm:px-10 pt-14 lg:pt-24">
     <div class="mx-auto max-w-md sm:max-w-3xl lg:max-w-7xl">
+      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-sky-990">Featured templates</h1>
+      Select a category below to search for more templates
       <div class="flex flex-col lg:flex-row gap-8 lg:gap-10 mt-6">
         <div>
           {{ partial "nav-tags.html" . }}
         </div>
         <div class="flex-1">
-          {{ $paginator := .Paginate (where site.RegularPages "Type" "in" site.Params.mainSections) }}
+          {{ $paginator := .Paginate (where site.RegularPages "Params.tags" "intersect" (slice "featured") ) }}
           <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             {{ range $paginator.Pages }}
               {{ partial "card-api.html" . }}

layouts/partials/card-api.html

@@ -12,6 +12,13 @@
       {{ end }}
     </div>
   {{ end }}
+  {{ if .Params.logoPath }}
+  <div class="relative flex justify-center items-center mb-5">
+    <div class="svg-logo border border-slate-200 p-2 rounded justify-center">
+      <img src="{{ .Params.logoPath | relLangURL }}" width="82px" height="82px">
+    </div>
+  </div>
+  {{ end }}
   <div class="relative text-center">
     <h3 class="text-xl font-medium break-words">{{ .Title }}</h3>
     {{ with .Params.description }}

layouts/partials/nav-tags.html

@@ -29,17 +29,29 @@
     x-transition:leave-end="opacity-0 translate-y-1"
     @click.outside="dropdown = false"
    class="absolute z-10 top-12 min-w-[16rem] bg-white rounded-md shadow-xl hidden py-2.5">
-   <a class="{{ if .IsHome }}text-sky-600{{ else }}text-slate-500{{ end }} hover:text-sky-600 block px-5 py-2" href="{{ "/" | relLangURL }}">{{ i18n "all" }}</a>
-   {{ range site.Taxonomies.tags }}
+   {{ range $.Site.Data.navigation.tags }}
+    {{ $tagId := . }}
+    {{ $tagDisplay := .display }}
+    {{ range $taxonomyname, $taxonomy := $.Site.Taxonomies.tags }}
+      {{ if eq $taxonomyname $tagId }}
+      {{ $tagDisplay := default (strings.FirstUpper (replace .Page.Title "_" " ")) $tagDisplay }}
       <a class="{{ if eq .Page.Permalink $.Permalink }}text-sky-600{{ else }}text-slate-500{{ end }} hover:text-sky-600 block px-5 py-2" href="{{ .Page.Permalink }}">{{ strings.FirstUpper (replace .Page.Title "_" " ") }}</a>
+      {{ end }}
     {{ end }}
+  {{ end }}
   </div>
 </div>
 <div class="hidden lg:flex -mt-2">
   <div class="flex flex-col">
-    <a class="{{ if .IsHome }}text-sky-600 underline underline-offset-4 decoration-sky-600{{ else }}text-slate-500{{ end }} py-1.5 text-lg hover:text-sky-600" href="{{ "/" | relLangURL }}">{{ i18n "all" }}</a>
-    {{ range site.Taxonomies.tags }}
-      <a class="{{ if eq .Page.Permalink $.Permalink }}text-sky-600 underline underline-offset-4 decoration-sky-600{{ else }}text-slate-500{{ end }} py-1.5 text-lg hover:text-sky-600 whitespace-nowrap" href="{{ .Page.Permalink }}">{{ strings.FirstUpper (replace .Page.Title "_" " ") }}</a>
+    {{ range $.Site.Data.navigation.tags }}
+      {{ $tagId := .id }}
+      {{ $tagDisplay := .display }}
+      {{ range $taxonomyname, $taxonomy := $.Site.Taxonomies.tags }}
+        {{ if eq $taxonomyname $tagId }}
+          {{ $tagDisplay := default (strings.FirstUpper (replace .Page.Title "_" " ")) $tagDisplay }}
+          <a class="{{ if eq .Page.Permalink $.Permalink }}text-sky-600 underline underline-offset-4 decoration-sky-600{{ else }}text-slate-500{{ end }} py-1.5 text-lg hover:text-sky-600 whitespace-nowrap" href="{{ .Page.Permalink }}">{{ $tagDisplay }}</a>
+        {{ end }}
+      {{ end }}
     {{ end }}
   </div>
 </div>

layouts/taxonomy/tag.html

@@ -8,8 +8,15 @@ <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-sky-990">{{ strings.F
         </div>
         <div class="flex-1">
           <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            {{ range .Paginator.Pages }}
-              {{ partial "card-api.html" . }}
+            {{ if in .Permalink "/all" }}
+              {{ $allTemplates := .Paginate ( where site.RegularPages "Params.stubs" "!=" nil ) }}
+              {{ range $allTemplates.Pages }}
+                {{ partial "card-api.html" . }}
+              {{ end }}
+            {{ else }}
+              {{ range .Paginator.Pages }}
+                {{ partial "card-api.html" . }}
+              {{ end }}
             {{ end }}
           </div>
           <div class="mt-10">