style(demo): improve generator

adding code highlight and some meta data
davidenke · Oct 21, 2024 · f22e928 · f22e928
1 parent b96171b
commit f22e928
Show file tree

Hide file tree

Showing 5 changed files with 292 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -7,16 +7,77 @@
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
     />
     <title>Astro Decap Collection Demo</title>
+
     <link rel="stylesheet" href="./src/demo/demo.css" />
+    <link rel="stylesheet" href="./node_modules/highlight.js/styles/atom-one-light.min.css" />
 
     <script type="module" src="./src/demo/demo.ts"></script>
     <script type="module" src="./src/index.ts"></script>
   </head>
   <body>
-    <button onclick="window.handleExample(event)">Example</button>
-    <textarea oninput="window.handleInput(event)" placeholder="Paste your Decap config.yml here">
-    </textarea>
-    <pre id="config"><code data-label="0"></code></pre>
-    <pre id="schema"><code data-label="none"></code></pre>
+    <header>
+      <h1>Astro Decap Collection Demo</h1>
+      <p>
+        This is a simple demo generator to transform Decap collections to Astro compatible Zod
+        schemata.<br />
+        For more information, please visit the
+        <a href="https://github.com/davidenke/astro-decap-collection">GitHub repository</a>.
+      </p>
+
+      <nav>
+        <a
+          href="https://astro.build/"
+          target="_blank"
+          aria-label="Go to Astro side generator documentation"
+        >
+          <img src="./node_modules/simple-icons/icons/astro.svg" alt="Astro" />
+        </a>
+        <a
+          href="https://decapcms.org/"
+          target="_blank"
+          aria-label="Go to Decap content management documentation"
+        >
+          <img src="./node_modules/simple-icons/icons/decapcms.svg" alt="Decap" />
+        </a>
+        <a
+          href="https://zod.dev/"
+          target="_blank"
+          aria-label="Go to Zod schema validation documentation"
+        >
+          <img src="./node_modules/simple-icons/icons/zod.svg" alt="Zod" />
+        </a>
+        <a
+          href="https://github.com/davidenke/astro-decap-collection"
+          aria-label="Go to GitHub repository"
+        >
+          <img src="./node_modules/simple-icons/icons/github.svg" alt="GitHub" />
+        </a>
+      </nav>
+    </header>
+    <main>
+      <fieldset id="input">
+        <legend>Decap config</legend>
+        <div>
+          <pre><code></code></pre>
+          <textarea
+            oninput="window.handleInput(event)"
+            onscroll="window.handleScroll(event)"
+            placeholder="Paste your Decap config.yml here"
+          ></textarea>
+        </div>
+        <nav>
+          <button onclick="window.loadExample('./examples/blog.yml')">Blog example</button>
+          <button onclick="window.loadExample('./examples/relation.yml')">Relation example</button>
+        </nav>
+      </fieldset>
+      <fieldset id="config">
+        <legend>Parsed config collections</legend>
+        <pre><code data-label="count: 0"></code></pre>
+      </fieldset>
+      <fieldset id="schemas">
+        <legend>Zod schemata</legend>
+        <pre><code data-label="none"></code></pre>
+      </fieldset>
+    </main>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,10 +55,12 @@
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-unused-imports": "4.1.4",
+    "highlight.js": "11.10.0",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.3.3",
+    "simple-icons": "13.14.1",
     "ts-jest": "29.2.5",
     "ts-node": "10.9.2",
     "typescript": "5.6.3",

diff --git a/src/demo/demo.css b/src/demo/demo.css
@@ -1,66 +1,203 @@
+html {
+  font-family: system-ui;
+  font-size: 12px;
+}
+
+body,
+h1,
+p,
+pre,
+textarea {
+  margin: 0;
+}
+
 body {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   box-sizing: border-box;
   height: 100svh;
-  margin: 0;
   padding: 10px;
   gap: 10px;
 }
 
+header {
+  display: grid;
+  grid-template:
+    'title nav'
+    'description .' / 1fr;
+  gap: 10px;
+
+  h1 {
+    grid-area: title;
+  }
+
+  p {
+    grid-area: description;
+  }
+
+  nav {
+    grid-area: nav;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 5px;
+
+    img {
+      height: 1.5em;
+    }
+  }
+}
+
+main {
+  flex: 1 1 0;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 10px;
+
+  @media (orientation: portrait) {
+    flex-direction: column;
+  }
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+a:visited {
+  color: currentcolor;
+}
+
+button,
+fieldset {
+  all: unset;
+}
+
+fieldset {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 0;
+
+  height: 100%;
+  width: 0;
+
+  @media (orientation: portrait) {
+    height: 0;
+    width: 100%;
+  }
+}
+
+button,
+legend,
+code::after {
+  font: 0.8em/1 system-ui;
+  text-transform: uppercase;
+}
+
 button {
-  position: fixed;
-  inset: auto auto 20px 20px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  background: #ccc;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #dcdcdc;
+  }
+}
+
+legend {
+  padding: 0 0 3px;
+}
+
+#input > div,
+textarea,
+pre {
+  height: 100%;
+  width: 100%;
 }
 
 textarea,
 pre {
-  flex: 1 1 0;
-  width: 0;
-  margin: 0;
   border: 0;
+  box-sizing: border-box;
   resize: none;
 }
 
 textarea,
 pre > code {
   padding: 10px;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 6px;
+  font: 1em/1.5 monospace;
 }
 
 pre {
   display: flex;
   flex-flow: column nowrap;
   gap: 10px;
 
+  @media (orientation: portrait) {
+    flex-direction: row;
+  }
+
   > code {
     flex: 1 1 0;
-    position: relative;
     display: block;
     box-sizing: border-box;
     max-height: 100%;
     padding: 10px;
     overflow: hidden;
     overflow-y: auto;
-
-    &::after {
-      content: attr(data-label);
-      position: absolute;
-      inset: 10px 10px auto auto;
-      padding: 3px 5px;
-      border-radius: 3px;
-      background: #ccc;
-    }
   }
 }
 
-@media (orientation: portrait) {
-  body {
-    flex-direction: column;
+code {
+  position: relative;
+
+  &[data-label]::after {
+    content: attr(data-label);
+    position: absolute;
+    inset: 3px 3px auto auto;
+    padding: 3px 5px;
+    border-radius: 3px;
+    background: #ccc;
   }
+}
+
+#input {
+  position: relative;
 
   pre {
-    flex-direction: row;
+    white-space: pre-wrap;
+  }
+
+  textarea {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+
+    caret-color: #000;
+
+    &:focus {
+      outline: 1px solid #ccc;
+      outline-offset: -2px;
+    }
+  }
+
+  nav {
+    position: absolute;
+    inset: auto auto 10px 10px;
+    z-index: 2;
+
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 10px;
   }
 }