Add optional processing of styles with Hugo Pipes (#387)

* Using resources.PostCSS to handle stylesheets

* Allow optional processing of assets through Hugo Pipes

* We can settle with 0.64.0
This commit is contained in:
Regis Philibert 2021-01-19 15:43:02 -05:00 committed by GitHub
parent 23c7cc6847
commit ffd9d903c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 143 additions and 24404 deletions

2
.gitignore vendored
View File

@ -18,6 +18,7 @@ nbproject/
.bin/node_modules/
/node_modules/
src/node_modules/
exampleSite/node_modules/
src/npm-debug.log.*
npm-debug.log
/npm-debug.log*
@ -28,3 +29,4 @@ npm-debug.log
/junit.xml
partials/structure/stylesheet.html

View File

@ -153,6 +153,30 @@ For example, if your css files are `static/css/custom.css` and `static/css/custo
custom_css = ["css/custom.css","css/custom2.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`.
### Show Reading Time and Word Count
If you add a key of `show_reading_time` true to either the Config Params, a page or section's front matter, articles will show the reading time and word count.

File diff suppressed because one or more lines are too long

3
config.yaml Normal file
View File

@ -0,0 +1,3 @@
module:
hugoVersion:
min: "0.64.0"

View File

@ -1,6 +0,0 @@
{
"app": {
"js": "js/app.3fc0f988d21662902933.js",
"css": "css/app.4fc0b62e4b82c997bb0041217cd6b979.css"
}
}

View File

@ -3,6 +3,7 @@ baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."
resourceDir = "../resources"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"

View File

@ -15,14 +15,7 @@
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
{{ end }}
{{ $stylesheet := .Site.Data.webpack_assets.app }}
{{ with $stylesheet.css }}
<link href="{{ relURL (printf "%s%s" "dist/" .) }}" rel="stylesheet">
{{ end }}
{{ range .Site.Params.custom_css }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ partial "site-style.html" . }}
{{ block "favicon" . }}
{{ partialCached "site-favicon.html" . }}
@ -53,6 +46,5 @@
{{ block "main" . }}{{ end }}
</main>
{{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }}
{{ block "scripts" . }}{{ partialCached "site-scripts.html" . }}{{ end }}
</body>
</html>

View File

@ -1,4 +1,5 @@
{{ define "main" }}
<article class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
{{ .Content }}
</article>

View File

@ -1,4 +0,0 @@
{{ $script := .Site.Data.webpack_assets.app }}
{{ with $script.js }}
<script src="{{ relURL (printf "%s%s" "dist/" .) }}"></script>
{{ end }}

View File

@ -0,0 +1,27 @@
{{/* 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 }}
{{ end }}
{{ range .Site.Params.custom_css }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}

132
package-lock.json generated
View File

@ -1,132 +0,0 @@
{
"name": "gohugo-default-theme",
"version": "2.5.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"auto-changelog": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-1.16.1.tgz",
"integrity": "sha512-1OMUN5UWWhKtlEMpGUfbLFcZHDf4IXMNU4SsGs44xTlSBhjgTOx9ukbahoC7hTqIm6+sRAnlAbLY4UjbDZY18A==",
"dev": true,
"requires": {
"commander": "^3.0.1",
"core-js": "^3.2.1",
"handlebars": "^4.1.2",
"lodash.uniqby": "^4.7.0",
"node-fetch": "^2.6.0",
"parse-github-url": "^1.0.2",
"regenerator-runtime": "^0.13.3",
"semver": "^6.3.0"
}
},
"commander": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
"integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
"dev": true
},
"core-js": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.3.4.tgz",
"integrity": "sha512-BtibooaAmSOptGLRccsuX/dqgPtXwNgqcvYA6kOTTMzonRxZ+pJS4e+6mvVutESfXMeTnK8m3M+aBu3bkJbR+w==",
"dev": true
},
"handlebars": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.5.tgz",
"integrity": "sha512-0Ce31oWVB7YidkaTq33ZxEbN+UDxMMgThvCe8ptgQViymL5DPis9uLdTA13MiRPhgvqyxIegugrP97iK3JeBHg==",
"dev": true,
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
}
},
"lodash.uniqby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
"integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=",
"dev": true
},
"minimist": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true
},
"neo-async": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
"node-fetch": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
"dev": true
},
"optimist": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"dev": true,
"requires": {
"minimist": "~0.0.1",
"wordwrap": "~0.0.2"
}
},
"parse-github-url": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.2.tgz",
"integrity": "sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==",
"dev": true
},
"regenerator-runtime": {
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
"dev": true
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"uglify-js": {
"version": "3.6.4",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.4.tgz",
"integrity": "sha512-9Yc2i881pF4BPGhjteCXQNaXx1DCwm3dtOyBaG2hitHjLWOczw/ki8vD1bqyT3u6K0Ms/FpCShkmfg+FtlOfYA==",
"dev": true,
"optional": true,
"requires": {
"commander": "~2.20.3",
"source-map": "~0.6.1"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true,
"optional": true
}
}
},
"wordwrap": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
"dev": true
}
}
}

41
package.hugo.json Normal file
View File

@ -0,0 +1,41 @@
{
"author": "budparr",
"bugs": {
"url": "https://github.com/theNewDynamic/gohugo-theme-ananke/issues"
},
"comments": {
"dependencies": {},
"devDependencies": {
"auto-changelog": "project",
"cssnano": "project",
"postcss-cli": "project",
"postcss-cssnext": "project",
"tachyons": "project"
}
},
"dependencies": {},
"description": "Theme Ananke",
"devDependencies": {
"auto-changelog": "^1.16.1",
"cssnano": "^3.10.0",
"postcss-cli": "^7.1.0",
"postcss-cssnext": "^2.10.0",
"tachyons": "^4.9.1"
},
"homepage": "https://github.com/theNewDynamic/gohugo-theme-ananke#readme",
"keywords": [
"hugo",
"gohugo"
],
"license": "MIT",
"main": "index.js",
"name": "gohugo-theme-ananke",
"repository": {
"type": "git",
"url": "git+https://github.com/theNewDynamic/gohugo-theme-ananke.git"
},
"scripts": {
"version": "auto-changelog -p --template keepachangelog --commit-limit 0 \u0026\u0026 git add CHANGELOG.md"
},
"version": "2.7.0"
}

View File

@ -1,26 +1,42 @@
{
"name": "gohugo-default-theme",
"version": "2.6.1",
"description": "Base Theme to start Hugo Sites",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/theNewDynamic/thenewdynamic.com.git"
},
"scripts": {
"version": "auto-changelog -p --template keepachangelog --commit-limit 0 && git add CHANGELOG.md"
},
"keywords": [
"hugo",
"gohugo"
],
"author": "budparr",
"license": "MIT",
"bugs": {
"url": "https://github.com/theNewDynamic/thenewdynamic.com/issues"
},
"homepage": "https://github.com/theNewDynamic/thenewdynamic.com#readme",
"author": "budparr",
"bugs": {
"url": "https://github.com/theNewDynamic/gohugo-theme-ananke/issues"
},
"comments": {
"dependencies": {},
"devDependencies": {
"auto-changelog": "^1.16.1"
"auto-changelog": "project",
"cssnano": "project",
"postcss-cli": "project",
"postcss-cssnext": "project",
"tachyons": "project"
}
}
},
"dependencies": {},
"description": "Theme Ananke",
"devDependencies": {
"auto-changelog": "^1.16.1",
"cssnano": "^3.10.0",
"postcss-cli": "^7.1.0",
"postcss-cssnext": "^2.10.0",
"tachyons": "^4.9.1"
},
"homepage": "https://github.com/theNewDynamic/gohugo-theme-ananke#readme",
"keywords": [
"hugo",
"gohugo"
],
"license": "MIT",
"main": "index.js",
"name": "gohugo-theme-ananke",
"repository": {
"type": "git",
"url": "git+https://github.com/theNewDynamic/gohugo-theme-ananke.git"
},
"scripts": {
"version": "auto-changelog -p --template keepachangelog --commit-limit 0 \u0026\u0026 git add CHANGELOG.md",
"deploy": " cd exampleSite; hugo;"
},
"version": "2.7.0"
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"Target":"ananke/css/main.min.css","MediaType":"text/css","Data":{}}

View File

@ -1,8 +0,0 @@
module.exports = {
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '> 5%'],
}
}
};

View File

@ -1,16 +0,0 @@
import styles from './../css/main.css';
// NOTE: TO use Jquery, just call the modules you want
// var $ = require('jquery/src/core');
// require('jquery/src/core/init');
// require('jquery/src/manipulation');
// OR, use all of them
// var $ = require('jquery/src/jquery');
// And write your code
// $('body').append('<p>Jquery is working</p>');
//
// You can also "require" any script from its location in the node modules folder. Webpack often knows what to look for, but you can add a script directly like this:
// var javascriptthingy = require('name/folder/file.js');

6453
src/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,32 +0,0 @@
{
"name": "gohugo-default-styles",
"version": "1.0.0",
"description": "Default Theme for Hugo Sites",
"main": "index.js",
"repository": "",
"author": "budparr",
"license": "MIT",
"scripts": {
"build:production": "rm -rf ../static/dist && webpack -p",
"build": "webpack --progress --colors --watch",
"start": "npm run build"
},
"devDependencies": {
"assets-webpack-plugin": "^3.9.10",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"postcss": "^5.2.16",
"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.3.3",
"style-loader": "^0.16.1",
"tachyons": "^4.9.1",
"webpack": "^2.3.3"
},
"dependencies": {}
}

View File

@ -1,39 +0,0 @@
## Welcome to the SRC folder for the Gohugo Ananke Theme.
The contents of this folder are used to generate CSS and javascript. You may never have to touch anything here, unless you want to more deeply customize your styles.
## Tools
### Yarn
We use [Yarn](https://yarnpkg.com) for package managment (instead of NPM) because it's fast and generates a lock file to make dependency management more consistent. The theme's `.gitignore` file should be kept intact to make sure that all files in the `node_modules` folder are not pushed to the repository.
### Webpack
We use Webpack to manage our asset pipeline. Arguably, Webpack is overkill for this use-case, but we're using it here because once it's set up (which we've done for you), it's really easy to use. If you want to use an external script, just add it via Yarn, and reference it in main.js. You'll find instructions in the js/main.js file.
### PostCSS
PostCSS is just CSS. You'll find `postcss.config.js` in the css folder. There you'll find that we're using [`postcss-import`](https://github.com/postcss/postcss-import) which allows us import css files directly from the node_modules folder, [`postcss-cssnext`](http://cssnext.io/features/) which gives us the power to use upcoming CSS features today. If you miss Sass you can find PostCss modules for those capabilities, too.
### Tachyons
This theme uses the [Tachyons CSS Library](http://tachyons.io/). It's about 15kb gzipped, highly modular, and each class is atomic so you never have to worry about overwriting your styles. It's a great library for themes because you can make most all the style changes you need right in your layouts.
## How to Use
You'll find the commands to run in `src/package.json`.
For development, you'll need Node and Yarn installed:
```
$ cd themes/gohugo-theme-ananke/src/
$ yarn install
$ npm start
```
This will process both the postcss and scripts.
For production, instead of `npm start`, run `npm run build:production,` which will output minified versions of your files.

View File

@ -1,57 +0,0 @@
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var AssetsPlugin = require('assets-webpack-plugin');
module.exports = {
entry: {
app: './js/main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?importLoaders=1!postcss-loader'
})
}
]
},
output: {
path: path.join(__dirname, './../static/dist'),
filename: 'js/[name].[chunkhash].js'
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
plugins: [
new AssetsPlugin({
filename: 'webpack_assets.json',
path: path.join(__dirname, '../data'),
prettyPrint: true
}),
new ExtractTextPlugin({
filename: getPath => {
return getPath('css/[name].[contenthash].css');
},
allChunks: true
})
],
watchOptions: {
watch: true
}
};

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1 +0,0 @@
!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};t.m=n,t.c=r,t.i=function(n){return n},t.d=function(n,r,e){t.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},t.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(r,"a",r),r},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=1)}([function(n,t){},function(n,t,r){"use strict";var e=r(0);!function(n){n&&n.__esModule}(e)}]);

View File

@ -8,7 +8,7 @@ description = "A Base theme for building full featured Hugo sites"
homepage = "https://github.com/theNewDynamic/gohugo-theme-ananke"
tags = ["website", "starter", "responsive", "Disqus", "blog", "Tachyons", "Multilingual", "Stackbit"]
features = ["posts", "shortcodes", "related content", "comments"]
min_version = "0.55.0"
min_version = "0.64.0"
[author]
name = "theNewDynamic"