astro.config.mjs

@@ -1,6 +1,4 @@
 import { defineConfig } from 'astro/config';
-
-// import rehypeKatex from 'rehype-katex';
 import rehypeMathjax from 'rehype-mathjax';
 import remarkMath from 'remark-math';
 import mdx from '@astrojs/mdx';
@@ -25,4 +23,9 @@ export default defineConfig({
         ),
         sitemap(),
     ],
+    markdown: {
+        shikiConfig:{
+            theme:'catppuccin-macchiato',
+        },
+    }
 });

public/scripts/hello-world.js

@@ -0,0 +1,9 @@
+function setup() {
+    let mycanvas = createCanvas(400, 400);
+    mycanvas.parent('hello-world');
+    background(0);
+}
+function draw() {
+    fill(255);
+    ellipse(mouseX, mouseY, 80, 80);
+}

src/components/P5Sketch.astro

@@ -0,0 +1,26 @@
+---
+const { sketch_path, canvas_id, figure_id, sketch_description }  = Astro.props;
+const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path;
+---
+
+<div class="p5-div" id={canvas_id}>
+</div>
+<p><b>Figure {figure_id}</b>: {sketch_description} <a href={sketch_url}><b>Sketch source</b></a>
+
+</p>
+<style>
+    .p5-div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    canvas {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    p {
+        text-align: center;
+    }
+</style>

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

@@ -0,0 +1,23 @@
+---
+title: 'Third post'
+description: 'First post of this website that tests many things'
+pubDate: '2024-10-29'
+includes_p5js: True
+p5_script_path: '../../scripts/multi-sketch.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+Before first Canvas
+
+<P5Sketch sketch_path='scripts/multi-sketch.js' canvas_id='canvas1' figure_id='1' sketch_description='descccrripton a very good one' />
+
+After first canvas
+
+
+Before second Canvas
+
+<P5Sketch sketch_path='scripts/multi-sketch.js' canvas_id='canvas2' figure_id='2' sketch_description='descccrripton a very good one' />
+
+After second 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/content/config.ts

@@ -11,6 +11,8 @@ const blog = defineCollection({
 		updatedDate: z.coerce.date().optional(),
 		filename: z.string().optional(),
 		heroImage: z.string().optional(),
+		includes_p5js: z.boolean().optional(),
+		p5_script_path: z.string().optional(),
 	}),
 });
 

src/layouts/BlogPost.astro

@@ -10,7 +10,7 @@ import type { CollectionEntry } from "astro:content";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, pubDate, updatedDate, filename, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate, filename, heroImage, includes_p5js, p5_script_path } = Astro.props;
 
 const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/content/blog/" + filename;
 
@@ -21,6 +21,13 @@ const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/cont
     <head>
         <Metadata />
         <title>{title}</title>
+        <!-- if includes_p5js add p5_js -->
+        {
+            includes_p5js && (
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.min.js" integrity="sha512-q0pQ5+tDUElSVqirQ85OnmLKQvPjeYPlRjJq2dsOwhrGxGjFl0/c36Z+O5DhZNkFMvyGVSpNZ+Q+pjhG0U47iw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+                <script is:inline src={p5_script_path}></script>
+            )
+        }
     </head>
     <body>
         <Header />

src/styles/global.css

@@ -50,3 +50,28 @@ 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);
+}