Skip to content

Commit 330ea2c

Browse files
sshh12sshh12
committed
tweaks
1 parent 30787cb commit 330ea2c

File tree

8 files changed

+126
-0
lines changed

8 files changed

+126
-0
lines changed

Diff for: ‎.github/workflows/build-stack-images.yml

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ jobs:
2121
dockerfile: images/NextjsShadcnDockerFile
2222
- name: nextjs-vanilla
2323
dockerfile: images/NextjsVanillaDockerFile
24+
- name: nextjs-p5
25+
dockerfile: images/NextjsP5DockerFile
2426
name: Build ${{ matrix.app.name }} Image
2527
runs-on: ubuntu-latest
2628
permissions:

Diff for: ‎images/NextjsP5DockerFile

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
FROM python:3.11
2+
3+
WORKDIR /
4+
5+
RUN apt-get update && \
6+
apt-get install -y --no-install-recommends \
7+
curl \
8+
wget \
9+
zip \
10+
unzip && \
11+
curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
12+
apt-get install -y --no-install-recommends nodejs && \
13+
apt-get clean && \
14+
rm -rf /var/lib/apt/lists/*
15+
16+
RUN node --version && npm --version
17+
18+
RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
19+
cd frontend && \
20+
npm run build
21+
22+
RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example && \
23+
curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/sketch.js && \
24+
curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/globals.css && \
25+
curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/layout.js && \
26+
curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/page.js
27+
28+
RUN ls -asl /frontend && \
29+
ls -asl /frontend/src/app && \
30+
cat /frontend/package.json
31+
32+
EXPOSE 3000

Diff for: ‎images/NextjsShadcnDockerFile

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
2222
(echo "\n\n\n" | npx shadcn@latest add --yes --all) && \
2323
npm run build
2424

25+
RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
26+
2527
RUN ls -asl /frontend && \
2628
cat /frontend/package.json
2729

Diff for: ‎images/NextjsVanillaDockerFile

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
1919
cd frontend && \
2020
npm run build
2121

22+
RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
23+
2224
RUN ls -asl /frontend && \
2325
cat /frontend/package.json
2426

Diff for: ‎images/p5/globals.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.p5Canvas {
6+
display: block !important;
7+
width: 100vw !important;
8+
height: 100vh !important;
9+
object-fit: contain !important;
10+
}

Diff for: ‎images/p5/layout.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import './globals.css';
2+
import Script from 'next/script';
3+
4+
export const metadata = {
5+
title: 'p5.js App',
6+
description: 'Generated by create next app',
7+
};
8+
9+
export default function RootLayout({ children }) {
10+
return (
11+
<html lang="en">
12+
<head>
13+
<Script
14+
src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"
15+
strategy="beforeInteractive"
16+
/>
17+
<Script
18+
src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"
19+
strategy="beforeInteractive"
20+
/>
21+
<Script
22+
src="https://cdn.jsdelivr.net/npm/p5.brush"
23+
strategy="beforeInteractive"
24+
/>
25+
<Script
26+
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/addons/p5.easycam.min.js"
27+
strategy="beforeInteractive"
28+
/>
29+
<Script
30+
src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
31+
strategy="beforeInteractive"
32+
/>
33+
<Script
34+
src="https://cdn.jsdelivr.net/npm/p5.collide2d"
35+
strategy="beforeInteractive"
36+
/>
37+
</head>
38+
<body>{children}</body>
39+
<Script src="/sketch.js" strategy="afterInteractive" />
40+
</html>
41+
);
42+
}

Diff for: ‎images/p5/page.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Home() {
2+
return <></>;
3+
}

Diff for: ‎images/p5/sketch.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
let x, y, vx, vy;
2+
let size = 30;
3+
4+
function setup() {
5+
createCanvas(windowWidth, windowHeight);
6+
// Start circle in middle of screen
7+
x = width / 2;
8+
y = height / 2;
9+
// Give it some initial velocity
10+
vx = 3;
11+
vy = 2;
12+
}
13+
14+
function windowResized() {
15+
resizeCanvas(windowWidth, windowHeight);
16+
}
17+
18+
function draw() {
19+
background(0);
20+
21+
// Update position
22+
x += vx;
23+
y += vy;
24+
25+
// Bounce off walls
26+
if (x + size / 2 > width || x - size / 2 < 0) vx *= -1;
27+
if (y + size / 2 > height || y - size / 2 < 0) vy *= -1;
28+
29+
// Draw circle
30+
fill(255);
31+
noStroke();
32+
circle(x, y, size);
33+
}

0 commit comments

Comments
 (0)