Merge commit 'ed8bf081fdbf336e026517b7e1b123c039014ab5'

docs/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 = true
-pygmentsUseClasses = false
 pygmentsUseClassic = false
 
 # See https://help.farbox.com/pygments.html

docs/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`):
 

docs/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

docs/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:
+For a regular page (whose `Kind` is `page`):
-
-```
-{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
-```
-
-Note that the path can also be supplied like this:
 
 ```
 {{ 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>
+    <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/

docs/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 >}}

docs/content/getting-started/configuration.md

@@ -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">}}

docs/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

docs/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.
 

docs/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

docs/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html

@@ -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>

docs/themes/gohugoioTheme/src/css/_chroma.css

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

docs/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;
+}

docs/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';

docs/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) {

docs/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'
 
 

docs/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'))
+}