Refactor styling to drop PostCSS (#424)
Update custom_css logic (ensure retrocompat) Fixes #423
This commit is contained in:
Regis Philibert
GitHub
parent
988c731a57
commit
6eb54ab5fd
43
README.md
43
README.md
|
|
@ -148,40 +148,29 @@ And a list of background colors [here](https://github.com/tachyons-css/tachyons/
|
|||
_n.b. in future versions we will likely separate the typeface and other body classes._
|
||||
|
||||
|
||||
### Custom CSS
|
||||
### CSS
|
||||
|
||||
You can override the built-in css by using your own. Just put your own css files in the `static` directory of your website (the one in the theme directory also works but is not recommended) and modify the `custom_css` parameter in your config file. The path referenced in the parameter should be relative to the `static` folder. These css files will be added through the `header` partial after the built-in css file.
|
||||
Ananke stylesheet is built with Hugo Pipes's [Asset Bundling](https://gohugo.io/hugo-pipes/bundling/#readout) alone to maximize compatibiliy. The theme simply bundles its several files into one minified and fingerprinted (in production) CSS file.
|
||||
|
||||
For example, if your css files are `static/css/custom.css` and `static/css/custom2.css` then add the following to the config file:
|
||||
Ananke uses [Tachyon.io](http://tachyons.io/) utility class library.
|
||||
|
||||
#### Custom CSS
|
||||
|
||||
In order to complement the default CSS with your own, you can add custom css files to the project.
|
||||
|
||||
1. Just add a `assets/ananke/css` directory to your project and add the file(s) in it.
|
||||
2. Register the files using the `custom_css` key in your site's parameter. The path referenced in the parameter should be relative to the `assets/ananke/css` folder.
|
||||
|
||||
The css files will be added in their registered order to final `main.css` file.
|
||||
|
||||
For example, if your css files are `assets/ananke/css/custom.css` and `assets/ananke/special.css` then add the following to the config file:
|
||||
|
||||
```
|
||||
[params]
|
||||
custom_css = ["css/custom.css","css/custom2.css"]
|
||||
custom_css = ["custom.css","special.css"]
|
||||
```
|
||||
|
||||
### Processed CSS
|
||||
|
||||
By default, Ananke will read a preprocessed stylesheet from `/assets/ananke/dist/main.[hash].css`. If you want to have Hugo process the stylesheet for you thus allowing better customisation using Hugo's unison file system, you need to:
|
||||
|
||||
1. From the root of your project: `$ hugo mod npm pack`.
|
||||
This will generate a `package.json` for your project, or append the npm packages required by the theme to your existing `package.json`.
|
||||
2. Still from the root of your project: `$ npm install`
|
||||
3. Set the following site Parameter to true:
|
||||
|
||||
```
|
||||
[params]
|
||||
ananke_process_css = true
|
||||
```
|
||||
|
||||
You're all set an can run Hugo.
|
||||
|
||||
#### Overwrite some imported file
|
||||
|
||||
To have your own `_code.css` imported and processed by the theme. Add `/assets/ananke/css/_code.css` to your project.
|
||||
|
||||
#### Add a new import
|
||||
|
||||
Create your own `/assets/ananke/css/` directory at the root of your project, drop your files in there, and create your own `/main.css` with your own import statements. Don't forget to include the existing import statement from the theme's own `main.css`.
|
||||
__Note on retrocompatibiliy for custom css__: If the files registered through the `custom_css` setting are not found in `assets/ananke/css` the theme will expect them to live at the given path relative to the static directory and load them as <link> requests.
|
||||
|
||||
### Show Reading Time and Word Count
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
@import '_tachyons';
|
||||
@import '_code';
|
||||
@import '_hugo-internal-templates';
|
||||
@import '_social-icons';
|
||||
@import '_styles';
|
||||
50
layouts/partials/func/style/GetMainCSS.html
Normal file
50
layouts/partials/func/style/GetMainCSS.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
{{/*
|
||||
style/GetMainCSS
|
||||
Process the main css stylesheet and return as resource
|
||||
|
||||
@author @regisphilibert
|
||||
|
||||
@context Any (.)
|
||||
|
||||
@returns Resource
|
||||
|
||||
@uses
|
||||
- func/style/GetResource
|
||||
*/}}
|
||||
{{ $main_style := dict }}
|
||||
|
||||
{{/* We prepare a slice of resources to be concatenated as one */}}
|
||||
{{ $assets_to_concat := slice }}
|
||||
{{/* We add locale css files to the slice in the proper order */}}
|
||||
{{ range slice "_tachyons.css" "_code.css" "_hugo-internal-templates.css" "_social-icons.css" "_styles" }}
|
||||
{{ with partialCached "func/style/GetResource" . . }}
|
||||
{{ $assets_to_concat = $assets_to_concat | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* We look for any custom css files registered by the user under `site.params.custom_css and if found in the theme's
|
||||
css asset directory we add to aforementioned slice */}}
|
||||
{{ with site.Params.custom_css }}
|
||||
{{ range . }}
|
||||
{{ with partialCached "func/style/GetResource" . . }}
|
||||
{{ $assets_to_concat = $assets_to_concat | append . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $assets_to_concat }}
|
||||
{{/* We proceed to concatenate the $assets_to_concat */}}
|
||||
{{ $style := . | resources.Concat "ananke/css/main.css" }}
|
||||
|
||||
{{/* We then use toCSS to add sourceMap and minify */}}
|
||||
{{ $options := dict "enableSourceMap" true "precision" 6 }}
|
||||
{{ $style = $style | resources.ToCSS $options | minify }}
|
||||
{{/* We fingerprint in production for cache busting purposes */}}
|
||||
{{ if eq (getenv "HUGO_ENV") "production" }}
|
||||
{{ $style = . | fingerprint }}
|
||||
{{ end }}
|
||||
{{/* We're ready to set returning variable with resulting resource */}}
|
||||
{{ $main_style = $style }}
|
||||
{{ end }}
|
||||
|
||||
{{ return $main_style }}
|
||||
19
layouts/partials/func/style/GetResource.html
Normal file
19
layouts/partials/func/style/GetResource.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{{/*
|
||||
style/GetResource
|
||||
Get a style asset stored at `/assets/ananke/css`
|
||||
|
||||
@author @regisphilibert
|
||||
|
||||
@context String (.)
|
||||
|
||||
@access private
|
||||
|
||||
@returns Resource
|
||||
|
||||
*/}}
|
||||
{{ $resource := dict }}
|
||||
{{ with resources.Get (print "/ananke/css/" .) }}
|
||||
{{ $resource = . }}
|
||||
{{ end }}
|
||||
|
||||
{{ return $resource }}
|
||||
|
|
@ -1,27 +1,9 @@
|
|||
{{/* We only process CSS if below setting is true */}}
|
||||
{{ if site.Params.ananke_process_css }}
|
||||
{{ with resources.Get "/ananke/css/main.css" }}
|
||||
{{/* We use ToCSS on non sass to make sure node_modules paths are included and imported
|
||||
Then we can run PostCSS on the resulting asset.
|
||||
`use` setting allow us to skip the postcss.config file.
|
||||
*/}}
|
||||
{{ $options := (dict "targetPath" "/ananke/css/main.css" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
|
||||
{{ $style := . | resources.ToCSS $options | resources.PostCSS (dict "use" "postcss-cssnext") | minify }}
|
||||
{{/* We fingerprint in production to ensure cache busting */}}
|
||||
{{ if eq (getenv "HUGO_ENV") "production" }}
|
||||
{{ $style = . | fingerprint }}
|
||||
{{ end }}
|
||||
{{ with $style }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" >
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{/* If processing is turned off, we use the assets/dist/main.?.css commited to the repo. */}}
|
||||
{{ with resources.GetMatch "/ananke/dist/main.*.css" }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" >
|
||||
{{ end }}
|
||||
{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" >
|
||||
{{ end }}
|
||||
|
||||
{{ range .Site.Params.custom_css }}
|
||||
{{ range site.Params.custom_css }}
|
||||
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
|
||||
<link rel="stylesheet" href="{{ relURL (.) }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Loading…
Reference in a new issue