gardenjs 0.9.0

package/src/client/GardenApp.svelte

@@ -0,0 +1,173 @@
+<script>
+  import Stage from './components/stage/Stage.svelte'
+  import Sidebar from './components/sidebar/Sidebar.svelte'
+  import Topbar from './components/topbar/Topbar.svelte'
+  import {
+    updateStage,
+    stageStyle,
+    stageSize,
+    stageHeight,
+    stageMaxHeight,
+    panelExpanded,
+    landscape,
+    setThemes,
+    selectTheme,
+    themes,
+    activeTheme,
+    toggleExpandPanel,
+    updateStageHeight,
+    updateStageMaxHeight,
+  } from './logic/stage.js'
+  import {
+    nodes,
+    rootNodesExpanded,
+    toggleFolder,
+    toggleRootFolders,
+    filterNavTree,
+    updateFilter,
+    updateNavTree,
+    updateSelectedComponent,
+  } from './logic/navTree.js'
+  import {
+    initRouting,
+    das,
+    componentName,
+    selectedExample,
+    updateDasMap,
+    currentRoute,
+  } from './logic/routing.js'
+
+  let baseurl = '/garden'
+  export let routes
+  export let navTree
+  export let dasMap
+  export let config
+  $: expressbaseurl = `${window.location.protocol}//${
+    window.location.hostname
+  }:${config.serverport + 1}/`
+
+  $: updateNavTree(navTree)
+  $: {
+    if (routes && dasMap) initRouting(dasMap, routes, baseurl)
+  }
+  $: updateDasMap(dasMap)
+  $: setThemes(config.themes)
+  $: updateSelectedComponent($currentRoute, $componentName)
+
+  $: projectTitle = config.project_title || ''
+  let stageRect = {}
+
+  let showSidebar = true
+  function handleTopbarOut(evt) {
+    if (evt.detail.openInTab) {
+      const targetWindow = window.open('/gardenframe/', '_blank')
+      targetWindow.onload = () => {
+        targetWindow.postMessage(
+          { selectedExample: $selectedExample, componentName: $componentName },
+          window.location.origin
+        )
+      }
+    } else if (evt.detail.selectTheme) {
+      selectTheme(evt.detail.selectTheme)
+    } else {
+      showSidebar = evt.detail.active
+      updateStage({
+        stageSize: evt.detail.stageSize,
+        landscape: evt.detail.landscape,
+      })
+    }
+  }
+
+  function handleStageOut(evt) {
+    if (evt.detail.stageRect) {
+      stageRect = evt.detail.stageRect
+    }
+    if (evt.detail.stageHeight) {
+      updateStageHeight(evt.detail.stageHeight)
+    }
+    if (evt.detail.toggleExpandPanel) {
+      toggleExpandPanel()
+    }
+    if (evt.detail.stageMaxHeight) {
+      updateStageMaxHeight(evt.detail.stageMaxHeight)
+    }
+  }
+
+  function handleSidebarOut(evt) {
+    if (evt.detail.toggleFoldStatusOfNode) {
+      toggleFolder(evt.detail.toggleFoldStatusOfNode)
+    }
+    if (evt.detail.toggleRootFolders) {
+      toggleRootFolders()
+    }
+    if (evt.detail.filter) {
+      updateFilter(evt.detail.filter.value?.toLowerCase())
+    }
+    if (evt.detail.toggleExpandPanel) {
+      toggleExpandPanel()
+    }
+  }
+</script>
+
+<div class="garden">
+  <div class="sidebar">
+    <Sidebar
+      {projectTitle}
+      show={showSidebar}
+      rootNodesExpanded={$rootNodesExpanded}
+      nodes={$nodes}
+      filter={$filterNavTree}
+      panelExpanded={$panelExpanded}
+      on:out={handleSidebarOut}
+    />
+  </div>
+  <div class="main">
+    <Topbar
+      active={showSidebar}
+      themes={$themes}
+      {stageRect}
+      stageSize={$stageSize}
+      landscape={$landscape}
+      on:out={handleTopbarOut}
+    />
+    <Stage
+      componentName={$componentName}
+      das={$das}
+      selectedExample={$selectedExample}
+      stageStyle={$stageStyle}
+      stageSize={$stageSize}
+      stageHeight={$stageHeight}
+      stageMaxHeight={$stageMaxHeight}
+      theme={$activeTheme?.name}
+      {expressbaseurl}
+      panelExpanded={$panelExpanded}
+      on:out={handleStageOut}
+    />
+  </div>
+</div>
+
+<style>
+  .sidebar {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+  .garden {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0 0.375rem;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: var(--c-bg-body);
+  }
+  .main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100vh;
+    overflow-y: auto;
+  }
+</style>

package/src/client/GardenFrame.svelte

@@ -0,0 +1,95 @@
+<script>
+  import DefaultRendererBuilder from '../renderer/SvelteRenderer.js'
+  export let componentMap = {}
+  export let dasMap = {}
+  export let config
+
+  let das = {}
+  let selectedExample = {}
+  let full = false
+  let fwk
+  let currentRenderer
+  let componentName
+  let component
+  let redirectData = {}
+
+  window.addEventListener('message', (evt) => {
+    if (config.themeHandler) {
+      config.themeHandler(evt.data.theme)
+    }
+    full = evt.data.stageSize === 'full'
+    das = dasMap[evt.data.componentName]
+    selectedExample = das?.examples.find(
+      (ex) => ex.story === evt.data.selectedExample
+    )
+    componentName = evt.data.componentName
+    if (config.devmodus) {
+      component = componentMap?.[componentName] || componentMap?.Welcome
+      redirectData = {}
+    } else {
+      updateComponent(componentName, selectedExample, das)
+    }
+  })
+
+  async function updateComponent(componentName, selectedExample, das) {
+    if (config.renderer) {
+      let newFwk =
+        das?.file.substring(das?.file.lastIndexOf('.') + 1) || 'svelte'
+      if (fwk != newFwk) {
+        const rendererBuilder = config.renderer[newFwk]
+        await updateRenderer(rendererBuilder)
+        fwk = newFwk
+      }
+    }
+    currentRenderer?.updateComponent({
+      componentName,
+      selectedExample,
+      das,
+      componentMap,
+    })
+  }
+
+  async function updateRenderer(rendererBuilder) {
+    await currentRenderer?.destroy()
+    currentRenderer = await rendererBuilder.create()
+  }
+
+  $: {
+    if (!config.devmodus) {
+      updateRenderer(DefaultRendererBuilder)
+    }
+  }
+
+  function handleComponentOut(evt) {
+    if (das.out) {
+      das.out.forEach((out) => {
+        if (evt.detail[out.name]) {
+          console.log(evt.detail[out.name])
+          if (selectedExample.redirect && selectedExample.redirect[out.name]) {
+            const input = selectedExample.redirect[out.name]
+            redirectData[input] = evt.detail[out.name]
+          }
+        }
+      })
+    }
+  }
+</script>
+
+<div class:full>
+  {#if config.devmodus}
+    <svelte:component
+      this={component}
+      {...selectedExample?.input}
+      {...redirectData}
+      on:out={handleComponentOut}
+    />
+  {:else}
+    <div id="app"></div>
+  {/if}
+</div>
+
+<style>
+  .full {
+    padding: 0.5rem 0.5rem 0;
+  }
+</style>

package/src/client/assets/icons/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 960 200" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M630.55 24.39c9.85-3.744 9.34 3.157 9.34 7.87s-8.77.445-11.327 3.306c-6.856 7.672-3.08 18.935 11.327 33.789h-29.262c2.85-2.318 4.933-6.793 6.249-13.426 1.972-9.948 0-13.246 1.516-20.363 1.012-4.745 5.064-8.47 12.157-11.176z" fill="#49ac4e"/><path d="M574.365 70.431c.067.017.78.017 2.137 0 8.695-4.63 16.188-4.155 22.478 1.425 2.36 2.092 6.81-8.42 24.434-8.42 18.19 0 24.902 9.982 27.37 9.982 2.467 0 3.95-9.66 21.752-2.987.99-.034 1.624-.095 1.903-.183 20.273-6.399 51.179 6.819 45.286 63.332-3.929 37.675-19.659 57.305-47.19 58.89-1.912 3.039-6.801 4.558-14.667 4.558-7.865 0-13.114-1.083-15.746-3.25-1.832 3.644-7.254 5.466-16.266 5.466-9.771 0-15.67-1.822-17.697-5.465-4.48 3.09-10.686 4.174-18.615 3.25-7.63-.89-12.69-3.121-15.18-6.692-38.757-9.474-44.3-41.565-44.3-59.405 0-17.84 5.171-69.985 44.3-60.5z" fill="#ff9700"/><path d="M576.758 70.433c-17.779 9.512-27.038 29.412-27.776 59.701-.046 1.853-.12-1.56 0 .22 1.2 17.722 9.801 37.726 25.802 60.012a3.29 3.29 0 01-.39-.164c-24.959-14.259-33.767-33.965-34.773-58.93a19.184 19.184 0 010-1.783c1.82-41.03 14.35-53.535 34.995-59.056.458-.122 1.172-.122 2.142 0zm96.521 0c19.436 6.027 29.522 24.207 30.257 54.54.045 1.856-.003-.739 0 1.079.03 17.955-10.332 40.138-31.087 66.55.414.088.69.088.83 0 23.925-15.033 35.558-38.399 37.98-66.55.054-.632-.046-.427 0-1.079 3.07-43.48-16.349-49.01-36.91-54.54-.456-.122-.812-.122-1.07 0z" fill="#ed7800"/><path d="M599.66 72.043c.797-.325 1.179-.445 1.144-.36-9.193 27.088-13.918 47.103-14.175 60.046-.037 1.86.11-1.197 0 .594-.824 13.422 6.408 33.847 21.697 61.275-.076.075-.154.075-.235 0-21.673-19.954-32.639-40.603-32.639-61.275 0-.658-.02.065 0-.594.873-27.328 8.943-47.223 24.209-59.686zm50.712 1.447c8.243 20.242 12.557 40.124 12.942 59.647.036 1.858-.11-1.197 0 .593.819 13.413-6.22 33.433-21.118 60.06.174.191.312.24.415.147 21.167-19.136 31.802-39.583 31.802-60.207 0-.657.02.065 0-.593-.842-26.505-8.397-47.134-22.701-59.646-.29-.253-.736-.253-1.34 0z" fill="#ed7800"/><path d="M584.196 39.622c6.067 8.692-12.575 54.23-29.615 81.927-17.04 27.697-38.173 51.785-46.278 56.767-8.104 4.981-26.803 15.52-44.917-3.034-18.115-18.552-19.327-26.843-13.434-40.73 5.894-13.888 22.707-30.838 36.981-40.432 14.275-9.594 47.634-41.418 57.954-58.193 2.906-4.724 11.338-11.49 14.46-11.592 4.68-.154 18.782 6.597 24.85 15.287z" fill="#502299"/><path d="M576.65 21.86c3.42-4.276 6.2-7.112 8.34-8.505 2.592-1.687 2.302 2.166 1.951 2.735-1.21 1.969-3.424 4.64-6.64 8.015 5.606 4.955 7.958 10.26 7.056 15.915-.247 1.547-2.725 26.755-5.075 24.29-2.35-2.467-.784-17.23-5.212-18.43-4.428-1.2-13.308 7.14-15.266 8.291-1.61.946-2.666-1.117-2.573-1.582 2.033-10.155 2.202-19.957 1.048-18.656-3.576 4.032-22.506 10.39-20.303 6.81 1.017-1.653 11.063-14.224 20.096-19.002 3.88-2.053 9.407-2.013 16.579.119z" fill="#89c057"/><path d="M267.089 168.977c-1.502-2.017-2.072-5.372-1.71-10.066.362-4.694 1.443-7.955 3.241-9.782 4.34-4.277 23.095 3.154 70.536 12.916 47.44 9.762 69.211 30.385 67.941 33.228-1.27 2.843-42.41-11.885-71.144-17.167-28.734-5.283-63.686-2.143-68.864-9.13z" fill="#f40000"/><path d="M262.218 159.771c-.863-.897-15.14-5.508-22.677-13.028.094-.446.405-.84.931-1.184.528-.344.993-.387 1.395-.13 11.94 9.296 19.55 9.884 20.688 9.972.425.032 1.017-.128 2.554-2.267 4.343-6.043 2.767-2.186 2.278-.679-.753 2.326-1.466 3.01-1.719 6.283-.253 3.273 3.421 15.336-1.712 5.21-.517-1.022-.875-3.28-1.738-4.177z" fill="#548515"/><path d="M538.787 196.246c4.695 0 6.94.73 9.216.73 16.887 0 24.704-14.925 22.468-37.974-1.035-10.668-6.57-19.583-14.225-23.729-7.526-4.076-17.17-3.473-18.555-3.473-17.559 0-33.659 6.322-33.659 28.94 0 22.619 6.822 36.235 23.588 36.235 1.9 0 6.473-.729 11.167-.729z" fill="#cf1414"/><path d="M553.476 132.106c2.672 2.214-1.962-1.003-5.907-1.299-1.406-.105-3.829 1.614-4.261 2.057-1.646 1.681 3.571 3.568 5.42 4.45 1.373.654 6.538 3.783 5.435 3.942-.563.08-11.65-5.583-14.382-5.583-2.732 0-1.113 13.487-1.612 13.647-.958.31-2.304-8.794-2.031-10.79.143-1.048-.545-2.212-1.787-2.212-3.604 0-13.874 7.487-13.874 6.387 0-.538 8.963-7.497 11.65-8.624 2.687-1.128-3.927-3.434-5.277-4.22-3.875-2.254-7.173-1.334-7.173-1.928 0-.293 8.293-1.027 16.461 3.55.205.116 1.025.16 1.942-.164 5.228-1.844 8.664-2.12 9.905-1.844 3.894.868 5.439 2.588 5.49 2.631z" fill="#328c32"/><path d="M541.538 120.947c-2.282 4.327-2.739 8.552-1.368 12.678 0 .554-.635.83-1.906.83-1.27 0-1.915-.276-1.934-.83.32-6.986 1.6-11.925 3.84-14.817 1.368-1.768 3.644-5.56 4.843-3.912 1.199 1.648-1.821 2.918-3.475 6.051z" fill="#1b661b"/><path d="M378.33 52.31c3.476-4.812 5.592-5.937 12.9-6.459 5.2-.371 14.853-1.68 25.248-.247 1.45.2 8.452-4.224 23.445-1.675 16.486 2.804 23.273 12.36 24.334 27.846 1.006 14.695-7.725 80.995-10.79 92.312-1.594 5.883-11.869 28.646-32.71 25.867-9.854-1.314-13.483-3.03-12.903-3.236-8.303 2.797-16.972-3.982-19.13-6.365-3.67-4.054-7.798-26.508-6.162-36.29 3.963-23.704-20.781-68.846-4.232-91.754z" fill="#edc427"/><path d="M412.552 61l.088 1.28c-5.336 3.738-7.24 9.933-5.713 18.582 2.568 14.541 4.633 37.128 5.117 44.196.484 7.067-4.161 28.331-2.65 50.398.87 12.712.748 8.33.644 9.412-.351 3.63 4.938 3.946 4.26 3.993-4.934.353-6.077-1.258-7.371-2.03-.21-.124.231-.574-.494-11.163-1.377-20.12 3.919-44.105 3.518-50.644-.273-4.453-2.085-20.55-5.166-44.01-1.394-10.61 1.195-17.281 7.767-20.014zm21.158-7.495c29.49-2.106-.037 134.69-.037 134.69s-.498.116-1.79.663c-1.292.545 29.63-135.233-1.344-133.022-.477.035 2.434-2.28 3.172-2.33z" fill="#ed9f27"/><path d="M414.05 39.794c1.035-2.945 3.141-7.63 6.318-14.056 3.654.678 5.767 1.378 6.342 2.1.876 1.103-7.804 10.957-5.261 13.69 2.543 2.732 6.826 1.398 9.078 1.398 13.022 0 16.618 2.51 10.84 2.185-5.78-.325-5.55 1.554-7.426 3.933-2.14 2.713 3.98 4.224 4.38 5.803.163.643-1.318 1.856-2.652 1.951-4.609.33-7.782-2.073-10.141-1.951-4.01.207-12.113 7.067-12.888 7.433-3.947 1.863-1.178-4.301-1.466-8.511-.289-4.21-1.995-2.957-6.79-5.093-5.315-2.368-10.194-2.633-9.921-2.977 3.368-4.238 18.033-1.487 19.586-5.905z" fill="#090"/><path d="M360.98 126.964c-1.2-2.22-2.317-2.877-5.106-4.605-2.228-1.38-5.493-2.662-5.662-3.745-.188-1.202 3.841-1.844 5.07-1.11 1.902 1.135 9.352 2.986 11.846 2.589 2.603-.415 2.137-8.14 3.14-8.83 1.003-.692 6.105-1.34 6.582-1.05.734.448-2.114 4.418-1.503 7.582.104.54 2.938-5.306 7.178-6.289 1.421-.33 3.658 1.377 3.658 1.377s-3.898 3.314-4.843 4.946c-2.493 4.306-3.357 9.65-2.903 13.195.832 6.507 10.833 32.21 7.926 33.493-2.907 1.283-17.824 3.55-19.045 3.035-1.222-.517-3.13-4.556-3.15-12.478-.018-7.922 2.726-17.162-3.188-28.11z" fill="#75c267"/><ellipse cx="110.193" cy="65.388" rx="49.658" ry="44.439" fill="#4ca747" transform="rotate(-27.964 343.174 -616.15) scale(.27716)"/><ellipse cx="57.778" cy="113.562" rx="44.391" ry="37.019" fill="#268c21" transform="rotate(-31.964 304.37 -513.074) scale(.27715)"/><ellipse cx="70.518" cy="92.534" rx="44.375" ry="40.207" fill="#299f23" transform="rotate(-27.964 328 -607.438) scale(.27716)"/><path d="M383.17 101.636c6.777-.239 12.105-5.41 11.9-11.55-.205-6.141-4.065-10.178-12.64-10.686-8.575-.508-12.105 5.41-11.9 11.551.205 6.14 5.864 10.924 12.64 10.685z" fill="#48b142"/><path d="M357.175 123.596c1-.914-2.643-1.833-1.904-3.418.364-.782.59-1.666 2.073-1.352 1.523.323 4.313 1.846 5.389 1.228 5.553-3.188 4.156-10.464 1.76-15.004-3.1-5.873-10.436-10.393-17.996-6.355-7.56 4.038-11.186 14.901-7.491 21.003 3.695 6.101 12.417 9.15 18.169 3.898z" fill="#22991c"/><path d="M370.936 113.007c.836-.489 3.818-1.814 4.933-.786 2.734 2.523 3.732-2.85 4.826-4.471 2.974-4.404 5.462-8.419 4.175-13.274-1.912-7.208-12.212-11.114-20.074-8.997-7.862 2.118-10.31 9.458-8.398 16.666.972 3.664.816 8.605 6.201 9.969 5.386 1.363 5.594 2.496 8.337.893z" fill="#1f941d"/><path d="M388.328 115.037c6.515 1.877 12.458-3.082 14.037-10.135 1.58-7.052-2.921-14.269-7.965-15.385-5.042-1.116-13.729-1.218-15.933 7.966-1.086 4.523-2.42 9.874-.333 12.556.771.992 1.418 1.9 2.693 2.558.445.23 2.398-.628 2.966-.472 2.344.64 2.828 2.42 4.535 2.912z" fill="#47a742"/><g><path d="M306.366 114.231c1.377-.947 3.351-3.684 2.874-3.446-.719.359-1.807-.64-2.055-1.347-.108-.307 3.214-5.108 3.324-6.923.207-3.414-1.54-3.823-2.71-7.033-.478-1.311-1.688-7.593-3.134-5.858 0 0 1.085 3.471 1.596 7.184.108.786.724 3.246.765 4.023.162 3.082-.47 3.483-1.397 3.636-1.396.23-1.91-1.21-3.669-4.087-1.14-1.866-2.935-2.707-3.864-4.387-.908-1.642-2.304-4.387-2.44-5.192-.236-1.382 1.512-4.882 1.358-6.637-.152-1.719-3.41 4.391-3.186 6.83.224 2.44 6.924 10.84 5.818 12.158-.532.635-2.89-2.774-6.116-7.228-3.224-4.453-6.045-5.807-8.47-7.802-1.045-.86-5.471.855-5.531.927-.347.416 4.858.266 6.435 1.817 1.234 1.214 1.689 2.376 3.058 3.88 2.336 2.565 2.09 3.095 3.792 5.642 1.14 1.707 3.083 2.87 4.388 4.43.938 1.122 2.134 3.243 1.3 3.928-.834.685-2.457-1.332-5.69-2.491-2.098-.752-3.286.396-4.82.251-.82-.077-2.377-.748-4.703-1.28-1.44-.33-7.073-4.94-6.835-4.675 1.037 1.158 3.455 5.402 6.19 6.564 4.439 1.886 10.49 1.575 11.37 2.79.43.594 2.87 3.575-.518 3.832-1.254.095-5.23-.556-8.059.211-1.741.473-2.94 2.301-3.127 2.74-.096.223 1.998-1.017 3.147-1.03 2.564-.032 7.485 1.044 8.479.872 5.12-.885 7.046-2.167 10.287-4.086 1.271-.753 1.221 2.893 2.143 1.787z" fill="#090" stroke="#090" stroke-width=".356"/><path d="M398.86 189.31c6.273-7.496-61.737-74.311-69.258-80.56-7.52-6.25-16.147-3.115-22.42 4.382-6.272 7.497-7.816 16.518-.295 22.767 7.52 6.249 85.7 60.909 91.973 53.412z" fill="#e66835" stroke="#e66835" stroke-width=".534"/><path d="M326.03 132.291c-10.775 11.311-12.264 8.749-12.264 8.749m32.995-15.804c.027 1.645-2.858 5.058-8.651 10.24m-5.448 18.658c1.906.507 5.334-2.13 10.285-7.91m21.735-2.572c-.045 1.537-2.357 4.24-6.934 8.11m34.239 23.188c.037.838-1.204 2.325-3.72 4.464m.286 8.201c.664-.033 1.798-1.005 3.4-2.917m-36.017-15.338c1.366.793 4.102-1.228 8.207-6.062m15.646-3.175c.456.924-1.578 3.105-6.103 6.541m-.431 13.109c.787.064 2.61-1.178 5.468-3.724" fill="none" stroke="#952d03" stroke-width=".534" stroke-linecap="round"/></g><g><path d="M463.677 68.93c-2.675-2.897-3.526-7.177.976-2.642s3.042 16.329 5.915 19.038c2.873 2.71 2.277 11.226-1.375 4.661-3.652-6.564-2.84-18.162-5.516-21.058z" fill="#1ba11b"/><path d="M474.41 66.702c2.014-3.268.767-7.253-1.226-2.952-1.993 4.3-5.397 23.17-2.74 23.355 2.656.186 3.876.308 4.043-2.08.167-2.387-2.09-15.056-.077-18.323z" fill="#124f12"/><path d="M484.857 41.228c-.69-6.173-3.534-4.999-2 .667 1.534 5.666-5.342 15.826-8.418 30.734-2.051 9.94-4.37 22.783-6.955 38.53l10.555-.36c-2.61-10.503-2.893-22.67-.85-36.499 3.064-20.744 8.359-26.9 7.668-33.072z" fill="#319d31"/><path d="M471.42 45.53c.997-5.755 2.204.469.962 3.225-1.243 2.757-1.993 13.48-.938 27.48.703 9.334.244 21.036-1.377 35.105l-7.763-3.14c3.684-8.189 5.44-18.722 5.264-31.6-.263-19.318 2.855-25.315 3.852-31.07z" fill="#0d700d"/><path d="M495.751 48.302c.49-7.009-.652-4.513-1.746-.122-1.094 4.39-11.677 7.314-14.784 22.653-1.033 5.105-3.31 7.647-3.755 16.623-.445 8.976-2.745 17.537-1.445 23.286.867 3.833 3.027 3.494 6.48-1.018-1.638-9.962-1.422-22.056.648-36.283 2.024-13.906 14.24-19.966 14.602-25.14z" fill="#1b5d1b"/><path d="M455.758 122.553c2.357-2.49 6.364-13.41 6.542-16.007.053-.775 1.32.782 1.857 1.112 1.486.915 3.517 3.691 6.38-.424.472-.68.98 2.451 2.123 2.204 1.562-.338 2.615-3.612 4.225-2.624 1.61.99 3.968.656 3.874 2.032-.305 4.46.148 12.376 1.464 15.6 1.316 3.222 23.324 38.63 9.446 59.155-6.549 9.685-12.747 9.37-16.774 11.018-.33.135-1.13-.598-1.357 2.71-.226 3.307.125 2.664-.187 2.731-.247.054-.87-1.236-.971-2.815-.079-1.227.372-2.836.19-2.792-.094.023-2.769.733-1.8 1.81.968 1.077.281 3.647-.246 3.596-.495-.049.9-.897-1.638-3.73-2.538-2.834-1.635-1.601-2.074-1.157-.415.42-.204 1.302-.172 2.515.015.594.57 2.593-.142 2.083-.775-.553-1.113-1.376-1.275-2.184-.292-1.455-.012-2.864-.674-2.576-3.704 1.61-3.501 5.044-3.813 4.348-.749-1.672 1.69-4.62 1.345-4.524-1.24.344-2.562.095-3.98 1.59-.402.426-1.522 1.075-2.04 1.565-1.46 1.384-1.067.32.117-1.702.708-1.21 3.152-2.514 2.973-2.594-2.648-1.178-12.81 2.104-21.159-14.884-8.348-16.988 12.918-50.935 17.766-56.056z" fill="#c47106"/><path d="M477.317 127.714c-.694-.622.955 7.817 4.69 12.887 5.802 7.876 8.765 13.715 9.683 27.135.551 8.067-2.977 14.148-5.766 17.679-1.562 1.976-2.384 3.253-3.362 3.387-1.592.218 1.048.74 2.023-.541.877-1.153 9.15-8.197 8.179-20.525-1.074-13.626-4.463-20.183-10.202-27.669-2.471-3.223-5.245-12.353-5.245-12.353zm-8.372-1.551c.545-2.202.746 8.669-2.689 15.945-5.635 11.941-6.944 16.959-7.849 21.856-1.32 7.141-.305 15.104 3.041 23.89l-1.39.05s-5.624-10.03-2.831-24.024c2.888-14.47 6.148-17.778 7.867-21.854 3.302-7.835 3.85-15.863 3.85-15.863z" fill="#e3b231"/><path d="M473.074 130.474c-.37-2.049-1.329 8.344.845 15.156 3.568 11.178 4.104 15.849 4.747 20.399 1.08 7.65-1.023 17.644-1.88 19.799-.863 2.17-.763 1.644-.426 2.206.3.502 1.357-2.206 1.357-2.206s4.047-6.792 2.09-19.799c-2.023-13.448-3.791-16.588-4.89-20.399-2.11-7.324-1.843-15.156-1.843-15.156zm-11.22-4.384c.67-2.318 1.33 1.045-4.956 10.312-6.288 9.268-10.349 14.172-11.26 27.49-.853 12.488 4.922 22.522 8.33 22.942 1.99.246-1.68 1.186-2.92-.106-1.115-1.161-7.99-6.235-6.847-22.938.97-14.195 9.35-24.586 11.534-27.47 2.984-3.94 6.12-10.23 6.12-10.23z" fill="#e3b231"/></g></svg>

package/src/client/assets/scss/abstracts/root.css

@@ -0,0 +1,42 @@
+:root {
+  --c-primary: hsl(185, 100%, 40%);
+  --c-primary-bg: hsl(185, 100%, 93%);
+  --c-basic-0: hsl(210, 15%, 100%);
+  --c-basic-50: hsl(210, 15%, 98%);
+  --c-basic-75: hsl(210, 15%, 96%);
+  --c-basic-100: hsl(210, 15%, 94%);
+  --c-basic-150: hsl(210, 15%, 90%);
+  --c-basic-200: hsl(210, 15%, 87%);
+  --c-basic-250: hsl(210, 15%, 84%);
+  --c-basic-300: hsl(210, 15%, 81%);
+  --c-basic-400: hsl(210, 15%, 64%);
+  --c-basic-500: hsl(210, 15%, 46%);
+  --c-basic-600: hsl(210, 15%, 32%);
+  --c-basic-700: hsl(210, 15%, 25%);
+  --c-basic-800: hsl(210, 15%, 15%);
+  --c-basic-900: hsl(210, 15%, 10%);
+
+  --c-bg-body: var(--c-basic-150);
+  --c-bg-panels: var(--c-basic-0);
+}
+.dark {
+  --c-primary: hsl(185, 100%, 45%);
+  --c-primary-bg: hsl(195, 100%, 20%);
+  --c-basic-0: hsl(216, 30%, 5%);
+  --c-basic-50: hsl(216, 30%, 10%);
+  --c-basic-75: hsl(216, 30%, 14%);
+  --c-basic-100: hsl(216, 30%, 18%);
+  --c-basic-150: hsl(216, 30%, 22%);
+  --c-basic-200: hsl(216, 30%, 10%);
+  --c-basic-250: hsl(216, 30%, 30%);
+  --c-basic-300: hsl(216, 30%, 33%);
+  --c-basic-400: hsl(216, 30%, 46%);
+  --c-basic-500: hsl(216, 30%, 64%);
+  --c-basic-600: hsl(216, 30%, 83%);
+  --c-basic-700: hsl(216, 30%, 90%);
+  --c-basic-800: hsl(216, 30%, 96%);
+  --c-basic-900: hsl(216, 30%, 98%);
+
+  --c-bg-body: var(--c-basic-150);
+  --c-bg-panels: var(--c-basic-0);
+}

package/src/client/assets/scss/base/buttons.css

@@ -0,0 +1,5 @@
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}

package/src/client/assets/scss/base/general.css

@@ -0,0 +1,77 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border: 0 solid #fff;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+a {
+  text-decoration-skip-ink: auto;
+}
+
+img,
+picture,
+embed,
+object,
+video {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+}
+
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  border: none;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/client/assets/scss/base/navs.css

@@ -0,0 +1,17 @@
+nav ol,
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+nav li {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+nav a {
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}

package/src/client/assets/scss/base/typography.css

@@ -0,0 +1,46 @@
+html {
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji';
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  color: var(--c-basic-600);
+  line-height: 1.2;
+}
+
+p {
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  color: var(--c-basic-600);
+  line-height: 1.5;
+}
+
+li {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+a,
+a:visited {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-decoration: underline;
+  text-decoration-skip-ink: auto;
+}

package/src/client/assets/scss/main.scss

@@ -0,0 +1,5 @@
+@import './base/general';
+@import './abstracts/root';
+@import './base/typography';
+@import './base/navs';
+@import './base/buttons';

package/src/client/components/highlight/Highlight.js

@@ -0,0 +1,12 @@
+import hljs from 'highlight.js'
+import './highlight.css'
+
+export const triggerHighlightAll = () => {
+  setTimeout(() => {
+    hljs.highlightAll()
+  }, 600)
+}
+
+export const highlightElement = (element) => {
+  hljs.highlightElement(element)
+}