Architecture

Adminator is a static HTML dashboard with modern vanilla JavaScript and SCSS. It has one entry bundle, one stylesheet root, and one shared shell renderer. No jQuery, Bootstrap, router, or Babel is required.

Source layout

src/*.html                       Page templates
src/assets/scripts/2026/index.js  Entry: styles, shell, behaviors, widgets
src/assets/scripts/2026/Shell.js  NAV manifest, sidebar, topbar, footer
src/assets/scripts/2026/init.js   Theme, menus, drawer, tabs, accordions
src/assets/scripts/2026/palette.js Command palette
src/assets/styles/2026/index.scss SCSS root, using @use
src/assets/styles/2026/_tokens.scss Light/dark CSS variables
webpack/                         Build rules and plugins
tests/                           Vitest suites and browser stubs
scripts/                         Cleaning, preview, verification, screenshots

Legacy images/fonts remain in src/assets/static/ for reference but are not copied into builds. Import assets used by your customization; webpack emits them through asset rules. Imported images receive content-hashed filenames.

Shared shell

Shell pages provide data-shell-sidebar, data-shell-topbar, and data-shell-footer placeholders. Set data-active and a pipe-separated data-crumbs on the body. The NAV manifest drives both navigation and palette results. Authentication and error pages use standalone layouts.

The displayed release version comes from package.json. Add pages to the HTML plugin title map and NAV; see Adding pages.

Lazy widgets

The entry calls each initializer, but the initializer returns before importing a library when its mount point is absent:

Mount point	Module	Async library
canvas[data-chart-key]	charts.js	vendor-chartjs.js
[data-fc]	calendar.js	vendor-fullcalendar.js
[data-vmap]	maps.js	vendor-jsvectormap.js

Every page receives only the runtime, application entry, and design-system CSS initially: 128.4 KiB raw / 27.2 KiB gzip in the minified release. Chart, calendar, and map code/CSS loads on pages that use it. Production filenames include content hashes; development uses readable filenames.

Do not replace the named async chunks with a single catch-all vendor group. defaultVendors: false keeps each library behind its own import.

Theme updates

An early script sets data-theme on <html> before styles arrive. Runtime toggles persist dash26-theme in localStorage. Widgets observe only this attribute. Charts update existing instances with update('none'); calendar styling uses FullCalendar 7 theme variables; maps rebuild using current token colors.

Build configuration

webpack configuration is CommonJS; runtime modules and the .mjs Vitest configuration use ESM. The Sass loader uses the modern compiler API with style and loadPaths. webpack filesystem caches are separated by development/production and minification setting.