Skip to content

Commit e23fca1

Browse files
davepagurekdavepagurek
authored
Merge pull request #920 from processing/greetings-from-p5
Add Greetings from p5.js 2.0 tutorial
2 parents b46de9f + 1bd1b31 commit e23fca1

File tree

13 files changed

+1662
-13
lines changed

13 files changed

+1662
-13
lines changed

‎src/components/CodeEmbed/frameForServer.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface CodeBundle {
66
htmlBody?: string;
77
js?: string;
88
base?: string;
9+
scripts?: string[]
910
}
1011

1112
/*
@@ -29,6 +30,7 @@ ${code.css || ""}
2930
<body>${code.htmlBody || ""}</body>
3031
<script id="code" type="text/javascript">${code.js || ""}</script>
3132
<script src="${cdnLibraryUrl}"></script>
33+
${(code.scripts || []).map(src => `<script src="${src}"></script>`).join('\n')}
3234
`.replace(/\u00A0/g, " ");
3335

3436
export interface CodeFrameProps {
@@ -38,6 +40,7 @@ export interface CodeFrameProps {
3840
height?: number | string;
3941
width?: number | string;
4042
base?: string;
43+
scripts?: string[]
4144
}
4245

4346
/*
@@ -88,6 +91,7 @@ export const CodeFrameForServer = (props: CodeFrameProps) => {
8891
css: props.cssCode,
8992
htmlBody: props.htmlBodyCode,
9093
base: props.base,
94+
scripts: props.scripts,
9195
})}
9296
sandbox="allow-scripts allow-popups allow-modals allow-forms"
9397
aria-label="Code Preview"

‎src/components/CodeEmbed/index.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { Icon } from "../Icon";
2323
* allowSideBySide?: boolean
2424
* fullWidth?: boolean
2525
* includeSound?: boolean
26+
* scripts?: string[]
2627
* }
2728
*/
2829
export const CodeEmbed = (props) => {
@@ -96,7 +97,10 @@ export const CodeEmbed = (props) => {
9697
base={props.base}
9798
frameRef={codeFrameRef}
9899
lazyLoad={props.lazyLoad}
99-
scripts={props.includeSound ? [cdnSoundUrl] : []}
100+
scripts={[
101+
...(props.includeSound ? [cdnSoundUrl] : []),
102+
...(props.scripts ?? []),
103+
]}
100104
/>
101105
</div>
102106
<div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>

‎src/components/EditableSketch/index.astro

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface Props {
66
width?: number;
77
height?: number;
88
base?: string;
9+
scripts?: string[];
910
}
1011
1112
const { props } = Astro;
@@ -22,4 +23,4 @@ const vertical = !previewWidth || previewWidth > 200
2223
2324
---
2425

25-
<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} />
26+
<CodeEmbed client:load initialValue={props.code.trim()} previewWidth={previewWidth} previewHeight={previewHeight} base={props.base} previewable editable allowSideBySide={!vertical} fullWidth={!vertical} scripts={props.scripts} />

‎src/components/SketchEmbed/index.astro

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
---
22
import { CodeFrameForServer } from "../CodeEmbed/frameForServer";
3+
import { CodeFrame } from "../CodeEmbed/frame";
34
45
interface Props {
56
code: string;
67
cssCode?: string;
78
bodyCode?: string;
89
width?: number | string;
910
height?: number | string;
11+
scripts?: string[];
12+
hideOffscreen?: boolean;
1013
}
1114
1215
const defaultHeight = 400,
1316
defaultWidth = "100%";
1417
15-
const { code, cssCode, bodyCode, height, width } = Astro.props;
18+
const { code, cssCode, bodyCode, height, width, scripts, hideOffscreen } = Astro.props;
1619
// A component that displays a full-width sketch without showing its code.
17-
---
1820
19-
<CodeFrameForServer
20-
jsCode={code}
21-
cssCode={cssCode}
22-
htmlBodyCode={bodyCode}
23-
height={height || defaultHeight}
24-
width={width || defaultWidth}
25-
/>
21+
const frameProps = {
22+
jsCode: code,
23+
cssCode: cssCode,
24+
htmlBodyCode: bodyCode,
25+
height: height || defaultHeight,
26+
width: width || defaultWidth,
27+
scripts,
28+
};
29+
---
30+
{hideOffscreen ? (
31+
<CodeFrame client:only {...frameProps} />
32+
) : (
33+
<CodeFrameForServer {...frameProps} />
34+
)}

‎src/content/tutorials/config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import { z, defineCollection } from "astro:content";
22
import { relatedContent } from "../shared";
33

44
export const categories = [
5+
"2.0",
56
"introduction",
67
"drawing",
78
"web-design",
89
"accessibility",
910
"criticalAI",
10-
"p5-strands",
11+
// "p5-strands",
1112
"webgl",
1213
"advanced",
1314
] as const;

‎src/content/tutorials/en/intro-to-p5-strands.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "p5.strands: Introduction to Shaders"
33
description: An introduction to shaders using p5.strands
4-
category: p5-strands
4+
category: "2.0"
55
categoryIndex: 0
66
featuredImage: ../images/featured/intro-to-p5-strands.png
77
featuredImageAlt: An abstract, cosmic scene with particles

0 commit comments

Comments
 (0)