imdhemy-jekyll-theme 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1515c0ede2f0e2f57a4ba4a73ab0d572884b971d7d403eddfc3eb10effc63711
-  data.tar.gz: 7fd36ddbd7002a8942de8be2395de69e6498c62947d1db15437898729b73ace4
+  metadata.gz: 68a2421fc01b914158903f38955d459bdadcd29e8daf429cf68db51871921ba8
+  data.tar.gz: 1ffae175b00a683ef6e42746332ec76ad48784560e5d1b4a0ef886c842bcfe45
 SHA512:
-  metadata.gz: 74e4c503fbcdc91e5b21a1076f0928286dec9d50350a883460bdefce263f33b2d0090d59764e0163a48f620b06367d225ea404d37785d44c31fe44c4966e46bb
-  data.tar.gz: cab8c356554ef5cb0e598eda95ebad05bce0897209183d74af96e4ee8638eed3abf6a120f0e3ffb92478ac661ac7a23704de4e83b04b82782b29fec1b65ebae2
+  metadata.gz: d4104d5d88e7915ae5b1648b3987fc5d6b74cd3eb3e29a1fe15928b6a3a27a02d421371455066d3730d144665760fe7cf437f1603c4775b83af0c2483ba5df8a
+  data.tar.gz: 3095cf8e24b5308c8a0f5578c4179c5cf8e1cd68ab7af867ff3484d9901d43d06f8f5ba9598e3404a09d1154c5d9a09f9573721be71c8604a11a77730f5c1af3

data/README.md

@@ -1,2 +1,134 @@
 # Imdhemy Jekyll Theme
-[...]
+
+Jekyll theme for my personal website. [imdhemy.com](https://imdhemy.com)
+
+## Installation (Recommended: RubyGem)
+
+Install the theme as a gem and pin a semantic version.
+
+Add to your site's `Gemfile`:
+
+```ruby
+gem "imdhemy-jekyll-theme", "1.0.0"
+```
+
+Set the theme in your site's `_config.yml`:
+
+```yaml
+theme: imdhemy-jekyll-theme
+```
+
+Then run:
+
+```bash
+bundle install
+```
+
+## Migrating From `remote_theme`
+
+If your site currently uses:
+
+```yaml
+remote_theme: imdhemy/imdhemy-jekyll-theme
+```
+
+Migrate to the gem flow:
+
+1. Remove `remote_theme` from `_config.yml`.
+2. Add `theme: imdhemy-jekyll-theme` to `_config.yml`.
+3. Add `gem "imdhemy-jekyll-theme", "<semantic-version>"` to your `Gemfile`.
+4. Run `bundle install`.
+
+## Usage
+
+You can find examples in the [example](/example) directory.
+
+## Customize Theme Copy
+
+The theme exposes UI text keys so users can control the added content from `_config.yml`.
+
+```yaml
+theme_text:
+  hero_kicker: "Personal blog and engineering notes"
+  hero_cta_label: "Start reading"
+  hero_secondary_cta_label: "About me"
+  hero_secondary_cta_url: "/about"
+  latest_posts_subtitle: "Fresh writing you can read in a few minutes."
+  read_article_label: "Read article"
+  back_to_posts_label: "Back to all posts"
+  previous_article_label: "Previous article"
+  next_article_label: "Next article"
+  related_posts_heading: "Keep reading"
+
+theme_features:
+  reading_progress: true
+
+theme_style:
+  accent: "#3b82f6"
+  accent_strong: "#2563eb"
+  accent_soft: "#dbeafe"
+  accent_surface: "#eff6ff"
+  success: "#16a34a"
+  info: "#2563eb"
+  warning: "#d97706"
+  danger: "#dc2626"
+  background: "#eef4ff"
+  surface: "#ffffff"
+  text: "#0f172a"
+  muted: "#475569"
+  border: "#c9d8f2"
+```
+
+## Development Quick Start
+
+Use this sequence every time you start working on the theme locally.
+
+### 1. Prerequisites
+
+- Ruby 3.3.4 + Bundler
+- Node.js 24 + npm
+
+The project pins runtime versions in:
+
+- `.ruby-version`
+- `.nvmrc`
+- `.node-version`
+- `.tool-versions`
+
+### 2. Install dependencies
+
+```bash
+bundle install
+npm install
+```
+
+### 3. Start development
+
+Run the theme preview and JS watcher together:
+
+```bash
+npm start
+```
+
+This runs:
+
+- `bundle exec rake preview` to serve the example site from `http://127.0.0.1:4000/example/`
+- `vite build --watch` to rebuild `assets/js/dist/main.js` on JS changes
+
+### 4. Day-to-day workflow
+
+- Edit layouts/includes/styles in the theme root.
+- Edit sample content under `example/` to verify real pages.
+- Keep `npm start` running while you work.
+
+### 5. Useful standalone commands
+
+```bash
+npm run rake      # Jekyll preview only
+npm run js:build  # JS production build
+npm run js:watch  # JS watcher only
+```
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](/LICENSE.txt).

data/_includes/archive-header.html

@@ -1,10 +1,10 @@
-<section class="bg-white p-0">
-    <div class="container mx-auto">
-        <div class="max-w-screen-md mx-auto border-b border-b-gray-200 py-16 mb-16">
-            <div class="flex-col px-5 lg:px-0">
-                <h1 class="text-8xl mb-8 font-bold text-center relative">{{ page.title }}</h1>
-                <p class="text-center text-xl text-gray-700">Check out the <a
-                        class="text-black font-bold border-b-2 border-transparent hover:border-b-violet-600 ease-in duration-300"
+<section class="page-header-wrap page-header-wrap--archive">
+    <div class="page-header-wrap__container">
+        <div class="page-header page-header--archive page-header--archive-hub">
+            <div class="page-header__layout page-header__layout--stacked">
+                <h1 class="page-header__title page-header__title--centered">{{ page.title }}</h1>
+                <p class="page-header__description page-header__description--centered">Check out the <a
+                        class="archive-header__blog-link"
                         href="{{ site.baseurl }}/blog">blog</a> for all
                     posts.</p>
             </div>

data/_includes/content.html

@@ -1,3 +1,3 @@
-<div class="max-w-screen-md mx-auto bg-white p-5 text-xl content">
+<div class="content-shell content read-surface">
     {{ content }}
 </div>

data/_includes/contributions.html

@@ -1,16 +1,17 @@
-<section class="mb-8">
-    <div class="container mx-auto">
-        <div class="p-5 max-w-screen-lg mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-8">Contributions</h2>
+{% if site.contributions.size > 0 %}
+<section class="contributions">
+    <div class="contributions__container">
+        <div class="contributions__inner">
+            <h2 class="contributions__title">Contributions</h2>
 
-            <p class="text-center text-2xl text-gray-500 mb-8">I have contributed to some great projects</p>
+            <p class="contributions__subtitle">I have contributed to some great projects</p>
 
-            <div class="grid gap-4 grid-cols-1 lg:grid-cols-3">
+            <div class="contributions__grid">
                 {% for contribution in site.contributions %}
-                <div class="py-5 flex items-center flex-col">
-                    <a href="{{ contribution.url }}" class="block ease-linear">
+                <div class="contributions__item">
+                    <a href="{{ contribution.url }}" class="contributions__link">
                         <img src="{{ site.baseurl }}{{ contribution.logo }}"
-                             class="h-8 block" alt="{{ contribution.name }}">
+                             class="contributions__logo" alt="{{ contribution.name }}">
                     </a>
                 </div>
                 {% endfor %}
@@ -18,3 +19,4 @@
         </div>
     </div>
 </section>
+{% endif %}

data/_includes/footer.html

@@ -1,7 +1,7 @@
-<section class="sticky top-[100vh]">
-    <div class="p-10">
-        <div class="max-w-screen-md mx-auto">
-            <p class="text-center">
+<section class="site-footer">
+    <div class="site-footer__inner">
+        <div class="site-footer__container">
+            <p class="site-footer__text">
                 <!-- 2001 - jekyll current year -->
                 &copy; 2021 - {{ site.time | date: '%Y' }} . imdhemy.com Published by Jekyll, hosted on GitHub Pages.
             </p>

data/_includes/header.html

@@ -1,47 +1,69 @@
-<header class="relative" id="main-header">
-    <div class="container mx-auto">
-        <div class="flex py-6 lg:py-14 p-5 lg:px-0">
+<header class="site-header" id="main-header">
+    <div class="site-header__container">
+        <div class="site-header__inner">
             <!-- begin logo -->
-            <div class="flex-auto">
-                <div>
-                    <a href="{{ site.baseurl }}/" class="text-gray-900 text-3xl font-bold">
-                        {{ site.title }}
-                    </a>
-                </div>
+            <div class="site-header__brand">
+                <a href="{{ site.baseurl }}/" class="site-logo">
+                    {{ site.title }}
+                </a>
             </div>
             <!-- end logo -->
             <!-- begin right part -->
-            <div class="flex-auto">
-                <div class="flex justify-end lg:hidden">
-                    <button type="button">
+            <div class="site-header__actions">
+                <div class="site-header__mobile-toggle-wrap">
+                    <button type="button" class="site-header__toggle" data-target="#mobile-nav" aria-controls="mobile-nav"
+                            aria-expanded="false" aria-label="Toggle navigation menu">
                         <ion-icon name="menu-outline"></ion-icon>
                     </button>
                 </div>
 
-                <div class="hidden lg:flex justify-end">
-                    <ul class="flex items-center">
-                        {% for page in site.navigation %}
-                        <li class="ml-10">
-                            <a href="{{ site.baseurl }}{{ page.url }}"
-                               class="text-base font-semibold p-2 text-gray-900 ease-linear hover:text-blue-600 active:text-blue-600">
-                                {{ page.title }}
+                <nav class="site-header__desktop-nav" aria-label="Primary navigation">
+                    <ul class="site-nav-list">
+                        {% assign current_path = page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
+                        {% assign current_norm = current_path | append: "/" | replace: "//", "/" %}
+                        {% for nav_page in site.navigation %}
+                        {% assign nav_path = nav_page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
+                        {% assign nav_norm = nav_path | append: "/" | replace: "//", "/" %}
+                        {% assign is_active = false %}
+                        {% if current_norm == nav_norm %}
+                        {% assign is_active = true %}
+                        {% endif %}
+                        {% if nav_norm == "/blog/" and (current_norm contains "/blog/" or current_norm contains "/tag/" or page.layout == "post" or page.layout == "archive" or page.collection == "posts") %}
+                        {% assign is_active = true %}
+                        {% endif %}
+                        <li class="site-nav-list__item">
+                            <a href="{{ site.baseurl }}{{ nav_page.url }}"
+                               class="nav-link{% if is_active %} is-active{% endif %}">
+                                {{ nav_page.title }}
                             </a>
                         </li>
                         {% endfor %}
                     </ul>
-                </div>
+                </nav>
                 <!-- end right part -->
             </div>
             <!-- begin mobile nav -->
             <nav id="mobile-nav"
-                 class="-z-10 opacity-0 absolute top-32 right-6 block min-w-fit w-40 bg-white p-5 rounded-md shadow-md ease-linear">
-                <div class="ml-auto">
-                    <ul class="p-0 m-0 flex-column items-center">
-                        {% for page in site.navigation %}
-                        <li class="block flex-1 w-full m-0">
-                            <a href="{{ site.baseurl }}{{ page.url }}"
-                               class="block text-right text-base font-semibold p-2 text-gray-900 ease-linear hover:text-blue-600 active:text-blue-600">
-                                {{ page.title }}
+                 class="site-mobile-nav is-hidden"
+                 aria-label="Mobile navigation">
+                <div class="site-mobile-nav__inner">
+                    <ul class="site-mobile-nav__list">
+                        {% assign current_path = page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
+                        {% assign current_norm = current_path | append: "/" | replace: "//", "/" %}
+                        {% for nav_page in site.navigation %}
+                        {% assign nav_path = nav_page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
+                        {% assign nav_norm = nav_path | append: "/" | replace: "//", "/" %}
+                        {% assign is_active = false %}
+                        {% if current_norm == nav_norm %}
+                        {% assign is_active = true %}
+                        {% endif %}
+                        {% if nav_norm == "/blog/" and (current_norm contains "/blog/" or current_norm contains "/tag/" or page.layout == "post" or page.layout == "archive" or page.collection == "posts") %}
+                        {% assign is_active = true %}
+                        {% endif %}
+                        <li class="site-mobile-nav__item">
+                            <a href="{{ site.baseurl }}{{ nav_page.url }}"
+                               class="site-mobile-nav__link nav-link{% if is_active %} is-active{% endif %}">
+                                {{ nav_page.title }}
                             </a>
                         </li>
                         {% endfor %}

data/_includes/hero.html

@@ -1,14 +1,23 @@
-<section class="bg-white py-16">
-    <div class="container mx-auto">
-        <div class="flex flex-col items-center flex-wrap">
-            <div class="flex-1 px-8 max-w-2xl">
-                <div class="text-center mx-auto">
-                    <h1 class="text-3xl lg:text-6xl mb-8 lg:text-5xl font-bold">
-                        Hi, I'm <span class="text-blue-500">{{ site.author.name }}</span>
+{% assign hero_kicker = site.theme_text.hero_kicker | default: "Personal blog and engineering notes" %}
+{% assign hero_cta_label = site.theme_text.hero_cta_label | default: "Start reading" %}
+{% assign hero_secondary_cta_label = site.theme_text.hero_secondary_cta_label | default: "About me" %}
+{% assign hero_secondary_cta_url = site.theme_text.hero_secondary_cta_url | default: "/about" %}
+<section class="hero-section">
+    <div class="hero-section__container">
+        <div class="hero-section__layout">
+            <div class="hero-section__content">
+                <div class="hero-section__content-inner">
+                    <p class="hero-kicker">{{ hero_kicker }}</p>
+                    <h1 class="hero-title">
+                        Hi, I'm <span class="hero-title__accent">{{ site.author.name }}</span>
                     </h1>
-                    <p class="text-lg lg:text-2xl leading-8 lg:leading-10 text-gray-500">
+                    <p class="hero-description">
                         {{ site.author.description }}
                     </p>
+                    <div class="hero-cta hero-cta--dual">
+                        <a href="{{ site.baseurl }}/blog" class="primary-button">{{ hero_cta_label }}</a>
+                        <a href="{{ site.baseurl }}{{ hero_secondary_cta_url }}" class="secondary-button">{{ hero_secondary_cta_label }}</a>
+                    </div>
                 </div>
             </div>
         </div>

data/_includes/latest-posts.html

@@ -1,15 +1,17 @@
-<section class="mb-8">
-    <div class="container mx-auto">
-        <div class="p-5">
-            <h2 class="text-3xl font-bold text-center mb-8">Latest Posts</h2>
-            <div class="max-w-screen-md mx-auto">
+{% assign latest_posts_subtitle = site.theme_text.latest_posts_subtitle | default: "Fresh writing you can read in a few minutes." %}
+<section class="latest-posts" id="latest-posts">
+    <div class="latest-posts__container">
+        <div class="latest-posts__inner">
+            <h2 class="latest-posts__title">Latest Posts</h2>
+            <p class="section-subtitle">{{ latest_posts_subtitle }}</p>
+            <div class="latest-posts__list">
                 {% for post in site.posts limit:3 %}
                 {% include post-item.html %}
                 {% endfor %}
             </div>
-            <div class="mt-16 text-center">
+            <div class="latest-posts__cta">
                 <a href="{{ site.baseurl }}/blog"
-                   class="py-4 px-6 bg-violet-700 text-lg font-semibold rounded-3xl text-white ease-in duration-300 hover:bg-violet-800">
+                   class="primary-button">
                     All Posts &rarr;
                 </a>
             </div>

data/_includes/page-header.html

@@ -1,9 +1,9 @@
-<section class="bg-white p-0">
-    <div class="container mx-auto">
-        <div class="max-w-screen-xl mx-auto border-b border-b-gray-200 py-16 mb-16">
-            <div class="flex flex-col lg:flex-row justify-between px-5 lg:px-0">
-                <h1 class="text-8xl mb-8 font-bold">{{ page.title }}</h1>
-                <p class="max-w-screen-sm text-xl text-gray-600">{{ page.description }} </p>
+<section class="page-header-wrap page-header-wrap--blog">
+    <div class="page-header-wrap__container">
+        <div class="page-header page-header--page page-header--blog">
+            <div class="page-header__layout">
+                <h1 class="page-header__title">{{ page.title }}</h1>
+                <p class="page-header__description">{{ page.description }} </p>
             </div>
         </div>
     </div>

data/_includes/pagination-links.html

@@ -1,18 +1,18 @@
 {% if paginator.total_pages > 1 %}
-<section class="mx-auto max-w-screen-md px-5">
-    <nav class="flex items-center justify-between">
+<section class="pagination-shell">
+    <nav class="pagination-nav" aria-label="Pagination">
         {% if paginator.previous_page %}
-        <a class="inline-block font-semibold border-b-2 border-transparent hover:border-indigo-600"
+        <a class="pagination-link"
            href="{{ paginator.previous_page_path | relative_url }}">Prev</a>
         {% else %}
-        <span class="inline-block font-semibold text-gray-300 cursor-not-allowed">Previous</span>
+        <span class="pagination-link is-disabled">Previous</span>
         {% endif %}
 
         {% if paginator.next_page %}
-        <a class="inline-block font-semibold border-b-2 border-transparent hover:border-indigo-600"
+        <a class="pagination-link"
            href="{{ paginator.next_page_path | relative_url }}">Next</a>
         {% else %}
-        <span class="inline-block font-semibold text-gray-300 cursor-not-allowed">Next</span>
+        <span class="pagination-link is-disabled">Next</span>
         {% endif %}
     </nav>
 </section>

data/_includes/post-header.html

@@ -1,32 +1,25 @@
-<div class="max-w-screen-lg mx-auto bg-white p-5">
-    <h1 class="font-black font-sans text-2xl lg:text-7xl post-title">{{ page.title }}</h1>
-</div>
-
-<div class="max-w-screen-md mx-auto bg-white p-5">
-    <div class="flex justify-between flex-wrap my-2">
-        <div class="flex items-center mr-8">
-            <img src="{{ site.baseurl }}/{{ site.author.avatar }}" alt="{{ author.name }}"
-                 class="rounded-full w-10 h-10 mr-3 block"/>
-            <div>
-                <p class="text-gray-700 text-sm font-bold">{{ site.author.name }}</p>
-                <p class="text-gray-500 text-xs">
-                    {{ page.date | date: "%B %-d, %Y" }} - {{ page.content |
-                    number_of_words | divided_by: 200 }} min read
-                </p>
-            </div>
-        </div>
-    </div>
-
+{% assign read_minutes = page.content | number_of_words | divided_by: 200 | at_least: 1 %}
+{% assign back_to_posts_label = site.theme_text.back_to_posts_label | default: "Back to all posts" %}
+<div class="post-header">
+    <a class="post-back-link" href="{{ site.baseurl }}/blog">&larr; {{ back_to_posts_label }}</a>
+    <p class="post-header__meta">{{ page.date | date: "%b %-d, %Y" }} · {{ read_minutes }} min read</p>
     <div>
         {% assign tags = page.tags %}
         {% include post-tags.html %}
     </div>
+    <h1 class="post-title">{{ page.title }}</h1>
 
     {% if page.image %}
-    <div class="relative overflow-hidden">
-        <img src="{{ site.baseurl }}/{{ page.image }}"
-             alt="{{ page.title }}"
-             class="w-full h-auto rounded"/>
+    <div class="post-image-wrap">
+        <img src="{{ site.baseurl }}{{ page.image }}"
+             alt="{{ page.image_alt | default: page.title }}"
+             class="post-image"/>
+        <!-- Image source -->
+        {% if page.image_source %}
+        <div class="post-image-source">
+            Image source: {{ page.image_source }}
+        </div>
+        {% endif %}
     </div>
     {% endif %}
 </div>

data/_includes/post-item.html

@@ -1,24 +1,30 @@
-<article class="flex flex-col lg:flex-row items-center mb-8 pb-8 border-b border-gray-200">
+{% assign reading_minutes = post.content | number_of_words | divided_by: 200 | at_least: 1 %}
+{% assign read_article_label = site.theme_text.read_article_label | default: "Read article" %}
+<article class="post-card">
     <!-- thumbnail -->
+    {% if post.image %}
     <a href="{{ site.baseurl }}{{ post.url }}"
-       class="w-full relative block lg:min-w-[250px] lg:max-w-[250px] lg:max-h-[250px] aspect-square lg:mr-5 mb-5 lg:mb-0 rounded-lg overflow-hidden">
+       class="post-card__image">
         <img src="{{ site.baseurl }}{{ post.image }}"
-             class="absolute inset-0 w-full h-full object-cover hover:scale-105 ease-in duration-300"
-             alt="{{ post.title }}"/>
+             class="post-card__image-el"
+             alt="{{ post.image_alt | default: post.title }}"/>
     </a>
+    {% endif %}
     <!-- content -->
-    <div>
+    <div class="post-card__content">
+        <p class="post-card__meta">{{ post.date | date: "%b %-d, %Y" }} · {{ reading_minutes }} min read</p>
         {% assign tags = post.tags %}
         {% include post-tags.html %}
         <!-- title -->
-        <h2 class="text-3xl font-black mb-5 font-sans">
-            <a class="border-b-2 border-transparent hover:border-b-violet-600 ease-in duration-300"
+        <h2 class="post-card__title">
+            <a class="post-card__title-link"
                href="{{ site.baseurl }}{{ post.url }}">{{
                 post.title }}</a>
         </h2>
         <!-- excerpt -->
-        <div class="text-gray-500 text-lg mb-0">
+        <div class="post-card__excerpt">
             {{ post.excerpt | strip_html | truncatewords: 20 }}
         </div>
+        <a class="post-card__read-link" href="{{ site.baseurl }}{{ post.url }}">{{ read_article_label }} &rarr;</a>
     </div>
 </article>

data/_includes/post-navigation.html

@@ -0,0 +1,18 @@
+{% assign previous_article_label = site.theme_text.previous_article_label | default: "Previous article" %}
+{% assign next_article_label = site.theme_text.next_article_label | default: "Next article" %}
+<section class="post-navigation-shell">
+    <div class="post-navigation-shell__inner post-navigation">
+        {% if page.previous.url %}
+        <a class="post-navigation__item" href="{{ site.baseurl }}{{ page.previous.url }}">
+            <span class="post-navigation__label">{{ previous_article_label }}</span>
+            <span class="post-navigation__title">{{ page.previous.title }}</span>
+        </a>
+        {% endif %}
+        {% if page.next.url %}
+        <a class="post-navigation__item post-navigation__item--next" href="{{ site.baseurl }}{{ page.next.url }}">
+            <span class="post-navigation__label">{{ next_article_label }}</span>
+            <span class="post-navigation__title">{{ page.next.title }}</span>
+        </a>
+        {% endif %}
+    </div>
+</section>

data/_includes/post-tags.html

@@ -1,9 +1,11 @@
-<div class="flex mb-5">
+{% if tags and tags.size > 0 %}
+<div class="post-tags">
     {% for tag in tags %}
     {% assign tag_link = tag | slugify %}
     <a href="{{ site.baseurl }}/tag/{{ tag_link }}"
-       class="text-sm text-gray-500 hover:text-gray-700 mr-3">
+       class="tag-pill">
         #{{ tag }}
     </a>
     {% endfor %}
 </div>
+{% endif %}

data/_includes/reading-progress.html

@@ -0,0 +1,3 @@
+<div class="reading-progress" aria-hidden="true">
+    <span class="reading-progress__bar" data-reading-progress></span>
+</div>

data/_includes/related-posts.html

@@ -0,0 +1,49 @@
+{% assign related_limit = 3 %}
+{% assign related_count = 0 %}
+{% assign related_urls = "" %}
+{% assign related_posts_heading = site.theme_text.related_posts_heading | default: "Keep reading" %}
+
+<section class="related-posts-shell">
+    <div class="related-posts-shell__inner">
+        <h2 class="related-posts__heading">{{ related_posts_heading }}</h2>
+        <div class="related-posts">
+            {% if page.tags and page.tags.size > 0 %}
+            {% for post in site.posts %}
+            {% if post.url != page.url and related_count < related_limit %}
+            {% assign has_shared_tag = false %}
+            {% for tag in page.tags %}
+            {% if post.tags contains tag %}
+            {% assign has_shared_tag = true %}
+            {% break %}
+            {% endif %}
+            {% endfor %}
+            {% if has_shared_tag %}
+            <a class="related-posts__item" href="{{ site.baseurl }}{{ post.url }}">
+                <span class="related-posts__title">{{ post.title }}</span>
+                <span class="related-posts__meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+            </a>
+            {% assign related_urls = related_urls | append: "|" | append: post.url %}
+            {% assign related_count = related_count | plus: 1 %}
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+            {% endif %}
+
+            {% if related_count < related_limit %}
+            {% for post in site.posts %}
+            {% if post.url != page.url and related_count < related_limit %}
+            {% assign seen_key = "|" | append: post.url %}
+            {% unless related_urls contains seen_key %}
+            <a class="related-posts__item" href="{{ site.baseurl }}{{ post.url }}">
+                <span class="related-posts__title">{{ post.title }}</span>
+                <span class="related-posts__meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+            </a>
+            {% assign related_urls = related_urls | append: "|" | append: post.url %}
+            {% assign related_count = related_count | plus: 1 %}
+            {% endunless %}
+            {% endif %}
+            {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</section>

data/_includes/social-media-meta.html

@@ -0,0 +1,16 @@
+<!-- Facebook Meta Tags -->
+<meta property="og:title" content="{{ page.title | escape }}">
+<meta property="og:type" content="article">
+<meta property="og:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+<meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}">
+<meta property="og:description"
+      content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+<meta property="og:site_name" content="{{ site.title | escape }}">
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page.title | escape }}">
+<meta name="twitter:description"
+      content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+<meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+