Add code toggler

Closes #363

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

content/getting-started/configuration.md

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

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>

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

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

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

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'
 
 

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