jekyll-theme-morph 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 824f1bfbd6e6a88dc64144e411aa9aa0fb711e097be9edb9f472e70f1f97afc6
+  data.tar.gz: a716a2a636568725f4b46d0587eff6e4d208a6c2f4926392f73944baaa6f7cf8
+SHA512:
+  metadata.gz: bf19731c4c0dee3c529087158014d15a75028f3a76c14b5373fac2729d2709e37a9d5b8c401dbea14bca99d0d4823b5fa68d4926870da0f5d29bb7ebfb6345d6
+  data.tar.gz: 1610002e66d44a6f3d8f101ab52825a3e866f16743cd7d4fab43b0335ae328bc07d477481018a2e4be03ea0d1c6bbd37c94382e8eae2a1a3aef11cfc33a85346

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alex
+
+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,189 @@
+# Morph
+
+Morph is a simple Jekyll theme for writers.
+
+[Demo](http://alex-1900.github.io/jekyll-theme-morph/)
+
+## Installation
+Install with github page:
+
+### GitHub Pages
+1. Add these 2 lines in to your `Gemfile`:
+
+```ruby
+gem "jekyll-remote-theme"
+gem "jekyll-paginate"
+```
+
+2. Install the newly added gems:
+
+```bash
+$ bundle
+```
+
+3. In `_config.yml` add these lines:
+
+```yaml
+remote_theme: alex-1900/jekyll-theme-morph
+
+permalink: /:year/:month/:day/:title.markdown
+paginate: 5
+
+plugins:
+  - jekyll-paginate
+  - jekyll-remote-theme
+```
+
+Remove any other `theme:` or `remote_theme:` lines.
+
+4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work.
+
+## Layouts
+
+### Pinned articles
+Add the `sticky` and `sticky_subtitle`(optional) field to post file, and you can find the article at pinned area.
+```yml
+---
+sticky: true
+sticky_subtitle: some words
+---
+```
+
+### Add tags and categories page
+1. create new pages `tags.html` and `categories.html` and add these lines to heads:
+```html
+---
+layout: classify
+source: tags
+---
+```
+
+```text
+---
+layout: classify
+source: categories
+---
+```
+
+2. add these lines to your `_config.yml`:
+```yml
+morph:
+  pages:
+    - name: tags
+      path: /tags
+    - name: categories
+      path: /categories
+```
+
+and can see the `tags` and `categories` buttons now.
+
+### Enable tags and categories sidebar
+add these lines to your `_config.yml` in `morph` field:
+```yml
+morph:
+  include:
+    home_categories_bar:
+      title: Top Categories
+      path: /categories
+    home_tags_bar:
+      title: Top Tags
+      path: /tags
+```
+certainly, you can change the `titles` and `paths`
+
+### Add searching page
+1. create `search.json` at project root, and add these lines:
+```text
+---
+layout: none
+permalink: /search.json
+---
+[
+{% for post in site.posts %}
+{
+    "title"    : {{ post.title | escape | jsonify }},
+    "category" : {{ post.category | jsonify }},
+    "tags"     : "{{ post.tags | join: ', ' }}",
+    "url"      : "{{ site.baseurl }}{{ post.url }}",
+    "date"     : "{{ post.date }}",
+    "content"  : {{ post.content | strip_html | strip_newlines | remove_chars | jsonify }}
+} {% unless forloop.last %},{% endunless %}
+{% endfor %}
+]
+```
+
+2. create a new file `search.html`, and add these lines to head:
+```html
+---
+layout: search
+---
+```
+
+3. add change your `_config.yml` add a new page to `morph.pages`:
+```yml
+morph:
+  pages:
+    - name: tags
+      path: /tags
+    - name: categories
+      path: /categories
+    - name: search
+      path: /search
+```
+
+## Change the skin
+There are two skins: `silver` (default) and `obsidian`, you can switching between multiple skins by `_config.yml`:
+```yml
+morph:
+  skin: obsidian
+```
+and rebuild or restart the dev server
+
+## Multiple language
+1. Create directory and file `__data/language/[lang].yml`(the `[lang]` is abbreviation of your language)
+
+2. replace contents with another language, the following are the default values.
+
+```yml
+t:
+  posts: posts
+  tags_low: tags
+  tags_up: Tags
+  categories_low: categories
+  categories_up: Categories
+  about_low: about
+  about_up: About
+  search_low: search
+  search_up: Search
+  catalogue: Catalogue
+  home: Home
+  page: Page
+  post_up: Post
+  search_placeholder: input key words here...
+  update_time: Update time
+  pinned_articles: Pinned Articles
+  top_tags: Top Tags
+  top_categories: Top Categories
+  show_more: show more
+  catalogue_empty: Catalogue is empty
+```
+
+3 add your the `lang` item to your page files
+```html
+---
+lang: [lang]
+---
+```
+
+(the `[lang]` is abbreviation of your language)
+
+- for posts page, you can change the defaults scope:
+```yml
+defaults:
+  - scope:
+      type: "posts"
+    values:
+      lang: [lang]  # the `[lang]` is abbreviation of your language
+```
+
+and rebuild or restart the dev server

data/_includes/bread-bar.html

@@ -0,0 +1,9 @@
+{% assign t = site.data.language[page.lang].t %}
+<div class="component bread fw-bold user-select-none">
+    <span class="bg-primary"><a class="link-light" href="{{ '/' | site.baseurl }}">{{ t.home | default: 'Home' }}</a></span>
+    {% assign paths = include.paths | split: " " %}
+    {% for path in paths %}
+    <i class="fas fa-angle-right color-secondary"></i>
+    <span class="bg-primary color-secondary-light">{{ path }}</span>
+    {% endfor %}
+</div>

data/_includes/catalogue.html

@@ -0,0 +1,26 @@
+{% assign t = site.data.language[page.lang].t %}
+<div class="full-mask" id="full-mask-catalogue">
+    <div class="component catalogue m-auto">
+        <header class="header">
+            <h3 class="header-text text-center color-secondary bg-primary">{{ t.catalogue | default: 'Catalogue' }}</h3>
+        </header>
+        <ul class="body bg-base w-100" id="{{ include.list_id }}">
+            <!-- document structure list -->
+            <li class="text-center color-secondary">{{ t.catalogue_empty | default: 'Catalogue is empty' }}</li>
+        </ul>
+    </div>
+</div>
+<script>
+    (function () {
+        "use struct"
+        var fullMask = document.getElementById('full-mask-catalogue')
+
+        fullMask.onclick = function () {
+            fullMask.style.display = 'none'
+        }
+
+        window.comShowCatalogue = function () {
+            fullMask.style.display = 'block'
+        }
+    })()
+</script>

data/_includes/footer.html

@@ -0,0 +1,7 @@
+<footer class="footer">
+    <div class="content m-auto color-secondary-light text-center">
+        &copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time>
+        {{ site.domain }}, all rights reserved {{ site.github_username }}
+        . Made with Jekyll using the <a target="_blank" href="https://github.com/alex-1900/jekyll-theme-morph">Morph</a> theme.
+    </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,37 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+{% seo %}
+
+<!-- CSS -->
+<link rel="stylesheet" href="{{ "/assets/style/main.css" | relative_url }}">
+
+<!-- Favicon -->
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/favicon-32x32.png" | relative_url }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/favicon-16x16.png" | relative_url }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/apple-touch-icon.png" | relative_url }}">
+<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
+
+<!-- for layouts -->
+{% if page.layout == 'post' %}
+<link rel="stylesheet" href="{{ "/assets/style/post.css" | relative_url }}">
+<script src="{{ "/assets/javascript/post.js" | relative_url }}"></script>
+{% endif %}
+
+<!-- for pages -->
+{% if page.layout == 'search' %}
+<link rel="stylesheet" href="{{ "/assets/style/search.css" | relative_url }}">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-jekyll-search/1.9.2/simple-jekyll-search.min.js"></script>
+<script src="{{ "/assets/javascript/search.js" | relative_url }}"></script>
+{% endif %}
+
+{% if page.layout == 'home' %}
+<link rel="stylesheet" href="{{ "/assets/style/home.css" | relative_url }}">
+{% endif %}
+
+{% if page.layout == 'classify' %}
+<link rel="stylesheet" href="{{ "/assets/style/classify.css" | relative_url }}">
+{% endif %}
+
+<!-- RSS -->
+{% feed_meta %}

data/_includes/header.html

@@ -0,0 +1,45 @@
+{% assign t = site.data.language[page.lang].t %}
+<nav class="header w-100 bg-primary d-flex flex-column">
+    <div class="border-bottom" style="height: 65%;">
+        <div class="m-auto content h-100 d-flex">
+            <div class="logo user-select-none flex-none d-flex flex-column justify-content-center">
+                <a class="fw-bold" href="{{ '/' | prepend: site.baseurl }}">
+                    {{ site.title }}
+                </a>
+            </div>
+            <div class="search-box flex-auto d-flex flex-column justify-content-center d-sm-none">
+                <form action="{{ '/search' | prepend: site.baseurl }}" id="header-search-form" class="search">
+                    <label class="search-wrap d-flex flex-none">
+                        <input name="words" class="search-input flex-grow-1" id="header-search-input" type="text" />
+                        <button class="search-button cursor-pointer bg-base" type="submit">
+                            <i class="fas fa-arrow-right"></i>
+                        </button>
+                    </label>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="nav-bar bg-primary">
+        <div class="m-auto content">
+            <div>
+                <ul class="white-space-nowrap">
+                    <li class="d-inline-block active"><a href="{{ '/' | prepend: site.baseurl }}">{{ t.posts | default: 'posts' }}</a></li>
+                    {% for _page in site.morph.pages %}
+                    <li class="d-inline-block"><a href="{{ _page.path | prepend: site.baseurl }}">{{ _page.name }}</a></li>
+                    {% endfor %}
+                    <li class="d-inline-block"><a href="{{ '/about' | prepend: site.baseurl }}">{{ t.about_low | default: 'about' }}</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<script>
+    var headerSearchForm = document.getElementById('header-search-form')
+    var headerSearchInput = document.getElementById('header-search-input')
+    headerSearchForm.onsubmit = function (event) {
+        event.preventDefault()
+        var words = headerSearchInput.value
+        window.location.href = headerSearchForm.action + '?words=' + encodeURIComponent(words)
+    }
+</script>

data/_includes/paginator.html

@@ -0,0 +1,27 @@
+<div>
+    {% if paginator.total_pages > 1 %}
+    <div class="pagination">
+        {% if paginator.previous_page %}
+            <a href="{{ paginator.previous_page_path | relative_url }}"><i class="fas fa-angle-left"></i></a>
+        {% else %}
+            <span><i class="fas fa-angle-left"></i></span>
+        {% endif %}
+
+        {% for page in (1..paginator.total_pages) %}
+            {% if page == paginator.page %}
+                <em>{{ page }}</em>
+            {% elsif page == 1 %}
+                <a href="{{ '/' | relative_url }}">{{ page }}</a>
+            {% else %}
+                <a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
+            {% endif %}
+        {% endfor %}
+
+        {% if paginator.next_page %}
+            <a href="{{ paginator.next_page_path | relative_url }}"><i class="fas fa-angle-right"></i></a>
+        {% else %}
+            <span><i class="fas fa-angle-right"></i></span>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>

data/_includes/post-info.html

@@ -0,0 +1,31 @@
+<div class="post-info">
+    <h3 class="fw-normal"><a class="color-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
+    <div class="d-flex">
+        <span class="w-100 text-start">
+            <time datetime="{{ post.date }}" class="d-inline-block fw-light color-secondary-light">
+                <i class="far fa-calendar-alt color-rang1"></i> {{ post.date | date: "%b %d, %y" }}
+            </time>
+            &nbsp;
+            <time datetime="{{ post.date }}" class="d-inline-block fw-light color-secondary-light">
+                <i class="far fa-clock color-rang2"></i> {{ post.date | date: "%H:%M" }}
+            </time>
+        </span>
+        <span class="w-100 text-end">
+            {% if include.sticky == 'true' %}
+                <i class="fas fa-thumbtack color-gray-400"></i>
+            {% endif %}
+        </span>
+    </div>
+    <p class="color-secondary">
+        {% if post.excerpt_separator %}
+            {{ post.excerpt | strip_html }}
+        {% else %}
+            {{ post.content | strip_html | truncate: 200 }}
+        {% endif %}
+    </p>
+    <div class="categories">
+        {% for tag in post.tags %}
+        <a class="flat" href="{{ '/tags' | site.baseurl }}#{{ tag }}">{{ tag }}</a>
+        {% endfor %}
+    </div>
+</div>

data/_includes/simple-post-info.html

@@ -0,0 +1,14 @@
+<div class="simple-post-info">
+    <h3 class="fw-normal"><a class="color-link-dark" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
+    <div class="d-flex">
+        <span class="info w-100 text-start">
+            <time datetime="{{ post.date }}" class="d-inline-block fw-light color-secondary-light">
+                <i class="far fa-calendar-alt color-rang1"></i> {{ post.date | date: "%b %d, %y" }}
+            </time>
+            &nbsp;
+            <time datetime="{{ post.date }}" class="d-inline-block fw-light color-secondary-light">
+                {{ post.date | date: "%H:%M" }}
+            </time>
+        </span>
+    </div>
+</div>

data/_includes/trending-article-item.html

@@ -0,0 +1,25 @@
+{% assign t = site.data.language[page.lang].t %}
+<li class="d-flex hover-primary" style="padding: .5rem 0">
+    <div class="flex-none color-secondary" style="padding: 0 .4rem">
+        {{ include.index }}.
+    </div>
+    <div class="d-flex flex-column w-100">
+        <div><a class="hover-color-reversal" style="line-height: 1.4rem;" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></div>
+        <p class="color-secondary-light" style="padding-top: .2rem;">
+            {% if post.sticky_subtitle %}
+                {{ post.sticky_subtitle }}
+            {% else %}
+                {{ post.date | date: "%b %d, %Y %H:%M" }}
+            {% endif %}
+        </p>
+    </div>
+    <div class="flex-none d-flex flex-column justify-content-center" style="padding: 0 4px;">
+        <a
+            class="d-inline-block color-secondary-light hover-border"
+            style="padding: .4rem 1rem; margin-right: 1rem"
+            href="{{ post.url | prepend: site.baseurl }}"
+        >
+            {{ t.detail_up | default: 'info' }}
+        </a>
+    </div>
+</li>