Voyage Islands

The Voyage Islands is an example of how you can organize work with your components on Multi-Page Application projects (e.g., Magnolia CMS).

Inspired by Astro framework and its Island Architecture, without Nodejs.

Voyager

The Voyager is a starting point of an application that finds islands on a page, mounts them, and could kickstart other magic (e.g., observers).

Island

Read Island as an isolated component that knows nothing about its parent, siblings and children, some kind of a selfish component 🙃.

Each island has it's own JS and CSS files. We download those files in runtime using a [data-island]'s value as the name of those files. For instance a lighthouse island:

<div data-island="lighthouse"> 
  ...
</div>

// lighthouse.ts
import type { VoyageIsland } from '../../src/island'

export default class Lighthouse implements VoyageIsland {

  constructor(
    /** An element that contains the `[data-island]` attribute. The anchor! */
    private el: HTMLElement,
    
    /** 
     * An object stores all necessary values and objects that should be shared across
     * a webpage: stores, services, pub-sub, etc.
     */
    private context: unknown
  ) {}

  /** This is the starting point which is called once the JS is loaded. */
  async mount(): Promise<void> {
    // do your magic! 🧙🏻‍♂️
  }
}

// lighthouse.css 
[data-island="lighthouse"] {
  // There are no rules, anarchy! 🕺
}