# π Network Pro™ β Web Presence
> **Locking Down Networks, Unlocking Confidence™**
> _Security, Networking, Privacy β Network Pro™_
[](https://app.netlify.com/projects/networkpro-web/deploys) [](https://www.npmjs.com/package/@networkpro/web) [](https://github.com/netwk-pro/netwk-pro.github.io/actions/workflows/build-and-publish.yml)
[](https://github.com/prettier/prettier) [](https://stylelint.io/)
[](https://github.com/netwk-pro/netwk-pro.github.io/blob/master/CODE_OF_CONDUCT.md)
## π Project Overview
This GitHub repository powers the official web presence of **[Network Pro Strategies](https://netwk.pro/about)** β a privacy-first consultancy specializing in cybersecurity, network engineering, and information security. We also lead public advocacy efforts promoting digital privacy and responsible cyber policy.
Built with [SvelteKit](https://kit.svelte.dev/) and deployed via [Netlify](https://www.netlify.com/).
[Blog](https://github.com/netwk-pro/blog) and [documentation](https://github.com/netwk-pro/docs) subsites built with [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) and deployed via [GitHub Pages](https://pages.github.com/).
All infrastructure and data flows are designed with **maximum transparency, self-hosting, and user privacy** in mind.
### Table of Contents
- [Changelog](#changelog)
- [Repository Structure](#structure)
- [Getting Started](#getting-started)
- [Configuration](#configuration)
- [Service Worker Utilities](#sw-utilities)
- [Debug Mode](#debug)
- [CSP Report Handler](#cspreport)
- [Testing](#testing)
- [Development Reference](#reference)
- [License](#license)
- [Questions](#questions)
---
## π Changelog
For a history of changes to the Network Pro™ Web Presence, see the **[CHANGELOG](https://github.com/netwk-pro/netwk-pro.github.io/blob/master/CHANGELOG.md)**. All notable updates are documented there.
This project follows the principles of [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), though formatting and versioning may occasionally vary.
---
## π Repository Structure
```bash
.
βββ .github/
β βββ workflows/ # CI workflows (e.g. test, deploy)
βββ .vscode/
β βββ customData.json # Custom CSS IntelliSense (e.g. FontAwesome)
β βββ extensions.json # Recommended VS Code / VSCodium extensions
β βββ extensions.jsonc # Commented version of extensions.json
β βββ settings.json # Workspace settings
βββ netlify/
β βββ edge-functions/
β β βββ csp-report.js # Receives CSP violation reports
βββ scripts/ # General-purpose utility scripts
βββ src/
β βββ lib/ # Components, utilities, types, styles
β β βββ components/ # Svelte components
β β βββ data/ # Custom data (e.g. JSON, metadata, constants)
β β βββ utils/ # Helper utilities
β βββ routes/ # SvelteKit pages (+page.svelte, +server.js)
β βββ app.html # Entry HTML (CSP meta, bootstrapping)
β βββ hooks.client.ts # Client-side error handling
β βββ hooks.server.js # Injects CSP headers and permissions policy
β βββ service-worker.js # Custom PWA service worker
βββ static/ # Public assets served at site root
β βββ pgp/ # PGP keys and QR code images
β βββ disableSw.js # Service worker bypass (via ?nosw param)
β βββ manifest.json # PWA metadata
β βββ robots.txt # SEO: allow/disallow crawlers
β βββ sitemap.xml # SEO: full site map
βββ tests/
β βββ e2e/ # Playwright end-to-end tests
β βββ unit/ # Vitest unit tests
β βββ client/ # Client-side (jsdom) unit tests
β βββ server/ # Server-side (node) unit tests
β β βββ internal/ # Internal audit/test helpers
β β βββ auditCoverage.test.js # Warns about untested source modules
βββ _redirects # Netlify redirect rules
βββ CHANGELOG.md # Chronological record of notable project changes
βββ netlify.toml # Netlify configuration
βββ package.json # Project manifest (scripts, deps, etc.)
βββ ...
```
### π `static/pgp/` Directory Structure
This directory contains public PGP key files and their corresponding QR codes.
```bash
static/
βββ pgp/
β βββ contact@s.neteng.pro.asc # Public key for secure email
β βββ pgp-contact.png # QR code (PNG) for secure email key
β βββ pgp-contact.webp # Optimized WebP version of the QR code
β βββ pgp-security.png # QR code (PNG) for security contact key
β βββ pgp-security.webp # WebP version of the security QR code
β βββ pgp-support.png # QR code (PNG) for support key
β βββ pgp-support.webp # WebP version of the support QR code
β βββ security@s.neteng.pro.asc # Public key for security contact
β βββ support@neteng.pro.asc # Public key for general support
βββ ...
```
- `.asc` files are **excluded from service worker precaching** but served directly via the `/pgp/[key]` route.
- QR code images are **served statically** by the `/pgp` route using `` elements.
- **WebP versions** are also used in the `/pgp` route, while the `/about` route imports **dynamic equivalents** from `src/lib/img/qr`.
- This route does **not use fallback rendering**; only explicitly defined files are available and expected to resolve.
- A dynamic `[key]/+server.js` handler under `src/routes/pgp/` serves the `.asc` files with appropriate `Content-Type` and download headers.
### E2E Test Structure
End-to-end tests are located in `tests/e2e/` and organized by feature or route:
```bash
tests/
βββ e2e/
β βββ app.spec.js # Desktop and mobile route tests
β βββ mobile.spec.js # Mobile-specific assertions
β βββ shared/
β βββ helpers.js # Shared test utilities (e.g., getFooter, setDesktopView, setMobileView)
βββ ...
```
[Back to top](#top)
---
## π Getting Started
For full setup guidance, including environment setup, version enforcement, and local tooling, refer to the π [Environment Requirements Wiki](https://github.com/netwk-pro/netwk-pro.github.io/wiki/Environment-Requirements).
```bash
git clone https://github.com/netwk-pro/netwk-pro.github.io.git
cd netwk-pro.github.io
cp .env.template .env
npm install
npx playwright install
```
[Back to top](#top)
---
## π‘οΈ Configuration
This project includes custom runtime configuration files for enhancing security, error handling, and PWA functionality. These modules are used by the framework during server- and client-side lifecycle hooks.
### π `hooks.server.js`
Located at `src/hooks.server.js`, this file is responsible for injecting dynamic security headers. It includes:
- A Content Security Policy (CSP) configured with relaxed directives to permit inline scripts and styles (`'unsafe-inline'`)
- A Permissions Policy to explicitly disable unnecessary browser APIs
- Standard security headers such as `X-Content-Type-Options`, `X-Frame-Options`, and `Referrer-Policy`
> βΉοΈ A stricter CSP (excluding `'unsafe-inline'`) was attempted but reverted due to framework-level and third-party script compatibility issues. The current policy allows inline scripts to ensure stability across SvelteKit and analytics features such as PostHog.
#### Future Improvements
To implement a strict nonce-based CSP in the future:
1. Add nonce generation and injection logic in `hooks.server.js`
2. Update all inline `