diff --git a/astro/src/components/DropBox.tsx b/astro/src/components/DropBox.tsx
index 7c3ddf662..41cf1bb79 100644
--- 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
index 81e56fff5..eee56783d 100644
--- 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
index 21bf2c206..ee7bed766 100644
--- a/astro/src/components/Navbar.astro
+++ b/astro/src/components/Navbar.astro
@@ -45,7 +45,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
blot
-
+
diff --git a/astro/src/pages/guides.astro b/astro/src/pages/guides.astro
index 32de36f4b..6a823bcf6 100644
--- 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;
- }
-
-
+
-
-
-
Guides
-
- A collection of various guides created by Hack Clubbers that anyone can
- learn from and contribute to!
-
+
+
Guides
+
+ A collection of various guides created by Hack Clubbers that anyone can
+ learn from and contribute to!
-
- {
- workshops
- .sort((a, b) =>
- a.frontmatter.pinned ? -1 : b.frontmatter.pinned ? 1 : 0
+
+
+
+ {
+ 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 (
+
+
+
+ {workshop.frontmatter.title}
+
+
)
- .map(workshop => {
- return (
-
-
-
- {workshop.frontmatter.title}
-
-
- )
- })
- }
-
+ })
+ }
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 26c5330e4..bd5372d49 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -271,15 +271,21 @@ try {
-
-
Write code in the editor.
-
+
-
-
Get a machine to draw it.
+
+
Get a machine to draw it.
@@ -336,7 +342,7 @@ try {
-
Step 1) Code an original art piece. Learn from
our guides.
+
Step 1) Code an original art piece. Learn from
our guides. For submission rules
read this.
{
curated.map(workshop =>
diff --git a/guides/_LIST.json b/guides/_LIST.json
new file mode 100644
index 000000000..6df893474
--- /dev/null
+++ 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" }
+]
\ No newline at end of file