@networkpro/web 1.1.2 → 1.3.0

package/LICENSE.md

@@ -51,7 +51,7 @@ Web: <https://bio.neteng.pro>
 # Legal, Copyright, and Licensing
 
 **Network Pro Strategies**  
-**Effective Date:** May 8, 2025
+**Effective Date:** May 18, 2025
 
 &nbsp;
 
@@ -74,11 +74,10 @@ Web: <https://bio.neteng.pro>
 11. [Modifications and Liability Disclaimer](#disclaimer)
 12. [Contact](#contact)
 13. [Revisions](#revisions)
-14. [Attribution](#attribution)
 
 ---
 
-**Formats Available:** [HTML](./legal) | Markdown
+**Formats Available:** [HTML](https://netwk.pro/license) | Markdown
 
 <a name="ownership"></a>
 
@@ -144,7 +143,7 @@ This work is dual-licensed under:
 
 <a name="cc-by"></a>
 
-## 6. Creative Commons License (CC BY 4.0)
+## 7. Creative Commons License (CC BY 4.0)
 
 <sup>Formats: [HTML](https://legal.netwk.pro/html/CC-BY-4.0.html) | [Markdown](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/CC-BY-4.0.md) | [Text](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/CC-BY-4.0.txt) | [RDFa](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/CC-BY-4.0-rdfa.xml) | [XMP](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/CC-BY-4.0.xml)</sup>
 
@@ -170,7 +169,7 @@ Permissions beyond the scope of this License—or instead of those permitted by
 
 <a name="gnu-gpl"></a>
 
-## 7. GNU General Public License (GPL)
+## 8. GNU General Public License (GPL)
 
 <sup>Formats: [HTML](https://legal.netwk.pro/html/COPYING.html) | [Markdown](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/COPYING.md) | [Text](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/COPYING.txt) | [RDFa](https://github.com/netwk-pro/netwk-pro-legal/blob/master/assets/license/COPYING-rdfa.xml) | [ODT](https://github.com/netwk-pro/netwk-pro-legal/raw/refs/heads/master/assets/license/COPYING.odt)</sup>
 
@@ -203,7 +202,7 @@ The inclusion, reference, or linking of any third-party content **does not const
 
 <a name="prohibited-uses"></a>
 
-## 9. Prohibited Uses
+## 10. Prohibited Uses
 
 **The following activities are strictly prohibited and may constitute infringement or unfair competition under applicable law, unless explicitly authorized in writing by the Company:**
 
@@ -216,7 +215,7 @@ The inclusion, reference, or linking of any third-party content **does not const
 
 <a name="disclaimer"></a>
 
-## 10. Modifications and Liability Disclaimer
+## 11. Modifications and Liability Disclaimer
 
 Modifications, redistribution, or any use of the Licensed Material are performed entirely at your own risk.
 
@@ -228,16 +227,16 @@ Modifications, redistribution, or any use of the Licensed Material are performed
 
 <a name="contact"></a>
 
-## 11. Contact
+## 12. Contact
 
-The Company may be contacted via our [contact form](https://contact.neteng.pro) or by email at:  
-📧 `support (at) neteng.pro`
+The Company may be contacted via our [contact form](https://netwk.pro/contact) or by email at:  
+📧 `contact (at) s.neteng.pro`
 
 <sub>[Back to top](#top)</sub>
 
 <a name="revisions"></a>
 
-## 12. Revisions
+## 13. Revisions
 
 This legal page may be updated to comply with legal or operational changes. The current effective date is listed at the top of this document.
 
@@ -245,40 +244,12 @@ This legal page may be updated to comply with legal or operational changes. The
 
 <a name="attribution"></a>
 
-## 13. Attribution
-
-Website base structure provided by HTML5 Boilerplate:  
-&lt;[https://html5boilerplate.com/](https://html5boilerplate.com/)>&gt;
-
-```markdown
-Copyright (c) HTML5 Boilerplate
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-```
-
-<sub>[Back to top](#top)</sub>
-
 ---
 
 <div style="font-size: 12px; font-weight: bold; text-align: center;">
 
-[Home](./) &nbsp; | &nbsp; [Terms of Use](./terms-of-use)  
-[Privacy Policy](./privacy-policy) &nbsp; | &nbsp; Legal
+[Home](https://netwk.pro) &nbsp; | &nbsp; [Terms of Use](https://netwk.pro/terms-of-use)  
+[Privacy Policy](https://netwk.pro/privacy-policy) &nbsp; | &nbsp; Legal
 
 </div>
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@networkpro/web",
   "private": false,
   "sideEffects": false,
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Locking Down Networks, Unlocking Confidence | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "security",
@@ -51,6 +51,10 @@
     "lint:md": "npx markdownlint-cli2 \"**/*.{md,markdown}\" \"#node_modules/**\" \"#build/**\"",
     "lint:css": "stylelint \"**/*.{css,svelte}\" --ignore-path .stylelintignore",
     "lint:all": "npm run lint && npm run lint:md && npm run lint:css && npm run format",
+    "lhci": "lhci",
+    "lighthouse": "npm run lighthouse:local",
+    "lighthouse:local": "npm run build && npm run preview & wait-on http://localhost:4173 && npm run lhci:run",
+    "lhci:run": "lhci autorun --config=.lighthouserc.cjs",
     "test": "npm run test:all",
     "test:all": "npm run test:client -- --run && npm run test:server -- --run",
     "test:client": "vitest --config vitest.config.client.js",
@@ -58,6 +62,8 @@
     "test:watch": "vitest --config vitest.config.client.js --watch",
     "test:coverage": "npm run test:client -- --run --coverage && npm run test:server -- --run --coverage",
     "css:bundle": "node scripts/bundleCss.js",
+    "head:flatten": "node scripts/flattenHeaders.js",
+    "head:validate": "node scripts/validateHeaders.js",
     "checkout": "npm run test:all && npm run lint:all && npm run check"
   },
   "devDependencies": {

package/playwright.config.js

@@ -1,3 +1,10 @@
+/* ==========================================================================
+playwright.config.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
 // @ts-check
 import { defineConfig, devices } from "@playwright/test";
 

package/scripts/flattenHeaders.js

@@ -0,0 +1,61 @@
+/* ==========================================================================
+scripts/flattenHeaders.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * CSP header flattening utility
+ * Flattens the Content-Security-Policy header in a headers file
+ *
+ * @module scripts/
+ * @author SunDevil311
+ * @updated 2025-05-18
+ */
+
+import fs from "fs";
+
+const HEADERS_PATH = "./static/_headers"; // update if needed
+const OUTPUT_PATH = "./static/_headers.flattened";
+
+const lines = fs.readFileSync(HEADERS_PATH, "utf-8").split("\n");
+const output = [];
+
+let cspLines = [];
+let inCSP = false;
+
+for (const line of lines) {
+  if (line.trim().startsWith("Content-Security-Policy:")) {
+    inCSP = true;
+    cspLines.push(line.trim());
+  } else if (inCSP && line.startsWith("  ")) {
+    cspLines.push(line.trim());
+  } else {
+    if (inCSP) {
+      // Output flattened CSP
+      const flattened = cspLines
+        .join(" ")
+        .replace(/\s*;\s*/g, "; ") // Normalize spacing
+        .replace(/\s+/g, " ")
+        .trim();
+      output.push(`  ${flattened}`);
+      cspLines = [];
+      inCSP = false;
+    }
+    output.push(line);
+  }
+}
+
+// Handle edge case: CSP is last in file
+if (cspLines.length > 0) {
+  const flattened = cspLines
+    .join(" ")
+    .replace(/\s*;\s*/g, "; ")
+    .replace(/\s+/g, " ")
+    .trim();
+  output.push(`  ${flattened}`);
+}
+
+fs.writeFileSync(OUTPUT_PATH, output.join("\n"));
+console.log(`Flattened headers written to ${OUTPUT_PATH}`);

package/scripts/validateHeaders.js

@@ -0,0 +1,95 @@
+/* ==========================================================================
+scripts/validateHeaders.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * CSP header validation utility
+ * Validates the Content-Security-Policy header in a headers file
+ *
+ * @module scripts/
+ * @author SunDevil311
+ * @updated 2025-05-18
+ */
+
+// validate-headers.js
+import fs from "fs";
+
+const file = "./static/_headers";
+const lines = fs.readFileSync(file, "utf-8").split("\n");
+
+let currentPath = null;
+let errors = [];
+
+let currentHeader = null;
+let headerValueBuffer = [];
+
+function flushBufferedHeader(lineNum) {
+  if (!currentHeader) return;
+
+  const value = headerValueBuffer.join(" ").trim();
+
+  if (currentHeader !== "Content-Security-Policy" && value.endsWith(";")) {
+    errors.push(
+      `Line ${lineNum}: Header '${currentHeader}' should not end with a semicolon`,
+    );
+  }
+
+  if (currentHeader === "Content-Security-Policy" && !value.endsWith(";")) {
+    errors.push(
+      `Line ${lineNum}: 'Content-Security-Policy' must end with a semicolon`,
+    );
+  }
+
+  currentHeader = null;
+  headerValueBuffer = [];
+}
+
+for (let i = 0; i < lines.length; i++) {
+  const line = lines[i];
+  const trimmed = line.trim();
+
+  if (trimmed.startsWith("/*")) {
+    if (currentPath) {
+      errors.push(
+        `Line ${i + 1}: Multiple '/*' blocks detected. Only one is allowed in Netlify _headers`,
+      );
+    }
+    currentPath = trimmed;
+    continue;
+  }
+
+  if (trimmed === "") continue;
+
+  if (line.startsWith("  ")) {
+    const colonIndex = line.indexOf(":");
+
+    if (colonIndex !== -1) {
+      // New header
+      flushBufferedHeader(i);
+      currentHeader = line.substring(0, colonIndex).trim();
+      const rest = line.substring(colonIndex + 1).trim();
+      headerValueBuffer.push(rest);
+    } else if (currentHeader) {
+      // Continuation of previous header
+      headerValueBuffer.push(trimmed);
+    } else {
+      errors.push(
+        `Line ${i + 1}: Continuation line without a valid header context`,
+      );
+    }
+  }
+}
+
+// Final flush
+flushBufferedHeader(lines.length);
+
+if (errors.length) {
+  console.error("❌ Header validation failed:");
+  errors.forEach((e) => console.error("  -", e));
+  process.exit(1);
+} else {
+  console.log("✅ _headers file passed validation!");
+}

package/src/global.d.ts

@@ -0,0 +1,15 @@
+/* ==========================================================================
+src/global.d.ts
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}

package/src/lib/components/PWAInstallButton.svelte

@@ -0,0 +1,93 @@
+<!-- ==========================================================================
+src/lib/components/PWAInstallButton.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+
+  let show = false;
+
+  /** @type {BeforeInstallPromptEvent | null} */
+  let deferredPrompt = null;
+
+  /**
+   * @typedef {CustomEvent<BeforeInstallPromptEvent>} PWAInstallAvailableEvent
+   */
+
+  onMount(() => {
+    /**
+     * Listen for the custom event fired by registerServiceWorker.js
+     * to enable a custom install experience.
+     *
+     * TypeScript / svelte-check does not recognize custom events by default,
+     * so we cast the base Event to CustomEvent manually.
+     */
+    window.addEventListener(
+      "pwa-install-available",
+      (/** @type {Event} */ e) => {
+        const customEvent = /** @type {PWAInstallAvailableEvent} */ (e);
+        deferredPrompt = customEvent.detail;
+        show = true;
+      },
+    );
+  });
+
+  /**
+   * Trigger the native install prompt and handle user response
+   */
+  async function promptInstall() {
+    if (!deferredPrompt) return;
+
+    deferredPrompt.prompt();
+
+    const { outcome } = await deferredPrompt.userChoice;
+    console.log(`User response to PWA install prompt: ${outcome}`);
+
+    // Always hide the button after interaction
+    show = false;
+    deferredPrompt = null;
+  }
+</script>
+
+{#if show}
+  <button
+    id="pwa-install"
+    class="install-button"
+    on:click={promptInstall}
+    transition:fade={{ duration: 600 }}>
+    Install App
+  </button>
+{/if}
+
+<style>
+  .install-button {
+    display: block;
+    padding: 0.5rem 1rem;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-size: 1rem;
+    font-weight: bold;
+    color: #000;
+    background-color: #ffc627;
+    transition: background-color 0.2s ease-in-out;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+  }
+
+  .install-button:hover {
+    background-color: #e6b300;
+  }
+
+  .install-button:focus {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+  }
+</style>

package/src/lib/registerServiceWorker.js

@@ -5,25 +5,31 @@ SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 ========================================================================== */
 
+/**
+ * Registers the service worker and handles update lifecycle, install prompt, and
+ * browser/environment compatibility checks. This supports offline usage and PWA behavior.
+ */
 export function registerServiceWorker() {
   if ('serviceWorker' in navigator) {
     // Skip registration in Firefox during development
-    const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
-    const isDevelopment = window.location.hostname === 'localhost' ||
-                         window.location.hostname === '127.0.0.1';
+    const isFirefox = navigator.userAgent.includes('Firefox');
+    const isDevelopment =
+      window.location.hostname === 'localhost' ||
+      window.location.hostname === '127.0.0.1';
 
     if (isFirefox && isDevelopment) {
       console.log('Service Worker registration skipped in Firefox development mode');
       return;
     }
 
-    // Wait until after the page fully loads for better performance
+    // Wait until after full page load for performance optimization
     window.addEventListener('load', () => {
-      navigator.serviceWorker.register('service-worker.js')
+      navigator.serviceWorker
+        .register('service-worker.js')
         .then((registration) => {
           console.log('Service Worker registered with scope:', registration.scope);
 
-          // Track installation of new service worker
+          // Track installation of a new service worker
           registration.addEventListener('updatefound', () => {
             const newWorker = registration.installing;
             console.log('New service worker installing...');
@@ -40,7 +46,7 @@ export function registerServiceWorker() {
               ) {
                 updatePrompted = true;
 
-                // Custom prompt: reload to update
+                // Custom prompt: ask user to reload for latest content
                 if (confirm('New content is available. Reload to update?')) {
                   window.location.reload();
                 }
@@ -52,7 +58,7 @@ export function registerServiceWorker() {
           console.error('Service Worker registration failed:', error);
         });
 
-      // Ensure page reloads when new service worker takes control
+      // Ensure the page reloads automatically when the new service worker takes control
       let refreshing = false;
       navigator.serviceWorker.addEventListener('controllerchange', () => {
         if (!refreshing) {
@@ -60,6 +66,14 @@ export function registerServiceWorker() {
           window.location.reload();
         }
       });
+
+      // Optional PWA install prompt logic
+      window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent('pwa-install-available', {
+          detail: /** @type {BeforeInstallPromptEvent} */ (e)
+        }));
+      });
     });
   }
 }

package/src/routes/+layout.svelte

@@ -12,8 +12,8 @@ This file is part of Network Pro.
   import Footer from "$lib/components/layout/Footer.svelte";
   import HeaderDefault from "$lib/components/layout/HeaderDefault.svelte";
   import HeaderHome from "$lib/components/layout/HeaderHome.svelte";
+  import PWAInstallButton from "$lib/components/PWAInstallButton.svelte";
   import { browser } from "$app/environment";
-  // TODO: Testing in progress
   import { registerServiceWorker } from "$lib/registerServiceWorker.js";
   import "$lib/styles";
 
@@ -47,7 +47,6 @@ This file is part of Network Pro.
     // Preload Apple Touch icon
     touchImg.src = appleTouchIcon;
 
-    // TODO: Testing in progress
     // Register the service worker
     registerServiceWorker();
   }
@@ -92,9 +91,11 @@ This file is part of Network Pro.
     {#if data.pathname === "/"}
       <!-- Render the Home Header for the root route -->
       <HeaderHome />
+      <PWAInstallButton />
     {:else}
       <!-- Render the Default Header for all other routes -->
       <HeaderDefault />
+      <PWAInstallButton />
     {/if}
   </ContainerSection>
 </header>

package/src/service-worker.js

@@ -8,25 +8,71 @@ This file is part of Network Pro.
 /** @type {ServiceWorkerGlobalScope} */
 const sw = self;
 
+const disallowedHosts = ["licdn.com", "googletagmanager.com"];
+
 import { build, files, version } from "$service-worker";
 
 /** @type {string} */
 const CACHE = `cache-${version}`;
 
 /** @type {string[]} */
-const ASSETS = Array.from(new Set([...build, ...files, "/offline.html"]));
+const excludedAssets = [];
+
+/** @type {string[]} */
+const ASSETS = Array.from(
+  new Set(
+    [...build, ...files, "/offline.html"].filter((path) => {
+      try {
+        const url = new URL(path, location.origin);
+        const hostname = url.hostname;
+
+        const shouldExclude =
+          path.startsWith("http") ||
+          disallowedHosts.some(
+            (host) => hostname === host || hostname.endsWith(`.${host}`),
+          ) ||
+          [
+            "/img/banner-1280x640.png",
+            "/img/banner-og-1200x630.png",
+            "/img/logo-transparent.png",
+            "/img/logo.png",
+            "/img/svelte.png",
+            "/robots.txt",
+            "/screenshots/desktop-foss.png",
+            "/sitemap.xml",
+            "/CNAME",
+          ].includes(path);
+
+        if (shouldExclude) excludedAssets.push(path);
+        return !shouldExclude;
+      } catch (err) {
+        console.warn("[SW] URL parse failed, skipping path:", path, err);
+        excludedAssets.push(path);
+        return true;
+      }
+    }),
+  ),
+);
 
-console.log("[SW] Assets to cache:", ASSETS); // Helps debug duplicates
+const uniqueExcludedAssets = [...new Set(excludedAssets)].sort();
+
+console.log("[SW] Assets to precache:", ASSETS);
+console.log("[SW] Excluded assets:", uniqueExcludedAssets);
 
 /**
  * @param {ExtendableEvent} event
  */
 sw.addEventListener("install", (event) => {
-  /** @type {ExtendableEvent} */ (event).waitUntil(
-    caches
-      .open(CACHE)
-      .then((cache) => cache.addAll(ASSETS))
-      .then(() => sw.skipWaiting()),
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE);
+      try {
+        await cache.addAll(ASSETS);
+        sw.skipWaiting();
+      } catch (err) {
+        console.warn("[SW] Failed to precache some assets:", err);
+      }
+    })(),
   );
 });
 
@@ -64,8 +110,10 @@ sw.addEventListener("activate", (event) => {
 sw.addEventListener("fetch", (event) => {
   /** @type {FetchEvent} */ (event).respondWith(
     (async () => {
-      const cached = await caches.match(event.request);
-      if (cached) return cached;
+      if (new URL(event.request.url).origin === location.origin) {
+        const cached = await caches.match(event.request);
+        if (cached) return cached;
+      }
 
       try {
         if (event.request.mode === "navigate") {

package/static/manifest.json

@@ -1,10 +1,15 @@
 {
+  "id": "/",
+  "start_url": "/?utm_source=homescreen",
+  "scope": "/",
   "name": "Network Pro Strategies",
   "short_name": "Network Pro",
   "description": "Access our expert cybersecurity services anytime, anywhere with our streamlined Progressive Web App. Optimized for speed, security, and mobile use, this app offers a seamless experience to explore our solutions, view project highlights, and get in touch—all in one place.",
-  "start_url": "/?utm_source=homescreen",
+  "lang": "en-US",
+  "dir": "ltr",
   "display": "standalone",
   "display_override": ["window-controls-overlay", "minimal-ui"],
+  "orientation": "any",
   "background_color": "#191919",
   "theme_color": "#ffc627",
   "icons": [
@@ -22,7 +27,7 @@
       "src": "/icon-512x512-maskable.png",
       "type": "image/png",
       "sizes": "512x512",
-      "purpose": "maskable"
+      "purpose": "any maskable"
     },
     {
       "src": "/icon-splash.png",
@@ -30,9 +35,38 @@
       "sizes": "512x512"
     }
   ],
-  "orientation": "any",
-  "scope": "/",
   "categories": ["business", "security", "technology", "network", "privacy"],
+  "prefer_related_applications": false,
+  "screenshots": [
+    {
+      "src": "/screenshots/desktop-home.png",
+      "type": "image/png",
+      "sizes": "1920x1080",
+      "form_factor": "wide",
+      "label": "Homescreen of Network Pro Strategies"
+    },
+    {
+      "src": "/screenshots/desktop-about.png",
+      "type": "image/png",
+      "sizes": "1920x1080",
+      "form_factor": "wide",
+      "label": "About Network Pro Strategies"
+    },
+    {
+      "src": "/screenshots/mobile-home.png",
+      "type": "image/png",
+      "sizes": "1080x1920",
+      "form_factor": "narrow",
+      "label": "Mobile view of Network Pro Strategies homepage"
+    },
+    {
+      "src": "/screenshots/mobile-foss.png",
+      "type": "image/png",
+      "sizes": "1080x1920",
+      "form_factor": "narrow",
+      "label": "FOSS Spotlight on mobile"
+    }
+  ],
   "shortcuts": [
     {
       "name": "Consulting Services",