cavo789 🐳

Deployed on my site since three weeks en avant-première. Works perfectly and nice animation.

A Docusaurus component that alerts readers the article is over a year old | Christophe Avonture Displays a warning banner when the page content is over a year old

When a #Docusaurus technical blog post was written a year or more ago, perhaps some things are no longer entirely relevant; versions may have changed, a particular tool may generate a deprecation notice, or something else may have happened.

Let's display a banner to inform the reader.

Often, the only way to understand an extension is to test it live. With this new article, the wow factor is definitely there; you can play around and imagine what it would look like on your own site; nice!

Yoo-hoo, but who is this rock star? ;)

And to demand that you repair his site without delay. Immédiatement 😇

Blog upgraded, zero problem. I've plenty of custom React components / Remark plugins and no conflicts at all. Great work ! Thanks for the excellent work.

How I used Google Gemini Nano Banana on my blog | Christophe Avonture How I used Google Gemini Nano Banana on my blog

Over the last few days, I've redone all the images on my blog using Google Nano Banana, where you can upload one or more images, ask it to isolate one or more characters, include one or more logos, etc. and generate a new image that uses the same style as the others. In short, it's incredibly easy.

Running a HTML site in seconds using Docker | Christophe Avonture Running a HTML site in seconds using Docker

Learn how to start a HTML site with #Docker in just one CLI. Even using MS-DOS.

A component for showing code snippets in a Docusaurus blog | Christophe Avonture Learn how to build a custom React component to embed dynamic code snippets in your Docusaurus blog for a more interactive reader experience.

#Docusaurus Build a dynamic #Snippet component that auto-updates code from your source files, ensuring your articles are always current and impactful.

Thanks to @docuxlab.com for his LogoIcon component.

(juste pour conclure) L'antivirus ne me mettra pas à l'abri de sites où il y aurait, donnons juste un exemple, des images NSFW (not safe for work) ou des images autrement plus trash.
Merci pour l'échange.

Sur du papier et/ou s'il faut modifier l'URL par la suite; en effet. Quand tu écrit "il faut rester vigilant"; sais-tu s'il existe un moyen "visuel" avant de cliquer pour savoir si c'est safe ou pas? Il me semble que non. Note: cela s'applique tout autant aux QRCode

Creating a search&replace plugin for Docusaurus | Christophe Avonture Creating a search&replace plugin for Docusaurus

Creation of a #Docusaurus plugin to perform Search&Replace, i.e., during the HTML code generation phase of the site, replace certain defined values with another string of characters.

One could imagine a snippets-type use case for this i.e. you put things like $CLIENT_ID$ and replace it on-the-fly.

À titre personnel, je n'ai jamais eu ce besoin puisque je n'en comprends réellement l'intérêt. Quand faudrait-il raccourcir ? Et, second blocage: si je clique, je vais où ? Puis-je avoir confiance, où vais-je atterrir ? Du coup, non, je ne clique jamais sur ce type de liens.

I (myself; I didn't have any help) understood, even before my first coffee, the added-value of using this new component in my own. I was able to delete the twenty or so SVGs I was using and had to manage.
With a little help from LogoIcon and the right JSX coding, everything looks better and cleaner.

The demos at the end of the article are amazing ♥️

Pretty cool. Great idea

Some tips and tricks when written articles for Docusaurus | Christophe Avonture Some tips and tricks when written articles for Docusaurus

Updating my #Docusaurus tips article by adding a chapter about the #Highlight React component.

Providing a go to the top button in Docusaurus posts | Christophe Avonture Providing a go to the top button in Docusaurus posts

Adding a #ScrollToTopButton feature on my #Docusaurus website.

Now, a nice meerkat will be displayed during the vertical scroll on long articles. Just click on it and you'll jump back to the top with a smooth animation.

React component created by @docuxlab.com

PHP development in a devcontainer with preinstalled code quality tools | Christophe Avonture PHP development in a devcontainer with preinstalled code quality tools

When you're already using #Docker and #vscode , you can code inside a #devcontainer.

You'll open your project with VSCode but everything will already be configured for that specific project: extensions, configuration, tools (like enabling XDebug here).

Python - Code Quality tools | Christophe Avonture Python - Code Quality tools

List of #CodeQuality tools I'm using for #Python

1. Pylint
2. Autoflake
3. isort
4. vulture
5. pydocstyle
6. mypy
7. Pyright
8. Black
9. prospector
10. Extra - Ruff

Organize Your Docusaurus Content with a Custom Series Component | Christophe Avonture Organize Your Docusaurus Content with a Custom Series Component

One about Docusaurus ? www.avonture.be/blog/docusau....

Set of React components for adding the notion of series in docusaurus blog.

Organize Your Docusaurus Content with a Custom Series Component | Christophe Avonture Organize Your Docusaurus Content with a Custom Series Component

My new #Docusaurus component (and plugin) to be able to create a list of articles as part of a series.

Also, create a /series and /series/:slug pages to promote them.

Creating series will allow authors to cut off very big articles in smaller ones, increase SEO and it's more professional, no? ;)

Display Docusaurus Blog Posts as Cards - A Step-by-Step Guide | Christophe Avonture Display Docusaurus Blog Posts as Cards - A Step-by-Step Guide

Overriding the native #Docusaurus tags page to display articles as cards; much nicer when there are a large number of articles.

The Cards component is the one of @docuxlab.com

Learn how to proceed by reading my latest article.

I love that Dino! So cute ;)

The little dinosaur 🦕 already knew all this, didn't he? 😉 More to come 😜

Displaying related posts below our Docusaurus article | Christophe Avonture Displaying related posts below our Docusaurus article

Because this doesn't exist natively in #Docusaurus, I created a React component called RelatedBlogPosts that displays related articles.

It increases the interest of each post (and their visibility) when a visitor comes for a specific post and sees that there are other things that may interest them.

Why hilarious ? For learning purposes, it's 1n excellent way, indeed.

I also played yesterday with these IA for writing functional tests using Pest v4, almost working too. Sometimes IA is using an inexisting method but this is perhaps just 10%.

I'm using chatGPT (free version) or Gemini for writing Docusaurus React component, mostly working at first attempt. It's crazy...

Writing functional tests with Pest | Christophe Avonture Writing functional tests with Pest

After #Behat, after #Cypress let's play with #Pest and write some browser tests.

Such functional tests will allow you to automate actions on your website like navigating, filling in forms, ... and do assertions like checking DOM elements.

In this article, let's do everything in #Docker. No config.

Introduction to Behat | Christophe Avonture Introduction to Behat

Introduction to #Behat which is a PHP framework to allow functional tests on your website.

Behat is perhaps quite old now (but still working).

Let's see in deep how to implement it and make some checks .