[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow auto dark mode and forcing theme #153

Merged
merged 3 commits into from
May 12, 2024
Merged

Allow auto dark mode and forcing theme #153

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05a3aea
Allow auto dark mode and forcing theme
chrisrhymes May 7, 2024
bb2e4dc
Update docs from feedback
chrisrhymes May 12, 2024
47118df
Remove line spaces in readme
chrisrhymes May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is much clearer, thank you! I didn't know that you could pin the version of a remote theme. That looks like a simple solution to start with.

```



## Documentation

Check out the demo site for the [Documentation](https://www.csrhymes.com/bulma-clean-theme/docs/)
Expand Down
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ gh_sponsor: chrisrhymes
#theme_color: '#eeeeee'
#fixed_navbar: top
#direction: one of <ltr, rtl, auto>, default: ltr
force_theme: light

paginate: 5
paginate_path: "/blog/page:num"
Expand Down
5 changes: 4 additions & 1 deletion _includes/notification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<div x-data="{visible: true}" markdown="0">
<div class="notification {{ include.status | default: 'is-warning' }}" x-show.transition.duration.300ms="visible">
<div
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add margin to top and bottom of notifications

class="notification {{ include.status | default: 'is-warning' }} my-4"
x-show.transition.duration.300ms="visible"
>
{% if include.dismissable %}
<button class="delete" x-on:click="visible = false"></button>
{% endif %}
Expand Down
5 changes: 1 addition & 4 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
<html
dir="{{ site.direction | default: 'ltr' }}"
lang="{{ site.lang | default: 'en' }}"
{% if site.fixed_navbar %}
class="has-navbar-fixed-{{ site.fixed_navbar }}"
{% endif %}
class="theme-light"
class="{% if site.fixed_navbar %} has-navbar-fixed-{{ site.fixed_navbar }} {% endif %} {% if site.force_theme %} theme-{{ site.force_theme }} {% endif %}"
>
{% include head.html %}
<body>
Expand Down
2 changes: 1 addition & 1 deletion bulma-clean-theme.gemspec
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]

Expand Down
3 changes: 3 additions & 0 deletions changelog.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
4 changes: 3 additions & 1 deletion docs/getting-started/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
26 changes: 19 additions & 7 deletions docs/getting-started/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`:
Expand All @@ -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
```
# _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.
7 changes: 7 additions & 0 deletions docs/getting-started/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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'.


## 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.
Expand Down
46 changes: 45 additions & 1 deletion docs/getting-started/upgrading-to-v1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you like this to be consistent with the README and installation pages? Both worked in my testing, so this isn't wrong.

Suggested change
remote_theme: chrisrhymes/bulma-clean-theme@v1.0.0
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.
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.