🌐 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/               # Recommended VS Code settings, extensions
├── netlify-functions/
│   └── cspReport.js       # Serverless function to receive and log CSP violation reports
├── scripts/               # 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
├── tests/
│   ├── e2e/               # End-to-end Playwright tests
│   └── unit/              # Vite unit tests
├── netlify.toml           # Netlify configuration
└── ...

---

🛠 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:

File/Script	Description
.env.template	Template for local environment variables
scripts/checkNode.js	Validates your Node.js and npm versions
scripts/bootstrap.local.sh (TBD)	Interactive setup for local configuration and tooling
.vscode/	Editor recommendations compatible with VSCodium / VS Code

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/csp-report.js

This function receives reports sent to /functions/csp-report 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/csp-report;

 

🧪 Testing

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

Tool	Purpose	Usage Context
@playwright/test	End-to-end testing framework with browser automation	Local + CI
@lhci/cli	Lighthouse CI — automated performance audits	CI (optional local)
lighthouse	Manual/scripted Lighthouse runs via CLI	Local (global)

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

File	Description	Usage Context
playwright.config.js	Configures Playwright test environment (browsers, timeouts, base URL)	Local + CI
.lighthouserc.cjs	Lighthouse CI config for defining audit targets, budgets, and assertions	CI

 

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

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.

Tool	Description
VSCodium	Fully open-source alternative to VS Code (telemetry-free)
Prettier	Code formatter for JS, TS, Svelte, Markdown, etc.
ESLint	JavaScript/TypeScript linter with Svelte support
Stylelint	Linting for CSS, SCSS, and inline styles in Svelte
markdownlint	Markdown style checker and linter
markdownlint-cli2	Config-based CLI linter for Markdown
EditorConfig	Consistent line endings, spacing, and indentation
Volta / nvm	Node.js version manager for consistent tooling

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:

File	Purpose
.prettierrc	Prettier formatting rules
.prettierignore	Files that should be ignored by Prettier
eslint.config.mjs	ESLint config with SvelteKit support
stylelint.config.js	CSS/SASS/Svelte style rules
.stylelintignore	Files that should be ignored by Stylelint
.editorconfig	Base indentation and line ending settings
.nvmrc, .node-version	Node.js version constraints for nvm, asdf, and Volta
.vscode/extensions.json	Suggested extensions for VSCodium
.vscode/settings.json	Default workspace settings (non-binding)
.vscode/customData.json	Custom CSS data for FontAwesome classes
cspell.json	Custom words and exclusions for spell checking

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

Script	Description
dev	Start development server with Vite
preview	Preview production build locally
build	Build the project with Vite
dev:netlify	Start local dev server using Netlify Dev (emulates serverless + headers)
build:netlify	Build using Netlify CLI
css:bundle	Bundle and minify CSS

---

✅ Pre-check / Sync

Script	Description
prepare	Run SvelteKit sync
check	Run SvelteKit sync and type check with svelte-check
check:watch	Watch mode for type checks
check:node	Validate Node & npm versions match package.json engines
checkout	Full local validation: check versions, test, lint, typecheck
verify	Alias for checkout

---

🧹 Cleanup & Maintenance

Script	Description
delete	Remove build artifacts and node_modules
clean	Fully reset environment and reinstall
upgrade	Update all dependencies via npm-check-updates

---

🧪 Testing

Script	Description
test	Alias for test:all
test:all	Run both client and server test suites
test:client	Run client tests with Vitest
test:server	Run server-side tests with Vitest
test:watch	Watch mode for client tests
test:coverage	Collect coverage from both client and server
test:e2e	Run Playwright E2E tests

---

🧼 Linting & Formatting

Script	Description
lint	Run ESLint on JS, MJS, and Svelte files
lint:fix	Auto-fix ESLint issues
lint:jsdoc	Check JSDoc annotations
lint:css	Run Stylelint on CSS and Svelte styles
lint:md	Lint Markdown content
lint:all	Run all linters and formatting checks
format	Run Prettier formatting check
format:fix	Auto-format code using Prettier

---

💡 Lighthouse / Performance

Script	Description
lhci	Alias for Lighthouse CI
lhci:run	Run Lighthouse CI autorun

---

📋 Audits / Validation

Script	Description
audit:scripts	Check for untested utility scripts
head:flatten	Flatten headers for Netlify
head:validate	Validate headers file against project config

---

🔄 Lifecycle Hooks

Script	Description
postinstall	Ensures version check after install

 

---

🧾 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

---

Copyright © 2025
Network Pro Strategies (Network Pro™)

Network Pro™, the shield logo, and the "Locking Down Networks™" slogan are trademarks of Network Pro Strategies.

Licensed under CC BY 4.0 and the GNU GPL, as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.