diff --git a/astro.config.mjs b/astro.config.mjs index 8ce36f0..33d0068 100644 --- a/astro.config.mjs +++ b/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', + }, + } }); diff --git a/public/scripts/hello-world.js b/public/scripts/hello-world.js new file mode 100644 index 0000000..bd9ecd6 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/P5Sketch.astro b/src/components/P5Sketch.astro new file mode 100644 index 0000000..77bc46b --- /dev/null +++ b/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; +--- + +
+
+

Figure {figure_id}: {sketch_description} Sketch source + +

+ \ No newline at end of file diff --git a/src/content/blog/blog-with-multi-p5js.mdx b/src/content/blog/blog-with-multi-p5js.mdx new file mode 100644 index 0000000..164d049 --- /dev/null +++ b/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 + + + +After first canvas + + +Before second Canvas + + + +After second canvas +``` diff --git a/src/content/blog/p5js-component-for-astro.mdx b/src/content/blog/p5js-component-for-astro.mdx new file mode 100644 index 0000000..f3245b0 --- /dev/null +++ b/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. + + + +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: + + + + +--- + +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 ❤️❤️❤️ + + diff --git a/src/content/config.ts b/src/content/config.ts index 0905202..07124a4 100644 --- a/src/content/config.ts +++ b/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(), }), }); diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 3ba5a0a..e8044ee 100644 --- a/src/layouts/BlogPost.astro +++ b/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 {title} + + { + includes_p5js && ( + + + ) + }
diff --git a/src/styles/global.css b/src/styles/global.css index fa8e88e..d7340d8 100644 --- a/src/styles/global.css +++ b/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); } \ No newline at end of file