🌐 Network Pro™ — Web Presence

Locking Down Networks, Unlocking Confidence™
Security, Networking, Privacy — Network Pro™

🚀 Project Overview

This GitHub repository powers the official web presence of Network Pro Strategies — 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 and deployed via Netlify.
Blog and documentation subsites built with Material for MkDocs and deployed via GitHub Pages.

All infrastructure and data flows are designed with maximum transparency, self-hosting, and user privacy in mind.

📁 Repository Structure

.
├── .github/workflows/     # CI workflows and automation
├── .vscode/
│   ├── customData.json    # Custom CSS data for FontAwesome icons
│   ├── extensions.json    # Recommended VSCodium / VS Code extensions
│   ├── extensions.jsonc   # Commented version of extensions.json for reference
│   └── settings.json      # User settings for VSCodium / VS Code
├── netlify-functions/
│   └── cspReport.js       # Serverless function to receive and log CSP violation reports
├── scripts/               # General utility scripts
├── src/
│   ├── lib/               # Reusable components, styles, utilities
│   ├── routes/            # SvelteKit routes (+page.svelte, +page.server.js)
│   ├── hooks.client.ts    # Handles PWA install prompt and logs client errors
│   ├── hooks.server.js    # Injects CSP headers and permissions policy
│   ├── app.html           # SvelteKit entry HTML with CSP/meta/bootentry
│   └── service-worker.js  # Custom Service Worker
├── static/                # Static assets served at root
│   ├── manifest.json      # Manifest file for PWA configuration
│   ├── robots.txt         # Instructions for web robots
│   └── sitemap.xml        # Sitemap for search engines
├── tests/
│   ├── e2e/               # End-to-end Playwright tests
│   └── unit/              # Vite unit tests
├── _redirects             # Netlify redirects
├── netlify.toml           # Netlify configuration
└── ...

E2E Test Structure

End-to-end tests are located in tests/e2e/ and organized by feature or route:

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)
└── ...

🛠 Getting Started

📦 Environment Setup

git clone https://github.com/netwk-pro/netwk-pro.github.io.git
cd netwk-pro.github.io
cp .env.template .env
npm install

Edit .env to configure your environment mode:

ENV_MODE=dev  # Options: dev, test, ci, preview, prod

ENV_MODE is used for tooling and workflows — not by SvelteKit itself.
Use VITE_-prefixed env variables for runtime values.

🧰 Local Setup Scripts

To streamline onboarding and enforce project conventions, you may use the optional helper scripts:

To get started quickly:

cp .env.template .env
npm install

You can also use bootstrap.local.sh to automate the steps above and more (optional).
ENV_MODE controls local tooling behavior — it is not used by the app runtime directly.

💾 Version Enforcement

To ensure consistent environments across contributors and CI systems, this project enforces specific Node.js and npm versions via the "engines" field in package.json:

"engines": {
  "node": ">=22.0.0 <25",
  "npm": ">=11.0.0 <12"
}

Version compliance is softly enforced after installation via a postinstall lifecycle hook:

npm run check:node

This script runs scripts/checkNode.js, which compares your current Node.js and npm versions against the required ranges. During the install phase, it will log warnings for out-of-range versions but allow installation to continue. In all other contexts (manual runs, CI workflows, etc.), it will fail with a descriptive error if the versions are out of spec.

Node Version Check (snippet from scripts/checkNode.js)

const semver = require("semver");
const { engines } = require("../package.json");

const requiredNode = engines.node;
const requiredNpm = engines.npm;
const isPostInstall = process.env.npm_lifecycle_event === "postinstall";

let hasError = false;

if (!semver.satisfies(process.version, requiredNode)) {
  const msg = `Node.js ${process.version} does not satisfy required range: ${requiredNode}`;
  isPostInstall ? console.warn(`⚠️  ${msg}`) : console.error(`❌ ${msg}`);
  if (!isPostInstall) hasError = true;
}

const npmVersion = require("child_process")
  .execSync("npm -v")
  .toString()
  .trim();

if (!semver.satisfies(npmVersion, requiredNpm)) {
  const msg = `npm ${npmVersion} does not satisfy required range: ${requiredNpm}`;
  isPostInstall ? console.warn(`⚠️  ${msg}`) : console.error(`❌ ${msg}`);
  if (!isPostInstall) hasError = true;
}

if (!hasError) {
  console.log("✅ Node and npm versions are valid.");
} else {
  process.exit(1);
}

For full compatibility, .nvmrc and .node-version files are provided to work seamlessly with version managers like nvm, asdf, and Volta. This ensures consistent environments across local development, CI pipelines, and deployment targets.

To manually verify your environment:

node -v     # Should fall within engines.node
npm -v      # Should fall within engines.npm

🛡️ 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:

• Content Security Policy (CSP) with support for relaxed directives (inline scripts allowed)
• Permissions Policy to explicitly disable unnecessary browser APIs
• X-Content-Type-Options, X-Frame-Options, and Referrer-Policy headers

💡 The CSP nonce feature has been disabled. Inline scripts are now allowed through the policy using the "script-src 'self' 'unsafe-inline'" directive. If you wish to use nonces in the future, you can re-enable them by uncommenting the relevant sections in hooks.server.js and modifying your inline <script> tags.

To re-enable nonce generation for inline scripts in the future:

1. Uncomment the nonce generation and injection logic in hooks.server.js.
2. Add nonce="__cspNonce__" to inline <script> blocks in app.html or route templates.

💡 The [headers] block in netlify.toml has been deprecated — all headers are now set dynamically from within SvelteKit.

🧭 hooks.client.ts

This lightweight hook enhances client experience:

• Handles the beforeinstallprompt event to support progressive web app (PWA) install flows
• Provides a handleError() hook that logs uncaught client-side errors

Located at src/hooks.client.ts, it is automatically used by the SvelteKit runtime during client boot.

📣 CSP Report Handler

To receive and inspect CSP violation reports in development or production, the repo includes a Netlify-compatible function at:

netlify-functions/cspReport.js

This function receives reports sent to /functions/cspReport and logs them to the console. You can later integrate with logging tools or alerts (e.g., via email, Slack, or SIEM ingestion).

Make sure to include the report-uri directive in your CSP header:

Content-Security-Policy: ...; report-uri /.netlify/functions/cspReport;

🧪 Testing

This project uses a mix of automated performance, accessibility, and end-to-end testing tools to maintain quality across environments and deployments.

Note: lighthouse is intended to be installed globally (npm i -g lighthouse) or run via the lighthouse npm script, which uses the locally installed binary if available. You can also run Lighthouse through Chrome DevTools manually if preferred.

CI uses Chrome for Lighthouse audits. For local experimentation, you may run Lighthouse manually using Brave, which can reveal differences related to privacy features or tracking protection.

Testing Configuration Files

E2E Setup

Playwright is included in devDependencies and installed automatically with:

npm install

To install browser dependencies (required once):

npx playwright install

This downloads the browser binaries (Chromium, Firefox, WebKit) used for testing. You only need to run this once per machine or after a fresh clone.

Running Tests

Local testing via Vitest and Playwright:

npm run test:client     # Run client-side unit tests with Vitest
npm run test:server     # Run server-side unit tests with Vitest
npm run test:all        # Run full test suite
npm run test:watch      # Watch mode for client tests
npm run test:coverage   # Collect code coverage reports
npm run test:e2e        # Runs Playwright E2E tests (with one retry on failure)

Playwright will retry failed tests once (--retries=1) to reduce false negatives from transient flakiness (network, render delay, etc.).

Audit your app using Lighthouse:

# Run Lighthouse CI (via @lhci/cli) using the current build
npm run lhci:run

Manual auditing with Lighthouse (e.g., via Brave or Chrome):

# Install globally (if not already installed)
npm install -g lighthouse

# Run Lighthouse manually against a deployed site
lighthouse https://netwk.pro --view

You can also audit locally using Chrome DevTools → Lighthouse tab for on-the-fly testing and preview reports.

The repo uses @lhci/cli for CI-based audits. It is installed as a dev dependency and does not require a global install.

To trace the exact Chrome version and audit timestamp used in CI:

cat .lighthouseci/chrome-version.txt

🛠 Recommended Toolchain

To streamline development and align with project conventions, we recommend the following setup — especially for contributors without a strong existing preference.

The .vscode/ folder includes editor recommendations compatible with VSCodium. These are non-enforced and optional, but align with our formatter, linter, and language server configs.

Install dev tooling:

npm install --include=dev

Run all format and lint checks:

npm run lint:all
npm run format

To auto-fix issues:

npm run lint:fix
npm run format:fix

⚙️ Tooling Configuration

All linting, formatting, and version settings are defined in versioned project config files:

These are the same rules used by CI and automation, so aligning your local setup avoids surprises later.

Note: .vscode/extensions.json defines a minimal recommended dev stack for VSCodium / VS Code. These extensions are optional but thoughtfully curated to improve developer experience without introducing bloat.

📜 Available Scripts

The following CLI commands are available via npm run <script> or pnpm run <script>.

🔄 Development

✅ Pre-check / Sync

🧹 Cleanup & Maintenance

🧪 Testing

🧼 Linting & Formatting

💡 Lighthouse / Performance

📋 Audits / Validation

🔄 Lifecycle Hooks

🧾 License

This project is licensed under:

• Creative Commons BY 4.0

• Or optionally, GNU GPL v3 or later

Source code, branding, and visual assets are subject to reuse and distribution terms specified on our Legal, Copyright, and Licensing page.

🙋‍♂️Questions?

Reach out via netwk.pro/contact, open an issue on this repo, or email us directly at contact (at) s.neteng.pro.

Designed for professionals. Hardened for privacy. Built with intent.
— Network Pro Strategies