mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
Update to Bluelib 5
This commit is contained in:
parent
b4c8cfb147
commit
6464a2ee71
GPG key ID:
4AEE18F83AFDEB23
18 changed files with 153 additions and 177 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -4,3 +4,4 @@
|
||||||
.sass-cache
|
.sass-cache
|
||||||
_site
|
_site
|
||||||
Gemfile.lock
|
Gemfile.lock
|
||||||
|
vendor
|
||||||
|
|
|
||||||
2
Gemfile
2
Gemfile
|
|
@ -2,5 +2,3 @@
|
||||||
|
|
||||||
source "https://rubygems.org"
|
source "https://rubygems.org"
|
||||||
gemspec
|
gemspec
|
||||||
|
|
||||||
gem "webrick", "~> 1.7"
|
|
||||||
|
|
|
||||||
52
README.md
52
README.md
|
|
@ -1,8 +1,6 @@
|
||||||
# jekyll-theme-bluelib
|
# Bluelib Jekyll
|
||||||
|
|
||||||
A theme providing Bluelib themes on Jekyll static sites!
|
A *work-in-progress* theme for Jekyll using [Bluelib 5](https://github.com/steffo99/bluelib)!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
|
@ -30,41 +28,47 @@ Or install it yourself as:
|
||||||
$ gem install jekyll-theme-bluelib
|
$ gem install jekyll-theme-bluelib
|
||||||
```
|
```
|
||||||
|
|
||||||
After installing, add to `_config.yml` the name of your preferred bluelib theme:
|
After installing, add to `_config.yml` your desired config:
|
||||||
```yml
|
```yml
|
||||||
bluelib: "royalblue"
|
title: "Bluelib Jekyll"
|
||||||
|
|
||||||
|
bluelib:
|
||||||
|
rulesets:
|
||||||
|
- base.root
|
||||||
|
- classic.root
|
||||||
|
- glass.root
|
||||||
|
- colors-royalblue.root
|
||||||
|
- fonts-fira-ghpages.root
|
||||||
|
|
||||||
|
background: >-
|
||||||
|
url(https://gh.steffo.eu/bluelib/examples/Space_Default.jpg)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
The theme provides four layouts: `default`, `base`, `box` and `post`.
|
The theme provides three layouts: `0_default`, `1_base` and `2_blog`.
|
||||||
|
|
||||||
### `default`
|
### `0_page`
|
||||||
|
|
||||||
Default is the simplest layout of the four, and only adds the bluelib stylesheets for the theme to be displayed.
|
Default is the simplest layout of the three, and creates the page root, containing only **the Bluelib rulesets** sourced from [UNPKG](https://unpkg.com/), and an **empty body**.
|
||||||
|
|
||||||
In particular, it `<link>`s in the following order:
|
In particular, it `<link>`s the rulesets using the order specified at `site.bluelib.rulesets`.
|
||||||
|
|
||||||
1. The `skeleton.root.css` from the latest version of bluelib
|
### `1_base`
|
||||||
2. The bluelib `root` target defined in the `bluelib` variable of `_config.yml` (`site.bluelib`)
|
|
||||||
3. The bluelib `root` target defined in the `bluelib` variable of the Front Matter of the page (`page.bluelib`)
|
|
||||||
4. The CSS files specified in the `extra_css` array of `_config.yml` (`site.extra_css`)
|
|
||||||
|
|
||||||
### `base`
|
Base adds the website title, hyperlinking to the site home, to the `0_page` layout.
|
||||||
|
|
||||||
Base adds some elements to the `default` layout:
|
### `2_blog`
|
||||||
|
|
||||||
- it adds a `layout-threecol` to the page
|
Blog creates a panel disposition intended for posting articles in a blog-like fashon.
|
||||||
- it centers the page `contents` by using `layout-threecol-center`
|
|
||||||
- it renders the `title` defined in `_config.yml` as a `<h1>` element before the contents
|
|
||||||
|
|
||||||
### `box`
|
It currently supports the following Jekyll features:
|
||||||
|
|
||||||
Box wraps the `contents` of the page in a `panel panel-box`.
|
- [x] Posts
|
||||||
|
- [ ] Tags
|
||||||
|
- [ ] Categories
|
||||||
|
|
||||||
### `post`
|
It is an adequate index page layout as well!
|
||||||
|
|
||||||
Post extends the `box` layout by adding the `page.title` to the top of the box, rendered as a `<h2>` element.
|
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
|
|
|
||||||
14
_config.yml
14
_config.yml
|
|
@ -1,2 +1,12 @@
|
||||||
title: "Please set a site title in _config.yml!"
|
title: "Bluelib Jekyll"
|
||||||
bluelib: "royalblue"
|
|
||||||
|
bluelib:
|
||||||
|
rulesets:
|
||||||
|
- base.root
|
||||||
|
- classic.root
|
||||||
|
- glass.root
|
||||||
|
- colors-royalblue.root
|
||||||
|
- fonts-fira-ghpages.root
|
||||||
|
|
||||||
|
background: >-
|
||||||
|
url(https://gh.steffo.eu/bluelib/examples/Space_Default.jpg)
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<section class="panel summary">
|
|
||||||
<div class="summary-title">
|
|
||||||
<a href="{{ post.url }}">
|
|
||||||
{{ post.title }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="summary-date">
|
|
||||||
<time>
|
|
||||||
{{ post.date }}
|
|
||||||
</time>
|
|
||||||
</div>
|
|
||||||
<div class="summary-tags">
|
|
||||||
{% for tag in post.tags %}
|
|
||||||
{% include tag.html %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<div class="panel tag">
|
|
||||||
<a href="{{ site.url }}/#tag-{{ tag }}">
|
|
||||||
{{ tag }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
21
_layouts/0_page.html
Normal file
21
_layouts/0_page.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Metadata -->
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<title>{{ page.title }} - {{ site.title }}</title>
|
||||||
|
<!-- Stylesheets -->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: {{ site.background }};
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% for ruleset in site.bluelib.rulesets %}
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/@steffo/bluelib@^5/dist/{{ruleset}}.css" type="text/css"/>
|
||||||
|
{% endfor %}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{{ content }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
_layouts/1_base.html
Normal file
10
_layouts/1_base.html
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
layout: 0_page
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<a href="{{ site.url }}">
|
||||||
|
{{ site.title }}
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
{{ content }}
|
||||||
63
_layouts/2_blog.html
Normal file
63
_layouts/2_blog.html
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
---
|
||||||
|
layout: 1_base
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
max-width: 300px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel .list-markerless {
|
||||||
|
margin-left: 0.5ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel .list-markerless li::marker {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
font-style: var(--bfont-code-style);
|
||||||
|
font-variant: var(--bfont-code-variant);
|
||||||
|
font-weight: var(--bfont-code-weight);
|
||||||
|
font-stretch: var(--bfont-code-stretch);
|
||||||
|
line-height: var(--bfont-code-height);
|
||||||
|
font-family: var(--bfont-code-family);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="chapter-0">
|
||||||
|
<main>
|
||||||
|
<article class="panel panel-box">
|
||||||
|
{% if page.title %}
|
||||||
|
<h2>
|
||||||
|
{{ page.title }}
|
||||||
|
</h2>
|
||||||
|
{% endif %}
|
||||||
|
{{ content }}
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
{% if site.posts %}
|
||||||
|
<aside>
|
||||||
|
<section class="panel panel-box">
|
||||||
|
<h3>
|
||||||
|
Latest posts
|
||||||
|
</h3>
|
||||||
|
<ul class="list-markerless">
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<li>
|
||||||
|
<time datetime="{{ post.date }}">{{ post.date | date: "%Y-%m-%d" }}</time> - <a href="{{ post.url }}">{{ post.title }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
---
|
|
||||||
layout: default
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="layout layout-threecol">
|
|
||||||
<div class="layout-threecol-center">
|
|
||||||
<h1>
|
|
||||||
<a href="{{ site.url }}">
|
|
||||||
{{ site.title }}
|
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section class="panel panel-box">
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<link rel="stylesheet" href="https://gh.steffo.eu/bluelib/src/targets/skeleton.root.css" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="https://gh.steffo.eu/bluelib/src/targets/{{ site.bluelib }}.root.css" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="https://gh.steffo.eu/bluelib/src/targets/{{ page.bluelib }}.root.css" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="{% link /assets/css/bluelib-jekyll.css %}"/>
|
|
||||||
{% for css in site.extra_css %}
|
|
||||||
<link rel="stylesheet" href="{% link css %}"/>
|
|
||||||
{% endfor %}
|
|
||||||
<title>{{ page.title }} - {{ site.title }}</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{{ content }}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section class="panel panel-box">
|
|
||||||
<h2>
|
|
||||||
{{ page.title }}
|
|
||||||
</h2>
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% if site.posts %}
|
|
||||||
<section class="panel panel-box">
|
|
||||||
<h2>
|
|
||||||
Posts
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
These are the latest posts in the site in reverse chronological order.
|
|
||||||
</p>
|
|
||||||
{% for post in site.posts %}
|
|
||||||
{% include post-summary.html %}
|
|
||||||
{% endfor %}
|
|
||||||
</section>
|
|
||||||
<section class="panel panel-box">
|
|
||||||
<h2>
|
|
||||||
Posts by tag
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
These are all the posts in the blog, grouped by their tag.
|
|
||||||
</p>
|
|
||||||
<section class="chapter">
|
|
||||||
{% for tag_pair in site.tags %}
|
|
||||||
<section id="tag-{{ tag_pair[0] }}" class="panel panel-box">
|
|
||||||
<h3>
|
|
||||||
{{ tag_pair[0] }}
|
|
||||||
</h3>
|
|
||||||
{% for post in tag_pair[1] %}
|
|
||||||
{% include post-summary.html %}
|
|
||||||
{% endfor %}
|
|
||||||
</section>
|
|
||||||
{% endfor %}
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
{% else %}
|
|
||||||
<section class="panel panel-box">
|
|
||||||
<h2>
|
|
||||||
Pages
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
These are the pages in the site in alphabetical order.
|
|
||||||
</p>
|
|
||||||
{% for post in site.posts %}
|
|
||||||
{% include page-summary.html %}
|
|
||||||
{% endfor %}
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
---
|
|
||||||
layout: base
|
|
||||||
---
|
|
||||||
|
|
||||||
<section class="panel panel-box info">
|
|
||||||
<div class="panel info-date">
|
|
||||||
<time>
|
|
||||||
{{ page.date }}
|
|
||||||
</time>
|
|
||||||
</div>
|
|
||||||
<div class="info-tags">
|
|
||||||
{% for tag in page.tags %}
|
|
||||||
{% include tag.html %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel panel-box">
|
|
||||||
<h2>
|
|
||||||
<a href="{{ page.url }}">
|
|
||||||
{{ page.title }}
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
{{ content }}
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
layout: post
|
layout: 2_blog
|
||||||
title: "Hello world!"
|
title: "Hello world!"
|
||||||
tags: example first hello-world
|
|
||||||
---
|
---
|
||||||
|
|
||||||
This is a sample post made to display posts made using `jekyll-theme-bluelib`.
|
This is an example post created to show an example of posts created using Bluelib Jekyll!
|
||||||
|
|
||||||
|
You can go back to the home by clicking the website title at the top.
|
||||||
|
|
|
||||||
6
_posts/2022-10-12-five.md
Normal file
6
_posts/2022-10-12-five.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
layout: 2_blog
|
||||||
|
title: "Say hello to Bluelib 5"
|
||||||
|
---
|
||||||
|
|
||||||
|
This theme has been updated to [Bluelib 5](https://gh.steffo.eu/bluelib/examples/)!
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
---
|
|
||||||
layout: home
|
|
||||||
title: "jekyll-theme-bluelib"
|
|
||||||
---
|
|
||||||
|
|
||||||
This is the example home page of <code>jekyll-theme-bluelib</code>.
|
|
||||||
8
index.md
Normal file
8
index.md
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
layout: 2_blog
|
||||||
|
title: "Example"
|
||||||
|
---
|
||||||
|
|
||||||
|
Welcome to the **Bluelib Jekyll** example website!
|
||||||
|
|
||||||
|
What is going on?!
|
||||||
Loading…
Reference in a new issue