WIP

hackclub · Oct 20, 2023 · 1636f4a · 1636f4a · vercel · Oct 20, 2023
1 parent 88b7c6e
commit 1636f4a
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 105 deletions.
diff --git a/astro/src/components/DropBox.tsx b/astro/src/components/DropBox.tsx
@@ -63,7 +63,7 @@ function addDragDrop() {
       } else if (extension === 'svg') {
         text = text.replaceAll('\n', '')
 
-        const newLines = `const importedSVG = createTurtle().fromSVG(String.raw\`${text}\`);\n`
+        const newLines = `const importedSVG = createTurtle().fromSVG(String.raw\`${text}\`);\nimportedSVG.scale([1, -1]);\n`
 
         view.dispatch({
           changes: { from: 0, insert: newLines }

diff --git a/astro/src/components/Help.tsx b/astro/src/components/Help.tsx
@@ -41,7 +41,7 @@ export default function Help({
 
       if (workshop === null) return
 
-      loadCodeFromString("");
+      if (confirm("Clear text editor?")) loadCodeFromString("");
 
       const res = await fetch(
         `https://raw.githubusercontent.com/hackclub/blot/main/guides/${workshop}.md`

diff --git a/astro/src/components/Navbar.astro b/astro/src/components/Navbar.astro
@@ -45,7 +45,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
     <img src="/blot.svg" style="width: 30px"/>
     <span style="font-weight: 700;">blot</span>
   </a>
-  <div class="hide-mobile" style="display: flex; font-size: 1.2rem;">
+  <div style="display: flex; font-size: 1.2rem;">
     <a style="display: flex; gap: 5px; align-items: center;" href="/editor">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -61,7 +61,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
         ><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path
           d="m15 5 4 4"></path></svg
       >
-      <span>editor</span>
+      <span class="hide-mobile">editor</span>
     </a>
     <a style="display: flex; gap: 5px; align-items: center;" href="/guides">
       <svg
@@ -78,7 +78,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
         ><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path
           d="M6 12v5c3 3 9 3 12 0v-5"></path></svg
       >
-      <span>guides</span>
+      <span class="hide-mobile">guides</span>
     </a>
     <a style="display: flex; gap: 5px; align-items: center;" href="/gallery">
       <svg
@@ -102,7 +102,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
           d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
         ></path></svg
       >
-      <span>gallery</span>
+      <span class="hide-mobile">gallery</span>
     </a>
     <a style="display: flex; gap: 5px; align-items: center;" href="/assembly">
       <svg
@@ -120,7 +120,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
           d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
         ></path></svg
       >
-      <span>build guide</span>
+      <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">
       <svg
@@ -138,7 +138,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
           d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
         ></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg
       >
-      <span>source</span>
+      <span class="hide-mobile">source</span>
     </a>
   </div>
 </nav>
diff --git a/astro/src/pages/guides.astro b/astro/src/pages/guides.astro
@@ -1,7 +1,19 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import { slug } from '../lib/guide.ts'
-const workshops = await Astro.glob('/../guides/*.md')
+
+const list = (await Astro.glob('/../guides/_LIST.json'))[0]
+  .default
+  .map(x => x.title)
+
+const workshops = await Astro.glob('/../guides/*.md');
+
+const indices = {};
+
+workshops.forEach(x => {
+  const name = x.file.split("/").at(-1);
+  indices[name] = list.indexOf(name);
+});
 
 ---
 
@@ -14,102 +26,44 @@ const workshops = await Astro.glob('/../guides/*.md')
     min-height: 100vh;
     font-family: "Phantom Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
   }
-
-  .description {
-    padding: .3rem;
-    margin-left: 40px;
-  }
-
-  .guides-title {
-    font-size: 3rem;
-    font-weight: 700;
-  }
-
-  .guides-sub-title {
-    font-size: 1.7rem;
-    font-weight: 300;
-  }
-
-  .gallery {
-    display: flex;
-    width: 100vw;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-around;
-    row-gap: 24px;
-    margin: 20px 0; /* Added some vertical margin for better spacing */
-  }
-
-  .frame {
-    text-decoration: none;
-    color: inherit;
-    width: 30%;
-    min-width: 300px;
-    max-width: 400px;
-    aspect-ratio: 1;
-    background-image: linear-gradient(169deg, #cecef9, #e7f0fb);
-    border-radius: 27px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 17px;
-    box-shadow: 7px 6px 7px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
-    &:hover { /* Hover effect */
-      transform: scale(1.05); /* Slightly scales the frame up */
-      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); /* Brighter shadow on hover */
-    }
-  }
-
-  .thumbnail {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    border-radius: 1rem;
-    transition: opacity 0.3s ease; /* Smooth transition for hover effects */
-    /* Make the thumbnail slightly less opaque on hover for a subtle effect */
-    .frame:hover & {
-      opacity: 0.9;
-    }
-  }
-
-  .prose {
-    padding: 10px;
-  }
-
-
 </style>
 
+
 <Layout
   title="Guides"
   description="A gallery of various guides created by Hack Clubbers.">
-  <div id="container">
-    <div class="description">
-      <div class="guides-title">Guides</div>
-      <div class="guides-sub-title">
-        A collection of various guides created by Hack Clubbers that anyone can
-        learn from and contribute to!
-      </div>
+  <div class="p-1 ml-10">
+    <div class="text-[3rem] font-[700]">Guides</div>
+    <div class="text-[1.7rem] font-[300]">
+      A collection of various guides created by Hack Clubbers that anyone can
+      learn from and contribute to!
     </div>
-    <div class="gallery">
-      {
-        workshops
-          .sort((a, b) =>
-            a.frontmatter.pinned ? -1 : b.frontmatter.pinned ? 1 : 0
+  </div>
+
+  <div class="flex flex-row flex-wrap items-center justify-around w-screen gap-y-6 my-5">
+    {
+      workshops
+        .sort((a, b) => {
+          const aName = a.file.split("/").at(-1);
+          const bName = b.file.split("/").at(-1);
+          return indices[aName] - indices[bName];
+        })
+        .filter(x => indices[x.file.split("/").at(-1)] >= 0)
+        .map(workshop => {
+          return (
+            <a 
+              class="no-underline text-current w-[30%] min-w-[300px] max-w-[400px] aspect-[1] rounded-[27px] flex items-center flex-col justify-around p-[17px] shadow-md transition-transform duration-300 ease-in-out transition-shadow hover:scale-105 hover:shadow-lg" 
+              style="background-image: linear-gradient(169deg, #cecef9, #e7f0fb);"
+              href={`/editor?guide=${slug(workshop.file)}`}>
+              <img 
+                class="max-w-full max-h-full object-contain rounded-lg transition-opacity duration-300 ease-in-out group-hover:opacity-90" 
+                src={workshop.frontmatter.thumbnail} />
+              <div class="p-2.5">
+                {workshop.frontmatter.title}
+              </div>
+            </a>
           )
-          .map(workshop => {
-            return (
-              <a class="frame" href={`/editor?guide=${slug(workshop.file)}`}>
-                <img class="thumbnail" src={workshop.frontmatter.thumbnail} />
-                <div class="prose">
-                  {workshop.frontmatter.title}
-                </div>
-              </a>
-            )
-          })
-      }
-    </div>
+        })
+    }
   </div>
 </Layout>
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
@@ -271,15 +271,21 @@ try {
 
     <div class="row-to-col fade-in fill" style="margin: 10px; justify-content: space-evenly; align-items: center;">
 
-      <div class="col half-to-full" style="overflow:clip; height: 80%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); border: 1px solid black; border-radius: 5px; min-height: 300px; max-width: 450px;">
-        <div class="w-100" style="text-align: center; font-size: 1.5rem; background: #8cc8fd; color: #413c3c; padding: 5px; border-radius: 5px;">Write code in the editor.</div>
-        <div class="fill img-fill" style="background-color: white; background-image: url('/landing/code2.webp');"></div>
+      <div class="
+            col 
+            half-to-full 
+            overflow-clip h-4/5 border border-black rounded-md min-h-[300px] max-w-[450px] shadow-lg">
+        <div class="w-100 text-center text-xl bg-[#8cc8fd] text-[#413c3c] p-1">Code an art piece.</div>
+        <div class="fill" style="background-position: center; background-repeat: no-repeat; background-size: cover; background-color: white; background-image: url('/landing/code2.webp');"></div>
       </div>
 
       <div class="arrow" style="align-self: center; font-size: 3rem; padding: 35px;"></div>
 
-      <div class="col half-to-full" style="overflow:clip; height: 80%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); border: 1px solid black; border-radius: 5px; min-height: 300px; max-width: 450px;">
-        <div class="w-100" style="text-align: center; font-size: 1.5rem; background: #8cc8fd; color: #413c3c; padding: 5px; border-radius: 5px;">Get a machine to draw it.</div>
+      <div class="
+            col 
+            half-to-full 
+            overflow-clip h-4/5 border border-black rounded-md min-h-[300px] max-w-[450px] shadow-lg">
+        <div class="w-100 text-center text-xl bg-[#8cc8fd] text-[#413c3c] p-1">Get a machine to draw it.</div>
         <div class="fill img-fill" style="background-color: white; background-image: url('/machine.png');"></div>
       </div>
     </div>
@@ -336,7 +342,7 @@ try {
       </div>
 
       <div class="step-item">
-        <div class="step-text"><span class="step">Step 1) </span>Code an original art piece. Learn from <a href="/guides">our guides</a>.</div>
+        <div class="step-text"><span class="step">Step 1) </span>Code an original art piece. Learn from <a href="/guides">our guides</a>. For submission rules <a href="https://github.com/hackclub/blot/blob/main/docs/GET_A_BLOT.md">read this.</a></div>
         <div class="step-1-css row-to-col">
           {
             curated.map(workshop =>      

diff --git a/guides/_LIST.json b/guides/_LIST.json
@@ -0,0 +1,12 @@
+[
+  { "title": "square-disarray.md" },
+  { "title": "leaf.md" },
+  { "title": "tree.md" },
+  { "title": "10PRINT2.md" },
+  { "title": "eca.md" },
+  { "title": "joydivision.md" },
+  { "title": "landscape.md" },
+  { "title": "mesh.md" },
+  { "title": "raymarching.md" },
+  { "title": "roots.md" }
+]