Add support for archive pages

README.md

@@ -50,6 +50,16 @@ plainwhite:
     twitter: thelehhman
     github: thelehhman
     linkedIn: in/thelehhman # format: locale/username
+    rss: rss
+```
+
+** To enable RSS feed **
+Make sure that your projects Gemfile includes:
+
+```
+group :jekyll_plugins do
+  gem "jekyll-feed"
+end
 ```
 
 **Updating Placeholder Image**
@@ -99,16 +109,65 @@ show_excerpts: true
 
 **Navigation**
 
-Navigation can be enabled by adding the following line to your `_config.yml`
+Navigation can be enabled by adding the following line to your `_config.yml`:
+
+```yaml
+plainwhite:
+  navigation:
+    - title: My Work
+      url: "/my-work"
+    - title: Resume
+      url: "/resume"
+```
+
+**Multiline tagline**
+
+Tagline can be multiline in this way
+
+```yaml
+plainwhite:
+  tagline: |
+  First Line.
+
+  Second Line.
+
+  Third Line.
+```
+
+**Archives**
+
+Archives can be enabled by adding the following line to enable the plugin in `_config.yml`:
 
 ```yaml
-navigation:
-  - title: My Work
-    url: "/my-work"
-  - title: Resume
-    url: "/resume"
+plugins:
+  - jekyll-archives
 ```
 
+To customize the config and fully enable, you need to add the following lines to your `_config.yml`:
+
+```yaml
+jekyll-archives:
+  enabled: all
+  layout: archive
+  permalinks:
+    year: "/:year/"
+    month: "/:year/:month/"
+    day: "/:year/:month/:day/"
+    tag: "/tag/:name/"
+    category: "/category/:name/"
+```
+
+To read more information on how to customize and enable/disable archive types, SEE: https://github.com/jekyll/jekyll-archives.
+
+In order to add support for the category archive type, you must create a `category.html` in your project root, and add this content:
+
+```yaml
+---
+layout: categories
+permalink: /categories/
+title: Categories
+---
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/thelehhman/plainwhite-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

_config.yml

@@ -20,9 +20,9 @@ plainwhite:
   # generate social links in footer
   social_links:
     twitter: thelehhman
-    github:  thelehhman
+    github: thelehhman
     linkedIn: in/thelehhman
-    rss: rss
+    # rss: rss
     # dribbble: jekyll
     # facebook: jekyll
     # flickr:   jekyll
@@ -35,7 +35,6 @@ plainwhite:
     # telegram: jekyll
     # googleplus: +jekyll
     # microdotblog: jekyll
-
     # Mastodon instances
     # mastodon:
     # - username: jekyll
@@ -53,4 +52,6 @@ theme: plainwhite
 
 plugins:
   - jekyll-seo-tag
-#  - jekyll-feed
+  - jekyll-menus
+  # - jekyll-archives
+  # - jekyll-feed

_includes/post.html

@@ -0,0 +1,23 @@
+<li>
+  {%- assign date_format = site.plainwhite.date_format | default: "%b %-d, %Y"
+    -%}
+  <a class="post-link" href="{{ post.url | relative_url }}">
+    <h2 class="post-title">{{ post.title | escape }}</h2>
+  </a>
+  <div class="post-meta">
+    <ul class="post-categories">
+      {%- for tag in post.categories -%}
+      <li><a href="{{ site.url }}/categories#{{ tag }}">{{ tag }}</a></li>
+      {%- endfor -%}
+    </ul>
+    <div class="post-date">
+      <a href="{{ site.url }}/{{ post.date | date: "%Y/%m" }}">
+        <i class="icon-calendar"></i>
+        {{ post.date | date: date_format }}
+      </a>
+    </div>
+  </div>
+  <div class="post">
+    {%- if site.show_excerpts -%} {{ post.excerpt }} {%- endif -%}
+  </div>
+</li>

_layouts/archive.html

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Archives
+---
+
+<ul class="posts">
+  <li>
+    <h1 id="posts-label">
+      Archives of posts from {{ page.date | date: "%B %Y" }}
+    </h1>
+  </li>
+  {%- for post in page.posts -%} {%- include post.html -%} {%- endfor -%}
+</ul>

_layouts/categories.html

@@ -0,0 +1,18 @@
+---
+layout: default
+title: Categories
+---
+
+<ul class="posts">
+  {% for category in site.categories %} {% capture category_name %}{{ category |
+  first }}{% endcapture %}
+  <li>
+    <a name="{{ category_name | slugize }}"></a>
+    <h1 id="posts-label">
+      Posts in the "{{ category_name }}" category
+    </h1>
+  </li>
+
+  {% for post in site.categories[category_name] %} {%- include post.html -%} {%
+  endfor %} {% endfor %}
+</ul>

_layouts/default.html

@@ -7,15 +7,15 @@
     <main class="container">
       <section class="about">
         <a href="/"><img src="{{ "/assets/portfolio.png" | relative_url }}" alt="{{ site.plainwhite.name }}"></a>
-        <h2>
+        <h2 id="title">
           <a href="/">{{ site.plainwhite.name }}</a>
         </h2>
         <p class="tagline">{{ site.plainwhite.tagline }}</p>
         <ul class="social">
           {%- if site.plainwhite.social_links.github -%}
             <a href="https://github.com/{{ site.plainwhite.social_links.github }}">
               <li>
-                <i class="icon-github-circled"></i>
+                <i class="icon-github-squared"></i>
               </li>
             </a>
           {%- endif -%}
@@ -33,15 +33,24 @@ <h2>
               </li>
             </a>
           {%- endif -%}
+          {%- if site.plainwhite.social_links.rss -%}
+            <a href="{{ "/feed.xml" | relative_url }}">
+              <li>
+                <i class="icon-rss-squared"></i>
+              </li>
+            </a>
+          {%- endif -%}
         </ul>
 
-        {%- if site.plainwhite.navigation -%}
+        {%- if site.menus.main -%}
           <nav class="navigation">
             <ul>
-              {% for link in site.plainwhite.navigation %}
-                <li>
-                  <a href="{{ link.url }}">{{ link.title }}</a>
-                </li>
+              {% for item in site.menus.main %}
+                {%- if page.url != item.url -%}
+                  <li>
+                    <a href="{{ item.url }}" title="Go to {{ item.title }}">{{ item.title }}</a>
+                  </li>
+                {%- endif -%}
               {% endfor %}
             </ul>
           </nav>

_layouts/home.html

@@ -5,41 +5,15 @@
 {%- if page.title -%}
   <h1 class="page-heading">{{ page.title }}</h1>
 {%- endif -%}
-
 {{ content }}
-
 {%- if site.posts.size > 0 -%}
   <ul class="posts">
     <li>
       <h1 id="posts-label">posts</h1>
     </li>
 
     {%- for post in site.posts -%}
-      <li>
-        {%- assign date_format = site.plainwhite.date_format | default: "%b %-d, %Y" -%}
-        <a class="post-link" href="{{ post.url | relative_url }}">
-          <h2 class="post-title">{{ post.title | escape }}</h2>
-        </a>
-        <div class="post-meta">
-          <ul class="post-categories">
-            {%- for tag in post.categories -%}
-              <li>{{ tag }}</li>
-            {%- endfor -%}
-          </ul>
-          <div class="post-date">
-            <i class="icon-calendar"></i>
-            {{ post.date | date: date_format }}</div>
-        </div>
-        <div class="post">
-          {%- if site.show_excerpts -%}
-            {{ post.excerpt }}
-          {%- endif -%}
-        </div>
-      </li>
+      {%- include post.html -%}
     {%- endfor -%}
   </ul>
-
-  <!-- <p class="feed-subscribe"><svg class="svg-icon orange">
-		<use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use>
-	</svg><a href="{{ "/feed.xml" | relative_url }}">Subscribe</a></p> -->
 {%- endif -%}

_sass/ext/_fonts.scss

@@ -1,11 +1,11 @@
 @font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?26793073');
-  src: url('../font/fontello.eot?26793073#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?26793073') format('woff2'),
-       url('../font/fontello.woff?26793073') format('woff'),
-       url('../font/fontello.ttf?26793073') format('truetype'),
-       url('../font/fontello.svg?26793073#fontello') format('svg');
+  font-family: "fontello";
+  src: url("../font/fontello.eot?26793073");
+  src: url("../font/fontello.eot?26793073#iefix") format("embedded-opentype"),
+    url("../font/fontello.woff2?26793073") format("woff2"),
+    url("../font/fontello.woff?26793073") format("woff"),
+    url("../font/fontello.ttf?26793073") format("truetype"),
+    url("../font/fontello.svg?26793073#fontello") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -19,43 +19,55 @@
   }
 }
 */
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   speak: none;
- 
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
-  margin-right: .2em;
+  margin-right: 0.2em;
   text-align: center;
   /* opacity: .8; */
- 
+
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
- 
+
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
- 
+
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
-  margin-left: .2em;
- 
+  margin-left: 0.2em;
+
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
- 
+
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
- 
+
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
-
-.icon-calendar:before { content: '\e800'; } /* '' */
-.icon-github-circled:before { content: '\f09b'; } /* '' */
-.icon-twitter-squared:before { content: '\f304'; } /* '' */
-.icon-linkedin-squared:before { content: '\f30c'; } /* '' */
+
+.icon-github-circled:before {
+  content: "\f09b";
+} /* '' */
+.icon-rss-squared:before {
+  content: "\f143";
+} /* '' */
+.icon-github-squared:before {
+  content: "\f300";
+} /* '' */
+.icon-twitter-squared:before {
+  content: "\f304";
+} /* '' */
+.icon-linkedin-squared:before {
+  content: "\f30c";
+} /* '' */

_sass/plain.scss

@@ -98,12 +98,19 @@ main {
       font-size: 22px;
       margin-top: 17px;
       color: #aaa;
+      white-space: pre-wrap;
+      line-height: normal;
     }
     img {
       max-width: 150px;
     }
   }
 }
+#title {
+  a {
+    text-decoration: none;
+  }
+}
 .social {
   list-style-type: none;
   padding: 0;
@@ -132,6 +139,7 @@ main {
 
     a {
       display: block;
+      font-family: 'Merriweather';
       text-align: center;
       padding: 1rem 0;
       text-decoration: none;