jekyll-theme-acg 1.0.2 → 1.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f5ff29da0d09a68067bfdcde86d45901fd78a56e59c9cd246bb73a203e513a2
-  data.tar.gz: eabb56cc9c7cb79d665991904c23af41f1d663a92cecb22c7f5195614f92e8ee
+  metadata.gz: 2a1bfc82c9da9620e8757ebb6f816be5530ea937596c77d2839effe91d98bf42
+  data.tar.gz: fbd05c7e4a65466fceca8dd3e51cf75de0464ad11d2c91feb284c413e974b3f7
 SHA512:
-  metadata.gz: 89e82303b8cfa543cba6057cf0c38e0451cca6ee5042047af65eb9b00c979e0a48cb7ad032294935148ccc697c71b1e8db1cfa5949180f5483eae46201232ed5
-  data.tar.gz: 34e19f348a5af5a1f8694918ffa03281261d1f30aacb3040be2a5f8343a113ae4425a39997163423d5e49738997ea8775852eaf8bdadee9e8d84656fbec64969
+  metadata.gz: 43cda9abfb9aea262840acd9a253fe841a07cb51916b3eb980e9ab83db621600cbfd4a89a2da74d02475814e60daca52dabf8b46b9e2a176a79b24f615f66bbf
+  data.tar.gz: afe48d1ef08e8acd5ac59171763b21945a4630633a0dcdf9a8ba3639f51d4dd3989f83439f279c2f2e609884f4adab9832139e09486d15a92d2ee8ed6456f2e1

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

@@ -1,74 +1,81 @@
 lang: zh-CN
 title: Jekyll Theme ACG
 description: An awesome theme for Jekyll.
-
 author: Coder Zhao
 email: coderzhaoziwei@outlook.com
-github_id: coderzhaoziwei
 
 # Theme Name
 theme: jekyll-theme-acg
+acg:
+  categories: Categories
+  tags: Tags
+  about: About
+  error: Page Not Found.
+  github: coderzhaoziwei
 
 # Theme Color
 # Default: red
 # Options: red, blue, pink, green, yellow, purple
 color: red
-
-url:
-baseurl:
-
 # Theme Background Image Path
 # Default: /assets/images/bg.png
 # Author: saino
 # Origin: https://www.pixiv.net/artworks/86925095
-themeBackground:
-
+background: https://cdn.jsdelivr.net/gh/coderzhaoziwei/jekyll-theme-acg/assets/images/bg.png
 
+url:
+baseurl:
+paginate: 10
 
 show_excerpt: true
-paginate: 10
 paginate_path: /page:num
 
 # ========== ========== ========== ========== ==========
 
-
 exclude: [
   "LICENSE",
   "README.md",
   "package.json",
   "tailwind.config.js",
   "yarn.lock",
-  "jekyll-theme-acg.gemspec",
-  "jekyll-theme-acg-*.gem",
+  "*.gem",
+  "*.gemspec",
 ]
 
-sass:
-  style: compressed
-
 collections_dir: ""
 collections:
   posts:
     output: true
+    permalink: /:collection/:title
 
 defaults:
 - scope:
     path: "" # all files in the project
   values:
-    layout: default
+    layout: page
 - scope:
     path: ""
     type: posts
   values:
     layout: post
 
-plugins:
-- jekyll-gist
-- jekyll-feed
-- jekyll-seo-tag
-- jekyll-paginate
-- jekyll-spaceship
+sass:
+  style: compressed
+
+
+# Jekyll Archives
+# @see https://github.com/jekyll/jekyll-archives
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: page
+    tag: page
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/
+
 
-# Configuration for plugin: jekyll-spaceship
+# Jekyll Spaceship
 # @see https://github.com/jeffreytse/jekyll-spaceship#usage
 jekyll-spaceship:
   processors:
@@ -82,18 +89,18 @@ jekyll-spaceship:
     - element-processor
   mathjax-processor:
     src:
-      - https://polyfill.io/v3/polyfill.min.js?features=es6
+      # - https://polyfill.io/v3/polyfill.min.js?features=es6
       - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
     config:
       tex:
         inlineMath:
-          - ['$','$']
-          - ['\(','\)']
+          - ["$", "$"]
+          - ["\(", "\)"]
         displayMath:
-          - ['$$','$$']
-          - ['\[','\]']
+          - ["$$", "$$"]
+          - ["\[", "\]"]
       svg:
-        fontCache: 'global'
+        fontCache: "global"
     optimize: # optimization on building stage to check and add mathjax scripts
       enabled: true # value `false` for adding to all pages
       include: []   # include patterns for math expressions checking (regexp)
@@ -103,29 +110,29 @@ jekyll-spaceship:
     css:
       class: plantuml
     syntax:
-      code: 'plantuml!'
-      custom: ['@startuml', '@enduml']
+      code: "plantuml!"
+      custom: ["@startuml", "@enduml"]
     src: http://www.plantuml.com/plantuml/svg/
   mermaid-processor:
     mode: default  # mode value 'pre-fetch' for fetching image at building stage
     css:
       class: mermaid
     syntax:
-      code: 'mermaid!'
-      custom: ['@startmermaid', '@endmermaid']
+      code: "mermaid!"
+      custom: ["@startmermaid", "@endmermaid"]
     config:
       theme: default
     src: https://mermaid.ink/svg/
   media-processor:
     default:
-      id: 'media-{id}'
-      class: 'media'
-      width: '100%'
+      id: "media-{id}"
+      class: "media"
+      width: "100%"
       height: 350
       frameborder: 0
-      style: 'max-width: 600px; outline: none;'
-      allow: 'encrypted-media; picture-in-picture'
+      style: "max-width: 600px; outline: none;"
+      allow: "encrypted-media; picture-in-picture"
   emoji-processor:
     css:
       class: emoji
-    src: https://github.githubassets.com/images/icons/emoji/
+    # src: https://github.githubassets.com/images/icons/emoji/

data/_includes/head-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/_includes/item-category.html

@@ -0,0 +1,25 @@
+{% 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 title = include.title | default: false %}
+
+{% if title %}
+  {% assign a = "mx-px text-4xl text-color-100 text-opacity-75 flex items-center" %}
+{% else %}
+  {% assign a = "mx-px text-sm  text-color-500 text-opacity-75 flex items-center" %}
+{% endif %}
+
+{% if title %}
+  {% assign svg = "h-8 w-8 m-1" %}
+{% else %}
+  {% assign svg = "h-4 w-4" %}
+{% endif %}
+
+{% capture output %}
+<a class="{{ a | replace: "color", color }}" href="{{ href }}"><svg xmlns="http://www.w3.org/2000/svg" class="{{ svg }}" 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 text-{{ color }}-500 text-opacity-50">{{ count }}</span>{% endif %}</a>
+{% endcapture %}
+
+{% endcapture %}{{ output | strip }}

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,25 @@
+{% capture workspace %}
+
+{% assign color = page.color | default: site.color %}
+{% assign name = include.name | default: "TAG" %}
+{% assign count = include.count | default: 0 %}
+{% assign href = "/tags/" | append: name | relative_url %}
+{% assign title = include.title | default: false %}
+
+{% if title %}
+  {% assign a = "mx-px text-4xl text-color-100 text-opacity-75 flex items-center" %}
+{% else %}
+  {% assign a = "mx-px text-sm  text-color-500 text-opacity-75 flex items-center" %}
+{% endif %}
+
+{% if title %}
+  {% assign svg = "h-8 w-8 m-1" %}
+{% else %}
+  {% assign svg = "h-4 w-4" %}
+{% endif %}
+
+{% capture output %}
+<a class="{{ a | replace: "color", color }}" href="{{ href }}"><svg xmlns="http://www.w3.org/2000/svg" class="{{ svg }}" 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 text-{{ color }}-500 text-opacity-50">{{ count }}</span>{% endif %}</a>
+{% endcapture %}
+
+{% endcapture %}{{ output | strip }}

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/toc.html

@@ -50,8 +50,4 @@
     {% capture output %}{{ output }}</li>{% if include.ordered %}</ol>{% else %}</ul>{% endif %}{% endcapture %}
   {% endfor %}
 
-{% endcapture %}
-
-{%- comment -%}{%- endcomment -%}
-{{ output }}
-{%- comment -%}{%- endcomment -%}
+{% endcapture %}{{ output }}

data/_layouts/default.html

@@ -1,8 +1,72 @@
-{% 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 head-style.html %}
+
+</head>
+
+<body class="flex flex-col items-center bg-black bg-opacity-50">
+
+{% 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 }}">{{ site.acg.categories }}</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/tags" | relative_url }}">{{ site.acg.tags }}</a>
+      <a class="hover:text-{{ color }}-400" href="{{ "/about" | relative_url }}">{{ site.acg.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 }}">{{ site.acg.categories }}</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/tags" | relative_url }}">{{ site.acg.tags }}</a>
+        <a class="block px-4 py-2 text-sm text-{{ color }}-600 hover:bg-{{ color }}-200" href="{{ "/about" | relative_url }}">{{ site.acg.about }}</a>
+      </div>
+    </div>
+  </nav>
+</header>
+
+{{ content }}
+
+<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>
+    ·
+    <a class="text-{{ color }}-400" href="https://github.com/coderzhaoziwei/jekyll-theme-acg" target="_block">Jekyll Theme ACG</a>
+  </p>
+  <p class="text-center">
+    Copyright {{ "now" | date: "%Y" }}
+    <a class="text-{{ color }}-400" href="https://github.com/{{ site.acg.github }}" target="_block">{{ site.author }}</a>
+    · All rights reserved.
+  </p>
+</footer>
+
+</body>
 </html>
-{%- comment -%}{%- endcomment -%}