add tags and categories page

Author: dev-jonghoonpark

_data/navigation.yml

@@ -1,6 +1,10 @@
 links:
   - title: Posts
     url: /
+  - title: Categories
+    url: /categories
+  - title: Tags
+    url: /tags
   - title: Search
     url: /search
   - title: Linkedin

_layouts/categories.html

@@ -0,0 +1,35 @@
+---
+layout: default
+title: Categories
+---
+
+<style>
+	.categories ul {
+		list-style: none;
+	}
+
+	.categories li {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+	}
+
+	.categories li a {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-decoration: none;
+	}
+</style>
+
+<section class="categories">
+	<h1>{{ page.title }}</h1>
+  <ul>
+    {% for category in site.categories %}
+    <li>
+      <li><a href="/category/{{ category | first }}/">{{ category[0] }} ({{ category | last | size }})</a></li>
+    </li>
+    {% endfor %}
+  </ul>
+</section>

_layouts/search.html

@@ -4,12 +4,11 @@
 
 <section class="posts">
 <h1>Tag #{{page.tag}}</h1>
-    <ul>
-      {% for post in site.posts %}
-      {% if post.tags contains page.tag %}
-      <li><a class="post" href="{{ post.url }}">{{ post.title }}</a><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%m-%d-%Y" }}</time></li>
-      {% endif %}
-      {% endfor %}
-    </ul>
-	
-</section>
+  <ul>
+    {% for post in site.posts %}
+    {% if post.tags contains page.tag %}
+    <li><a class="post" href="{{ post.url }}">{{ post.title }}</a><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%m-%d-%Y" }}</time></li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</section>

_layouts/tag.html

@@ -3,13 +3,31 @@
 title: Tags
 ---
 
-<section class="posts">
+<style>
+	.tags ul {
+		list-style: none;
+	}
+
+	.tags li {
+		margin-bottom: 0.5rem;
+		margin-right: 0.25rem;
+    display: inline-block;
+	}
+
+	.tags li a {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-decoration: none;
+	}
+</style>
+
+<section class="tags">
 	<h1>{{ page.title }}</h1>
-{% assign tags = site.tags | sort %}
-<ul>
-{% for tag in tags %}
- <li><a href="/tag/{{ tag | first | slugify }}/">{{ tag[0] | replace:'-', ' ' }} ({{ tag | last | size }}){% unless forloop.last %}, {% endunless %}</a></li>
-{% endfor %}
-</ul>
-
-</section>
+	{% assign tags = site.tags | sort %}
+	<ul>
+		{% for tag in tags %}
+		<li><a href="/tag/{{ tag | first }}/">{{ tag[0] }} ({{ tag | last | size }}){% unless forloop.last %}, {% endunless %}</a></li>
+		{% endfor %}
+	</ul>
+</section>

_layouts/tags.html

@@ -0,0 +1,4 @@
+---
+layout: categories
+title: Categories
+---

_pages/categories.md

@@ -0,0 +1,4 @@
+---
+layout: tags
+title: Tags
+---

_pages/tags.md

@@ -226,7 +226,7 @@ h1 {
 @media screen and (max-width: 45rem) {
   header li {
     display: inline;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
   }
   .logo {
     padding-bottom: 1rem;