Merge pull request #527 from zonemaster/develop

Merge develop branch into master (zonemaster-gui)

Author: matsduf

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.env.example

@@ -0,0 +1,3 @@
+PUBLIC_BASE_URL="/"
+PUBLIC_API_URL="/api"
+PUBLIC_POLLING_INTERVAL=5000

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 24.x
           cache: npm
 
       - name: Install dependencies

.gitignore

@@ -1,19 +1,25 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
-/dist
-/dist-electron
-/release-builds
-/tmp
-/out-tsc
+# build output
+dist/
+public/
 
-
-# Application onfiguration
-/src/assets/app.config.json
+# generated types
+.astro/
 
 # dependencies
 /node_modules
 
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
 # IDEs and editors
 /.idea
 .project
@@ -22,44 +28,31 @@
 *.launch
 .settings/
 *.sublime-workspace
-
-# IDE - VSCode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 
-# misc
-/.angular/cache
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-testem.log
-/typings
-
 # e2e
 /e2e/*.js
 /e2e/*.map
 .tmp
-
-# System Files
-.DS_Store
-Thumbs.db
-
-*.zip
-
-# Generated FAQ files
-src/assets/faqs/gui-faq-*.html
-
-*.log
-tests_output/
 .e2e-chrome-profile/
 
 # Emacs backup files
 *~
 
-# Generated by e2e
-/test-results
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+vendor/
+
+# OS
+.DS_store
+
+*storybook.log
+*.zip

.prettierignore

@@ -0,0 +1,2 @@
+/*
+!/src

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte"],
+    "singleQuote": true,
+    "tabWidth": 4,
+    "useTabs": false
+}

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

CONTRIBUTE.md

@@ -0,0 +1,66 @@
+# Contribute
+
+Thank you for considering contributing to Zonemaster GUI! This document provides guidelines for contributing to the project.
+
+## Project Overview
+
+Zonemaster GUI is built with:
+- [Astro](https://astro.build/) as the main framework
+- [Svelte](https://svelte.dev/) for UI components
+- [TypeScript](https://www.typescriptlang.org/) for type safety
+
+## Development Setup
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+## Code Style
+
+We use [Prettier](https://prettier.io/) for code formatting with the following configuration:
+- Single quotes
+- 4 spaces for indentation
+- No tabs
+
+To format your code:
+```bash
+npx prettier --write .
+```
+
+## Testing
+
+We use [Playwright](https://playwright.dev/) for end-to-end testing. Tests are located in the `e2e` directory.
+
+To run tests:
+```bash
+npm run e2e
+```
+
+## GUI Modifications
+
+Zonemaster GUI is designed to be cloned and customized for theming purposes. When making changes to the GUI, please be mindful of the following:
+
+- **Be careful when renaming CSS class names** - Many themes may depend on these class names
+- **Avoid deleting, renaming, or moving template files** without proper deprecation notices
+- **Consider backward compatibility** when modifying component structures
+- **Document any breaking changes** that might affect custom themes
+
+While it's ultimately up to theme creators to handle conflicts when syncing with the main repository, we should minimize disruption where possible. For more information on theming, see the [THEMING.md](docs/THEMING.md) document.
+
+## Pull Request Process
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Ensure tests pass
+5. Submit a pull request
+
+## Code of Conduct
+
+Please be respectful and considerate of others when contributing to this project.

Changes

@@ -1,5 +1,30 @@
 Release history for Zonemaster component Zonemaster-GUI
 
+v5.0.0 2025-12-17 (part of Zonemaster v2025.2 release)
+
+ [Release information]
+ - The GUI in this release has been completely rewritten. The changes
+   primarily focused on the underlying technologies, while the look and
+   feel remains only slightly altered due to various accessibility improvements.
+   From this version on, Zonemaster-GUI supports complete customization of the
+   GUI. You can find more information and a how-to in the documentation.
+
+ [Breaking changes]
+ - The GUI API has changed. It has no longer support for starting a
+   test directly from the URL. You will find more information in the
+   documentation on using the GUI.
+ - Configuration done in "app.config.json" for Zonemaster-GUI, which was
+   run-time configuration, needs to be migrated. Most of that configuration
+   has now become build-time configuration. See documents related to 
+   configuring the GUI.
+
+ [Features]
+ - Rewritten GUI (#511, #514, #516, #517, #519, #520, #521, #523, #526)
+
+ [Fixes]
+ - Ported and updated translation of messages and FAQ for the new GUI
+   (#502, #503, #505, #506, #507, #508, #518)
+
 
 v4.4.0 2025-03-04 (part of Zonemaster v2024.2.1 release)
 
@@ -64,7 +89,7 @@ v4.1.1 2023-09-08 (public fix version)
 
  [Fixes]
  - Corrects documentation links in FAQ for all languages
-   (#433) 
+   (#433)
 
 
 v4.1.0 2023-06-21 (public release version)
@@ -344,4 +369,3 @@ v2.0.0 2018-06-25
  - The old Zonemaster-GUI is deprecated, and can, for the time being,
    still be found in the old repository,
    https://github.com/dotse/zonemaster-gui
-

README.md

@@ -1,94 +1,53 @@
 # Zonemaster Web GUI [![CI status](https://github.com/zonemaster/zonemaster-gui/actions/workflows/ci.yml/badge.svg)](https://github.com/zonemaster/zonemaster-gui/actions/workflows/ci.yml)
 
+## Overview
 
-### Purpose
+Zonemaster GUI is the web interface component of the Zonemaster project, a tool designed for DNS validation and testing. For a comprehensive overview of the Zonemaster software, please see the [Zonemaster repository].
 
-This module is the Web Interface part of the Zonemaster project. For an
-overview of the Zonemaster software, please see the [Zonemaster repository].
+## Prerequisites
 
-### Prerequisites
+Before installing the Zonemaster GUI, ensure you have the Zonemaster Engine and Zonemaster-Backend setup. Refer to the [Zonemaster-Engine installation] and [Zonemaster-Backend installation] documents.
 
-Before you install the Zonemaster Web GUI module, you need the Zonemaster
-Engine test framework installed. Please see the [Zonemaster-Engine
-installation] document.
+## Installation
 
-You also need a running Zonemaster-Backend component. Please see the
-[Zonemaster-Backend installation] document.
+There are two ways to install the Zonemaster GUI:
 
-### Installation
+### Quick Install (1 minute)
+Download the release zip file, upload to your web server, and configure. 
 
-Follow the detailed [installation instructions].
+### Full Customization (5 minutes)
+Clone the repository, build, and deploy.
 
-### Configuration
+For detailed instructions, see [INSTALL.md](docs/INSTALL.md).
 
-The configuration instructions for the Backend can be found in the [Backend
-configuration] document.
+## Development
 
-The configuration instructions for the GUI can be found in the [GUI
-configuration] document.
+To set up your development environment:
 
-### Documentation
+1. Clone the repository
+2. Run `npm install`
+3. Run `cp .env.example .env`
+4. Set the URL to your Zonemaster backend in the `.env` file
+5. Run `npm run dev`
 
-There is a [public documentation]. Some more specific documents can be found in
-the [docs directory](docs/).
+## Documentation
 
-### Contribution
+Refer to the [docs](/docs) directory for detailed information on:
+- Installation and configuration
+- Theming and customization
+- Translation guide
+- Testing
+- UI documentation
 
-This project was generated with Angular-CLI 1.6.8.
-It uses the Angular 2+ framework with all its tools.
-
-The source code of the application is available in `./src/app` folder.
-
-The `components` folder is composed of subfolders that represent the main
-components. Each folder of component contain three files:
-
-  * `*.component.css`: the component's style configuration;
-  * `*.component.html`: the component's HTML code;
-  * `*.component.ts`: the component's TypeScript code.
-
-All assets are available in the `src/assets` folder. It is split by concern;
-the style configurations are in the `css`, images are in the `images` folder, etc.
-
-All translation files are in the `src/locale` folder.
-
-The environment defaults of the application are in the `src/environments`
-folder. `environment.ts` is used for development purposes, the
-`environment.prod.ts` for production, and the `environment.test.ts` for testing.
-
-In order to contribute:
-
-* Install [Nodejs](https://nodejs.org)
-* Fork the Zonemaster GUI repository on Github into your own user on Github.
-* Clone your fork to your working environment.
-* Go to the folder and install project dependencies with `npm install`
-* Update configuration files in `src/assets/app.config.json` to add a Backend
-  API endpoint (or leave the default)
-* Make your changes, test them and push them to your fork on Github
-* From your fork, make a Pull Request against the zonemaster/zonemaster-gui
-  repository. Please always make the Pull Request against the develop branch.
-* Thank you for your contribution!
-
-#### Development server
-
-Run `npm start` for a dev server. Navigate to `http://localhost:4200/en`.
-The app will automatically reload if you change any of the source files.
-
-#### Build
-
-Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-#### Test
-
-See [Testing](docs/Testing.md).
+For contribution guidelines, see [CONTRIBUTE.md](CONTRIBUTE.md).
 
 ## License
 
-This is free software under a 2-clause BSD license. The full text of the license can
-be found in the [LICENSE](LICENSE) file included in this respository.
+This is free software under a 2-clause BSD license. The full text of the license can be found in the [LICENSE](LICENSE) file included in this repository.
 
-Images `src/assets/images/person_looking_at_computer.svg` and `src/assets/images/world_connected.svg`
-are taken from <https://undraw.co>, [full license](https://undraw.co/license).
+Images `src/assets/images/person_looking_at_computer.svg` and `src/assets/images/world_connected.svg` are taken from <https://undraw.co>, [full license](https://undraw.co/license).
 
+Images `src/assets/images/person_looking_at_computer.svg` and `src/assets/images/world_connected.svg` are taken from <https://undraw.co>, [full license](https://undraw.co/license).
 
 [Backend Configuration]:            https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/backend.md
 [GUI Configuration]:                https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/gui.md