Add Hugo Piper with SCSS support and much more
Before this commit, you would have to use page bundles to do image processing etc. in Hugo.
This commit adds
* A new `/assets` top-level project or theme dir (configurable via `assetDir`)
* A new template func, `resources.Get` which can be used to "get a resource" that can be further processed.
This means that you can now do this in your templates (or shortcodes):
```bash
{{ $sunset := (resources.Get "images/sunset.jpg").Fill "300x200" }}
```
This also adds a new `extended` build tag that enables powerful SCSS/SASS support with source maps. To compile this from source, you will also need a C compiler installed:
```
HUGO_BUILD_TAGS=extended mage install
```
Note that you can use output of the SCSS processing later in a non-SCSSS-enabled Hugo.
The `SCSS` processor is a _Resource transformation step_ and it can be chained with the many others in a pipeline:
```bash
{{ $css := resources.Get "styles.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
The transformation funcs above have aliases, so it can be shortened to:
```bash
{{ $css := resources.Get "styles.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
A quick tip would be to avoid the fingerprinting part, and possibly also the not-superfast `postCSS` when you're doing development, as it allows Hugo to be smarter about the rebuilding.
Documentation will follow, but have a look at the demo repo in https://github.com/bep/hugo-sass-test
New functions to create `Resource` objects:
* `resources.Get` (see above)
* `resources.FromString`: Create a Resource from a string.
New `Resource` transformation funcs:
* `resources.ToCSS`: Compile `SCSS` or `SASS` into `CSS`.
* `resources.PostCSS`: Process your CSS with PostCSS. Config file support (project or theme or passed as an option).
* `resources.Minify`: Currently supports `css`, `js`, `json`, `html`, `svg`, `xml`.
* `resources.Fingerprint`: Creates a fingerprinted version of the given Resource with Subresource Integrity..
* `resources.Concat`: Concatenates a list of Resource objects. Think of this as a poor man's bundler.
* `resources.ExecuteAsTemplate`: Parses and executes the given Resource and data context (e.g. .Site) as a Go template.
Fixes #4381
Fixes #4903
Fixes #4858
2018-02-20 04:02:14 -05:00
|
|
|
// Copyright 2018 The Hugo Authors. All rights reserved.
|
|
|
|
//
|
|
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
// you may not use this file except in compliance with the License.
|
|
|
|
// You may obtain a copy of the License at
|
|
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
//
|
|
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
// See the License for the specific language governing permissions and
|
|
|
|
// limitations under the License.
|
|
|
|
|
|
|
|
package resource
|
|
|
|
|
|
|
|
import (
|
|
|
|
"fmt"
|
|
|
|
"strconv"
|
|
|
|
|
2018-10-03 08:58:09 -04:00
|
|
|
"github.com/pkg/errors"
|
Add Hugo Piper with SCSS support and much more
Before this commit, you would have to use page bundles to do image processing etc. in Hugo.
This commit adds
* A new `/assets` top-level project or theme dir (configurable via `assetDir`)
* A new template func, `resources.Get` which can be used to "get a resource" that can be further processed.
This means that you can now do this in your templates (or shortcodes):
```bash
{{ $sunset := (resources.Get "images/sunset.jpg").Fill "300x200" }}
```
This also adds a new `extended` build tag that enables powerful SCSS/SASS support with source maps. To compile this from source, you will also need a C compiler installed:
```
HUGO_BUILD_TAGS=extended mage install
```
Note that you can use output of the SCSS processing later in a non-SCSSS-enabled Hugo.
The `SCSS` processor is a _Resource transformation step_ and it can be chained with the many others in a pipeline:
```bash
{{ $css := resources.Get "styles.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
The transformation funcs above have aliases, so it can be shortened to:
```bash
{{ $css := resources.Get "styles.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
A quick tip would be to avoid the fingerprinting part, and possibly also the not-superfast `postCSS` when you're doing development, as it allows Hugo to be smarter about the rebuilding.
Documentation will follow, but have a look at the demo repo in https://github.com/bep/hugo-sass-test
New functions to create `Resource` objects:
* `resources.Get` (see above)
* `resources.FromString`: Create a Resource from a string.
New `Resource` transformation funcs:
* `resources.ToCSS`: Compile `SCSS` or `SASS` into `CSS`.
* `resources.PostCSS`: Process your CSS with PostCSS. Config file support (project or theme or passed as an option).
* `resources.Minify`: Currently supports `css`, `js`, `json`, `html`, `svg`, `xml`.
* `resources.Fingerprint`: Creates a fingerprinted version of the given Resource with Subresource Integrity..
* `resources.Concat`: Concatenates a list of Resource objects. Think of this as a poor man's bundler.
* `resources.ExecuteAsTemplate`: Parses and executes the given Resource and data context (e.g. .Site) as a Go template.
Fixes #4381
Fixes #4903
Fixes #4858
2018-02-20 04:02:14 -05:00
|
|
|
"github.com/spf13/cast"
|
|
|
|
|
|
|
|
"strings"
|
|
|
|
|
|
|
|
"github.com/gohugoio/hugo/common/maps"
|
|
|
|
)
|
|
|
|
|
|
|
|
var (
|
|
|
|
_ metaAssigner = (*genericResource)(nil)
|
|
|
|
)
|
|
|
|
|
|
|
|
// metaAssigner allows updating metadata in resources that supports it.
|
|
|
|
type metaAssigner interface {
|
|
|
|
setTitle(title string)
|
|
|
|
setName(name string)
|
|
|
|
updateParams(params map[string]interface{})
|
|
|
|
}
|
|
|
|
|
|
|
|
const counterPlaceHolder = ":counter"
|
|
|
|
|
|
|
|
// AssignMetadata assigns the given metadata to those resources that supports updates
|
|
|
|
// and matching by wildcard given in `src` using `filepath.Match` with lower cased values.
|
|
|
|
// This assignment is additive, but the most specific match needs to be first.
|
|
|
|
// The `name` and `title` metadata field support shell-matched collection it got a match in.
|
|
|
|
// See https://golang.org/pkg/path/#Match
|
|
|
|
func AssignMetadata(metadata []map[string]interface{}, resources ...Resource) error {
|
|
|
|
|
|
|
|
counters := make(map[string]int)
|
|
|
|
|
|
|
|
for _, r := range resources {
|
|
|
|
if _, ok := r.(metaAssigner); !ok {
|
|
|
|
continue
|
|
|
|
}
|
|
|
|
|
|
|
|
var (
|
|
|
|
nameSet, titleSet bool
|
|
|
|
nameCounter, titleCounter = 0, 0
|
|
|
|
nameCounterFound, titleCounterFound bool
|
|
|
|
resourceSrcKey = strings.ToLower(r.Name())
|
|
|
|
)
|
|
|
|
|
|
|
|
ma := r.(metaAssigner)
|
|
|
|
for _, meta := range metadata {
|
|
|
|
src, found := meta["src"]
|
|
|
|
if !found {
|
|
|
|
return fmt.Errorf("missing 'src' in metadata for resource")
|
|
|
|
}
|
|
|
|
|
|
|
|
srcKey := strings.ToLower(cast.ToString(src))
|
|
|
|
|
|
|
|
glob, err := getGlob(srcKey)
|
|
|
|
if err != nil {
|
2018-10-03 08:58:09 -04:00
|
|
|
return errors.Wrap(err, "failed to match resource with metadata")
|
Add Hugo Piper with SCSS support and much more
Before this commit, you would have to use page bundles to do image processing etc. in Hugo.
This commit adds
* A new `/assets` top-level project or theme dir (configurable via `assetDir`)
* A new template func, `resources.Get` which can be used to "get a resource" that can be further processed.
This means that you can now do this in your templates (or shortcodes):
```bash
{{ $sunset := (resources.Get "images/sunset.jpg").Fill "300x200" }}
```
This also adds a new `extended` build tag that enables powerful SCSS/SASS support with source maps. To compile this from source, you will also need a C compiler installed:
```
HUGO_BUILD_TAGS=extended mage install
```
Note that you can use output of the SCSS processing later in a non-SCSSS-enabled Hugo.
The `SCSS` processor is a _Resource transformation step_ and it can be chained with the many others in a pipeline:
```bash
{{ $css := resources.Get "styles.scss" | resources.ToCSS | resources.PostCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
The transformation funcs above have aliases, so it can be shortened to:
```bash
{{ $css := resources.Get "styles.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Digest }}" media="screen">
```
A quick tip would be to avoid the fingerprinting part, and possibly also the not-superfast `postCSS` when you're doing development, as it allows Hugo to be smarter about the rebuilding.
Documentation will follow, but have a look at the demo repo in https://github.com/bep/hugo-sass-test
New functions to create `Resource` objects:
* `resources.Get` (see above)
* `resources.FromString`: Create a Resource from a string.
New `Resource` transformation funcs:
* `resources.ToCSS`: Compile `SCSS` or `SASS` into `CSS`.
* `resources.PostCSS`: Process your CSS with PostCSS. Config file support (project or theme or passed as an option).
* `resources.Minify`: Currently supports `css`, `js`, `json`, `html`, `svg`, `xml`.
* `resources.Fingerprint`: Creates a fingerprinted version of the given Resource with Subresource Integrity..
* `resources.Concat`: Concatenates a list of Resource objects. Think of this as a poor man's bundler.
* `resources.ExecuteAsTemplate`: Parses and executes the given Resource and data context (e.g. .Site) as a Go template.
Fixes #4381
Fixes #4903
Fixes #4858
2018-02-20 04:02:14 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
match := glob.Match(resourceSrcKey)
|
|
|
|
|
|
|
|
if match {
|
|
|
|
if !nameSet {
|
|
|
|
name, found := meta["name"]
|
|
|
|
if found {
|
|
|
|
name := cast.ToString(name)
|
|
|
|
if !nameCounterFound {
|
|
|
|
nameCounterFound = strings.Contains(name, counterPlaceHolder)
|
|
|
|
}
|
|
|
|
if nameCounterFound && nameCounter == 0 {
|
|
|
|
counterKey := "name_" + srcKey
|
|
|
|
nameCounter = counters[counterKey] + 1
|
|
|
|
counters[counterKey] = nameCounter
|
|
|
|
}
|
|
|
|
|
|
|
|
ma.setName(replaceResourcePlaceholders(name, nameCounter))
|
|
|
|
nameSet = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if !titleSet {
|
|
|
|
title, found := meta["title"]
|
|
|
|
if found {
|
|
|
|
title := cast.ToString(title)
|
|
|
|
if !titleCounterFound {
|
|
|
|
titleCounterFound = strings.Contains(title, counterPlaceHolder)
|
|
|
|
}
|
|
|
|
if titleCounterFound && titleCounter == 0 {
|
|
|
|
counterKey := "title_" + srcKey
|
|
|
|
titleCounter = counters[counterKey] + 1
|
|
|
|
counters[counterKey] = titleCounter
|
|
|
|
}
|
|
|
|
ma.setTitle((replaceResourcePlaceholders(title, titleCounter)))
|
|
|
|
titleSet = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
params, found := meta["params"]
|
|
|
|
if found {
|
|
|
|
m := cast.ToStringMap(params)
|
|
|
|
// Needed for case insensitive fetching of params values
|
|
|
|
maps.ToLower(m)
|
|
|
|
ma.updateParams(m)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return nil
|
|
|
|
}
|
|
|
|
|
|
|
|
func replaceResourcePlaceholders(in string, counter int) string {
|
|
|
|
return strings.Replace(in, counterPlaceHolder, strconv.Itoa(counter), -1)
|
|
|
|
}
|