Trending

#AstroJS

Latest posts tagged with #AstroJS on Bluesky

Latest Top
Trending

Posts tagged #AstroJS

screenshot of opencourse - one of Petipois astro projects

screenshot of opencourse - one of Petipois astro projects

I am on a mission to make @astrodotbuild the easiest framework to migrate to and the best to build with.

Tools
WPress2Astro
Figstro
Opencourse (free template)

Platforms
CapsuleTalent
LudumLanding

www.petipois.com/projects
#astrojs #buildinpublic #webdev #gamedev #fullstack

7 2 0 0
Preview
Cmd+K pour tous : Intégrer une recherche instantanée avec Pagefind Offrez à vos utilisateurs une expérience de navigation premium avec une barre de recherche globale Cmd+K sur votre site statique Astro, propulsée par Pagefind.

Au programme : un index ultra-léger généré au build (merci Rust 🦀), une modale propre avec la balise native <dialog>, et un petit script Vanilla JS pour écouter le raccourci clavier.

Le guide complet est ici :
🔗 www.vbesse.com/blog/recherc...

#AstroJS #WebDev #Frontend #UX #Pagefind 🧵 (2/2)

0 0 0 0
Preview
3 micro-fonctionnalités pour une UX de lecture parfaite Le contenu est roi, mais l'expérience utilisateur est reine. Découvrez comment implémenter une barre de progression, un sommaire et un bouton de copie sur votre blog Astro.

Au menu : Barre de progression de lecture, Sommaire dynamique (merci l'extraction native d'Astro !), et le fameux bouton "Copier". Tout est compatible avec le ClientRouter. ✨

Le code est dispo ici :
🔗 www.vbesse.com/blog/micro-f...

#AstroJS #WebDev #UX #JavaScript (2/2)

0 0 0 0
Preview
Dark Mode sans flash : L'implémentation parfaite avec Astro et CSS Variables Marre de brûler la rétine de vos visiteurs avec un flash blanc au chargement ? Découvrez comment créer un Dark Mode parfait et persistant avec Astro.

Le secret ? Un petit script is:inline bien placé dans le <head>, quelques variables CSS, et une bonne gestion des événements astro:after-swap pour ceux qui utilisent le ClientRouter. 🛡️

Le code est ici :
🔗 www.vbesse.com/blog/dark-fl...

#AstroJS #WebDev #CSS #DarkMode #UX 🧵(2/2)

1 0 1 0
Post image

Stop paying the "WordPress Tax."
Use WPress2Astro and get a clean, Astro starter project with your WP content.
It takes minutes, not days.
wpress2astro.petipois.com
#astrojs #wordpress #freelancer #webdev #softwaredev #migration

0 0 0 0
Preview
Astro ClientRouter : Le piège du Menu Mobile persistant Vous venez d'activer les View Transitions sur Astro, mais votre menu hamburger fait n'importe quoi ? Découvrez pourquoi et comment corriger le cycle de vie de votre JavaScript.

Oubliez DOMContentLoaded. Pour que votre JS survive aux changements de page fluides, il faut maîtriser astro:page-load.

J'ai mis le code Vanilla JS complet pour un menu robuste ici :
🔗 www.vbesse.com/blog/menu-mo...

#AstroJS #WebDev #JavaScript #Frontend 🧵(2/2)

0 0 0 0
Post image

Solo founder learning in real-time.
Day 2 of WPress2Astro. I launched yesterday at $49.99 per export, but the feedback was loud and clear. Update the pricing.
So new day, new price: $19.99.
wpress2astro.petipois.com #buildinpublic #astrojs #freelance #webdev #

8 1 2 0
WPress2Astro Promo showing the hero section on the home page

WPress2Astro Promo showing the hero section on the home page

WordPress is great until you want a fast, modern site. I built WPress2Astro to make the jump to @astro.build in minutes not hours.
1. Sign in
2. Paste URL
3. Pick your pages
4. Download a ready-to-run Astro project
Stop copy-pasting. Start building.
wpress2astro.petipois.com #astrojs #webdev

1 0 0 0
Preview
L'illusion parfaite : Transformer un site statique en SPA fluide avec Astro ClientRouter Découvrez comment le composant ClientRouter d'Astro utilise l'API View Transitions pour transformer votre site statique en une application ultra-fluide sans le poids d'un framework JavaScript.

www.vbesse.com/blog/site-st...

Le secret ? Le composant <ClientRouter /> dans le <head>. Mais attention au piège du cycle de vie JS : DOMContentLoaded c'est fini, il faut passer à astro:page-load. Tout est documenté ici ! 🧠

#AstroJS #WebDev #ViewTransitions #UX (2/2)

2 0 0 0
Preview
Formulaires sans Backend : Intercepter Formspree avec AJAX pour une UX fluide Ne laissez plus Formspree rediriger vos utilisateurs ! Découvrez comment utiliser AJAX pour envoyer vos formulaires de contact en arrière-plan sur votre site Astro.

L'idée : un preventDefault(), un fetch(), et surtout un header Accept: 'application/json' pour que Formspree réponde proprement sans rediriger. C'est léger et transparent pour l'utilisateur.

Le code est ici :
🔗 www.vbesse.com/blog/formula...

#AstroJS #WebDev #UX #JavaScript (2/2)

1 0 0 0
A WordPress-like More Tag in Astro | Nerdpress.org When migrating from WordPress to Astro, one encounters various challenges.One is handling the WordPress "More" tag, which originates from the More Element in the WordPress Block Editor. After converti...

New Blog Post: A WordPress-like More Tag in Astro
nerdpress.org/2026/02/28/a...
#astrojs #wordpress

1 0 0 0
screenshot of WPress2Astro tool

screenshot of WPress2Astro tool

Still rebuilding WordPress sites by hand?
There’s a faster way
Join the waitlist - wpress2astro.petipois.com
#wordpress #astrojs #freelancers #devs #buildinginpublic

0 0 0 0
Video

Seguimos analizando las tecnologías que marcan el día a día de los equipos técnicos y su impacto real en negocio.
Hablamos de Node.js 25 y #Strapi 5, agentes ChatGPT en empresas, Astro.js y automatización avanzada con n8n. 👉 https://f.mtr.cool/nszimzrkbc

#NodeJS #IA #AstroJS #n8n

0 0 0 0
Preview
Parler la langue de Google : JSON-LD et SEO technique automatisé Arrêtez de laisser Google deviner le contenu de vos pages. Apprenez à générer automatiquement des données structurées JSON-LD avec Astro pour booster votre SEO.

L'idée est d'injecter dynamiquement un objet BlogPosting (Schema.org) directement via notre composant <BaseHead />. Fini le travail manuel. 🧠

Le guide étape par étape est ici :
🔗 www.vbesse.com/blog/la-lang...

#AstroJS #WebDev #SEO #TechSEO 🧵 (2/2)

2 0 0 0
Preview
Astro & SEO : Résoudre l'erreur d'URL [object Object] sur vos images OpenGraph Vos images sociales ont disparu sur LinkedIn ou Bluesky ? Découvrez pourquoi Astro génère parfois un [object Object] dans vos balises meta et comment le corriger définitivement.

Le secret ? Sécuriser le <BaseHead> : extraire le .src des objets images d'Astro, et ne JAMAIS oublier le .href à la fin d'un new URL() pour garantir une URL absolue. 🛡️

Le code complet et l'explication sont ici :
🔗 www.vbesse.com/blog/resoudr...

#AstroJS #WebDev #JavaScript #SEO (2/2)

1 0 0 0
Redonner le pouvoir aux lecteurs : Ajouter un flux RSS natif en 5 minutes Fuyez les algorithmes ! Découvrez comment générer un flux RSS valide en quelques lignes de code sur votre blog Astro.

On y parle de l'intégration `@astrojs/rss`, de la génération de l'endpoint XML lors du build, et surtout de l'auto-découverte (autodiscovery) via la balise `<link rel="alternate">`.

Reprenez le contrôle de votre contenu :
🔗 www.vbesse.com/blog/flux-rs...

#AstroJS #WebDev #IndieWeb #RSS (2/2)

0 0 0 0
Fini les liens tristes : Générer des images sociales (OG) automatiques avec Astro Marre de créer une image sur Figma pour chaque article ? Découvrez comment générer vos images OpenGraph dynamiquement à la compilation avec Astro et Satori.

Le principe :
1️⃣ On designe l'image en HTML/CSS Flexbox
2️⃣ Satori convertit ça en image à la volée
3️⃣ Un endpoint Astro génère un .png pour chaque article au moment du build.

Magique et redoutablement efficace. Le guide complet :
🔗 www.vbesse.com/blog/generat...

#AstroJS #WebDev #SEO 🧵 (2/2)

0 0 0 0
Post image

I’m building a tool to automate the move content from WordPress to Astro.
The goal is to extract your content into clean Markdown and deliver a starter project with your content.
Check out the demo here:
wpress2astro.petipois.com #buildinginpublic #wordpress #astrojs @astrodotbuild

0 0 0 0
Architecture Astro : Pourquoi j'ai éclaté mon Layout monolithique Découvrez pourquoi séparer votre Layout principal en sous-couches spécialisées est la clé d'un blog Astro maintenable et évolutif.

Fini de charger la barre de progression sur la page Contact ! Chaque page a maintenant son Layout spécialisé qui hérite de composants communs.

Je vous montre le code et la méthode dans mon dernier article :
🔗 www.vbesse.com/blog/archite...

#AstroJS #CleanCode #WebDev #Architecture (2/2)

0 0 0 0
L'accessibilité par l'exemple : Rendre son blog inclusif sans effort Pourquoi et comment j'ai rendu ce blog accessible (a11y), du ratio de contraste aux attributs ARIA, avec des conseils didactiques.

Au menu :
🎨 Ratio de contraste 4.5:1
⌨️ Navigation clavier & Skip links
🏷️ Sémantique ARIA (aria-expanded...)
🏗️ Structure Hn logique

L'accessibilité n'est pas une option, c'est une base du Web.

www.vbesse.com/blog/accessi...

#AstroJS #WebDev #a11y #BuildInPublic (2/2)

1 1 0 0
Full Stack Nap Tracker: Astro, Vue, Gemini AI, and Puter
Full Stack Nap Tracker: Astro, Vue, Gemini AI, and Puter In this tutorial, I build a fully functional Nap Tracker app using Astro + Vue, design the initial UI with Gemini AI, and integrate AI-powered sleep coaching with Puter.js. We’ll cover: • Setting…

New YouTube Tutorial available now - Build a sleep tracker app using Astro, Vue, Gemini AI, and Puter.js youtube.com/watch?v=_Cft... @astrodotbuild #astrojs @vuejs #parenting #aiapp

0 0 0 0
Preview
Post from Code with Petipois New Asto Tutorial is Coming Next Week! Build a sleep tracker with AI analysis elements using Astro, Vue and Puter.js

New Astro and Puter.js tutorial coming next week
youtube.com/post/UgkxGvh...
#astrojs #aiapp #sleeptracker #puterai #parenting

0 0 0 0
CLI showing an error message from Astro.js dev mode which tells exactly what went wrong when I tried to import a local image, including a hint how to do it right and a link to the documentation. This is insane.

CLI showing an error message from Astro.js dev mode which tells exactly what went wrong when I tried to import a local image, including a hint how to do it right and a link to the documentation. This is insane.

This is how all error messages should look like. #AstroJS setting the bar high with their excellent #DeveloperExperience #DX

4 0 0 1
Preview
A Fresh Chapter for Homebox: New Docs, New Blog, Same Community-Driven Heart Reinvented documentation, and a better integration with our blog. Read about how we’re committing to better documentation and changing the way that we community with our community.

We're moving our blog, and updating our documentation!

Starting today, our documentation is now powered by #astrojs and #starlight and our blog has moved to a Homebox specific site.

homebox.software

blog.homebox.software/a-fresh-chap...

0 0 0 0

Definitely appreciate the utility of the #rust toolchain, it's been useful for contributing to ezno alongside @addisoncrump.info some fuzzers, and the built-in #golang fuzzer is workable, got a very simple setup for the #AstroJS compiler in a while ago (I should probably check on that 😅)...

0 0 1 0
Can you make a landing page in under 60 seconds? ⚡ #indiegame #landingpage #gamedevelopment #website
Can you make a landing page in under 60 seconds? ⚡ #indiegame #landingpage #gamedevelopment #website Create a landing page for your steam game in under 60 seconds. ⚡ #indiegame #landingpage #gamedevelopment #website #astrojs #microsaas https://ludumlanding.com

Day 16 of websites you can build with astro
Landing page generator - LudumLanding ⚡ #astrojs #landingpage #indiegame #website

2 0 0 0
I built an open source alternative to Teachable with Astro
I built an open source alternative to Teachable with Astro Build And Sell Your First Course Today! OpenCourse - Project Demo This video is a demonstration of my hackathon project called OpenCourse. It is a mini learning management system (LMS)…

Day 15 of websites built using Astro - an open source alternative to Teachable with Astro youtu.be/DodFdyxGa-g #astrojs @astrodotbuild #fullstack #lms

0 0 0 0
Day 14 of 30 websites you can build with Astro #astrojs #aitools #aiagents #aiagency l
Day 14 of 30 websites you can build with Astro #astrojs #aitools #aiagents #aiagency l Day 14 of 30 websites you can build with Astro In this short, we showcase the type of website you can create using Astro. Today’s example is a fast, responsive AI Agent platform website— all…

Day 14 of 30 websites you can build with Astro #astrojs #aitools #aiagents #aiagency l youtube.com/shorts/mOdwS... @astrodotbuild

0 0 0 0
Build Once, Deploy 3 Ways (Astro on Azure + GitHub Actions)
Build Once, Deploy 3 Ways (Astro on Azure + GitHub Actions) YouTube video by Barbara Forbes | Ba4bes

Build once, deploy three ways: PR preview links, production deploys, and a daily rebuild for fresh content. All from one GitHub Actions pipeline (Astro on Azure).

#GitHubActions#Azure#AzureStaticWebApps#AstroJS#DevOps#CICD#OIDC

youtube.com/shorts/j0AwU...

0 0 0 0
Day 11 of 30 websites you can build with Astro #astrojs #web3 #blockchain #webdev
Day 11 of 30 websites you can build with Astro #astrojs #web3 #blockchain #webdev Day 11 of 30 Websites You Can Build with Astro In this short, we showcase the type of website you can create using Astro. Today’s example is a fast, responsive Blockchain web3 security website— all…

Day 11 of 30 websites you can build with Astro #astrojs #web3 #blockchain #webdev youtube.com/shorts/2__qX... @astrodotbuild @themefisher

0 0 0 0