From a7d81993d5650fe0f4027ef7d65b2daad8b46a36 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 10 Aug 2021 08:39:19 -0400 Subject: [PATCH] add codepen button to code blocks --- docs/assets/plugins/code-block/code-block.css | 79 +++++++++++++------ docs/assets/plugins/code-block/code-block.js | 75 +++++++++++++++--- docs/assets/plugins/metadata/metadata.js | 3 + 3 files changed, 122 insertions(+), 35 deletions(-) diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index aa4fc287..f3eb7624 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -56,7 +56,7 @@ box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)), 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha)); background-color: rgb(var(--sl-color-primary-50)); - color: rgb(var(--sl-color-primary-500)); + color: rgb(var(--sl-color-primary-600)); z-index: 2; } @@ -112,46 +112,81 @@ display: block; } +.code-block__buttons { + position: relative; + border: solid 1px rgb(var(--sl-color-neutral-200)); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + display: flex; +} + +.code-block__button { + flex: 0 0 auto; + height: 2.5rem; + min-width: 2.5rem; + border: none; + border-radius: 0; + background: rgb(var(--sl-color-neutral-1000)); + font: inherit; + font-size: 0.875rem; + color: rgb(var(--sl-color-neutral-600)); + padding: 0 0.5rem; + cursor: pointer; + transition: none; +} + +.code-block__button--codepen { + width: 5rem; +} + +.code-block__button:first-of-type { + border-bottom-left-radius: 3px; +} + +.code-block__button:last-of-type { + border-bottom-right-radius: 3px; +} + +.code-block__button:hover, +.code-block__button:active { + box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)); + background-color: rgb(var(--sl-color-primary-50)); + color: rgb(var(--sl-color-primary-600)); + z-index: 1; +} + +.code-block__button:focus { + outline: none; + color: rgb(var(--sl-color-primary-600)); + border-color: rgb(var(--sl-color-primary-400)); + background-color: rgb(var(--sl-color-primary-50)); + box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)), + 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha)); + z-index: 2; +} + .code-block__toggle { position: relative; z-index: 1; display: flex; + flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; height: 2.5rem; - border: solid 1px rgb(var(--sl-color-neutral-200)); - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - background: rgb(var(--sl-color-neutral-1000)); font: inherit; - font-size: 0.875rem; + font-size: 0.7rem; + font-weight: 500; color: rgb(var(--sl-color-neutral-600)); cursor: pointer; transition: 250ms background-color; -webkit-appearance: none; } -.code-block__toggle:hover, -.code-block__toggle:active { - border-color: rgb(var(--sl-color-primary-400)); - background-color: rgb(var(--sl-color-primary-50)); - color: rgb(var(--sl-color-primary-500)); -} - -.code-block__toggle:focus { - outline: none; - border-color: rgb(var(--sl-color-primary-400)); - background-color: rgb(var(--sl-color-primary-50)); - color: rgb(var(--sl-color-primary-500)); - box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha)); -} - .code-block__toggle svg { width: 1em; height: 1em; margin-left: 0.25rem; - transition: 250ms transform; } .code-block--expanded .code-block__toggle svg { diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js index c5f0b2d7..5434a331 100644 --- a/docs/assets/plugins/code-block/code-block.js +++ b/docs/assets/plugins/code-block/code-block.js @@ -51,19 +51,27 @@ ${pre.outerHTML} - +
+ + + +
`; @@ -136,6 +144,47 @@ }); }); + // Open in CodePen + document.addEventListener('click', event => { + const button = event.target.closest('button'); + + if (button?.classList.contains('code-block__button--codepen')) { + const codeBlock = button.closest('.code-block'); + const html = codeBlock.querySelector('.code-block__source > code').textContent; + const version = sessionStorage.getItem('sl-version'); + + const form = document.createElement('form'); + form.action = 'https://codepen.io/pen/define'; + form.method = 'POST'; + form.target = '_blank'; + + // Docs: https://blog.codepen.io/documentation/prefill/ + const data = { + title: '', + description: '', + tags: ['shoelace', 'web components'], + editors: '100', + head: ``, + css_external: `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/light.css`, + js_external: ``, + js_module: true, + html: html, + css: `body {\n font: 16px sans-serif;\n}`, + js: `import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js';` + }; + + const input = document.createElement('input'); + input.type = 'hidden'; + input.name = 'data'; + input.value = JSON.stringify(data); + form.append(input); + + document.body.append(form); + form.submit(); + form.remove(); + } + }); + // Expand and collapse code blocks document.addEventListener('click', event => { const toggle = event.target.closest('.code-block__toggle'); diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js index 852d510e..2e232d74 100644 --- a/docs/assets/plugins/metadata/metadata.js +++ b/docs/assets/plugins/metadata/metadata.js @@ -282,6 +282,9 @@ version.textContent = isDev ? 'Development' : isNext ? 'Next' : metadata.package.version; target.appendChild(version); + // Store version for reuse + sessionStorage.setItem('sl-version', metadata.package.version); + // Add repo buttons const buttons = document.createElement('div'); buttons.classList.add('sidebar-buttons');