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 2e195facf..f6d4b63a8 100644 --- a/content/getting-started/configuration.md +++ b/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">}} 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/_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","