From ed8bf081fdbf336e026517b7e1b123c039014ab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Mon, 2 Apr 2018 08:53:34 +0200 Subject: [PATCH] Squashed 'docs/' changes from 3068989b9..d9c8fc220 d9c8fc220 Rebuild Chroma CSS a9168b106 Adds missing word ebaa172af Remove note about enabling custom GitLab domains 2ef3918b2 Add code toggler 41878b6ca Clarify the use of .GetPage with page bundles ffcb26270 Fix broken link for configuration.md 1e72e2b3e Fixed typo in heading - Hightlighter 72b2db77c Change "on the form" to "of the form" e15e6966f Fix example GitHub url git-subtree-dir: docs git-subtree-split: d9c8fc220710fe2bdcc2c61afd9e40e7233953cf --- config.toml | 3 +- content/content-management/page-bundles.md | 14 ++ .../content-management/syntax-highlighting.md | 2 +- content/functions/GetPage.md | 45 +++++-- content/getting-started/code-toggle.md | 75 +++++++++++ content/getting-started/configuration.md | 21 ++- .../hosting-on-gitlab.md | 8 -- content/templates/data-templates.md | 2 +- content/troubleshooting/build-performance.md | 2 +- .../layouts/shortcodes/code-toggle.html | 24 ++++ themes/gohugoioTheme/src/css/_chroma.css | 124 +++++++++--------- themes/gohugoioTheme/src/css/_tabs.css | 30 +++++ themes/gohugoioTheme/src/css/main.css | 1 + themes/gohugoioTheme/src/js/clipboardjs.js | 3 + themes/gohugoioTheme/src/js/main.js | 2 +- themes/gohugoioTheme/src/js/tabs.js | 43 ++++++ .../gohugoioTheme/static/dist/app.bundle.js | 12 +- themes/gohugoioTheme/static/dist/main.css | 2 +- 18 files changed, 313 insertions(+), 100 deletions(-) create mode 100644 content/getting-started/code-toggle.md create mode 100644 themes/gohugoioTheme/layouts/shortcodes/code-toggle.html create mode 100644 themes/gohugoioTheme/src/css/_tabs.css create mode 100644 themes/gohugoioTheme/src/js/tabs.js diff --git a/config.toml b/config.toml index c81890ecf..653e61f7b 100644 --- a/config.toml +++ b/config.toml @@ -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 diff --git a/content/content-management/page-bundles.md b/content/content-management/page-bundles.md index f497a59b2..09aeae8ea 100644 --- a/content/content-management/page-bundles.md +++ b/content/content-management/page-bundles.md @@ -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`): diff --git a/content/content-management/syntax-highlighting.md b/content/content-management/syntax-highlighting.md index ffb430bdb..67d443fd4 100644 --- a/content/content-management/syntax-highlighting.md +++ b/content/content-management/syntax-highlighting.md @@ -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 diff --git a/content/functions/GetPage.md b/content/functions/GetPage.md index 669589c15..1a8a51c13 100644 --- a/content/functions/GetPage.md +++ b/content/functions/GetPage.md @@ -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" >}} {{< /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/ diff --git a/content/getting-started/code-toggle.md b/content/getting-started/code-toggle.md new file mode 100644 index 000000000..ae3e3e84b --- /dev/null +++ b/content/getting-started/code-toggle.md @@ -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 >}} \ No newline at end of file diff --git a/content/getting-started/configuration.md b/content/getting-started/configuration.md index ed896fb6a..f6d4b63a8 100644 --- a/content/getting-started/configuration.md +++ b/content/getting-started/configuration.md @@ -198,7 +198,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/`). @@ -210,7 +210,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. @@ -245,8 +245,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">}} diff --git a/content/hosting-and-deployment/hosting-on-gitlab.md b/content/hosting-and-deployment/hosting-on-gitlab.md index 9c4a8978a..c38908cae 100644 --- a/content/hosting-and-deployment/hosting-on-gitlab.md +++ b/content/hosting-and-deployment/hosting-on-gitlab.md @@ -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 diff --git a/content/templates/data-templates.md b/content/templates/data-templates.md index 385bd10a8..c0b2b5145 100644 --- a/content/templates/data-templates.md +++ b/content/templates/data-templates.md @@ -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. diff --git a/content/troubleshooting/build-performance.md b/content/troubleshooting/build-performance.md index fa8929c73..bc4d30d54 100644 --- a/content/troubleshooting/build-performance.md +++ b/content/troubleshooting/build-performance.md @@ -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 diff --git a/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html b/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html new file mode 100644 index 000000000..c695a7aae --- /dev/null +++ b/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html @@ -0,0 +1,24 @@ +{{ $langs := (slice "yaml" "toml" "json") }} +
+
+ {{- with .Get "file" -}} +
{{ . }}.
+ {{- end -}} + {{ range $langs }} +   + {{ end }} +
+
+ {{ range $langs }} +
+ {{ highlight ($.Inner | transform.Remarshal . | safeHTML) . ""}} +
+ {{ if ne ($.Get "copy") "false" }} + + {{/* 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 }} +
+ +
diff --git a/themes/gohugoioTheme/src/css/_chroma.css b/themes/gohugoioTheme/src/css/_chroma.css index b15e07558..d00ea65e6 100644 --- a/themes/gohugoioTheme/src/css/_chroma.css +++ b/themes/gohugoioTheme/src/css/_chroma.css @@ -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 } diff --git a/themes/gohugoioTheme/src/css/_tabs.css b/themes/gohugoioTheme/src/css/_tabs.css new file mode 100644 index 000000000..4ed15b63d --- /dev/null +++ b/themes/gohugoioTheme/src/css/_tabs.css @@ -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; +} \ No newline at end of file diff --git a/themes/gohugoioTheme/src/css/main.css b/themes/gohugoioTheme/src/css/main.css index db474cdfb..a3ad83a0a 100755 --- a/themes/gohugoioTheme/src/css/main.css +++ b/themes/gohugoioTheme/src/css/main.css @@ -13,6 +13,7 @@ @import '_algolia'; @import '_carousel'; @import '_code'; +@import '_tabs'; @import '_color-scheme'; @import '_columns'; @import '_content'; diff --git a/themes/gohugoioTheme/src/js/clipboardjs.js b/themes/gohugoioTheme/src/js/clipboardjs.js index f10f07c81..ffae31c7f 100644 --- a/themes/gohugoioTheme/src/js/clipboardjs.js +++ b/themes/gohugoioTheme/src/js/clipboardjs.js @@ -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) { diff --git a/themes/gohugoioTheme/src/js/main.js b/themes/gohugoioTheme/src/js/main.js index 4ed818478..b6ae53f3c 100755 --- a/themes/gohugoioTheme/src/js/main.js +++ b/themes/gohugoioTheme/src/js/main.js @@ -8,7 +8,7 @@ import './lazysizes.js' import './menutoggle.js' import './scrolldir.js' import './smoothscroll.js' - +import './tabs.js' import './nojs.js' diff --git a/themes/gohugoioTheme/src/js/tabs.js b/themes/gohugoioTheme/src/js/tabs.js new file mode 100644 index 000000000..dd90fdfa4 --- /dev/null +++ b/themes/gohugoioTheme/src/js/tabs.js @@ -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')) +} diff --git a/themes/gohugoioTheme/static/dist/app.bundle.js b/themes/gohugoioTheme/static/dist/app.bundle.js index 6c2fd668b..6391e71e9 100644 --- a/themes/gohugoioTheme/static/dist/app.bundle.js +++ b/themes/gohugoioTheme/static/dist/app.bundle.js @@ -1,22 +1,22 @@ -!function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=10)}([function(t,e,n){"use strict";var r=function(t){var e=document.createElement("a");return e.className="header-link",e.href="#"+t,e.innerHTML=' ',e},i=function(t,e){for(var n=e.getElementsByTagName("h"+t),i=0;i0&&p.parentNode.classList.add("expand")}}catch(t){a=!0,u=t}finally{try{!s&&l.return&&l.return()}finally{if(a)throw u}}}},function(t,e,n){"use strict";n(12)({apiKey:"167e7998590aebda7f9fedcf86bc4a55",indexName:"hugodocs",inputSelector:"#search-input",debug:!0})},function(t,e,n){"use strict";n(13),n(14)},function(t,e,n){"use strict";function r(){for(var t=this.dataset.target.split(" "),e=document.querySelector(".mobilemenu:not(.dn)"),n=document.querySelector(".desktopmenu:not(.dn)"),r=document.querySelector(".desktopmenu:not(.dn)"),i=0;i=0?function(){var t=window.pageYOffset;(t>=i-s||window.innerHeight+t>=document.body.offsetHeight)&&clearInterval(u)}:function(){window.pageYOffset<=(i||0)&&clearInterval(u)};var u=setInterval(a,16)},e=document.querySelectorAll("#TableOfContents ul li a");[].forEach.call(e,function(e){e.addEventListener("click",function(n){n.preventDefault();var r=e.getAttribute("href"),i=document.querySelector(r),o=e.getAttribute("data-speed");i&&t(i,o||500)},!1)})}}()},function(t,e){},function(t,e,n){"use strict";var r=n(9);!function(t){t&&t.__esModule}(r);n(0),n(1),n(2),n(3),n(4),n(5),n(7),n(8),n(6)},function(t,e,n){var r,r;/*! +!function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=11)}([function(t,e,n){"use strict";var r=function(t){var e=document.createElement("a");return e.className="header-link",e.href="#"+t,e.innerHTML=' ',e},i=function(t,e){for(var n=e.getElementsByTagName("h"+t),i=0;i0&&p.parentNode.classList.add("expand")}}catch(t){a=!0,u=t}finally{try{!s&&l.return&&l.return()}finally{if(a)throw u}}}},function(t,e,n){"use strict";n(13)({apiKey:"167e7998590aebda7f9fedcf86bc4a55",indexName:"hugodocs",inputSelector:"#search-input",debug:!0})},function(t,e,n){"use strict";n(14),n(15)},function(t,e,n){"use strict";function r(){for(var t=this.dataset.target.split(" "),e=document.querySelector(".mobilemenu:not(.dn)"),n=document.querySelector(".desktopmenu:not(.dn)"),r=document.querySelector(".desktopmenu:not(.dn)"),i=0;i=0?function(){var t=window.pageYOffset;(t>=i-s||window.innerHeight+t>=document.body.offsetHeight)&&clearInterval(u)}:function(){window.pageYOffset<=(i||0)&&clearInterval(u)};var u=setInterval(a,16)},e=document.querySelectorAll("#TableOfContents ul li a");[].forEach.call(e,function(e){e.addEventListener("click",function(n){n.preventDefault();var r=e.getAttribute("href"),i=document.querySelector(r),o=e.getAttribute("data-speed");i&&t(i,o||500)},!1)})}}()},function(t,e,n){"use strict";function r(t){if(t.target){t.preventDefault();var e=t.currentTarget,n=e.getAttribute("data-toggle-tab")}else var n=t;window.localStorage&&window.localStorage.setItem("configLangPref",n);for(var r=document.querySelectorAll("[data-toggle-tab='"+n+"']"),i=document.querySelectorAll("[data-pane='"+n+"']"),a=0;a0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.container=t.container,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=(0,r.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,r.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":i(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),t}();t.exports=s})},{select:5}],8:[function(e,n,r){!function(i,o){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],o);else if(void 0!==r)o(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var s={exports:{}};o(s,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=s.exports}}(this,function(t,e,n,r){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var c=i(e),l=i(n),h=i(r),f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},p=function(){function t(t,e){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText,this.container="object"===f(t.container)?t.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=(0,h.default)(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new c.default({action:this.action(e),target:this.target(e),text:this.text(e),container:this.container,trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return u("action",t)}},{key:"defaultTarget",value:function(t){var e=u("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return u("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach(function(t){n=n&&!!document.queryCommandSupported(t)}),n}}]),e}(l.default);t.exports=d})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)})},function(t,e,n){/*! docsearch 2.5.2 | © Algolia | github.com/algolia/docsearch */ -!function(e,n){t.exports=n()}("undefined"!=typeof self&&self,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=21)}([function(t,e,n){"use strict";function r(t){return t.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}var i=n(1);t.exports={isArray:null,isFunction:null,isObject:null,bind:null,each:null,map:null,mixin:null,isMsie:function(){return!!/(msie|trident)/i.test(navigator.userAgent)&&navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2]},escapeRegExChars:function(t){return t.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isNumber:function(t){return"number"==typeof t},toStr:function(t){return void 0===t||null===t?"":t+""},cloneDeep:function(t){var e=this.mixin({},t),n=this;return this.each(e,function(t,r){t&&(n.isArray(t)?e[r]=[].concat(t):n.isObject(t)&&(e[r]=n.cloneDeep(t)))}),e},error:function(t){throw new Error(t)},every:function(t,e){var n=!0;return t?(this.each(t,function(r,i){if(!(n=e.call(null,r,i,t)))return!1}),!!n):n},any:function(t,e){var n=!1;return t?(this.each(t,function(r,i){if(e.call(null,r,i,t))return n=!0,!1}),n):n},getUniqueId:function(){var t=0;return function(){return t++}}(),templatify:function(t){if(this.isFunction(t))return t;var e=i.element(t);return"SCRIPT"===e.prop("tagName")?function(){return e.text()}:function(){return String(t)}},defer:function(t){setTimeout(t,0)},noop:function(){},formatPrefix:function(t,e){return e?"":t+"-"},className:function(t,e,n){return(n?"":".")+t+e},escapeHighlightedString:function(t,e,n){e=e||"";var i=document.createElement("div");i.appendChild(document.createTextNode(e)),n=n||"";var o=document.createElement("div");o.appendChild(document.createTextNode(n));var s=document.createElement("div");return s.appendChild(document.createTextNode(t)),s.innerHTML.replace(RegExp(r(i.innerHTML),"g"),e).replace(RegExp(r(o.innerHTML),"g"),n)}}},function(t,e,n){"use strict";t.exports={element:null}},function(t,e){var n=Object.prototype.hasOwnProperty,r=Object.prototype.toString;t.exports=function(t,e,i){if("[object Function]"!==r.call(e))throw new TypeError("iterator must be a function");var o=t.length;if(o===+o)for(var s=0;s was loaded but did not call our provided callback"),JSONPScriptError:i("JSONPScriptError","