Uncache all of the partials used

On the other hand, this solves the weird title behavior as well as the
inability to update themes.
This commit is contained in:
Gabriel Arazas 2020-11-04 01:07:30 +08:00
parent d26e9b556d
commit e81b882549
5 changed files with 69 additions and 36 deletions

View File

@ -9,6 +9,26 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
[appendix]
== Extra notes
* v0.1.1 has been versioned without any changes due to (speculated) GitHub caching with the `go.mod` file affecting the fetching of the Hugo module.
== [0.1.2] - 2020-11-04
=== Fixed
* The page titles inside of `<title>` has been updated similarly to https://gohugo.io/[Hugo's way of titling pages].
* Caching issue for the theme which causes a variety of unexpected behavior to pop up:
** The inability to update the theme stylesheet and the theme button component.
** The incorrect page titles.
== [0.1.0] - 2020-11-02 == [0.1.0] - 2020-11-02
The initial release. The initial release.

View File

@ -10,27 +10,15 @@ Tested primarily with Chromium-based and Firefox-based browsers.
== Project goals == Demo
* Create a batteries-included theme that is easy to extend and/or modify. But first, a quick screenshot of the theme.
* Focus on the ease of migration of content and data in case the user wants to switch themes.
* https://webaim.org/[Accessibility] for people with disabilities (PWD).
* Make the theme browsable with the following text browsers:
** https://www.brow.sh/[Browsh]
** http://links.twibright.com/[Links]
** https://invisible-island.net/lynx/[Lynx] (the ultimate challenge!)
* Low https://addyosmani.com/blog/performance-budgets/[performance budget] of 30KB or even less, must load under 1 second on a mobile 3G connection, and has a Lighthouse score of >90.
footnote:[It only considered with the default configuration and without non-textual resources such as images and videos.]
* Make the theme functional on `<noscript>`.
image:./docs/demo-full.png[The theme in desktop-sized windows.]
=== Non-goals Demo available at the `demo` branch of this Git repo.
It is automatically deployed with Travis CI and its output is available in https://foo-dogsquared.github.io/hugo-theme-more-contentful.
* Include all of the modern things commonly found on today's web sites (or even Hugo themes). It also provides an example how to deploy your Hugo site with GitHub pages.
It may not fit with the requirements that a complex project demands.
Thus, it is encouraged that the author should modify according to their settings.
* Make every possible option as a setting or a toggle switch.
@ -54,6 +42,31 @@ footnote:[Still, this theme is designed with multiple authors in mind.]
== Project goals
* Create a batteries-included theme that is easy to extend and/or modify.
* Focus on the ease of migration of content and data in case the user wants to switch themes.
* https://webaim.org/[Accessibility] for people with disabilities (PWD).
* Make the theme browsable with the following text browsers:
** https://www.brow.sh/[Browsh]
** http://links.twibright.com/[Links]
** https://invisible-island.net/lynx/[Lynx] (the ultimate challenge!)
* Low https://addyosmani.com/blog/performance-budgets/[performance budget] of 30KB or even less, must load under 1 second on a mobile 3G connection, and has a Lighthouse score of >90.
footnote:[It only considered with the default configuration and without non-textual resources such as images and videos.]
* Make the theme functional on `<noscript>` (preferably testing with https://www.gnu.org/software/librejs/[LibreJS] extension).
=== Non-goals
* Include all of the modern things commonly found on today's web sites (or even Hugo themes).
It may not fit with the requirements that a complex project demands.
Thus, it is encouraged that the author should modify according to their settings.
* Make every possible option as a setting or a toggle switch.
== Getting started == Getting started
@ -101,7 +114,7 @@ Then, you can import the Hugo module in your site config.
path = "github.com/foo-dogsquared/hugo-theme-more-contentful" path = "github.com/foo-dogsquared/hugo-theme-more-contentful"
---- ----
You can also specify the tag by adding `@$TAG` at the end of the path. You can also specify the tag (e.g., `hugo-theme-more-contentful@v1.2.3`) or the commit (e.g., `hugo-theme-more-contentful@abcdefg`).
For more information, you can see https://github.com/golang/go/wiki/Modules#how-to-upgrade-and-downgrade-dependencies[how to specify Go modules] since Hugo modules are built on top of it. For more information, you can see https://github.com/golang/go/wiki/Modules#how-to-upgrade-and-downgrade-dependencies[how to specify Go modules] since Hugo modules are built on top of it.
Next, get the dependency by running `hugo mod get` and to update the component, run `hugo mod get -u`. Next, get the dependency by running `hugo mod get` and to update the component, run `hugo mod get -u`.
@ -207,24 +220,24 @@ Indicating the author(s) is also the same with content pages.
For completeness and best practice, the author object should be structured with the following schema. For completeness and best practice, the author object should be structured with the following schema.
* `name`, as already mentioned, is the name of the author. * `name` (string), as already mentioned, is the name of the author.
* `url` that points to the homepage (or whatever link of their choosing) of the author. * `url` (string) that points to the homepage (or whatever link of their choosing) of the author.
* `email` for the author's public email. * `email` (string) for the author's public email.
* `img` points to a URL of the profile image of the author. * `img` (string) points to a URL of the profile image of the author.
It can also point relative to the Hugo project root. It can also point relative to the Hugo project root.
=== Creating your own color scheme === Creating your own color scheme
To create a color scheme, simply place a Base16 color scheme data file in `data/more-contentful/themes/`.
For example, take the https://github.com/chriskempson/base16-default-schemes/blob/master/default-dark.yaml[default Base16 dark scheme] which is also the default scheme for this theme.
Creating your own color scheme has been simplified with the use of https://gohugo.io/templates/data-templates/#the-data-folder[data templates]. Creating your own color scheme has been simplified with the use of https://gohugo.io/templates/data-templates/#the-data-folder[data templates].
Furthermore, with https://gohugo.io/hugo-pipes/bundling/#readout[asset bundling], CSS variables, and SCSS, it is ensured that all of the schemes will be kept in one resulting stylesheet. Furthermore, with https://gohugo.io/hugo-pipes/bundling/#readout[asset bundling], CSS variables, and SCSS, it is ensured that all of the schemes will be kept in one resulting stylesheet.
NOTE: In case you want to modify the stylesheet, the website has been styled according to the https://github.com/chriskempson/base16/blob/master/styling.md[Base16 styling guidelines] with some liberty. NOTE: In case you want to modify the stylesheet, the website has been styled according to the https://github.com/chriskempson/base16/blob/master/styling.md[Base16 styling guidelines] with some liberty.
Not all Base16 color schemes follow the guideline strictly so it may result in a bad-looking color palette of the website. Not all Base16 color schemes follow the guideline strictly so it may result in a bad-looking color palette of the website.
To create a color scheme, simply place a Base16 color scheme data file in `data/more-contentful/themes`.
For example, take the https://github.com/chriskempson/base16-default-schemes/blob/master/default-dark.yaml[default Base16 dark scheme] which is also the default scheme for this theme.
[source, yaml] [source, yaml]
---- ----
scheme: "Default Dark" scheme: "Default Dark"
@ -247,13 +260,13 @@ base0E: "ba8baf"
base0F: "a16946" base0F: "a16946"
---- ----
You can also use https://github.com/chriskempson/base16#scheme-repositories[any of the existing color schemes] as a starting point.
If you want to override the default scheme, you can place the file as `_index.{json,toml,yaml}` (of whatever appropriate data format of your choice).
NOTE: Inheriting schemes is not possible and to change one color of the color scheme, you have to create a whole new file with the single change. NOTE: Inheriting schemes is not possible and to change one color of the color scheme, you have to create a whole new file with the single change.
Even though scheme inheritance can be implemented, it'll open a new gate of unpredictable problems so it is better to be explicit on everything for now. Even though scheme inheritance can be implemented, it'll open a new gate of unpredictable problems so it is better to be explicit on everything for now.
Sorry, it will never be added on the theme. :( Sorry, it will never be added on the theme. :(
You can also use https://github.com/chriskempson/base16#scheme-repositories[any of the existing color schemes] as a starting point.
If you want to override the default scheme, you can place the file as `_index.{json,toml,yaml}` (of whatever appropriate data format of your choice).
The schemes are pressed against a template (i.e., link:./assets/templates/theme.scss[`./assets/templates/theme.scss`]) then added to the resulting stylesheet. The schemes are pressed against a template (i.e., link:./assets/templates/theme.scss[`./assets/templates/theme.scss`]) then added to the resulting stylesheet.
[source, css] [source, css]
@ -313,7 +326,7 @@ The icon object with the smallest weight will be the first to appear in the list
If a link object has the same weight, it will be ordered alphabetically by its `id`. If a link object has the same weight, it will be ordered alphabetically by its `id`.
Consider the example that I have a list of social media accounts and want my Keybase account to be listed first. Consider the example that I have a list of social media accounts and want my Keybase account to be listed first.
Thus, the Keybase link object will have a weight of `-1`. Thus, the related object will have a weight of `-1`.
[source, toml] [source, toml]
---- ----
@ -383,7 +396,7 @@ The following exhaustive list sets the following:
* Install an https://editorconfig.org/[EditorConfig] plugin for your text editor. * Install an https://editorconfig.org/[EditorConfig] plugin for your text editor.
If it's not possible, follow the link:.editorconfig[the EditorConfig config]. If it's not possible, follow the link:.editorconfig[the EditorConfig config].
** It is optional but install https://github.com/editorconfig-checker/editorconfig-checker[editconfig-checker] for easier checking of the files. ** It is optional but install https://github.com/editorconfig-checker/editorconfig-checker[editorconfig-checker] for easier checking of the files.
* For theme-specific https://gohugo.io/templates/data-templates/[data templates], the data should be pulled from `./data/more-contentful/` directory. * For theme-specific https://gohugo.io/templates/data-templates/[data templates], the data should be pulled from `./data/more-contentful/` directory.
This is to make data migration easier for the user in case they want to switch themes. This is to make data migration easier for the user in case they want to switch themes.

BIN
docs/demo-full.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View File

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en" }}"> <html lang="{{ .Site.LanguageCode | default "en" }}">
{{- partialCached "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partialCached "components/theme-button.html" . }} {{- partial "components/theme-button.html" . }}
{{- partialCached "header.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
{{- partialCached "footer.html" . -}} {{- partial "footer.html" . -}}
</body> </body>
</html> </html>

View File

@ -1,4 +1,4 @@
<title>{{ if .IsHome }}{{ $.Site.Title | safeHTML }}{{ else }}{{ .Title | safeHTML }}{{ end }}</title> <title>{{ if not .IsHome }}{{ .Title | safeHTML }} |{{ end }} {{ $.Site.Title | safeHTML }}</title>
{{- $stylesheets := slice }} {{- $stylesheets := slice }}