From 05a3aeaeb7807a5acda7ee8786d663af99102d47 Mon Sep 17 00:00:00 2001 From: chrisrhymes Date: Tue, 7 May 2024 17:19:15 +0100 Subject: [PATCH 1/3] Allow auto dark mode and forcing theme --- README.md | 26 ++++++++++---- _config.yml | 1 + _includes/notification.html | 5 ++- _layouts/default.html | 5 +-- bulma-clean-theme.gemspec | 2 +- changelog.txt | 3 ++ docs/getting-started/configuration.md | 4 ++- docs/getting-started/installation.md | 26 ++++++++++---- docs/getting-started/theming.md | 7 ++++ docs/getting-started/upgrading-to-v1.md | 46 ++++++++++++++++++++++++- 10 files changed, 103 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index eb6d468e4..9b529bfd0 100644 --- a/README.md +++ b/README.md @@ -31,13 +31,6 @@ And add this line to your Jekyll site's `_config.yml`: theme: bulma-clean-theme ``` -If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. **Note that the GitHub Pages gem requires Jekyll version 3.9.** - -```yaml -# With GitHub Pages Gem -remote_theme: chrisrhymes/bulma-clean-theme -``` - And then execute: $ bundle @@ -46,6 +39,25 @@ Or install it yourself as: $ gem install bulma-clean-theme +### GitHub pages + +### v1.0 + +To deploy to GitHub pages using v1.x you will need to use GitHub Actions. Please see the [upgrade guide](https://www.csrhymes.com/bulma-clean-theme/docs/getting-started/upgrading-to-v1/) for more information. + +### v0.x + +If you are deploying to GitHub pages using their default build process, then you can install v0.x of the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. + +**Note that the GitHub Pages gem requires Jekyll version 3.9 and version 0.x of Bulma Clean Theme** + +```yaml +# With GitHub Pages Gem +remote_theme: chrisrhymes/bulma-clean-theme:v0.14.0 +``` + + + ## Documentation Check out the demo site for the [Documentation](https://www.csrhymes.com/bulma-clean-theme/docs/) diff --git a/_config.yml b/_config.yml index 6e50f6620..9d592bb98 100644 --- a/_config.yml +++ b/_config.yml @@ -14,6 +14,7 @@ gh_sponsor: chrisrhymes #theme_color: '#eeeeee' #fixed_navbar: top #direction: one of , default: ltr +force_theme: light paginate: 5 paginate_path: "/blog/page:num" diff --git a/_includes/notification.html b/_includes/notification.html index aef8a5f93..ce02727d0 100644 --- a/_includes/notification.html +++ b/_includes/notification.html @@ -1,5 +1,8 @@
-
+
{% if include.dismissable %} {% endif %} diff --git a/_layouts/default.html b/_layouts/default.html index 9c9e81401..4cf6c72d3 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -14,10 +14,7 @@ {% include head.html %} diff --git a/bulma-clean-theme.gemspec b/bulma-clean-theme.gemspec index d08b3d776..4525add93 100644 --- a/bulma-clean-theme.gemspec +++ b/bulma-clean-theme.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "bulma-clean-theme" - spec.version = "1.0.0" + spec.version = "1.0.1" spec.authors = ["chrisrhymes"] spec.email = ["csrhymes@gmail.com"] diff --git a/changelog.txt b/changelog.txt index d6306b4b8..ce64f3d4d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,6 @@ +# 1.0.1 +* Fix auto dark mode and allow forcing a theme + # 1.0.0 * Upgrade to Bulma v1 * Include bulma-block-list within the _scss folder due to load_path issues with dart sass. diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md index 714892906..fb5253983 100644 --- a/docs/getting-started/configuration.md +++ b/docs/getting-started/configuration.md @@ -24,12 +24,14 @@ The html _dir_ attribute is set to `ltr` by default. It can be overridden in the ## Google Analytics -To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property. +To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property. ```yaml google_analytics: UA-xxxxxxxx ``` +The Google Analytics implementation uses Google Analytics v4 and consent mode. Please see the [cookie banner](/bulma-clean-theme/docs/page-components/cookie-banner/) for more information. + ## GitHub Sponsor If you have a GitHub sponsors account set up, you can add your username to `gh_sponsor` in the `_config.yml` file and it will display a link to your profile on the right of the navbar. diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index a228acc95..ef5752509 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -9,12 +9,12 @@ toc: true ## Use the Gem with Jekyll -**This theme requires Jekyll 3.9 to be compatible with GitHub Pages.** +{% include notification.html message="V1.x of this theme requires Jekyll <= 4.3 to be compatible with Bulma v1." %} Add this line to your Jekyll site's `Gemfile`: ```ruby -gem "bulma-clean-theme" +gem "bulma-clean-theme", '1.0.0' ``` And add this line to your Jekyll site's `_config.yml`: @@ -31,11 +31,23 @@ Or install it yourself as: $ gem install bulma-clean-theme -## GitHub Pages +## GitHub Pages -If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. +### v0.x of Bulma Clean Theme + +If you are deploying to GitHub pages, then you can also install the [GitHub Pages gem](https://github.com/github/pages-gem) and use `remote_theme` instead of `theme` in your `_config.yml`. + +Ensure you specify the version number at the end of the remote_theme, otherwise it will use the default version of the theme. ```yaml -# With GitHub Pages Gem -remote_theme: chrisrhymes/bulma-clean-theme -``` \ No newline at end of file +# _config.yml +remote_theme: chrisrhymes/bulma-clean-theme:v0.14.0 +``` + +### v1.x of Bulma Clean Theme + +{% include notification.html message="v1.x does not work with the GitHub pages default build process. " status="is-warning" %} + +When using v1.x of this theme, use GitHub actions to deploy your site to GitHub pages. + +Please read the [upgrade guide](/bulma-clean-theme/docs/getting-started/upgrading-to-v1/) for more information. \ No newline at end of file diff --git a/docs/getting-started/theming.md b/docs/getting-started/theming.md index d8d83e265..c816a8fd3 100644 --- a/docs/getting-started/theming.md +++ b/docs/getting-started/theming.md @@ -11,6 +11,13 @@ show_sidebar: false Bulma Clean Theme uses the Bulma frontend framework. Check out the [Bulma docs](https://bulma.io/documentation/) for more information. +## Bulma Themes + +Bulma v1 has the concept of [themes](https://bulma.io/documentation/features/themes/) and auto detects the browsers choice for dark or light theme. + +To disable this behaviour and force a theme, set the `force_theme:` in the _config.yml to either 'dark' or 'light'. + + ## Setting the Primary Colour To overwrite the primary theme colour, create a new file called `assets/css/app.scss`. Copy and paste the below into the `app.scss` file. diff --git a/docs/getting-started/upgrading-to-v1.md b/docs/getting-started/upgrading-to-v1.md index fae9588e0..2223aa73d 100644 --- a/docs/getting-started/upgrading-to-v1.md +++ b/docs/getting-started/upgrading-to-v1.md @@ -10,12 +10,56 @@ toc: true Version 1 of Bulma Clean Theme uses version 1 of Bulma. Bulma v1 has been updated to use dart sass and Jekyll was updated to use dart sass from version 4.3 and up, so this is now the minimum supported version of Jekyll for this theme. +## Updating dependencies + +One way of updating Jekyll and the theme is by using bundle. First update the versions in your Gemfile as follows: + +```ruby +# Gemfile +gem "jekyll", "~> 4.3" +gem "bulma-clean-theme", '1.0.0' +``` + +Then use bundle to update from your command line. + +```bash +$ bundle update +``` + +## Using remote_theme + +If you are using Jekyll Remote Theme, then you can [add a version number](https://github.com/benbalter/jekyll-remote-theme?tab=readme-ov-file#declaring-your-theme) in your _config.yml to specify which version you want to use. + +```yaml +# _config.yml +remote_theme: chrisrhymes/bulma-clean-theme@v1.0.0 +``` + ## Changes to Bulma Please read through the [Bulma migration guide](https://bulma.io/documentation/start/migrating-to-v1/) for any changes to Bulma that may affect your site. +### Dark mode + +Bulma v1 has a concept of themes and [automatic dark mode](https://bulma.io/documentation/features/dark-mode/). + +> Modern browsers come with a way to detect if a user has set their theme preference to light or dark by using the prefers-color-scheme keyword. + +To disable this behaviour and force a theme, set the `force_theme:` in the _config.yml to either 'dark' or 'light'. + +```yaml +# _config.yml +force_theme: light +``` + ## GitHub pages deploy As stated above, the minimum supported version is now Jekyll <= 4.3. The standard build for GitHub pages works with Jekyll 3.9, so you will need to migrate to using a GitHub action to build and deploy your site. - Please read through the [Jekyll docs for GitHub Actions](https://jekyllrb.com/docs/continuous-integration/github-actions/) for more information. \ No newline at end of file + Please read through the [Jekyll docs for GitHub Actions](https://jekyllrb.com/docs/continuous-integration/github-actions/) for more information. + +### Additional gems + + The [GitHub pages gem](https://rubygems.org/gems/github-pages/versions/231) had a lot of additional gems included, which may not be included when you use GitHub actions to build your site. + + If you are using any additional gems in your site, such as `jekyll-github-metadata`, then ensure you install them following their documentation. \ No newline at end of file From bb2e4dc21abc3bbbf1524be43c824245ac538113 Mon Sep 17 00:00:00 2001 From: chrisrhymes Date: Sun, 12 May 2024 14:56:49 +0100 Subject: [PATCH 2/3] Update docs from feedback --- _data/showcase_example.yml | 2 +- docs/getting-started/theming.md | 2 +- docs/getting-started/upgrading-to-v1.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_data/showcase_example.yml b/_data/showcase_example.yml index bc18ba019..f089f59f4 100644 --- a/_data/showcase_example.yml +++ b/_data/showcase_example.yml @@ -30,7 +30,7 @@ items: - Landing Page With Callouts - Blog and Posts - Showcases - features_styles: is-centered is-outlined + features_styles: is-centered image: /img/bulma-clean-theme-4by3.jpg image_ratio: is-4by3 link: https://github.com/chrisrhymes/bulma-clean-theme diff --git a/docs/getting-started/theming.md b/docs/getting-started/theming.md index c816a8fd3..04b23bfc4 100644 --- a/docs/getting-started/theming.md +++ b/docs/getting-started/theming.md @@ -13,7 +13,7 @@ Bulma Clean Theme uses the Bulma frontend framework. Check out the [Bulma docs]( ## Bulma Themes -Bulma v1 has the concept of [themes](https://bulma.io/documentation/features/themes/) and auto detects the browsers choice for dark or light theme. +Bulma v1 has the concept of [themes](https://bulma.io/documentation/features/themes/) and auto detects the browser's choice for dark or light theme. To disable this behaviour and force a theme, set the `force_theme:` in the _config.yml to either 'dark' or 'light'. diff --git a/docs/getting-started/upgrading-to-v1.md b/docs/getting-started/upgrading-to-v1.md index 2223aa73d..0bbec4d35 100644 --- a/docs/getting-started/upgrading-to-v1.md +++ b/docs/getting-started/upgrading-to-v1.md @@ -32,7 +32,7 @@ If you are using Jekyll Remote Theme, then you can [add a version number](https: ```yaml # _config.yml -remote_theme: chrisrhymes/bulma-clean-theme@v1.0.0 +remote_theme: chrisrhymes/bulma-clean-theme:v1.0.0 ``` ## Changes to Bulma From 47118df254ba8924d0b5d7132896e11717a7950b Mon Sep 17 00:00:00 2001 From: chrisrhymes Date: Sun, 12 May 2024 14:58:50 +0100 Subject: [PATCH 3/3] Remove line spaces in readme --- README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/README.md b/README.md index 9b529bfd0..3776f1e9a 100644 --- a/README.md +++ b/README.md @@ -56,8 +56,6 @@ If you are deploying to GitHub pages using their default build process, then you remote_theme: chrisrhymes/bulma-clean-theme:v0.14.0 ``` - - ## Documentation Check out the demo site for the [Documentation](https://www.csrhymes.com/bulma-clean-theme/docs/) @@ -79,4 +77,3 @@ Your theme is set up just like a normal Jekyll site! To test your theme, run `bu ## License The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT). -