finalize the blogpost

public/scripts/hello-world.js

@@ -1,6 +1,7 @@
 function setup() {
     let mycanvas = createCanvas(400, 400);
     mycanvas.parent('hello-world');
+    background(0);
 }
 function draw() {
     fill(255);

public/scripts/multi-sketch.js

@@ -1,55 +0,0 @@
-let canvas1 = function ( p ) {
-  p.setup = function() {
-    p.createCanvas(710, 400, p.WEBGL);
-    p.angleMode(p.DEGREES);
-    p.strokeWeight(5);
-    p.noFill();
-    p.stroke(32, 8, 64);
-  }
-
-  p.draw = function() {
-    p.background(250, 180, 200);
-
-    // Call every frame to adjust camera based on mouse/touch
-    p.orbitControl();
-
-    // Rotate rings in a half circle to create a sphere of cubes
-    for (let zAngle = 0; zAngle < 180; zAngle += 30) {
-      // Rotate cubes in a full circle to create a ring of cubes
-      for (let xAngle = 0; xAngle < 360; xAngle += 30) {
-        p.push();
-
-        // Rotate from center of sphere
-        p.rotateZ(zAngle);
-        p.rotateX(xAngle);
-
-        // Then translate down 400 units
-        p.translate(0, 400, 0);
-        p.box();
-        p.pop();
-      }
-    }
-  }
-};
-
-let canvas2 = function ( p ) {
-
-
-  p.setup = function() {
-    p.createCanvas(710, 400);
-    p.background(250, 180, 200);
-  }
-
-  p.draw = function() {
-    // draw a circle at the mouse position
-    p.fill(255, 0, 0);
-    p.stroke(0);
-    p.strokeWeight(0);
-    p.ellipse(p.mouseX, p.mouseY, 80, 80);
-
-  }
-}
-
-
-var mycanvas1 = new p5(canvas1, 'canvas1');
-var myp5 = new p5(canvas2, 'canvas2');

src/content/blog/blog-with-p5js.mdx

@@ -1,15 +0,0 @@
----
-title: 'Second post'
-description: 'First post of this website that tests many things'
-pubDate: '2024-10-26'
-includes_p5js: True
-p5_script_path: '../../scripts/hello-world.js'
----
-
-import P5Sketch from '../../components/P5Sketch.astro';
-
-Before Canvas
-
-<P5Sketch sketch_path='scripts/hello-world.js' canvas_id='hello-world' figure_id='1' sketch_description='descccrripton a very good one' />
-
-After canvas

src/content/blog/p5js-component-for-astro.mdx

@@ -0,0 +1,92 @@
+---
+title: 'A new P5.js component for Astro'
+description: 'Demonstrating the new P5.js component for Astro'
+pubDate: '2024-10-31'
+includes_p5js: True
+p5_script_path: '../../scripts/hello-world.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+In 2021, I had a great interest in procedural art and generative coding. I loved watching [The Coding Train](https://www.youtube.com/@TheCodingTrain). So I learned all about [Processing language](https://processing.org/)[^1] and [P5.js](https://p5js.org/). This was super fun and ignited my love for programming again.
+
+[^1]: Nowadays it looks like it has been abandoned in favor of P5.js
+
+I have been drafting a blogpost that i plan to write beautiful plots and even make some of them interactive. So I thought P5.js scripts would be awesome for this considering the fact that i can write components in astro.
+
+Here is the an example blogpost:
+
+
+```astro
+---
+title: 'title'
+description: 'description'
+pubDate: '2024-10-31'
+includes_p5js: True
+p5_script_path: '../../scripts/hello-world.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+Text before the canvas.
+
+<P5Sketch sketch_path='scripts/hello-world.js' canvas_id='hello-world' figure_id='1' sketch_description='sketch explanation' />
+
+Text after the canvas.
+```
+
+Here you can see the simple P5.js script that creates the canvas:
+
+```js
+function setup() {
+    let mycanvas = createCanvas(400, 400);
+    mycanvas.parent('hello-world');
+    background(0);
+}
+function draw() {
+    fill(255);
+    ellipse(mouseX, mouseY, 80, 80);
+}
+```
+
+And inside the astro component there is a div html tag with the id of *hello-world* so that the P5.js knows where to put the canvas.
+
+There was an issue I encountered when trying to show more than one sketch and it was only generating one of them. And i found out that to generate more than one sketch in one page i needed to merge all scripts into one file like this.
+
+```js
+let canvas1 = function ( p ) {
+  p.setup = function() {
+    ...
+  }
+  p.draw = function() {
+    ...
+  }
+};
+
+let canvas2 = function ( p ) {
+  p.setup = function() {
+    ...
+  }
+  p.draw = function() {
+    ...
+  }
+}
+
+var mycanvas1 = new p5(canvas1, 'canvas1');
+var myp5 = new p5(canvas2, 'canvas2');
+```
+
+Now that I resolve my last issue i can show you the last
+
+Here is how it looks:
+
+<P5Sketch sketch_path='scripts/hello-world.js' canvas_id='hello-world' figure_id='1' sketch_description='Very simple P5.js sketch that prints a circle at the position of your cursor' />
+
+
+---
+
+I have also been thinking to add a component for [THREE.js](https://threejs.org/). I made a [Sphere Eversion Animation](https://osmanbayram.com/sphere-eversion-animation/) once. And i loved it a lot. But i thought that this would be a little overkill.
+
+See you in the next one ❤️❤️❤️
+
+

src/styles/global.css

@@ -49,4 +49,29 @@ a {
 
 a:hover {
     color: rgb(0, 200, 200);
+}
+
+pre {
+    background-color: rgb(30, 35, 50);
+    padding: 1rem;
+    border-radius: 5px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+code {
+    counter-reset: step;
+    counter-increment: step 0;
+    /* add a little space inside */
+    /* margin: 1rem 0; */
+}
+
+code .line::before {
+    content: counter(step);
+    counter-increment: step;
+    width: 1rem;
+    margin-right: 1.5rem;
+    display: inline-block;
+    text-align: right;
+    color: rgba(115,138,148,.4);
 }