@networkpro/web 1.22.1 → 1.23.0

package/src/lib/components/MetaTags.svelte

@@ -9,6 +9,9 @@ This file is part of Network Pro.
 <script>
   export let title;
   export let description;
+  export let url = 'https://netwk.pro';
+  export let image = `${url}/img/banner-og-1200x630.png`;
+  export let pathname = '';
 
   import { CONSTANTS } from '$lib';
 
@@ -16,33 +19,56 @@ This file is part of Network Pro.
 
   const { COMPANY_INFO, LINKS } = CONSTANTS;
 
+  // Default fallbacks (for missing or undefined props)
+  const defaultTitle = 'Security, Networking, Privacy';
+  const defaultDescription = 'Locking Down Networks, Unlocking Confidence™';
+
+  // computed title/description with fallback
+  $: metaTitle = title
+    ? `${title}${title.includes(COMPANY_INFO.APP_NAME) ? '' : ` — ${COMPANY_INFO.APP_NAME}`}`
+    : defaultTitle;
+
+  $: metaDescription = description
+    ? `${description}${description.includes(COMPANY_INFO.NAME) ? '' : ` | Security, Networking, Privacy — ${COMPANY_INFO.NAME}`}`
+    : defaultDescription;
+
+  // Compute canonical URL
+  $: canonicalUrl = pathname
+    ? `${url.replace(/\/$/, '')}${pathname.startsWith('/') ? pathname : `/${pathname}`}`
+    : url;
+
   // Static shared values
-  const ogUrl = LINKS.HOME;
-  const ogImg = '/img/banner-og-1200x630.png';
-  const companyName = COMPANY_INFO.NAME;
   const twitterAct = '@NetEng_Pro';
 </script>
 
 <svelte:head>
-  <title>{title}</title>
-  <meta name="description" content={description} />
+  <title>{metaTitle}</title>
+  <meta name="description" content={metaDescription} />
 
   <!-- OpenGraph -->
-  <meta property="og:title" content={title} />
+  <meta property="og:title" content={metaTitle} />
+  <meta property="og:description" content={metaDescription} />
+  <meta property="og:url" content={url} />
   <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} />
+  <meta property="og:site_name" content={COMPANY_INFO.APP_NAME} />
+  <meta property="og:image" content={image} />
+  <meta property="og:image:alt" content={COMPANY_INFO.NAME} />
+  <meta property="og:locale" content="en_US" />
 
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={metaTitle} />
+  <meta name="twitter:description" content={metaDescription} />
   <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} />
+  <meta property="twitter:domain" content={url} />
+  <meta property="twitter:url" content={url} />
+  <meta name="twitter:image" content={image} />
+  <meta name="twitter:image:alt" content={COMPANY_INFO.NAME} />
+
+  <!-- Canonical URL -->
+  <link rel="canonical" href={canonicalUrl} />
+
+  <!-- Basic SEO -->
+  <meta name="author" content="Scott Lopez" />
 </svelte:head>

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

@@ -6,8 +6,6 @@ SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 ========================================================================== -->
 
-<!-- cspell:ignore ccby gnugpl -->
-
 <script>
   import { base } from '$app/paths';
   // Import icons for licenses
@@ -22,9 +20,9 @@ This file is part of Network Pro.
   const { COMPANY_INFO, CONTACT, PAGE, NAV } = CONSTANTS;
 
   // Dynamic links for licensing and trademark
-  const ccbyLink = `${base}/license#cc-by`;
-  const gnugplLink = `${base}/license#gnu-gpl`;
-  const trademarkLink = `${base}/license#trademark`;
+  const ccbyLink = `${base}/legal#cc-by`;
+  const gnugplLink = `${base}/legal#gnu-gpl`;
+  const trademarkLink = `${base}/legal#trademark`;
 
   /** @type {string} */
   const creatorUrl = 'https://netwk.pro';
@@ -101,12 +99,12 @@ This file is part of Network Pro.
       target={PAGE.BLANK}>
       <strong>{COMPANY_INFO.NAME}</strong>
     </a>
-    ({COMPANY_INFO.APP_NAME}&trade;)
+    ({COMPANY_INFO.APP_NAME})
   </p>
 
   <!-- Trademark Section -->
   <p>
-    {COMPANY_INFO.APP_NAME}&trade;, the shield logo, and the "{creatorSlogan}&trade;"
+    {COMPANY_INFO.APP_NAME}, the shield logo, and the "{creatorSlogan}&trade;"
     slogan are
     <a href={trademarkLink} target={PAGE.SELF}>trademarks</a>
     of {COMPANY_INFO.NAME}.
@@ -146,3 +144,5 @@ This file is part of Network Pro.
   </p>
 </div>
 <!-- END FOOTER -->
+
+<!-- cspell:ignore ccby gnugpl -->

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

@@ -21,7 +21,7 @@ This file is part of Network Pro.
   const aboutLink = `${base}/about`;
   const servLink = `${base}/services`;
   const lhubLink = `${base}/links`;
-  const fossLink = `${base}/foss-spotlight`;
+  const fossLink = `${base}/foss`;
   const discussLink =
     'https://github.com/netwk-pro/netwk-pro.github.io/discussions';
 

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

@@ -18,7 +18,7 @@ This file is part of Network Pro.
   const { PAGE, LINKS } = CONSTANTS;
 
   const aboutLink = `${base}/about`;
-  const fossLink = `${base}/foss-spotlight`;
+  const fossLink = `${base}/foss`;
   const servLink = `${base}/services`;
   const lhubLink = `${base}/links`;
   const discussLink =

package/src/lib/index.js

@@ -16,7 +16,7 @@ This file is part of Network Pro.
  * and re-exported here for flat `$lib` imports.
  * @module src/lib
  * @author Scott Lopez
- * @updated 2025-10-20
+ * @updated 2025-10-30
  */
 
 // Re-export all images so they can be imported directly from `$lib`
@@ -52,7 +52,7 @@ export { PGP_KEYS } from '$lib/data/pgpKeys.js';
 export const CONSTANTS = {
   COMPANY_INFO: {
     NAME: 'Network Pro Strategies',
-    APP_NAME: 'Network Pro',
+    APP_NAME: 'Network Pro™',
     YEAR: '2025',
   },
   CONTACT: {

package/src/lib/meta.js

@@ -18,62 +18,62 @@ This file is part of Network Pro.
 const meta = {
   '/': {
     title:
-      'Security, Networking, Privacy — Network Pro Strategies',
+      'Security, Networking, Privacy',
     description:
-      'Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro Strategies',
+      'Locking Down Networks, Unlocking Confidence™',
   },
   '/about': {
-    title: 'About Us — Network Pro™',
-    description: 'About Us | Security, Networking, Privacy — Network Pro Strategies',
+    title: 'About Us',
+    description: 'About Us',
   },
   '/privacy': {
-    title: 'Privacy Policy — Network Pro™',
+    title: 'Privacy Policy',
     description:
-      'Privacy Policy | Security, Networking, Privacy — Network Pro Strategies',
+      'Privacy Policy',
   },
   '/terms-of-use': {
-    title: 'Website Terms of Use — Network Pro™',
+    title: 'Website Terms of Use',
     description:
-      'Website Terms of Use | Security, Networking, Privacy — Network Pro Strategies',
+      'Website Terms of Use',
   },
-  '/license': {
-    title: 'Legal, Copyright, and Licensing — Network Pro™',
+  '/legal': {
+    title: 'Legal, Copyright, and Licensing',
     description:
-      'Legal, Copyright, and Licensing | Security, Networking, Privacy — Network Pro Strategies',
+      'Legal, Copyright, and Licensing',
   },
   '/terms-conditions': {
-    title: 'Consulting Terms and Conditions — Network Pro™',
+    title: 'Consulting Terms and Conditions',
     description:
-      'Terms and Conditions | Security, Networking, Privacy — Network Pro Strategies',
+      'Terms and Conditions',
   },
-  '/foss-spotlight': {
-    title: 'FOSS Spotlight — Network Pro™',
+  '/foss': {
+    title: 'FOSS Spotlight',
     description:
-      'FOSS Spotlight | Security, Networking, Privacy — Network Pro Strategies',
+      'FOSS Spotlight',
   },
   '/privacy-dashboard': {
-    title: 'Privacy Dashboard — Network Pro™',
+    title: 'Privacy Dashboard',
     description:
-      'Privacy Dashboard | Security, Networking, Privacy — Network Pro Strategies',
+      'Privacy Dashboard',
   },
   '/pgp': {
-    title: 'Public PGP Keys — Network Pro™',
+    title: 'Public PGP Keys',
     description:
-      'Public encryption keys for secure communication | Security, Networking, Privacy — Network Pro Strategies',
+      'Public encryption keys for secure communication',
   },
   '/services': {
-    title: "On-Site Services - Network Pro™",
+    title: "On-Site Services",
     description:
-      'On-Site Services | Security, Networking, Privacy — Network Pro Strategies'
+      'On-Site Services'
   },
   // Excludes redirect-only routes like /contact, /consultation, /privacy-rights
 };
 
 /** @type {MetaData} */
 const defaultMeta = {
-  title: 'Loading... | Network Pro™',
+  title: 'Loading...',
   description:
-    'Please wait while the content loads... | Security, Networking, Privacy — Network Pro™',
+    'Please wait while the content loads...',
 };
 
 // Export values

package/src/lib/pages/AboutContent.svelte

@@ -116,9 +116,9 @@ This file is part of Network Pro.
 </section>
 
 <section id="page-title">
-  <h1>About {COMPANY_INFO.APP_NAME}&trade;</h1>
+  <h1>About {COMPANY_INFO.APP_NAME}</h1>
   <p>
-    <strong>{COMPANY_INFO.NAME} ({COMPANY_INFO.APP_NAME}&trade;)</strong>
+    <strong>{COMPANY_INFO.NAME} ({COMPANY_INFO.APP_NAME})</strong>
     <br />
     <em>Security, Networking, Privacy</em>
   </p>
@@ -143,8 +143,8 @@ This file is part of Network Pro.
 </p>
 
 <p>
-  At <strong>{COMPANY_INFO.NAME} ({COMPANY_INFO.APP_NAME}&trade;)</strong>, we
-  deliver network security and engineering, cybersecurity, and digital privacy
+  At <strong>{COMPANY_INFO.NAME} ({COMPANY_INFO.APP_NAME})</strong>, we deliver
+  network security and engineering, cybersecurity, and digital privacy
   consulting with clarity, credibility, and care. We believe that real security
   doesn't have to come at the cost of user autonomy, and that privacy-minded
   solutions can be both practical and powerful.
@@ -186,7 +186,7 @@ This file is part of Network Pro.
 <div class="spacer"></div>
 
 <p>
-  Additionally, {COMPANY_INFO.APP_NAME}&trade; provides
+  Additionally, {COMPANY_INFO.APP_NAME} provides
   <a href={servLink} target={PAGE.SELF}>on-site services</a>
   in the Greater Phoenix Metropolitan Area (Maricopa County, AZ). Our
   <a href={servLink} target={PAGE.SELF}>on-site services</a> are available to both
@@ -212,10 +212,10 @@ This file is part of Network Pro.
 </p>
 
 <p>
-  At {COMPANY_INFO.APP_NAME}&trade;, we deliver robust, intentional solutions
-  for individuals and organizations that prioritize integrity — without
-  compromising agility or trust. We don't just protect infrastructure. We
-  protect peace of mind.
+  At {COMPANY_INFO.APP_NAME}, we deliver robust, intentional solutions for
+  individuals and organizations that prioritize integrity — without compromising
+  agility or trust. We don't just protect infrastructure. We protect peace of
+  mind.
 </p>
 
 <p>

package/src/lib/pages/HomeContent.svelte

@@ -21,7 +21,7 @@ This file is part of Network Pro.
    * URL to the FOSS Spotlight page, using the base path
    * @type {string}
    */
-  const spotlightLink = `${base}/foss-spotlight`;
+  const spotlightLink = `${base}/foss`;
 
   /**
    * CSS class for the index headings.

package/src/lib/pages/LicenseContent.svelte

@@ -126,7 +126,7 @@ This file is part of Network Pro.
       <p>
         All content—including text, software, logos, graphics, documentation,
         and other materials—provided by
-        <strong>{COMPANY_INFO.NAME}</strong> ("{COMPANY_INFO.APP_NAME}&trade;",
+        <strong>{COMPANY_INFO.NAME}</strong> ("{COMPANY_INFO.APP_NAME}",
         "Company", "Licensor") is protected by U.S. and international copyright
         laws.
       </p>
@@ -135,12 +135,12 @@ This file is part of Network Pro.
         <strong>
           <a href={homeLink} target={PAGE.BLANK}> {COMPANY_INFO.NAME} </a>
         </strong>
-        ({COMPANY_INFO.APP_NAME}&trade;)
+        ({COMPANY_INFO.APP_NAME})
       </p>
     {:else if link.id === 'trademark'}
       <p>The following trademarks are the exclusive property of the Company:</p>
       <ul>
-        <li><strong>Brand Name:</strong> {COMPANY_INFO.APP_NAME}&trade;</li>
+        <li><strong>Brand Name:</strong> {COMPANY_INFO.APP_NAME}</li>
         <li><strong>Domain Names:</strong> netwk.pro, neteng.pro, neteng.cc</li>
         <li
           ><strong>Logo:</strong> The shield logo displayed on our homepage</li>
@@ -233,8 +233,7 @@ This file is part of Network Pro.
       </p>
 
       <p>
-        {COMPANY_INFO.APP_NAME}&trade; (the "Licensed Material") is licensed
-        under
+        {COMPANY_INFO.APP_NAME} (the "Licensed Material") is licensed under
         <strong>Creative Commons Attribution 4.0 International</strong> (CC BY
         4.0)
         <a
@@ -314,8 +313,8 @@ This file is part of Network Pro.
       </p>
 
       <p>
-        {COMPANY_INFO.APP_NAME}&trade; is free software: you can redistribute it
-        and/or modify it under the terms of the
+        {COMPANY_INFO.APP_NAME} is free software: you can redistribute it and/or
+        modify it under the terms of the
         <strong>GNU General Public License</strong> (GNU GPL) as published by
         the
         <a rel={PAGE.REL} href="https://fsf.org" target={PAGE.BLANK}

package/src/lib/pages/ServicesContent.svelte

@@ -85,8 +85,7 @@ This file is part of Network Pro.
   well. Simply <a href={consultLink} target={PAGE.BLANK}
     >schedule a free, initial consultation</a>
   or <a href={contactLink} target={PAGE.BLANK}>contact us directly</a> — we'd be
-  happy to discuss how {COMPANY_INFO.APP_NAME}&trade; can support your business
-  on-site.
+  happy to discuss how {COMPANY_INFO.APP_NAME} can support your business on-site.
 </p>
 
 <p>

package/src/lib/pages/TermsUseContent.svelte

@@ -35,7 +35,7 @@ This file is part of Network Pro.
    * URL to License page, using the base path
    * @type {string}
    */
-  const licenseLink = `${base}/license`;
+  const licenseLink = `${base}/legal`;
 
   /**
    * Markdown version of the Terms of Use document

package/src/lib/types/README.md

@@ -43,8 +43,8 @@ TypeScript build requirement.
 Copyright © 2025  
 **[Network Pro Strategies](https://netwk.pro) (Network Pro™)**
 
-Network Pro™, the shield logo, and the "Locking Down Networks...™" slogan are [trademarks](https://netwk.pro/license#trademark) of Network Pro Strategies.
+Network Pro™, the shield logo, and the "Locking Down Networks...™" slogan are [trademarks](https://netwk.pro/legal#trademark) of Network Pro Strategies.
 
-Licensed under **[CC BY 4.0](https://netwk.pro/license#cc-by)** and the **[GNU GPL](https://netwk.pro/license#gnu-gpl)**, as published by the [Free Software Foundation](https://www.fsf.org), either version 3 of the License, or (at your option) any later version.
+Licensed under **[CC BY 4.0](https://netwk.pro/legal#cc-by)** and the **[GNU GPL](https://netwk.pro/legal#gnu-gpl)**, as published by the [Free Software Foundation](https://www.fsf.org), either version 3 of the License, or (at your option) any later version.
 
 </span>

package/src/routes/+layout.js

@@ -19,9 +19,8 @@ import { meta as routeMeta } from '$lib/meta.js'; // Import meta from $lib/meta.
  * Actual meta content is provided per-route via +page.server.js.
  */
 const fallbackMeta = {
-  title: 'Security, Networking, Privacy — Network Pro™',
-  description:
-    'Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro Strategies',
+  title: 'Security, Networking, Privacy',
+  description: 'Locking Down Networks, Unlocking Confidence™',
 };
 
 export const prerender = 'auto';

package/src/routes/+layout.svelte

@@ -8,11 +8,14 @@ This file is part of Network Pro.
 
 <script>
   export let data;
-
   import { onMount } from 'svelte';
   import { initAnalytics } from '$lib/utils/initAnalytics';
   import { showReminder } from '$lib/stores/posthog';
-  import { ContainerSection, PWAInstallButton } from '$lib/components';
+  import {
+    ContainerSection,
+    MetaTags,
+    PWAInstallButton,
+  } from '$lib/components';
   import { Footer, HeaderDefault, HeaderHome } from '$lib/components/layout';
   import { appleTouchIcon, faviconSvg, logoPng, logoWbp } from '$lib';
 
@@ -34,6 +37,12 @@ This file is part of Network Pro.
     'Locking Down Networks, Unlocking Confidence™ | Security, Networking, Privacy — Network Pro Strategies';
 </script>
 
+<!-- Injects proper <title> and <meta> tags -->
+<MetaTags
+  title={metaTitle}
+  description={metaDescription}
+  pathname={data.pathname} />
+
 <svelte:head>
   <!-- Dynamic preloads only, meta moved to $lib/components/MetaTags.svelte -->
   <link rel="preload" href={logoWbp} as="image" type="image/webp" />
@@ -45,7 +54,6 @@ This file is part of Network Pro.
   <link rel="apple-touch-icon" href={appleTouchIcon} />
 
   <!-- Static moved to app.html 2025-05-21 -->
-  <meta name="theme-color" content="#ffc627" />
 </svelte:head>
 
 <!-- BEGIN HEADER -->

package/src/routes/+page.svelte

@@ -13,29 +13,10 @@ This file is part of Network Pro.
     LegalNav,
     Logo,
     SocialMedia,
-    MetaTags,
   } from '$lib/components';
   import { HomeContent } from '$lib/pages';
-
-  /**
-   * @type {string}
-   * Style class for the horizontal rule element.
-   */
-  const hrStyle = 'hr-styled';
-
-  /**
-   * @type {string}
-   * Style class for the div element.
-   */
-  const spaceStyle = 'spacer';
-
-  export let data;
 </script>
 
-<MetaTags title={data.meta.title} description={data.meta.description} />
-
-<link rel="canonical" href="https://netwk.pro" />
-
 <section id="home-page" data-testid="home-page">
   <FullWidthSection>
     <!-- BEGIN TITLE -->
@@ -44,11 +25,11 @@ This file is part of Network Pro.
     </section>
     <!-- END TITLE -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
-    <hr class={hrStyle} />
+    <hr class="hr-styled" />
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN MAIN CONTENT -->
     <section id="main-content">
@@ -56,7 +37,7 @@ This file is part of Network Pro.
     </section>
     <!-- END MAIN CONTENT -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN SOCIAL MEDIA -->
     <section id="social-media">
@@ -64,9 +45,9 @@ This file is part of Network Pro.
     </section>
     <!-- END SOCIAL MEDIA -->
 
-    <hr class={hrStyle} />
+    <hr class="hr-styled" />
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN LEGAL -->
     <section id="legal-nav">
@@ -74,7 +55,7 @@ This file is part of Network Pro.
     </section>
     <!-- END LEGAL -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN BADGES -->
     <section id="badges">

package/src/routes/about/+page.svelte

@@ -7,26 +7,15 @@ This file is part of Network Pro.
 ========================================================================== -->
 
 <script>
-  import AboutContent from '$lib/pages/AboutContent.svelte';
-  import Badges from '$lib/components/Badges.svelte';
-  import FullWidthSection from '$lib/components/FullWidthSection.svelte';
-  import LegalNav from '$lib/components/LegalNav.svelte';
-  import SocialMedia from '$lib/components/SocialMedia.svelte';
-  import MetaTags from '$lib/components/MetaTags.svelte';
-
-  /**
-   * @type {string}
-   * Style class for the div element.
-   */
-  const spaceStyle = 'spacer';
-
-  export let data;
+  import {
+    Badges,
+    FullWidthSection,
+    LegalNav,
+    SocialMedia,
+  } from '$lib/components';
+  import { AboutContent } from '$lib/pages';
 </script>
 
-<MetaTags title={data.meta.title} description={data.meta.description} />
-
-<link rel="canonical" href="https://netwk.pro/about" />
-
 <section id="about">
   <FullWidthSection>
     <!-- BEGIN MAIN CONTENT -->
@@ -35,7 +24,7 @@ This file is part of Network Pro.
     </section>
     <!-- END MAIN CONTENT -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- SOCIAL MEDIA -->
     <section id="social-media">
@@ -44,14 +33,14 @@ This file is part of Network Pro.
 
     <hr />
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- LEGAL NAVIGATION -->
     <section id="legal-nav">
       <LegalNav />
     </section>
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BADGES -->
     <section id="badges">

package/src/routes/{license → foss}/+page.server.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-src/routes/license/+page.server.js
+src/routes/foss/+page.server.js
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
@@ -13,6 +13,6 @@ export const prerender = false;
 /** @type {import('./$types').PageServerLoad} */
 export function load() {
   return {
-    meta: meta['/license'] || defaultMeta,
+    meta: meta['/foss'] || defaultMeta,
   };
 }

package/src/routes/{foss-spotlight → foss}/+page.svelte

@@ -1,5 +1,5 @@
 <!-- ==========================================================================
-src/lib/pages/FossSpotlightContent.svelte
+src/routes/foss/+page.svelte
 
 Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
@@ -7,26 +7,15 @@ This file is part of Network Pro.
 ========================================================================== -->
 
 <script>
-  import Badges from '$lib/components/Badges.svelte';
-  import FullWidthSection from '$lib/components/FullWidthSection.svelte';
-  import FossContent from '$lib/pages/FossContent.svelte';
-  import LegalNav from '$lib/components/LegalNav.svelte';
-  import SocialMedia from '$lib/components/SocialMedia.svelte';
-  import MetaTags from '$lib/components/MetaTags.svelte';
-
-  /**
-   * @type {string}
-   * Style class for the div element.
-   */
-  const spaceStyle = 'spacer';
-
-  export let data;
+  import {
+    Badges,
+    FullWidthSection,
+    LegalNav,
+    SocialMedia,
+  } from '$lib/components';
+  import { FossContent } from '$lib/pages';
 </script>
 
-<MetaTags title={data.meta.title} description={data.meta.description} />
-
-<link rel="canonical" href="https://netwk.pro/foss-spotlight" />
-
 <section id="license">
   <FullWidthSection>
     <!-- BEGIN FOSS SPOTLIGHT -->
@@ -35,7 +24,7 @@ This file is part of Network Pro.
     </section>
     <!-- END FOSS SPOTLIGHT -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN SOCIAL MEDIA -->
     <section id="social-media">
@@ -45,7 +34,7 @@ This file is part of Network Pro.
 
     <hr />
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN LEGAL -->
     <section id="legal-nav">
@@ -53,7 +42,7 @@ This file is part of Network Pro.
     </section>
     <!-- END LEGAL -->
 
-    <div class={spaceStyle}></div>
+    <div class="spacer"></div>
 
     <!-- BEGIN BADGES -->
     <section id="badges">