From c24a45541093c07b285fac555e351d8413880fc0 Mon Sep 17 00:00:00 2001 From: "C. Lente" <7017340+clente@users.noreply.github.com> Date: Mon, 13 Feb 2023 21:45:09 -0300 Subject: [PATCH] Update README --- README.md | 225 ++++++++++++++++++++++++++++--------- images/pagespeed.webp | Bin 0 -> 12792 bytes images/screenshot-dark.png | Bin 36823 -> 0 bytes images/screenshot.png | Bin 37714 -> 249132 bytes images/tn.png | Bin 25877 -> 135421 bytes theme.toml | 2 +- 6 files changed, 170 insertions(+), 57 deletions(-) create mode 100644 images/pagespeed.webp delete mode 100644 images/screenshot-dark.png diff --git a/README.md b/README.md index f3fba5c..ceb25df 100644 --- a/README.md +++ b/README.md @@ -1,81 +1,194 @@ -# Hugo ᕦʕ •ᴥ•ʔᕤ Bear Cub ![Test](https://github.com/janraasch/hugo-bearblog/workflows/CI/badge.svg?branch=master&event=push) +# ᕦʕ •ᴥ•ʔᕤ Bear Cub -🧸 A [Hugo](https://gohugo.io/)-theme based on [Bear Blog](https://bearblog.dev). +[![github pages](https://github.com/clente/hugo-bearcub/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/clente/hugo-bearcub/actions/workflows/gh-pages.yml) +[![MIT license](https://img.shields.io/github/license/clente/hugo-bearcub)](https://github.com/clente/hugo-bearcub/blob/main/LICENSE) -> Free, no-nonsense, super-fast blogging. +## Overview -## Demo +🐻 A lightweight [Hugo](https://gohugo.io/) theme based on [Bear +Blog](https://bearblog.dev) and [Hugo Bear +Blog](https://github.com/janraasch/hugo-bearblog). -For a current & working demo of this theme, please check out https://janraasch.github.io/hugo-bearblog/ 🎯. - -## Screenshots - -⬜️ [Light][light-screenshot] - -⬛️ [Dark][dark-screenshot] - -When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the [`style.html`](https://github.com/janraasch/hugo-bearblog/blob/master/layouts/partials/style.html)-file for the implementation. +**Bear Cub** takes care of speed and optimization, so you can focus on writing +good content. It is free, multilingual, optimized for search engines, +no-nonsense, responsive, light, and fast. Really fast. ## Installation -If you already have a Hugo site on your machine, you can simply add this theme via +Follow Hugo's [quick start](https://gohugo.io/getting-started/quick-start/) to +create an empty website and then clone **Bear Cub** into the themes directory as +a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules): -``` -git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog +```sh +git submodule add https://github.com/clente/hugo-bearcub themes/hugo-bearcub ``` -Then, adjust the `config.toml` as detailed below. +To finish off, append a line to the site configuration file: -For more information, read the official [setup guide][hugo-setup-guide] of Hugo. - -## Adjust configuration / config.toml - -Please check out the [config.toml](https://github.com/janraasch/hugo-bearblog/blob/master/exampleSite/config.toml) included in the [exampleSite](https://github.com/janraasch/hugo-bearblog/tree/master/exampleSite) of this theme. - -## Content & structure - -### Starting fresh - -If you are starting fresh, simply copy over the contents of the `exampleSite`-directory included in this theme to your source directory. That should give you a good idea about how things work, and then you can go on from there to make the site your own. - -### Adding / editing content - -#### Index-Page - -The contents of the `index`-page may be changed by editing your `content/_index.md`-file. - -#### Page - -You can add **a new page** via running - -``` -hugo new my-new-page.md +```sh +echo 'theme = "hugo-bearcub"' >> config.toml ``` -#### Blog-Post +## Features -You can add **a new blog-post** via running +Like [Bear Blog](https://bearblog.dev), this theme: +- Is free and open source +- Looks great on any device +- Makes tiny (~5kb), optimized, and awesome pages +- Has no trackers, ads, or scripts +- Automatically generates an RSS feed + +But that's not all! **Bear Cub** is also... + +### Accessible + +**Bear Cub** has a few accessibility upgrades when compared to its predecessors. +The color palette has been overhauled to make sure everything is +[readable](https://web.dev/color-and-contrast-accessibility/) for users with low +vision impairments or color deficiencies, and some interactive elements were +made bigger to facilitate [clicking](https://web.dev/accessible-tap-targets/) +for users with a motor impairment. + +These small changes mean that **Bear Cub** passes Google's [PageSpeed +test](https://pagespeed.web.dev/report?url=https%3A%2F%2Fclente.github.io%2Fhugo-bearcub%2F) +with flying colors. + +![PageSpeed score](https://raw.githubusercontent.com/clente/hugo-bearcub/main/images/pagespeed.webp) + +### Secure + +[**Bear Cub**'s demo](https://clente.github.io/hugo-bearcub/) is hosted on GitHub +and therefore I'm not in control of its [Content Security +Policy](https://infosec.mozilla.org/guidelines/web_security#content-security-policy). +However, the theme itself was made with security in mind: there are no inline +styles and it uses no JavaScript at all. + +If you want to improve your [Mozilla +Observatory](https://observatory.mozilla.org/) score even further, you should be +able to simply add a few headers to your hosting service's configuration (e.g. +[Netlify](https://docs.netlify.com/routing/headers/) or [Cloudflare +Pages](https://developers.cloudflare.com/pages/platform/headers/)) and never +have to think about it again. My `_headers` file, for example, looks like this: ``` -hugo new blog/my-new-post.md +/* + X-Content-Type-Options: nosniff + Strict-Transport-Security: "max-age=31536000; includeSubDomains; preload" env=HTTPS + Cache-Control: max-age=31536000, public + X-Frame-Options: deny + Referrer-Policy: no-referrer + Feature-Policy: microphone 'none'; payment 'none'; geolocation 'none'; midi 'none'; sync-xhr 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none' + Content-Security-Policy: default-src 'none'; manifest-src 'self'; font-src 'self'; img-src 'self'; style-src 'self'; form-action 'none'; frame-ancestors 'none'; base-uri 'none' + X-XSS-Protection: 1; mode=block ``` -### Adding your branding / colors / css +### Multilingual -Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `