🚀  Julian’s Web Garden

Here lies some re-usable components and tooling settings, taking advantage of Astro strengths as much as possible.

Focus is on common web patterns and progressive enhancements.

Note
Astro is still in Beta, so is this collection.
Components API might change a bit, though not drastically.
Thanks for you understanding ✌️.

🤷🏼‍♂️  Philosophy

We’ve all been to the point of throwing valuable code when adopting new shiny website frameworks.
Thanks to “island architecture” practices, we can establish standard and future-proof, commonly used, generic patterns, using the web holy trinity of languages : HTML / CSS and JavaScript.
That way, we can sprinkle advanced JS widgets as we like, with trendy UI framework, while things like global application utilities remain stable over time.

Vanilla means future-proofing our code, but it also bring the benefit of minuscule file sizes compared to “all-or-nothing” UI frameworks.

---

🔗  Quick links

📖  Website source code

See default layout and home page for live implementation examples.

---

📦  Application-level components

These are global components which enhance or augment browser behavior and style, while providing useful utilities to developers, website-wide.

📦  Components

Generic extendables components.

🛠  Tooling configurations

A useful collection for JavaScript developers.
Features ESLint, Prettier, Stylelint, Commitlint…
For Astro, React, Vue, SCSS, TS…

✅  Tests

Cypress:

• App/Analytics
• App/Base
• App/Prefetch
  • Broken: realHover issue
• App/Resets
• App/Breakpoints
• App/ColorMode
• App/Scroll/Observer
• App/SEO
• App/Tooltips
• App/Transition
  • External / contact links
• App/Lightbox
• Components/Media/Map
• Components/Link
  • External / contact links
• Components/LicensesReport
• …

🚧  To dos

• Fix default package import when possible, as client side JS breaks for now
  import Tooltips from '@julian_cataldo/astro-tooltips/Tooltips.astro';
  to
  import Tooltips from '@julian_cataldo/astro-tooltips';
• Find a way to launch only necessary tests when versioning
• Implement dev / prod mode for debugging outputs
• Rehaul demo website
• Evaluate PNPM workspaces + tools for replacing Lerna version/publish?
• Fix Lerna conventional commits not following breaking changes for versioning

🧫  Experimenting

• Website full theme switcher, in addition to color dark / light variants.
• Feature flag manager
• Copy to clipboard
• Algolia search
• SSR Mermaid

🧑‍🚀  Development

🏁  Commands

# Scripts located in root ./package.json

# Bootstrap all packages dependencies
pnpm install --recursive

# Launch implementations demo website
pnpm run demo

# Cypress: Open dev GUI
pnpm run cypress:open

# Cypress: Run test suite
pnpm run cypress:run

# Pre-release, does:
# 1. Packages bump based on commits
# 2. Tagging releases
# 3. Git push
pnpm run version

# Release updated packages on NPM public registry
pnpm run publish