added icons & more links to editor, updated submission guidelines

backend/pages/landing.js

@@ -13,7 +13,7 @@ export default function() {
         </div>
 
         <div>
-          from 
+          from
           <a
             class="box-border m-0 min-w-0 p-0 px-2 bg-[#ec3750] rounded-lg text-white whitespace-nowrap no-underline"
             href="https://www.hackclub.com">

backend/pages/navBar.js

@@ -13,11 +13,6 @@ export default function(fadeIn = false) {
           <img src="/icons/editor.svg"/>
           <span class="hidden sm:block">editor</span>
         </a>
-        
-        <a href="/docs" class="flex h-full gap-1 items-center hover:opacity-60">
-          <img src="/icons/book.svg"/>
-          <span class="hidden sm:block">docs</span>
-        </a>  
 
         <a href="/guides" class="flex h-full gap-1 items-center hover:opacity-60">
           <img src="/icons/guides.svg"/>

docs/GET_A_BLOT.md

@@ -1,9 +1,10 @@
 # How to Get a Blot!
 
-So you just found out about this cool robotic drawing machine which you can build yourself, but how can you get one? The Blot is paid for by Hack Club, including shipping, but you should check for customs fees in your country before ordering. [^1]
-[^1]: Customs fees aren't covered by Hack Club, so please look into how much customs is for an electronics kit order being shipped from the US if you are based outside the US.
+So you just found out about this cool robotic drawing machine which you can build yourself, but how can you get one? The Blot is paid for by Hack Club, including shipping, but you should check for customs fees in your country before ordering 
 
-**Prefer a video instead? You can find that [here!](https://youtu.be/AmbjNEPuv14)**
+(Customs fees aren't covered by Hack Club, so please look into how much customs is for an electronics kit order being shipped from the US if you are based outside the US)
+
+**Prefer a video instead? You can find that __[here!](https://youtu.be/AmbjNEPuv14)__**
 
 ## 1) Make a unique piece of generative art
 
@@ -25,8 +26,6 @@ I recommend trying to create a [figurative](https://en.wikipedia.org/wiki/Figura
 A key to being successful is being intentional with what you make. Sketch something out and have it in mind before you program it.
 
 
-
-
 <details>
 <summary>Here are some examples of some <b>acceptable pieces</b></summary>
 

server.js

@@ -13,6 +13,7 @@ import guides from "./backend/pages/guides.js";
 import gallery from "./backend/pages/gallery.js";
 import landing from "./backend/pages/landing.js";
 import docs from "./backend/pages/docs.js";
+import submitting from "./backend/pages/submitting.js"
 
 import signUpEmail from "./backend/api/signUpEmail.js";
 import checkSignIn from "./backend/api/checkSignIn.js";
@@ -35,6 +36,10 @@ build({
     ${navBar()}
     ${docs()}
   `),
+  submitting: wrapHTML(`
+    ${navBar()}
+    ${submitting()}
+  `),
   editor: wrapHTML(`
     <!-- TODO: add automatically when building -->
     <link rel="stylesheet" href='./assets/initApp.css'>

src/components/Toolbar.tsx

@@ -21,6 +21,8 @@ import { post } from "../post.js";
 
 const menuItemClasses = `
   relative
+  text-white
+  no-underline
   cursor-pointer
   h-full
   flex
@@ -73,6 +75,7 @@ export default function Toolbar() {
         </h1>
         <RunButton />
         <div class={dropdownContainer}>
+        <img src="/icons/file.svg"/>
           {needsSaving ? 'File*' : "File"}
           <div class={dropdownClasses + " left-0 \n " + css}>
             <div class={menuItemClasses} onClick={() => patchStore({ saveToCloudModalOpen: true })}>
@@ -91,25 +94,36 @@ export default function Toolbar() {
               Open from disk
             </div>
             <div class={menuItemClasses} onClick={() => createShareLink(getCode())}>
-              Create share link
+              Create share link{tidyCode}
             </div>
           </div>
 
         </div>
-        <div class={menuItemClasses} onClick={tidyCode}>
+        {/* <div class={menuItemClasses} onClick={tidyCode}>
           Tidy code
-        </div>
+        </div> */}
        {/* <div class={menuItemClasses} onClick={animateLines}>
           animate
-        </div>*/}
+        </div> */}
+        <a class={menuItemClasses} href="/docs" target="_blank" rel="noopener noreferrer">
+          <img src="/icons/book.svg"/>
+           Docs
+        </a>
         <div class={dropdownContainer}>
-          <div>Download</div>
+          <div class={menuItemClasses} >
+          <img src="/icons/download.svg"/>
+            Download
+          </div>
           <div class={dropdownClasses + " left-0 \n " + css}>
             <DownloadButton />
             <DownloadSVG />
             <DownloadPNG />
           </div>
         </div>
+        <a class={menuItemClasses} href="/submitting" target="_blank" rel="noopener noreferrer">
+          <img src="/icons/question.svg"/>
+           How do I submit?
+        </a>
       </div>
 
       <div class="flex items-center h-full">
@@ -199,7 +213,10 @@ function RunButton() {
 
   return (
     <Button class="relative" variant="ghost" onClick={() => runCode()}>
+      <div class={menuItemClasses}>
+      <img src="/icons/run.svg"/>
       Run (shift+enter)
+      </div>
       { getStore().codeRunning  && 
         <div class="absolute mx-auto bottom-0 left-0 right-0 text-xs text-gray-300">
             running...