Merge branch '84-publish-assets-to-npmgithub'

.npmignore

@@ -2,6 +2,7 @@
 .svelte-kit/
 .vscode/
 build/
+dev-docs/
 node_modules/
 src/
 static/

.vscode/svelte.code-snippets

@@ -3,11 +3,11 @@
     "prefix": "s-page-template",
     "body": [
       "<script lang=\"ts\">",
-      "  import * as P  from '\\$PACKAGE';",
+      "  import SEO  from '\\$components/SEO';",
       "  $1",
       "</script>",
       "",
-      "<P.SEO title=\"${1:New Page}\" />",
+      "<SEO title=\"${1:New Page}\" />",
     ],
     "description": "Basic page layout for all +page routes with SEO built in",
     "scope": "svelte"
@@ -56,9 +56,9 @@
     "scope": "svelte"
   },
   "SEO": {
-    "prefix": "E.SEO",
+    "prefix": "SEO",
     "body": [
-      "<P.SEO title=\"${1:home}\" description=\"$2\" ${3:robots} />"
+      "<SEO title=\"${1:home}\" description=\"$2\" ${3:robots} />"
     ],
     "scope": "svelte"
   },

package.json

@@ -1,12 +1,15 @@
 {
 	"name": "nathanblaylock.com",
-	"version": "2.2.2",
+	"version": "2.2.3",
 	"private": true,
 	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./styles": {
+			"default": "./dist/nathanblaylock.min.css"
 		}
 	},
 	"scripts": {
@@ -48,4 +51,4 @@
 		"svelte": "^5.0.0",
 		"svelte-portal": "^2.2.1"
 	}
-}
+}

src/lib/PACKAGE/index.ts

@@ -1,6 +1,5 @@
 export { default as Btn } from './Btn.svelte';
 export { default as Debug } from './Debug.svelte';
-export { default as SEO } from './SEO.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as IconBtn } from './IconBtn.svelte';
 

src/lib/PACKAGE/SEO.svelte → src/lib/components/SEO.svelte

@@ -4,7 +4,7 @@ This is just called SEO for standardization. The only page that should be shown
 -->
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { global } from '$lib/global.svelte';
   import { onMount } from 'svelte';
 
@@ -33,8 +33,8 @@ This is just called SEO for standardization. The only page that should be shown
   <meta name="description" content={description} />
   <meta property="og:title" content={titleTemplate} />
   <meta property="og:description" content={description} />
-  <meta property="og:url" content="https://nathanblaylock.com{$page.route.id}" />
-  <link rel="canonical" href="https://nathanblaylock.com{$page.route.id}" />
+  <meta property="og:url" content="https://nathanblaylock.com{page.route.id}" />
+  <link rel="canonical" href="https://nathanblaylock.com{page.route.id}" />
   {#if !robots}
     <meta name="robots" content="noindex,nofollow" />
   {/if}

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import * as P  from '$PACKAGE';
   import { projects } from '$lib/projectList';
+  import SEO from '$components/SEO.svelte';
 </script>
 
-<P.SEO title="Projects" robots />
+<SEO title="Projects" robots />
 
 <div class="row mb-5">
   {#each projects as project}

src/routes/about/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import * as P  from '$PACKAGE';
+  import SEO from '$components/SEO.svelte';
   import MyStack from './MyStack.svelte';
 </script>
 
-<P.SEO title="About" />
+<SEO title="About" />
 
 <div class="row align-items-center" data-aos="fade-up">
   <div class="col-sm-3">

src/routes/contact/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as P  from '$PACKAGE';
+	import SEO from '$components/SEO.svelte';
 	import { onMount } from 'svelte';
 
 	onMount(() => { // Load the cognito form
@@ -11,7 +11,7 @@
 	});
 </script>
 
-<P.SEO title="Contact" />
+<SEO title="Contact" />
 
 <div class="row">
 	<div class="col-md-8">

src/routes/privacy/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import * as P  from '$PACKAGE';
+  import SEO from '$components/SEO.svelte';
 </script>
 
 <div data-aos="fade-up">
-  <P.SEO title="Privacy" />
+  <SEO title="Privacy" />
 
   <section>
     <p class="text-end"><strong>Last Updated:</strong> Nov. 9, 2024</p>

src/routes/projects/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { projects } from '$lib/projectList';
   import * as P  from '$PACKAGE';
 
@@ -11,7 +11,7 @@
       alt: '',
     };
 
-  const currentProject = $derived($page.route.id?.replace('/projects/', ''));
+  const currentProject = $derived(page.route.id?.replace('/projects/', ''));
 
   const getNextProject = $derived.by(() => {
     if (!currentProject) {

src/routes/projects/bingo-caller/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -9,7 +9,7 @@
   ]
 </script>
 
-<P.SEO title="Bingo Caller" hideHeader />
+<SEO title="Bingo Caller" hideHeader />
 
 # Bingo Caller
 

src/routes/projects/busy-bee-odd-jobs/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   let logos = [
     "Adobe-Illustrator",
@@ -13,7 +13,7 @@
   ]
 </script>
 
-<P.SEO title="Busy Bee Odd Jobs" hideHeader  />
+<SEO title="Busy Bee Odd Jobs" hideHeader  />
 
 # Busy Bee Odd Jobs
 

src/routes/projects/cookbook/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -11,7 +11,7 @@
   ]
 </script>
 
-<P.SEO title="Cookbook" hideHeader  />
+<SEO title="Cookbook" hideHeader  />
 
 # Cookbook
 

src/routes/projects/enoch-initiative/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   let logos = [
     "Affinity-Photo",
@@ -8,7 +8,7 @@
   ]
 </script>
 
-<P.SEO title="Enoch Initiative" hideHeader  />
+<SEO title="Enoch Initiative" hideHeader  />
 
 # Enoch Initiative
 

src/routes/projects/extract-gsheet/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -16,7 +16,7 @@
   ]
 </script>
 
-<P.SEO title="Extract GSheet" hideHeader  />
+<SEO title="Extract GSheet" hideHeader  />
 
 # Extract GSheet
 

src/routes/projects/group-sale-tracker/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -11,7 +11,7 @@
   ]
 </script>
 
-<P.SEO title="Group Sale Tracker" hideHeader  />
+<SEO title="Group Sale Tracker" hideHeader  />
 
 # Group Sale Tracker
 

src/routes/projects/gtd/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -15,7 +15,7 @@
   ]
 </script>
 
-<P.SEO title="Grammy Tammy's Delights" hideHeader  />
+<SEO title="Grammy Tammy's Delights" hideHeader  />
 
 # Grammy Tammy's Delights
 

src/routes/projects/jrwcpatax/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -14,7 +14,7 @@
   ]
 </script>
 
-<P.SEO title="Jeffrey R. Wangsgard & Associates" hideHeader  />
+<SEO title="Jeffrey R. Wangsgard & Associates" hideHeader  />
 
 # Jeffrey R. Wangsgard & Associates
 

src/routes/projects/placeholdate/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from '$components/ProjectBtnLink.svelte'
   let logos = [
@@ -11,7 +11,7 @@
   ]
 </script>
 
-<P.SEO title="Placeholdate Figma Plugin" hideHeader  />
+<SEO title="Placeholdate Figma Plugin" hideHeader  />
 
 # Placeholdate Figma Plugin
 

src/routes/projects/psychology/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import ProjectWebArchive from "$components/ProjectWebArchive.svelte"
   import Logos from "$components/Logos.svelte"
   let logos = [
@@ -9,7 +9,7 @@
   ]
 </script>
 
-<P.SEO title="Department of Psychology Website" hideHeader  />
+<SEO title="Department of Psychology Website" hideHeader  />
 
 # Department of Psychology Website
 

src/routes/projects/scce/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectWebArchive from "$components/ProjectWebArchive.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
@@ -13,7 +13,7 @@
   ]
 </script>
 
-<P.SEO title="Sorenson Center Website" hideHeader  />
+<SEO title="Sorenson Center Website" hideHeader  />
 
 # Sorenson Center Website
 

src/routes/projects/scoresheet/+page.svx

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import SEO from '$components/SEO.svelte';
   import * as P  from "$PACKAGE";
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
@@ -9,7 +10,7 @@
   ]
 </script>
 
-<P.SEO title="Scoresheet App" hideHeader  />
+<SEO title="Scoresheet App" hideHeader  />
 
 # Scoresheet App
 

src/routes/projects/sdl/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -13,7 +13,7 @@
   ]
 </script>
 
-<P.SEO title="Space Dynamics Laboratory" hideHeader  />
+<SEO title="Space Dynamics Laboratory" hideHeader />
 
 # Space Dynamics Laboratory
 
@@ -35,4 +35,4 @@ Another neat feature I developed was a site-wide keyword search. We wanted a way
 
 The new website was released in November 2022 and has been one of my favorite projects to work on. It took a lot of teamwork and collaboration but we couldn't have been happier with the result.
 
-<Logos {logos} />
+<Logos {logos} />

src/routes/projects/smallsat/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   import ProjectSmallSatArchive from "./ProjectSmallSatArchive.svelte"
@@ -13,7 +13,7 @@
   ]
 </script>
 
-<P.SEO title="Small Satellite Conference" hideHeader  />
+<SEO title="Small Satellite Conference" hideHeader  />
 
 # Small Satellite Conference
 

src/routes/projects/smithfield-chamber-of-commerce/+page.svx

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as P  from "$PACKAGE";
+  import SEO from '$components/SEO.svelte';
   import Logos from "$components/Logos.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let logos = [
@@ -15,7 +15,7 @@
   ]
 </script>
 
-<P.SEO title="Smithfield Chamber of Commerce" hideHeader  />
+<SEO title="Smithfield Chamber of Commerce" hideHeader  />
 
 # Smithfield Chamber of Commerce