Refactor _includes

* Create 4 sub-directories: about, articles, elements & projects. * Create tags.html. * Rename articles.html & projects.html to index.html. * Rename header.html to landing.html.
jlucaspains · Jun 27, 2019 · 7841017 · 7841017
1 parent f893ac4
commit 7841017
Show file tree

Hide file tree

Showing 27 changed files with 89 additions and 88 deletions.
diff --git a/_includes/skills.html → _includes/about/skills.html b/_includes/skills.html → _includes/about/skills.html
diff --git a/_includes/timeline.html → _includes/about/timeline.html b/_includes/timeline.html → _includes/about/timeline.html
diff --git a/_includes/articles.html → _includes/articles/index.html b/_includes/articles.html → _includes/articles/index.html
diff --git a/_includes/search.html → _includes/articles/search.html b/_includes/search.html → _includes/articles/search.html
diff --git a/_includes/articles/tags.html b/_includes/articles/tags.html
@@ -0,0 +1,31 @@
+<!-- Collect tags from all posts -->
+{% assign tags = blank %}
+{% for post in site.posts %}
+  {% assign post_tags = post.tags | join:'|' | append:'|' %}
+  {% if post_tags != '|' %}
+    {% assign tags = tags | append:post_tags %}
+  {% endif %}
+{% endfor %}
+{% assign tags = tags | split:'|' | uniq | sort %}
+
+<!-- List tags & related posts -->
+{% for tag in tags %}
+<div class="py-3">
+  <h4 id="{{ tag | slugify }}">{{ tag }}</h4>
+  <ol>
+  {% for post in site.posts %}
+    {% if post.tags contains tag %}
+      {% if post.external_url %}
+        {% assign url = post.external_url %}
+      {% else %}
+        {% assign url = post.url | relative_url %}
+      {% endif %}
+    <a href="{{ url }}"><li>{{ post.title }}</li></a>
+    <small class="text-muted"> - {{ post.date | date_to_long_string }}</small>
+    <br/>
+    {% endif %}
+  {% endfor %}
+  </ol>
+</div>
+<hr class="bg-light">
+{% endfor %}
diff --git a/_includes/button.html → _includes/elements/button.html b/_includes/button.html → _includes/elements/button.html
diff --git a/_includes/carousel.html → _includes/elements/carousel.html b/_includes/carousel.html → _includes/elements/carousel.html
diff --git a/_includes/figure.html → _includes/elements/figure.html b/_includes/figure.html → _includes/elements/figure.html
diff --git a/_includes/highlight.html → _includes/elements/highlight.html b/_includes/highlight.html → _includes/elements/highlight.html
diff --git a/_includes/list.html → _includes/elements/list.html b/_includes/list.html → _includes/elements/list.html
diff --git a/_includes/video.html → _includes/elements/video.html b/_includes/video.html → _includes/elements/video.html
diff --git a/_includes/header.html → _includes/landing.html b/_includes/header.html → _includes/landing.html
diff --git a/_includes/projects.html → _includes/projects/index.html b/_includes/projects.html → _includes/projects/index.html
@@ -20,13 +20,13 @@
     {% endcapture %}
 
     {% assign project_type = "remote" %}
-    {% assign project_id = project.name %}
-    {% assign project_img = false %}
+    {% assign project_id   = project.name %}
+    {% assign project_img  = false %}
     {% assign project_name = titlecase %}
     {% assign project_desc = project.description %}
-    {% assign project_url = project.html_url %}
+    {% assign project_url  = project.html_url %}
 
-    {% include project-card.html %}
+    {% include projects/project-card.html %}
 
     <script>get_tools("{{ project_id }}")</script>
 
@@ -35,11 +35,11 @@
   <!-- Local Projects -->
   {% for project in site.projects %}
 
-    {% assign project_type = "local" %}
-    {% assign project_id =  project.name | slugify %}
-    {% assign project_img = project.image %}
-    {% assign project_name = project.name %}
-    {% assign project_desc = project.description %}
+    {% assign project_type  = "local" %}
+    {% assign project_id    =  project.name | slugify %}
+    {% assign project_img   = project.image %}
+    {% assign project_name  = project.name %}
+    {% assign project_desc  = project.description %}
     {% assign project_tools = project.tools %}
 
     {% if project.external_url %}
@@ -48,7 +48,7 @@
       {% assign project_url = project.url | relative_url %}
     {% endif %}
 
-    {% include project-card.html %}
+    {% include projects/project-card.html %}
 
   {% endfor %}
 

diff --git a/_includes/project-card.html → _includes/projects/project-card.html b/_includes/project-card.html → _includes/projects/project-card.html
diff --git a/_posts/2018-12-01-what-the-heck-is-a-callback.md b/_posts/2018-12-01-what-the-heck-is-a-callback.md
@@ -71,7 +71,7 @@ Even though we invoked the `first()` function first, we logged out the result of
 
 It’s not that JavaScript didn’t execute our functions in the order we wanted it to, it’s instead that **JavaScript didn’t wait for a response from `first()` before moving on to execute `second()`**.
 
-So why show you this? Because you can’t just call one function after another and hope they execute in the right order. {% include highlight.html text="Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution." %}
+So why show you this? Because you can’t just call one function after another and hope they execute in the right order. {% include elements/highlight.html text="Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution." %}
 
 ## Create a Callback
 

diff --git a/_posts/2018-12-10-clean-coding.md b/_posts/2018-12-10-clean-coding.md
@@ -10,7 +10,7 @@ Source: [Jonathan Fulton](https://engineering.videoblocks.com/these-four-clean-c
 
 A few years ago at VideoBlocks we had a major code quality problem: “spaghetti” logic in most files, tons of duplication, no tests and more. Writing new features and even minor bug fixes required a couple of Tums at best and entire bottles of Pepto-Bismol and Scotch far too often. Our WTFs per minute were sky-high.
 
-{% include figure.html image="https://cdn-images-1.medium.com/max/1600/1*J2mKSLBEp_jUbMtOWXTTjQ.png" caption="Several years ago we were definitely in the room on the right but we’ve moved a lot closer to the room on the left." %}
+{% include elements/figure.html image="https://cdn-images-1.medium.com/max/1600/1*J2mKSLBEp_jUbMtOWXTTjQ.png" caption="Several years ago we were definitely in the room on the right but we’ve moved a lot closer to the room on the left." %}
 
 Today, the overall quality of our codebases are significantly better thanks in large part to a deliberate effort to improve code quality. A couple ago when we identified the problem, we read Robert Martin’s Clean Code as a team and did our best to implement his recommendations and even introduced “clean code” as a core cultural tenant for the engineering team. I highly recommend doing both as you start scaling. Implementing “clean code” practices appropriately will double productivity in the long run (at a bare minimum) and significantly improve moral on the engineering team. Who wants to be in the room on the right given the choice?
 

diff --git a/_posts/2019-02-15-learn-react-js.md b/_posts/2019-02-15-learn-react-js.md
@@ -82,7 +82,7 @@ There are two types of data in React: props and state. The difference between th
 
 The key difference is that state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.
 
-{% include highlight.html text="A component can change its internal state directly. It can not change its props directly." %}
+{% include elements/highlight.html text="A component can change its internal state directly. It can not change its props directly." %}
 
 Let’s take a closer look at props first.
 

diff --git a/_posts/2019-02-20-digital-minimalism.md b/_posts/2019-02-20-digital-minimalism.md
@@ -48,8 +48,8 @@ In similar fashion to the previous steps, this takes some time and conscious eff
 
 One of my favorite features on my phone is Do Not Disturb. It allows you to silence all non-critical notifications for an indefinite amount of time. This is what I use when I’m working on school work, personal projects, or even this article. On both iOS and Android, you’re given fairly granular control over what is considered critical so you can pick and choose what is worth the focus lost from a distraction.
 
-{% include figure.html image="https://cdn-images-1.medium.com/max/1000/0*MAeS-4fEc0Y7T4VB.jpg" caption="iOS" %}
-{% include figure.html image="https://cdn-images-1.medium.com/max/1000/0*nF_H2-8oTY7C0a54.png" caption="Android" %}
+{% include elements/figure.html image="https://cdn-images-1.medium.com/max/1000/0*MAeS-4fEc0Y7T4VB.jpg" caption="iOS" %}
+{% include elements/figure.html image="https://cdn-images-1.medium.com/max/1000/0*nF_H2-8oTY7C0a54.png" caption="Android" %}
 
 Apple and Google also fairly recently rolled out time management tools which allow the user to be restricted from certain applications after a given amount of use. This really helps to add an extra layer of discipline if you’re trying to build the habit of using your phone less.
 

diff --git a/_projects/(2) Awesome Project.md b/_projects/(2) Awesome Project.md
@@ -16,5 +16,5 @@ The Movies Project is something like **Netflix**, the only difference is that **
 ![search](https://www.sketchappsources.com/resources/source-image/microsoft-windows-10-virtual-keyboard-diogo-sousa.png)
 
 <p class="text-center">
-{% include button.html link="https://github.com/YoussefRaafatNasry/portfolYOU" text="Learn More" %}
+{% include elements/button.html link="https://github.com/YoussefRaafatNasry/portfolYOU" text="Learn More" %}
 </p>
diff --git a/_projects/(3) Empty Project.1.md → _projects/(3) Empty Project.md b/_projects/(3) Empty Project.1.md → _projects/(3) Empty Project.md
diff --git a/articles/index.html b/articles/index.html
@@ -4,5 +4,5 @@
 weight: 2
 ---
 
-{% include search.html %}
-{% include articles.html %}
+{% include articles/search.html %}
+{% include articles/index.html %}
diff --git a/articles/tags.html b/articles/tags.html
@@ -4,34 +4,4 @@
 permalink: /articles/tags
 ---
 
-<!-- Collect tags from all posts -->
-{% assign tags = blank %}
-{% for post in site.posts %}
-  {% assign post_tags = post.tags | join:'|' | append:'|' %}
-  {% if post_tags != '|' %}
-    {% assign tags = tags | append:post_tags %}
-  {% endif %}
-{% endfor %}
-{% assign tags = tags | split:'|' | uniq | sort %}
-
-<!-- List tags & related posts -->
-{% for tag in tags %}
-<div class="py-3">
-  <h4 id="{{ tag | slugify }}">{{ tag }}</h4>
-  <ol>
-  {% for post in site.posts %}
-    {% if post.tags contains tag %}
-      {% if post.external_url %}
-        {% assign url = post.external_url %}
-      {% else %}
-        {% assign url = post.url | relative_url %}
-      {% endif %}
-    <a href="{{ url }}"><li>{{ post.title }}</li></a>
-    <small class="text-muted"> - {{ post.date | date_to_long_string }}</small>
-    <br/>
-    {% endif %}
-  {% endfor %}
-  </ol>
-</div>
-<hr class="bg-light">
-{% endfor %}
+{% include articles/tags.html %}
diff --git a/docs/docs.md b/docs/docs.md
@@ -38,7 +38,7 @@ Adding Content
 Dependencies
 Credits
 {%- endcapture -%}
-{% include list.html type="toc" %}
+{% include elements/list.html type="toc" %}
 
 ## Installation
 
@@ -213,7 +213,7 @@ external_url: https://google.com/
   1. Add the following lines to the skills section between `<div class="row">` and `</div>`:
 
      ```liquid
-     {% raw %}{% include skills.html title="Category_Name Skills" source=site.data.category_name-skills %}{% endraw %}
+     {% raw %}{% include about/skills.html title="Category_Name Skills" source=site.data.category_name-skills %}{% endraw %}
      ```
 
 #### Adding new Timeline Item

diff --git a/docs/elements.md b/docs/elements.md
@@ -30,7 +30,7 @@ Inline HTML
 Horizontal Rule
 Line Breaks
 {%- endcapture -%}
-{% include list.html title="Table of Contents" type="toc" %}
+{% include elements/list.html title="Table of Contents" type="toc" %}
 
 ## Headers
 
@@ -75,9 +75,9 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 ## Highlight
 
 ```
-{% raw %}{% include highlight.html text="I am highlighted text." %}{% endraw %}
+{% raw %}{% include elements/highlight.html text="I am highlighted text." %}{% endraw %}
 ```
-{% include highlight.html text="I am highlighted text." %}
+{% include elements/highlight.html text="I am highlighted text." %}
 
 
 ## Lists
@@ -120,7 +120,7 @@ Google,https://www.google.com
 GitHub,https://www.google.com
 {%- endcapture -%}
 
-{% include list.html %}
+{% include elements/list.html %}
 
 
 - List Group with a Title:
@@ -130,7 +130,7 @@ Google,https://www.google.com
 GitHub,https://www.google.com
 {%- endcapture -%}
 
-{% include list.html title="Websites" %}
+{% include elements/list.html title="Websites" %}
 
 
 - List Group as Table of Contents (automatic linking to page headers):
@@ -141,7 +141,7 @@ Emphasis
 List
 {%- endcapture -%}
 
-{% include list.html title="Table of Contents" type="toc" %}{% endraw %}
+{% include elements/list.html title="Table of Contents" type="toc" %}{% endraw %}
 ```
 
 - Basic List Group:
@@ -150,15 +150,15 @@ Google,https://www.google.com
 GitHub,https://www.google.com
 {%- endcapture -%}
 
-{% include list.html %}
+{% include elements/list.html %}
 
 - List Group with a Title:
 {%- capture list_items -%}
 Google,https://www.google.com
 GitHub,https://www.google.com
 {%- endcapture -%}
 
-{% include list.html title="Websites" %}
+{% include elements/list.html title="Websites" %}
 
 - List Group as Table of Contents (automatic linking to page headers):
 {%- capture list_items -%}
@@ -167,7 +167,7 @@ Emphasis
 Lists
 {%- endcapture -%}
 
-{% include list.html title="Table of Contents" type="toc" %}
+{% include elements/list.html title="Table of Contents" type="toc" %}
 
 
 ## Links
@@ -197,10 +197,10 @@ Here's our Image (hover to see the title text):
 ## Figures
 
 ```
-{% raw %}{% include figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %}{% endraw %}
+{% raw %}{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %}{% endraw %}
 ```
 
-{% include figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %}
+{% include elements/figure.html image="https://bit.ly/2N69TKO" caption="The sea complains upon a thousand shores." %}
 
 
 ## Carousel
@@ -211,24 +211,24 @@ https://bit.ly/2BBbVhc
 https://bit.ly/2DOtxXB
 {%- endcapture -%}
 
-{% include carousel.html %}{% endraw %}
+{% include elements/carousel.html %}{% endraw %}
 ```
 
 {%- capture carousel_images -%}
 https://bit.ly/2BBbVhc
 https://bit.ly/2DOtxXB
 {%- endcapture -%}
 
-{% include carousel.html %}
+{% include elements/carousel.html %}
 
 
 ## Videos
 
 ```
-{% raw %}{% include video.html id="aZNbUITN-mA" %}{% endraw %}
+{% raw %}{% include elements/video.html id="aZNbUITN-mA" %}{% endraw %}
 ```
 
-{% include video.html id="aZNbUITN-mA" %}
+{% include elements/video.html id="aZNbUITN-mA" %}
 
 ##### How to get a YouTube video ID from a youtube.com page URL?
 
@@ -241,39 +241,39 @@ Therefore, **the ID of the video is** `aZNbUITN-mA`.
 
 ```
 {% raw %}Styles:
-{% include button.html link="https://github.com/" text="GitHub" %}
-{% include button.html link="https://github.com/" text="GitHub" style="primary" %}
-{% include button.html link="https://github.com/" text="GitHub" style="outline-dark" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" style="primary" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" style="outline-dark" %}
 
 Sizes:
-{% include button.html link="https://github.com/" text="GitHub" size="sm" %}
-{% include button.html link="https://github.com/" text="GitHub" %}
-{% include button.html link="https://github.com/" text="GitHub" size="lg" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" size="sm" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" size="lg" %}
 
 Block:
-{% include button.html link="https://github.com/" text="GitHub" block="true" %}{% endraw %}
+{% include elements/button.html link="https://github.com/" text="GitHub" block="true" %}{% endraw %}
 ```
 
 ##### Styles:
-{% include button.html link="https://github.com/" text="GitHub" %}
-{% include button.html link="https://github.com/" text="GitHub" style="primary" %}
-{% include button.html link="https://github.com/" text="GitHub" style="outline-dark" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" style="primary" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" style="outline-dark" %}
 
 ##### Sizes:
-{% include button.html link="https://github.com/" text="GitHub" size="sm" %}
-{% include button.html link="https://github.com/" text="GitHub" %}
-{% include button.html link="https://github.com/" text="GitHub" size="lg" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" size="sm" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" size="lg" %}
 
 ##### Block:
-{% include button.html link="https://github.com/" text="GitHub" block="true" %}
+{% include elements/button.html link="https://github.com/" text="GitHub" block="true" %}
 
 ##### How to center buttons?
 Just surrond your buttons with `<p class="text-center">` and `</p>`.
 
 <p class="text-center">
-  {% include button.html link="https://github.com/" text="GitHub" %}
-  {% include button.html link="https://google.com/" text="Google" %}
-  {% include button.html link="https://microsoft.com/" text="Microsoft" %}
+  {% include elements/button.html link="https://github.com/" text="GitHub" %}
+  {% include elements/button.html link="https://google.com/" text="Google" %}
+  {% include elements/button.html link="https://microsoft.com/" text="Microsoft" %}
 </p>
 
 ##### Know more about buttons

diff --git a/index.html b/index.html
@@ -2,4 +2,4 @@
 layout: default
 ---
 
-{% include header.html %}
+{% include landing.html %}
diff --git a/pages/about.md b/pages/about.md
@@ -11,10 +11,10 @@ Hi I am **{{ site.author.name }}**,<br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
 <div class="row">
-{% include skills.html title="Programming Skills" source=site.data.programming-skills %}
-{% include skills.html title="Other Skills" source=site.data.other-skills %}
+{% include about/skills.html title="Programming Skills" source=site.data.programming-skills %}
+{% include about/skills.html title="Other Skills" source=site.data.other-skills %}
 </div>
 
 <div class="row">
-{% include timeline.html %}
+{% include about/timeline.html %}
 </div>
diff --git a/pages/projects.html b/pages/projects.html
@@ -8,4 +8,4 @@
   - arduino-visitor-counter
 ---
 
-{% include projects.html %}
+{% include projects/index.html %}