jekyll-theme-acg 1.0.1 → 1.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f260e8d8eac56fb62b9dd43190c04b017834bf41827430f55a83939ef1f22884
-  data.tar.gz: 9b0e7e03d2cb17811982dbc2b89fd4f52985bf6769dd8512b2f1f72a3d8cda4f
+  metadata.gz: 1abc3a8fdf5221295dc69934c9fa2723bd357a6e16e14e0f66e6d0b3a29edfea
+  data.tar.gz: 861d93df0ba98250a1a095431dd5239603247a48791c7f6ab39d8613a6a67fa0
 SHA512:
-  metadata.gz: 58036eb578213ba822a9f25a0139a0b2bb87db905261af873924e874c760e7a8609b57cc587833f2f2d2b513dc87062bf91d9985337e5e3724f97e67a70a4097
-  data.tar.gz: edfe5f5e24d8d42a04ad14a3c5097e53925092fc1fd8df6008330ab9f75b5a369990a0a1e474d3b554f3c810d8c7e2e7489106a33894042a074a0e260d588ac7
+  metadata.gz: 791995911806b2a7201106587cb1f0d87401586a31dda36b9cda152f7d38e526a90b8b7cecc3225862c9e80cb7c1a905d9969dde6813bf441ebac45537211a33
+  data.tar.gz: 34b1402b4bd267a8a2d42cc09088b03bda8feb8b7699c6b2e2616998b2c309da0434d7c32a5e0aa2edf5f36df24442c96336e6b4eb8a34bf9e06350f838023ff

data/README.md

@@ -1,7 +1,59 @@
-# jekyll-theme-acg
+# Jekyll Theme ACG
+
+![](https://img.shields.io/gem/v/jekyll-theme-acg)
+![](https://img.shields.io/gem/dt/jekyll-theme-acg)
+![](https://img.shields.io/github/stars/coderzhaoziwei/jekyll-theme-acg?style=social)
+
+## Status: Beta
+
+This theme is still under development, just waiting for me...
+
+
+## Usage
+
+- Set theme in `/_config.yml`:
+
+```
+theme: jekyll-theme-acg
+```
+
+- Add gem in `/Gemfile`:
+
+```
+gem "jekyll-theme-acg"
+```
+
+- Set Front Matter in your `/index.html`:
+
+```
+---
+layout: home
+---
+```
+
+> Your homepage filename must be `index.html`, not `index.md` or others.
+
+- Build:
+
+```
+bundle update & bundle exec jekyll serve -o
+```
+
+## Documentation
+
+To be continued...
 
 
 ## Thanks
 
 - Markdown Style: https://github.com/primer/css/tree/main/src/markdown
 - Highlight JS: https://highlightjs.org
+
+
+## License
+
+MIT
+
+
+<!-- https://rubygems.org/gems/jekyll-theme-acg -->
+<!-- https://github.com/coderzhaoziwei/jekyll-theme-acg -->

data/_config.yml

@@ -8,6 +8,7 @@ github_id: coderzhaoziwei
 
 # Theme Name
 theme: jekyll-theme-acg
+background: https://cdn.jsdelivr.net/gh/coderzhaoziwei/jekyll-theme-acg/assets/images/bg.png
 
 # Theme Color
 # Default: red
@@ -21,7 +22,7 @@ baseurl:
 # Default: /assets/images/bg.png
 # Author: saino
 # Origin: https://www.pixiv.net/artworks/86925095
-themeBackground:
+
 
 
 
@@ -31,22 +32,25 @@ paginate_path: /page:num
 
 # ========== ========== ========== ========== ==========
 
-source: "source"
-destination: ".bundle"
 
-data_dir: "_data"         # /source/_data
-layouts_dir: "_layouts"   # /source/_layouts
-includes_dir: "_includes" # /source/_includes
-plugins_dir: ["_plugins"] # /source/_plugins
+exclude: [
+  "LICENSE",
+  "README.md",
+  "package.json",
+  "tailwind.config.js",
+  "yarn.lock",
+  "jekyll-theme-acg.gemspec",
+  "jekyll-theme-acg-*.gem",
+]
 
 sass:
-  sass_dir: _sass
   style: compressed
 
-collections_dir: "" # /source
+collections_dir: ""
 collections:
   posts:
     output: true
+    permalink: /:collection/:title
 
 defaults:
 - scope:
@@ -59,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/{source/_includes → _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

@@ -0,0 +1,27 @@
+{% assign color = page.color | default: site.color %}
+
+
+<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="{{ "/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 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 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>

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

@@ -0,0 +1,22 @@
+{% assign color = page.color | default: site.color %}
+{% capture output %}
+: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" }}>
+{%- 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/{source/_includes/head.html → _layouts/default.html}

@@ -1,6 +1,5 @@
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
-
-{%- comment -%}{%- endcomment -%}
+<!DOCTYPE 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">
@@ -9,18 +8,22 @@
 {% feed_meta %}
 <!-- End Jekyll Feed -->
 
-  <!-- Tailwind CSS -->
+  <!-- Tailwind Style -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css">
-  <!-- Primer Markdown 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 CSS -->
+  <!-- HighlightJS Theme VS2015 Style -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.0.1/styles/vs2015.css">
-  <!-- CSS -->
+  <!-- Theme Style -->
   <link rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
-  <!-- Scroll Bar CSS -->
   {% include style.html %}
 </head>
-{%- comment -%}{%- endcomment -%}
+<body class="flex flex-col items-center bg-black bg-opacity-50">
+  {% include header.html %}
+  {{ content }}
+  {% include footer.html %}
+</body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,54 @@
+---
+layout: default
+---
+{% 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 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 %}
+paginator.page                The number of the current page
+paginator.per_page            Number of posts per page
+paginator.posts               Posts available for the current page
+paginator.total_posts         Total number of posts
+paginator.total_pages         Total number of pages
+paginator.previous_page       The number of the previous page, or nil if no previous page exists
+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 %}
+<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 | 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 -->
+  <div class="flex flex-wrap items-center justify-center">
+    <!-- paginator.total_pages -->
+    {%- for pageCount in (1..paginator.total_pages) -%}
+    {% assign pagePath = site.paginate_path | replace: ":num", pageCount %}
+    <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={{ "/" | relative_url }}{% else %}href="{{ pagePath | relative_url }}"{% endif %}
+    {% endif %}
+
+    ><span class="block">{{ pageCount }}</span></a>
+    {%- endfor -%}
+  </div>
+  <!-- Next -->
+  <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>
+
+</div>