diff --git a/.github/workflows/build-stack-images.yml b/.github/workflows/build-stack-images.yml
index 358089e..70d7d50 100644
--- 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
new file mode 100644
index 0000000..8da532e
--- /dev/null
+++ 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
index 8131e3f..d797c68 100644
--- 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
index a1cde71..492b71c 100644
--- 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
new file mode 100644
index 0000000..d23fae8
--- /dev/null
+++ 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
new file mode 100644
index 0000000..652f743
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/images/p5/page.js b/images/p5/page.js
new file mode 100644
index 0000000..6ff5373
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ab0a59e
--- /dev/null
+++ 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);
+}