Ux for tags

_includes/indexpage_item.html

@@ -2,9 +2,9 @@
 {% assign button_class = "card-link appear-up link-no-style link-article mdl-button mdl-js-button mdl-js-ripple-effect" %}
 
 {% if article.link %}
-  <a href="{{ article.link }}" class="{{ button_class }}" target="_blank" rel="noopener">
+  <a href="{{ article.link }}" class="{{ button_class }}" target="_blank" rel="noopener" style="width: 100%;">
 {% else %}
-  <a href="{{ article.url }}" class="{{ button_class }}">
+  <a href="{{ article.url }}" class="{{ button_class }}" style="width: 100%;">
 {% endif %}
 
 {% comment %} Used only for random image placer {% endcomment %}

_includes/navbar-white.html

@@ -36,6 +36,7 @@
       <div class="menu-items">
         <ul>
           <li><a href="/">Home</a></li>
+          <li><a href="/digest">Digests</a></li>
           <li><a href="/archives">Archives</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/contact-us">Contact us</a></li>

_includes/navbar.html

@@ -22,6 +22,7 @@
       <div class="menu-items">
         <ul>
           <li><a href="/">Home</a></li>
+          <li><a href="/digest">Digests</a></li>
           <li><a href="/archives">Archives</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/contact-us">Contact us</a></li>

_includes/tag.html

@@ -1,4 +1,4 @@
 {% include tag_format.html %}
 <div class="tags" style="z-index:1000; position:relative">
-<div class="tag-clickable hoverable-primary" tag-url="{{ site.url }}/tags/?tag={{ tag}}">{{ tag }}</div>
+<div class="tag-clickable hoverable-primary" tag-url="{{ site.url }}/archives/?tag={{ tag}}">{{ tag }}</div>
 </div>

archives/index.html

@@ -11,45 +11,227 @@
 # Should be an YAML Array
 stylesheets:
   - /assets/stylesheets/subscribe-form
-  - /assets/stylesheets/gsc
+  - /assets/stylesheets/flickity
 
 # Extra javascript file(s)
-# js:
+js:
+  - /assets/javascript/flickity.pkgd.min.js
 ---
-{% assign articles = site.posts | sort: 'date' | reverse %}
 
 <div class="floaters">
   <h5 class="left">
-    Archived Posts
+    Archives
   </h5>
 
   <div class="right">
       <div style="height:60px">
-        <div id="observeSearch" style="width:100%;min-width:300px">
-          <div class="gcse-search"></div>
-        </div>
+          <div class="search-tags">
+            <form>
+              <input type="text" placeholder="Jump to Tag" name="tag" id="tagSearchInput">
+            </form>
+          </div>
       </div>
   </div>
 </div>
 
+{% assign articles = site.posts %}
+{% assign allTags = '' %}
+{% assign allURL = '' %}
+
+{% for article in articles %}
+  {% assign articleTitle = article.title | replace: "\n", "" | replace: "<%>", "" %}
+
+  {% include tag_format.html %}
+  {% assign downcased_tag = tag | downcase %}
+  {% assign allTags = allTags | append: "<%>" | append: downcased_tag | append: "<%>" | append: article.url | append: "<%>" %}
+  {% assign allTags = allTags | append: articleTitle | append: "<%>" | append: article.date | append: "<%>" | append: article.preview_image | append: "<%>" | append: article.preview_image_link | append: "\n" %}
+{% endfor %}
+
+{% assign allURL = allURL | downcase %}
+{% assign sortedTags = allTags | split: "\n" | uniq %}
+
+{% assign last_tag = "" %}
+
 <div class="page-content">
-  <div class="mt-5rem"></div>
-
-  <h4 class="mb-4rem ta-center">
-    {% if articles.size > 1 %}
-      {{ articles.last.date | date: '%b %Y' }} - {{ articles.first.date | date: '%b %Y' }}
-    {% else %}
-      {{ articles.last.date | date: '%b %Y' }}
-    {% endif %}
-  </h4>
-
-  <div class="grid-responsive-max-3x3">
-    {% for article in articles %}
-      {% if article.digest %}
-        {% include indexpage_item.html %}
-      {% endif %}
+  <tag><div>
+    {% for items in sortedTags %}
+        {% assign articles_flag = site.posts %}
+        {% assign tag_url = items | split: "<%>" | shift %}
+
+        {% assign tagDowncased = tag_url[0] %}
+        {% assign tag = tagDowncased | capitalize %}
+        {% assign article_url = tag_url[1] %}
+        {% assign article_title = tag_url[2] %}
+        {% assign article_date = tag_url[3] | date: "%Y-%m-%d" %}
+        {% assign article_image = tag_url[4] %}
+        {% assign article_image_link = tag_url[5] %}
+        {% assign article = articles_flag | find: "title", article_title %}
+
+        {% comment %} If last tag continues, don't show a new heading {% endcomment %}
+
+        {% if last_tag != tag %}
+          {% assign last_tag = tag %}
+          </div></tag>
+          <tag class="tag-link" tagname="{{ tagDowncased }}">
+          <a class="link" href="#{{ tagDowncased }}" id="{{ tagDowncased }}" class=""><h4 class="mt-4rem mb-1rem"># {{ tag }}</h4></a>
+          <div class="js-flickity gallery" id="{{ tagDowncased }}" Flickity data-flickity='{ "cellAlign": "left", "pageDots": "false", "imagesLoaded": true }'>
+        {% endif %}
+        <div class="archive-div">
+          {% include indexpage_item.html %}
+        </div>
+
     {% endfor %}
-  </div>
 </div>
+</div>
+
+<style>
+  .gallery {
+    background-color: transparent ;
+  }
+
+  .gallery-cell {
+    width: 160px;
+    height: 210px;
+    margin-right: 10px;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  a.link {
+    text-decoration: none;
+  }
+
+  ol.flickity-page-dots {
+    display: none;
+  }
+
+  .card-images {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    user-select: none;
+  }
+
+  .overflow-ellipsis {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: absolute;
+    z-index: 1;
+    color: var(--text-dark);
+  }
+
+.search-tags::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: var(--primary-color);
+    transform: scaleX(0);
+    transform-origin: 0;
+    transition: var(--default-transition-time);
+}
+
+.search-tags input:hover, .search-tags input:focus, .search-tags input:active {
+  outline: none !important;
+  border: none ;
+}
+
+.search-tags:hover::after, .search-tags:focus::after, .search-tags:active::after {
+  transform: scaleX(1);
+}
+
+.search-tags {
+  padding-right: 0 !important;
+}
+
+.search-tags input {
+  transition: var(--default-transition-time);
+  border: none !important;
+   /* 1px solid var(--primary-color); */
+  position: relative;
+  padding-left: 20px !important;
+}
+
+.search-tags input::-moz-focus-inner {
+  outline: none !important;
+}
+
+.gsc-search-button {
+  position: relative;
+  padding: 0 !important;
+  z-index: 1;
+  display: none;
+}
+
+.search-tags {
+  position: relative;
+}
+
+.search-tags::before {
+    content: url("/assets/images/icons/search.svg");
+    position: absolute;
+    top: 55%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.gsc-search-button-v2 {
+  background-color: transparent !important;
+}
+
+#observeSearch > div {
+  margin: 0;
+  padding: 0;
+}
+
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    var flkty = new Flickity('.js-flickity', {
+      cellAlign: 'left',
+      groupCells: true,
+      imagesLoaded: true,
+      percentPosition: false,
+      contain: true,
+      pageDots: false
+    })
+
+    const query = window.location.search.substr(1)
+    const tagInput = document.getElementById('tagSearchInput')
+
+    if (query) {
+      const tag_query = query.split('=')
+
+      const tag = tag_query[0]
+      let main_query = tag_query[1]
+
+      if (main_query) main_query = main_query.toLowerCase()
+
+      if(tagInput) tagInput.setAttribute('value', main_query)
+
+      // No tags banner - hide by default. Show when no tags match user search
+      const noTagsBanner = document.querySelector('#noTagFoundBanner')
+      if (noTagsBanner) noTagsBanner.style.display = 'none'
 
-<script async src="https://cse.google.com/cse.js?cx=f8fb562776e23cc4e"></script>
+      if(tag == 'tag' && main_query) {
+        /* code for search through query */
+          element = document.getElementById(main_query)
+          if(element) {
+            const cssNavbar = document.querySelector('.css-navbar')
+            const navbarHeight = cssNavbar ? cssNavbar.style.height : 0
+            window.scrollTo(0, element.offsetTop - navbarHeight - 8)
+          } else {
+            if (noTagsBanner) noTagsBanner.style.display = 'block'
+          }
+      }
+    }
+  })
+</script>

assets/_sass/media_queries.scss

@@ -9,6 +9,10 @@
 	.grid-responsive-max-3x3 {
 		grid-template-columns: 1fr 1fr !important;
 	}
+
+  .archive-div {
+    width: 50%;
+  }
 
   .card-link {
     max-width: 466px;
@@ -31,11 +35,15 @@
 		grid-template-columns: auto !important;
 	}
 
+  .archive-div {
+    width: 100%;
+  }
+
   .card-link {
     max-width: none;
   }
 
-  .card {
+  .grid-responsive-max-3x3 .card {
     width: 100% !important;
     box-shadow: none !important;
     max-width: none;
@@ -51,6 +59,22 @@
     }
   }
 
+  .archive-div .card {
+    width: 100% !important;
+    box-shadow: none !important;
+    max-width: none;
+    box-shadow: none;
+    height: 488px !important;
+
+    .preview {
+      height: 100% !important;
+    }
+
+    .page-content-body {
+      height: 100% !important;
+    }
+  }
+
 
   .submit-form-notice {
     margin-bottom: 2rem;

assets/stylesheets/main.scss

@@ -419,6 +419,10 @@ pre {
   }
 }
 
+.archive-div {
+  padding: 0.85rem;
+}
+
 .card-link, .card-div {
   .submit-form-notice {
     margin-bottom: 2rem;