From 4398649ebe45be5fca19a5ebc0f1c4df6980c4bc Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Sun, 4 Jun 2023 17:47:58 -0400
Subject: [PATCH] Fixing up the microcode in SEOTricks.svelte and then adding
 it to blog content.

---
 client/components/SEOTricks.svelte            | 14 ++++++-------
 .../templates/rendered/pages/index.svelte     | 21 ++++++++++++++++++-
 rendered/pages/blog/[slug]/index.svelte       |  4 ++--
 rendered/pages/blog/index.svelte              | 19 +++++++++++++++--
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/client/components/SEOTricks.svelte b/client/components/SEOTricks.svelte
index b1545ef..a0317d1 100644
--- a/client/components/SEOTricks.svelte
+++ b/client/components/SEOTricks.svelte
@@ -38,13 +38,6 @@
 
 <svelte:head>
   <meta name="description" content={ og.description }>
-  <!-- SCHEMA.org spec -->
-  <div itemscope itemtype="{schema_context}/{schema_type}">
-    {#each Object.keys(schema_data) as key}
-      <meta itemprop={ key } content={ schema_data[key] }>
-    {/each}
-  </div>
-
   <!--OG Spec for LinkedIn/Facebook/Others -->
   {#each Object.keys(og) as key}
     <meta property="og:{ key }" content="{ og[key] }" />
@@ -58,3 +51,10 @@
   <link rel="alternate" hreflang={ language } href={ og.url } />
   <link rel="canonical" href={ og.url }/>
 </svelte:head>
+
+<!-- SCHEMA.org spec -->
+<div style="display: none" itemscope itemtype="{schema_context}/{schema_type}">
+  {#each Object.keys(schema_data) as key}
+    <meta itemprop={ key } content={ schema_data[key] }>
+  {/each}
+</div>
diff --git a/commands/templates/rendered/pages/index.svelte b/commands/templates/rendered/pages/index.svelte
index 16cfa85..80219d2 100644
--- a/commands/templates/rendered/pages/index.svelte
+++ b/commands/templates/rendered/pages/index.svelte
@@ -2,6 +2,7 @@
   import Layout from '../Layout.svelte';
   import IconImage from '$/client/components/IconImage.svelte';
   import { developer_admin } from "$/lib/api.js";
+  import SEOTricks from "$/client/components/SEOTricks.svelte";
 
   const components = [
     {title: "Accordion", icon: "align-justify"},
@@ -42,8 +43,26 @@
     {title: "WTVideo", icon: "video"},
   ];
 
+  import { og_base_host, twitter_user } from "$/client/config.js";
+
+  let og = {
+    "title": "Bandolier Template", // title of the article
+    "description": "The example project that is used in the course Learn JavaScript the Hard Way.", // description for inside preview
+    "url": og_base_host, // URL to article
+    "type": "website", // not mentioned on linked in but needed
+  }
+
+  let twitter = {
+    "card": "summary", // must be summary, summary_large_image, app, player
+    "creator": twitter_user, // @username of content creator
+    "description": og.description, // max 200 chars
+    "site": "@lzsthw", // @username of site
+    "title": og.title,
+  }
 </script>
 
+<SEOTricks og={ og } twitter={ twitter } />
+
 <style>
   hero.middle {
     border-radius: 0px 0px var(--border-radius) var(--border-radius);
@@ -180,7 +199,7 @@
       <b>{component.title}</b>
     </name>
     <icon class="layer">
-    <a href="{ developer_admin ? `/client/#/bando/components/${ component.title }` : "#needs-admin" }">
+    <a href="{ developer_admin ? `/admin/#/bando/components/${ component.title }` : "#needs-admin" }">
       <IconImage name={ component.icon } pattern={ false }/>
     </a>
     </icon>
diff --git a/rendered/pages/blog/[slug]/index.svelte b/rendered/pages/blog/[slug]/index.svelte
index 0ef8ba5..81be812 100644
--- a/rendered/pages/blog/[slug]/index.svelte
+++ b/rendered/pages/blog/[slug]/index.svelte
@@ -1,6 +1,5 @@
 <script context="module">
   import markdown from "$/lib/blog.js";
-  import SEOTricks from "$/client/components/SEOTricks.svelte";
   import Markdown from "$/client/components/Markdown.svelte";
 
   export const getPaths = () => {
@@ -15,6 +14,7 @@
   import Layout from '$/rendered/Layout.svelte';
   import IconImage from "$/client/components/IconImage.svelte";
   import { og_base_host, twitter_user } from "$/client/config.js";
+  import SEOTricks from "$/client/components/SEOTricks.svelte";
 
   export let metadata;
   export let toc;
@@ -44,7 +44,7 @@
   }
 </script>
 
-<SEOTricks og={ og } twitter={ twitter } />
+<SEOTricks og={og} twitter={twitter} />
 
 <style>
   content {
diff --git a/rendered/pages/blog/index.svelte b/rendered/pages/blog/index.svelte
index 0c50e91..833da28 100644
--- a/rendered/pages/blog/index.svelte
+++ b/rendered/pages/blog/index.svelte
@@ -1,16 +1,31 @@
 <script>
   import Layout from '$/rendered/Layout.svelte';
   import IconImage from '$/client/components/IconImage.svelte';
-  import Icon from '$/client/components/Icon.svelte';
   import markdown from "$/lib/blog.js";
   import Markdown from "$/client/components/Markdown.svelte";
+  import { og_base_host, twitter_user } from "$/client/config.js";
+  import SEOTricks from "$/client/components/SEOTricks.svelte";
 
   const posts = markdown.load("rendered/posts");
+  markdown.render_feed("./feed_index.json", posts);
 
+  let og = {
+    "title": "Bandolier Blog Example", // title of the article
+    "description": "This is an example of a blog layout.", // description for inside preview
+    "url": `${og_base_host}/blog/`, // URL to article
+    "type": "website", // not mentioned on linked in but needed
+  }
 
-  markdown.render_feed("./feed_index.json", posts);
+  let twitter = {
+    "card": "summary", // must be summary, summary_large_image, app, player
+    "creator": twitter_user, // @username of content creator
+    "description": og.description, // max 200 chars
+    "site": "@lzsthw", // @username of site
+    "title": og.title,
+  }
 </script>
 
+<SEOTricks og={og} twitter={twitter} />
 
 <style>
   main h2 {