handling tags on blog pages

apache · Oct 22, 2019 · 915ec3a · 915ec3a
1 parent 4d05821
commit 915ec3a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 6 deletions.
diff --git a/landing-pages/site/assets/scss/_blog-page.scss b/landing-pages/site/assets/scss/_blog-page.scss
@@ -16,15 +16,34 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 @import "colors";
 
 .tag {
   @extend .bodytext__medium--cerulean-blue;
   background-color: #d9ebfc; // cerulean-blue + opacity 0.15
   padding: 1px 30px;
-  margin-right: 10px;
+  margin-right: 14px;
   border-radius: 5px;
+  transition: .2s;
+
+  &.active, &:hover {
+    background-color: map-get($colors, cerulean-blue);
+    color: map-get($colors, white);
+  }
+}
+
+.all-tags-container {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0;
+}
+
+.new-entry {
+  margin: 30px 0 20px;
+  &--link {
+    @extend .bodytext__medium--cerulean-blue;
+    font-weight: 500;
+  }
 }
 
 .blogpost-content {

diff --git a/landing-pages/site/config.toml b/landing-pages/site/config.toml
@@ -168,3 +168,6 @@ toLower = false
   [[related.indices]]
   name = "author"
   weight = 50.0
+
+[permalinks]
+tags = "/blog/tags/:slug/"
diff --git a/landing-pages/site/layouts/blog/content.html b/landing-pages/site/layouts/blog/content.html
@@ -19,8 +19,10 @@
 
 <div class="blogpost-content--header-wrapper">
     <div class="blogpost-content__metadata--container">
-        {{ range .Params.tags }}
-            <a class="tag" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        {{ range $tag := .Params.tags }}
+            {{ with $.Site.GetPage (printf "/tags/%s" $tag) }}
+                <a class="tag" href="{{ .Permalink }}">{{ humanize $tag }}</a>
+            {{ end }}
         {{ end }}
         <span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
     </div>

diff --git a/landing-pages/site/layouts/blog/list.html b/landing-pages/site/layouts/blog/list.html
@@ -20,6 +20,17 @@
 {{ define "main" }}
     <div>
         <h2 class="page-header">Blog</h2>
+        <div class="all-tags-container">
+            <a class="tag active" href="/blog/">All</a>
+            {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+                {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
+                    <a class="tag" href="{{ .Permalink }}">{{ humanize $name }}</a>
+                {{ end }}
+            {{ end }}
+        </div>
+        <div class="new-entry">
+            <a class="new-entry--link" href="https://github.com">ADD YOUR ENTRY</a>
+        </div>
         <div class="list-items">
             {{ range .Pages }}
                 <div class="list-item list-item--wide">

diff --git a/landing-pages/site/layouts/partials/boxes/blogpost.html b/landing-pages/site/layouts/partials/boxes/blogpost.html
@@ -19,8 +19,10 @@
 
 <div class="box-event__blogpost">
     <div class="box-event__blogpost--metadata">
-        {{ range .Params.tags }}
-            <a class="tag" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        {{ range $tag := .Params.tags }}
+            {{ with $.Site.GetPage (printf "/tags/%s" $tag) }}
+                <a class="tag" href="{{ .Permalink }}">{{ humanize $tag }}</a>
+            {{ end }}
         {{ end }}
         <span class="bodytext__medium--brownish-grey">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
     </div>

diff --git a/landing-pages/site/layouts/taxonomy/tag.html b/landing-pages/site/layouts/taxonomy/tag.html
@@ -18,8 +18,18 @@
 */}}
 
 {{ define "main" }}
+    {{ $pageUrl := .Permalink }}
     <div>
         <h2 class="page-header">Blog</h2>
+        <div class="d-flex">
+            <a class="tag" href="/blog/">All</a>
+            {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+                {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
+                    <a class="tag {{if eq .Permalink $pageUrl}}active{{ end }}"
+                       href="{{ .Permalink }}">{{ humanize $name }}</a>
+                {{ end }}
+            {{ end }}
+        </div>
         <div class="list-items">
             {{ range .Pages }}
                 <div class="list-item list-item--wide">