Add categories

_includes/head.html

@@ -19,6 +19,7 @@
   <link rel="stylesheet" href="{{ '/public/css/poole.css' | absolute_url }}">
   <link rel="stylesheet" href="{{ '/public/css/syntax.css' | absolute_url }}">
   <link rel="stylesheet" href="{{ '/public/css/lanyon.css' | absolute_url }}">
+  <link rel="stylesheet" href="{{ '/public/css/custom.css' | absolute_url }}">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
   <link rel="shortcut icon" href="{{ '/public/favicon.png' | absolute_url }}">
 

_posts/2020-12-08-getting-ready.md

@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting Ready
+categories: ["introduction"]
 ---
 
 ![favicon]({{ site.baseurl | absolute_url }}/public/favicon.png)

_posts/2020-12-09-osi.markdown

@@ -1,12 +1,17 @@
 ---
 layout: post
 title:  The OSI Model
+categories: ["networks"]
 ---
 
 The OSI model lays down specifications on how to think about achieving inter-process communication across machines. This article goes over breaking down the 
 what and why of this model and introduce the readers to some of the jargon surrounding this topic. 
 
-## The Mail Analogy
+![OSI Outline]({{site.base_url | absolute_url}}/public/img/osi-outline.png)
+
+------
+
+# The Mail Analogy
 
 It is useful to generalize by drawing comparisons with the [postal system](https://en.wikipedia.org/wiki/Mail) when it comes to understanding inter-process communication across machines. 
 
@@ -49,7 +54,7 @@ It is now easy to identify people, or machines, to train and fit into these role
 
 In the computer world, a similar abstraction has been laid down for the postal network in the form of the **OSI Model**. 
 
-## Open Systems Interchange Model
+# Open Systems Interchange Model
 
 Owing to the complexity of the problem there are 7 different abstractions - the **7 layers of the [OSI model](https://en.wikipedia.org/wiki/OSI_model).**
 
@@ -57,7 +62,7 @@ Out of this, the first 4 layers are responsible for end to end transport of a me
 
 The below is a simplified description of these 4 layers. An actor in each layer could be either a software, hardware or a hybrid of both.
 
-# Layer 4 - Transport Layer 
+## Layer 4 - Transport Layer 
 
 The application sends the required data to be sent to this layer. The Transport Layer batches the data in a way that is easy to transmit further.
 
@@ -65,21 +70,21 @@ This layer cannot understand the application data, and just knows when the first
 
 When a process sends application data to this layer, it can expect that the data will be received by the target process. 
 
-# Layer 3 - Network Layer
+## Layer 3 - Network Layer
 
 The Layer 4 hands off the application data packet (or network packet) to Layer 3. This is a combination of hardwares and softwares working in tandem to route the network
 packet from source device to the target device over the internet. It can complete with reliable multiple hops over many other devices. This is an encapsulation of the postal system from 
 the letter anology.
 
-# Layer 2 -  Data Link Layer
+## Layer 2 -  Data Link Layer
 
 Responsible for transmitting a 'frame' of data reliably from one node to another without errors. A 'frame' contains some more metadata that is required to perform the error detection and correction when the data is received at a node. This is to make sure that the correct data is being passed on. These are often intelligently deviced hardwares that understand if a piece of data has been correctly transferred or not. Network packet transfer at Layer 3 hands this off to Layer 2 that transmits them as 'frames' and hands the data back (removing any 'frame' metadata) to the Layer 3 in the second node. 
 
-# Layer 1 - Physical layer
+## Layer 1 - Physical layer
 
 In order for the Layer 2 device to send and/or receive a frame, it needs a medium to send the information in. Layer 2 hands off the frame expecting it would reach as is in the target. The Layer 1 entities - which are typically hardwares - are responsible for transmitting the 0s and 1s through them. (Think of cables).
 
-# Layers 5 and up - The Application Layer
+## Layers 5 and up - The Application Layer
 
 We can call the remaining 3 layers as the Application Layer.
 
@@ -90,7 +95,7 @@ The Application layer constructs whatever message it needs to send, and transfer
 > These 3 layers have many overlaps between them that it would confuse the reader when they are new to this subject. As this series of articles as an introduction to the practical usages of the model, we can combine these 3 layers into 1 and call it the Application layer. 
 Pedantically that is the Layer 7 of the model, but practically it makes a lot of sense to just call everything above Layer 4 as the application layer. There is lot of literature on the differences between these layers for the interested.
 
-## In Summary
+# In Summary
 
 This is how a transfer of information from source application to destination application would look like, if we are to talk in terms of the different abstraction layers of the OSI. Note that the data travels across multiple devices in the network (such as routers). While the network packet has not reached the destination machine, that packet is not forwarded to the networking layer in that machine. 
 

categories.md

@@ -0,0 +1,19 @@
+---
+layout: page
+title: Categories
+---
+
+Browse all posts by categories
+
+{% for category in site.categories %}
+{% capture category_name %}{{ category | first }}{% endcapture %}
+  <div id="#{{ category_name | slugize }}"></div>
+  <p></p>
+  <h2 class="category-head">{{ category_name | capitalize }}</h2>
+  <a name="{{ category_name | slugize }}"></a>
+  <ul>
+  {% for post in site.categories[category_name] %}
+  <li><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></li>
+  {% endfor %}
+  </ul>
+{% endfor %}

public/css/custom.css

@@ -0,0 +1 @@
+img[alt="OSI Outline"] { width: 100%; }

public/css/lanyon.css

@@ -73,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
  */
 
 .container {
-  max-width: 28rem;
+  max-width: 40rem;
 }
 @media (min-width: 38em) {
   .container {
@@ -82,7 +82,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 @media (min-width: 56em) {
   .container {
-    max-width: 38rem;
+    max-width: 45rem;
   }
 }
 

public/css/poole.css

@@ -230,7 +230,7 @@ blockquote p:last-child {
 img {
   display: block;
   max-width: 100%;
-  margin: 0 0 1rem;
+  margin: 0 0 0rem;
   border-radius: 5px;
 }