From a6951131efb0b61d737b4dc60b322a8307410707 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Wed, 12 Jun 2024 15:03:01 +0300
Subject: [PATCH] Link language documentation and other assets on the About
 page

Fix broken layout on mobile screens.
---
 src/components/ExporterButtons.vue |  2 +-
 src/views/AboutView.vue            | 39 ++++++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/ExporterButtons.vue b/src/components/ExporterButtons.vue
index 36860ec9..0e0994c3 100644
--- a/src/components/ExporterButtons.vue
+++ b/src/components/ExporterButtons.vue
@@ -224,7 +224,7 @@ function doExport(exporter: ExporterKey) {
   </a>
   <h3>Documentation</h3>
   <p>
-    You can read about the new syntax
+    You can read about the new SonicWeave syntax
     <a
       href="https://github.com/xenharmonic-devs/sonic-weave?tab=readme-ov-file#sonic-weave"
       target="_blank"
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index cfad574e..8efc427e 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -4,6 +4,8 @@ import { computed } from 'vue'
 const TAGLINES = [
   ['Because there are more than 12 notes.', 'Sean Archibald'],
   ['Electric Tunaloo', ''],
+  ['Powered by TypeScript', ''],
+  ['Powered by Vue', ''],
   ['Powered by SonicWeave', ''],
   ['We are friends now, right?', 'dotuXil'],
   ["Any JI scale is a NEJI if you're brave enough.", 'fredg999'],
@@ -64,12 +66,40 @@ const tagline = computed(() => TAGLINES[Math.floor(Math.random() * TAGLINES.leng
         <i>emotional support</i>
       </p>
     </div>
+    <hr />
+    <div id="documentation">
+      <h2>Documentation</h2>
+      <p>
+        The programming language used to create scales is called
+        <a href="https://github.com/xenharmonic-devs/sonic-weave">SonicWeave</a>. See the project's
+        <a href="https://github.com/xenharmonic-devs/sonic-weave/blob/main/documentation/dsl.md"
+          >DSL documentation</a
+        >
+        to learn more.
+      </p>
+    </div>
+    <hr />
+    <div id="about">
+      <h2>About Scale Workshop</h2>
+      <p>Scale Workshop is MIT licensensed open source.</p>
+      <p>
+        Feel free to check out the
+        <a href="https://github.com/xenharmonic-devs/scale-workshop">source code on GitHub</a>. You
+        are free to modify and sell copies of the software as allowed by the
+        <a href="https://opensource.org/license/mit">MIT license</a>.
+      </p>
+      <p>
+        Many of the xenharmonic utilities used by the project are published on
+        <a href="https://www.npmjs.com/">npm</a>. See
+        <a href="https://github.com/xenharmonic-devs/">Xenharmonic Developer's GitHub profile</a>
+        for the source code.
+      </p>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .about {
-  height: 100vh;
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -92,7 +122,12 @@ hr {
 .about > * {
   max-width: 30rem;
 }
-#contributors h2 {
+#contributors,
+#documentation {
+  margin-bottom: 1em;
+}
+
+h2 {
   border: unset;
   text-align: center;
 }