JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

docs(release): Dokumentation ins Englische übersetzen und v1.11.1 Docs

Browse Source 
- README, CHANGELOG, DISCLAIMER, SECURITY auf Englisch übersetzen
- Projekt-Docs (architecture, patterns, widget-schema, style-guide) übersetzen
- CODEOWNERS für Master-Branch-Schutz hinzufügen
- release.yml auf Englisch übersetzen
- STYLE_GUIDE von src/css/ nach docs/ verschieben
This commit is contained in:
Jon Kazama
2026-03-22 13:07:33 +01:00
parent 40d4d9f37a
commit 677344f24d
12 changed files with 973 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture.md
+35 -29
View File
@@ -1,11 +1,17 @@
# Hellion Dashboard — Architecture
> This document is intentionally written in English. Full German/English i18n support
> is planned for v2.0 — until then, English keeps the docs accessible to anyone
> who wants to contribute or fork the project.
---
## Overview
Hellion Dashboard is a browser extension (NewTab replacement) built with **Vanilla JavaScript ES2020**, **CSS Custom Properties**, and **zero dependencies**. No build step, no framework, no bundler — files are loaded directly via `<script>` tags.
**Storage:** `chrome.storage.local` with `localStorage` fallback.
**Manifest:** V3 for Chromium browsers, V3 for Firefox (separate manifest).
**Manifest:** V3 across all supported browsers (separate files for Firefox and Opera GX).
---
@@ -14,59 +20,60 @@ Hellion Dashboard is a browser extension (NewTab replacement) built with **Vanil
```
HOM_NewTab_Project/
├── newtab.html # Single HTML entry point
├── manifest.json # Chrome/Edge/Brave/Vivaldi (MV3)
├── manifest.json # Chrome, Edge, Brave, Vivaldi (MV3)
├── manifest.firefox.json # Firefox (MV3)
├── manifest.opera.json # Opera/Opera GX (MV3 + workarounds)
├── manifest.opera.json # Opera, Opera GX (MV3 + workarounds)
├── src/
│ ├── css/
│ │ └── main.css # All styles, themes, responsive breakpoints
│ │ └── main.css # All styles, 11 themes, responsive breakpoints
│ └── js/
│ ├── dialog.js # Custom dialog system (alert, confirm)
│ ├── storage.js # Storage abstraction layer
│ ├── state.js # Global state, defaults, helpers
│ ├── themes.js # Theme definitions & application
│ ├── themes.js # Theme definitions & application (11 themes)
│ ├── boards.js # Board/bookmark rendering & events
│ ├── drag.js # Drag & drop (Pointer Events API)
│ ├── settings.js # Settings panel, toggles, theme picker
│ ├── search.js # Search bar (Google, DuckDuckGo, Bing)
│ ├── onboarding.js # First-run onboarding flow
│ ├── widgets.js # Widget manager (registry, drag, resize)
│ ├── notes.js # Notes/checklists (multi-instance widgets)
│ ├── calculator.js # Calculator widget (single-instance)
│ ├── timer.js # Timer/countdown widget (single-instance)
│ ├── image-ref.js # Image reference widget (multi-instance)
│ ├── onboarding.js # First-run onboarding flow
│ ├── data.js # JSON export/import (backup & restore)
│ ├── app.js # Init, clock, global events (entry point)
│ └── dialog.js # Custom dialog system (alert, confirm)
│ └── app.js # Init, clock, global events (entry point)
├── assets/
│ ├── fonts/ # Local fonts (Rajdhani, Inter, Cinzel)
│ ├── icons/ # Extension icons (16-512px)
│ └── themes/ # Theme background images
└── docs/ # Documentation (you are here)
│ └── themes/ # 11 theme background images
└── docs/ # You are here
```
---
## Module Responsibilities
Each module has exactly one responsibility. They communicate through global references (no import/export — this is a browser extension without a bundler).
Each module has exactly one responsibility. Communication happens through global references — no import/export, because this is a browser extension without a bundler.
| Module | Responsibility |
|---|---|
| `storage.js` | **Only** place that touches `chrome.storage` / `localStorage`. All other modules go through `Store.get()` / `Store.set()`. |
| `dialog.js` | `HellionDialog.alert()` and `HellionDialog.confirm()` — custom styled dialogs that replace native browser popups. Loaded first so every other module can use it. |
| `storage.js` | The **only** place that touches `chrome.storage` / `localStorage`. Everything else goes through `Store.get()` / `Store.set()`. |
| `state.js` | Global `boards` and `settings` arrays, default values, `uid()`, `escHtml()`, `getFaviconUrl()`. |
| `themes.js` | Theme CSS variable application. 8 themes, each with its own `[data-theme]` block in CSS. |
| `themes.js` | Applies theme CSS variables. 11 themes, each with its own `[data-theme]` block in `main.css`. |
| `boards.js` | Renders boards and bookmarks. Event delegation on board containers. |
| `drag.js` | Board and bookmark reordering via Pointer Events API. |
| `settings.js` | Settings panel UI, toggle handlers, theme modal, background upload. |
| `settings.js` | Settings panel UI, toggle handlers, appearance modal, background upload. |
| `search.js` | Search bar with engine switching (Google, DuckDuckGo, Bing). |
| `onboarding.js` | Multi-slide first-run flow including the gaming starter board opt-in. |
| `widgets.js` | Widget manager — creates DOM, handles drag/resize/z-index, provides registry. See [widget-schema.md](widget-schema.md). |
| `notes.js` | Notes and checklists as widgets. Multi-instance (max 5). Notebook sidebar. Also handles widget toolbar events. |
| `calculator.js` | Calculator widget. Single-instance. Shunting-yard expression parser (no `eval()`). |
| `timer.js` | Timer/countdown widget. Single-instance. Presets, Web Audio API alarm, tab-title blink. |
| `image-ref.js` | Image reference widget. Multi-instance (max 3). Canvas API WebP conversion, sessionStorage for image data. |
| `onboarding.js` | Multi-slide onboarding flow. Gaming starter board opt-in. |
| `data.js` | JSON export/import with validation. Handles boards, notes, calculator history, timer presets. |
| `calculator.js` | Calculator widget. Single-instance. Shunting-yard expression parser — no `eval()`. |
| `timer.js` | Timer/countdown widget. Single-instance. Presets, Web Audio API alarm, tab-title blink on completion. |
| `image-ref.js` | Image reference widget. Multi-instance (max 3). Canvas API WebP conversion, sessionStorage for image data — cleared on browser close. |
| `data.js` | JSON export/import with validation. Covers boards, notes, calculator history and timer presets. |
| `app.js` | Entry point. Calls `init()` on DOMContentLoaded. Clock, global event binding. |
| `dialog.js` | `HellionDialog.alert()` and `HellionDialog.confirm()` — custom styled dialogs replacing native browser dialogs. |
---
@@ -83,7 +90,7 @@ DOMContentLoaded
→ bindGlobalEvents() # Header buttons, modals
→ bindSettingsEvents() # Settings toggles, theme picker
→ initSearch() # Search bar
→ migrateSticky() # Legacy sticky note migration
→ migrateSticky() # Legacy sticky note migration (v1.5.x → v1.6+)
→ Notes.init() # Notes + widget toolbar
→ Calculator.init() # Calculator widget
→ Timer.init() # Timer widget
@@ -96,7 +103,7 @@ DOMContentLoaded
## Script Load Order
Scripts are loaded in `newtab.html` in dependency order:
Scripts are loaded in `newtab.html` in dependency order. A module may only reference modules loaded before it — there is no bundler to handle this automatically.
```html
<script src="src/js/dialog.js"></script>
@@ -117,8 +124,6 @@ Scripts are loaded in `newtab.html` in dependency order:
<script src="src/js/app.js"></script>
```
**Rule:** A module may only reference modules loaded before it.
---
## Z-Index Hierarchy
@@ -133,7 +138,7 @@ Scripts are loaded in `newtab.html` in dependency order:
| Dialogs / Modals | 300 | `.hellion-dialog-overlay`, modals |
| Onboarding | 400 | `#onboardingOverlay` |
Widgets use incrementing z-index (`WidgetManager._topZ++`) to stack above each other on click.
Widgets use an incrementing z-index (`WidgetManager._topZ++`) so the last clicked widget always sits on top.
---
@@ -143,9 +148,9 @@ Widgets use incrementing z-index (`WidgetManager._topZ++`) to stack above each o
|---|---|---|
| `boards` | Array | Board objects with bookmarks |
| `settings` | Object | User preferences (theme, toggles, etc.) |
| `widgetStates` | Object | All widget data (see [widget-schema.md](widget-schema.md)) |
| `onboardingDone` | Boolean | Whether onboarding has been completed |
| `lastBackupReminder` | Number | Timestamp of last backup reminder |
| `widgetStates` | Object | All widget data — see [widget-schema.md](widget-schema.md) |
| `onboardingDone` | Boolean | Whether the first-run onboarding has been completed |
| `lastBackupReminder` | Number | Timestamp of the last backup reminder |
---
@@ -160,4 +165,5 @@ Widgets use incrementing z-index (`WidgetManager._topZ++`) to stack above each o
| Opera / GX | Chromium MV3 | `manifest.opera.json` |
| Firefox | Gecko MV3 | `manifest.firefox.json` |
Changes affecting manifest fields must be synchronized across all three manifest files.
Any change that touches manifest fields — version numbers, permissions, content scripts —
needs to be applied to all three files. The CI quality check will catch it if they drift out of sync.