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 -
+
- editor + editor - guides + guides - gallery + gallery - build guide + build guide - source + source
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) => { + 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.
-
+
+
Code an art piece.
+
-
-
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