[v1.8] brand new archive and tag

kadifu · Sep 25, 2018 · ff66f4a · ff66f4a
1 parent db74e46
commit ff66f4a
Show file tree

Hide file tree

Showing 11 changed files with 264 additions and 148 deletions.
diff --git a/404.html b/404.html
@@ -9,7 +9,7 @@
 
 
 <!-- Page Header -->
-{% include intro-header.html type="page" %}
+{% include intro-header.html type="page" short='true' %}
 
 <script>
 	document.body.classList.add('page-fullscreen');

diff --git a/_config.yml b/_config.yml
@@ -91,7 +91,7 @@ featured-condition-size: 1              # A tag will be featured if the size of
 
 # Progressive Web Apps
 chrome-tab-theme-color: "#000000"
-service-worker: false
+service-worker: true
 
 
 

diff --git a/_includes/featured-tags.html b/_includes/featured-tags.html
@@ -7,13 +7,13 @@
     {% if include.bottom %}
         <hr class="hidden-sm hidden-xs">
     {% endif %}
-    <h5><a href="{{'/tags/' | prepend: site.baseurl }}">FEATURED TAGS</a></h5>
+    <h5><a href="{{'/archive/' | prepend: site.baseurl }}">FEATURED TAGS</a></h5>
     <div class="tags">
         {% capture tags %}
         {% for tag in site.tags %}
             {% if tag[1].size > site.featured-condition-size %}
                 <a data-sort="{{ site.posts.size | minus: tag[1].size | prepend: '0000' | slice: -4, 4 }}" 
-                    href="{{ site.baseurl }}/tags/#{{ tag[0] }}"
+                    href="{{ site.baseurl }}/archive/?tag={{ tag[0] | url_encode }}"
                     title="{{ tag[0] }}"
                     rel="{{ tag[1].size }}">{{ tag[0] }}
                 </a>

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -69,19 +69,20 @@
 -->
 
 
+
+{% if page.title == 'Archive' %}
 <!-- jquery.tagcloud.js -->
 <script>
-    // only load tagcloud.js in tag.html
-    if($('#tag_cloud').length !== 0){
-        async('{{ "/js/jquery.tagcloud.js" | prepend: site.baseurl }}',function(){
-            $.fn.tagcloud.defaults = {
-                //size: {start: 1, end: 1, unit: 'em'},
-                color: {start: '#bbbbee', end: '#0085a1'},
-            };
-            $('#tag_cloud a').tagcloud();
-        })
-    }
+    async('{{ "/js/jquery.tagcloud.js" | prepend: site.baseurl }}',function(){
+        $.fn.tagcloud.defaults = {
+            //size: {start: 1, end: 1, unit: 'em'},
+            color: {start: '#bbbbee', end: '#2f93b4'},
+        };
+        $('#tag_cloud a').tagcloud();
+    })
 </script>
+<script src='{{ "/js/archive.js " | prepend: site.baseurl }}'></script>
+{% endif %}
 
 <!--fastClick.js -->
 <script>

diff --git a/_includes/intro-header.html b/_includes/intro-header.html
@@ -27,7 +27,7 @@
                 <div class="post-heading">
                     <div class="tags">
                         {% for tag in page.tags %}
-                        <a class="tag" href="{{ site.baseurl }}/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
+                        <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
                         {% endfor %}
                     </div>
                     <h1>{{ page.title }}</h1>
@@ -73,7 +73,7 @@ <h2 class="subheading">{{ page.subtitle }}</h2>
                 <div class="post-heading">
                     <div class="tags">
                         {% for tag in page.tags %}
-                        <a class="tag" href="{{ site.baseurl }}/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
+                        <a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
                         {% endfor %}
                     </div>
                     <h1>{{ page.title }}</h1>

diff --git a/archive.html b/archive.html
@@ -5,66 +5,81 @@
 header-img: "img/tag-bg.jpg"
 ---
 
+<!-- 
+Credits: this page shamelessly borrowed a lot from:
+https://github.com/kitian616/jekyll-TeXt-theme
+-->
 <!-- Page Header -->
 {% include intro-header.html type='page' short=true %}
 
 <!-- Main Content -->
 <div class="container">
 	<div class="row">
 		<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-            <!--<blockquote class="tag-comments">
-				TODO: Using `data-tag` to make posts filter-able at runtime
-            </blockquote>-->
+			<!-- Tags (as filter) -->
+			<div id='tag_cloud' class="tags tags-sup js-tags">
+				<a class="tag-button--all" data-encode="">
+					Show All
+					<sup>{{site.posts.size}}</sup>
+				</a>
+
+				{% capture tags %}
+				{% for tag in site.tags %}
+				<a data-sort="{{ site.posts.size | minus: tag[1].size | prepend: '0000' | slice: -4, 4 }}"
+					data-encode="{{ tag[0] | strip | url_encode }}"
+					class="tag-button"
+					title="{{ tag[0] }}" rel="{{ tag[1].size }}">
+					{{ tag[0] }}
+					<sup>{{tag[1].size}}</sup>
+				</a>
+				{% endfor %}
+				{% endcapture %}
+				{{ tags | split:'</a>' | sort | join:'</a>' }}
+			</div>
 
             <!-- Article List -->
-			<div class="mini-post-list">
-			{% for post in site.posts  %}
-				{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-				{% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
-				{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-				{% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
-
-				{% if forloop.first %}
-			  	<span class="fa   listing-seperator" id="{{this_year}}-{{this_month}}">
-                    <span class="tag-text">{{this_year}} {{this_month}}</span>
-                </span>
-				{% endif %}
-
-				<!-- <li>
-					<span>{{ post.date | date: "%F" }}</span> 
-					<a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a>
-				</li> -->
-				<div class="post-preview">
-				    <a href="{{ post.url | prepend: site.baseurl }}">
+			<div class="mini-post-list js-result d-none">
+			{%- assign _sorted_list = site.posts -%}
+			{%- assign _sorted_list = _sorted_list | sort: 'date' -%}
+			{%- assign _sorted_list = _sorted_list | reverse -%}
+
+
+			{%- for _article in _sorted_list -%}
+				{%- assign _tags = '' -%}
+				{%- for _tag in _article.tags -%}
+					{%- assign _tag_encode = _tag | strip | url_encode -%}
+					{%- if forloop.last -%}
+						{%- assign _tags = _tags | append: _tag_encode -%}
+					{%- else -%}
+						{%- assign _tags = _tags | append: _tag_encode | append: ',' -%}
+					{%- endif -%}
+				{%- endfor -%}
+
+			{% comment %} group by year {% endcomment %}
+			{%- assign _currentdate = _article.date | date: '%Y' -%}
+			{%- if _currentdate != _date -%}
+				{%- unless forloop.first -%}</section>{%- endunless -%}
+				<section>
+				<span class="fa listing-seperator">
+					<span class="tag-text">{{ _currentdate }}</span>
+				</span>
+				{%- assign _date = _currentdate -%}
+			{%- endif -%}
+
+				<div class="post-preview item" data-tags="{{ _tags }}">
+				    <a href="{{ _article.url | prepend: site.baseurl }}">
 				        <h2 class="post-title">
-                            {{ post.title }}
+                            {{ _article.title }}
 				        </h2>
-				        {% if post.subtitle %}
+				        {% if _article.subtitle %}
 				        <h3 class="post-subtitle">
-				            {{ post.subtitle }}
+				            {{ _article.subtitle }}
 				        </h3>
 				        {% endif %}
 				    </a>
+					<hr>
 				</div>
-				<hr>
-
-				{% if forloop.last %}
-				{% else %}
-				{% if this_year != next_year %}
-				  	<span class="fa   listing-seperator" id="{{this_year}}-{{this_month}}">
-						<span class="tag-text">{{this_year}} {{this_month}}</span>
-					</span>
-				{% else %}    
-					{% if this_month != next_month %}
-				  	<span class="fa   listing-seperator" id="{{this_year}}-{{this_month}}">
-						<span class="tag-text">{{this_year}} {{this_month}}</span>
-					</span>
-					{% endif %}
-					{% endif %}
-				{% endif %}
-			{% endfor%}
-			</div>
-
+			{% endfor %}
 		</div>
 	</div>
 </div>
diff --git a/css/hux-blog.css b/css/hux-blog.css
@@ -1,8 +1,3 @@
-/*!
- * Hux Blog v1.7.0 (http://huxpro.github.io)
- * Copyright 2018 Hux <[email protected]>
- */
-
 @media (min-width: 1200px) {
   .post-container,
   .sidebar-container {
@@ -1254,6 +1249,9 @@ img::-moz-selection {
   background: transparent;
 }
 /* Hux add tags support */
+.d-none {
+  display: none !important;
+}
 .tags {
   margin-bottom: -5px;
 }
@@ -1273,6 +1271,7 @@ img::-moz-selection {
   text-decoration: none;
   margin: 0 1px;
   margin-bottom: 6px;
+  cursor: pointer;
 }
 .tags a > sup,
 .tags .tag > sup {
@@ -1307,19 +1306,37 @@ img::-moz-selection {
 }
 #tag_cloud a,
 #tag_cloud .tag {
+  transition-property: all;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
   font-size: 14px;
   border: none;
   line-height: 28px;
   margin: 0 2px;
   margin-bottom: 8px;
-  background: #d6d6d6;
+  background: #f3f5f5;
 }
 #tag_cloud a:hover,
 #tag_cloud .tag:hover,
 #tag_cloud a:active,
 #tag_cloud .tag:active {
   background-color: #0085a1 !important;
 }
+#tag_cloud a.focus,
+#tag_cloud .tag.focus {
+  box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.239216) 0 1px 4px;
+}
+#tag_cloud a.tag-button--all,
+#tag_cloud .tag.tag-button--all {
+  font-weight: 700;
+  color: #0085a1!important;
+}
+#tag_cloud a.tag-button--all:hover,
+#tag_cloud .tag.tag-button--all:hover,
+#tag_cloud a.tag-button--all:active,
+#tag_cloud .tag.tag-button--all:active {
+  background-color: #e4e4e4 !important;
+}
 @media only screen and (min-width: 768px) {
   #tag_cloud {
     margin-bottom: 25px;
@@ -1370,7 +1387,7 @@ img::-moz-selection {
   margin-top: 20px;
 }
 .mini-post-list .post-preview > a .post-subtitle {
-  font-size: 12px;
+  font-size: 13px;
 }
 .mini-post-list .post-preview > .post-meta {
   position: absolute;

diff --git a/css/hux-blog.min.css b/css/hux-blog.min.css