bulma-clean-theme 0.7.1 → 0.9.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/README.md +44 -2
- data/_includes/callouts.html +5 -1
- data/_includes/footer.html +1 -1
- data/_includes/gallery.html +27 -0
- data/_includes/head.html +5 -2
- data/_includes/header.html +3 -3
- data/_includes/hero.html +2 -2
- data/_includes/menubar.html +2 -2
- data/_includes/pagination.html +2 -2
- data/_includes/share-buttons.html +19 -0
- data/_includes/showcase.html +1 -1
- data/_includes/tabs.html +1 -1
- data/_includes/youtube.html +8 -0
- data/_layouts/default.html +1 -0
- data/_layouts/post.html +4 -0
- data/_layouts/product-category.html +1 -1
- data/_posts/2020-05-08-creating-a-docs-site-with-bulma-clean-theme.markdown +96 -0
- data/node_modules/bulma-block-list/README.md +12 -0
- data/node_modules/bulma-block-list/docs/Gemfile +3 -0
- data/node_modules/bulma-block-list/docs/_config.yml +15 -0
- data/node_modules/bulma-block-list/docs/_data/menu.yaml +20 -0
- data/node_modules/bulma-block-list/docs/_sass/_block-list.scss +92 -0
- data/node_modules/bulma-block-list/docs/_sass/_main.scss +20 -0
- data/node_modules/bulma-block-list/docs/assets/css/app.scss +7 -0
- data/node_modules/bulma-block-list/docs/favicon.ico +0 -0
- data/node_modules/bulma-block-list/docs/index.html +250 -232
- data/node_modules/bulma-block-list/node_modules/bulma/CHANGELOG.md +1390 -0
- data/node_modules/bulma-block-list/node_modules/bulma/LICENSE +21 -0
- data/node_modules/bulma-block-list/node_modules/bulma/README.md +130 -0
- data/node_modules/bulma-block-list/node_modules/bulma/bulma.sass +9 -0
- data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css +10855 -0
- data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.css.map +1 -0
- data/node_modules/bulma-block-list/node_modules/bulma/css/bulma.min.css +1 -0
- data/node_modules/bulma-block-list/node_modules/bulma/package.json +77 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/base/_all.sass +5 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/base/generic.sass +142 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/base/helpers.sass +281 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/base/minireset.sass +79 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/_all.sass +15 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/card.sass +79 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/dropdown.sass +81 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/level.sass +77 -0
- data/node_modules/{bulma → bulma-block-list/node_modules/bulma}/sass/components/list.sass +0 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/media.sass +50 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/menu.sass +57 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/message.sass +99 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/modal.sass +113 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/navbar.sass +441 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/pagination.sass +150 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/panel.sass +119 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/components/tabs.sass +151 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/_all.sass +15 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/box.sass +24 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/button.sass +323 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/container.sass +24 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/content.sass +155 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/form.sass +1 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/icon.sass +21 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/image.sass +71 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/notification.sass +43 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/other.sass +39 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/progress.sass +67 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/table.sass +127 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/tag.sass +128 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/elements/title.sass +70 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/_all.sass +8 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/checkbox-radio.sass +21 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/file.sass +180 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/input-textarea.sass +64 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/select.sass +85 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/shared.sass +55 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/form/tools.sass +205 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/_all.sass +4 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/columns.sass +504 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/grid/tiles.sass +34 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/_all.sass +5 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/footer.sass +9 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/hero.sass +145 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/layout/section.sass +13 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/_all.sass +8 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/animations.sass +5 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/controls.sass +50 -0
- data/node_modules/{bulma → bulma-block-list/node_modules/bulma}/sass/utilities/derived-variables.sass +0 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/functions.sass +110 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/initial-variables.sass +77 -0
- data/node_modules/bulma-block-list/node_modules/bulma/sass/utilities/mixins.sass +261 -0
- data/node_modules/bulma-block-list/package.json +10 -10
- data/node_modules/bulma-block-list/src/block-list.scss +55 -42
- data/node_modules/bulma-block-list/src/demo.scss +1 -1
- data/node_modules/bulma/CHANGELOG.md +89 -1
- data/node_modules/bulma/LICENSE +1 -1
- data/node_modules/bulma/README.md +12 -8
- data/node_modules/bulma/bulma.sass +2 -1
- data/node_modules/bulma/css/bulma-rtl.css +11331 -0
- data/node_modules/bulma/css/bulma-rtl.css.map +1 -0
- data/node_modules/bulma/css/bulma-rtl.min.css +1 -0
- data/node_modules/bulma/css/bulma.css +6815 -6316
- data/node_modules/bulma/css/bulma.css.map +1 -1
- data/node_modules/bulma/css/bulma.min.css +1 -1
- data/node_modules/bulma/package.json +24 -23
- data/node_modules/bulma/sass/base/_all.sass +0 -1
- data/node_modules/bulma/sass/base/generic.sass +1 -1
- data/node_modules/bulma/sass/base/helpers.sass +1 -281
- data/node_modules/bulma/sass/base/minireset.sass +1 -1
- data/node_modules/bulma/sass/components/_all.sass +0 -1
- data/node_modules/bulma/sass/components/breadcrumb.sass +3 -3
- data/node_modules/bulma/sass/components/card.sass +1 -1
- data/node_modules/bulma/sass/components/dropdown.sass +3 -3
- data/node_modules/bulma/sass/components/level.sass +2 -2
- data/node_modules/bulma/sass/components/media.sass +11 -9
- data/node_modules/bulma/sass/components/menu.sass +2 -2
- data/node_modules/bulma/sass/components/message.sass +1 -1
- data/node_modules/bulma/sass/components/modal.sass +3 -3
- data/node_modules/bulma/sass/components/navbar.sass +18 -20
- data/node_modules/bulma/sass/components/panel.sass +4 -3
- data/node_modules/bulma/sass/components/tabs.sass +35 -12
- data/node_modules/bulma/sass/elements/button.sass +17 -16
- data/node_modules/bulma/sass/elements/content.sass +5 -5
- data/node_modules/bulma/sass/elements/notification.sass +14 -2
- data/node_modules/bulma/sass/elements/table.sass +3 -1
- data/node_modules/bulma/sass/elements/tag.sass +24 -16
- data/node_modules/bulma/sass/form/checkbox-radio.sass +1 -1
- data/node_modules/bulma/sass/form/file.sass +9 -9
- data/node_modules/bulma/sass/form/input-textarea.sass +1 -1
- data/node_modules/bulma/sass/form/select.sass +6 -6
- data/node_modules/bulma/sass/form/shared.sass +3 -3
- data/node_modules/bulma/sass/form/tools.sass +18 -10
- data/node_modules/bulma/sass/helpers/_all.sass +10 -0
- data/node_modules/bulma/sass/helpers/color.sass +37 -0
- data/node_modules/bulma/sass/helpers/float.sass +8 -0
- data/node_modules/bulma/sass/helpers/other.sass +8 -0
- data/node_modules/bulma/sass/helpers/overflow.sass +2 -0
- data/node_modules/bulma/sass/helpers/position.sass +5 -0
- data/node_modules/bulma/sass/helpers/spacing.sass +28 -0
- data/node_modules/bulma/sass/helpers/typography.sass +98 -0
- data/node_modules/bulma/sass/helpers/visibility.sass +122 -0
- data/node_modules/bulma/sass/layout/hero.sass +22 -20
- data/node_modules/bulma/sass/utilities/_all.sass +1 -1
- data/node_modules/bulma/sass/utilities/derived-variables.scss +132 -0
- data/node_modules/bulma/sass/utilities/functions.sass +17 -0
- data/node_modules/bulma/sass/utilities/initial-variables.sass +1 -0
- data/node_modules/bulma/sass/utilities/mixins.sass +28 -4
- data/package-lock.json +13 -6
- data/package.json +2 -2
- metadata +88 -7
- data/node_modules/bulma-block-list/docs/demo.css +0 -7212
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: a22759881c56ee79be3fa1ae67957044ccc68b4754372f2ee716dac227da6478
|
4
|
+
data.tar.gz: 9815893be1fd2952dab4db36eb11a85cd14437219c36a1fa6ed05be9fbccd2fd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7a5be72f27ea377e38efa66bddad991a83b4024f87a14c31f110c20f3a1bbea7181c11616920f22a5d9460999f5ad707ba7c52720cf27d9696bed513b0c25fd5
|
7
|
+
data.tar.gz: 324b9660f804d6e2ec1a1b353efa70d643d70393b357a4ddabe7a1dd8561c3c43a43388c3eeda51857e6f620b1a8e14bdf0836ec4c84248343f2726a467d5502
|
data/README.md
CHANGED
@@ -26,6 +26,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
|
|
26
26
|
* [Favicon](#favicon)
|
27
27
|
* [Showcases](#showcases)
|
28
28
|
* [Sponsors](#sponsors)
|
29
|
+
* [Gallery](#gallery)
|
29
30
|
* [Disqus](#disqus)
|
30
31
|
* [Contributing](#contributing)
|
31
32
|
* [Development](#development)
|
@@ -98,6 +99,10 @@ paginate_path: "/blog/page:num"
|
|
98
99
|
|
99
100
|
You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium
|
100
101
|
|
102
|
+
#### Social Share Buttons
|
103
|
+
|
104
|
+
Share buttons will be displayed on your posts unless you hide them by adding `hide_share_buttons: true` to your config file.
|
105
|
+
|
101
106
|
|
102
107
|
### Navigation
|
103
108
|
|
@@ -381,7 +386,7 @@ Create a data file following the below format. The style is for classes to set t
|
|
381
386
|
|
382
387
|
**New in 0.5.7** You can set the height of the callouts in the data file, such as is-small, is-medium or is-large. If unset it will be is-medium by default.
|
383
388
|
|
384
|
-
The items have
|
389
|
+
The items have 6 fields, but only the title and subtitle are required. If the icon is a brand icon, such as GitHub in the below example, set `icon_brand: true`.
|
385
390
|
|
386
391
|
```yaml
|
387
392
|
style: is-light
|
@@ -389,7 +394,8 @@ height: is-medium
|
|
389
394
|
items:
|
390
395
|
- title: Example callout 1
|
391
396
|
subtitle: Example subtitle 1
|
392
|
-
icon: fa-
|
397
|
+
icon: fa-github
|
398
|
+
icon_brand: true
|
393
399
|
description: >
|
394
400
|
The example description text goes here and can be multiple lines.
|
395
401
|
|
@@ -511,6 +517,42 @@ title: My Sponsors Page
|
|
511
517
|
sponsors: my_sponsors
|
512
518
|
```
|
513
519
|
|
520
|
+
### Gallery
|
521
|
+
|
522
|
+
Display a simple image gallery on a page, with image descriptions.
|
523
|
+
|
524
|
+
#### Create an image gallery data file
|
525
|
+
|
526
|
+
Start by creating a gallery data file using the below format, for example `my_gallery.yml`.
|
527
|
+
|
528
|
+
```yaml
|
529
|
+
- title: Image Gallery Title
|
530
|
+
images:
|
531
|
+
- link: https://via.placeholder.com/800x450
|
532
|
+
alt: The alt text for the image
|
533
|
+
description: |-
|
534
|
+
The image description can be written in **markdown** if required
|
535
|
+
ratio: is-16by9
|
536
|
+
- link: https://via.placeholder.com/800x600
|
537
|
+
alt: The alt text for the image
|
538
|
+
description: The image description
|
539
|
+
ratio: is-4by3
|
540
|
+
```
|
541
|
+
|
542
|
+
* If a ratio is not provided it will default to 16 by 9. Use [Bulma image](https://bulma.io/documentation/elements/image/) classes to define the image ratio required.
|
543
|
+
* The description can be plain text or it can be markdown if required.
|
544
|
+
* The alt will be used as the images alt text.
|
545
|
+
|
546
|
+
#### Displaying the gallery
|
547
|
+
|
548
|
+
In your pages front matter add a gallery with the datafiles filename without the extension.
|
549
|
+
|
550
|
+
```yaml
|
551
|
+
layout: page
|
552
|
+
title: My Image Gallery
|
553
|
+
gallery: my_gallery
|
554
|
+
```
|
555
|
+
|
514
556
|
### Disqus
|
515
557
|
|
516
558
|
Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`. Then you need to set your Jekyll environment to production:
|
data/_includes/callouts.html
CHANGED
@@ -8,7 +8,11 @@
|
|
8
8
|
<div class="column is-4 has-text-centered">
|
9
9
|
{% if callout.icon %}
|
10
10
|
<div class="icon is-large">
|
11
|
+
{% if callout.icon_brand %}
|
12
|
+
<i class="fab {{ callout.icon }} fa-4x"></i>
|
13
|
+
{% else %}
|
11
14
|
<i class="fas {{ callout.icon }} fa-4x"></i>
|
15
|
+
{% endif %}
|
12
16
|
</div>
|
13
17
|
{% endif %}
|
14
18
|
<p class="title is-5">{{ callout.title }}</p>
|
@@ -21,7 +25,7 @@
|
|
21
25
|
{% endif %}
|
22
26
|
|
23
27
|
{% if callout.call_to_action_name %}
|
24
|
-
<a href="{{ callout.call_to_action_link |
|
28
|
+
<a href="{{ callout.call_to_action_link | relative_url }}" class="button is-primary">
|
25
29
|
{{ callout.call_to_action_name }}
|
26
30
|
</a>
|
27
31
|
{% endif %}
|
data/_includes/footer.html
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
{% for item in site.data[site.footer_menu] %}
|
7
7
|
<div class="column has-text-centered">
|
8
8
|
<div>
|
9
|
-
<a href="{{ item.link |
|
9
|
+
<a href="{{ item.link | relative_url }}" class="link">{{ item.name }}</a>
|
10
10
|
</div>
|
11
11
|
</div>
|
12
12
|
{% endfor %}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
{% if page.gallery %}
|
2
|
+
{% assign galleries=site.data.[page.gallery] %}
|
3
|
+
{% for gallery in galleries %}
|
4
|
+
<div class="columns is-multiline">
|
5
|
+
<div class="column is-12">
|
6
|
+
<p class="title is-3 has-text-centered">{{ gallery.title }}</p>
|
7
|
+
</div>
|
8
|
+
{% for image in gallery.images %}
|
9
|
+
<div class="column is-4-desktop is-6-tablet">
|
10
|
+
<div class="card">
|
11
|
+
<div class="card-image">
|
12
|
+
<figure class="image {{ image.ratio | default: is-16by9 }}">
|
13
|
+
<img src="{{ image.link | absolute_url }}" alt="{{ image.alt }}">
|
14
|
+
</figure>
|
15
|
+
</div>
|
16
|
+
<div class="card-content">
|
17
|
+
<div class="content">
|
18
|
+
{{ image.description | markdownify }}
|
19
|
+
</div>
|
20
|
+
|
21
|
+
</div>
|
22
|
+
</div>
|
23
|
+
</div>
|
24
|
+
{% endfor %}
|
25
|
+
</div>
|
26
|
+
{% endfor %}
|
27
|
+
{% endif %}
|
data/_includes/head.html
CHANGED
@@ -4,9 +4,12 @@
|
|
4
4
|
<title>{{ page.title }} - {{ site.title }}</title>
|
5
5
|
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
|
6
6
|
<link rel="shortcut icon" type="image/png"
|
7
|
-
{% if site.favicon %} href="{{ site.favicon |
|
7
|
+
{% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
|
8
8
|
/>
|
9
|
-
<
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
|
10
|
+
{% unless site.hide_share_buttons %}
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">
|
12
|
+
{% endunless %}
|
10
13
|
{% seo %}
|
11
14
|
{%- if site.google_analytics -%}
|
12
15
|
{%- include google-analytics.html -%}
|
data/_includes/header.html
CHANGED
@@ -18,15 +18,15 @@
|
|
18
18
|
{% for item in site.data.navigation %}
|
19
19
|
{% if item.dropdown %}
|
20
20
|
<div class="navbar-item has-dropdown is-hoverable">
|
21
|
-
<a href="{{ item.link |
|
21
|
+
<a href="{{ item.link | relative_url }}" class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
|
22
22
|
<div class="navbar-dropdown">
|
23
23
|
{% for subitem in item.dropdown %}
|
24
|
-
<a href="{{ subitem.link |
|
24
|
+
<a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
|
25
25
|
{% endfor %}
|
26
26
|
</div>
|
27
27
|
</div>
|
28
28
|
{% else %}
|
29
|
-
<a href="{{ item.link |
|
29
|
+
<a href="{{ item.link | relative_url }}" class="navbar-item {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
|
30
30
|
{% endif %}
|
31
31
|
{% endfor %}
|
32
32
|
{% endif %}
|
data/_includes/hero.html
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
<section class="hero {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% endif %} is-bold is-primary" {% if page.hero_image %} style="background: url('{{ page.hero_image }}') no-repeat center center; background-size: cover;" {% endif %}>
|
2
2
|
<div class="hero-body {% if page.hero_darken %} hero-darken {% endif %}">
|
3
3
|
<div class="container">
|
4
|
-
<
|
4
|
+
<h1 class="title is-2">{{ page.title }}</h1>
|
5
5
|
<p class="subtitle is-3">{{ page.subtitle }}</p>
|
6
6
|
{% if page.hero_link %}
|
7
|
-
<a href="{{ page.hero_link |
|
7
|
+
<a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
|
8
8
|
{% endif %}
|
9
9
|
</div>
|
10
10
|
</div>
|
data/_includes/menubar.html
CHANGED
@@ -6,11 +6,11 @@
|
|
6
6
|
<ul class="menu-list">
|
7
7
|
{% for item in menu.items %}
|
8
8
|
<li>
|
9
|
-
<a href="{{ item.link |
|
9
|
+
<a href="{{ item.link | relative_url }}" class="{% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
|
10
10
|
{% if item.items %}
|
11
11
|
<ul>
|
12
12
|
{% for subitem in item.items %}
|
13
|
-
<li><a href="{{ subitem.link |
|
13
|
+
<li><a href="{{ subitem.link | relative_url }}" class="{% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a></li>
|
14
14
|
{% endfor %}
|
15
15
|
</ul>
|
16
16
|
{% endif %}
|
data/_includes/pagination.html
CHANGED
@@ -14,10 +14,10 @@
|
|
14
14
|
{% if page == paginator.page %}
|
15
15
|
<li><a class="pagination-link is-current">{{ page }}</a></li>
|
16
16
|
{% elsif page == 1 %}
|
17
|
-
<li><a href="{{
|
17
|
+
<li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | split: '/' | pop | join: '/' }}" class="pagination-link">{{ page }}</a></li>
|
18
18
|
{% else %}
|
19
19
|
<li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}" class="pagination-link">{{ page }}</a></li>
|
20
20
|
{% endif %}
|
21
21
|
{% endfor %}
|
22
22
|
</ul>
|
23
|
-
</nav>
|
23
|
+
</nav>
|
@@ -0,0 +1,19 @@
|
|
1
|
+
<p><strong>Share</strong></p>
|
2
|
+
<div class="buttons {% if include.centered %} is-centered {% endif %}">
|
3
|
+
<a class="button is-medium is-facebook"
|
4
|
+
onclick="window.open('https://www.facebook.com/share.php?u={{ site.url }}{{ page.url | prepend: site.baseurl }}');">
|
5
|
+
<span class="icon"><i class="fab fa-facebook fa-lg"></i></span>
|
6
|
+
</a>
|
7
|
+
<a class="button is-medium is-twitter"
|
8
|
+
onclick="window.open('https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url | prepend: site.baseurl }}');">
|
9
|
+
<span class="icon"><i class="fab fa-twitter fa-lg"></i></span>
|
10
|
+
</a>
|
11
|
+
<a class="button is-medium is-linkedin"
|
12
|
+
onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url | prepend: site.baseurl }}&title={{ page.title | url_encode }}&summary=&source=');">
|
13
|
+
<span class="icon"><i class="fab fa-linkedin fa-lg"></i></span>
|
14
|
+
</a>
|
15
|
+
<a class="button is-medium is-reddit"
|
16
|
+
onclick="window.open('https://reddit.com/submit?url={{ site.url }}{{ page.url | prepend: site.baseurl }}');">
|
17
|
+
<span class="icon"><i class="fab fa-reddit fa-lg"></i></span>
|
18
|
+
</a>
|
19
|
+
</div>
|
data/_includes/showcase.html
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
{% for item in showcase.items %}
|
9
9
|
<section class="showcase">
|
10
10
|
<figure class="image {% if item.image_ratio %} {{ item.image_ratio }} {% else %} is-16by9 {% endif %}">
|
11
|
-
<img src="{{ item.image |
|
11
|
+
<img src="{{ item.image | relative_url }}" />
|
12
12
|
</figure>
|
13
13
|
<div class="showcase-content">
|
14
14
|
<div class="columns is-centered">
|
data/_includes/tabs.html
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
<ul>
|
6
6
|
{% for tab in tabs.items %}
|
7
7
|
<li {% if tab.link == page.url %} class="is-active" {% endif %}>
|
8
|
-
<a href="{{ tab.link |
|
8
|
+
<a href="{{ tab.link | relative_url }}">
|
9
9
|
{% if tab.icon %}
|
10
10
|
<span class="icon is-small"><i class="fas {{ tab.icon }}" aria-hidden="true"></i></span>
|
11
11
|
{% endif %}
|
data/_layouts/default.html
CHANGED
data/_layouts/post.html
CHANGED
@@ -0,0 +1,96 @@
|
|
1
|
+
---
|
2
|
+
layout: post
|
3
|
+
title: Creating a docs site with Bulma Clean Theme
|
4
|
+
description: How to create a docs site for your project with Bulma Clean Theme
|
5
|
+
date: 2020-05-08 09:00:07
|
6
|
+
hero_image: https://www.csrhymes.com/img/example-docs-page.jpg
|
7
|
+
hero_height: is-large
|
8
|
+
hero_darken: true
|
9
|
+
image: https://www.csrhymes.com/img/example-docs-page.jpg
|
10
|
+
tags: bulma-clean-theme jekyll docs
|
11
|
+
canonical_url: https://www.csrhymes.com/2020/05/08/creating-a-docs-site-with-bulma-clean-theme.html
|
12
|
+
---
|
13
|
+
|
14
|
+
I created Bulma Clean Theme as a theme for my own website and decided to open source it so others could use it as well. One of the key things I wanted to do was to create a theme that worked with GitHub Pages, which also means that you can also use it as a docs site for your project.
|
15
|
+
|
16
|
+
## GitHub Pages Configuration
|
17
|
+
|
18
|
+
GitHub pages allows you to create a website for your project with free hosting. Go to your repo on GitHub, then click Settings, then scroll down to the GitHub Pages section. You have the option to create a site from the root of your master branch of from the /docs directory in your master branch. For this example, we are going to use the /docs directory.
|
19
|
+
|
20
|
+
Don't change this setting just yet as if you don't have a docs directory there will be nothing there to publish.
|
21
|
+
|
22
|
+
## Creating the docs directory
|
23
|
+
|
24
|
+
Clone your git repo to a local directory, let's say `~/code/my-project` for this example. The below assumes you don't yet have a docs directory and you have [jekyll installed](https://jekyllrb.com/docs/installation/). If you do already have a docs directory you will have to rename it to something else.
|
25
|
+
|
26
|
+
Create a new jekyll installation in the docs directory, ensuring you replace your username and project name in the below example.
|
27
|
+
|
28
|
+
```bash
|
29
|
+
git clone https://github.com/username/my-project.git ~/code/my-project
|
30
|
+
cd ~/code/my-project
|
31
|
+
jekyll new docs
|
32
|
+
```
|
33
|
+
|
34
|
+
You should now have a base install of Jekyll in your freshly created docs directory.
|
35
|
+
|
36
|
+
## Configuring the theme
|
37
|
+
|
38
|
+
1. Replace everything in the Gemfile with the following
|
39
|
+
```
|
40
|
+
source 'https://rubygems.org'
|
41
|
+
gem "bulma-clean-theme", '0.7.2'
|
42
|
+
gem 'github-pages', group: :jekyll_plugins
|
43
|
+
```
|
44
|
+
|
45
|
+
2. Open the `_config.yml` and comment out or delete the line `theme: minima` and replace it with `remote_theme: chrisrhymes/bulma-clean-theme`, then add `github-pages` to the list of plugins. Update the baseurl to your GitHub repo name, in this example we are using `my-project` as the repo name
|
46
|
+
```yaml
|
47
|
+
#theme: minima
|
48
|
+
remote_theme: chrisrhymes/bulma-clean-theme
|
49
|
+
baseurl: "/my-project"
|
50
|
+
plugins:
|
51
|
+
- github-pages
|
52
|
+
```
|
53
|
+
|
54
|
+
3. Open the `index.md` file and update the front matter so the layout is page and then add a title
|
55
|
+
```yaml
|
56
|
+
layout: page
|
57
|
+
title: Docs for My Project
|
58
|
+
```
|
59
|
+
|
60
|
+
4. Run `bundle install` and then `bundle exec jekyll serve`
|
61
|
+
|
62
|
+
5. Visit `http://localhost:4000/my-project/` to view your new docs page.
|
63
|
+
|
64
|
+
## Menu
|
65
|
+
|
66
|
+
To create a menu on the left on your docs page you need to create a new yaml file in _data directory, such as `menu.yaml` and then use the below format, where the label will be the menu title and the items are the menu items. Each menu item can have a list of sub menu items if needed.
|
67
|
+
|
68
|
+
```yaml
|
69
|
+
- label: Example Menu
|
70
|
+
items:
|
71
|
+
- name: Menu item
|
72
|
+
link: /link/
|
73
|
+
items:
|
74
|
+
- name: Sub menu item
|
75
|
+
link: /sub-menu-item/
|
76
|
+
```
|
77
|
+
|
78
|
+
## Table of contents
|
79
|
+
|
80
|
+
If you would like auto generated table of contents for your docs page then add `toc: true` to the page's front matter. The table of contents works for markdown pages and loops through the heading 2s and heading 3s in the markdown and then auto generates the contents.
|
81
|
+
|
82
|
+
## GitHub Sponsors
|
83
|
+
|
84
|
+
If you want to link to your GitHub sponsors profile then add `gh_sponsor` with your username to the `_config.yml` file.
|
85
|
+
|
86
|
+
```
|
87
|
+
gh_sponsor: chrisrhymes
|
88
|
+
```
|
89
|
+
|
90
|
+
## Making the docs page live
|
91
|
+
|
92
|
+
Once you have finished creating your docs page you can commit your changes and push everything up to GitHub. Go back to the GitHub settings page and scroll back down to the GitHub Pages section. Now we can update the setting to use the Master branch /docs folder and then GitHub will build your new docs page.
|
93
|
+
|
94
|
+
## Want to see an example?
|
95
|
+
|
96
|
+
I recently updated one of my own packages to use Bulma Clean Theme to power the docs page. Check out the docs for [Bulma Block List](https://www.csrhymes.com/bulma-block-list) as an example.
|
@@ -17,4 +17,16 @@ A simple scss package extending Bulma with block style list elements
|
|
17
17
|
</ul>
|
18
18
|
```
|
19
19
|
|
20
|
+
## List Item Overrides
|
21
|
+
|
22
|
+
In v0.3 you can override the list item styles.
|
23
|
+
|
24
|
+
```html
|
25
|
+
<ul class="block-list is-small">
|
26
|
+
<li>Item one</li>
|
27
|
+
<li class="is-primary is-outlined is-large">Item two</li>
|
28
|
+
<li>Item three</li>
|
29
|
+
</ul>
|
30
|
+
```
|
31
|
+
|
20
32
|
For examples see [csrhymes.com/bulma-block-list](https://www.csrhymes.com/bulma-block-list)
|
@@ -0,0 +1,15 @@
|
|
1
|
+
title: Bulma Block List
|
2
|
+
description: >- # this means to ignore newlines until "baseurl:"
|
3
|
+
Bulma Block List is a simple scss package extending Bulma with block style list elements
|
4
|
+
baseurl: "/bulma-block-list"
|
5
|
+
url: "https://www.csrhymes.com"
|
6
|
+
gh_sponsor: chrisrhymes
|
7
|
+
favicon: /favicon.ico
|
8
|
+
google_analytics: UA-49024852-2
|
9
|
+
remote_theme: chrisrhymes/bulma-clean-theme
|
10
|
+
|
11
|
+
# Build settings
|
12
|
+
markdown: kramdown
|
13
|
+
plugins:
|
14
|
+
- jekyll-feed
|
15
|
+
- github-pages
|