bulma-clean-theme 0.10.4 → 0.11.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2c66821920fb6821e58e8e7ce30257215faacbc4110825c397c312e9dd08097d
4
- data.tar.gz: 80fec6dd8721013e6f2434c112603fa9e8340746b9f64b09bd5825730ad6508c
3
+ metadata.gz: e73c0bc32284ba14dbc9140134ba444c925da1a007ab5e44d07a0abd182d2edf
4
+ data.tar.gz: 6d3b5013b5b3b8964b601a09e9415b42bf4639572d0ed794344a1f5767ea42f8
5
5
  SHA512:
6
- metadata.gz: 9df119f2ea3bc56469718a198ffabeed6867550cf3e83a62423a86ff711670f1420ebc73d0b3f2e7e14ff78dd26f4ee56930b7a0123b2d024ba578619e96743d
7
- data.tar.gz: 99d36d80333153cc0ad8c85946aecf65bef8eba0f5b5080d1ffd1fa951e42d7afcb094ddd2f5d61a47303699e802634a55a47cb74121b040d4cf8caee485ebe0
6
+ metadata.gz: b62f80990e5da94b2c305ee434b9bcd63b44b869fbd2726f63eb834db19deb18b2f1abc456333123e43fb1157b79fcc2ae94ddfe7684ea6ce78ed2a20a5de462
7
+ data.tar.gz: 3bb1ad05c7dfc05f41946910ceb01c9d732d28b4e044fa970c59ac3963f1203b7ee7afb755742f57f9436ab1e9e5148057db762fd966d5e2a6d88b2b967f24a7
data/README.md CHANGED
@@ -3,12 +3,15 @@
3
3
  [![Gem Version](https://badge.fury.io/rb/bulma-clean-theme.svg)](https://badge.fury.io/rb/bulma-clean-theme)
4
4
  ![Gem](https://img.shields.io/gem/dt/bulma-clean-theme.svg)
5
5
 
6
- This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern looking site to start with.
6
+ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/) framework, providing a modern-looking site to start with.
7
+
8
+ The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for its interactive components, such as mobile navbar and notifications.
7
9
 
8
10
  ## Contents
9
11
 
10
12
  * [Installation](#installation)
11
13
  * [Usage](#usage)
14
+ * [Lang](#lang)
12
15
  * [Pages](#pages)
13
16
  * [Page Hero](#page-hero)
14
17
  * [Table Of Contents](#table-of-contents)
@@ -19,6 +22,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
19
22
  * [Menubar](#menubar)
20
23
  * [Tabs](#tabs)
21
24
  * [Notifications](#notifications)
25
+ * [Tags](#tags)
22
26
  * [Google Analytics](#google-analytics)
23
27
  * [Footer](#footer)
24
28
  * [Products](#products)
@@ -29,6 +33,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
29
33
  * [Sponsors](#sponsors)
30
34
  * [Gallery](#gallery)
31
35
  * [Disqus](#disqus)
36
+ * [Recipe](#recipe)
32
37
  * [Contributing](#contributing)
33
38
  * [Development](#development)
34
39
  * [Licence](#licence)
@@ -36,7 +41,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
36
41
 
37
42
  ## Installation
38
43
 
39
- **This theme requires Jekyll 3.8 so it is compatible with GitHub Pages.**
44
+ **This theme requires Jekyll 3.9 to be compatible with GitHub Pages.**
40
45
 
41
46
  Add this line to your Jekyll site's `Gemfile`:
42
47
 
@@ -60,52 +65,50 @@ Or install it yourself as:
60
65
 
61
66
  ## Usage
62
67
 
63
- ### Pages
68
+ ### Lang
69
+
70
+ The html lang attribute is set to `en` by default but you can override this in the _config.yml file `lang: en`
64
71
 
65
- Create your pages as individual markdown files and use the `layout: page` for normal pages. Set the pages title and subtitle in the front matter and it will appear in the hero.
72
+ ### Pages
73
+
74
+ Create your pages as individual Markdown files and use `layout: page` for normal pages. Set the page's title and subtitle in the front matter and it will appear in the hero.
66
75
 
67
76
  #### Page Hero
68
77
 
69
- **New in 0.2**
70
- Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
78
+ **New in 0.2** - Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
71
79
 
72
- 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
80
+ 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`.
73
81
 
74
- **New in 0.5.4**
75
- If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter.
82
+ **New in 0.5.4** - If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter.
76
83
 
77
- **New in 0.5.7**
78
- If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter.
84
+ **New in 0.5.7** - If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter.
79
85
 
80
- **New in 0.7.1**
81
- If you would like to darken the hero so the title stands out more, you can set `hero_darken: true` in the page's front matter. You can overwrite the default background colour by setting the `$hero-darken` sass variable.
86
+ **New in 0.7.1** - If you would like to darken the hero so the title stands out more, you can set `hero_darken: true` in the page's front matter. You can overwrite the default background colour by setting the `$hero-darken` sass variable.
82
87
 
83
88
  #### Table Of Contents
84
89
 
85
- **New in 0.5.8**
86
- If you want to display a table of contents (toc) then add `toc: true` to your page's front matter. You can customise the default table of contents title by setting `toc_title: My Custom Title` in the page's front matter.
90
+ **New in 0.5.8** - If you want to display a table of contents (toc) then add `toc: true` to your page's front matter. You can customise the default table of contents title by setting `toc_title: My Custom Title` in the page's front matter.
87
91
 
88
- **New in 0.10.3**
89
- If you would prefer to display the contents in the menubar at the side of the page, then use `menubar_toc: true` instead of `toc: true`. This will also override the page's `menubar` setting.
92
+ **New in 0.10.3** - If you would prefer to display the contents in the menubar at the side of the page, then use `menubar_toc: true` instead of `toc: true`. This will also override the page's `menubar` setting.
90
93
 
91
94
  ### Posts
92
95
 
93
- If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with the `layout: post`. Next create a `blog` directory with an index.html file that has `layout: blog`
96
+ If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with `layout: post`. Next, create a `blog` directory with an index.html file that has `layout: blog`.
94
97
 
95
- Set the paginate and the paginate_path up in the `_config.yaml` to configure the posts per page and the blog pagination path.
98
+ Set `paginate` and `paginate_path` in your site's `_config.yaml` to configure the posts per page and blog pagination path.
96
99
 
97
100
  ```yaml
98
101
  paginate: 5
99
102
  paginate_path: "/blog/page:num"
100
103
  ```
101
104
 
102
- **New in 0.2** It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
105
+ **New in 0.2** - It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
103
106
 
104
- 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
107
+ 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`.
105
108
 
106
109
  #### Post Excerpt and Summary
107
110
 
108
- By default the blog page and the latest posts will use the automatically generated post excerpt. If you would like to override this you can set the summary in the post's front matter.
111
+ By default, the blog page and the latest posts will use the automatically generated post excerpt. If you would like to override this you can set the summary in the post's front matter.
109
112
 
110
113
  ```yaml
111
114
  layout: post
@@ -113,7 +116,7 @@ title: The post title
113
116
  summary: |-
114
117
  This is the custom summary for the post.
115
118
 
116
- It can be in **markdown format** if required.
119
+ It can be in **Markdown format** if required.
117
120
  ```
118
121
 
119
122
  #### Social Share Buttons
@@ -123,7 +126,7 @@ Share buttons will be displayed on your posts unless you hide them by adding `hi
123
126
 
124
127
  ### Navigation
125
128
 
126
- For the top navigation, create a navigation.yml file in `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu.
129
+ For the top navigation, create a navigation.yml file in the `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu.
127
130
 
128
131
  ```yaml
129
132
  - name: Page 1
@@ -135,16 +138,16 @@ For the top navigation, create a navigation.yml file in `_data` directory with t
135
138
  link: /page-2/
136
139
  ```
137
140
 
138
- For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml`
141
+ For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with a `permalink: pretty` setting in your `_config.yml`.
139
142
 
140
143
  #### Fixed Navbar
141
144
 
142
- To have a fixed navbar, you can set `fixed_navbar: top` of `fixed_navbar: bottom` respectively in your
145
+ To have a fixed navbar on the top or bottom of your site, you can set `fixed_navbar: top` or `fixed_navbar: bottom` respectively in your
143
146
  `_config.yml`.
144
147
 
145
148
  ### Colours and Styles
146
149
 
147
- To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main`
150
+ To overwrite the primary theme colour, set a sass variable in `assets/css/app.scss` before importing `main`.
148
151
 
149
152
  ```
150
153
  ---
@@ -154,7 +157,7 @@ $primary: #333333;
154
157
  @import "main";
155
158
  ```
156
159
 
157
- You can overwrite any of the [Bulma initial variables](http://versions.bulma.io/0.7.0/documentation/overview/variables/) in this way as long as they are declared before the `@import "main"'`
160
+ You can overwrite any of the [Bulma initial variables](http://versions.bulma.io/0.7.0/documentation/overview/variables/) in this way as long as they are declared before the `@import "main";`.
158
161
 
159
162
  #### Theme Color Meta Tag
160
163
 
@@ -162,26 +165,22 @@ If you want to update the theme color meta tag then set `theme_color: '#333333'`
162
165
 
163
166
  ### Sidebar Visibility
164
167
 
165
- **New in 0.2**
166
-
167
- If you want to show the sidebar with latest posts then set `show_sidebar: true` in the pages frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
168
+ **New in 0.2** - If you want to show the sidebar with latest posts then set `show_sidebar: true` in the page's frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your site's `_config.yml`.
168
169
 
169
170
  ### Menubar
170
171
 
171
- **New in 0.3**
172
-
173
- The menubar gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter.
172
+ **New in 0.3** - The menubar gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter.
174
173
 
175
174
  ```yaml
176
175
  show_sidebar: false
177
176
  menubar: example_menu
178
177
  ```
179
178
 
180
- You will probably want to disable the show_sidebar otherwise there will be little room for the page content.
179
+ You will probably want to disable `show_sidebar`. Otherwise there will be little room for the page content.
181
180
 
182
181
  #### Creating a menubar data file
183
182
 
184
- Create a data file in the _data directory and use the following format (if using yml)
183
+ Create a data file in the `_data` directory and use the following format (if using yml).
185
184
 
186
185
  ```yaml
187
186
  - label: Example Menu
@@ -201,11 +200,11 @@ Create a data file in the _data directory and use the following format (if using
201
200
  link: /blog/
202
201
  ```
203
202
 
204
- For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml`
203
+ For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml`.
205
204
 
206
205
  #### Multiple menus
207
206
 
208
- You may make multiple menus in the same file, separated by the label
207
+ You may make multiple menus in the same file, separated by labels.
209
208
 
210
209
  ```yaml
211
210
  - label: Menu Label
@@ -229,9 +228,7 @@ You may make multiple menus in the same file, separated by the label
229
228
 
230
229
  ### Tabs
231
230
 
232
- **New in 0.4**
233
-
234
- The tabs gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the front matter.
231
+ **New in 0.4** - `tabs` gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the front matter.
235
232
 
236
233
  ```yaml
237
234
  title: Page with tabs
@@ -246,7 +243,7 @@ Tabs can be used in conjunction with menubar and/or sidebar if you wish.
246
243
 
247
244
  #### Creating a tabs data file
248
245
 
249
- Create a data file in the _data directory and use the following format (if using yml)
246
+ Create a data file in the `_data` directory and use the following format (if using yml).
250
247
 
251
248
  ```yaml
252
249
  alignment: is-left
@@ -269,7 +266,7 @@ items:
269
266
 
270
267
  #### Settings
271
268
 
272
- You can control the alignment, style and size of the tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/).
269
+ You can control the alignment, style, and size of tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/).
273
270
 
274
271
  #### Active Tab Highlighting
275
272
 
@@ -277,9 +274,7 @@ It will automatically mark the active tab based on the current page.
277
274
 
278
275
  #### Icons
279
276
 
280
- You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery).
281
-
282
- If you don't wish to show icons then simply omit the option from your yaml file.
277
+ You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery). If you don't wish to show icons then simply omit the option from your yaml file.
283
278
 
284
279
  ### Notifications
285
280
 
@@ -309,17 +304,27 @@ message="This notification does not have an icon."
309
304
  icon="false" %}
310
305
  ```
311
306
 
312
- ### Google Analytics
307
+ ### Tags
313
308
 
314
- **New in 0.2**
309
+ To include a tag use the following include.
315
310
 
316
- To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property
311
+ ```liquid
312
+ {% include tag.html tag="The tag text" %}
313
+ ```
317
314
 
318
- ### Footer
315
+ You can overwrite the default style (is-primary) by passing in the style in the include tag.
316
+
317
+ ```liquid
318
+ {% include tag.html tag="The tag text" style="is-light" %}
319
+ ```
320
+
321
+ ### Google Analytics
319
322
 
320
- **New in 0.4.1**
323
+ **New in 0.2** - To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property.
321
324
 
322
- To add some footer links, create a yaml file in the `_data` directory using the following format
325
+ ### Footer
326
+
327
+ **New in 0.4.1** - To add some footer links, create a yaml file in the `_data` directory using the following format.
323
328
 
324
329
  ```yaml
325
330
  - name: Blog
@@ -330,7 +335,7 @@ To add some footer links, create a yaml file in the `_data` directory using the
330
335
  link: /privacy-policy/
331
336
  ```
332
337
 
333
- Then add the name of your yaml file (without the .yml extension) into the footer_menu setting in the `_config.yml`
338
+ Then add the name of your yaml file (without the .yml extension) into the `footer_menu` setting in the `_config.yml`.
334
339
 
335
340
  ```yaml
336
341
  footer_menu: example_footer_menu
@@ -338,19 +343,15 @@ footer_menu: example_footer_menu
338
343
 
339
344
  #### Hiding the footer
340
345
 
341
- **New in 0.5.2**
342
-
343
- If you would like to hide the footer on a particular page then set `hide_footer: true` in the page's frontmatter.
346
+ **New in 0.5.2** - If you would like to hide the footer on a particular page then set `hide_footer: true` in the page's frontmatter.
344
347
 
345
348
  ### Products
346
349
 
347
- **New in 0.5**
348
-
349
- Now you can add simple product pages to your site using collections.
350
+ **New in 0.5** - Now you can add simple product pages to your site using collections.
350
351
 
351
352
  #### Product pages
352
353
 
353
- Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features and rating.
354
+ Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features, and rating.
354
355
 
355
356
  ```yaml
356
357
  title: Product 1 Name
@@ -388,13 +389,13 @@ You can also set default product page values here if you like, such as the layou
388
389
 
389
390
  #### Product Reviews
390
391
 
391
- To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yml file with the name of the product_code from the product page, for example `_data/reviews/ABC124.yml`. Create the reviews using the following format:
392
+ To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yaml file with the name of the product_code from the product page, for example `_data/reviews/ABC124.yml`. Create the reviews using the following format:
392
393
 
393
394
  ```yaml
394
395
  - name: Mr E Xample
395
396
  rating: 4
396
397
  title: Great product, highly recommended
397
- date: 01/01/2019
398
+ date: 2019-01-01
398
399
  avatar: https://bulma.io/images/placeholders/128x128.png
399
400
  description: >
400
401
  The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable.
@@ -402,12 +403,12 @@ To add reviews to your product page, create a `reviews` directory in the `_data`
402
403
  - name: Mrs R E View
403
404
  rating: 5
404
405
  title: Nice, really liked this
405
- date: 02/02/2019
406
+ date: 2019-02-02
406
407
  description: >
407
408
  The product worked exactly as described.
408
409
  ```
409
410
 
410
- If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the yml.
411
+ If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the yaml file.
411
412
 
412
413
  #### Product Category Page
413
414
 
@@ -423,23 +424,21 @@ sort: title
423
424
 
424
425
  ### Scripts
425
426
 
426
- **New in 0.5.2**
427
-
428
- There are two new files within the includes directory called `head-scripts.html` and `footer-scripts.html`. These are empty files by default but allow you to add any additional JavaScript to your site, such as the script for AddThis share buttons, in the `<head>` or after the `<footer>` of the page.
427
+ **New in 0.5.2** - There are two new files within the includes directory called `head-scripts.html` and `footer-scripts.html`. These are empty files by default but allow you to add any additional JavaScript to your site, such as the script for AddThis share buttons, in the `<head>` or after the `<footer>` of the page.
429
428
 
430
429
  ### Callouts
431
430
 
432
- **New in 0.5.4**
431
+ **New in 0.5.4** - You can now add callouts to a page to make a landing page style layout.
433
432
 
434
- You can now add callouts to a page to make a landing page style layout.
433
+ * [Example of page with callouts - notice the 'calls to action' below the header.](http://www.csrhymes.com/bulma-clean-theme/landing/)
435
434
 
436
435
  #### Create a callout data file
437
436
 
438
437
  Create a data file following the below format. The style is for classes to set the background colour and sizes you would like to use of the Bulma hero container for the callouts.
439
438
 
440
- **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.
439
+ **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.
441
440
 
442
- 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`.
441
+ The items have six 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`.
443
442
 
444
443
  ```yaml
445
444
  style: is-light
@@ -459,7 +458,7 @@ items:
459
458
 
460
459
  #### Set the callouts in the frontmatter
461
460
 
462
- To display the callouts on your page, add a callouts property in the frontmatter and set it to the name of your data file without the extension.
461
+ To display the callouts on your page, add a `callouts` property in the frontmatter and set it to the name of your data file without the extension.
463
462
 
464
463
  ```yaml
465
464
  layout: page
@@ -470,7 +469,7 @@ callouts: example_callouts
470
469
 
471
470
  ### Favicon
472
471
 
473
- The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the sites `_config.yml` like this `favicon: /path/to/favicon.png`
472
+ The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the site's `_config.yml` like this `favicon: /path/to/favicon.png`
474
473
 
475
474
  ### Showcases
476
475
 
@@ -478,13 +477,13 @@ Showcases allow you to display your work to others using a simple layout.
478
477
 
479
478
  #### Creating A Showcase Datafile
480
479
 
481
- Create a datafile in your sites `_data` directory in the following format. Subtitle, features and tags are not required.
480
+ Create a datafile in your site's `_data` directory in the following format. Subtitle, features and tags are not required.
482
481
 
483
- The description text accepts markdown and is run through the markdownify filter on the page.
482
+ The description text accepts Markdown and is run through the markdownify filter on the page.
484
483
 
485
- The image_ratio will default to is-16by9 if it is not defined and accepts the [Bulma image](https://bulma.io/documentation/elements/image/) classes.
484
+ The `image_ratio` will default to `is-16by9` if it is not defined and accepts the [Bulma image](https://bulma.io/documentation/elements/image/) classes.
486
485
 
487
- To display GitHub Stars, Forks and Watchers badges add your GitHub user and repo name to the github setting, such as `chrisrhymes/bulma-clean-theme`
486
+ To display GitHub Stars, Forks, and Watchers badges, add your GitHub user and repo name to the `github` setting, such as `chrisrhymes/bulma-clean-theme`.
488
487
 
489
488
  To change the default styles of the features, set `features_styles`. This uses the styles from [bulma-block-list](https://www.csrhymes.com/bulma-block-list/) npm package.
490
489
 
@@ -493,7 +492,7 @@ intro: |-
493
492
  This is some introduction text for the showcases.
494
493
 
495
494
  ## Example Heading
496
- It can convert markdown format
495
+ It can convert Markdown format
497
496
 
498
497
  items:
499
498
  - title: Example showcase item
@@ -585,7 +584,7 @@ Start by creating a gallery data file using the below format, for example `my_ga
585
584
  large_link: https://via.placeholder.com/1200x675
586
585
  alt: The alt text for the image
587
586
  description: |-
588
- The image description can be written in **markdown** if required
587
+ The image description can be written in **Markdown** if required
589
588
  ratio: is-16by9
590
589
  - link: https://via.placeholder.com/800x600
591
590
  large_link: https://via.placeholder.com/1200x675
@@ -595,13 +594,13 @@ Start by creating a gallery data file using the below format, for example `my_ga
595
594
  ```
596
595
 
597
596
  * 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.
598
- * The description can be plain text or it can be markdown if required.
599
- * The alt will be used as the images alt text.
600
- * The large_link displays in a modal when the image is clicked
597
+ * The description can be plaintext or it can be Markdown if required.
598
+ * The alt will be used as the image's alt text.
599
+ * The large_link displays in a modal when the image is clicked.
601
600
 
602
601
  #### Displaying the gallery
603
602
 
604
- In your pages front matter add a gallery with the datafiles filename without the extension.
603
+ In your page's front matter add a gallery with the datafile's filename without the extension.
605
604
 
606
605
  ```yaml
607
606
  layout: page
@@ -611,7 +610,14 @@ gallery: my_gallery
611
610
 
612
611
  ### Disqus
613
612
 
614
- 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:
613
+ Disqus comments are available for posts. To be able to use them, you need to set your disqus shortname in `_config.yml`.
614
+ ```
615
+ disqus.shortname=<example-com.disqus.com>
616
+ ```
617
+
618
+ Need help finding your Disqus Shortname? [See this helpful post by Disqus on the matter.](https://help.disqus.com/en/articles/1717111-what-s-a-shortname)
619
+
620
+ Then you need to set your Jekyll environment to production:
615
621
 
616
622
  ```JEKYLL_ENV=production bundle exec jekyll build```.
617
623
 
@@ -621,7 +627,53 @@ Comments are enabled by default. If you want to disable them, set in the front m
621
627
  comments: false
622
628
  ```
623
629
 
630
+ ### Recipe
631
+
632
+ You can make a single page using the recipe layout, or you can use it in your blog by specifying the `layout: recipe` instead of post.
633
+
634
+ You probably want to hide the sidebar, so the recipe takes up the whole page width. If you add any additional content to the page it will appear below the recipe details.
635
+
636
+ Create a list in the front matter for the ingredients, then the method steps and it will automatically be added to the page.
624
637
 
638
+ The front matter will also be added to the page as schema data that is used by search engines. Please see the below example for all of the schema options available.
639
+
640
+ ```yaml
641
+ layout: recipe
642
+ title: An Example Recipe Page
643
+ subtitle: Tastes great and easy to cook
644
+ author: CS Rhymes
645
+ date: 2021-03-02
646
+ show_sidebar: false
647
+ image: /bulma-clan-theme/img/recipe-example.jpg
648
+ hero_image: /bulma-clean-theme/img/recipe-example.jpg
649
+ ingredients:
650
+ - 1tsp vegetable oil
651
+ - 2 Carrots, finely diced
652
+ - 1 Onion, finely dices
653
+ - 1 Celery stick, finely diced
654
+ - 2 Cloves of Garlic, crushed
655
+ - 400g lean Minced Beef
656
+ - 400g tin of Chopped Tomatoes
657
+ - 2tbsp Tomato Puree
658
+ - 300ml Beef Stock
659
+ - 1tsp Worcestershire Sauce
660
+ - 2tsp Italian Herbs
661
+ - Salt and Pepper
662
+ method:
663
+ - Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
664
+ - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally
665
+ - Add the minced beef to the pan, breaking it up with a wooden spoon and cook until browned off
666
+ - Add the chopped tomatoes, tomato puree, beef stock, worcestershire sauce and italian herbs and stir. Add a pinch of salt and pepper then stir through
667
+ - Bring to a gentle simmer and cook for 30 minutes
668
+ prep_time: PT0H10M
669
+ cook_time: PT1H
670
+ total_time: PT1H10M
671
+ keywords: recipe,cooking
672
+ recipe_yield: 4
673
+ recipe_category: Main course
674
+ recipe_cuisine: Italian
675
+ calories: 500 calories
676
+ ```
625
677
 
626
678
  ## Contributing
627
679
 
@@ -631,7 +683,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/chrisr
631
683
 
632
684
  To set up your environment to develop this theme, run `bundle install`.
633
685
 
634
- 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.
686
+ Your theme is set up 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.
635
687
 
636
688
  ## License
637
689
 
data/_includes/head.html CHANGED
@@ -2,12 +2,11 @@
2
2
  <meta charset="utf-8">
3
3
  <meta name="viewport" content="width=device-width, initial-scale=1">
4
4
  <meta name="theme-color" content={{ site.theme_color | default: '#ffffff' }}>
5
- <title>{{ page.title }} - {{ site.title }}</title>
6
5
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
7
6
  <link rel="shortcut icon" type="image/png"
8
7
  {% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
9
8
  />
10
- <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>
9
+ <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
11
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
12
11
  {% unless site.hide_share_buttons %}
13
12
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">
@@ -1,16 +1,16 @@
1
- <nav class="navbar is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}">
1
+ <nav class="navbar is-primary {% if site.fixed_navbar %} is-fixed-{{ site.fixed_navbar }} {% endif %}" x-data="{ openNav: false }">
2
2
  <div class="container">
3
3
  <div class="navbar-brand">
4
4
  <a href="{{ site.baseurl }}/" class="navbar-item">
5
5
  {{ site.title }}
6
6
  </a>
7
- <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
7
+ <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu" :class="{ 'is-active': openNav }" x-on:click="openNav = !openNav">
8
8
  <span aria-hidden="true"></span>
9
9
  <span aria-hidden="true"></span>
10
10
  <span aria-hidden="true"></span>
11
11
  </a>
12
12
  </div>
13
- <div class="navbar-menu" id="navMenu">
13
+ <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
14
14
  <div class="navbar-start">
15
15
  <a href="{{ site.baseurl }}/" class="navbar-item {% if page.url == "/" %}is-active{% endif %}">Home</a>
16
16
  {% if site.data.navigation %}
@@ -47,7 +47,7 @@
47
47
  {% assign tags = item.tags | split: "," %}
48
48
  <div class="tags is-centered">
49
49
  {% for tag in tags %}
50
- <div class="tag is-dark">{{ tag }}</div>
50
+ {% include tag.html tag=tag style="is-dark" %}
51
51
  {% endfor %}
52
52
  </div>
53
53
  {% endif %}
@@ -0,0 +1,3 @@
1
+ <span class="tag {% if include.style %} {{ include.style }} {% else %} is-primary {% endif %}">
2
+ {{ include.tag }}
3
+ </span>
@@ -0,0 +1,3 @@
1
+ <figure class="image is-16by9">
2
+ <iframe src="https://player.vimeo.com/video/{{ include.video }}?color=ff9933&title=0&byline=0&portrait=0" class="has-ratio" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
3
+ </figure>
@@ -1,6 +1,6 @@
1
1
  <figure class="image is-16by9">
2
2
  <iframe class="has-ratio"
3
- src="https://www.youtube.com/embed/{{ include.video }}?showinfo=0"
3
+ src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0"
4
4
  frameborder="0"
5
5
  allowfullscreen
6
6
  >
@@ -1,12 +1,19 @@
1
- {% if page.menubar and page.show_sidebar %}
2
- {% assign content_width = 'is-4' %}
3
- {% elsif page.menubar or page.show_sidebar %}
4
- {% assign content_width = 'is-8' %}
5
- {% else %}
6
- {% assign content_width = 'is-12' %}
7
- {% endif %}
8
1
  <!DOCTYPE html>
9
- <html {% if site.fixed_navbar %} class="has-navbar-fixed-{{ site.fixed_navbar }}" {% endif %}>
2
+ {% if page.menubar or page.menubar_toc %}
3
+ {% assign has_left_sidebar = true %}
4
+ {% endif %}
5
+
6
+ {% if page.show_sidebar and has_left_sidebar %}
7
+ {% assign content_width = 'is-4' %}
8
+ {% elsif page.show_sidebar or has_left_sidebar %}
9
+ {% assign content_width = 'is-8' %}
10
+ {% else %}
11
+ {% assign content_width = 'is-12' %}
12
+ {% endif %}
13
+
14
+ <html
15
+ lang="{{ site.lang | default: 'en' }}"
16
+ {% if site.fixed_navbar %}class="has-navbar-fixed-{{ site.fixed_navbar }}"{% endif %}>
10
17
  {% include head.html %}
11
18
  <body>
12
19
  {% include header.html %}
@@ -16,7 +23,7 @@
16
23
  {% include callouts.html %}
17
24
  <section class="section">
18
25
  <div class="container">
19
- <div class="columns">
26
+ <div class="columns is-multiline">
20
27
  {% if page.menubar_toc %}
21
28
  <div class="column is-4-desktop is-4-tablet">
22
29
  {% assign contentsTitle = page.toc_title | default: 'Contents' %}
@@ -35,7 +42,7 @@
35
42
  {{ content }}
36
43
  </div>
37
44
  {% if site.posts and page.show_sidebar %}
38
- <div class="column is-4-desktop is-12-tablet">
45
+ <div class="column is-4-desktop is-4-tablet">
39
46
  {% include latest-posts.html %}
40
47
  </div>
41
48
  {% endif %}
@@ -49,4 +56,3 @@
49
56
  {%- include footer-scripts.html -%}
50
57
  </body>
51
58
  </html>
52
-
data/_layouts/post.html CHANGED
@@ -11,7 +11,7 @@ layout: default
11
11
 
12
12
  <div class="tags">
13
13
  {% for tag in page.tags %}
14
- <span class="tag is-primary">{{ tag }}</span>
14
+ {% include tag.html tag=tag %}
15
15
  {% endfor %}
16
16
  </div>
17
17
 
@@ -0,0 +1,98 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <script type="application/ld+json">
6
+ {
7
+ "@context": "https://schema.org/",
8
+ "@type": "Recipe",
9
+ "name": "{{ page.title }}",
10
+ "image": [
11
+ "{{ page.image }}"
12
+ ],
13
+ "author": {
14
+ "@type": "Person",
15
+ "name": "{{ page.author }}"
16
+ },
17
+ "datePublished": "{{ page.date }}",
18
+ "description": "{{ page.description }}",
19
+ "prepTime": "{{ page.prep_time }}",
20
+ "cookTime": "{{ page.cook_time }}",
21
+ "totalTime": "{{ page.total_time }}",
22
+ "keywords": "{{ page.keywords }}",
23
+ "recipeYield": "{{ page.recipe_yield }}",
24
+ "recipeCategory": "{{ page.recipe_category }}",
25
+ "recipeCuisine": "{{ page.recipe_cuisine }}",
26
+ {% if page.calories %}
27
+ "nutrition": {
28
+ "@type": "NutritionInformation",
29
+ "calories": "{{ page.calories }}"
30
+ },
31
+ {% endif %}
32
+ "recipeIngredient":
33
+ {{ page.ingredients | jsonify }},
34
+ "recipeInstructions": [
35
+ {% for step in page.method %}
36
+ {
37
+ "@type": "HowToStep",
38
+ "text": "{{ step }}"
39
+ {% if forloop.last == true %}
40
+ }
41
+ {% else %}
42
+ },
43
+ {% endif %}
44
+ {% endfor %}
45
+ ]
46
+ }
47
+ </script>
48
+
49
+ <div class="columns is-multiline">
50
+ <div class="column is-4">
51
+ <div class="box has-text-centered">
52
+ <strong>Serves:</strong> {{ page.recipe_yield }}
53
+ </div>
54
+ </div>
55
+ <div class="column is-4">
56
+ <div class="box has-text-centered">
57
+ <strong>Prep time:</strong> {{ page.prep_time | date: "%k hours %M minutes" }}
58
+ </div>
59
+ </div>
60
+ <div class="column is-4">
61
+ <div class="box has-text-centered">
62
+ <strong>Cook time:</strong> {{ page.cook_time | date: "%k hours %M minutes" }}
63
+ </div>
64
+ </div>
65
+ <div class="column is-4">
66
+ <div class="box">
67
+ <p class="title is-4">Ingredients</p>
68
+ <div class="content">
69
+ <ul>
70
+ {% for ingredient in page.ingredients %}
71
+ <li>{{ ingredient }}</li>
72
+ {% endfor %}
73
+ </ul>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div class="column is-8">
78
+ <p class="title is-4">Method</p>
79
+ <div class="content">
80
+ <ol>
81
+ {% for step in page.method %}
82
+ <li>{{ step }}</li>
83
+ {% endfor %}
84
+ </ol>
85
+ <div class="tags">
86
+ {% assign tags = page.keywords | split: "," %}
87
+ {% for tag in tags %}
88
+ {% include tag.html tag=tag %}
89
+ {% endfor %}
90
+ </div>
91
+
92
+ <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
93
+ </div>
94
+ <div class="content">
95
+ {{ content }}
96
+ </div>
97
+ </div>
98
+ </div>
data/assets/js/app.js CHANGED
@@ -1,25 +1 @@
1
- document.addEventListener('DOMContentLoaded', () => {
2
-
3
- // Get all "navbar-burger" elements
4
- const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
5
-
6
- // Check if there are any navbar burgers
7
- if ($navbarBurgers.length > 0) {
8
-
9
- // Add a click event on each of them
10
- $navbarBurgers.forEach( el => {
11
- el.addEventListener('click', () => {
12
-
13
- // Get the target from the "data-target" attribute
14
- const target = el.dataset.target;
15
- const $target = document.getElementById(target);
16
-
17
- // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
18
- el.classList.toggle('is-active');
19
- $target.classList.toggle('is-active');
20
-
21
- });
22
- });
23
- }
24
-
25
- });
1
+ //
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bulma-clean-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.10.4
4
+ version: 0.11.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - chrisrhymes
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-20 00:00:00.000000000 Z
11
+ date: 2021-06-13 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -154,7 +154,9 @@ files:
154
154
  - _includes/sponsors.html
155
155
  - _includes/subscribe.html
156
156
  - _includes/tabs.html
157
+ - _includes/tag.html
157
158
  - _includes/toc.html
159
+ - _includes/vimeo.html
158
160
  - _includes/youtube.html
159
161
  - _layouts/blog.html
160
162
  - _layouts/default.html
@@ -162,11 +164,11 @@ files:
162
164
  - _layouts/post.html
163
165
  - _layouts/product-category.html
164
166
  - _layouts/product.html
167
+ - _layouts/recipe.html
165
168
  - _posts/2018-05-28-why-use-a-static-site-generator.markdown
166
169
  - _posts/2019-02-09-getting-started-with-bulma-clean-theme.markdown
167
170
  - _posts/2019-07-23-introducing-some-new-layouts-to-bulma-clean-theme.markdown
168
171
  - _posts/2020-05-08-creating-a-docs-site-with-bulma-clean-theme.markdown
169
- - _posts/2020-10-17-post-with-summary.md
170
172
  - _sass/_layout.scss
171
173
  - _sass/_main.scss
172
174
  - _sass/_showcase.scss
@@ -1,23 +0,0 @@
1
- ---
2
- layout: post
3
- title: Example post with a summary
4
- summary: |-
5
- This is the custom summary for the post.
6
-
7
- It can be in **markdown format** if required.
8
- ---
9
-
10
- This is the text for the post. It won't be used as the excerpt as it will use the custom summary set in the post instead.
11
-
12
- If the summary is not set it will use the default excerpt generated by Jekyll.
13
-
14
- To use a custom summary, set the `summary` in the post's front matter.
15
-
16
- ```yaml
17
- layout: post
18
- title: Example post with a summary
19
- summary: |-
20
- This is the custom summary for the post.
21
-
22
- It can be in **markdown format** if required.
23
- ```