74 create elemental component group

.vscode/svelte.code-snippets

@@ -3,10 +3,11 @@
     "prefix": "s-page-template",
     "body": [
       "<script lang=\"ts\">",
-      "  import SEO from '\\$components/SEO.svelte';",
+      "  import * as E from '\\$components/Elemental';",
+      "  $1",
       "</script>",
       "",
-      "<SEO title=\"${1:New Page}\" />",
+      "<E.SEO title=\"${1:New Page}\" />",
     ],
     "description": "Basic page layout for all +page routes with SEO built in",
     "scope": "svelte"
@@ -15,6 +16,7 @@
     "prefix": "s-ts",
     "body": [
       "<script lang=\"ts\">",
+      "  import * as E from '\\$components/Elemental';",
       "  $1",
       "</script>",
       "",
@@ -30,12 +32,34 @@
     ],
     "scope": "svelte"
   },
+
+  // Elemental Snippets
+  "Button": {
+    "prefix": "E.Btn",
+    "body": [
+      "<E.Btn theme=\"${2:primary}\">$1</E.Btn>"
+    ],
+    "scope": "svelte"
+  },
   "Debug": {
-    "prefix": "s-debug",
-    "description": "Quickly see current data in the dom in JSON format.",
+    "prefix": "E.Debug",
+    "body": [
+      "<E.Debug data={$1} />"
+    ],
+    "scope": "svelte"
+  },
+  "Icon": {
+    "prefix": "E.Icon",
     "body": [
-      "<pre>{JSON.stringify($1, null, 2)}</pre>"
+      "<E.Icon name=\"${2:home}\" />"
     ],
     "scope": "svelte"
-  }
+  },
+  "SEO": {
+    "prefix": "E.SEO",
+    "body": [
+      "<E.SEO title=\"${1:home}\" description=\"$2\" ${3:robots} />"
+    ],
+    "scope": "svelte"
+  },
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nathanblaylock.com",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"private": true,
 	"scripts": {
 		"blunt": "node ./node_modules/@ngblaylock/blunt-images ./blunt.config.cjs",

src/components/Elemental/Btn.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let href:string = '';
+  export let theme = 'primary';
+</script>
+
+{#if href}
+   <a class="btn btn-{theme} {$$restProps.class || ''}" href="{href}"><slot /></a>
+{:else}
+  <button class="btn btn-{theme} {$$restProps.class || ''}" on:click><slot /></button>
+{/if}

src/components/SEO.svelte → src/components/Elemental/SEO.svelte

@@ -21,7 +21,6 @@
 	<meta name="description" content={description} />
 	<meta property="og:title" content={titleTemplate} />
 	<meta property="og:description" content={description} />
-	<meta property="og:image" content="https://nathanblaylock.com/images/og-img.jpg" />
 	<meta property="og:url" content="https://nathanblaylock.com{$page.route.id}" />
 	{#if !robots}
 		<meta name="robots" content="noindex,nofollow" />

src/components/Elemental/index.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';
+

src/components/Meta.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+</script>
+
+<svelte:head>
+	<!-- <link rel="icon" href="/favicon.ico" /> -->
+	{#if dev}
+		<link rel="icon" type="image/png" href="/meta/favicon-dev.png" />
+	{:else}
+		<link rel="icon" href="/favicon.ico" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/meta/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/meta/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/meta/favicon-16x16.png" />
+		<link rel="manifest" href="/meta/site.webmanifest" />
+		<link rel="mask-icon" href="/meta/safari-pinned-tab.svg" color="#671110" />
+		<meta property="og:image" content="https://nathanblaylock.com/meta/og-img.jpg" />
+	{/if}
+</svelte:head>

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
   import Footer from '$components/Footer.svelte';
   import Navbar from '$components/Navbar.svelte';
-  import Favicons from '$components/Favicons.svelte';
+  import Meta from '$components/Meta.svelte';
   import BgAngle from '$components/BgAngle.svelte';
   import MqHelper from '$components/MqHelper.svelte';
   import Analytics from '$components/Analytics.svelte';
@@ -34,7 +34,7 @@
   </style>
 </svelte:head>
 <Analytics />
-<Favicons />
+<Meta />
 <BgAngle />
 <MqHelper />
 

src/routes/+page.svelte

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

src/routes/about/+page.svelte

@@ -1,8 +1,8 @@
 <script>
-  import SEO from '$components/SEO.svelte';
+  import * as E from '$components/Elemental';
 </script>
 
-<SEO title="About" />
+<E.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>
-	import SEO from '$components/SEO.svelte';
+	import * as E from '$components/Elemental';
 	import { onMount } from 'svelte';
 
 	onMount(() => { // Load the cognito form
@@ -11,7 +11,7 @@
 	});
 </script>
 
-<SEO title="Contact" />
+<E.SEO title="Contact" />
 
 <div class="row">
 	<div class="col-md-8">

src/routes/privacy/+page.svelte

@@ -1,9 +1,9 @@
 <script>
-  import SEO from '$components/SEO.svelte';
+  import * as E from '$components/Elemental';
 </script>
 
 <div data-aos="fade-up">
-  <SEO title="Privacy" />
+  <E.SEO title="Privacy" />
 
   <p>
     Our main priorities is the privacy of our visitors. This Privacy Policy document contains types

src/routes/projects/+layout.svelte

@@ -2,8 +2,7 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { projects } from '$lib/projectList';
-  import Debug from '$components/Debug.svelte';
-  import Icon from '$components/Icon.svelte';
+  import * as E from '$components/Elemental';
 
   onMount(() => {
     // Set all external anchor links to go to a new tab. Markdown doesn't support it.
@@ -63,12 +62,12 @@
             href="/projects/{getPrevProject().route}"
             class="btn btn-outline-dark btn-inner-icon text-end"
           >
-            <Icon name="arrowLeft" />
+            <E.Icon name="arrowLeft" />
             {getPrevProject().alt}</a
           >
           <a href="/projects/{getNextProject().route}" class="btn btn-outline-dark btn-inner-icon text-end">
             {getNextProject().alt}
-            <Icon name="arrowRight" /></a
+            <E.Icon name="arrowRight" /></a
           >
         </div>
       {/if}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SEO from "$components/SEO.svelte"
+  import * as E from "$components/Elemental";
   import ProjectIcons from "$components/ProjectIcons.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let icons = [
@@ -9,7 +9,7 @@
   ]
 </script>
 
-<SEO title="Bingo Caller" hideHeader />
+<E.SEO title="Bingo Caller" hideHeader />
 
 # Bingo Caller
 

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SEO from "$components/SEO.svelte"
+  import * as E from "$components/Elemental";
   import ProjectIcons from "$components/ProjectIcons.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let icons = [
@@ -11,7 +11,7 @@
   ]
 </script>
 
-<SEO title="Cookbook" hideHeader  />
+<E.SEO title="Cookbook" hideHeader  />
 
 # Cookbook
 

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SEO from "$components/SEO.svelte"
+  import * as E from "$components/Elemental";
   import ProjectIcons from "$components/ProjectIcons.svelte"
   import ProjectBtnLink from "$components/ProjectBtnLink.svelte"
   let icons = [
@@ -16,7 +16,7 @@
   ]
 </script>
 
-<SEO title="Extract GSheet" hideHeader  />
+<E.SEO title="Extract GSheet" hideHeader  />
 
 # Extract GSheet
 

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

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

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

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

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

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

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

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

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

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