Modern UI Rework by loannlagarde · Pull Request #9 · fabienengels/alsamesh.org

loannlagarde · 2025-11-01T11:16:51Z

Bonjour,

Arrivé il y a un mois dans la communauté, je suis plutôt discret. Les projets Meshtastic et Alsamesh ont su piquer ma curiosité, et j’aimerais contribuer à ma manière.

Je vous propose ici une petite amélioration graphique du site. L’objectif est d’obtenir un visuel plus moderne et attrayant.

Le contenu n’a pas été modifié. Cependant, j’ai dû ajouter et adapter certains éléments de la page d’accueil afin de la rendre plus accrocheuse. Certains points pourront bien sûr être ajustés selon vos retours.

Je suggère de ne pas fusionner directement cette proposition dans la branche principale, mais plutôt de créer une branche de travail dédiée pour affiner les modifications ensemble.

À mon goût, il reste encore un peu de travail à faire sur la page d’accueil, notamment concernant les images d’illustration et le composant AlsaceShape. Cependant, je préfère vous soumettre cette proposition à ce stade afin d’éviter un développement inutile.

En espérant que vous apprécierez mon travail.

- Removed unused `toggleMenu.js`. - Enhanced dark mode support with updated classes and colors. - Redesigned sections for better alignment and responsiveness. - Updated assets, including new icons and SVG elements. - Simplified header/menu structure with improved links and interaction logic. - Added animation for visual enhancements in the "AlsaceShape" component.

- Updated layout structure for improved readability and alignment. - Enhanced typography styles using `@tailwindcss/typography` plugin. - Improved visual hierarchy and dark mode support.

…to `max-md:col-span-4`.

- Extend maximum width of content container for better readability. - Adjust typography breakpoints for improved responsiveness. - Enhance em tag with better inline-block support.

Develop

Silhm

Nice work!
see my comments in some files

Silhm · 2025-11-01T14:03:03Z

maybe a simple webp would be enough here, no need for super high-quality png screenshot imho

La modification a été effectuée, toutefois son impact sur le dépôt me semble limité.

Les images peuvent être optimisées automatiquement lors du build : https://docs.astro.build/en/guides/images/ si jamais

C'est noté. Dans le cas présent l'image ne sera pas compilée.

NB: c'est la première fois que j'utilise Astro 😉. N’hésitez donc pas à me conseiller.

Je n'ai pas non plus une grande expérience avec Atro mais j'utilise Alsamesh pour explorer de nouvelles solutions :)

…bp`.

- Add `@fortawesome/fontawesome-free` at version `^7.1.0`. - Upgrade `tailwindcss` to version `^4.1.16`.

- Created a `node-points.json` file to store GPS coordinates. - Implemented `gpsToSvg` function to convert GPS coordinates to SVG space. - Automated SVG point rendering using mapped coordinates with animation effects.

…ent.

- Introduced a QR code dialog with toggle functionality for node configuration. - Added new styling and layout updates for the configuration section. - Incorporated a button to display the QR code and a clickable link for alternative access.

loannlagarde · 2025-11-02T23:34:06Z

Concernant les photos d’illustration, j’ai quelques idées, mais il serait préférable de faire une sélection d’environ six photos (huit maximum).
Je verrais bien un carrousel comportant, pour chaque image, un titre, une courte description et un crédit.
Il serait préférable d’éviter les captures d’écran, qui sont généralement moins attractives et s’accordent moins bien avec le reste du thème du site.
Nous pourrions également inviter l’ensemble de la communauté, par exemple via un canal Discord dédié pour le dépôt des photos, en utilisant les réactions pour le vote.

loannlagarde · 2025-11-02T23:35:50Z

N’hésitez pas à me signaler s’il y a des nœuds à ajouter. J’ai réalisé une extraction de ceux que je peux actuellement détecter depuis chez moi.

Pour les noeuds, je suis en train de bosser sur une solution pour les stocker dynamiquement et faire une carte dynamique. La carte sur le site actuelle est plus la pour l'illustration. Te casses pas trop la tête avec ça :)

Le carrousel peut être sympa tant que ça reste responsive design, je n'ai pas encore mis en place d'analytics sur le site mais je pense qu'on a pas mal de visite via mobile.

Pour les photos, on peut organiser un vote mais j'avoue que pour ce carrousel, peut être garder les choses simples et te faire confiance pour la sélection. Ceci dit, tu peux toujours faire un appel pour que les gens envoient leurs meilleures photos sur le Discord.

(Et on peut toujours peut être prévoir une galerie si les photos sont assez nombreuses)

- Implemented a new image carousel using a marquee effect. - Introduced `shuffle` utility in `ArrayUtils.ts` for randomizing image order. - Replaced static image grid with dynamically loaded and shuffled images. - Added new images to the project under `/carrousel` directory.

loannlagarde · 2025-11-05T21:49:57Z

+    },
+    {
+        file: image6,
+        title: "@FAB1"


j'ai un doute sur celle-là

C'est Nicolas posant à côté de ESPL :)

loannlagarde · 2025-11-08T16:53:38Z

Je pense que la branche est assez mature pour être fusionnée. Je vous laisse me faire votre retour.

fabienengels

Deux petits trucs à corriger mais après, pour moi c'est ok pour le merge :)

fabienengels · 2025-11-11T12:23:47Z

+    },
+    {
+        file: image6,
+        title: "@FAB1"


C'est Nicolas posant à côté de ESPL :)

loannlagarde · 2025-11-11T12:59:41Z

Voila

loannlagarde added 8 commits October 31, 2025 00:17

Update README.md to use the new rework screenshot.

2f1d468

Refactor Header component to dynamically determine current route index.

a227526

Refactor StaticPage layout and typography:

93a4f00

- Updated layout structure for improved readability and alignment. - Enhanced typography styles using `@tailwindcss/typography` plugin. - Improved visual hierarchy and dark mode support.

Use backticks for PIN code display in join page documentation.

be9f10e

Fix Header menu layout on small screens: updated max-md:col-span-2 …

2e02b41

…to `max-md:col-span-4`.

Refine StaticPage layout and styling:

6d7817c

- Extend maximum width of content container for better readability. - Adjust typography breakpoints for improved responsiveness. - Enhance em tag with better inline-block support.

Merge pull request #1 from loannlagarde/develop

5f04c92

Develop

Silhm reviewed Nov 1, 2025

View reviewed changes

loannlagarde added 2 commits November 1, 2025 14:58

Restoring the package manager file

4bf2018

Replace outdated screenshot in README with optimized `readme-image.we…

e059ec8

…bp`.

fabienengels marked this pull request as draft November 2, 2025 15:56

loannlagarde added 4 commits November 2, 2025 22:02

Update dependencies in bun.lock:

9b2a4f8

- Add `@fortawesome/fontawesome-free` at version `^7.1.0`. - Upgrade `tailwindcss` to version `^4.1.16`.

Add dynamic GPS to SVG point mapping in AlsaceShape component:

43cae28

- Created a `node-points.json` file to store GPS coordinates. - Implemented `gpsToSvg` function to convert GPS coordinates to SVG space. - Automated SVG point rendering using mapped coordinates with animation effects.

Center-align "Vous découvrez Meshtastic ?" header text in Home compon…

fd39e20

…ent.

loannlagarde commented Nov 2, 2025

View reviewed changes

loannlagarde commented Nov 5, 2025

View reviewed changes

fabienengels reviewed Nov 11, 2025

View reviewed changes

loannlagarde added 2 commits November 11, 2025 12:56

Update readme

a942e1b

Change the title of image 6 in the carousel to "@Espl"

0efda3a

fabienengels marked this pull request as ready for review November 11, 2025 13:29

fabienengels merged commit e22aff4 into fabienengels:main Nov 11, 2025
1 check passed

Conversation

loannlagarde commented Nov 1, 2025

Uh oh!

Silhm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

loannlagarde commented Nov 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

loannlagarde commented Nov 8, 2025

Uh oh!

fabienengels left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

loannlagarde commented Nov 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants