diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js index daffbcf..0b9cffb 100644 --- a/_src/_assets/javascripts/page-getstarted.js +++ b/_src/_assets/javascripts/page-getstarted.js @@ -1,5 +1,6 @@ //=require gumshoe/dist/js/gumshoe.js +//=include bigchain/tab.js //=include bigchain/smoothscroll.js //=include bigchain/newsletter.js @@ -55,12 +56,32 @@ window.addEventListener('DOMContentLoaded', function domload(event) { const postButton = document.getElementById('post') const messageInput = document.getElementById('message') - // quick form validation + // nasty jquery inside of here, YOLO + $(".highlight code:contains('Blockchain all the things!')").html(function(_, html) { + return html.replace(/(Blockchain all the things!)/g, '$1'); + }) + + const codeMessages = document.querySelectorAll('.code-example__message') + + function updateMessage(content) { + for (var codeMessage of codeMessages) { + codeMessage.textContent = content + } + } + // empty default message + updateMessage('') + + // quick form validation, live update code example with user input messageInput.addEventListener('input', function() { if (messageInput.value === '') { postButton.setAttribute('disabled', '') + // empty message again + updateMessage('') } else { postButton.removeAttribute('disabled') + + // update code message + updateMessage(messageInput.value) } }) diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss index 2748ba2..f8bcca1 100644 --- a/_src/_assets/styles/_page-getstarted.scss +++ b/_src/_assets/styles/_page-getstarted.scss @@ -71,6 +71,48 @@ font-size: $font-size-base; } +.code-example { + @include transition; + opacity: .5; + + &:hover { + opacity: 1; + } + + .nav-link, + pre { + font-size: $font-size-xs; + } + + .nav-tabs { + border-bottom-color: $gray-light; + } + + .nav-link { + padding-top: $spacer / 4; + padding-bottom: $spacer / 4; + margin-bottom: -2px; + + &:hover, + &:focus { + background: none; + } + + &.active { + border-bottom: 2px solid $gray-light; + } + } + + pre { + background: none; + padding: $spacer * 1.5 0; + } +} + +.code-example__message { + font-weight: $font-weight-bold; +} + .section-title--numbered { span { text-align: center; diff --git a/_src/getstarted.html b/_src/getstarted.html index 84faa32..7863331 100644 --- a/_src/getstarted.html +++ b/_src/getstarted.html @@ -43,6 +43,76 @@ redirect_from: + + +