Merge pull request #62 from terrastruct/update

batch of updates

.gitignore

@@ -5,3 +5,4 @@ node_modules
 build
 dist
 d2-playground
+.DS_Store

src/css/hero.css

@@ -14,9 +14,18 @@
 #hero-text {
   margin-top: 12px;
   color: var(--steel-850);
+  text-align: center;
+}
+
+#hero-text-tagline {
   font-size: 14px;
   font-family: "Source Sans Pro Medium";
-  text-align: center;
+}
+
+#hero-text-version {
+  font-size: 12px;
+  margin-top: 0.4rem;
+  color: var(--steel-550);
 }
 
 #hero-left-drawing,

src/css/main.css

@@ -36,6 +36,8 @@
   --blue-400: #6b8afb;
   --blue-500: #4a6ff3;
   --blue-600: #234cda;
+  --blue-600-filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(3335%)
+    hue-rotate(227deg) brightness(88%) contrast(94%);
   --alert-100: #ffcfd8;
   --alert-200: #ff8096;
   --alert-300: #f35471;

src/css/responsive.css

@@ -21,8 +21,26 @@
     display: none;
   }
   #sketch {
+    display: none;
+  }
+  #sketch-mobile {
+    display: flex !important;
     flex-direction: column;
-    gap: 2px;
+    align-items: center;
+    padding: 0.4rem;
+    border-radius: 4px;
+  }
+  #sketch-mobile-icon {
+    margin-top: 2px;
+  }
+  .sketch-mobile-activated {
+    background: var(--blue-050);
+    #sketch-mobile-icon {
+      filter: var(--blue-600-filter);
+    }
+  }
+  #download-cli {
+    display: none;
   }
   #zoom-container {
     display: none;

src/index.html

@@ -87,6 +87,7 @@
         >
         <a
           class="nav-menu-item"
+          id="download-cli"
           target="_blank"
           href="https://github.com/terrastruct/d2#install"
         >
@@ -119,8 +120,11 @@
               />
             </picture>
             <div id="hero-text">
-              An online runner to play, learn, and create with D2, the modern diagram
-              scripting language that turns text to diagrams.
+              <div id="hero-text-tagline">
+                An online runner to play, learn, and create with D2, the modern diagram
+                scripting language that turns text to diagrams.
+              </div>
+              <div id="hero-text-version"></div>
             </div>
           </div>
           <div id="hero-right-drawing">
@@ -215,6 +219,13 @@
                     </label>
                   </div>
                 </div>
+                <div id="sketch-mobile" style="display: none">
+                  <img
+                    id="sketch-mobile-icon"
+                    src="assets/icons/sketch.svg"
+                    class="btn-icon"
+                  />
+                </div>
               </div>
               <div id="render-toolbar-right" class="workstation-toolbar-right">
                 <div id="export" class="btn-menu-container">
@@ -330,7 +341,7 @@
           </a>
         </div>
         <div class="footer-vertical-divider">|</div>
-        <div class="footer-bottom-content">&copy; 2023 Terrastruct, Inc.</div>
+        <div class="footer-bottom-content">&copy; 2024 Terrastruct, Inc.</div>
       </div>
     </div>
     <script src="js/vendor/panzoom.js"></script>

src/js/main.js

@@ -27,6 +27,9 @@ async function init() {
   Layout.init();
   Modal.init();
 
+  const versionDOM = document.getElementById("hero-text-version");
+  versionDOM.innerHTML = `d2 version: ${d2Version()}`;
+
   // TODO defer load hero images all the way here
 }
 

src/js/modules/editor.js

@@ -77,6 +77,7 @@ async function initMonaco() {
     () => undefined
   );
   monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, compile);
+  monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, compile);
   provider.registry.setTheme(lightTheme);
   monaco.editor.setTheme(lightTheme);
 

src/js/modules/export.js

@@ -55,9 +55,10 @@ async function exportPNG() {
   const width = parseFloat(viewBox[2]) * window.devicePixelRatio;
   const height = parseFloat(viewBox[3]) * window.devicePixelRatio;
 
-  const encoded =
-    "data:image/svg+xml;base64," +
-    btoa(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgEl))));
+  const blob = new Blob([new XMLSerializer().serializeToString(svgEl)], {
+    type: "image/svg+xml",
+  });
+  const encoded = URL.createObjectURL(blob);
 
   const tempImg = new Image();
   const loadImage = () => {

src/js/modules/sketch.js

@@ -4,7 +4,13 @@ import QueryParams from "../lib/queryparams";
 
 function init() {
   readQueryParam();
-  document.getElementById("sketch-checkbox").addEventListener("change", toggleSketch);
+  document
+    .getElementById("sketch-checkbox")
+    .addEventListener("change", (e) => toggleSketch(e.target.checked));
+  document
+    .getElementById("sketch-mobile-icon")
+    .addEventListener("click", () => toggleSketch(QueryParams.get("sketch") === "0"));
+  updateMobileIcon(QueryParams.get("sketch") === "1");
 }
 
 function readQueryParam() {
@@ -24,9 +30,9 @@ function readQueryParam() {
   }
 }
 
-function toggleSketch(e) {
+function toggleSketch(on) {
   const icon = document.getElementById("sketch-toggle-icon");
-  if (e.target.checked) {
+  if (on) {
     icon.src = "assets/icons/toggle_check.svg";
     QueryParams.set("sketch", "1");
   } else {
@@ -36,6 +42,18 @@ function toggleSketch(e) {
   if (Editor.getDiagramSVG()) {
     Editor.compile();
   }
+
+  updateMobileIcon(on);
+}
+
+function updateMobileIcon(on) {
+  const icon = document.getElementById("sketch-mobile");
+
+  if (on) {
+    icon.classList.add("sketch-mobile-activated");
+  } else {
+    icon.classList.remove("sketch-mobile-activated");
+  }
 }
 
 function getValue() {