Merge commit 'ed8bf081fdbf336e026517b7e1b123c039014ab5'

This commit is contained in:
Bjørn Erik Pedersen 2018-04-02 08:53:34 +02:00
commit 558825cc20
No known key found for this signature in database
GPG key ID: 330E6E2BD4859D8F
18 changed files with 313 additions and 100 deletions

View file

@ -22,8 +22,7 @@ pygmentsCodeFences = true
pygmentsOptions = ""
# Use the Chroma stylesheet
# TODO(bep) build new CSS when we have picked a new style.
pygmentsUseClasses = false
pygmentsUseClasses = true
pygmentsUseClassic = false
# See https://help.farbox.com/pygments.html

View file

@ -103,6 +103,20 @@ But you can get it by `.Site.GetPage`. Here is an example:
{{ end }}
```
_In this example, we are assuming the `some-headless-bundle` to be a headless
bundle containing one or more **page** resources whose `.Name` matches
`"author*"`._
Explanation of the above example:
1. Get the `some-headless-bundle` Page "object".
2. Collect a *slice* of resources in this *Page Bundle* that matches
`"author*"` using `.Resources.Match`.
3. Loop through that *slice* of nested pages, and output their `.Title` and
`.Content`.
---
A leaf bundle can be made headless by adding below in the Front Matter
(in the `index.md`):

View file

@ -62,7 +62,7 @@ func GetTitleFunc(style string) func(s string) string {
{{< / highlight >}}
## Configure Syntax Hightlighter
## Configure Syntax Highlighter
To make the transition from Pygments to Chroma seamless, they share a common set of configuration options:
pygmentsOptions

View file

@ -10,7 +10,7 @@ menu:
docs:
parent: "functions"
keywords: [sections,lists,indexes]
signature: [".GetPage TYPE PATH"]
signature: [".GetPage KIND PATH"]
workson: []
hugoversion:
relatedfuncs: []
@ -18,29 +18,33 @@ deprecated: false
aliases: []
---
Every `Page` has a `Kind` attribute that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
Every `Page` has a [`Kind` attribute][page_kinds] that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
`.GetPage` looks up a page of a given `Kind` and `path`.
`.GetPage` returns a page of a given `Kind` and `path`.
{{% note %}}
If the `path` is `"foo/bar.md"`, it can be written as exactly that, or broken up
into multiple strings as `"foo" "bar.md"`.
{{% /note %}}
```
{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}
```
This method wil return `nil` when no page could be found, so the above will not print anything if the blog section isn't found.
This method wil return `nil` when no page could be found, so the above will not print anything if the blog section is not found.
For a regular page:
```
{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
```
Note that the path can also be supplied like this:
For a regular page (whose `Kind` is `page`):
```
{{ with .Site.GetPage "page" "blog/my-post.md" }}{{ .Title }}{{ end }}
```
The valid page kinds are: *page, home, section, taxonomy and taxonomyTerm.*
Note that the `path` can also be supplied like this, where the slash-separated
path elements are added as separate strings:
```
{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
```
## `.GetPage` Example
@ -53,13 +57,26 @@ This code snippet---in the form of a [partial template][partials]---allows you t
{{< code file="grab-top-two-tags.html" >}}
<ul class="most-popular-tags">
{{ $t := $.Site.GetPage "taxonomyTerm" "tags" }}
{{ $t := .Site.GetPage "taxonomyTerm" "tags" }}
{{ range first 2 $t.Data.Terms.ByCount }}
<li>{{ . }}</li>
{{ end }}
</ul>
{{< /code >}}
## `.GetPage` on Page Bundles
If the page retrieved by `.GetPage` is a [Leaf Bundle][leaf_bundle], and you
need to get the nested _**page** resources_ in that, you will need to use the
methods in `.Resources` as explained in the [Page Resources][page_resources]
section.
See the [Headless Bundle][headless_bundle] documentation for an example.
[partials]: /templates/partials/
[taxonomy]: /content-management/taxonomies/
[page_kinds]: /templates/section-templates/#page-kinds
[leaf_bundle]: /content-management/page-bundles/#leaf-bundles
[headless_bundle]: /content-management/page-bundles/#headless-bundle
[page_resources]: /content-management/page-resources/

View file

@ -0,0 +1,75 @@
---
title: Code Toggle
description: Code Toggle tryout and showcase.
date: 2018-03-16
categories: [getting started,fundamentals]
keywords: [configuration,toml,yaml,json]
weight: 60
sections_weight: 60
draft: false
toc: true
---
## The Config Toggler!
This is an exemple for the Config Toggle shortcode.
Its purpose is to let users choose a Config language by clicking on its corresponding tab. Upon doing so, every Code toggler on the page will be switched to the target language. Also, target language will be saved in user's `localStorage` so when they go to a different pages, Code Toggler display their last "toggled" config language.
## That Congig Toggler
{{< code-toggle file="config">}}
baseURL: "https://yoursite.example.com/"
title: "My Hugo Site"
footnoteReturnLinkContents: "↩"
permalinks:
post: /:year/:month/:title/
params:
Subtitle: "Hugo is Absurdly Fast!"
AuthorName: "Jon Doe"
GitHubUser: "spf13"
ListOfFoo:
- "foo1"
- "foo2"
SidebarRecentLimit: 5
{{< /code-toggle >}}
## Another Config Toggler!
{{< code-toggle file="theme">}}
# theme.toml template for a Hugo theme
name = "Hugo Theme"
license = "MIT"
licenselink = "https://github.com/budparr/gohugo.io/blob/master/LICENSE.md"
description = ""
homepage = "https://github.com/budparr/gohugo.io"
tags = ["website"]
features = ["", ""]
min_version = 0.18
[author]
name = "Bud Parr"
homepage = "https://github.com/budparr"
{{< /code-toggle >}}
## Two regular code blocks
{{< code file="bf-config.toml" >}}
[blackfriday]
angledQuotes = true
fractions = false
plainIDAnchors = true
extensions = ["hardLineBreak"]
{{< /code >}}
{{< code file="bf-config.yml" >}}
blackfriday:
angledQuotes: true
fractions: false
plainIDAnchors: true
extensions:
- hardLineBreak
{{< /code >}}

View file

@ -202,7 +202,7 @@ summaryLength (70)
: The length of text to show in a [`.Summary`](/content-management/summaries/#hugo-defined-automatic-summary-splitting).
taxonomies
: See [Configure Taxonomies](content-management/taxonomies#configure-taxonomies).
: See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies).
theme ("")
: Theme to use (located by default in `/themes/THEMENAME/`).
@ -214,7 +214,7 @@ title ("")
: Site title.
uglyURLs (false)
: When enabled, creates URL on the form `/filename.html` instead of `/filename/`.
: When enabled, creates URL of the form `/filename.html` instead of `/filename/`.
verbose (false)
: Enable verbose output.
@ -249,8 +249,25 @@ Similar to the template [lookup order][], Hugo has a default set of rules for se
In your `config` file, you can direct Hugo as to how you want your website rendered, control your website's menus, and arbitrarily define site-wide parameters specific to your project.
## YAML Configuration
{{< code file="config.yml">}}
baseURL: "https://yoursite.example.com/"
title: "My Hugo Site"
footnoteReturnLinkContents: "↩"
permalinks:
post: /:year/:month/:title/
params:
Subtitle: "Hugo is Absurdly Fast!"
AuthorName: "Jon Doe"
GitHubUser: "spf13"
ListOfFoo:
- "foo1"
- "foo2"
SidebarRecentLimit: 5
{{< /code >}}
The following is a typical example of a YAML configuration file. The values nested under `params:` will populate the [`.Site.Params`][] variable for use in [templates][]:
{{< code file="config.yml">}}

View file

@ -20,14 +20,6 @@ wip: false
aliases: [/tutorials/hosting-on-gitlab/]
---
{{% warning %}}
GitLab has temporarily turned off custom domains support because of a security issue. The plan is to re-enable it after the 20th of February.
For more information:
https://about.gitlab.com/2018/02/05/gitlab-pages-custom-domain-validation/
{{% /warning %}}
{{< todo >}}Remove the above when fixed.{{< /todo >}}
[GitLab](https://gitlab.com/) makes it incredibly easy to build, deploy, and host your Hugo website via their free GitLab Pages service, which provides [native support for Hugo, as well as numerous other static site generators](https://gitlab.com/pages/hugo).
## Assumptions

View file

@ -118,7 +118,7 @@ Note the use of the [`markdownify` template function][markdownify]. This will se
## Data-Driven Content
In addition to the [data files](/extras/datafiles/) feature, Hugo also a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
In addition to the [data files](/extras/datafiles/) feature, Hugo also has a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
Data-driven content currently consists of two functions, `getJSON` and `getCSV`, which are available in all template files.

View file

@ -17,7 +17,7 @@ toc: true
---
{{% note %}}
The example site used below is from https://github.com/gohugoio/hugo/examples/blog
The example site used below is from https://github.com/gohugoio/hugo/tree/master/examples/blog
{{% /note %}}
## Template Metrics

View file

@ -0,0 +1,24 @@
{{ $langs := (slice "yaml" "toml" "json") }}
<div class="code relative" {{ with .Get "file" }}id="{{ . | urlize}}"{{ end }}>
<div class="code-nav flex flex-nowrap items-stretch">
{{- with .Get "file" -}}
<div class="san-serif f6 dib lh-solid pl2 pv2 mr2">{{ . }}.</div>
{{- end -}}
{{ range $langs }}
<button data-toggle-tab="{{ . }}" class="tab-button {{ cond (eq . "yaml") "active" ""}} ba san-serif f6 dib lh-solid ph2 pv2">{{ . }}</button>&nbsp;
{{ end }}
</div>
<div class="tab-content">
{{ range $langs }}
<div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" ""}}">
{{ highlight ($.Inner | transform.Remarshal . | safeHTML) . ""}}
</div>
{{ if ne ($.Get "copy") "false" }}
<button class="needs-js copy copy-toggle bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button">
</button>
{{/* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
{{end}}
{{ end }}
</div>
</div>

View file

@ -1,67 +1,65 @@
/* Background */ .chroma { background-color: #f0f0f0 }
/* Error */ .chroma .err { }
/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #007020 }
/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #902000 }
/* NameAttribute */ .chroma .na { color: #4070a0 }
/* NameBuiltin */ .chroma .nb { color: #007020 }
/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
/* NameConstant */ .chroma .no { color: #60add5 }
/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
/* NameException */ .chroma .ne { color: #007020 }
/* NameFunction */ .chroma .nf { color: #06287e }
/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
/* NameVariable */ .chroma .nv { color: #bb60d5 }
/* LiteralString */ .chroma .s { color: #4070a0 }
/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
/* LiteralStringRegex */ .chroma .sr { color: #235388 }
/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
/* LiteralNumber */ .chroma .m { color: #40a070 }
/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
/* Operator */ .chroma .o { color: #666666 }
/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
/* CommentPreproc */ .chroma .cp { color: #007020 }
/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
/* GenericDeleted */ .chroma .gd { color: #a00000 }
/* Background */ .chroma { background-color: #ffffff }
/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .k { font-weight: bold }
/* KeywordConstant */ .chroma .kc { font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { font-weight: bold }
/* KeywordNamespace */ .chroma .kn { font-weight: bold }
/* KeywordPseudo */ .chroma .kp { font-weight: bold }
/* KeywordReserved */ .chroma .kr { font-weight: bold }
/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
/* NameAttribute */ .chroma .na { color: #008080 }
/* NameBuiltin */ .chroma .nb { color: #999999 }
/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
/* NameConstant */ .chroma .no { color: #008080 }
/* NameEntity */ .chroma .ni { color: #800080 }
/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
/* NameNamespace */ .chroma .nn { color: #555555 }
/* NameTag */ .chroma .nt { color: #000080 }
/* NameVariable */ .chroma .nv { color: #008080 }
/* LiteralString */ .chroma .s { color: #bb8844 }
/* LiteralStringAffix */ .chroma .sa { color: #bb8844 }
/* LiteralStringBacktick */ .chroma .sb { color: #bb8844 }
/* LiteralStringChar */ .chroma .sc { color: #bb8844 }
/* LiteralStringDelimiter */ .chroma .dl { color: #bb8844 }
/* LiteralStringDoc */ .chroma .sd { color: #bb8844 }
/* LiteralStringDouble */ .chroma .s2 { color: #bb8844 }
/* LiteralStringEscape */ .chroma .se { color: #bb8844 }
/* LiteralStringHeredoc */ .chroma .sh { color: #bb8844 }
/* LiteralStringInterpol */ .chroma .si { color: #bb8844 }
/* LiteralStringOther */ .chroma .sx { color: #bb8844 }
/* LiteralStringRegex */ .chroma .sr { color: #808000 }
/* LiteralStringSingle */ .chroma .s1 { color: #bb8844 }
/* LiteralStringSymbol */ .chroma .ss { color: #bb8844 }
/* LiteralNumber */ .chroma .m { color: #009999 }
/* LiteralNumberBin */ .chroma .mb { color: #009999 }
/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
/* LiteralNumberHex */ .chroma .mh { color: #009999 }
/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
/* LiteralNumberOct */ .chroma .mo { color: #009999 }
/* Operator */ .chroma .o { font-weight: bold }
/* OperatorWord */ .chroma .ow { font-weight: bold }
/* Comment */ .chroma .c { color: #999988; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold }
/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold }
/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ff0000 }
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #00a000 }
/* GenericError */ .chroma .gr { color: #aa0000 }
/* GenericHeading */ .chroma .gh { color: #999999 }
/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
/* GenericPrompt */ .chroma .gp { color: #555555 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
/* GenericTraceback */ .chroma .gt { color: #0044dd }
/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
/* GenericTraceback */ .chroma .gt { color: #aa0000 }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }

View file

@ -0,0 +1,30 @@
.tab-button{
margin-bottom:1px;
position: relative;
z-index: 1;
color:#333;
border-color:#ccc;
outline: none;
background-color:white;
}
.tab-pane .chroma{
background:none;
padding:0;
}
.tab-button.active{
border-bottom-color:#f3f4f4;
background-color: #f4f4f4;
}
.tab-content .tab-pane{
display: none;
}
.tab-content .tab-pane.active{
display: block;
}
/* Treatment of copy buttons inside a tab module */
.tab-content .copy, .tab-content .copied{
display: none;
}
.tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{
display: block;
}

View file

@ -13,6 +13,7 @@
@import '_algolia';
@import '_carousel';
@import '_code';
@import '_tabs';
@import '_color-scheme';
@import '_columns';
@import '_content';

View file

@ -1,6 +1,9 @@
var Clipboard = require('clipboard/dist/clipboard.js');
new Clipboard('.copy', {
target: function(trigger) {
if(trigger.classList.contains('copy-toggle')){
return trigger.previousElementSibling;
}
return trigger.nextElementSibling;
}
}).on('success', function(e) {

View file

@ -8,7 +8,7 @@ import './lazysizes.js'
import './menutoggle.js'
import './scrolldir.js'
import './smoothscroll.js'
import './tabs.js'
import './nojs.js'

View file

@ -0,0 +1,43 @@
/**
* Scripts which manages Code Toggle tabs.
*/
var i;
// store tabs variable
var allTabs = document.querySelectorAll("[data-toggle-tab]");
var allPanes = document.querySelectorAll("[data-pane]");
function toggleTabs(event) {
if(event.target){
event.preventDefault();
var clickedTab = event.currentTarget;
var targetKey = clickedTab.getAttribute("data-toggle-tab")
}else {
var targetKey = event
}
// We store the config language selected in users' localStorage
if(window.localStorage){
window.localStorage.setItem("configLangPref", targetKey)
}
var selectedTabs = document.querySelectorAll("[data-toggle-tab='" + targetKey + "']");
var selectedPanes = document.querySelectorAll("[data-pane='" + targetKey + "']");
for (var i = 0; i < allTabs.length; i++) {
allTabs[i].classList.remove("active");
allPanes[i].classList.remove("active");
}
for (var i = 0; i < selectedTabs.length; i++) {
selectedTabs[i].classList.add("active");
selectedPanes[i].classList.add("active");
}
}
for (i = 0; i < allTabs.length; i++) {
allTabs[i].addEventListener("click", toggleTabs)
}
// Upon page load, if user has a prefered language in its localStorage, tabs are set to it.
if(window.localStorage.getItem('configLangPref')) {
toggleTabs(window.localStorage.getItem('configLangPref'))
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long