CodePen Embed - Deploy Docs Commands

Live

This Pen is owned by Simon MacDonald on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"mdYXoEP\",\"auto_save\":true},\"hashid\":\"mdYXoEP\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":75390618,\"user_id\":8358123,\"html\":\"<main>\\n<nav>\\n  Here's where your TOC would go.\\n</nav>\\n<article>\\n  Here are some docs, where you are told how to install something.\\n  <deploy-docs-commands enhanced=\\\"✨\\\">\\n    <deploy-docs-command>\\n      <pre class=\\\"hljs\\\"><code data-language=\\\"bash\\\"><span class=\\\"code-line\\\">npm i --global @begin/deploy</span></code></pre>\\n    </deploy-docs-command>\\n    <deploy-docs-command os=\\\"win\\\" class=\\\"hidden\\\">\\n      <pre class=\\\"hljs hljs-unregistered\\\"><code data-language=\\\"\\\">npm i --global \\\"@begin/deploy\\\"</code></pre>\\n    </deploy-docs-command>\\n  </deploy-docs-commands>\\n  \\n  Then later on down the page you are given further instructions on how to do more stuff. Notice that if you flipped the OS selector switch above it is reflected here in the second code block.\\n\\n  <deploy-docs-commands enhanced=\\\"✨\\\">\\n    <deploy-docs-command>\\n      <pre class=\\\"hljs\\\"><code data-language=\\\"bash\\\"><span class=\\\"code-line\\\">begin deploy</span></code></pre>\\n    </deploy-docs-command>\\n    <deploy-docs-command os=\\\"win\\\" class=\\\"hidden\\\">\\n      <pre class=\\\"hljs hljs-unregistered\\\"><code data-language=\\\"\\\">npx begin deploy</code></pre>\\n    </deploy-docs-command>\\n  </deploy-docs-commands>\\n</article>\\n  </main>\",\"css\":\".hidden {\\n  display: none;\\n}\\n\\narticle {\\n  max-width: 600px;\\n}\\n\\nmain {\\n  display: flex;\\n  gap: 5px;\\n}\\n\\nnav {\\n  max-width: 300px;\\n  background-color: hsl(0deg 0% 50% / 0.125);\\n}\\n\\n\",\"js\":\"/* globals document window HTMLElement SpeechSynthesisUtterance customElements */\\nconst template = document.createElement('template');\\ntemplate.innerHTML = `\\n<style>\\n    :host {\\n      display: block;\\n      margin-block: var(--space-0);\\n    }\\n\\n    .toggle input {\\n      display: none;\\n    }\\n\\n    :host > div {\\n      background-color: hsl(0deg 0% 50% / 0.125);\\n      text-align: end;\\n    }\\n\\n    label {\\n      cursor: pointer;\\n      font-weight: 500;\\n      color: var(--accent);\\n      display: inline-flex;\\n      align-items: center;\\n      gap: clamp(0.4rem, 0.44rem + -0.18vw, 0.27rem);\\n      font-size: clamp(0.83rem, 0.82rem + 0.07vw, 0.89rem);\\n    }\\n\\n    svg {\\n      aspect-ratio: 1 / 1;\\n      height: 1rem;\\n      color: var(--fore);\\n    }\\n\\n    .slider {\\n      width: 32px;\\n      height: 16px;\\n      border-radius: 1rem;\\n      background-color: lightblue;\\n      transform: scale(1);\\n    }\\n\\n    .slider:before {\\n      position: absolute;\\n      width: 14px;\\n      height: 14px;\\n      top: 1px;\\n      bottom: 1px;\\n      left: 1px;\\n      content: '';\\n      background-color: white;\\n      border-radius: 50%;\\n      transition: transform 0.15s ease-in-out;\\n    }\\n\\n    input:checked + .slider:before {\\n      transform: translateX(1rem);\\n    }\\n  </style>\\n\\n  <slot></slot>\\n\\n  <div class='text-end pbs-6 pi-4'>\\n    <label class=\\\"toggle inline-flex gap-5 align-items-center text-1\\\">\\n      <svg id=\\\"icon-apple\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 384 512\\\"><path fill=\\\"currentColor\\\" d=\\\"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\\\"/>\\n      </svg>\\n      <svg id=\\\"icon-linux\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 448 512\\\"><path fill=\\\"currentColor\\\" d=\\\"M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5.2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4.2-.8.7-.6 1.1.3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6.2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5.1-1.3.6-3.4 1.5-3.2 2.9.1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7.1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9.6 7.9 1.2 11.8 1.2 8.1 2.5 15.7.8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1.6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3.4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4.7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6.6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7.8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4.6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1.8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7.4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6.8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1.3-.2.7-.3 1-.5.8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z\\\"/>\\n      </svg>\\n      <input type=\\\"checkbox\\\" name=\\\"toggle-windows\\\" value=\\\"windows\\\" role=\\\"toggle\\\" aria-label=\\\"Toggle Windows\\\" />\\n      <div class=\\\"slider relative round inline-block\\\"></div>\\n      <svg id=\\\"icon-windows\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 448 512\\\"><path fill=\\\"currentColor\\\" d=\\\"M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z\\\"/>\\n      </svg>\\n    </label>\\n  </div>\\n`\\n\\nconst PREFERRED_OS_KEY = 'preferredOs'\\n\\nclass DocsCommands extends HTMLElement {\\n\\n  constructor() {\\n    super();\\n    const shadowRoot = this.attachShadow({ mode: 'open' });\\n    shadowRoot.appendChild(template.content.cloneNode(true));\\n  }\\n\\n  connectedCallback() {\\n    this.winInput = this.shadowRoot.querySelector('input[type=\\\"checkbox\\\"]')\\n    this.codeBlock = this.querySelector('deploy-docs-command:not([os])')\\n    this.winCodeBlock = this.querySelector('deploy-docs-command[os=\\\"win\\\"]')\\n    \\n    this.onOsChange = this.onOsChange.bind(this)\\n    this.onSwitchChange = this.onSwitchChange.bind(this)\\n\\n    const preferredOs = window.localStorage.getItem(PREFERRED_OS_KEY)\\n    this.update(preferredOs === 'win')\\n\\n    this.addEventListener('preferWinChange', this.onOsChange)\\n    this.winInput.addEventListener('change', this.onSwitchChange)\\n  }\\n\\n  disconnectedCallback() {\\n    this.removeEventListener('preferWinChange', this.onOsChange)\\n    this.winInput.removeEventListener('change', this.onSwitchChange)\\n  }\\n\\n  onOsChange(e) {\\n    this.update(e.detail)\\n  }\\n\\n  onSwitchChange(e) {\\n    const preferWin = e.srcElement.checked\\n\\n    if (preferWin) {\\n      window.localStorage.setItem(PREFERRED_OS_KEY, 'win')\\n    } else {\\n      window.localStorage.removeItem(PREFERRED_OS_KEY)\\n    }\\n\\n    const event = new CustomEvent('preferWinChange', { detail: preferWin })\\n    for (const elem of document.querySelectorAll('deploy-docs-commands')) {\\n      elem.dispatchEvent(event)\\n    }\\n  }\\n\\n  update(preferWin) {\\n    this.winInput.checked = preferWin\\n    \\n    if (preferWin) {\\n      this.codeBlock.classList.add('hidden')\\n      this.winCodeBlock.classList.remove('hidden')\\n\\n    } else {\\n      this.winCodeBlock.classList.add('hidden')\\n      this.codeBlock.classList.remove('hidden')\\n    }\\n  }\\n}\\n\\ncustomElements.define('deploy-docs-commands', DocsCommands)\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-06-19T18:35:10.918Z\",\"updated_at\":\"2024-06-21T19:53:42.207Z\",\"title\":\"Deploy Docs Commands\",\"description\":\"\",\"slug_hash\":\"mdYXoEP\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"019031c8-06c6-7c70-b3dd-83728aeedaa9\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-82f064ba69873842185f.js"}