@networkpro/web 1.6.2 → 1.6.5

package/README.md

@@ -30,23 +30,23 @@ All infrastructure and data flows are designed with **maximum transparency, self
 
 ```bash
 .
-├── .github/workflows     # CI workflows and automation
-├── .vscode/              # Recommended VS Code settings, extensions
+├── .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
+│   └── 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
+│   ├── 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
+│   ├── e2e/               # End-to-end Playwright tests
+│   └── unit/              # Vite unit tests
+├── netlify.toml           # Netlify configuration
 └── ...
 ```
 
@@ -169,18 +169,18 @@ This project includes custom runtime configuration files for enhancing security,
 
 ### 🔐 `hooks.server.js`
 
-Located at src/hooks.server.js, this file is responsible for injecting dynamic security headers. It includes:
+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.
+> 💡 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.
+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.
 
@@ -246,7 +246,7 @@ This project uses a mix of automated performance, accessibility, and end-to-end
 
 ### Running Tests
 
-Local testing via Playwright:
+Local testing via Vitest and Playwright:
 
 ```bash
 npm run test:client     # Run client-side unit tests with Vitest
@@ -254,6 +254,7 @@ 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:
@@ -406,6 +407,7 @@ The following CLI commands are available via `npm run <script>` or `pnpm run <sc
 | `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                     |
 
 ---
 

package/cspell.json

@@ -20,7 +20,7 @@
     "Maricopa",
     "mdsvex",
     "neteng",
-    "NETPRO",
+    "netpro",
     "netwk",
     "networkpro",
     "Nextcloud",
@@ -29,6 +29,7 @@
     "nosniff",
     "nosw",
     "obtainium",
+    "posthog",
     "SIEM",
     "stylelintignore",
     "Subsite",

package/package.json

@@ -4,7 +4,7 @@
   "sideEffects": [
     "./.netlify/shims.js"
   ],
-  "version": "1.6.2",
+  "version": "1.6.5",
   "description": "Locking Down Networks, Unlocking Confidence | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "advisory",
@@ -36,7 +36,6 @@
     "node": ">=22.0.0 <25",
     "npm": ">=11.0.0 <12"
   },
-  "style": "src/lib/styles/index.js",
   "scripts": {
     "dev": "vite dev",
     "start": "npm run dev",
@@ -61,6 +60,7 @@
     "test:server": "vitest --config vitest.config.server.js",
     "test:watch": "vitest --config vitest.config.client.js --watch",
     "test:coverage": "npm run test:client -- --run --coverage && npm run test:server -- --run --coverage",
+    "test:e2e": "npx playwright test",
     "lint": "eslint . --ext .mjs,.js,.svelte",
     "lint:fix": "eslint . --ext .mjs,.js,.svelte --fix",
     "lint:jsdoc": "eslint . --ext .js,.mjs,.svelte --max-warnings=0",
@@ -78,8 +78,9 @@
   },
   "dependencies": {
     "nodemailer": "^7.0.3",
+    "posthog-js": "^1.246.0",
     "semver": "^7.7.2",
-    "svelte": "5.33.2"
+    "svelte": "5.33.4"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -104,7 +105,6 @@
     "markdownlint": "^0.38.0",
     "markdownlint-cli2": "^0.18.1",
     "mdsvex": "^0.12.6",
-    "normalize.css": "^8.0.1",
     "playwright": "^1.52.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",

package/scripts/bundleCss.js

@@ -20,10 +20,10 @@ import { bundle } from "lightningcss";
 import path from "path";
 
 // Define the path to your input CSS file
-const inputFilePath = path.resolve("src/lib/styles/css/offline.css");
+const inputFilePath = path.resolve("src/lib/styles/css/global.css");
 
 // Define the path for the output CSS file
-const outputFilePath = path.resolve("static/offline.min.css");
+const outputFilePath = path.resolve("src/lib/styles/css/global.min.css");
 
 // Bundle and minify the CSS
 const { code, map } = bundle({

package/src/app.html

@@ -24,7 +24,24 @@
       sizes="any"
       type="image/x-icon" />
 
-    <!-- LinkedIn preconnects removed 2025-05-26 by SunDevil311 -->
+    <!-- Preconnect to PostHog domains -->
+    <link
+      rel="preconnect"
+      href="https://us.i.posthog.com"
+      crossorigin="anonymous" />
+    <link
+      rel="preconnect"
+      href="https://us-assets.i.posthog.com"
+      crossorigin="anonymous" />
+
+    <!-- Preload the PostHog script -->
+    <link
+      rel="preload"
+      href="https://us-assets.i.posthog.com/array/phc_Qshfo6AXzh4pS7aPigfqyeo4qj1qlyh7gDuHDeVMSR0/config.js"
+      as="script" />
+    <script
+      src="https://us-assets.i.posthog.com/array/phc_Qshfo6AXzh4pS7aPigfqyeo4qj1qlyh7gDuHDeVMSR0/config.js"
+      defer></script>
 
     <!-- Preload FontAwesome webfonts -->
     <link

package/src/hooks.server.js

@@ -14,53 +14,52 @@ export async function handle({ event, resolve }) {
   // Create the response
   const response = await resolve(event);
 
-  console.log("ENV_MODE:", process.env.ENV_MODE);
-
-  // Check if the environment is for testing
+  // Determine environment flags
+  // Default to development policy if neither test nor prod
   const isTestEnvironment =
     process.env.NODE_ENV === "test" || process.env.ENV_MODE === "ci";
+  const isProdEnvironment =
+    process.env.NODE_ENV === "production" || process.env.ENV_MODE === "prod";
+
+  if (!isProdEnvironment) {
+    console.log("ENV_MODE:", process.env.ENV_MODE);
+  }
 
-  // Set the Content Security Policy header
+  // Determine report URI
+  const reportUri = isProdEnvironment
+    ? "/.netlify/functions/cspReport"
+    : "/api/mock-csp";
+
+  // Construct base policy
+  const cspDirectives = [
+    "default-src 'self';",
+    "script-src 'self' 'unsafe-inline' https://us.i.posthog.com https://us-assets.i.posthog.com;",
+    "script-src-elem 'self' 'unsafe-inline' https://us.i.posthog.com https://us-assets.i.posthog.com;",
+    "style-src 'self' 'unsafe-inline';",
+    "img-src 'self' data:;",
+    "connect-src 'self' https://us.i.posthog.com https://us-assets.i.posthog.com;",
+    "font-src 'self' data:;",
+    "form-action 'self';",
+    "base-uri 'self';",
+    "object-src 'none';",
+    "frame-ancestors 'none';",
+    "upgrade-insecure-requests;",
+    `report-uri ${reportUri};`,
+  ];
+
+  // Loosen up CSP for test environments
   if (isTestEnvironment) {
-    // Relaxed CSP for testing: Allow inline scripts and eval
-    response.headers.set(
-      "Content-Security-Policy",
-      [
-        "default-src 'self';",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval' ws://localhost:*;", // Allow inline and eval scripts, and websockets for local testing
-        "style-src 'self' 'unsafe-inline';", // Allow inline styles
-        "img-src 'self' data:;", // Allow images from same origin and data URIs
-        "connect-src 'self';", // Allow connections only to same origin
-        "font-src 'self' data:;", // Allow fonts from same origin and data URIs
-        "form-action 'self';", // Allow forms to post to same origin
-        "base-uri 'self';", // Restrict base URIs to same origin
-        "object-src 'none';", // Block all object sources
-        "frame-ancestors 'none';", // Prevent framing of the site
-        "upgrade-insecure-requests;", // Automatically upgrade HTTP to HTTPS
-        "report-uri /api/mock-csp;", // Mock CSP reports for testing
-      ].join(" "),
-    );
-  } else {
-    // Production or development environment: use a more restrictive CSP
-    response.headers.set(
-      "Content-Security-Policy",
-      [
-        "default-src 'self';", // Allow resources from same origin
-        "script-src 'self' 'unsafe-inline';", // Allow inline scripts
-        "style-src 'self' 'unsafe-inline';", // Allow inline styles
-        "img-src 'self' data:;", // Allow images from same origin and data URIs
-        "connect-src 'self';", // Allow connections only to same origin
-        "font-src 'self' data:;", // Allow fonts from same origin and data URIs
-        "form-action 'self';", // Allow forms to post to same origin
-        "base-uri 'self';", // Restrict base URIs to same origin
-        "object-src 'none';", // Block all object sources
-        "frame-ancestors 'none';", // Prevent framing of the site
-        "upgrade-insecure-requests;", // Automatically upgrade HTTP to HTTPS
-        `report-uri ${process.env.ENV_MODE === "prod" ? "/.netlify/functions/cspReport" : "/api/mock-csp"};`, // Add CSP report URI for violations
-      ].join(" "),
-    );
+    cspDirectives[1] =
+      "script-src 'self' 'unsafe-inline' 'unsafe-eval' ws://localhost:*;";
+    cspDirectives[2] =
+      "script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' ws://localhost:*;";
+    cspDirectives[3] = "style-src 'self' 'unsafe-inline';";
+    cspDirectives[4] = "img-src 'self' data:;";
+    cspDirectives[5] = "connect-src 'self';";
   }
 
+  response.headers.set("Content-Security-Policy", cspDirectives.join(" "));
+
   // Set other security headers
   response.headers.set(
     "Permissions-Policy",
@@ -78,8 +77,7 @@ export async function handle({ event, resolve }) {
       "gamepad=()",
       "serial=()",
       "publickey-credentials-get=()",
-      "interest-cohort=()",
-      "topics=()",
+      "browsing-topics=()",
     ].join(", "),
   );
 
@@ -90,11 +88,9 @@ export async function handle({ event, resolve }) {
   if (process.env.ENV_MODE !== "test" && process.env.ENV_MODE !== "ci") {
     response.headers.set(
       "Strict-Transport-Security",
-      "max-age=2592000; includeSubDomains;", // Use max-age of 30 days
+      "max-age=31536000; includeSubDomains;", // No preload here
     );
   }
 
   return response;
 }
-
-// cspell:ignore licdn

package/src/lib/components/PostHog.svelte

@@ -0,0 +1,24 @@
+<!-- ==========================================================================
+src/lib/components/PostHog.svelte
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import posthog from "posthog-js";
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  // cspell:disable
+  onMount(() => {
+    if (browser) {
+      posthog.init("phc_Qshfo6AXzh4pS7aPigfqyeo4qj1qlyh7gDuHDeVMSR0", {
+        api_host: "https://us.i.posthog.com",
+        person_profiles: "identified_only",
+      });
+    }
+  });
+  //cspell:enable
+</script>

package/src/lib/pages/AboutContent.svelte

@@ -56,7 +56,7 @@ This file is part of Network Pro.
       text: "CC-BY-4.0 OR GPL-3.0-or-later",
     },
     {
-      label: "Markdown",
+      label: "Docs",
       href: "https://docs.netwk.pro",
       target: "_self",
     },
@@ -103,9 +103,8 @@ This file is part of Network Pro.
 <section id="top">
   <span class="small-text">
     <a {rel} href={navLinks[0].href} target={navLinks[0].target}>
-      {navLinks[0].label}
-    </a>
-    :&nbsp;<code>{navLinks[0].text}</code>
+      {navLinks[0].label}</a
+    >: &nbsp;<code>{navLinks[0].text}</code>
   </span>
 </section>
 
@@ -193,7 +192,7 @@ This file is part of Network Pro.
 <div class="spacer"></div>
 
 <p>
-  <a {rel} href="https://contact.neteng.pro" target="_blank">Let's connect</a>
+  <a {rel} href="https://netwk.pro/contact" target="_blank">Let's connect</a>
   to discuss how we can help secure and strengthen your business today.
 </p>
 

package/src/lib/pages/HomeContent.svelte

@@ -90,7 +90,7 @@ This file is part of Network Pro.
 
  
 
-<h3 class={classIndex}>Featured</h3>
+<h3 class="index4">Featured</h3>
 
 <p class={classLarge}>
   <strong>

package/src/lib/pages/LicenseContent.svelte

@@ -79,8 +79,7 @@ This file is part of Network Pro.
       href="https://spdx.dev/learn/handling-license-info"
       target={constants.targetBlank}>
       SPDX License Identifier
-    </a>
-    : &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
+    </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
 </section>
 
@@ -114,7 +113,7 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a href={legalLink} target={constants.targetSelf}>Markdown</a>
+      <a href={legalLink} target={constants.targetSelf}>Docs</a>
     </sup>
   </p>
 </section>

package/src/lib/pages/PrivacyContent.svelte

@@ -35,6 +35,7 @@ This file is part of Network Pro.
   const tocLinks = [
     { id: "intro", text: "Introduction" },
     { id: "collect", text: "Information We Collect" },
+    { id: "tracking", text: "Web Analytics and Tracking" },
     { id: "payment", text: "Payment Information" },
     { id: "use", text: "Use of Information" },
     { id: "sharing", text: "Data Sharing" },
@@ -87,8 +88,7 @@ This file is part of Network Pro.
       href="https://spdx.dev/learn/handling-license-info"
       target={constants.targetBlank}>
       SPDX License Identifier
-    </a>
-    : &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
+    </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
 </section>
 
@@ -122,7 +122,7 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a href={privacyLink} target={constants.targetSelf}> Markdown </a>
+      <a href={privacyLink} target={constants.targetSelf}>Docs</a>
     </sup>
   </p>
 </section>
@@ -161,6 +161,39 @@ This file is part of Network Pro.
         <li
           ><strong>Client-Submitted Content</strong> related to our services</li>
       </ul>
+    {:else if link.id === "tracking"}
+      <p>
+        To better understand visitor behavior and optimize website
+        functionality, we use <strong>PostHog Cloud</strong>, a hosted version
+        of the open-source PostHog analytics platform. This tool helps us
+        evaluate site performance and user engagement through the collection of
+        non-personally identifiable technical data.
+      </p>
+      <p> PostHog Cloud may collect and process information such as: </p>
+      <ul>
+        <li>Pages visited and navigation behavior</li>
+        <li>Device type, browser version, and operating system</li>
+        <li
+          >Time spent on pages and interaction events (e.g., clicks, scrolls)</li>
+        <li>Referral URLs and outbound link activity</li>
+        <li>General geolocation (approximate, based on IP address)</li>
+      </ul>
+      <p>
+        We configure PostHog to prioritize user privacy. <strong
+          >Analytics tracking is automatically disabled when a user's browser
+          sends a “Do Not Track” (DNT) or “Global Privacy Control” (GPC /
+          Sec-GPC) signal.</strong> No further action is required—your browser settings
+        are honored by default.
+      </p>
+      <p>
+        PostHog Cloud is a third-party service, but we deploy it in a
+        privacy-conscious manner that avoids intrusive profiling and aligns with
+        data protection best practices. For more information, please refer to <a
+          rel={constants.rel}
+          href="https://posthog.com/privacy"
+          target={constants.targetBlank}>PostHog's Privacy Policy</a
+        >.
+      </p>
     {:else if link.id === "payment"}
       <p>
         When processing payments, we may collect credit card details and billing

package/src/lib/pages/TermsConditionsContent.svelte

@@ -112,7 +112,7 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a href={tandcLink} target={constants.targetSelf}>Markdown</a>
+      <a href={tandcLink} target={constants.targetSelf}>Docs</a>
       |
       <a
         rel={constants.rel}

package/src/lib/pages/TermsUseContent.svelte

@@ -78,8 +78,7 @@ This file is part of Network Pro.
       href="https://spdx.dev/learn/handling-license-info"
       target={constants.targetBlank}>
       SPDX License Identifier
-    </a>
-    : &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
+    </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
 </section>
 
@@ -122,7 +121,7 @@ This file is part of Network Pro.
         >HTML</span>
       |
       <a rel={constants.rel} href={termsLink} target={constants.targetSelf}
-        >Markdown</a>
+        >Docs</a>
     </sup>
   </p>
 </section>

package/src/lib/styles/css/default.css

@@ -1,4 +1,4 @@
-/*! ==========================================================================
+/* ==========================================================================
 src/lib/styles/default.css
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
@@ -362,6 +362,14 @@ footer .container {
   text-align: center;
 }
 
+.index4 {
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.035em;
+  text-align: center;
+  text-decoration: underline;
+}
+
 .subhead {
   font-size: 1.5rem;
   line-height: 1.75rem;

package/src/lib/styles/css/normalize.css

@@ -1,10 +1,10 @@
-/*! ==========================================================================
+/* ==========================================================================
 src/lib/styles/normalize.css
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
-=========================================================================== */
+========================================================================== */
 
 /*! Modified from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/src/lib/styles/css/style.css

@@ -1,10 +1,10 @@
-/*! ==========================================================================
+/* ==========================================================================
 src/lib/styles/style.css
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
-=========================================================================== */
+========================================================================== */
 
 /*! Modified from HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
 

package/src/lib/styles/global.min.css

@@ -1,10 +1,8 @@
 /*! ==========================================================================
-src/lib/styles/global.min.css
+src/lib/styles/css/global.min.css
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
-=========================================================================== */
-/*! Modified from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-/*! Modified from HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
-html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{color:inherit;box-sizing:border-box;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}html{color:#222;scroll-behavior:smooth;font-size:1em;line-height:1.4}::-moz-selection{text-shadow:none;background:#191919}::selection{text-shadow:none;background:#191919}hr{border:0;border-top:1px solid #ccc;height:1px;margin:1em 0;padding:0;display:block;overflow:visible}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}body{color:#fafafa;background-color:#191919;margin:10px;font-family:Arial,Helvetica,sans-serif}a{text-decoration:none}a:link{color:#ffc627}a:hover,a:active{color:#ffc627;text-decoration:underline}a:focus{color:#191919;background-color:#ffc627}a:visited,a:visited:hover{color:#7f6227}.hidden,[hidden]{display:none!important}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visually-hidden.focusable:active,.visually-hidden.focusable:focus{clip:auto;width:auto;height:auto;white-space:inherit;margin:0;position:static;overflow:visible}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{page-break-inside:avoid;border:1px solid #999}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.full-width-section{background-position:50%;background-size:cover;width:100%;max-width:1920px;margin:0 auto}.container{max-width:1200px;margin:0 auto;padding:0 12px}header,footer{width:100%}header .container,footer .container{max-width:1200px;margin:0 auto;padding:20px 12px}.gh{border-collapse:collapse;border-spacing:0;margin:0 auto}.gh td,.gh th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.gh .gh-tcell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.gh,.gh col{width:auto!important}.gh-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.soc{border-collapse:collapse;border-spacing:0;margin:0 auto}.soc td,.soc th{border-collapse:collapse;word-break:normal;padding:8px;overflow:hidden}.soc .soc-fa{text-align:center;vertical-align:middle}@media screen and (width<=767px){.soc,.soc col{width:auto!important}.soc-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.foss{border-collapse:collapse;border-spacing:0}.foss td,.foss th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.foss .foss-cell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.foss,.foss col{width:auto!important}.foss-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}}.bnav{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav th{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav .bnav-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav,.bnav col{width:auto!important}.bnav-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.bnav2{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav2 td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav2 th{word-break:normal;border-style:none;padding:12px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav2 .bnav2-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav2,.bnav2 col{width:auto!important}.bnav2-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.pgp{border-collapse:collapse;border-spacing:0;margin:0 auto}.pgp td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp th{word-break:normal;border:1px solid #000;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp .pgp-col1{text-align:right;vertical-align:middle;padding-right:1rem}.pgp .pgp-col2{text-align:left;vertical-align:middle;padding-left:1rem}@media screen and (width<=767px){.pgp,.pgp col{width:auto!important}.pgp-wrap{-webkit-overflow-scrolling:touch;margin:2rem 0 auto;overflow-x:auto}}.logo{margin-left:auto;margin-right:auto;display:block}.index-title1{text-align:center;font-style:italic;font-weight:700}.index-title2{letter-spacing:-.015em;text-align:center;font-variant:small-caps;font-size:1.25rem;line-height:1.625rem}.index1{letter-spacing:-.035em;text-align:center;font-style:italic;font-weight:700;line-height:2.125rem}.index2{letter-spacing:-.035em;text-align:center;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.index3{letter-spacing:-.035em;text-align:center;font-size:1.5rem;line-height:1.75rem}.subhead{letter-spacing:-.035em;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.bolditalic{font-style:italic;font-weight:700}.bquote{border-left:3px solid #9e9e9e;margin-left:30px;padding-left:10px;font-style:italic}.small-text{font-size:.75rem;line-height:1.125rem}.large-text-center{text-align:center;font-size:1.25rem;line-height:1.75rem}.prewrap{white-space:pre-wrap;display:block}.hr-styled{width:75%;margin:auto}.center-text{text-align:center}.copyright{text-align:center;font-size:.75rem;line-height:1.125rem}.visited{color:#7f6227}.center-nav{text-align:center;padding:5px;font-size:.875rem;line-height:1.125rem}.block{resize:none;background:0 0;border:none;border-radius:0;outline:none;width:100%;font-size:.75rem;line-height:1.125rem}.fingerprint{white-space:pre-line;font-weight:700;display:block}.pgp-image{width:125px;height:125px}.spacer{margin:2rem 0}.separator{margin:0 .5rem}
+========================================================================== */
+html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{color:inherit;box-sizing:border-box;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}html{color:#222;scroll-behavior:smooth;font-size:1em;line-height:1.4}::-moz-selection{text-shadow:none;background:#191919}::selection{text-shadow:none;background:#191919}hr{border:0;border-top:1px solid #ccc;height:1px;margin:1em 0;padding:0;display:block;overflow:visible}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}body{color:#fafafa;background-color:#191919;margin:10px;font-family:Arial,Helvetica,sans-serif}a{text-decoration:none}a:link{color:#ffc627}a:hover,a:active{color:#ffc627;text-decoration:underline}a:focus{color:#191919;background-color:#ffc627}a:visited,a:visited:hover{color:#7f6227}.hidden,[hidden]{display:none!important}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.visually-hidden.focusable:active,.visually-hidden.focusable:focus{clip:auto;width:auto;height:auto;white-space:inherit;margin:0;position:static;overflow:visible}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}abbr[title]:after{content:" (" attr(title)")"}a[href^=\#]:after,a[href^=javascript\:]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{page-break-inside:avoid;border:1px solid #999}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.full-width-section{background-position:50%;background-size:cover;width:100%;max-width:1920px;margin:0 auto}.container{max-width:1200px;margin:0 auto;padding:0 12px}header,footer{width:100%}header .container,footer .container{max-width:1200px;margin:0 auto;padding:20px 12px}.gh{border-collapse:collapse;border-spacing:0;margin:0 auto}.gh td,.gh th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.gh .gh-tcell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.gh,.gh col{width:auto!important}.gh-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.soc{border-collapse:collapse;border-spacing:0;margin:0 auto}.soc td,.soc th{border-collapse:collapse;word-break:normal;padding:8px;overflow:hidden}.soc .soc-fa{text-align:center;vertical-align:middle}@media screen and (width<=767px){.soc,.soc col{width:auto!important}.soc-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.foss{border-collapse:collapse;border-spacing:0}.foss td,.foss th{border-collapse:collapse;word-break:normal;padding:10px 5px;overflow:hidden}.foss .foss-cell{text-align:center;vertical-align:middle}@media screen and (width<=767px){.foss,.foss col{width:auto!important}.foss-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}}.bnav{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav th{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav .bnav-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav,.bnav col{width:auto!important}.bnav-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.bnav2{border-collapse:collapse;border-spacing:0;margin:0 auto}.bnav2 td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;font-weight:700;line-height:1.125rem;overflow:hidden}.bnav2 th{word-break:normal;border-style:none;padding:12px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.bnav2 .bnav2-cell{text-align:center;vertical-align:middle;align-content:center}@media screen and (width<=767px){.bnav2,.bnav2 col{width:auto!important}.bnav2-wrap{-webkit-overflow-scrolling:touch;margin:auto 0;overflow-x:auto}}.pgp{border-collapse:collapse;border-spacing:0;margin:0 auto}.pgp td{word-break:normal;border-style:none;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp th{word-break:normal;border:1px solid #000;padding:10px;font-size:.875rem;line-height:1.125rem;overflow:hidden}.pgp .pgp-col1{text-align:right;vertical-align:middle;padding-right:1rem}.pgp .pgp-col2{text-align:left;vertical-align:middle;padding-left:1rem}@media screen and (width<=767px){.pgp,.pgp col{width:auto!important}.pgp-wrap{-webkit-overflow-scrolling:touch;margin:2rem 0 auto;overflow-x:auto}}.logo{margin-left:auto;margin-right:auto;display:block}.index-title1{text-align:center;font-style:italic;font-weight:700}.index-title2{letter-spacing:-.015em;text-align:center;font-variant:small-caps;font-size:1.25rem;line-height:1.625rem}.index1{letter-spacing:-.035em;text-align:center;font-style:italic;font-weight:700;line-height:2.125rem}.index2{letter-spacing:-.035em;text-align:center;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.index3{letter-spacing:-.035em;text-align:center;font-size:1.5rem;line-height:1.75rem}.index4{letter-spacing:-.035em;text-align:center;font-size:1.5rem;line-height:1.75rem;text-decoration:underline}.subhead{letter-spacing:-.035em;font-variant:small-caps;font-size:1.5rem;line-height:1.75rem}.bolditalic{font-style:italic;font-weight:700}.bquote{border-left:3px solid #9e9e9e;margin-left:30px;padding-left:10px;font-style:italic}.small-text{font-size:.75rem;line-height:1.125rem}.large-text-center{text-align:center;font-size:1.25rem;line-height:1.75rem}.prewrap{white-space:pre-wrap;display:block}.hr-styled{width:75%;margin:auto}.center-text{text-align:center}.copyright{text-align:center;font-size:.75rem;line-height:1.125rem}.visited{color:#7f6227}.center-nav{text-align:center;padding:5px;font-size:.875rem;line-height:1.125rem}.block{resize:none;background:0 0;border:none;border-radius:0;outline:none;width:100%;font-size:.75rem;line-height:1.125rem}.fingerprint{white-space:pre-line;font-weight:700;display:block}.pgp-image{width:125px;height:125px}.spacer{margin:2rem 0}.separator{margin:0 .5rem}

package/src/lib/utils/privacy.js

@@ -0,0 +1,23 @@
+/* ==========================================================================
+src/lib/utils/privacy.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * Determines whether the user allows tracking based on DNT or GPC signals.
+ * @returns {boolean}
+ */
+export function shouldTrackUser() {
+  /** @type {string | undefined} */
+  const windowDNT = /** @type {any} */ (window).doNotTrack;
+  /** @type {boolean | undefined} */
+  const navigatorGPC = /** @type {any} */ (navigator).globalPrivacyControl;
+
+  const dnt = navigator.doNotTrack === "1" || windowDNT === "1";
+  const gpc = navigatorGPC === true;
+
+  return !dnt && !gpc;
+}

package/src/routes/+layout.js

@@ -42,3 +42,5 @@ export function load({ url }) {
     meta: currentMeta, // Return the meta data (either from the route or the fallback)
   };
 }
+
+// cspell:ignore posthog

package/src/routes/+layout.svelte

@@ -14,10 +14,12 @@ This file is part of Network Pro.
   import HeaderDefault from "$lib/components/layout/HeaderDefault.svelte";
   import HeaderHome from "$lib/components/layout/HeaderHome.svelte";
   import PWAInstallButton from "$lib/components/PWAInstallButton.svelte";
+  import { shouldTrackUser } from "$lib/utils/privacy.js";
   import { onMount } from "svelte";
   import { registerServiceWorker } from "$lib/registerServiceWorker.js";
   import { browser } from "$app/environment";
-  import "$lib/styles";
+  import "$lib/styles/global.min.css";
+  import "$lib/styles/fa-global.css";
 
   // Import favicon images
   import logoPng from "$lib/img/logo-web.png";
@@ -25,21 +27,41 @@ This file is part of Network Pro.
   import faviconSvg from "$lib/img/favicon.svg";
   import appleTouchIcon from "$lib/img/icon-180x180.png";
 
+  // Declare PostHog as null initially
+  /** @type {typeof import('$lib/components/PostHog.svelte').default | null} */
+  let PostHog = null;
+
   if (browser) {
-    // Preload logo images
-    [logoPng, logoWbp].forEach((src) => {
+    // Preload all core images (logos + apple touch)
+    [logoPng, logoWbp, appleTouchIcon].forEach((src) => {
       const img = new Image();
       img.src = src;
     });
 
-    // Preload Apple Touch icon
-    const touchImg = new Image();
-    touchImg.src = appleTouchIcon;
-
-    // Register the service worker only in the browser
+    // Run setup when component mounts (only in browser)
     onMount(() => {
       console.log("[APP] onMount triggered in +layout.svelte");
       registerServiceWorker();
+
+      const isDev = import.meta.env.MODE === "development";
+
+      console.log("ENV MODE =", import.meta.env.MODE); // Should be "development"
+      console.log("isDev =", isDev);
+      console.log("shouldTrackUser =", shouldTrackUser());
+
+      if (isDev || shouldTrackUser()) {
+        import("$lib/components/PostHog.svelte").then((module) => {
+          PostHog = module.default;
+
+          if (isDev) {
+            console.log("[Dev] ✅ PostHog component loaded (tracking enabled)");
+          }
+        });
+      } else {
+        console.log(
+          "[Privacy] ⛔ Skipping PostHog component due to DNT or GPC signal.",
+        );
+      }
     });
   }
 
@@ -49,8 +71,6 @@ This file is part of Network Pro.
   const metaDescription =
     data?.meta?.description ||
     "Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro™";
-
-  // Pathname normalization takes place in +layout.js
 </script>
 
 <svelte:head>
@@ -83,6 +103,10 @@ This file is part of Network Pro.
 </header>
 <!-- END HEADER -->
 
+{#if PostHog}
+  <PostHog /> <!-- Add PostHog component when it's loaded -->
+{/if}
+
 <main>
   <slot />
 </main>

package/src/service-worker.js

@@ -12,7 +12,10 @@ const sw = /** @type {ServiceWorkerGlobalScope} */ (
 );
 
 const isDev = location.hostname === "localhost";
-const disallowedHosts = ["licdn.com"];
+const disallowedHosts = [
+  "us.i.posthog.com", // Add PostHog to disallowed hosts
+  "posthog.com", // Add PostHog to disallowed hosts
+];
 
 import { build, files, version } from "$service-worker";
 
@@ -25,8 +28,8 @@ const excludedAssets = [];
 //TODO: Remove files in docs once migrated to documentation subsite
 
 const IGNORE_PATHS = new Set([
-  "/docs/Home.md",
   "/docs/extensions.md",
+  "/docs/Home.md",
   "/img/banner-1280x640.png",
   "/img/banner-og-1200x630.png",
   "/img/logo-transparent.png",

package/tests/e2e/app.spec.js

@@ -19,6 +19,10 @@ test.describe("Desktop Tests", () => {
     }
 
     await page.setViewportSize({ width: 1280, height: 720 });
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Wait for the page to fully load
@@ -33,6 +37,10 @@ test.describe("Desktop Tests", () => {
     page,
   }) => {
     await page.setViewportSize({ width: 1280, height: 720 });
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Ensure the navigation bar is visible
@@ -48,6 +56,10 @@ test.describe("Desktop Tests", () => {
   // Simplified Footer Visibility Test
   test("should display the footer correctly", async ({ page }) => {
     await page.setViewportSize({ width: 1280, height: 720 });
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Check that the footer is visible
@@ -58,6 +70,10 @@ test.describe("Desktop Tests", () => {
   // Simplified Test for Clickable Links (e.g., 'about' link)
   test("should ensure the 'about' link is clickable", async ({ page }) => {
     await page.setViewportSize({ width: 1280, height: 720 });
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Ensure the "about" link is visible and clickable
@@ -84,6 +100,10 @@ test.describe("Mobile Tests", () => {
     }
 
     await page.setViewportSize({ width: 375, height: 667 }); // Mobile size (e.g., iPhone 6)
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Wait for the page to fully load
@@ -96,6 +116,10 @@ test.describe("Mobile Tests", () => {
   // Simplified Test for mobile content visibility
   test("should display main content correctly on mobile", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 }); // Mobile size
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Check that the main heading is visible on mobile

package/tests/e2e/mobile.spec.js

@@ -19,6 +19,10 @@ test.describe("Mobile Tests", () => {
     }
 
     await page.setViewportSize({ width: 375, height: 667 }); // Mobile size (e.g., iPhone 6)
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Wait for the page to load and for the title element to be available
@@ -44,6 +48,10 @@ test.describe("Mobile Tests", () => {
     }
 
     await page.setViewportSize({ width: 375, height: 667 }); // Mobile size
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Wait for the page to load
@@ -63,6 +71,10 @@ test.describe("Mobile Tests", () => {
     }
 
     await page.setViewportSize({ width: 375, height: 667 }); // Mobile size
+
+    // Add a small timeout before navigating to the page
+    await page.waitForTimeout(1500); // Wait for 1.5 seconds
+
     await page.goto("/");
 
     // Wait for the page to load
@@ -77,3 +89,5 @@ test.describe("Mobile Tests", () => {
     await expect(page).toHaveURL(/\/about/);
   });
 });
+
+// cspell:ignore domcontentloaded