diff options
Diffstat (limited to 'smoke/docs-main/src/components/TabBox.astro')
| -rw-r--r-- | smoke/docs-main/src/components/TabBox.astro | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/smoke/docs-main/src/components/TabBox.astro b/smoke/docs-main/src/components/TabBox.astro new file mode 100644 index 000000000..a5d4bc4ae --- /dev/null +++ b/smoke/docs-main/src/components/TabBox.astro @@ -0,0 +1,104 @@ +--- +import { Markdown, Code, Prism } from 'astro/components'; +--- +<style> + .hidden { + display: none; + } + .active { + background-color: var(--theme-accent); + color: white; + font-weight: bold; + border-top-left-radius: 1em; + border-top-right-radius: 1em; + padding: 3em; + } + .tab-bar { + background-color: var(--theme-divider); + display:flex; + justify-content: flex-start; + margin-bottom:0; + padding: 0.5em; + padding-bottom: 0; + border-top-left-radius: 1em; + border-top-right-radius: 1em; + + } + pre { + border-radius: 0; + } + .code { + margin-top:0; + padding-left: 0.5em; + max-width: 100vw; + overflow: hidden; + background-color: hsla(217, 19%, 27%, 1); + } + .toggle { + padding: 0.5em; + padding-left: 1em; + padding-bottom: 0; + cursor: pointer; + width: 20%; + + } +</style> + + + +<div class="TabBox"> + <div class="tab-bar"> + <div id="install-npm" class="active toggle"><h5>npm</h5></div> + <div id="install-yarn" class="toggle"><h5>yarn</h5></div> + </div> + <div id="npm"> + <Code lang="bash" code={`# prerequisite: check that Node.js is 14.15.0+, or 16+ +node --version + +# Make a new project directory, and navigate into it +mkdir my-astro-project && cd $_ + +# prepare for liftoff... +npm init astro + +# install dependencies +npm install + +# start developing! +npm run dev`}/ > + </div> + <div id="yarn" class="hidden"> + <Code lang="bash" code={`# prerequisite: check that Node.js is 14.15.0+, or 16+ +node --version + +# Make a new project directory, and navigate into it +mkdir my-astro-project && cd $_ + +# prepare for liftoff... +yarn create astro + +# install dependencies +yarn install + +# start developing! +yarn start`}/> + </div> +</div> + +<script type="module"> +document.getElementById("install-npm").addEventListener("click", () => { + document.getElementById("npm").classList.remove("hidden"); + document.getElementById("yarn").classList.add("hidden"); + document.getElementById("install-npm").classList.add("active"); + document.getElementById("install-yarn").classList.remove("active"); + console.log("click"); + }); + + document.getElementById("install-yarn").addEventListener("click", () => { + document.getElementById("yarn").classList.remove("hidden"); + document.getElementById("npm").classList.add("hidden"); + document.getElementById("install-yarn").classList.add("active"); + document.getElementById("install-npm").classList.remove("active"); + console.log("click"); + }); + </script>
\ No newline at end of file |