jekyll-theme-simplex-v2 0.9.8.15

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d81becaac9b2f6c39464859f7ec03926b57cd43915e2d323380a1d4b6bca093e
+  data.tar.gz: 99f650990efebf6a94b404a20f12f7e483cafcda7da1d607d5ec40e73fd074d0
+SHA512:
+  metadata.gz: 523c3f09549a8347f3ada47c229605c357d5fa623e016d513f731c6469b49956b1962f50b8f7b81527577b69d0ae11ea5df895f4f7d7c83d634834be3d361914
+  data.tar.gz: bc24b3368fc939bb09852c0053d7367b23c303c4fae7078229e7ec64ccc8a9b40ec35b74452a231aa873afe4dfa39b26ea80c66e679292f86f3e7420dc0578db

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 
+
+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,240 @@
+[![Blog Demo](https://img.shields.io/badge/demo-golasblog-blue?style=flat-square)](https://golas.blog/)
+[![Generic Demo](https://img.shields.io/badge/demo-generic-green?style=flat-square)](https://simplex-demo.golas.systems/)
+
+The source of the generic demo is available here: https://github.com/andreondra/simplex-demo
+
+# <img src="assets/img/icons/simplex_logo.svg" alt="Simplex" height="50"/>
+
+A *simple* yet neat blogging theme. Developed for the [golas blog](https://golas.blog/) project.
+
+
+## 👓 Preview
+![Preview](preview.gif)
+
+## 💎 Features
+### Responsive
+![Responsivity preview](previewResponsive.gif)
+
+### Dark mode
+![Dark mode preview](previewDark.gif)
+
+### Buttons
+![Buttons preview](previewButtons.png)
+
+### Lity Lightbox 
+Supports images, videos, iFrames and more. See below for syntax.
+
+### Open Graph tags
+
+## ℹ Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-simplex"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-simplex
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-simplex
+
+## ✔ Usage
+
+### ⚙ Setting up the template
+Add following to the `_config.yml`:
+```yaml
+logo_img: /assets/img/icons/golasblog_logo.svg #Absolute path to the logo. If not specified, the title will be displayed instead.
+copyright: © Golasowski 2020 #Your copyright.
+
+collections:
+    category:
+        output: true
+    authors:
+        output: false
+
+defaults:
+  -
+    scope:
+      path: ""
+      type: category
+    values:
+      layout: "category"
+```
+
+### ✨ Defining categories
+Create a `_category` folder in the root directory of the blog. Create a `.md` file for every category with the contents:
+```
+---
+category: [design] #Category ID.
+hue: var(--c-themeHueOrange) #Category hue. See note [1].
+title: Design #Category title.
+description: Lorem ipsum dolor sit amet.
+---
+```
+
+### 🤵 Defining authors
+Create a `_authors` folder in the root directory. Create a `.md` file for every author with the contents:
+```
+---
+nick: golas #Author's nick.
+full_name: Andrew Golasowski #Author's full name.
+photo_dir: assets/img/authors/golas.png #Path to the author's pic.
+---
+```
+
+### 📰 Defining the menu
+Create a `_data` folder in the root directory. In the folder, create a `nav.yaml` file. Here's an example:
+```yaml
+- title: Programming #Menu item title.
+  url: category/programming.html #Menu item url.
+  icon: assets/img/icons/programming.svg #Menu item icon.
+  hue: "var(--c-themeHueRed)" #Menu item hue - see note [1].
+  subnav: #Subnav. See note [2].
+      - title: C++ #Submenu item title.
+        url: category/cpp.html #Submenu item url.
+        hue: "var(--c-themeHueOrange)" #Submenu item hue.
+        subnav: #Another subnav
+            - title: Libraries
+              url: libs.html
+              hue: "var(--c-themeHueBlue)"
+- title: Design
+  url: category/design.html
+  icon: assets/img/icons/design.svg
+  hue: "var(--c-themeHueRed)"
+```
+#### Pro tip:
+Use color icons with the same hue as the menu items. Icons will be black and on hover the color will be shown.
+
+### ✒ Creating posts
+Posts are created in the `_posts` directory. Following front matter attributes are supported:
+```
+---
+layout: post #Do not change.
+category: [programming, testing] #One, more categories or no at all.
+title: "Lorem ipsum" #Article title.
+author: andy #Author's nick.
+nextPart: _posts/2021-01-30-example.md #Next part.
+prevPart: _posts/2021-01-30-example.md #Previous part.
+og_image: assets/example.png #Open Graph preview image.
+og_description: "Example description." #Open Graph description.
+fb_app_id: example
+---
+Your markdown content here.
+```
+
+### ⚡ Syntax highlighting
+The theme uses Pygments CSS created by [@richleland](https://github.com/richleland). If you want to modify the highlighting styles, just download different CSS or create your own - see [Jekyll docs](https://jekyllrb.com/docs/liquid/tags/#stylesheets-for-syntax-highlighting).
+
+Note - `@media` is used to manage different styles for light and dark web browser mode. See `_variables.scss` file for details.
+
+### 📷 Inserting pictures
+Classic Markdown syntax is supported. However, to be able to use the lightbox feature, you have to use HTML syntax. Minimal example:
+```html
+<a href="/assets/example.jpg" data-lity>
+  <img src="/assets/example_thumbnail.jpg"/>
+</a>
+```
+
+To provide image description use this syntax:
+```html
+<div class="sx-picture">
+  <a href="/assets/example.jpg" data-lity>
+    <img src="/assets/example_thumbnail.jpg"/>
+  </a>
+  <span class="sx-subtitle">My picture description.</span>
+</div>
+```
+
+**Do not forget the `data-lity` attribute.**
+
+#### ↔ Centering
+To center pictures, put the code inside a `div` with `sx-center` class like this:
+```html
+<div markdown=1 class="sx-center">
+  ![My picture](/assets/example.jpg)
+</div>
+```
+
+### 🔘 Buttons
+Buttons can be inserted with the following syntax. Just replace `theme` with `red`, `green`, `blue`, `orange`, `purple` or `brown`, specify the target link in `href` attribute and the icon in `src` attribute.
+```html
+<div class='sx-button'>
+  <a href='https://your.link.here.example.com/' class='sx-button__content theme'>
+    <img src='/assets/img/icons/example_icon.svg'/>#{text}
+  </a>
+</div>
+```
+
+Markdown attribute can be omitted if you don't use markdown inside the block (e.g. by using the lightbox syntax).
+
+### ℹ Notes
+[1] Hue can be either one of the predefined colors or any of the CSS `color` attribute supported values (hex, rgb...).
+
+[2] Submenus are generated recursively, so any menu (and submenu) can have its own submenu.
+
+#### Predefined colors
+You can use following predefined colors:
+```scss
+--c-themePrimaryLight: #EFEFEF;
+--c-themePrimaryDark:  #101010;
+--c-themeSecondaryLight: #DADADA;
+--c-themeSecondaryDark: #252525;
+--c-themeTerniaryLight: #AEAEAE;
+--c-themeTerniaryDark: #515151;
+--c-themeQuaternaryLight: #919191;
+--c-themeQuaternaryDark: #888888;
+
+--c-themeHueRed: #C02717;
+--c-themeHueGreen: #8EA604;
+--c-themeHueBlue: #2E86AB;
+--c-themeHueOrange: #E59500;
+--c-themeHuePurple: #9F00CE;
+--c-themeHueBrown: #230007;
+```
+These colors are CSS variables, usage: `var(--var-name)`
+
+## Add-ons
+Add-ons are distributed as Jekyll plugins. Just download any desired `.rb` file from the repository `_plugin` folder and put it in your `_plugin` folder.
+
+### Buttons (button.rb)
+Adds a tag to simplify insertion of buttons:
+```
+{% button red|https://www.example.com/|/assets/img/icons/cog.svg %}
+Download binary
+{% endbutton %}
+```
+
+## 🤝 Contributing
+ 
+Bug reports and pull requests are welcome on [GitHub](https://github.com/andreondra/jekyll-theme-simplex).
+
+## ⚙ Development
+
+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.
+If you recieve an error stating, `"require': cannot load such file -- webrick (LoadError)'` Simply run `bundle add webrick` and this will install the dependencies for running the Jekyll and then you may repeat Step 2!
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-simplex.gemspec` accordingly.
+
+## Credits
+Includes icons by [uxwing](https://uxwing.com/).
+
+The lightbox feature is provided by [Lity](https://github.com/jsor/lity) licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
+Uses [jQuery](https://github.com/jquery/jquery) JavaScript plugin licensed under the [MIT License](https://opensource.org/licenses/MIT).
+
+## ⚖ License
+© Ondrej Golasowski. The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_includes/footer.html

@@ -0,0 +1,5 @@
+<footer class="footer">
+        <section class="footer__about">
+                <p class="footer__about__copyright">{{ site.copyright }}</p>
+        </section>
+</footer>

data/_includes/head.html

@@ -0,0 +1,49 @@
+<link rel="stylesheet" href="{{ site.url }}/assets/fonts/fonts.css"/>
+<link rel="stylesheet" href="{{ site.url }}/assets/style.css"/>
+<link rel="stylesheet" href="{{ site.url }}/assets/js/lity.min.css"/>
+
+{% if site.favicon != nil %}
+<link rel='shortcut icon' type='image/x-icon' href='{{ site.favicon }}' />
+{% endif %}
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<meta property="og:site_name" content="{{ site.title }}" />
+<meta 
+    property="og:title"
+    content="
+        {% if page.title != nil %}
+            {{page.title}}
+        {% else %}
+            {{site.title}}
+        {% endif %}
+    " 
+/>
+{% if page.og_description != nil %}
+    <meta property="og:description" content="{{ page.og_description }}" />
+{% endif %}
+<meta property="og:url" content="{{ site.url }}/{{ page.url }}" />
+{% if page.og_type != nil %}
+    <meta property="og:type" content="{{ page.og_type }}" />
+{% else %}
+    <meta property="og:type" content="article" />
+{% endif %}
+{% if page.og_image != nil %}
+    <meta property="og:image" content="{{ site.url }}/{{ page.og_image }}" />
+    <meta property="og:image:secure_url" content="{{ site.url }}/{{ page.og_image }}" />
+{% endif %}
+{% if page.fb_app_id != nil %}
+    <meta property="fb:app_id" content="{{ page.fb_app_id }}" />
+{% else if site.fb_app_id != nil %}
+    <meta property="fb:app_id" content="{{ site.fb_app_id }}" />
+{% endif %}
+
+
+<title>
+    {% if page.title != nil %}
+        {{page.title}}
+    {% else %}
+        {{site.title}}
+    {% endif %}
+</title>

data/_includes/header.html

@@ -0,0 +1,20 @@
+<header class="header">
+    <section class="logo">
+        <a href="{{ site.url }}/" class="logo__link">
+            {% if site.logo_img != nil %}
+                <h1 style="display: none;">{{ site.title }}</h1>
+                <img class="logo__link__img" src="{{site.logo_img}}" />
+            {% else %}
+                <h1>{{ site.title }}</h1>
+            {% endif %}
+        </a>
+    </section>
+    <button id="menuToggle">
+        <div></div>
+        <div></div>
+        <div></div>
+    </button>
+    <nav class="menu">
+        {% include nav.html nav=site.data.nav %}
+    </nav>
+</header>

data/_includes/nav.html

@@ -0,0 +1,30 @@
+{% if include.embedded != nil %}
+<ul class="list">
+{% else %}
+<ul class="list primary">
+{% endif %}
+    {% for item in include.nav %}
+        <li class="item">
+
+            <div class="item-controls">
+                <a href="{{ site.url }}/{{ item.url }}">
+                {% if item.icon != nil %}
+                    <img src="{{ site.url }}/{{ item.icon }}"/>
+                {% endif %}
+                {% if item.hue != nil %}
+                    <p style="color: {{ item.hue }}">{{ item.title }}</p>
+                {% else %}
+                    <p>{{ item.title }}</p>
+                {% endif%}
+                </a>
+
+            {% if item.subnav %}
+                <a class="button-submenu" href="#"><i class="arrow"></i></a>
+            </div>
+                {% include nav.html nav=item.subnav embedded=true %}
+            {% else %}
+            </div>
+            {% endif %}
+        </li>   
+    {% endfor %}
+</ul>

data/_includes/scripts.html

@@ -0,0 +1,3 @@
+<script src="{{ site.url }}/assets/js/jquery.slim.min.js"></script>
+<script src="{{ site.url }}/assets/js/lity.min.js"></script>
+<script src="{{ site.url }}/assets/js/tools.js"></script>

data/_includes/snippet.html

@@ -0,0 +1,38 @@
+<style>
+    .snippet_{{ post.id | slugify: "ascii" }}::after {
+
+        background-image: 
+        radial-gradient(ellipse closest-side, var(--c-snippetBackgroundExternal), var(--c-snippetBackgroundInternal)),
+        url(
+            {% if post.image_dir == "default" %}
+                {% assign url = post.path |  split: "." | first | split: "/" | last %}
+                {{ site.url }}/assets/posts/{{ url }}/background_image.png
+            {% else if post.image_dir != nil %}
+                {{ site.url }}/{{ post.image_dir }}
+            {% endif %}
+        );
+    }
+    </style>
+<a class="snippet__link" href="{{ post.url }}">
+    <section class="snippet__data">
+        <section class="snippet__data__metadata">
+            <section class="snippet__data__metadata__category">
+                {% for category in post.category %}
+                    <p class="snippet__data__metadata__category__title" style="background: {{ site.category | where: "category", category | map: "hue"}}">{{ site.category | where: "category", category | map: "title"}}</p>
+                {% else %}
+                    <p class="snippet__data__metadata__category__title">No category</p>
+                {% endfor %}
+            </section>
+            <p class="snippet__data__metadata__date">{{ post.date | date: '%B %d, %Y' }}</p>
+        </section>
+        <h2 class="snippet__data__header">{{post.title }}</h2>
+        <p class="snippet__data__text">{{ post.excerpt | strip_html }}</p>
+        {% if post.author != nil %}
+            <div class="snippet__data__author"> 
+                {% assign author = site.authors | where: "nick", post.author | first %}
+                <img src="{{ site.url }}/{{ author.photo_dir }}"/>
+                <p>{{ author.full_name }}</p>
+            </div>
+        {% endif %}
+    </section>
+</a> 

data/_layouts/category.html

@@ -0,0 +1,25 @@
+---
+layout: default
+---
+
+<section class="feed">
+    <section class="feed__description">
+        {% if page.title != nil %}
+            <h1>{{ page.title }}</h1>
+        {% endif %}
+        {% if page.description != nil %}
+            <p>{{ page.description }}</p>
+        {% endif %}
+    </section>
+     
+    {% for post in site.posts %}
+    <section class="snippet snippet_{{ post.id | slugify: "ascii" }}">
+            {% for category in post.category %}
+                {% if page.category contains category %}
+                    {% include snippet.html post=post %}
+                    {% break %}
+                {% endif %}
+            {% endfor %}
+    </section>
+    {% endfor %}
+</section>

data/_layouts/default.html

@@ -0,0 +1,20 @@
+---
+
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include head.html %}
+</head>
+<body class="index">
+
+    {% include header.html %}
+
+    {{content}}
+    
+    {% include footer.html %}
+    
+    {% include scripts.html %}
+</body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+<section class="feed">
+    <section class="feed__description">
+        <h1>{{ site.title }}</h1>
+        <p>{{ site.description }}</p>
+    </section>
+    
+    {% for post in site.posts %}
+        <section class="snippet snippet_{{ post.id | slugify: "ascii" }}">
+            {% include snippet.html post=post %}
+        </section>
+    {% endfor %}
+</section>

data/_layouts/page.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<main class="page">
+    {{ content }}
+</main>

data/_layouts/post.html

@@ -0,0 +1,60 @@
+---
+layout: default
+---
+
+<article class="post">
+
+    <div class="post__title">
+        <h1 class="post__title__text">{{ page.title }}</h1>
+    </div>
+    <div class="post__meta"> 
+        <div class="post__meta__category">
+            {% for category in page.category %}
+                <p class="post__meta__category__title" style="background: {{ site.category | where: "category", category | map: "hue"}}">{{ site.category | where: "category", category | map: "title"}}</p>
+            {% else %}
+                <p class="post__meta__category__title">No category</p>
+            {% endfor %}
+        </div>
+        <p class="post__meta__divider">·</p>
+        <div class="post__meta__date">
+            {{ page.date | date: '%B %d, %Y' }}
+        </div>
+        {% if page.author != nil %}
+            {% assign author = site.authors | where: "nick", page.author | first %}
+            <p class="post__meta__divider">·</p>
+            <div class="post__meta__author">
+                <p>by </p>
+                <img class="post__meta__author__photo" src="{{ site.url }}/{{ author.photo_dir }}"/>
+                <p>{{ author.full_name }}</p>
+            </div>
+        {% endif %}
+    </div>
+
+    {% if page.prevPart != nil or page.nextPart != nil %}
+        <div class="post__navigator">
+            <div
+                class="post__navigator__buttons"
+                {% if page.prevPart == nil %}
+                    style="justify-content: flex-end;"
+                {% endif %}
+            >
+                {% if page.prevPart != nil %}
+                    <a href="{% link {{ page.prevPart }} %}">
+                        <img  class="arrow-left" src="{{ site.url }}/assets/img/icons/arrow_left.svg"/>
+                        Previous
+                    </a>
+                {% endif %}
+                {% if page.nextPart != nil %}
+                    <a href="{% link {{ page.nextPart }} %}">
+                        Next
+                        <img class="arrow-right" src="{{ site.url }}/assets/img/icons/arrow_right.svg"/>
+                    </a>
+                {% endif %}
+            </div>
+        </div>
+    {% endif %}
+
+    <div class="post__content">
+        {{ content }}
+    </div>
+</article>