@networkpro/web 0.13.2 → 1.1.0

package/jsconfig.json

@@ -0,0 +1,28 @@
+/* =========================================================================
+jsconfig.json
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================= */
+
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": ["vite.config.js"] // Exclude the config file if needed
+
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "npm run build"
+  publish = "build"

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@networkpro/web",
-  "sideEffects": false,
-  "version": "0.13.2",
   "private": false,
+  "sideEffects": false,
+  "version": "1.1.0",
   "description": "Locking Down Networks, Unlocking Confidence | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "security",
@@ -12,8 +12,7 @@
     "advisory",
     "consulting",
     "android",
-    "linux",
-    "blog"
+    "linux"
   ],
   "homepage": "https://netwk.pro",
   "bugs": {
@@ -30,73 +29,77 @@
     "url": "https://bio.neteng.pro"
   },
   "type": "module",
-  "main": "index.html",
-  "directories": {
-    "test": "test"
+  "engines": {
+    "node": ">=22"
   },
+  "main": "src/app.html",
+  "style": "src/lib/styles/global.min.css",
   "scripts": {
-    "start": "webpack serve --open --config webpack.config.dev.mjs",
-    "build": "webpack --config webpack.config.prod.mjs",
-    "test": "mocha test/**/*.mjs",
-    "test:coverage": "c8 mocha test/**/*.mjs",
-    "clean": "rm -rf dist/* node_modules package-lock.json && npm install",
+    "upgrade": "npx npm-check-updates -u",
+    "dev": "vite dev",
+    "build": "vite build",
+    "build:netlify": "netlify build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "clean": "rm -rf build/* node_modules package-lock.json && npm install",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
-    "lint": "eslint --ext .mjs,.js,.cjs --config eslint.config.mjs --ignore-pattern .cache/ --ignore-pattern dist/ .",
-    "lint:fix": "eslint --ext .mjs,.js,.cjs --config eslint.config.mjs --ignore-pattern .cache/ --ignore-pattern dist/ . --fix",
-    "lint:md": "npx markdownlint-cli2 \"**/*.{md,markdown}\" \"#node_modules/**\" \"#dist/**\" \"#.cache/**\"",
-    "lint:css": "stylelint '**/*.{css,html}' --ignore-path .stylelintignore",
+    "lint": "eslint --ext .mjs,.js,.svelte --config eslint.config.mjs .",
+    "lint:fix": "eslint --ext .mjs,.js,.svelte --config eslint.config.mjs . --fix",
+    "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",
-    "checkout": "npm run test && npm run lint:all",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.27.0",
-    "glob": "^11.0.1",
-    "globalthis": "^1.0.4",
-    "normalize.css": "^8.0.1",
-    "safe-stable-stringify": "^2.5.0"
+    "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",
+    "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",
+    "css:bundle": "node scripts/bundleCss.js",
+    "checkout": "npm run test:all && npm run lint:all && npm run check"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/plugin-transform-runtime": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@eslint/js": "^9.20.0",
-    "@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
-    "astroturf": "^1.2.0",
-    "astroturf-loader": "^1.0.0",
+    "@eslint/compat": "^1.2.9",
+    "@eslint/js": "^9.27.0",
+    "@netlify/plugin-sitemap": "^0.8.1",
+    "@playwright/test": "^1.52.0",
+    "@sveltejs/adapter-netlify": "^5.0.2",
+    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.7",
+    "@vitest/coverage-v8": "^3.1.3",
     "autoprefixer": "^10.4.21",
-    "babel-loader": "^9.2.1",
     "browserslist": "^4.24.5",
-    "c8": "^10.1.3",
-    "chai": "^5.2.0",
-    "compression-webpack-plugin": "^11.1.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-mocha": "^10.5.0",
-    "globals": "^16.0.0",
-    "html-webpack-plugin": "^5.6.3",
-    "husky": "^9.1.7",
-    "markdownlint": "^0.37.4",
-    "markdownlint-cli2": "^0.17.2",
-    "mini-css-extract-plugin": "^2.9.2",
-    "mocha": "^11.0.1",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-jsdoc": "^50.6.17",
+    "eslint-plugin-svelte": "^3.8.1",
+    "globals": "^16.1.0",
+    "jsdom": "^26.1.0",
+    "lightningcss": "^1.30.1",
+    "lightningcss-cli": "^1.30.1",
+    "markdownlint": "^0.38.0",
+    "markdownlint-cli2": "^0.18.1",
+    "mdsvex": "^0.12.6",
+    "normalize.css": "^8.0.1",
     "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^3.4.2",
-    "style-loader": "^4.0.0",
-    "stylelint": "^16.14.1",
-    "stylelint-config-alphabetical-order": "^1.0.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^16.0.0",
-    "terser-webpack-plugin": "^5.3.11",
-    "webpack": "^5.98.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0",
-    "webpack-merge": "^5.10.0"
+    "stylelint-order": "^7.0.0",
+    "svelte": "^5.30.2",
+    "svelte-check": "^4.2.1",
+    "svelte-eslint-parser": "^1.2.0",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-lightningcss": "^0.0.5",
+    "vitest": "^3.1.3"
   }
 }

package/playwright.config.js

@@ -0,0 +1,79 @@
+// @ts-check
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: "./tests",
+
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  /* Shared settings for all projects */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173",
+
+    /* Collect trace when retrying the failed test. */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects */
+  projects: [
+    // Desktop Browsers
+    {
+      name: "chromium",
+      use: {
+        browserName: "chromium", // Use Chromium browser
+        headless: true, // Enable true headless mode
+      },
+    },
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"], // Use default Firefox settings
+      },
+    },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"], // Use default WebKit settings
+      },
+    },
+
+    // Mobile Browsers
+    {
+      name: "Mobile Chrome",
+      use: {
+        ...devices["Galaxy S9+"], // Use the Galaxy S9+ device profile
+        headless: true, // Enable true headless mode
+      },
+    },
+    {
+      name: "Mobile Safari",
+      use: {
+        ...devices["iPhone 14"], // Use the iPhone 14 device profile
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/postcss.config.mjs

@@ -0,0 +1,14 @@
+/* ==========================================================================
+postcss.config.mjs
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+import autoprefixer from "autoprefixer";
+
+export default {
+  plugins: [
+    autoprefixer(), // Useful for compatibility
+  ],
+};

package/scripts/bundleCss.js

@@ -0,0 +1,40 @@
+/* ==========================================================================
+scripts/bundleCss.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * LightningCSS transform and minification utility
+ * Transforms and minifies CSS files using LightningCSS (single file)
+ *
+ * @module scripts/
+ * @author SunDevil311
+ * @updated 2025-05-16
+ */
+
+import fs from "fs";
+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");
+
+// Define the path for the output CSS file
+const outputFilePath = path.resolve("static/offline.min.css");
+
+// Bundle and minify the CSS
+const { code, map } = bundle({
+  filename: inputFilePath,
+  minify: true,
+  sourceMap: true,
+});
+
+// Write the bundled CSS to the output file
+fs.writeFileSync(outputFilePath, code);
+
+// Only write the source map if it exists
+if (map) {
+  fs.writeFileSync(`${outputFilePath}.map`, map);
+}

package/src/app.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export { };
+

package/src/app.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- =====================================================================
+    SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+    This file is part of Network Pro.
+    ====================================================================== -->
+
+    <title>%sveltekit.title%</title>
+    <meta name="description" content="%sveltekit.description%" />
+    <meta
+      name="robots"
+      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+    <meta name="author" content="Network Pro Strategies" />
+
+    <!-- Optional CSP for Dev -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' https://snap.licdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://px.ads.linkedin.com; connect-src 'self' https://px.ads.linkedin.com;" />
+
+    <!-- Favicon: Keep only ICO for max compatibility -->
+    <link
+      rel="icon"
+      href="%sveltekit.assets%/favicon.ico"
+      sizes="any"
+      type="image/x-icon" />
+
+    <!-- Preconnects (placed early to optimize connection time) -->
+    <link rel="preconnect" href="https://snap.licdn.com" crossorigin />
+    <link rel="preconnect" href="https://px.ads.linkedin.com" crossorigin />
+
+    <!-- Manifest + theme color -->
+    <link rel="manifest" href="manifest.json" />
+    <meta name="theme-color" content="#ffc627" />
+
+    <meta name="generator" content="SvelteKit 2.21.1" />
+
+    %sveltekit.head%
+  </head>
+  <body>
+    <div id="svelte">%sveltekit.body%</div>
+
+    <!-- LinkedIn Insight Tag - Added 2025-05-14 10:05:06 by SunDevil311 -->
+    <!-- Load LinkedIn script only after page content is fully loaded -->
+    <script type="text/javascript">
+      // Wait for window load event for optimal performance
+      window.addEventListener("load", function () {
+        // LinkedIn Partner ID
+        window._linkedin_partner_id = "7223748";
+        window._linkedin_data_partner_ids =
+          window._linkedin_data_partner_ids || [];
+        window._linkedin_data_partner_ids.push(window._linkedin_partner_id);
+
+        // Initialize lintrk if not already initialized
+        if (!window.lintrk) {
+          window.lintrk = function (a, b) {
+            window.lintrk.q.push([a, b]);
+          };
+          window.lintrk.q = [];
+        }
+
+        // Create and insert script element
+        var s = document.getElementsByTagName("script")[0];
+        var b = document.createElement("script");
+        b.type = "text/javascript";
+        b.async = true;
+        b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+        s.parentNode.insertBefore(b, s);
+      });
+    </script>
+    <noscript>
+      <img
+        height="1"
+        width="1"
+        style="display: none"
+        alt=""
+        src="https://px.ads.linkedin.com/collect/?pid=7223748&fmt=gif" />
+    </noscript>
+  </body>
+</html>

package/src/demo.spec.js

@@ -0,0 +1,14 @@
+/* ==========================================================================
+src/demo.spec.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+import { describe, expect, it } from "vitest";
+
+describe("sum test", () => {
+  it("adds 1 + 2 to equal 3", () => {
+    expect(1 + 2).toBe(3);
+  });
+});

package/src/lib/components/Badges.svelte

@@ -0,0 +1,74 @@
+<!-- ==========================================================================
+src/lib/components/Badges.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import { base } from "$app/paths";
+  // Import badges for licenses
+  import { ccBadge, gplBadge } from "$lib";
+
+  // Log the base path to verify its value
+  //console.log("Base path:", base);
+
+  const ccbyLink = `${base}/license#cc-by`;
+  const gplLink = `${base}/license#gnu-gpl`;
+
+  /**
+   * Badge link object.
+   * @typedef {Object} Badge
+   * @property {string} href - The URL the badge links to.
+   * @property {string} src - The source URL of the badge image.
+   * @property {string} alt - The alt text for the badge image.
+   * @property {string} [class] - The CSS class for styling the badge (optional).
+   * @property {string} width - The width of the badge (CSS value).
+   * @property {string} height - The height of the badge (CSS value).
+   */
+
+  /**
+   * Array of badges with their properties.
+   * @type {Badge[]}
+   */
+  const badges = [
+    {
+      href: ccbyLink,
+      src: ccBadge,
+      alt: "Creative Commons BY",
+      width: "160px",
+      height: "24px",
+    },
+    {
+      href: gplLink,
+      src: gplBadge,
+      alt: "GPL 3.0 or Later",
+      width: "120px",
+      height: "24px",
+    },
+  ];
+</script>
+
+<!-- BEGIN BADGES -->
+<!-- Updated 2025-05-15 02:12:35 by SunDevil311 -->
+<div class="bnav2-wrap">
+  <table class="bnav2">
+    <tbody>
+      <tr>
+        {#each badges as badge}
+          <td class="bnav2-nav">
+            <a href={badge.href} target="_self">
+              <img
+                decoding="async"
+                loading="lazy"
+                src={badge.src}
+                alt={badge.alt}
+                style="width: {badge.width}; height: {badge.height};" />
+            </a>
+          </td>
+        {/each}
+      </tr>
+    </tbody>
+  </table>
+</div>
+<!-- END BADGES -->

package/src/lib/components/ContainerSection.svelte

@@ -0,0 +1,19 @@
+<!-- ==========================================================================
+src/lib/components/ContainerSection.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  /**
+   * Optional: Allows passing additional classes to the container.
+   * @type {string}
+   */
+  export let className = "";
+</script>
+
+<div class={`container ${className}`}>
+  <slot></slot>
+  <!-- Slot to allow child content -->
+</div>

package/src/lib/components/FullWidthSection.svelte

@@ -0,0 +1,13 @@
+<!-- ==========================================================================
+src/lib/components/FullWidthSection.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<div class="full-width-section">
+  <div class="container">
+    <slot></slot>
+    <!-- Slot to allow child content -->
+  </div>
+</div>

package/src/lib/components/LegalNav.svelte

@@ -0,0 +1,75 @@
+<!-- ==========================================================================
+src/lib/components/LegalNav.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import { base } from "$app/paths";
+
+  // Log the base path to verify its value
+  //console.log("Base path:", base);
+
+  const termsLink = `${base}/terms-of-use`;
+  const privacyLink = `${base}/privacy-policy`;
+  const licenseLink = `${base}/license`;
+
+  /**
+   * Navigation link object.
+   * @typedef {Object} NavLink
+   * @property {string} href - The URL the link points to.
+   * @property {string} text - The text displayed for the link.
+   * @property {string} target - Specifies where to open the link (e.g., "_self" or "_blank").
+   * @property {number} [colspan] - Optional property to specify column span for the table cell.
+   */
+
+  /**
+   * Rows of navigation links, where each row is an array of NavLink objects.
+   * @type {NavLink[][]}
+   */
+  const rows = [
+    [
+      {
+        href: termsLink,
+        text: "Terms of Use",
+        target: "_self",
+      },
+      {
+        href: privacyLink,
+        text: "Privacy Policy",
+        target: "_self",
+      },
+    ],
+    [
+      {
+        href: licenseLink,
+        text: "Legal",
+        target: "_self",
+        colspan: 2,
+      },
+    ],
+  ];
+</script>
+
+<!-- BEGIN LEGAL NAVIGATION -->
+<div class="bnav-wrap">
+  <table class="bnav">
+    <tbody>
+      {#each rows as row}
+        <tr>
+          {#each row as link}
+            <td
+              class={link.colspan ? "bnav-cell" : "bnav-nav"}
+              colspan={link.colspan || 1}>
+              <a href={link.href} target={link.target}>
+                {link.text}
+              </a>
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+<!-- END LEGAL NAVIGATION -->