tweaks

sshh12 · Dec 29, 2024 · 330ea2c · 330ea2c
1 parent 30787cb
commit 330ea2c
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 0 deletions.
diff --git a/.github/workflows/build-stack-images.yml b/.github/workflows/build-stack-images.yml
@@ -21,6 +21,8 @@ jobs:
             dockerfile: images/NextjsShadcnDockerFile
           - name: nextjs-vanilla
             dockerfile: images/NextjsVanillaDockerFile
+          - name: nextjs-p5
+            dockerfile: images/NextjsP5DockerFile
     name: Build ${{ matrix.app.name }} Image
     runs-on: ubuntu-latest
     permissions:

diff --git a/images/NextjsP5DockerFile b/images/NextjsP5DockerFile
@@ -0,0 +1,32 @@
+FROM python:3.11
+
+WORKDIR /
+
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    curl \
+    wget \
+    zip \
+    unzip && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install -y --no-install-recommends nodejs && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+RUN node --version && npm --version
+
+RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
+    cd frontend && \
+    npm run build
+
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example && \
+    curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/sketch.js && \
+    curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/globals.css && \
+    curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/layout.js && \
+    curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/page.js
+
+RUN ls -asl /frontend && \
+    ls -asl /frontend/src/app && \
+    cat /frontend/package.json
+
+EXPOSE 3000
diff --git a/images/NextjsShadcnDockerFile b/images/NextjsShadcnDockerFile
@@ -22,6 +22,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
     (echo "\n\n\n" | npx shadcn@latest add --yes --all) && \
     npm run build
 
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
+
 RUN ls -asl /frontend && \
     cat /frontend/package.json  
 

diff --git a/images/NextjsVanillaDockerFile b/images/NextjsVanillaDockerFile
@@ -19,6 +19,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
     cd frontend && \
     npm run build
 
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
+
 RUN ls -asl /frontend && \
     cat /frontend/package.json
 

diff --git a/images/p5/globals.css b/images/p5/globals.css
@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.p5Canvas {
+  display: block !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  object-fit: contain !important;
+}
diff --git a/images/p5/layout.js b/images/p5/layout.js
@@ -0,0 +1,42 @@
+import './globals.css';
+import Script from 'next/script';
+
+export const metadata = {
+  title: 'p5.js App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <Script
+          src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="https://cdn.jsdelivr.net/npm/p5.brush"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/addons/p5.easycam.min.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          src="https://cdn.jsdelivr.net/npm/p5.collide2d"
+          strategy="beforeInteractive"
+        />
+      </head>
+      <body>{children}</body>
+      <Script src="/sketch.js" strategy="afterInteractive" />
+    </html>
+  );
+}
diff --git a/images/p5/page.js b/images/p5/page.js
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <></>;
+}
diff --git a/images/p5/sketch.js b/images/p5/sketch.js
@@ -0,0 +1,33 @@
+let x, y, vx, vy;
+let size = 30;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  // Start circle in middle of screen
+  x = width / 2;
+  y = height / 2;
+  // Give it some initial velocity
+  vx = 3;
+  vy = 2;
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+  background(0);
+
+  // Update position
+  x += vx;
+  y += vy;
+
+  // Bounce off walls
+  if (x + size / 2 > width || x - size / 2 < 0) vx *= -1;
+  if (y + size / 2 > height || y - size / 2 < 0) vy *= -1;
+
+  // Draw circle
+  fill(255);
+  noStroke();
+  circle(x, y, size);
+}