@networkpro/web 0.13.2 → 1.1.0

package/src/lib/components/Logo.svelte

@@ -0,0 +1,110 @@
+<!-- ==========================================================================
+src/lib/components/Logo.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  // Import logo images
+  import { logoPng, logoWbp } from "$lib";
+
+  /**
+   * Decoding mode for the image.
+   * @type {"sync" | "async" | "auto"}
+   */
+  export let decoding = "sync";
+
+  /**
+   * Loading mode for the image.
+   * @type {"eager" | "lazy"}
+   */
+  export let loading = "eager";
+
+  /**
+   * CSS class for the logo image.
+   * @type {string}
+   */
+  export let className = "logo";
+
+  /**
+   * Alt text for the logo image.
+   * @type {string}
+   */
+  export let alt = "Network Pro Strategies";
+
+  /**
+   * First part of the company slogan.
+   * @type {string}
+   */
+  export let sloganA = "Locking Down Networks";
+
+  /**
+   * Second part of the company slogan.
+   * @type {string}
+   */
+  export let sloganB = "Unlocking Confidence™";
+
+  /**
+   * Enable/disable display of the slogan.
+   * @type {boolean}
+   */
+  export let showSlogan = true;
+
+  /**
+   * Enable/disable display of the tagline.
+   * @type {boolean}
+   */
+  export let showTagline = true;
+
+  /**
+   * Width of the logo in pixels.
+   * @type {number}
+   */
+  export let width = 250;
+
+  /**
+   * Height of the logo in pixels.
+   * @type {number}
+   */
+  export let height = 250;
+
+  /**
+   * Fetch priority for the logo image.
+   * @type {"high" | "low" | "auto"}
+   */
+  export let fetchpriority = "high";
+
+  /**
+   * Tagline text to display.
+   * @type {string}
+   */
+  export let tagline = "Security | Networking | Privacy";
+</script>
+
+<!-- BEGIN LOGO AND SITE TITLE -->
+<picture>
+  <source srcset={logoWbp} type="image/webp" />
+  <img
+    {decoding}
+    {loading}
+    class={className}
+    src={logoPng}
+    {alt}
+    {fetchpriority}
+    style="width: {width}px; height: {height}px" />
+</picture>
+
+{#if showSlogan}
+  <div class="index-title1">
+    {sloganA},<br />
+    {sloganB}
+  </div>
+{/if}
+
+<div class="spacer"></div>
+
+{#if showTagline}
+  <h2 class="index-title2">{tagline}</h2>
+{/if}
+<!-- END LOGO AND SITE TITLE -->

package/src/lib/components/MetaTags.svelte

@@ -0,0 +1,41 @@
+<!-- ==========================================================================
+src/lib/components/MetaTags.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  export let title;
+  export let description;
+
+  // Static shared values
+  const ogUrl = "https://netwk.pro";
+  const ogImg = "/img/banner-og-1200x630.png";
+  const companyName = "Network Pro Strategies";
+  const twitterAct = "@NetEng_Pro";
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+
+  <!-- OpenGraph -->
+  <meta property="og:title" content={title} />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content={ogUrl} />
+  <meta property="og:image" content={ogImg} />
+  <meta property="og:image:alt" content={companyName} />
+  <meta property="og:description" content={description} />
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content={twitterAct} />
+  <meta name="twitter:creator" content={twitterAct} />
+  <meta property="twitter:domain" content={ogUrl} />
+  <meta property="twitter:url" content={ogUrl} />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:description" content={description} />
+  <meta name="twitter:image" content={ogImg} />
+  <meta name="twitter:image:alt" content={companyName} />
+</svelte:head>

package/src/lib/components/SocialMedia.svelte

@@ -0,0 +1,70 @@
+<!-- ==========================================================================
+src/lib/components/SocialMedia.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  /**
+   * Social media link object.
+   * @typedef {Object} SocialLink
+   * @property {string} href - The URL of the social media profile.
+   * @property {string} label - The name of the social media platform (used for accessibility).
+   * @property {string} iconClass - The CSS class for the font-awesome icon.
+   * @property {string} [rel="noopener noreferrer"] - The `rel` attribute for the link (optional, defaults to "noopener noreferrer").
+   */
+
+  /**
+   * Array of social media links.
+   * @type {SocialLink[]}
+   */
+  const socialLinks = [
+    {
+      href: "https://instagram.com/netwk_pro",
+      label: "Instagram",
+      iconClass: "fab fa-square-instagram fa-2x",
+    },
+    {
+      href: "https://facebook.com/neteng.pro",
+      label: "Facebook",
+      iconClass: "fab fa-square-facebook fa-2x",
+    },
+    {
+      href: "https://linkedin.com/company/netwk-pro",
+      label: "LinkedIn",
+      iconClass: "fab fa-linkedin fa-2x",
+    },
+    {
+      href: "https://noc.social/@NetEng_Pro",
+      label: "Mastodon",
+      rel: "me noopener noreferrer", // Special rel attribute for Mastodon
+      iconClass: "fab fa-mastodon fa-2x",
+    },
+    {
+      href: "https://github.com/netwk-pro/",
+      label: "GitHub",
+      iconClass: "fab fa-square-github fa-2x",
+    },
+  ];
+</script>
+
+<!-- BEGIN SOCIAL MEDIA -->
+<div class="soc-wrap">
+  <table class="soc">
+    <tbody>
+      <tr>
+        {#each socialLinks as { href, label, rel = "noopener noreferrer", iconClass }}
+          <td class="soc-fa">
+            <p>
+              <a {rel} {href} target="_blank" aria-label={label}>
+                <span class={iconClass}></span>
+              </a>
+            </p>
+          </td>
+        {/each}
+      </tr>
+    </tbody>
+  </table>
+</div>
+<!-- END SOCIAL MEDIA -->

package/src/lib/components/foss/FossFeatures.svelte

@@ -0,0 +1,24 @@
+<!-- ==========================================================================
+src/lib/components/foss/FossFeatures.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  /**
+   * Array of feature strings that describe the FOSS item
+   * @type {string[]}
+   */
+  export let features = [];
+</script>
+
+<!-- BEGIN FOSS FEATURES -->
+{#if features && features.length > 0}
+  <ul>
+    {#each features as feature}
+      <li>{feature}</li>
+    {/each}
+  </ul>
+{/if}
+<!-- END FOSS FEATURES -->

package/src/lib/components/foss/FossItemContent.svelte

@@ -0,0 +1,153 @@
+<!-- ==========================================================================
+src/lib/components/foss/FossItemContent.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import FossFeatures from "$lib/components/foss/FossFeatures.svelte";
+  // Import directly from $lib by way of image utility
+  import { obtainiumPng, obtainiumWbp } from "$lib";
+
+  /** @type {"noopener noreferrer"} */
+  const rel = "noopener noreferrer";
+
+  /** @type {string} */
+  const obtainiumLink =
+    "https://apps.obtainium.imranr.dev/redirect.html?r=obtainium://app/%7B%22id%22%3A%22fe.linksheet.nightly%22%2C%22url%22%3A%22https%3A%2F%2Fgithub.com%2FLinkSheet%2Fnightly%22%2C%22author%22%3A%221fexd%22%2C%22name%22%3A%22LinkSheet%20Nightly%22%2C%22preferredApkIndex%22%3A0%2C%22additionalSettings%22%3A%22%7B%5C%22includePrereleases%5C%22%3Atrue%2C%5C%22fallbackToOlderReleases%5C%22%3Atrue%2C%5C%22filterReleaseTitlesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22filterReleaseNotesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22verifyLatestTag%5C%22%3Afalse%2C%5C%22dontSortReleasesList%5C%22%3Afalse%2C%5C%22useLatestAssetDateAsReleaseDate%5C%22%3Afalse%2C%5C%22trackOnly%5C%22%3Afalse%2C%5C%22versionExtractionRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22matchGroupToUse%5C%22%3A%5C%22%5C%22%2C%5C%22versionDetection%5C%22%3Afalse%2C%5C%22releaseDateAsVersion%5C%22%3Afalse%2C%5C%22useVersionCodeAsOSVersion%5C%22%3Afalse%2C%5C%22apkFilterRegEx%5C%22%3A%5C%22LinkSheet.Nightly%5C%22%2C%5C%22invertAPKFilter%5C%22%3Atrue%2C%5C%22autoApkFilterByArch%5C%22%3Atrue%2C%5C%22appName%5C%22%3A%5C%22%5C%22%2C%5C%22shizukuPretendToBeGooglePlay%5C%22%3Afalse%2C%5C%22exemptFromBackgroundUpdates%5C%22%3Afalse%2C%5C%22skipUpdateNotifications%5C%22%3Afalse%2C%5C%22about%5C%22%3A%5C%22Restore%20link%20control%20on%20Android%2012%2B%5C%22%7D%22%7D";
+
+  /** @type {"async"} */
+  const decoding = "async";
+
+  /** @type {"lazy"} */
+  const loading = "lazy";
+
+  /**
+   * @type {{
+   *   id: string,
+   *   title: string,
+   *   images: {
+   *     webp: string,
+   *     png: string
+   *   },
+   *   imgAlt: string,
+   *   headline: string,
+   *   headlineDescription: string,
+   *   detailsDescription: string,
+   *   features: any[],
+   *   notes: string[],
+   *   links: Array<{
+   *     label?: string,
+   *     href?: string,
+   *     imgAlt?: string,
+   *     downloadText?: string,
+   *     downloadHref?: string,
+   *     hideLabels?: boolean
+   *   }>
+   * }}
+   */
+  export let fossItem;
+
+  /**
+   * Flag indicating if this is the first FOSS item in the list.
+   * Only the first item should use eager loading.
+   * @type {boolean}
+   */
+  export let isFirst = false;
+</script>
+
+<!-- BEGIN FOSS ITEMS -->
+<section id={fossItem.id}>
+  <div class="foss-wrap">
+    <table class="foss">
+      <tbody>
+        <tr>
+          <td class="foss-cell">
+            <picture>
+              <source srcset={fossItem.images.webp} type="image/webp" />
+              <img
+                decoding={isFirst ? "sync" : decoding}
+                loading={isFirst ? "eager" : loading}
+                fetchpriority={isFirst ? "high" : "auto"}
+                src={fossItem.images.png}
+                alt={fossItem.imgAlt}
+                style="width: 50px; height: 50px" />
+            </picture>
+          </td>
+          <td class="foss-cell">
+            <h2>{fossItem.title}</h2>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <h3>{fossItem.headline}</h3>
+
+  {@html fossItem.headlineDescription}
+
+  <FossFeatures features={fossItem.features} />
+
+  {@html fossItem.detailsDescription}
+
+  {#each fossItem.notes as note}
+    <blockquote class="bquote">
+      {@html note}
+    </blockquote>
+  {/each}
+
+  &nbsp;
+
+  <div class="linksheet">
+    <!-- Special handling for LinkSheet's Obtainium link -->
+    {#if fossItem.id === "linksheet"}
+      <div class="linksheet-entry">
+        <a {rel} href={obtainiumLink} target="_blank">
+          <picture>
+            <source srcset={obtainiumWbp} type="image/webp" />
+            <img
+              decoding={isFirst ? "sync" : decoding}
+              loading={isFirst ? "eager" : loading}
+              fetchpriority={isFirst ? "high" : "auto"}
+              src={obtainiumPng}
+              alt="Obtainium"
+              style="width: 207px; height: 80px" />
+          </picture>
+        </a>
+        <p>
+          <span style="color: #ffc627"
+            ><i class="fas fa-file-arrow-down" style="margin-left: 8px;"></i
+            ></span>
+          <a
+            {rel}
+            href="https://raw.githubusercontent.com/netwk-pro/dev-sveltekit/refs/heads/master/assets/bin/linksheet.json"
+            download
+            type="application/json"
+            style="margin-left: 8px;"
+            target="_blank">
+            Obtainium App Config
+          </a>
+        </p>
+      </div>
+    {/if}
+
+    <!-- Other links -->
+    {#each fossItem.links as { label, href, imgAlt, downloadText, downloadHref, hideLabels }, i}
+      <!-- Skip the first link for LinkSheet since we already handled it separately -->
+      {#if !(fossItem.id === "linksheet" && i === 0)}
+        <div class="linksheet-entry">
+          {#if !hideLabels && label && href}
+            <strong>{label}:</strong>
+            <a {rel} {href} target="_blank">{href}</a>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  <div class="spacer"></div>
+
+  <span class="small-text"><a href="#top">Back to top</a></span>
+</section>
+<!-- END FOSS ITEMS -->

package/src/lib/components/layout/Footer.svelte

@@ -0,0 +1,188 @@
+<!-- ==========================================================================
+src/lib/components/layout/Footer.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 icons for licenses
+  import { bySvg, ccSvg } from "$lib";
+
+  // Log the base path to verify its value
+  //console.log("Base path:", base);
+
+  // Dynamic links for licensing and trademark
+  const ccbyLink = `${base}/license#cc-by`;
+  const gnugplLink = `${base}/license#gnu-gpl`;
+  const trademarkLink = `${base}/license#trademark`;
+
+  /**
+   * Creator details object.
+   * @typedef {Object} Creator
+   * @property {string} name - The name of the creator.
+   * @property {string} url - The URL of the creator's website.
+   * @property {string} trademark - The trademark name of the creator.
+   * @property {string} slogan - The slogan of the creator.
+   */
+
+  /**
+   * Icon details object.
+   * @typedef {Object} Icon
+   * @property {string} src - The source URL of the icon image.
+   * @property {string} alt - The alt text for the icon image.
+   */
+
+  /**
+   * License details object.
+   * @typedef {Object} License
+   * @property {string} type - The type of the license (e.g., "CC BY 4.0").
+   * @property {string} url - The internal URL for the license.
+   * @property {string} [externalUrl] - The external URL for the license.
+   * @property {string} [description] - A brief description of the license.
+   * @property {Icon[]} [icons] - An array of icon objects for representing the license visually.
+   */
+
+  /**
+   * @type {Creator}
+   */
+  const creator = {
+    name: "Network Pro Strategies",
+    url: "https://netwk.pro",
+    trademark: "Network Pro™",
+    slogan: "Locking Down Networks™",
+  };
+
+  /**
+   * @type {License[]}
+   */
+  const licenses = [
+    {
+      type: "CC BY 4.0",
+      url: ccbyLink,
+      externalUrl: "https://creativecommons.org/licenses/by/4.0/",
+      icons: [
+        {
+          src: ccSvg,
+          alt: "Creative Commons BY",
+        },
+        {
+          src: bySvg,
+          alt: "Creative Commons BY",
+        },
+      ],
+    },
+    {
+      type: "GNU GPL",
+      url: gnugplLink,
+      externalUrl: "https://fsf.org",
+      description: "Free Software Foundation",
+    },
+  ];
+
+  /**
+   * Namespace attributes for the container.
+   * @type {Object}
+   */
+  const namespaceAttributes = {
+    "xmlns:cc": "http://creativecommons.org/ns#",
+    "xmlns:dct": "http://purl.org/dc/terms/",
+  };
+
+  /**
+   * Relation attributes for external links.
+   * @type {string}
+   */
+  const rel = "noopener noreferrer";
+
+  /**
+   * Relation attributes for license links.
+   * @type {string}
+   */
+  const relLicense = "license noopener noreferrer";
+
+  /**
+   * Target attribute for opening links in the same tab.
+   * @type {string}
+   */
+  const targetSelf = "_self";
+
+  /**
+   * Target attribute for opening links in a new tab.
+   * @type {string}
+   */
+  const targetBlank = "_blank";
+</script>
+
+<!-- BEGIN FOOTER -->
+<div class="copyright" {...namespaceAttributes}>
+  <!-- Copyright Section -->
+  <p>
+    Copyright &copy; 2025<br />
+    <a
+      rel="cc:attributionURL dct:creator"
+      property="cc:attributionName"
+      href={creator.url}
+      target={targetBlank}>
+      <strong>{creator.name}</strong>
+    </a>
+    ({creator.trademark})
+  </p>
+
+  <!-- Trademark Section -->
+  <p>
+    {creator.trademark}, the shield logo, and the "{creator.slogan}" slogan are
+    <a href={trademarkLink} target={targetSelf}>trademarks</a>
+    of {creator.name}.
+  </p>
+
+  <!-- Licensing Section -->
+  <p>
+    Licensed under
+    {#each licenses as license, index}
+      {#if license.type === "CC BY 4.0"}
+        <a
+          href={license.url}
+          target={targetSelf}
+          rel={relLicense}
+          style="display: inline-block">
+          <strong>{license.type}</strong>
+        </a>
+        {#if license.icons}
+          {#each license.icons as icon}
+            <a
+              href={license.externalUrl}
+              target={targetBlank}
+              rel={relLicense}
+              style="display: inline-block">
+              <img
+                decoding="async"
+                loading="lazy"
+                src={icon.src}
+                alt={icon.alt}
+                style="
+                  width: 18px !important;
+                  height: 18px !important;
+                  margin-left: 3px;
+                  text-decoration: none;
+                  vertical-align: text-bottom;
+                " />
+            </a>
+          {/each}
+        {/if}
+      {:else}
+        <a href={license.url} target={targetSelf} rel={relLicense}>
+          <strong>{license.type}</strong>
+        </a>
+        , as published by the
+        <a {rel} href={license.externalUrl} target={targetBlank}
+          >{license.description}</a
+        >, either version 3 of the License, or (at your option) any later
+        version.
+      {/if}
+      {index < licenses.length - 1 ? ", and the " : ""}
+    {/each}
+  </p>
+</div>
+<!-- END FOOTER -->

package/src/lib/components/layout/HeaderDefault.svelte

@@ -0,0 +1,86 @@
+<!-- ==========================================================================
+src/lib/components/layout/HeaderDefault.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 homeLink = base || "/";
+  const aboutLink = `${base}/about`;
+  const fossLink = `${base}/foss-spotlight`;
+  const blogLink = "https://blog.netwk.pro";
+
+  /**
+   * Navigation link object.
+   * @typedef {Object} NavItem
+   * @property {string} label - The text displayed for the link.
+   * @property {string} href - The URL or anchor the link points to.
+   * @property {string} target - Specifies where to open the link (e.g., "_self" or "_blank").
+   * @property {boolean} external - Whether the link points to an external resource.
+   */
+
+  /**
+   * Array of navigation links.
+   * @type {NavItem[]}
+   */
+  const nav = [
+    { label: "home", href: homeLink, target: "_self", external: false },
+    { label: "about", href: aboutLink, target: "_self", external: false },
+    { label: "foss", href: fossLink, target: "_self", external: false },
+    {
+      label: "blog",
+      href: blogLink,
+      target: "_self",
+      external: false,
+    },
+    {
+      label: "discussions",
+      href: "https://github.com/netwk-pro/netwk-pro.github.io/discussions",
+      target: "_blank",
+      external: true,
+    },
+    {
+      label: "link hub",
+      href: "https://linktr.ee/neteng_pro",
+      target: "_blank",
+      external: true,
+    },
+  ];
+
+  /**
+   * Relation attribute for external links.
+   * @type {string}
+   */
+  const rel = "noopener noreferrer";
+</script>
+
+<!-- BEGIN DEFAULT HEADER -->
+<nav class="center-nav">
+  {#each nav as { label, href, target, external }, index}
+    <a {href} {target} rel={external ? rel : undefined}>
+      {label}
+    </a>
+    {#if external}
+      <sup>
+        <span style="color: #ffc627;">
+          <i class="fas fa-arrow-up-right-from-square fa-2xs"></i>
+        </span>
+      </sup>
+    {/if}
+    <!-- Separator logic -->
+    {#if index < nav.length - 1}
+      {#if label === "blog"}
+        <br />
+      {:else}
+        <span class="separator">|</span>
+      {/if}
+    {/if}
+  {/each}
+</nav>
+<!-- END DEFAULT HEADER -->