55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
|
# Zonemaster UI
|
|||
|
|
|
|||
|
|
Zonemaster UI (Zonemaster-GUI) is a static website built with [Astro], using
|
|||
|
|
[Svelte] for interactive components and [Vite] for internationalization/translation
|
|||
|
|
(i18n).
|
|||
|
|
|
|||
|
|
## Standalone Components
|
|||
|
|
|
|||
|
|
Zonemaster UI also provides a set of standalone web components that can be
|
|||
|
|
reused in other projects. Currently, there are two available:
|
|||
|
|
|
|||
|
|
- `<zm-domain-test>` – for initiating domain tests
|
|||
|
|
- `<zm-program-versions>` – displays the current versions of Zonemaster
|
|||
|
|
components
|
|||
|
|
|
|||
|
|
These components are framework-agnostic and can be embedded in other websites or
|
|||
|
|
apps as needed.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<zm-domain-test></zm-domain-test>
|
|||
|
|
<zm-program-versions></zm-program-versions>
|
|||
|
|
|
|||
|
|
<script type="module">
|
|||
|
|
import '@zonemaster/ui';
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Headless Mode
|
|||
|
|
|
|||
|
|
Zonemaster UI can also be used in **headless mode**, where it acts as a
|
|||
|
|
JavaScript API layer between the Zonemaster backend and your own frontend.
|
|||
|
|
|
|||
|
|
This is useful if you want to:
|
|||
|
|
|
|||
|
|
- Build your own custom UI
|
|||
|
|
- Integrate Zonemaster functionality into another application or CLI tool
|
|||
|
|
|
|||
|
|
In headless mode, the UI logic is decoupled from the visual components, allowing
|
|||
|
|
you to access core functionality programmatically through JavaScript.
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import { TestAgent } from '@zonemaster/ui';
|
|||
|
|
|
|||
|
|
TestAgent.subscribe((state, context) => {
|
|||
|
|
console.log(state, context);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
TestAgent.transition('START', { domain: 'example.com' });
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
[Astro]: https://astro.build/
|
|||
|
|
[Svelte]: https://svelte.dev/
|
|||
|
|
[Vite]: https://vite.dev/
|