feat: Create minimal package

inpyjamas · Dec 3, 2024 · fe70dd1 · fe70dd1
1 parent 379b2e6
commit fe70dd1
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 21 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -19,7 +19,8 @@
 		width: 100%;
 		height: 100%;
 		display: flex;
-		justify-content: center;
+		justify-content: space-between;
 		align-items: center;
+		flex-direction: column;
 	}
 </style>
diff --git a/src/pages/api/package.ts b/src/pages/api/package.ts
@@ -22,9 +22,12 @@ const getNpmTarball: (
 	return data.dist.tarball;
 };
 
-export const GET: APIRoute = async () => {
+export const GET: APIRoute = async ({ url }) => {
 	const modules = ["p5", "@ff6347/p5-easing"];
 
+	const params = url.searchParams;
+	const isMinimal = params.get("minimal") === "true";
+
 	const zip = new JSZip();
 	const moduleContents = await Promise.all(
 		modules.map(async (moduleName) => {
@@ -99,9 +102,10 @@ export const GET: APIRoute = async () => {
 		}),
 	);
 
-	zip.file(
-		".editorconfig",
-		`root = true
+	if (!isMinimal) {
+		zip.file(
+			".editorconfig",
+			`root = true
 [*]
 indent_style = tab
 indent_size = 2
@@ -113,18 +117,19 @@ max_line_length = 80
 
 [*.{yml,yaml}]
 indent_style = space`,
-	);
-	zip.file(
-		".vscode/extensions.json",
-		`{
+		);
+		zip.file(
+			".vscode/extensions.json",
+			`{
 	"recommendations": [
 		"ms-vscode.live-server",
 		"esbenp.prettier-vscode",
 		"ritwickdey.liveserver"
 	]
 }`,
-	);
-	zip.file(".vscode/settings.json", `{ "prettier.useEditorConfig": true }`);
+		);
+		zip.file(".vscode/settings.json", `{ "prettier.useEditorConfig": true }`);
+	}
 
 	zip.file(
 		"index.html",
@@ -159,9 +164,9 @@ indent_style = space`,
     <div id="sketch"></div>
     <a href="index.js">souce code</a>
     </main>
-    <script src="./modules/p5/lib/p5.min.js"></script>
-    <!-- <script src="./modules/p5/lib/addons/p5.sound.min.js"></script> -->
-   <!-- <script src="./modules/@ff6347/p5-easing/dist/p5.easing.min.js"></script> -->
+    <script src="${isMinimal ? "lib/p5.min.js" : "./modules/p5/lib/p5.min.js"}"></script>
+    <!-- <script src="${isMinimal ? "lib/p5.sound.min.js" : "./modules/p5/lib/addons/p5.sound.min.js"}"></script> -->
+   <!-- <script src="${isMinimal ? "lib/p5.easing.min.js" : "./modules/@ff6347/p5-easing/dist/p5.easing.min.js"}"></script> -->
 
     <script src="index.js"></script>
 </body>
@@ -186,7 +191,19 @@ function draw() {}
 	moduleContents.forEach((module) => {
 		// Add entire package contents to modules directory
 		Object.entries(module.files).forEach(([filepath, content]) => {
-			zip.file(`modules/${module.name}/${filepath}`, content);
+			if (isMinimal) {
+				if (filepath.includes("p5.min.js")) {
+					zip.file(`lib/p5.min.js`, content);
+				}
+				if (filepath.includes("p5.easing.min.js")) {
+					zip.file(`lib/p5.easing.min.js`, content);
+				}
+				if (filepath.includes("p5.sound.min.js")) {
+					zip.file(`lib/p5.sound.min.js`, content);
+				}
+			} else {
+				zip.file(`modules/${module.name}/${filepath}`, content);
+			}
 		});
 	});
 
@@ -195,7 +212,7 @@ function draw() {}
 	return new Response(zipContent, {
 		headers: {
 			"Content-Type": "application/zip",
-			"Content-Disposition": `attachment; filename="p5-starter-${Date.now()}.zip"`,
+			"Content-Disposition": `attachment; filename="p5-starter-${Date.now()}-${isMinimal ? "minimal" : "full"}.zip"`,
 		},
 	});
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,28 +7,75 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout>
 	<main>
-		<a href="/api/package" download="package">download p5.js kit</a>
+		<h1>p5.js Starter Kit</h1>
+		<p>
+			An opinionated starter kit for p5.js. It contains always the latest p5.js
+			library and sound addons plus the <a
+				href="https://www.npmjs.com/package/@ff6347/p5-easing"
+				target="_blank">@ff6347/p5-easing</a
+			> library.
+		</p>
+		<p>Download the</p>
+		<a href="/api/package" download="package" id="download-link">
+			full p5.js kit</a
+		>
+		<p>
+			or grab the
+			<a
+				href="/api/package?minimal=true"
+				download="package"
+				id="download-link-minimal"
+			>
+				minimal p5.js kit.</a
+			>
+
+			The minimal version does not contain files like .editorconfig, .gitignore,
+			etc. (an attempt to make Windows Defender happy <code>¯\_(ツ)_/¯</code>)
+		</p>
 	</main>
+	<footer>
+		<p>
+			Made with &heartsuit; by <a
+				href="https://fabianmoronzirfas.me"
+				target="_blank">ff6347</a
+			> in his pyjamas. Check out the source on <a
+				href="https://github.com/inpyjamas/p5-starter-kit"
+				target="_blank">GitHub</a
+			>
+		</p>
+	</footer>
 </Layout>
 <style>
-	main {
-		text-align: center;
+	* {
 		/* Geometric Humanist */
 		font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
 			sans-serif;
+		box-sizing: border-box;
+	}
+	main {
 		font-weight: normal;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+		max-width: 60ch;
 	}
-	main a {
+	main a#download-link {
 		display: inline-block;
 		padding: 1rem 2rem;
 		background-color: #f0f0f0;
 		color: #333;
 		text-decoration: none;
 		border-radius: 0rem;
 		transition: all 250ms;
+		max-width: fit-content;
 	}
-	main a:hover {
+	main a#download-link:hover {
 		background-color: #ff6347;
 		color: #f0f0f0;
 	}
+
+	footer {
+		font-size: 0.8rem;
+	}
 </style>