simple-jekyll-theme 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 94cbd156d14e902cd391866d0a99dc1a0bb49a478121ba1a4d1ec3294e5cfd4c
+  data.tar.gz: 8c4a72a7e9ac17b259ca57f7491f05cc678c1ffbe61f36f3d50120dcea732e10
+SHA512:
+  metadata.gz: 2a438d8ee1e6d2decb682985a263f29c5a7d0274acc2381c58cd9c49b4c67c9e4c18b6519dadb7dddfe85ed937b49a4d13729903ebe60f710575a138a3780a16
+  data.tar.gz: 7a7060f23aa7bd6e702fc29abcff2c7e6305453dd39b7d5fcfb784513c0c814d64cef1892cc73c6d59b7e6d2a6ffdb79b5a3be6d389baf65b6dac1089fe962fb

data/404.html

@@ -0,0 +1,15 @@
+---
+layout: default
+title: "404: Page not found"
+permalink: ./404.html
+---
+
+<div style="text-align: center;">
+    {% if site.font-awesome-kit %}
+        <i class="fas fa-dizzy" style="font-size: 500%"></i>
+    {% else %}
+        <svg class="icon" style="font-size: 500%"><use xlink:href="#icon-dizzy-solid"></use></svg>
+    {% endif %}
+    <h1 class="header">404: Page not found</h1>
+    <p>Oops, I may have misplaced that link.</p>
+</div>

data/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Weixuan Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,267 @@
+![Simple](/docs/head.png)
+
+<p align="center">
+    <a aria-label="build" href="https://github.com/WeixuanZ/simple-jekyll-theme/actions" target="_blank">
+      <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/weixuanz/simple-jekyll-theme/Gem%20Publish?style=flat-square">
+    </a>
+    <a aria-label="version" href="https://github.com/WeixuanZ/simple-jekyll-theme/blob/master/CHANGELOG.md">
+      <img alt="Version" src="https://img.shields.io/github/package-json/v/weixuanz/simple-jekyll-theme?style=flat-square">
+    </a>
+    <a aria-label="license" href="#license" target="_blank">
+      <img alt="License: MIT" src="https://img.shields.io/github/license/weixuanz/simple-jekyll-theme?style=flat-square">
+    </a>
+</p>
+
+A minimalistic Jekyll theme created for my blog - https://weixuanz.github.io.
+
+* GitHub Pages compatible
+* Optimised for speed (perfect score on PageSpeed Insight):
+    * No JQuery
+    * Minified HTML, CSS and JS
+    * Asynchronous loading of non-critical CSS
+    * Image lazy-loading
+    * And more...
+* Dark mode support, with animated transition
+* Mobile friendly
+* Tag system, with sorted tag clouds
+* Ajax pagination
+* Dynamic TOC
+* Code listings with copy button
+* RSS Feed and SEO
+* Google Tag Manager
+
+<p align="center">
+    <a href="https://weixuanz.github.io/simple-jekyll-theme"><img alt="theme screenshot" src="/screenshot.png" width="400"></a>
+</p>
+
+---
+
+This repository is a clone of that for my website, with commits not related to the theme stripped out, also with modifications for generalisation. For the commenting system (not included in this theme), check out [my fork of Utterances](https://github.com/WeixuanZ/utterances).
+
+* [Installation](#installation)
+* [Usage](#usage)
+    * [Metadata](#metadata)
+        * [Google Analytics \(optional\)](#google-analytics-optional)
+        * [Font Awesome Kit \(optional\)](#font-awesome-kit-optional)
+    * [Navigation](#navigation)
+    * [Homepage](#homepage)
+    * [Blog Posts](#blog-posts)
+    * [Customising](#customising)
+* [Contributing](#contributing)
+* [Development](#development)
+* [License](#license)
+
+
+## Installation
+
+> If you are hosting your site on GitHub Pages, fork this repository and follow the [Development](#development) setup **instead**, and rename it to `<username>.github.io`. Alternatively, you can use `remote_theme: WeixuanZ/simple-jekyll-theme` by including a whitelisted gem called _jekyll-remote-theme_ in your `_config.yml`, [more details here](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll#adding-a-jekyll-theme-in-your-sites-_configyml-file).
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "simple-jekyll-theme"
+```
+
+And then execute:
+
+```bash
+$ bundle
+```
+
+## Usage
+
+Add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: simple-jekyll-theme
+```
+
+The theme provides four layouts:
+
+* `default.html` — The base layout that lays the foundation for subsequent layouts, can be used for standalone pages.
+* `home.html` — The layout for your landing-page / home-page / index-page. [[More Info](#homepage)]
+* `post.html` — The layout for your posts.
+* `tagpage.html` — The layout for your tag pages.
+
+Note that you would have to include the corresponding font-matter to specify the layout, since Jekyll’s default settings cannot be overridden by a theme-config.
+
+
+### Metadata
+
+Overwrite the default values shown below by providing alternatives in your `_config.yml`.
+
+```yaml
+title: Simple Jekyll Theme
+author: W Zhang
+tagline: "A minimalistic theme for blogs"
+description: "Theme for my personal blog https://weixuanz.github.io"
+url: "https://weixuanz.github.io/simple-jekyll-theme"  # no "/" at the end
+lang: en
+paginate: 5  # number of posts displayed on each page
+```
+
+
+#### Google Analytics (optional)
+
+You can add Google Analytics through Google Tag Manager, add the following to your `_config.yml`:
+
+```yaml
+google-tag-manager-id: GTM-xxxxxx
+```
+
+#### Font Awesome Kit (optional)
+
+You can use the Font Awesome Kit instead of using the default hardcoded svg icons. This is useful if you want to include more icons than the ones defined in `./_includes/icons.html`. You can register for a free kit at https://fontawesome.com.
+
+```yaml
+font-awesome-kit: xxxxxxxxxx
+```
+
+If the above is specified in `_config.yml`, svg icon definitions will not be included, and `<i />` will be used.
+
+
+### Navigation
+
+Add names and paths under the `navigation` key in `_config.yml` to specify links in the navigation bar:
+
+```yaml
+navigation:
+  - name: Home
+    link: /
+  - name: About
+    link: /about/
+```
+
+Note that the default permalink setting is `pretty`, you need to include `permalink: pretty` in `_config.yml`, or use the corresponding format when specifying `navigation`.
+
+
+### Homepage
+
+Add the following to `index.html` of your site:
+
+```yaml
+---
+layout: home
+title: Home
+pagination:
+  enabled: true
+---
+```
+
+Please note that for pagination to work, the index file must be in `.html` instead of `.md`.
+
+All content from the file (if there's any) will be injected above the generated post list by the `home` layout. This will allow you to include non-posts related content to be published on the landing page.
+
+
+### Blog Posts
+
+Name your blog posts as `yyyy-mm-dd-name.md` and put them in `./_posts/`. Some important front matter configurations are listed below:
+
+```yaml
+---
+layout: post
+title: Example
+author: W Zhang
+description: This is an example post
+tag: [example, jekyll]
+toc: true
+mathjax: true
+---
+```
+
+A rather unfortunate result of supporting GitHub Pages is that the fantastic Jekyll tag gems cannot be used. I wrote a Python script `./scripts/tag_generator.py` based on [Long Qian's fantastic solution](https://longqian.me/2017/02/09/github-jekyll-tag/). You will need to download it separately if you are using the gem approach, perhaps using:
+
+```bash
+wget https://raw.githubusercontent.com/WeixuanZ/simple-jekyll-theme/master/tag_generator.py
+```
+
+You can use the provided `./scripts/pre-commit` git hook for automatic execution, or use `yarn run tag` if you cloned this repository.
+
+On the other hand, if you prefer doing it manually, you simply need to create `.md` files under `./tag/`. For example, `./tag/jekyll.md` for a tag named _jekyll_ may contain the following:
+
+```yaml
+---
+layout: tagpage
+title: "Tag: jekyll"
+tag: jekyll
+---
+```
+
+Other than `blockquotes`, this theme also provides `.hint` and `.danger`, with blue and red left border respectively. They are implemented as classes on top of `blockquotes`, you can use the Kramdown syntax:
+
+```markdown
+> This is a hint
+{:.hint}
+```
+
+The theme also includes the [lazysizes](https://github.com/aFarkas/lazysizes) package, to enable lazy-loading of images, use `data-src` instead of `src`, and add `lazyload` class.
+
+```html
+<figure>
+    <img data-src="/assets/images/example.png" class="lazyload">
+    <figcaption>Example figure</figcaption>
+</figure>
+```
+
+
+### Customising
+
+To override the default structure and style, simply create the concerned directory at the root of your site, copy the file you wish to customise to that directory, and then edit the file.
+
+The files you may be particularly interested in:
+
+```
+.
+├── _includes
+│   ├── footer.html
+│   ├── head.html         -> <head /> in default layout
+│   ├── custom-head.html  -> placeholder for adding more metadata to <head />, e.g. png favicons
+│   └── comment.html      -> placeholder for commenting system
+├── _sass
+│   ├── blog.scss         -> critical and non-critical styles related to blog posts, e.g. toc
+│   ├── code.scss
+│   ├── definitions.scss  -> colour, font and mixin definitions
+│   ├── main.scss         -> critical styles
+│   ├── mobile.scss       -> media queries
+│   └── print.scss
+└── assets
+    └── js
+        ├── main.js       ┬> note that the minified versions xxxx.min.js are used
+        └── pagination.js ┘
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/weixuanz/simple-jekyll-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://contributor-covenant.org) code of conduct.
+
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install` and `yarn install`.
+
+To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and content, the site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+I recommend using Google's Closure-compiler for minifying JavaScripts. If you have Homebrew installed, it's simply `brew install closure-compiler`. For automatic execution, you can also use the provided git hook.
+
+When the theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled. To add a custom directory to the theme-gem, please edit the regexp in `simple-jekyll-theme.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](/LICENSE.md). Please link to this repository in the footer if you overwrite the default one.
+
+By default, svg icons used (in `./_includes/icons.html`) are from Font Awesome, which are licensed under the [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/). No modifications were made.
+
+Amazing open-source code used:
+* Source-codes included in this gem:
+    * [Monokai theme colour definitions](https://gist.github.com/asaaki/1007420)
+    * [Theme switching script by Koos Looijesteijn](https://gist.github.com/kslstn/20f654fd27eb29619040c74fa6526919) (_Modified_)
+    * [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) MIT
+    * [jekyll-toc](https://github.com/allejo/jekyll-toc) MIT (_Modification merged upstream_)
+* Dependencies:
+    * JS libraries:
+        * [Clipboard.js](https://clipboardjs.com)
+        * [lazysizes](https://github.com/aFarkas/lazysizes)
+    * Jekyll plug-ins:
+        * [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)
+        * [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap)
+        * [jekyll-feed](https://github.com/jekyll/jekyll-feed)

data/_includes/footer.html

@@ -0,0 +1,6 @@
+<footer id="main-footer" class="no-select">    
+    <p id="copyleft">Copyleft <span style="display: inline-block; transform: rotate(180deg);">&copy;</span> {{ 'now' | date: "%Y" }} {{ site.author }}</p>
+    <div>
+        Powered by <a href="https://jekyllrb.com" aria-label="jekyll">Jekyll</a> & <a href="https://github.com/WeixuanZ/simple-jekyll-theme" aria-label="theme">Simple</a>.
+    </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,40 @@
+<head>
+    {% if site.google-tag-manager-id %}
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','{{ site.google-tag-manager-id }}');</script>
+    <!-- End Google Tag Manager -->
+    {% endif%}
+    
+    <!-- Meta -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{ page.title }} &middot; {{ site.title }}</title>
+    <!-- Fonts -->
+    <link href='https://fonts.gstatic.com' rel='preconnect' crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap">
+    <!-- Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="{{ site.url }}/assets/css/styles.css">
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/styles_noncritical.css" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="{{ site.url }}/assets/css/styles_noncritical.css"></noscript> <!-- Fallback -->
+
+    {% if site.font-awesome-kit %}
+        <script defer src="https://kit.fontawesome.com/{{ site.font-awesome-kit }}.js" crossorigin="anonymous"></script>
+    {% endif %}
+
+    {% if page.content contains "lazyload" %}
+        <script async src="https://cdn.jsdelivr.net/npm/lazysizes@5/lazysizes.min.js"></script>
+    {% endif %}
+    
+    {% if page.mathjax %}
+        {% include mathjax.html %}
+    {% endif %}
+
+    {% feed_meta %}
+    {% seo title=false %}
+
+    {% include custom-head.html %}
+</head>

data/_includes/icons.html

@@ -0,0 +1,19 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<symbol id="icon-dizzy-solid" viewBox="0 0 31 32">
+<path d="M15.5 0.5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5 15.5-6.938 15.5-15.5-6.938-15.5-15.5-15.5zM9.5 13.412l-1.794 1.794c-0.925 0.925-2.362-0.469-1.413-1.412l1.794-1.794-1.794-1.794c-0.938-0.938 0.481-2.35 1.413-1.412l1.794 1.794 1.794-1.794c0.938-0.938 2.35 0.481 1.412 1.412l-1.794 1.794 1.794 1.794c0.95 0.95-0.494 2.337-1.412 1.412l-1.794-1.794zM15.5 26c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zM24.706 13.794c0.95 0.95-0.494 2.337-1.413 1.412l-1.794-1.794-1.794 1.794c-0.925 0.925-2.363-0.469-1.413-1.412l1.794-1.794-1.794-1.794c-0.938-0.938 0.481-2.35 1.413-1.412l1.794 1.794 1.794-1.794c0.938-0.938 2.35 0.481 1.413 1.412l-1.794 1.794 1.794 1.794z"></path>
+</symbol>
+<symbol id="icon-adjust-solid" viewBox="0 0 32 32">
+<path d="M0.5 16c0 8.56 6.94 15.5 15.5 15.5s15.5-6.94 15.5-15.5-6.94-15.5-15.5-15.5-15.5 6.94-15.5 15.5zM16 27.5v-23c6.357 0 11.5 5.144 11.5 11.5 0 6.357-5.144 11.5-11.5 11.5z"></path>
+</symbol>
+<symbol id="icon-share-solid" viewBox="0 0 32 32">
+<path d="M31.481 11.865l-11-9.499c-0.963-0.832-2.48-0.156-2.48 1.135v5.003c-10.039 0.115-18 2.127-18 11.641 0 3.84 2.474 7.644 5.208 9.633 0.853 0.621 2.069-0.158 1.755-1.164-2.834-9.063 1.344-11.469 11.037-11.609v5.495c0 1.294 1.519 1.966 2.48 1.135l11-9.5c0.692-0.598 0.693-1.672 0-2.271z"></path>
+</symbol>
+<symbol id="icon-tag-solid" viewBox="0 0 32 32">
+<path d="M0 15.757v-12.757c0-1.657 1.343-3 3-3h12.757c0.828 0 1.578 0.336 2.121 0.879l13.243 13.243c1.172 1.172 1.172 3.071 0 4.243l-12.757 12.757c-1.172 1.172-3.071 1.172-4.243 0l-13.243-13.243c-0.543-0.543-0.879-1.293-0.879-2.121v0zM7 4c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z"></path>
+</symbol>
+<symbol id="icon-clone-solid" viewBox="0 0 32 32">
+<path d="M29 0c1.657 0 3 1.343 3 3v18c0 1.657-1.343 3-3 3h-18c-1.657 0-3-1.343-3-3v-18c0-1.657 1.343-3 3-3h18zM11 26c-2.757 0-5-2.243-5-5v-13h-3c-1.657 0-3 1.343-3 3v18c0 1.657 1.343 3 3 3h18c1.657 0 3-1.343 3-3v-3h-13z"></path>
+</symbol>
+</defs>
+</svg>

data/_includes/mathjax.html

@@ -0,0 +1,21 @@
+<script defer type="text/javascript">
+    MathJax = {
+      options: {
+        renderActions: {
+          find_script_mathtex: [10, function (doc) {
+            for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
+              const display = !!node.type.match(/; *mode=display/);
+              const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
+              const text = document.createTextNode('');
+              node.parentNode.replaceChild(text, node);
+              math.start = {node: text, delim: '', n: 0};
+              math.end = {node: text, delim: '', n: 0};
+              doc.math.push(math);
+            }
+          }, '']
+        }
+      }
+    };
+</script>
+<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script defer id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

data/_includes/navigation.html

@@ -0,0 +1,26 @@
+<nav id="navbar" class="no-select">
+<div class="container">
+{% for item in site.navigation %}
+    <a {% if page.url == item.link %}class="current"{% else %}href="{{ site.url }}{{ item.link }}"{% endif %}>{{ item.name }}</a>
+{% endfor %}
+<input type="checkbox" id="dark-toggle-box">
+<label for="dark-toggle-box" id="dark-toggle-label">
+    {% if site.font-awesome-kit %}
+        <i class="fas fa-adjust"></i>
+    {% else %}
+        <svg class="icon"><use xlink:href="#icon-adjust-solid"></use></svg>
+    {% endif %}
+</label>
+</div>
+</nav>
+<script type="text/javascript">
+    const navbar = document.querySelector('#navbar');
+    const nav_init = navbar.offsetTop;
+    window.addEventListener('scroll', function() {
+        if (this.scrollY >= nav_init) {
+            navbar.classList.add("sticky");
+        } else {
+            navbar.classList.remove("sticky");
+        }
+    })
+</script>

data/_includes/post-card.html

@@ -0,0 +1,20 @@
+<a href="{{ site.url }}{{ post.url }}">
+    <div class="card">
+        <div class="post-meta">
+            <span class="date">{{ post.date | date: "%b %-d, %Y" }}</span>
+            {% if post.tags.size > 0 %}
+                &verbar;
+                <span class="tag">
+                    {%- if site.font-awesome-kit -%}
+                        <i class="fas fa-tag"></i>
+                    {%- else -%}
+                        <svg class="icon"><use xlink:href="#icon-tag-solid"></use></svg>
+                    {%- endif -%}
+                    {% for tag in post.tags %}<code>{{ tag }}</code>{% endfor %}
+                </span>
+            {% endif %}
+        </div>
+        <span class="post-title">{{ post.title }}</span><br>
+        <span class="post-description">{{ post.description }}</span>
+    </div>
+</a>