mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 03:24:20 +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
|
||||
_site
|
||||
Gemfile.lock
|
||||
vendor
|
||||
|
|
|
|||
2
Gemfile
2
Gemfile
|
|
@ -2,5 +2,3 @@
|
|||
|
||||
source "https://rubygems.org"
|
||||
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
|
||||
|
||||
|
|
@ -30,41 +28,47 @@ Or install it yourself as:
|
|||
$ 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
|
||||
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
|
||||
|
||||
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
|
||||
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`)
|
||||
### `1_base`
|
||||
|
||||
### `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
|
||||
- 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
|
||||
Blog creates a panel disposition intended for posting articles in a blog-like fashon.
|
||||
|
||||
### `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`
|
||||
|
||||
Post extends the `box` layout by adding the `page.title` to the top of the box, rendered as a `<h2>` element.
|
||||
It is an adequate index page layout as well!
|
||||
|
||||
## Development
|
||||
|
||||
|
|
|
|||
14
_config.yml
14
_config.yml
|
|
@ -1,2 +1,12 @@
|
|||
title: "Please set a site title in _config.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)
|
||||
|
|
@ -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!"
|
||||
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