jekyll-theme-kagami 0.1.9 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 9519b985559d00cd17536b8a5765c66340785f2c
-  data.tar.gz: 0ab019dafd70d6d683790d4312a1bd4554195041
+SHA256:
+  metadata.gz: 19895b30a3f5482123635a2a024a0bc5a643d95dc76c0076f2d0a302436c62e5
+  data.tar.gz: 8f26714b5bb4ae0c9ebb56df2541eb9d4d3a673cc4a2ed7838c19e2a36446b68
 SHA512:
-  metadata.gz: 01cb2200b9862b0b286016b97ce6915d25385ba512b87c973f3eff34e80c2821e07931d9daa190a23f1f9be46bdd42b95710bd5add3e0ebe1aaab6f3842d499a
-  data.tar.gz: 1d7e832a297a9a1c1e97218823689ccf50c09c62a14dffd9a59c67c72189d617c331d6f0f7716f1dcb137ba3b784f872e984b651108db99faaf4a91ee585035b
+  metadata.gz: c1e2358a12f50e7fb89cd8fe8fb161eeda4363af06a5d7b565d8ac9ce9c2c18e6df581b98e8ca8fb950563ca0e5e18799c7cd4b8e02462bd13103abec6511cfb
+  data.tar.gz: d80d68bd36f4c1fd7b0daaf91e43c3060715c568240cdbd19286893317cc90608fbc63691484834e2a18070ad4008599697eb2bbdeaab7ff855f899647461d31

data/README.md

@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/kamikat/jekyll-theme-kagami.svg?branch=master)](https://travis-ci.org/kamikat/jekyll-theme-kagami)
 [![Gem Version](https://badge.fury.io/rb/jekyll-theme-kagami.svg)](https://badge.fury.io/rb/jekyll-theme-kagami)
 
-A peaceful theme for Jekyll and GitHub Pages.
+Simple and clean theme for Jekyll and GitHub Pages.
 
 ![Screenshot](https://s2.banana.moe/docs/kagami-preview@2x.png)
 
@@ -29,6 +29,19 @@ Or install it yourself as:
 
     $ gem install jekyll-theme-kagami
 
+### GitHub Pages
+
+Jekyll build is integrated with GitHub Pages with limited function. This section is intended for those who
+want to use the theme with GitHub Pages hosted sites.
+
+1. Download latest gem file from https://rubygems.org/gems/jekyll-theme-kagami
+2. Run `gem unpack [path-to-downloaded-gem-file] --target=.` on jekyll site project folder
+3. Delete the line `theme: ...` in `_config.yml`
+
+Zip archive downloaded from release page may not work because GitHub does not pack necessary files from submodules.
+
+Instruction 1 and 2 can also work when you decide to upgrade your installation.
+
 ## Usage
 
 ### Social account links
@@ -53,11 +66,9 @@ Add the following lines to choose a color scheme:
 color_scheme: github
 ```
 
-### Enabling comments (via Disqus)
-
-Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post.
+### Comment service (Disqus or Gitalk)
 
-To enable it, add the following lines to your Jekyll site:
+Add the following lines to your Jekyll site to enable Disqus comment service:
 
 ```yaml
 disqus_shortname: my_disqus_shortname
@@ -65,11 +76,23 @@ disqus_shortname: my_disqus_shortname
 
 You can find out more about Disqus' shortnames [here](https://help.disqus.com/customer/portal/articles/466208).
 
-Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production`
+For [Gitalk](https://github.com/gitalk/gitalk#options):
+
+```yaml
+gitalk:
+  id: <clientID>
+  secret: <clientSecret>
+  repo: <repo>
+  owner: <owner> # (optional) if not set, value of `github_username` will be used
+  admin: <admin> # (optional) if not set, value of `github_username` will be used
+  proxy: ...     # (optional)
+```
+
+By default, comment service will only be enabled in production mode, set an environment `JEKYLL_ENV=production` for local test.
 
-If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that post's YAML Front Matter.
+If you don't want to comments for particular posts you can disable that by adding `comments: false` to the post's YAML Front Matter.
 
-### Enabling Google Analytics
+### Google Analytics
 
 To enable Google Anaytics, add the following lines to your Jekyll site:
 
@@ -79,16 +102,15 @@ google_analytics: UA-NNNNNNNN-N
 
 Google Analytics will only appear in production, i.e., `JEKYLL_ENV=production`
 
-### Navigation
+### Navigation Bar
 
-Pages and posts can be listed as navigation item in header of pages. Add following frontmatter will make it
+Pages and posts can be registered as navigation item with following frontmatter:
 
 ```yaml
-navlevel: header
-navtitle: Awesome Title # optional, specifies the text to display on navigation item
+navbar_title: Awesome Title # specifies the text to display as navigation item
 ```
 
-Navigation items are ordered in alphabetical order by default in Jekyll. While you can adjust the order manually using
+Navigation items are ordered in alphabetical order by default in Jekyll. Adjust the order manually with a `position` value:
 
 ```yaml
 position: 999
@@ -96,7 +118,7 @@ position: 999
 
 ### Tags and category
 
-Layout file `post-list` supports filters by tag or category. Create pages with following frontmatter will generate a filtered post list.
+Layout file `post-list` supports filtering by tag or category. Create pages with following frontmatter will generate a filtered post list.
 
 ```yaml
 title: Title of Tag Page
@@ -117,7 +139,7 @@ Results from multiple filters are combined (logical 'or') into the result.
 
 A more flexible filter strategy is supported by supplying liquid expression to `by_expression` parameter in which post object can be referenced by the name `post`.
 
-### Enabling MathJax
+### MathJax
 
 You can use MathJax with Kramdown's [built-in support](https://kramdown.gettalong.org/syntax.html#math-blocks).
 
@@ -128,6 +150,17 @@ or post's front matter stuff:
 mathjax: true
 ```
 
+### Mermaid
+
+To enable [mermaid](https://mermaid-js.github.io/mermaid/), add following line to
+the site configuration or post's front matter stuff:
+
+```yaml
+mermaid: true
+```
+
+Code blocks with `mermaid` language tag should be transformed into diagrams.
+
 ### Use `.side-note` and `.retina2x`
 
 Taking advantages of [Block/span IAL](https://kramdown.gettalong.org/syntax.html#block-ials),
@@ -153,7 +186,7 @@ Bug reports and pull requests are welcome on GitHub at <https://github.com/kamik
 
 To set up your environment to develop this theme, run `bundle install`.
 
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve -s example` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
 

data/_includes/font-fix.html

@@ -0,0 +1,12 @@
+<script>
+  (function(elements) {
+    var elements = Array.prototype.slice.call(document.getElementsByClassName('baseline-fix'));
+    for (var i = 0; i != elements.length; i++) {
+      var el = elements[i];
+      el.innerHTML = el.innerHTML.replace(/[\u2000-\u206e⸀-\u2e7e⺀-\u2efe⼀-\u2fde⿰-\u2ffe\u3000-〾\u3040-ゞ゠-ヾ\u3100-\u312e\u3130-ㆎ㆐-㆞ㆠ-\u31be㇀-\u31eeㇰ-ㇾ㈀-㋾㌀-㏾㐀-\u4dbe一-\u9ffe\ua960-\ua97e가-\ud7ae\ud7b0-\ud7fe豈-\ufafe︰-﹎\uff00-￮]|[\ud840-\ud868\ud86a-\ud86c][\udc00-\udfff]|\ud82c[\udc00-\udcfe]|\ud869[\udc00-\udede\udf00-\udfff]|\ud86d[\udc00-\udf3e\udf40-\udfff]|\ud86e[\udc00-\udc1e]|\ud87e[\udc00-\ude1e]/g, function (ch) {
+        return '<span class="baseline-fix-block">' + ch + '<' + '/span>';
+      });
+      el.classList.remove('baseline-fix');
+    }
+  })(Array.prototype.slice.call(document.getElementsByClassName('baseline-fix')));
+</script>

data/_includes/gitalk.html

@@ -0,0 +1,18 @@
+<div id="gitalk-container"></div>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
+<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
+<script>
+    var gitalk = new Gitalk({
+        id: '{{ page.title }}',
+        clientID: '{{ site.gitalk.id }}',
+        clientSecret: '{{ site.gitalk.secret }}',
+        repo: '{{ site.gitalk.repo | default: site.gitalk.repository }}',
+        owner: '{{ site.gitalk.owner | default: site.github_username }}',
+        admin: ['{{ site.gitalk.admin | default: site.github_username }}'],
+        body: location.href,
+        proxy: '{{ site.gitalk.proxy | default: "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token" }}',
+        language: '{{ site.lang | default: "en" }}',
+        distractionFreeMode: false
+    })
+    gitalk.render('gitalk-container')
+</script>

data/_includes/head.html

@@ -6,9 +6,10 @@
   <title>{% if page.title %}{{ page.title | append: " - " | append: site.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
   <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
 
-  <link rel="stylesheet" href="{{ "/assets/styles/core.css" | relative_url }}">
-  <link rel="stylesheet" href="{{ "/assets/styles/fontello.css" | relative_url }}">
-  <link rel="stylesheet" href="{{ page.color_scheme | default: site.color_scheme | default: "default" | prepend: "/assets/styles/highlighting/" | append: ".css" | relative_url }}">
+  {% assign v = site.time | date: "%Y%m%d%H%M%S" %}
+  <link rel="stylesheet" href="{{ "/assets/styles/core.css?v=" | append: v | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/styles/fontello.css?v=" | append: v | relative_url }}">
+  <link rel="stylesheet" href="{{ page.color_scheme | default: site.color_scheme | default: "default" | prepend: "/assets/styles/highlighting/" | append: ".css?v=" | append: v | relative_url }}">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">

data/_includes/header.html

@@ -1,14 +1,6 @@
 <header class="post-header">
   <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
-  <h1 class="post-title">{{ page.title }}</h1>
-  <nav class="site-nav">
-    <div class="page-list">
-      {% assign sorted_pages = site.pages | where_exp: "page", "page.navlevel == 'header'" | sort: "position" %}
-      {% for my_page in sorted_pages %}
-      <a class="page-link" href="{{ my_page.url | relative_url }}" >{{ my_page.navtitle | default: my_page.title | escape }}</a>
-      {% endfor %}
-    </div>
-  </nav>
+  <h1 class="post-title baseline-fix" itemprop="name headline">{{ page.title | escape | replace: "​", "<wbr>" }}</h1>
 </header>
 
 {% if page.cover_url %}

data/_includes/mermaid.html

@@ -0,0 +1,14 @@
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script type="text/javascript">
+  (function () {
+    mermaid.init({ startOnLoad: true }, "pre code.language-mermaid", function () {
+      const codeBlock = document.querySelector('code.language-mermaid');
+      codeBlock.style.backgroundColor = 'initial';
+
+      const preBlock = codeBlock.parentNode;
+      preBlock.style.border = 'none';
+      preBlock.style.textAlign = 'center';
+      preBlock.style.backgroundColor = 'initial';
+    });
+  })();
+</script>

data/_includes/site-nav.html

@@ -0,0 +1,8 @@
+<nav class="site-nav">
+  {% assign sorted_pages = site.pages | sort: "position" %}
+  {% for _page in sorted_pages %}
+  {% if _page.navbar_title or _page.navtitle or _page.navlevel == "header" or _page.navbar %}
+  <a class="page-link" href="{{ _page.url | relative_url }}" >{{ _page.navbar_title | default: _page.navtitle | default: _page.title | escape }}</a>
+  {% endif %}
+  {% endfor %}
+</nav>

data/_layouts/default.html

@@ -9,8 +9,13 @@ layout: blank
       {{ content }}
     </div>
     {% include retina-image.html %}
+    {% if site.mermaid or page.mermaid %}
+    {% include mermaid.html %}
+    {% endif %}
   </main>
 
   {% include footer.html %}
 
+  {% include font-fix.html %}
+
 </body>

data/_layouts/home.html

@@ -1,5 +1,5 @@
 ---
-layout: blank
+layout: post-list
 ---
 
 {{ content }}

data/_layouts/page.html

@@ -2,8 +2,9 @@
 layout: default
 ---
 
-{% include header.html %}
+{% include site-nav.html %}
 
 <article class="page" lang="{{ page.lang | default: site.lang | default: "en" }}" itemscope itemtype="http://schema.org/BlogPosting">
+  {% include header.html %}
   {{ content }}
 </article>

data/_layouts/post-list.html

@@ -2,6 +2,8 @@
 layout: default
 ---
 
+{% include site-nav.html %}
+
 {% include header.html %}
 
 <ul class="post-list">
@@ -28,24 +30,29 @@ layout: default
   {% endif %}
   {% for post in posts %}
   <li class="post-list-item" data-tags="{{ post.tags | join: " " }}">
-    <a class="post-item-link" href="{{ post.url | relative_url }}" data-date="{{ post.date | date: "%m-%d"  }}">
-      {{ post.title | escape }}
-    </a>
-    {% if post.description %}
-    <p class="post-description">{{ post.description }}</p>
+    {% if post.cover_url %}
+    <div class="post-item-cover" style="background-image: url('{{ post.cover_url }}')"></div>
     {% endif %}
-    <div class="post-item-meta">
-      {{ post.date | date: "%B %-d, %Y" }}
-      /
-      {% capture lang %}{{ post.lang | default: site.lang | default: "en" }}{% endcapture %}
-      {% if lang == "en" %}
-      {% capture words %}{{ post.content | strip_html | number_of_words  }}{% endcapture %}
-      {% else %}
-      {% capture words %}{{ post.content | strip_html | size }}{% endcapture %}
+    <div class="post-item-label">
+      <a class="post-item-link baseline-fix" href="{{ post.url | relative_url }}" data-date="{{ post.date | date: "%m-%d"  }}">
+        {{ post.title | escape }}
+      </a>
+      {% if post.description %}
+      <p class="post-description">{{ post.description }}</p>
       {% endif %}
-      {% unless words contains "-" %}
-      {{ words | plus: 250 | divided_by: 250 | append: " minute read"  }}
-      {% endunless %}
+      <div class="post-item-meta">
+        {{ post.date | date: "%B %-d, %Y" }}
+        /
+        {% capture lang %}{{ post.lang | default: site.lang | default: "en" }}{% endcapture %}
+        {% if lang == "en" %}
+        {% capture words %}{{ post.content | strip_html | number_of_words  }}{% endcapture %}
+        {% else %}
+        {% capture words %}{{ post.content | strip_html | size }}{% endcapture %}
+        {% endif %}
+        {% unless words contains "-" %}
+        {{ words | plus: 250 | divided_by: 250 | append: " minute read"  }}
+        {% endunless %}
+      </div>
     </div>
   </li>
   {% endfor %}

data/_layouts/post.html

@@ -1,21 +1,10 @@
 ---
 layout: default
 ---
+
 <article class="post" lang="{{ page.lang | default: site.lang | default: "en" }}" itemscope itemtype="http://schema.org/BlogPosting" >
 
-  <header class="post-header">
-    <a class="site-title" href="{{ "/" | relative_url  }}">{{ site.title | escape  }}</a>
-    <h1 class="post-title" itemprop="name headline">{{ page.title | escape | replace: "​", "<wbr>" }}</h1>
-  </header>
-
-  {% if page.cover_url %}
-  <div class="post-cover" aria-label="Cover">
-    <div class="post-cover-wrapper">
-      <img src="{{ page.cover_url }}" alt="" />
-    </div>
-    <div class="cover-meta">{{ page.cover_meta | markdownify }}</div>
-  </div>
-  {% endif %}
+  {% include header.html %}
 
   <div class="post-content" itemprop="articleBody">
     {{ content }}
@@ -36,7 +25,12 @@ layout: default
     {% endif %}
   </footer>
 
-  {% if jekyll.environment == 'production' and site.disqus_shortname and page.comments != false %}
+  {% if jekyll.environment == 'production' and page.comments != false %}
+  {% if site.disqus_shortname %}
   {% include disqus.html %}
+  {% elsif site.gitalk %}
+  {% include gitalk.html %}
+  {% endif %}
   {% endif %}
+
 </article>

data/_sass/kagami/_layout.scss

@@ -41,7 +41,16 @@ article {
     margin-bottom: 0;
   }
 
-  .highlight {
+  .task-list-item {
+    list-style-type: none;
+  }
+
+  .task-list-item-checkbox {
+    margin: 0 .5em .3em -1.6em;
+    vertical-align: middle;
+  }
+
+  pre {
     position: relative;
     overflow: hidden;
 
@@ -50,11 +59,11 @@ article {
       overflow-x: auto;
     }
 
-    @include exdent-horizontally($hspacing);
-    @include exdent-vertically(0.5 * $vspacing);
+    @include exdent-horizontally($hspacing, "code");
+    @include exdent-vertically(0.5 * $vspacing, "code");
 
     @media screen and (min-width: $content-width) {
-      @include exdent-horizontally(2 * $hspacing);
+      @include exdent-horizontally(2 * $hspacing, "code");
     }
   }
 
@@ -119,8 +128,25 @@ article {
   margin-bottom: $post-footer-spacing;
 }
 
+.site-nav {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: top;
+  justify-content: center;
+  margin-left: -$post-margin-width;
+  margin-right: -$post-margin-width;
+}
+
+@media screen and (min-width: $content-width) {
+  .site-nav {
+    height: 0;
+    justify-content: flex-end;
+  }
+}
+
 .page-link {
-  margin-right: 0.25em;
+  display: block;
+  padding: 0.5em;
 }
 
 .site-footer {
@@ -149,10 +175,26 @@ article {
 }
 
 .post-list-item {
+  position: relative;
   margin-top: $spacing-unit;
   margin-bottom: $spacing-unit;
 }
 
+.post-item-cover {
+  width: 100vw;
+  position: absolute;
+  top: -.5 * $spacing-unit;
+  bottom: -.5 * $spacing-unit;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  background-size: cover;
+  background-position: center;
+}
+
+.post-item-label {
+  position: relative;
+}
+
 .post-description {
   margin-top: 10px;
   margin-bottom: 10px;