Merge pull request #440 from processing/fix/examples

Fixes for examples layouts

Author: davepagurek

src/components/CodeEmbed/index.jsx

@@ -41,6 +41,8 @@ export const CodeEmbed = (props) => {
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
   }
 
+  const largeSketch = previewWidth && previewWidth > 770 - 60;
+
   // Quick hack to make room for DOM that gets added below the canvas by default
   const domMatch = /create(Button|Select|P|Div|Input)/.exec(initialCode);
   if (domMatch && previewHeight) {
@@ -74,11 +76,11 @@ export const CodeEmbed = (props) => {
 
   return (
     <div
-      className={`my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide && "lg:flex-row"} ${props.fullWidth && "full-width"}`}
+      className={`my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
     >
       {props.previewable ? (
         <div
-          className={`ml-0 flex w-fit gap-[20px] ${props.allowSideBySide ? "" : "flex-col lg:flex-row"}`}
+          className={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : (props.allowSideBySide ? "" : "flex-col lg:flex-row")}`}
         >
           <div>
             <CodeFrame
@@ -90,7 +92,7 @@ export const CodeEmbed = (props) => {
               lazyLoad={props.lazyLoad}
             />
           </div>
-          <div className="flex gap-2.5 md:flex-row lg:flex-col">
+          <div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>
             <CircleButton
               className="bg-bg-gray-40"
               onClick={updateOrReRun}

src/content/examples/en/03_Imported_Media/05_Video/code.js

@@ -13,7 +13,7 @@ function setup() {
   // This createVideo() function will build a p5.MediaElement class.
   // It's best to upload multiple video formats so the video
   // is visible within different browsers.
-  video = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
+  video = createVideo(['/assets/fingers.mov', '/assets/fingers.webm']);
 
   // Create a button next to the video that says 'play.'
   button = createButton('play');

src/content/examples/en/03_Imported_Media/06_Video_Canvas/code.js

@@ -10,7 +10,7 @@ function setup() {
   // use the createVideo() function to load the video into the code.
   // It's best to upload multiple video formats so the video
   // is visible within different browsers.
-  video = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
+  video = createVideo(['/assets/fingers.mov', '/assets/fingers.webm']);
 
   // By default, the video will render as its own DOM element.
   // Use the hide() method to remove the DOM instance of the video.

src/content/examples/en/03_Imported_Media/More/Video_Pixels.js

@@ -11,7 +11,7 @@ let fingers;
 function setup() {
   createCanvas(320, 240);
   // specify multiple formats for different browsers
-  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
+  fingers = createVideo(['/assets/fingers.mov', '/assets/fingers.webm']);
   fingers.loop();
   fingers.hide();
   noStroke();

src/content/examples/en/11_3D/More/basic_shader.js

@@ -10,7 +10,7 @@ let theShader;
 
 function preload(){
   // load the shader
-  theShader = loadShader('/assets/basic.vert', 'assets/basic.frag');
+  theShader = loadShader('/assets/basic.vert', '/assets/basic.frag');
 }
 
 function setup() {

src/content/examples/en/11_3D/More/passing_shader_uniforms.js

@@ -10,7 +10,7 @@
 
  function preload(){
    // load the shader
-   theShader = loadShader('/assets/uniforms.vert', 'assets/uniforms.frag');
+   theShader = loadShader('/assets/uniforms.vert', '/assets/uniforms.frag');
  }
 
  function setup() {

src/content/examples/en/11_3D/More/shader_using_webcam.js

@@ -12,7 +12,7 @@
 
  function preload(){
    // load the shader
-   theShader = loadShader('/assets/webcam.vert', 'assets/webcam.frag');
+   theShader = loadShader('/assets/webcam.vert', '/assets/webcam.frag');
  }
 
  function setup() {

src/content/examples/en/11_3D/More/textures.js

@@ -12,7 +12,7 @@ function setup() {
   createCanvas(710, 400, WEBGL);
 
   img = loadImage('/assets/cat.jpg');
-  vid = createVideo(['assets/360video_256crop_v2.mp4']);
+  vid = createVideo(['/assets/360video_256crop_v2.mp4']);
   vid.elt.muted = true;
   vid.loop();
   vid.hide();

src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/code.js

@@ -3,7 +3,7 @@ let particleTexture;
 let particleSystem;
 
 function preload() {
-  particleTexture = loadImage('assets/particle_texture.png');
+  particleTexture = loadImage('/assets/particle_texture.png');
 }
 
 function setup() {

src/layouts/EventLayout.astro

@@ -46,7 +46,7 @@ const relatedEvents =
   {
     entry.data.featuredImage && entry.data.featuredImageAlt && (
       <Image
-        containerClass="relative h-fit w-fit max-w-[750px]"
+        containerClass="relative h-fit w-fit max-w-[770px]"
         src={entry.data.featuredImage}
         alt={entry.data.featuredImageAlt}
       />