Blog List and Detail Updates (linkerd#1082)

* Update: blog list change sub heading * feat: blog list add pagination * update: blog detail adopter banner * feat: blog single add related blog posts * Style: refinements on Blog List page Signed-off-by: Christian Mejlak <[email protected]>
chetanpdeshmukh · May 21, 2021 · 4ce7521 · 4ce7521
1 parent 6ecbe9a
commit 4ce7521
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 35 deletions.
diff --git a/linkerd.io/assets/js/search.js b/linkerd.io/assets/js/search.js
@@ -13,7 +13,7 @@ function initSearchPage(dataUrl, tagFieldName) {
   // var filterList = document.getElementById("filterList");
   // var resetFiltersButton = document.getElementById("resetFilters");
 
-  var loadMoreButton = document.getElementById("loadMore");
+  var pagination = document.getElementById("pagination");
 
   var searchCancelationToken;
 
@@ -106,11 +106,6 @@ function initSearchPage(dataUrl, tagFieldName) {
       refreshSearch(search(value || "*"));
     });
 
-    loadMoreButton.addEventListener("click", function () {
-      searchItemsVisible += 6;
-      refreshSearch(search(searchInput.value || "*"));
-    });
-
     // resetFiltersButton.addEventListener("click", function () {
     //   selectedTags = [];
     //    refreshFilters();
@@ -119,21 +114,21 @@ function initSearchPage(dataUrl, tagFieldName) {
   }
 
   function resetSearchItemsVisible() {
-    searchItemsVisible = 6;
+    searchItemsVisible = 10;
   }
 
   function refreshSearch(results) {
-    loadMoreButton.style.display = "none";
+    pagination.style.display = "none";
     if (searchCancelationToken) {
       clearTimeout(searchCancelationToken);
     } else {
       setResultElementLoader();
     }
     searchCancelationToken = setTimeout(() => {
       if (results.length <= searchItemsVisible) {
-        loadMoreButton.style.display = "none";
+        pagination.style.display = "none";
       } else {
-        loadMoreButton.style.display = "";
+        pagination.style.display = "";
       }
       refreshSearchResult(results.slice(0, searchItemsVisible));
       searchCancelationToken = null;

diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss
@@ -312,11 +312,6 @@
       padding: 0;
 
       img {
-        -webkit-filter: grayscale(100%);
-        -moz-filter: grayscale(100%);
-        -o-filter: grayscale(100%);
-        -ms-filter: grayscale(100%);
-        filter: grayscale(100%);
         background: #f2f2f2;
       }
     }

diff --git a/linkerd.io/config.toml b/linkerd.io/config.toml
@@ -1,4 +1,4 @@
-Paginate = 10
+paginate = 10
 baseurl = "https://linkerd.io/"
 disableKinds = ["taxonomy", "taxonomyTerm"]
 enableRobotsTXT = true

diff --git a/linkerd.io/content/blog/introducing-fuzz-testing-to-linkerd.md b/linkerd.io/content/blog/introducing-fuzz-testing-to-linkerd.md
@@ -140,7 +140,7 @@ our rapidly-growing community! Linkerd is hosted on
 the [mailing lists](https://linkerd.io/2/get-involved/). Come and join the fun!
 
 (*Photo by [Prince Abid](https://unsplash.com/@princeabid708?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText") on [Unsplash](https://unsplash.com/s/photos/fuzz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).*)
-  
+
 ## Footnotes
 
 [^1]: The tests are focused on finding situations that cause the proxy to "panic", or intentionally crash—an easily-detectable situation that is the consequence of the proxy finding itself in a situation it can't handle. A fuzz test that causes the proxy to panic in response to strange input is a sure sign of a bug.
diff --git a/linkerd.io/layouts/alias.html b/linkerd.io/layouts/alias.html
diff --git a/linkerd.io/layouts/blog/list.html b/linkerd.io/layouts/blog/list.html
@@ -25,7 +25,7 @@ <h1>Blog</h1>
         <div class="has-background-grey-light is-paddingless featured-items-container">
           <div id="featuredItems">
             <div class="search-title is-uppercase has-text-centered">Featured</div>
-            <div class="columns container is-multiline is-variable blog-list-container">
+            <div class="columns container is-multiline is-variable blog-list-container pt-0">
               {{ range.Params.items }}
               {{ with $.Site.GetPage . }}
                 {{ .Scratch.Set "type" "Page" }}
@@ -38,15 +38,15 @@ <h1>Blog</h1>
           </div>
         </div>
         <div class="search-title is-uppercase has-text-centered" id="resultsHeader">
-          Recently Added
+          All Blog Posts
         </div>
-        <div class="columns container is-multiline is-variable blog-list-container" id="searchResult">
-          {{ range .Pages | first 6 }}
+        <div class="columns container is-multiline is-variable blog-list-container pt-0" id="searchResult">
+          {{ range .Paginator.Pages }}
             {{ partial "related-card.html" . }}
           {{ end }}
         </div>
-        <div class="is-uppercase has-text-weight-semibold has-text-centered is-size-6 blog-list-load-more">
-          <a id="loadMore" href="javascript:void(0)">See more</a>
+        <div id="pagination" class="container column">
+          {{ partial "pagination.html" . }}
         </div>
       </div>
     </div>

diff --git a/linkerd.io/layouts/blog/single.html b/linkerd.io/layouts/blog/single.html
@@ -39,7 +39,22 @@ <h1 class="title is-1 has-text-color">{{ .Title}}</h1>
       </div>
     </div>
   </div>
-  {{ partial "homepage/adopter-banner.html" .Site.Home }}
+  {{ partial "blog/adopter-banner.html" .Site.Home }}
+  <div class="search-title is-uppercase has-text-centered" id="resultsHeader">
+    Suggested Blog Posts
+  </div>
+  <div class="columns container is-multiline is-variable blog-list-container">
+    {{ $related := .Site.RegularPages.Related . | first 4 }}
+    {{ with $related }}
+    {{ range . }}
+      {{ partial "related-card.html" . }}
+    {{ end }}
+    {{ end }}
+  </div>
+
+
+
+
   {{ end }}
 
   {{ define "body-end" }}

diff --git a/linkerd.io/layouts/partials/blog/adopter-banner.html b/linkerd.io/layouts/partials/blog/adopter-banner.html
@@ -0,0 +1,13 @@
+<div class="wrapper body-header foundation-member has-background-navy-black">
+  <div class="columns container is-centered">
+    <div class="column is-half has-text-centered-mobile">
+      <h4 class="title is-size-4 has-text-white">Do you use Linkerd? Let us know and we'll send you some sweeet swag!</h4>
+    </div>
+    <div class="column is-narrow is-centered has-text-centered">
+      <a href="https://docs.google.com/forms/d/e/1FAIpQLSe69G-4GmhMb9nzBO9Du0582eJJMHAmK0BQi1F23X6htsieLQ/viewform" target="_blank" class="button is-primary is-large">
+        Let Us Know!
+      </a>
+    </div>
+  </div>
+</div>
+
diff --git a/linkerd.io/layouts/partials/pagination.html b/linkerd.io/layouts/partials/pagination.html
@@ -0,0 +1,106 @@
+<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+    <!--
+//
+//  PAGE NUMBERS
+//––––––––––––––––––––––––––––––––––––––––––––––––––
+-->
+{{ $paginator := .Paginator }}
+
+<!-- Number of links either side of the current page. -->
+{{ $adjacent_links := 2 }}
+
+<!-- $max_links = ($adjacent_links * 2) + 1 -->
+{{ $max_links := (add (mul $adjacent_links 2) 1) }}
+
+<!-- $lower_limit = $adjacent_links + 1 -->
+{{ $lower_limit := (add $adjacent_links 1) }}
+
+<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
+{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
+
+<!-- If there's more than one page. -->
+{{ if gt $paginator.TotalPages 1 }}
+
+    <!-- First page. -->
+    {{ if ne $paginator.PageNumber 1 }}
+    <a class="pagination-previous" href="{{ $paginator.First.URL }}">First</a>
+    {{ end }}
+    <!-- Previous page. -->
+    {{ if $paginator.HasPrev }}
+    <a class="pagination-previous" href="{{ $paginator.Prev.URL }}">Previous</a>
+    {{ end }}
+
+    <ul class="pagination-list">
+    <!-- Page numbers. -->
+    {{ range $paginator.Pagers }}
+
+      {{ $.Scratch.Set "page_number_flag" false }}
+
+
+      <!-- Advanced page numbers. -->
+      {{ if gt $paginator.TotalPages $max_links }}
+
+
+        <!-- Lower limit pages. -->
+        <!-- If the user is on a page which is in the lower limit.  -->
+        {{ if le $paginator.PageNumber $lower_limit }}
+
+          <!-- If the current loop page is less than max_links. -->
+          {{ if le .PageNumber $max_links }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+
+        <!-- Upper limit pages. -->
+        <!-- If the user is on a page which is in the upper limit. -->
+        {{ else if ge $paginator.PageNumber $upper_limit }}
+
+          <!-- If the current loop page is greater than total pages minus $max_links -->
+          {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+
+        <!-- Middle pages. -->
+        {{ else }}
+
+          {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+        {{ end }}
+
+
+      <!-- Simple page numbers. -->
+      {{ else }}
+
+        {{ $.Scratch.Set "page_number_flag" true }}
+
+      {{ end }}
+
+      <!-- Output page numbers. -->
+      {{ if eq ($.Scratch.Get "page_number_flag") true }}
+        <li>
+          <a href="{{ .URL }}" class="pagination-link {{ if eq . $paginator }} is-current{{ end }}">
+            {{ .PageNumber }}
+          </a>
+        </li>
+      {{ end }}
+
+    {{ end }}
+
+    </ul>
+    <!-- Next page. -->
+    {{ if $paginator.HasNext }}
+    <a class="pagination-next" href="{{ $paginator.Next.URL }}">Next</a>
+    {{ end }}
+
+    <!-- Last page. -->
+    {{ if ne $paginator.PageNumber $paginator.TotalPages }}
+    <a class="pagination-next" href="{{ $paginator.Last.URL }}">Last</a>
+    {{ end }}
+
+  <!-- .pagination -->
+{{ end }}
+</nav>
+
diff --git a/linkerd.io/themes/buoyant/assets/scss/styles-base.scss b/linkerd.io/themes/buoyant/assets/scss/styles-base.scss
@@ -435,7 +435,7 @@ body {
     background-color: rgb(70,125,189);
   }
   .content {
-    min-height: 100px;
+    min-height: 124px;
     margin-bottom: 0;
   }
   .card-footer {
@@ -477,6 +477,9 @@ body {
     .title {
       color: $deep-blue;
     }
+    figure {
+      filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
+    }
   }
   .level {
     margin-bottom: 0.1em;
@@ -1107,4 +1110,19 @@ body {
 
 .is-size-5.has-text-weight-bold {
   font-weight: 700 !important;
-}
+}
+
+.pagination {
+  padding: 1rem;
+}
+.pagination .pagination-link,
+.pagination .pagination-next,
+.pagination .pagination-previous {
+  color: $primary-bright-blue;
+  border: 1px solid $primary-bright-blue;
+}
+
+.pagination .pagination-link.is-current {
+  color: $white;
+  background-color: $primary-bright-blue;
+}
diff --git a/linkerd.io/themes/buoyant/layouts/partials/related-card.html b/linkerd.io/themes/buoyant/layouts/partials/related-card.html
@@ -3,13 +3,15 @@
     <div class="box">
       <article class="related-card media">
         <div class="media-left">
-          <figure class="image is-128x128 level-item">
-            {{ if .Params.thumbnail }}
-            <img {{ partial "src.html" (dict "img" .Params.thumbnail) | safeHTMLAttr }} alt="featured image" />
-            {{ else }}
-            <img src="/images/identity/svg/linkerd_primary_color_white.svg" alt="placeholder" />
-            {{ end }}
-          </figure>
+          <div style="background-image: url({{ .Params.thumbnail }}); background-size: cover; opacity: 0.8;">
+            <figure class="image is-128x128 level-item"  style="backdrop-filter: blur(10px);">
+              {{ if .Params.thumbnail }}
+              <img {{ partial "src.html" (dict "img" .Params.thumbnail) | safeHTMLAttr }} alt="featured image"  />
+              {{ else }}
+              <img src="/images/identity/svg/linkerd_primary_color_white.svg" alt="placeholder" />
+              {{ end }}
+            </figure>
+          </div>
         </div>
         <div class="media-content">
           <div class="content">
@@ -25,7 +27,7 @@
                 <span class="level-item">{{ .PublishDate.Format "Jan 2, 2006"}}</span>
               </div>
             </div>
-            <h3 class="title has-text-weight-semibold is-3 is-marginless">{{ .Params.title }}</h3>
+            <h3 class="title is-3 is-marginless">{{ truncate 50 " ..." .Params.title }}</h3>
           </div>
         </div>
       </article>