jekyll-theme-acg 1.0.4 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69f7be4d3a1073e7a2a0fc2609912aebb651f6c39e25089f6e02d3d19596eb10
-  data.tar.gz: '0084a9beb9f520ba0bb39ff23da51b54d28bb00db1d0c61af1262fb047eb3572'
+  metadata.gz: 815f15ec1cedc8ec4c04fb030651f2e93b9b268356effaf506c0c5f6fd18e856
+  data.tar.gz: 552d93ec31524be5543ec4e6d6bf52b7f27d38c6deae2afda0561642b3fcfe23
 SHA512:
-  metadata.gz: a7e450bfdd05eb52787d29d895f4d0fd9e7a1884d8339076e8e395cdb54087290c1dd29710a66f833281c2c74a62b150cfcd97415fa264a4644be5cf7fb784cc
-  data.tar.gz: 45b4ca5de99d925bc598b5795fd5fcc67be79d7d305b508ea9d0fd92012097870ecc19a7783439e27a97d82c12259150219195f9d235c80516621369141e07eb
+  metadata.gz: 6d7f2aee02e36f765a034b39b63cf0f6450dd21504bdbac40bbbd5b94a301e8834288e343e9e75ca0cfaf1ffb89c2f788d5dc156b6e2eeef682037758e1c9a6c
+  data.tar.gz: 848ab001e6efcf976357a2ca709cd78b48b8c3aa7d87c93f64756d60fe65ef6185854fd3c117fe27e03c99142d26b97c7e92edc3d026e9a1513afa07155e7f4b

data/README.md

@@ -1,6 +1,20 @@
 <h1 style="text-align:center;">Jekyll Theme ACG</h1>
 
-![](https://badge.fury.io/rb/jekyll-theme-acg.svg)
+<div style="text-align:center;">
+  <!-- gem version -->
+  <a href="https://rubygems.org/gems/jekyll-theme-acg">
+    <image src="https://img.shields.io/gem/v/jekyll-theme-acg"></image>
+  </a>
+  <!-- gem downloads -->
+  <a href="https://rubygems.org/gems/jekyll-theme-acg">
+    <image src="https://img.shields.io/gem/dt/jekyll-theme-acg"></image>
+  </a>
+  <!-- github stars -->
+  <a href="https://github.com/coderzhaoziwei/jekyll-theme-acg">
+    <image src="https://img.shields.io/github/stars/coderzhaoziwei/jekyll-theme-acg?style=social"></image>
+  </a>
+</div>
+
 
 ## About
 

data/_config.yml

@@ -50,6 +50,7 @@ collections_dir: ""
 collections:
   posts:
     output: true
+    permalink: /:collection/:title
 
 defaults:
 - scope:
@@ -62,14 +63,18 @@ defaults:
   values:
     layout: post
 
-plugins:
-- jekyll-gist
-- jekyll-feed
-- jekyll-seo-tag
-- jekyll-paginate
-- jekyll-spaceship
-
-# Configuration for plugin: jekyll-spaceship
+# Configuration for plugin jekyll-archives
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/
+# layout: archive
+
+# Configuration for plugin jekyll-spaceship
 # @see https://github.com/jeffreytse/jekyll-spaceship#usage
 jekyll-spaceship:
   processors:

data/_includes/article.html

@@ -0,0 +1,8 @@
+<article class="markdown-body my-4 mx-auto p-4 pb-8 max-w-acg rounded-lg shadow-xl text-black bg-{{ color }}-50 bg-opacity-75">
+  <h1>{{ page.title }}</h1>
+
+<!-- Jekyll TOC -->
+{% include toc.html html=content %}
+<!-- Jekyll TOC End -->
+{{ content }}
+</article>

data/_includes/footer.html

@@ -1,7 +1,6 @@
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+{% assign color = page.color | default: site.color %}
 
-{%- comment -%}{%- endcomment -%}
-<footer class="w-full p-2 text-xs text-{{ color }}-100 ">
+<footer class="w-full mt-4 p-2 text-sm text-{{ color }}-100 ">
   <p class="text-center">
     Powered by
     <a class="text-{{ color }}-400" href="https://jekyllrb.com" target="_block">Jekyll</a>
@@ -14,4 +13,3 @@
     · All rights reserved.
   </p>
 </footer>
-{%- comment -%}{%- endcomment -%}

data/_includes/header.html

@@ -1,31 +1,27 @@
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+{% assign color = page.color | default: site.color %}
+
 
-{%- comment -%}{%- endcomment -%}
 <header class="w-full fixed z-50 select-none bg-{{ color }}-600 bg-opacity-10 bg-blur">
   <nav class="p-4 font-serif text-xl text-{{ color }}-50 flex justify-between">
     <a class="hover:text-{{ color }}-400 text-2xl" href="{{ site.url | default: "/" | relative_url }}">{{ site.title }}</a>
     <div class="hidden md:block space-x-4">
-      <a class="hover:text-{{ color }}-400" href="/tags">Tags</a>
-      <a class="hover:text-{{ color }}-400" href="/archives">Archives</a>
-      <a class="hover:text-{{ color }}-400" href="/about">About</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/categories" | relative_url }}">Categories</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/tags" | relative_url }}">Tags</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/about" | relative_url }}">About</a>
     </div>
-    <div class="md:hidden">
-      <style>#theme-menu:focus + #theme-menu-dropdown { display: block; }</style>
-      <button
-        id="theme-menu"
-        class="focus:outline-none focus:text-{{ color }}-400 "
-      >
+    <div id="theme-menu" class="md:hidden">
+      <style>#theme-menu:hover > #theme-menu-dropdown { display: block; }</style>
+      <button class="hover:outline-none hover:text-{{ color }}-400">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
         </svg>
       </button>
-      <div class="hidden origin-top-right absolute right-1 mt-1 rounded-md py-1 bg-{{ color }}-100 focus:block focus:outline-none" id="theme-menu-dropdown">
-        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:text-{{ color }}-400" href="/tags">Tags</a>
-        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:text-{{ color }}-400" href="/archives">Archives</a>
-        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:text-{{ color }}-400" href="/about">About</a>
+      <div class="hidden origin-top-right absolute right-1 rounded-md py-1 bg-{{ color }}-100 bg-opacity-50 focus:block focus:outline-none" id="theme-menu-dropdown">
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/categories" | relative_url }}">Categories</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/tags" | relative_url }}">Tags</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/about" | relative_url }}">About</a>
       </div>
     </div>
 
   </nav>
 </header>
-{%- comment -%}{%- endcomment -%}

data/_includes/item-category.html

@@ -0,0 +1,26 @@
+{% capture workspace %}
+  {% assign color = page.color | default: site.color %}
+  {% assign name = include.name | default: "CATEGORY" %}
+  {% assign count = include.count | default: 0 %}
+  {% assign href = "/categories/" | append: name | relative_url %}
+  {% assign zoom = include.zoom | default: false %}
+
+  {% if zoom %}
+    {% assign textClass = "text-2xl text-color-50 text-opacity-75 " | replace: "color", color  %}
+    {% assign svgClass = "h-8 w-8" %}
+    {% assign countClass = "text-color-50 text-opacity-50" | replace: "color", color %}
+  {% else %}
+    {% assign textClass = "text-sm text-color-500 text-opacity-75" | replace: "color", color  %}
+    {% assign svgClass = "h-4 w-4" %}
+    {% assign countClass = "text-color-500 text-opacity-50" | replace: "color", color %}
+  {% endif %}
+
+{% endcapture %}
+
+<a class="mx-px {{ textClass }} text-opacity-75 flex items-center" href="{{ href }}">
+  <svg xmlns="http://www.w3.org/2000/svg" class="{{ svgClass }}" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
+  <span class="inline-block p-1">{{ name }}</span>
+  {% if count > 0 %}
+  <span class="inline-block p-1 {{ countClass }}">{{ count }}</span>
+  {% endif %}
+</a>

data/_includes/item-date.html

@@ -0,0 +1,10 @@
+{% capture workspace %}
+  {% assign color = page.color | default: site.color %}
+  {% assign date = include.date | date: "%Y-%m-%d" %}
+  "%Y-%m-%d %H:%M"
+{% endcapture %}
+
+<a class="mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center" href="{{ href }}">
+  <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+  <span class="inline-block p-1 whitespace-nowrap">{{ date }}</span>
+</a>

data/_includes/item-pin.html

@@ -0,0 +1,2 @@
+{% assign color = page.color | default: site.color %}
+<svg xmlns="http://www.w3.org/2000/svg" class="absolute -left-2 -top-2 h-6 w-6 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></svg>

data/_includes/item-tag.html

@@ -0,0 +1,29 @@
+{% capture workspace %}
+  {% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+
+  {% capture name %}{{ include.name | default: "TAG" }}{% endcapture %}
+  {% assign count = include.count | default: 0 %}
+
+  {% capture href %}{{ "/tags/" | append: name | relative_url }}{% endcapture %}
+
+  {% assign zoom = include.zoom | default: false %}
+
+  {% if zoom %}
+    {% assign textClass = "text-2xl text-color-50 text-opacity-75 " | replace: "color", color  %}
+    {% assign svgClass = "h-8 w-8" %}
+    {% assign countClass = "text-color-50 text-opacity-50" | replace: "color", color %}
+  {% else %}
+    {% assign textClass = "text-sm text-color-500 text-opacity-75" | replace: "color", color  %}
+    {% assign svgClass = "h-4 w-4" %}
+    {% assign countClass = "text-color-500 text-opacity-50" | replace: "color", color %}
+  {% endif %}
+
+{% endcapture %}
+
+<a class="mx-px {{ textClass }} flex items-center" href="{{ href }}">
+  <svg xmlns="http://www.w3.org/2000/svg" class="inline-block {{ svgClass }}" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>
+  <span class="inline-block p-1">{{ name }}</span>
+  {% if count > 0 %}
+  <span class="inline-block p-1 {{ countClass }}">{{ count }}</span>
+  {% endif %}
+</a>

data/_includes/posts.html

@@ -0,0 +1,53 @@
+{% capture workspace %}
+  {% assign posts1 = "" | split: "" %}
+  {% assign posts2 = "" | split: "" %}
+
+  {% for post in include.posts %}
+    {% if post.pin %}
+      {% assign posts1 = posts1 | push: post %}
+    {% else %}
+      {% assign posts2 = posts2 | push: post %}
+    {% endif %}
+  {% endfor %}
+
+  {% assign posts = posts1 | concat: posts2 %}
+
+  {% if page.layout == "home" %}
+    {% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+    {% assign count = paginator.posts | size | minus: 1 %}
+    {% assign minIndex = offset %}
+    {% assign maxIndex = offset | plus: count %}
+  {% else %}
+    {% assign minIndex = 0 %}
+    {% assign maxIndex = posts.size | minus: 1 %}
+  {% endif %}
+
+{% endcapture %}
+
+{% for index in (minIndex..maxIndex) %}
+  {% capture workspace %}
+    {% assign post = posts[index] %}
+    {% assign pin = post.pin | default: false %}
+    {% assign href = post.id | relative_url %}
+    {% assign title = post.title | default: "NO TITLE" | escape %}
+    {% assign description = post.description | default: post.excerpt | default: site.description | strip_html %}
+    {% assign date = post.date %}
+    {% assign tags = post.tags | default: nil %}
+    {% assign categories = post.categories | default: nil %}
+  {% endcapture %}
+
+<div class="relative p-3 pb-1 rounded-lg flex flex-col justify-between bg-{{ color }}-50 bg-opacity-75 text-black">
+  {% if post.pin %}{% include item-pin.html %}{% endif %}
+  <a class="block text-3xl font-serif font-medium" href="{{ href }}">{{ title }}</a>
+  <span class="block p-1 text-sm font-extralight">{{ description }}</span>
+
+  <div class="flex flex-wrap select-none">
+    <div class="flex-grow">{% include item-date.html date=date %}</div>
+    <div class="flex flex-wrap">
+      {% for category in categories %}{% include item-category.html name=category %}{% endfor %}
+      {% for tag in tags %}{% include item-tag.html name=tag %}{% endfor %}
+    </div>
+  </div>
+</div>
+
+{% endfor %}

data/_includes/style.html

@@ -1,80 +1,22 @@
-{% capture style %}style{% endcapture %}
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+{% assign color = page.color | default: site.color %}
 {% capture output %}
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-::-webkit-scrollbar-track-piece {
-  background: var(--{{ color }}-200);
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: var(--{{ color }}-600);
-  background-image: repeating-linear-gradient(
-    -45deg,
-    var(--{{ color }}-600) 0,
-    var(--{{ color }}-600) 32px,
-    var(--{{ color }}-400) 32px,
-    var(--{{ color }}-400) 36px
-  );
-}
-::-webkit-scrollbar-thumb:vertical {
-  height: 4px;
-}
-::-webkit-scrollbar-thumb:horizontal {
-  width: 4px;
-}
-
-.markdown-body a {
-  color: var(--{{ color }}-600);
-  font-weight: 500;
-}
-.markdown-body a.reversefootnote {
-  font-family: monospace;
-}
-.markdown-body h1, .markdown-body h2 {
-  border-bottom-color: var(--{{ color }}-600);
-}
-.markdown-body hr {
-  background-color: var(--{{ color }}-600);
-}
-.markdown-body blockquote {
-  color: var(--{{ color }}-500);
-  border-left-color: var(--{{ color }}-600);
-}
-.markdown-body code:not(.hljs) {
-  color: var(--{{ color }}-600);
-}
-
-.markdown-body .task-list-item {
-  display: flex;
-  align-items: center;
-}
-.markdown-body .task-list-item input[type="checkbox"] {
-  appearance: none;
-}
-.markdown-body .task-list-item input[type="checkbox"]::before{
-  content: "";
-  display: block;
-  width: 1em;
-  height: 1em;
-  line-height: 1;
-  margin-right: 0.5em;
-  text-align: center;
-  border-radius: 4px;
-  color: white;
-  background-color: var(--{{ color }}-600);
-}
-.markdown-body .task-list-item input[type="checkbox"][checked]::before{
-  content: "\2713";
-}
-
-.markdown-body .footnotes {
-  padding-top: 2em;
+:root {
+  --theme-50: var(--{{ color }}-50);
+  --theme-100: var(--{{ color }}-100);
+  --theme-200: var(--{{ color }}-200);
+  --theme-300: var(--{{ color }}-300);
+  --theme-400: var(--{{ color }}-400);
+  --theme-500: var(--{{ color }}-500);
+  --theme-600: var(--{{ color }}-600);
+  --theme-700: var(--{{ color }}-700);
+  --theme-800: var(--{{ color }}-800);
+  --theme-900: var(--{{ color }}-900);
+}
+.bg-image {
+  background-image: url("{{ page.background | default: site.background | relative_url }}");
 }
 {% endcapture %}
 
 {%- comment -%}{%- endcomment -%}
-<{{ style }}>{{ output }}</{{ style }}>
+<{{ "style" }}>{{ output }}</{{ "style" }}>
 {%- comment -%}{%- endcomment -%}

data/_layouts/categories.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+{% assign color = page.color | default: site.color %}
+
+{% assign categoryList = "" | split: "" %}
+{% for item in site.categories %}
+  {% assign categoryName = item[0] %}
+  {% assign categoryList = categoryList | push: categoryName %}
+{% endfor %}
+{% assign categoryList = categoryList | sort %}
+
+<div class="min-h-screen py-16 flex flex-wrap justify-center items-center content-center select-none">
+  <div class="w-full py-8 font-serif text-4xl text-{{ color }}-50 text-center">{{ site.CATEGORIES | default: "CATEGORIES" }}</div>
+  {% for categoryName in categoryList %}
+    {% assign categoryCount = site.categories[categoryName].size %}
+    <div class="m-1 px-2 bg-{{ color }}-50 bg-opacity-75 rounded">
+      {% include item-category.html name=categoryName count=categoryCount %}
+    </div>
+  {% endfor %}
+</div>

data/_layouts/category.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+{% assign color = page.color | default: site.color %}
+{% assign title = page.title | capitalize %}
+
+<div class="w-acg min-h-screen">
+  <div class="w-full mt-16 p-16 flex justify-center">
+    {% include item-category.html name=page.title zoom=true %}
+  </div>
+  <div class="w-full m-auto p-4 flex flex-col space-y-4">
+    {% include posts.html posts=page.posts %}
+  </div>
+</div>

data/_layouts/default.html

@@ -1,8 +1,29 @@
-{% capture lang %}{{ page.lang | default: site.lang | default: "en-US" }}{% endcapture %}
-{%- comment -%}{%- endcomment -%}
 <!DOCTYPE html>
-<html lang="{{ lang }}" class="min-h-screen bg-image bg-cover bg-center bg-fixed">
-{% include head.html %}
-{% include body.html %}
+<html lang="{{ page.lang | default: site.lang | default: "en-US" }}" class="min-h-screen bg-image bg-cover bg-center bg-fixed">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+{% seo %}<!-- Begin Jekyll Feed -->
+{% feed_meta %}
+<!-- End Jekyll Feed -->
+
+  <!-- Tailwind Style -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css">
+  <!-- Primer Markdown Style -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/primer-markdown@4.0.0/build/build.css">
+  <!-- HighlightJS -->
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
+  <!-- HighlightJS Theme VS2015 Style -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.0.1/styles/vs2015.css">
+  <!-- Theme Style -->
+  <link rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
+  {% include style.html %}
+</head>
+<body class="flex flex-col items-center bg-black bg-opacity-50">
+  {% include header.html %}
+  {{ content }}
+  {% include footer.html %}
+</body>
 </html>
-{%- comment -%}{%- endcomment -%}

data/_layouts/home.html

@@ -1,11 +1,16 @@
 ---
 layout: default
 ---
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+{% assign color = page.color | default: site.color %}
+{% assign title = page.title | default: site.title %}
+{% assign description = page.description | default: site.description %}
 
-<div class="w-full max-w-acg m-auto p-4 grid gap-6 grid-cols-1">
+<div class="w-full h-screen flex flex-col justify-center items-center select-none text-{{ color }}-50">
+  <div class="font-serif text-4xl w-3/4 text-center py-4">{{ title }}</div>
+  <div class="font-sans text-base w-2/3 text-center">{{ description }}</div>
+</div>
 
-{%- comment -%}
+{% comment %}
 paginator.page                The number of the current page
 paginator.per_page            Number of posts per page
 paginator.posts               Posts available for the current page
@@ -15,91 +20,15 @@ paginator.previous_page       The number of the previous page, or nil if no prev
 paginator.previous_page_path  The path to the previous page, or nil if no previous page exists
 paginator.next_page           The number of the next page, or nil if no subsequent page exists
 paginator.next_page_path      The path to the next page, or nil if no subsequent page exists
-{%- endcomment -%}
-
-{% capture workspace %}
-  {% assign posts1 = "" | split: "" %}
-  {% assign posts2 = "" | split: "" %}
-
-  {% for post in site.posts %}
-    {% if post.pin %}
-      {% assign posts1 = posts1 | push: post %}
-    {% else %}
-      {% assign posts2 = posts2 | push: post %}
-    {% endif %}
-  {% endfor %}
-
-  {% assign posts = posts1 | concat: posts2 %}
-
-  {% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
-  {% assign count = paginator.posts | size | minus: 1 %}
-  {% assign minIndex = offset %}
-  {% assign maxIndex = offset | plus: count %}
-{% endcapture %}
-
-{%- for index in (minIndex..maxIndex) -%}
-
-{% capture workspace %}
-  {% assign index = offset | plus: i %}
-  {% assign post = posts[index] %}
-
-  {% capture url %}{{ post.id | relative_url }}{% endcapture %}
-  {% capture title %}{{ post.title | default: "NO TITLE" | escape }}{% endcapture %}
-  {% capture date %}{{ post.date | date: "%Y-%m-%d" }}{% endcapture %}
-  {% capture description %}{{ post.description | default: post.excerpt | default: site.description | strip_html }}{% endcapture %}
-
-  {% assign tags = post.tags | default: nil %}
-  {% assign categories = post.categories | default: nil %}
-  {% assign pin = post.pin | default: false %}
-{% endcapture %}
-  <!-- PostItem -->
-  <div class="relative p-3 pb-1 rounded-lg flex flex-col justify-between bg-{{ color }}-50 bg-opacity-75 text-black">
-    <!-- Pin -->
-    {% if pin %}
-    <svg xmlns="http://www.w3.org/2000/svg" class="absolute -left-2 -top-2 h-6 w-6 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-    </svg>
-    {% endif %}
-
-    <a class="block text-3xl font-serif font-medium" href="{{ url }}">{{ title }}</a>
-
-    <span class="block p-1 text-sm font-extralight">{{ description }}</span>
-
-    <div class="flex flex-wrap select-none">
-      <!-- Date -->
-      <div class="flex-grow mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center self-end">
-        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
-        <span class="inline-block p-1 whitespace-nowrap">{{ date }}</span>
-      </div>
-
-      <div class="flex flex-wrap">
-        <!-- Categories -->
-        {% for category in categories %}
-        <!-- Category -->
-        <a class="mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center" href="">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
-          <span class="inline-block p-1">{{ category }}</span>
-        </a>
-        {% endfor %}
-        <!-- Tags -->
-        {%- for tag in tags -%}
-        <!-- Tag -->
-        <a class="mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center" href="">
-          <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>
-          <span class="inline-block p-1">{{ tag }}</span>
-        </a>
-        {%- endfor -%}
-
-      </div>
-    </div>
-  </div>
-{%- endfor -%}
+{% endcomment %}
+<div class="w-full max-w-acg m-auto p-4 grid gap-6 grid-cols-1">
+  {% include posts.html posts=site.posts%}
 
 
 <!-- Paginator -->
 <div class="flex justify-between items-center">
   <!-- Prev -->
-  <a href="{{ paginator.previous_page_path }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
+  <a href="{{ paginator.previous_page_path | relative_url }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 text-{{ color }}-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" /></svg>
   </a>
   <!-- Pages -->
@@ -110,14 +39,14 @@ paginator.next_page_path      The path to the next page, or nil if no subsequent
     <a class="flex justify-center items-center w-8 h-8 m-px rounded-full text-sm font-mono bg-{{ color }}-50 bg-opacity-75 text-black text-opacity-75 border border-transparent hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400 {%- if pageCount == paginator.page %} text-{{ color }}-400 select-none{% endif -%}"
 
     {% if pageCount != paginator.page %}
-      {% if pageCount == 1 %}href="/"{% else %}href="{{ pagePath }}"{% endif %}
+      {% if pageCount == 1 %}href={{ "/" | relative_url }}{% else %}href="{{ pagePath | relative_url }}"{% endif %}
     {% endif %}
 
     ><span class="block">{{ pageCount }}</span></a>
     {%- endfor -%}
   </div>
   <!-- Next -->
-  <a href="{{ paginator.next_page_path }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
+  <a href="{{ paginator.next_page_path | relative_url }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 text-{{ color }}-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
   </a>
 </div>