This app provides a quick and dirty preview of how various sitemaps will render with the new megamenu navigation pattern available for migrating EdWeb sites.
The site is accessed through the root /index.html page. To preview the menu of a specific site, append the migration ID as a query parameter to the root URL.
/(default playground with example content)/?site={ID}(playground for site with specific migration ID)
The site ID is used to load its specific sitemap. Each individual sitemap is loaded from /sitemaps/sitemap-{ID}.json. These are copied directly from the /public folder in this repository into the final build.
Each sitemap-{ID}.json file follows a simple schema, expressed here as TypeScript types:
type Sitemap = {
name: string;
nav: NavItem[];
};
type NavItem = {
title: string;
children: NavItem[];
};| Tool | Purpose |
|---|---|
| Preact | UI Framework |
| Preact Signals | State management |
| Vite | Bundler and development server |
| TypeScript | Type safe development and refactoring |
The app consists of two separate entrypoints:
/index.html(public editor interface)/preview.html(preview host)
The menus are previewed within the public editor interface by loading the preview host in an iframe. When the preview host has been loaded, any changes to the menu state are propgated to the preview via window.postMessage().
The preview and editor are purposefully rendered within individual browsing contexts to prevent conflicts between global state, styles and scripts. This allows the preview host to link against EdGel and Bootstrap without influencing the style of the editor.
To launch the hot-reload development server, run:
npm run dev
The app is a static site, meaning there is no server to run. To build the static site, run:
npm run build
This builds and optimises the site and produces files in the /dist folder. All files in this folder must be published in order for the site to work.