From 5b540f3c1be7821bbefae5967dee890fc58c5e6b Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foo.dogsquared@gmail.com>
Date: Wed, 27 Jan 2021 00:51:05 +0800
Subject: [PATCH] Revise the styling of the table of contents

I've also put more comments on the individual components in the partial.
Hopefully, that'll mitigate against me forgetting their purpose all over
again.
---
 assets/scss/layout.scss          |  9 ++++++++-
 layouts/partials/components.html | 31 +++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index bbdc5ce..6fb7048 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -37,7 +37,6 @@ footer[aria-label="Site footer"] {
   --size: 2rem;
   display: inline-block;
   font-size: var(--size);
-  line-height: var(--size);
   margin-bottom: unset;
   margin-right: 0.5rem;
 }
@@ -209,4 +208,12 @@ footer[aria-label="Site footer"] {
   background: var(--base01);
   font-size: 0.9em;
   padding: 1em;
+
+  // The styling is solely for consistency sake throughout the site.
+  > ul { padding-left: 1rem; }
+
+  ul {
+    list-style: disc;
+    padding-left: 1em;
+  }
 }
diff --git a/layouts/partials/components.html b/layouts/partials/components.html
index a4b3c6c..657ca64 100644
--- a/layouts/partials/components.html
+++ b/layouts/partials/components.html
@@ -1,9 +1,21 @@
 {{- /*
-Here's where all of the inline partials are defined.
-If the partial is short enough, it should be put here.
+  Here's where all of the inline partials are defined.
+  If the partial is short enough, it should be put here.
 */ -}}
 
-{{- /* This is a partial that creates an icon from the icon templates. */ -}}
+{{- /*
+  This is a partial that creates an icon from the icon templates and links them from the created file.
+  Why not embed the text into the resulting document, you ask?
+  I just want to save a few kilobytes of the total site weight. :)
+
+  It accepts a dictionary with the specified keys:
+
+  - id - The name of the resource in a specific set.
+  - output - The output location of the resource relative to the base URL.
+             It can accept a formatted string (e.g., "icons/brand/%s.svg") where 'id' will be used.
+  - template - The template file to be used.
+               It should relative to the asset directory.
+*/ -}}
 {{- define "partials/components/icon.html" }}
   {{- $icon := . }}
   {{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
@@ -13,12 +25,19 @@ If the partial is short enough, it should be put here.
 {{- end }}
 
 
-{{- /* A partial that aliases the Heroicon template from the icon partial */ -}}
+{{- /*
+  A partial that aliases the Heroicon template from the icon partial.
+  It only needs a string of the ID from one of the icons.
+*/ -}}
 {{- define "partials/components/heroicon.html" }}
   {{- partial "components/icon.html" (dict "id" . "output" "icons/generic/%s.svg" "template" "templates/heroicon.svg") }}
 {{ end }}
 
 
+{{- /*
+  The theme button in its own bed.
+  Take note this component already has conditional rendering so a conditional is unnecessary.
+*/ -}}
 {{- define "partials/components/theme-button.html" }}
   {{- if gt (len (index $.Site.Data "more-contentful").themes) 1 }}
   <div class="site__theme-btn" aria-label="Theme toggle">
@@ -51,6 +70,10 @@ If the partial is short enough, it should be put here.
 {{- end }}
 
 
+{{- /*
+  The component where it will display the metadata of the post.
+  This is used on list templates but feel free to change that.
+*/ -}}
 {{- define "partials/components/post-meta.html" }}
 <div class="list post__meta">
   {{- if ne (.PublishDate.Format "2006") "0001" -}}