Merge pull request #192 from hackclub/save-dev-pr-0

Account system #0

astro/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .vercel
 .astro
-dist
+dist
+yarn-error.log

.prettierignore → astro/.prettierignore

@@ -3,6 +3,4 @@ package-lock.json
 public/*
 .next/*
 .vercel/*
-*/.vercel
-*/*/*.mdx
-*/*/*/*.mdx
+*/.vercel

astro/astro.config.mjs

@@ -1,10 +1,10 @@
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
+import { defineConfig } from 'astro/config'
+import preact from '@astrojs/preact'
 
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://blot.hackclub.com',
   integrations: [preact(), tailwind()]
-});
+})

astro/package.json

@@ -10,7 +10,7 @@
     "preview": "astro preview",
     "sync": "astro sync",
     "astro": "astro",
-    "format": "prettier --ignore-path ../.prettierignore --write . --plugin=prettier-plugin-astro"
+    "format": "prettier --ignore-path ./.prettierignore --write . --plugin=prettier-plugin-astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.2.0",

astro/public/masonry.min.js

@@ -12,8 +12,8 @@
         return e(t, i)
       })
     : 'object' == typeof module && module.exports
-    ? (module.exports = e(t, require('jquery')))
-    : (t.jQueryBridget = e(t, t.jQuery))
+      ? (module.exports = e(t, require('jquery')))
+      : (t.jQueryBridget = e(t, t.jQuery))
 })(window, function (t, e) {
   'use strict'
   function i(i, r, a) {
@@ -74,8 +74,8 @@
     'function' == typeof define && define.amd
       ? define('ev-emitter/ev-emitter', e)
       : 'object' == typeof module && module.exports
-      ? (module.exports = e())
-      : (t.EvEmitter = e())
+        ? (module.exports = e())
+        : (t.EvEmitter = e())
   })('undefined' != typeof window ? window : this, function () {
     function t() {}
     var e = t.prototype
@@ -128,8 +128,8 @@
     'function' == typeof define && define.amd
       ? define('get-size/get-size', e)
       : 'object' == typeof module && module.exports
-      ? (module.exports = e())
-      : (t.getSize = e())
+        ? (module.exports = e())
+        : (t.getSize = e())
   })(window, function () {
     'use strict'
     function t(t) {
@@ -256,8 +256,8 @@
     'function' == typeof define && define.amd
       ? define('desandro-matches-selector/matches-selector', e)
       : 'object' == typeof module && module.exports
-      ? (module.exports = e())
-      : (t.matchesSelector = e())
+        ? (module.exports = e())
+        : (t.matchesSelector = e())
   })(window, function () {
     'use strict'
     var t = (function () {
@@ -284,8 +284,8 @@
           }
         )
       : 'object' == typeof module && module.exports
-      ? (module.exports = e(t, require('desandro-matches-selector')))
-      : (t.fizzyUIUtils = e(t, t.matchesSelector))
+        ? (module.exports = e(t, require('desandro-matches-selector')))
+        : (t.fizzyUIUtils = e(t, t.matchesSelector))
   })(window, function (t, e) {
     var i = {}
     ;(i.extend = function (t, e) {
@@ -397,8 +397,8 @@
           e
         )
       : 'object' == typeof module && module.exports
-      ? (module.exports = e(require('ev-emitter'), require('get-size')))
-      : ((t.Outlayer = {}), (t.Outlayer.Item = e(t.EvEmitter, t.getSize)))
+        ? (module.exports = e(require('ev-emitter'), require('get-size')))
+        : ((t.Outlayer = {}), (t.Outlayer.Item = e(t.EvEmitter, t.getSize)))
   })(window, function (t, e) {
     'use strict'
     function i(t) {
@@ -690,20 +690,20 @@
           }
         )
       : 'object' == typeof module && module.exports
-      ? (module.exports = e(
-          t,
-          require('ev-emitter'),
-          require('get-size'),
-          require('fizzy-ui-utils'),
-          require('./item')
-        ))
-      : (t.Outlayer = e(
-          t,
-          t.EvEmitter,
-          t.getSize,
-          t.fizzyUIUtils,
-          t.Outlayer.Item
-        ))
+        ? (module.exports = e(
+            t,
+            require('ev-emitter'),
+            require('get-size'),
+            require('fizzy-ui-utils'),
+            require('./item')
+          ))
+        : (t.Outlayer = e(
+            t,
+            t.EvEmitter,
+            t.getSize,
+            t.fizzyUIUtils,
+            t.Outlayer.Item
+          ))
   })(window, function (t, e, i, n, o) {
     'use strict'
     function r(t, e) {
@@ -1115,8 +1115,8 @@
     'function' == typeof define && define.amd
       ? define(['outlayer/outlayer', 'get-size/get-size'], e)
       : 'object' == typeof module && module.exports
-      ? (module.exports = e(require('outlayer'), require('get-size')))
-      : (t.Masonry = e(t.Outlayer, t.getSize))
+        ? (module.exports = e(require('outlayer'), require('get-size')))
+        : (t.Masonry = e(t.Outlayer, t.getSize))
   })(window, function (t, e) {
     var i = t.create('masonry')
     i.compatOptions.fitWidth = 'isFitWidth'

astro/src/components/CodeMirror.module.css

@@ -6,4 +6,3 @@
   height: 100%;
   width: 100%;
 }
-

astro/src/components/DropBox.tsx

@@ -9,7 +9,8 @@ export default function DropBox() {
   }, []) // Empty dependency array means this effect runs once after initial render
 
   return (
-    <div class="
+    <div
+      class="
       drop 
       droparea 
       
@@ -79,9 +80,8 @@ function addDragDrop() {
   window.addEventListener('dragover', function (evt) {
     droparea.classList.remove('hidden')
     pauseEvent(evt)
-  });
-
-  ['mouseout'].forEach(trigger =>
+  })
+  ;['mouseout'].forEach(trigger =>
     window.addEventListener(trigger, function (evt) {
       droparea.classList.add('hidden')
     })

astro/src/components/Editor.module.css

@@ -107,5 +107,3 @@ body[data-theme='dark'] {
 }
 
 */
-
-

astro/src/components/Editor.tsx

@@ -1,16 +1,16 @@
 import { getStore } from '../lib/state.js'
 import { createListener } from '../lib/createListener.js'
 import styles from './Editor.module.css'
-import CompatWarning from './CompatWarning.jsx'
-import Preview from './Preview.jsx'
-import Toolbar from './Toolbar.jsx'
-import Error from './Error.jsx'
-import Console from './Console.jsx'
-import GlobalStateDebugger from './GlobalStateDebugger.jsx'
-import DropBox from './DropBox.jsx'
-import CodeMirror from './CodeMirror.jsx'
+import CompatWarning from './CompatWarning.js'
+import Preview from './Preview.js'
+import Toolbar from './Toolbar.js'
+import Error from './Error.js'
+import Console from './Console.js'
+import GlobalStateDebugger from './GlobalStateDebugger.js'
+import DropBox from './DropBox.js'
+import CodeMirror from './CodeMirror.js'
 import { useEffect, useRef, useState } from 'preact/hooks'
-import Help from './Help.jsx'
+import Help from './Help.js'
 import preview from '@astrojs/node/preview.js'
 
 export default function Editor() {
@@ -63,7 +63,7 @@ export default function Editor() {
               'flex-direction': 'column',
               'overflow': 'none'
             }}>
-            <div style={{ flex: 1, overflow: "auto" }}>
+            <div style={{ flex: 1, overflow: 'auto' }}>
               <CodeMirror />
             </div>
             <div>

astro/src/components/Error.tsx

@@ -84,8 +84,8 @@ const Snippet = ({
       <div>
         <div>{pos.line}</div>
       </div>
-      <code style={ {width: "100%", overflow: "auto" } }>
-        <div ref={cmRef} class={styles.cm}/>
+      <code style={{ width: '100%', overflow: 'auto' }}>
+        <div ref={cmRef} class={styles.cm} />
         {' '.repeat(pos.column)}
         <span class={styles.arrow}>↑</span>
         {message && <span class={styles.message}>{message}</span>}
@@ -106,15 +106,11 @@ export default function Error() {
   const { error } = getStore()
 
   if (!error) return null
-    
+
   return (
     <div class={styles.root}>
       <span class={styles.name}>{error.name}</span>
-      <Snippet
-          pos={error.pos}
-          code={error.code}
-          message={error.message}
-        />
+      <Snippet pos={error.pos} code={error.code} message={error.message} />
     </div>
   )
 }

astro/src/components/Help.module.css

@@ -87,4 +87,4 @@ body[data-theme='dark'] .helpContent hr {
 
 body[data-theme='dark'] .helpContent img {
   background-color: white;
-}
+}

astro/src/components/Help.tsx

@@ -1,14 +1,14 @@
 import styles from './Help.module.css'
 import { useState, useEffect } from 'preact/hooks'
 import { marked } from 'marked'
-import { loadCodeFromString } from "../lib/loadCodeFromString.ts";
+import { loadCodeFromString } from '../lib/loadCodeFromString.ts'
 
 marked.setOptions({
-    highlight: function (code, language) {
-        const validLanguage = Prism.languages[language] ? language : 'markup';
-        return Prism.highlight(code, Prism.languages[validLanguage], validLanguage);
-    }
-});
+  highlight: function (code, language) {
+    const validLanguage = Prism.languages[language] ? language : 'markup'
+    return Prism.highlight(code, Prism.languages[validLanguage], validLanguage)
+  }
+})
 
 export default function Help({
   toggleClose,
@@ -28,7 +28,7 @@ export default function Help({
     htmlContent: ''
   })
 
-  const [helpContent, setHelpContent] = useState("");
+  const [helpContent, setHelpContent] = useState('')
 
   useEffect(() => {
     const fetchData = async () => {
@@ -37,12 +37,12 @@ export default function Help({
       )
       const helpData = await helpRes.text()
 
-      setHelpContent(marked(helpData));
+      setHelpContent(marked(helpData))
 
       if (workshop === null) return
 
-
-      if (confirm("Clear text editor?")) loadCodeFromString(`// Check the workshop tab to get started
+      if (confirm('Clear text editor?'))
+        loadCodeFromString(`// Check the workshop tab to get started
 
 const width = 125;
 const height = 125;
@@ -61,8 +61,7 @@ testTurtle.translate(
 drawTurtles([
     testTurtle
 ]);
-`);
-
+`)
 
       const res = await fetch(
         `https://raw.githubusercontent.com/hackclub/blot/main/guides/${workshop}.md`
@@ -71,16 +70,18 @@ drawTurtles([
 
       const result = parseMDFrontMatter(data)
 
-      setWorkshopContent(result);
-      setTab('workshop');
+      setWorkshopContent(result)
+      setTab('workshop')
     }
 
     fetchData()
   }, [])
 
   return (
     <>
-      <div class={[styles.helpSection, "help-section"].join(" ")} style={{ height: `${helpHeight}%` }}>
+      <div
+        class={[styles.helpSection, 'help-section'].join(' ')}
+        style={{ height: `${helpHeight}%` }}>
         <div class={styles.helpSectionToolbar}>
           {workshop && (
             <a

astro/src/components/Navbar.astro

@@ -42,7 +42,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
 
 <nav>
   <a style="display: flex; gap: 5px; align-items: center;" href="/">
-    <img src="/blot.svg" style="width: 30px"/>
+    <img src="/blot.svg" style="width: 30px" />
     <span style="font-weight: 700;">blot</span>
   </a>
   <div style="display: flex; font-size: 1.2rem;">
@@ -122,7 +122,11 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
       >
       <span class="hide-mobile">build guide</span>
     </a>
-    <a style="display: flex; gap: 5px; align-items: center;" href="https://github.com/hackclub/blot" rel="noreferrer" target="_blank">
+    <a
+      style="display: flex; gap: 5px; align-items: center;"
+      href="https://github.com/hackclub/blot"
+      rel="noreferrer"
+      target="_blank">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"