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

.npmignore

@@ -0,0 +1,15 @@
+.github/
+.svelte-kit/
+.vscode/
+build/
+node_modules/
+src/
+static/
+.gitignore
+.npmignore
+.prettierignore
+.prettierrc
+blunt.config.cjs
+svelte.config.js
+tsconfig.json
+vite.config.js

.vscode/svelte.code-snippets

@@ -3,11 +3,11 @@
     "prefix": "s-page-template",
     "body": [
       "<script lang=\"ts\">",
-      "  import * as E from '\\$components/Elemental';",
+      "  import * as P  from '\\$PACKAGE';",
       "  $1",
       "</script>",
       "",
-      "<E.SEO title=\"${1:New Page}\" />",
+      "<P.SEO title=\"${1:New Page}\" />",
     ],
     "description": "Basic page layout for all +page routes with SEO built in",
     "scope": "svelte"
@@ -16,7 +16,7 @@
     "prefix": "s-ts",
     "body": [
       "<script lang=\"ts\">",
-      "  import * as E from '\\$components/Elemental';",
+      "  import * as P  from '\\$PACKAGE';",
       "  $1",
       "</script>",
       "",
@@ -37,28 +37,28 @@
   "Button": {
     "prefix": "E.Btn",
     "body": [
-      "<E.Btn variant=\"${2:primary}\">$1</E.Btn>"
+      "<P.Btn variant=\"${2:primary}\">$1</P.Btn>"
     ],
     "scope": "svelte"
   },
   "Debug": {
     "prefix": "E.Debug",
     "body": [
-      "<E.Debug data={$1} />"
+      "<P.Debug data={$1} />"
     ],
     "scope": "svelte"
   },
   "Icon": {
     "prefix": "E.Icon",
     "body": [
-      "<E.Icon name=\"${2:home}\" />"
+      "<P.Icon name=\"${2:home}\" />"
     ],
     "scope": "svelte"
   },
   "SEO": {
     "prefix": "E.SEO",
     "body": [
-      "<E.SEO title=\"${1:home}\" description=\"$2\" ${3:robots} />"
+      "<P.SEO title=\"${1:home}\" description=\"$2\" ${3:robots} />"
     ],
     "scope": "svelte"
   },

README.md

@@ -1,14 +1,3 @@
 # nathanblaylock.com
 
-## Develop: 
-1. Create a new branch for what you are working on
-2. `npm run dev`
-
-## Deploy:
-1. Create a new branch from an issue and checkout locally
-2. Run `npm run build` and `npm run preview`
-   1. This step is important to also build the css file for other apps.
-3. Update package.json version
-4. Merge in to `master` branch. This triggers a GitHub action to deploy the site on gh-pages
-5. Check the actions status at https://github.com/ngblaylock/nathanblaylock.com/actions
-6. Add a new release on GitHub
+This is my portfolio website.

dev-docs/decisions/packaging.md

@@ -0,0 +1,5 @@
+# Packaging
+
+There was a folder in my components called "Elemental" which was intended to be used as basic elemental components tht would be used all throughout the application. The top-level components were more of snippet components that were used usually once.
+
+While developing Scoresheet I found that I needed those components and some other files. I found @sveltejs/package and thought that would be a good way to share my code between these two projects. So I moved everything that I plan to use between projects under a new folder at `src/lib/PACKAGE` which can also be imported internally with the `$PACKAGE` alias.

dev-docs/index.md

@@ -0,0 +1,12 @@
+## Develop: 
+1. Create a new branch for what you are working on
+2. `npm run dev`
+
+## Deploy:
+1. Create a new branch from an issue and checkout locally
+2. Run `npm run build` and `npm run preview`
+   1. This step is important to also package SvelteKit and compile the Sass file for other apps.
+3. Update package.json version
+4. Merge in to `master` branch. This triggers a GitHub action to deploy the site on gh-pages
+5. Check the actions status at https://github.com/ngblaylock/nathanblaylock.com/actions
+6. Add a new release on GitHub

dist/Btn.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import {} from './icons';
+import Icon from './Icon.svelte';
+let { class: classList = '', href = '', variant = 'primary', iconLeft, iconRight, outline = false, children, ...restProps } = $props();
+const hasInnerIcon = $derived(!!iconLeft || !!iconRight);
+const outlineVariant = $derived(outline ? 'outline-' : '');
+</script>
+
+{#snippet btnContent()}
+  {#if iconLeft}
+    <Icon name={iconLeft} size={1.5} />
+  {/if}
+  {@render children?.()}
+  {#if iconRight}
+    <Icon name={iconRight} size={1.5} />
+  {/if}
+{/snippet}
+
+{#if href}
+  <a class="btn btn-{outlineVariant}{variant} {classList}" class:btn-inner-icon={hasInnerIcon} {href}
+    >{@render btnContent()}</a
+  >
+{:else}
+  <button class="btn btn-{outlineVariant}{variant} {classList}" class:btn-inner-icon={hasInnerIcon} {...restProps}
+    >{@render btnContent()}</button
+  >
+{/if}

dist/Btn.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type IconName } from './icons';
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    variant?: Variant;
+    class?: string;
+    children: Snippet;
+    [key: string]: unknown;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    outline?: boolean;
+}
+declare const Btn: import("svelte").Component<Props, {}, "">;
+type Btn = ReturnType<typeof Btn>;
+export default Btn;

dist/Debug.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { dev } from '$app/environment';
+let { data } = $props();
+</script>
+
+{#if dev}
+  <div class="dev-note">
+    <pre class="text-bg-dark m-0 p-3 rounded">{JSON.stringify(data, null, 2)}</pre>
+  </div>
+{/if}

dist/Debug.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    data: any;
+}
+declare const Debug: import("svelte").Component<Props, {}, "">;
+type Debug = ReturnType<typeof Debug>;
+export default Debug;

dist/Icon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import icons, {} from './icons';
+let { name, size = 1 } = $props();
+let path = $derived(icons[name] || '');
+</script>
+
+{#if path}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+    style="width: {size}rem; height: {size}rem;"
+  >
+    <path d={path} />
+  </svg>
+{/if}

dist/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type IconName } from './icons';
+interface Props {
+    name: IconName;
+    size?: number;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

dist/IconBtn.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import {} from './icons';
+import Icon from './Icon.svelte';
+let { class: classList = '', href = '', variant = 'primary', icon, title, outline = false, ...restProps } = $props();
+const outlineVariant = $derived(outline ? 'outline-' : '');
+</script>
+
+{#if href}
+  <a {title} class="btn btn-{outlineVariant}{variant} btn-icon {classList}" {href}><Icon name={icon} size={1.5} /></a>
+{:else}
+  <button {title} class="btn btn-{outlineVariant}{variant} btn-icon {classList}" {...restProps}><Icon name={icon} size={1.5} /></button>
+{/if}

dist/IconBtn.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type IconName } from './icons';
+interface Props {
+    href?: string;
+    variant?: Variant;
+    class?: string;
+    icon: IconName;
+    outline?: boolean;
+    title: string;
+    [key: string]: unknown;
+}
+declare const IconBtn: import("svelte").Component<Props, {}, "">;
+type IconBtn = ReturnType<typeof IconBtn>;
+export default IconBtn;

dist/SEO.svelte

@@ -0,0 +1,26 @@
+<!-- 
+@component
+This is just called SEO for standardization. The only page that should be shown on search engines is the homepage. This also updates the page title 
+-->
+
+<script lang="ts">import { page } from '$app/stores';
+import { global } from '../global.svelte';
+import { onMount } from 'svelte';
+let { robots = false, title = '', description = 'Nathan Blaylock is a User Experience Engineer who loves to creatively solve complex problems. This portfolio is a small sample of his public projects.', hideHeader = false, } = $props();
+onMount(() => {
+    hideHeader ? (global.pageTitle = '') : (global.pageTitle = title);
+});
+let titleTemplate = $derived(title ? title + ' | Nathan Blaylock' : 'Nathan Blaylock');
+</script>
+
+<svelte:head>
+  <title>{titleTemplate}</title>
+  <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}" />
+  {#if !robots}
+    <meta name="robots" content="noindex,nofollow" />
+  {/if}
+</svelte:head>

dist/SEO.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    robots?: boolean;
+    title?: string;
+    description?: string;
+    hideHeader?: boolean;
+}
+/** This is just called SEO for standardization. The only page that should be shown on search engines is the homepage. This also updates the page title */
+declare const Seo: import("svelte").Component<Props, {}, "">;
+type Seo = ReturnType<typeof Seo>;
+export default Seo;

dist/icons.d.ts

@@ -0,0 +1,25 @@
+declare const icons: {
+    arrowDown: string;
+    arrowLeft: string;
+    arrowRight: string;
+    arrowUp: string;
+    chartLine: string;
+    check: string;
+    chevronDown: string;
+    chevronLeft: string;
+    chevronRight: string;
+    chevronUp: string;
+    close: string;
+    copy: string;
+    dragVertical: string;
+    home: string;
+    menu: string;
+    minus: string;
+    pencil: string;
+    plus: string;
+    poll: string;
+    table: string;
+    viewList: string;
+};
+export default icons;
+export type IconName = keyof typeof icons;

dist/icons.js

@@ -0,0 +1,25 @@
+import { mdiArrowDown, mdiArrowLeft, mdiArrowRight, mdiArrowUp, mdiChartLine, mdiCheck, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiClose, mdiContentCopy, mdiDragVertical, mdiHome, mdiMenu, mdiMinus, mdiPencil, mdiPlus, mdiPoll, mdiTable, mdiViewList, } from '@mdi/js';
+const icons = {
+    arrowDown: mdiArrowDown,
+    arrowLeft: mdiArrowLeft,
+    arrowRight: mdiArrowRight,
+    arrowUp: mdiArrowUp,
+    chartLine: mdiChartLine,
+    check: mdiCheck,
+    chevronDown: mdiChevronDown,
+    chevronLeft: mdiChevronLeft,
+    chevronRight: mdiChevronRight,
+    chevronUp: mdiChevronUp,
+    close: mdiClose,
+    copy: mdiContentCopy,
+    dragVertical: mdiDragVertical,
+    home: mdiHome,
+    menu: mdiMenu,
+    minus: mdiMinus,
+    pencil: mdiPencil,
+    plus: mdiPlus,
+    poll: mdiPoll,
+    table: mdiTable,
+    viewList: mdiViewList,
+};
+export default icons;

dist/index.d.ts

@@ -0,0 +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';

dist/index.js

@@ -0,0 +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';