From d41d46aec44e75d91d520fa04c5e8e4c958b4101 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 22 Nov 2022 09:34:02 -0500
Subject: [PATCH 01/77] working og image edge functions

Working local jekyll
Comment out unused JSON
---
 .gitignore                              |  3 +
 .netlify/edge-functions-import-map.json |  1 +
 .netlify/functions/og.tsx               | 82 +++++++++++++++++++++++++
 Gemfile                                 |  2 +
 Gemfile.lock                            | 39 ++++++------
 _config.yml                             | 20 +++---
 _dev_config.yml                         | 20 +++---
 _production_config.yml                  | 22 +++----
 netlify.toml                            |  7 +++
 9 files changed, 147 insertions(+), 49 deletions(-)
 create mode 100644 .netlify/edge-functions-import-map.json
 create mode 100644 .netlify/functions/og.tsx

diff --git a/.gitignore b/.gitignore
index 3d1aa7002..be13cd0a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,6 @@ _site/
 .jekyll-cache/
 .DS_Store
 node_modules
+
+# Local Netlify folder
+.netlify/state.json
diff --git a/.netlify/edge-functions-import-map.json b/.netlify/edge-functions-import-map.json
new file mode 100644
index 000000000..2592951a1
--- /dev/null
+++ b/.netlify/edge-functions-import-map.json
@@ -0,0 +1 @@
+{"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"}}
\ No newline at end of file
diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
new file mode 100644
index 000000000..3bade3701
--- /dev/null
+++ b/.netlify/functions/og.tsx
@@ -0,0 +1,82 @@
+import React from "https://esm.sh/react@18.2.0";
+import { ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";
+
+const font = fetch(new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url)).then(
+  (res) => res.arrayBuffer(),
+);
+
+export default async function handler(req: Request) {
+  const fontData = await font;
+  // Get the query parameters from the request
+  const url = new URL(req.url);
+  const params = new URLSearchParams(url.search);
+  const title = params.get("title") ?? "Welcome to Gymnasium";
+  const pubDate = params.get("pubDate") ?? new Date().toISOString();
+  // Generate the open graph image
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexWrap: 'nowrap',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          alignContent: 'stretch',
+          alignItems: 'flex-start',
+          backgroundColor: '#222',
+          color: '#fff',
+          fontSize: 40,
+          fontWeight: '900',
+          fontFamily: 'brandon-grotesque',
+          padding: '1rem',
+          position: 'relative'
+        }}
+      >
+        <section
+          style={{
+            order: 1,
+            flexGrow: 1,
+            flexShrink: 0,
+            alignSelf: 'center',
+            justifyContent: 'center',
+            width: '40%',
+          }}
+        >
+          <img src="https://thegymcms.com/img/course-artwork/svg/gym-001.svg" alt="" width="200" />
+        </section>
+        <section
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            alignSelf: 'center',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            order: 2,
+            flexGrow: 1,
+            flexShrink: 0,
+          }}
+        >
+          <img src="https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg" width="300" />
+          <h1>{title}</h1>
+          <div>{pubDate}</div>
+          <div style={{color: '#ff5f14'}}>thegymnasium.com</div>
+        </section>
+        
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 628,
+      fonts: [
+        {
+          name: 'brandon-grotesque',
+          data: fontData,
+          style: 'normal'
+        }
+      ]
+    }
+  );
+}
diff --git a/Gemfile b/Gemfile
index 4f7221442..b1dd84af8 100644
--- a/Gemfile
+++ b/Gemfile
@@ -3,3 +3,5 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.1.0"
 
 gem "jekyll-get-json", "~> 1.0"
+
+gem "webrick", "~> 1.7"
diff --git a/Gemfile.lock b/Gemfile.lock
index ff0099d54..1a194db9c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,21 +1,21 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.6)
-    deep_merge (1.2.1)
-    em-websocket (0.5.1)
+    concurrent-ruby (1.1.10)
+    deep_merge (1.2.2)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.13.1)
+    ffi (1.15.5)
     forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.3)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
-    jekyll (4.1.0)
+    jekyll (4.1.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -33,43 +33,46 @@ GEM
     jekyll-get-json (1.0.0)
       deep_merge (~> 1.2)
       jekyll (>= 3.0)
-    jekyll-sass-converter (2.1.0)
+    jekyll-sass-converter (2.2.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.3.1)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.2.1)
+    listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
-    rb-fsevent (0.10.4)
+    public_suffix (5.0.0)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.20.0)
+    rouge (3.30.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)
 
 PLATFORMS
   ruby
   universal-darwin-19
+  x86_64-darwin-21
   x86_64-linux
   x86_64-linux-musl
 
 DEPENDENCIES
   jekyll (~> 4.1.0)
   jekyll-get-json (~> 1.0)
+  webrick (~> 1.7)
 
 BUNDLED WITH
-   2.2.2
+   2.3.26
diff --git a/_config.yml b/_config.yml
index 8f503aa73..146e0f9e0 100644
--- a/_config.yml
+++ b/_config.yml
@@ -52,14 +52,14 @@ jekyll_get_json:
     json: 'https://stag-assets.aquent.com/apps/gym/jobs.json?limit=1500'
   - data: markets
     json: 'https://stag-assets.aquent.com/apps/gym/markets.json'
-  - data: privacy-index
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-shield-notice
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-ccpa
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-data-category
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-eu-rights
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-index
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-shield-notice
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-ccpa
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-data-category
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-eu-rights
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
 
diff --git a/_dev_config.yml b/_dev_config.yml
index 57f617edf..df8d5c408 100644
--- a/_dev_config.yml
+++ b/_dev_config.yml
@@ -52,14 +52,14 @@ jekyll_get_json:
     json: 'https://stag-assets.aquent.com/apps/gym/jobs.json?limit=1500'
   - data: markets
     json: 'https://stag-assets.aquent.com/apps/gym/markets.json'
-  - data: privacy-index
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-shield-notice
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-ccpa
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-data-category
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-eu-rights
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-index
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-shield-notice
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-ccpa
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-data-category
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-eu-rights
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
 
diff --git a/_production_config.yml b/_production_config.yml
index a7e31aa7e..6d6486d7b 100644
--- a/_production_config.yml
+++ b/_production_config.yml
@@ -15,7 +15,7 @@ exclude:
   - 'README.md'
   - 'netlify.toml'
   - '.jekyll-cache'
-  - 'local'  
+  - 'local'
 
 include:
   - '_redirects'
@@ -57,14 +57,14 @@ jekyll_get_json:
     json: 'https://assets.aquent.com/apps/gym/jobs.json?limit=1500'
   - data: markets
     json: 'https://assets.aquent.com/apps/gym/markets.json'
-  - data: privacy-index
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-shield-notice
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-ccpa
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-data-category
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
-  - data: privacy-eu-rights
-    json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-index
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-index*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-shield-notice
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-privacy-shield-notice*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-ccpa
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-ccpa-policy*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-data-category
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-data-category*%20+languageId:1%20+deleted:false%20+working:true/'
+  # - data: privacy-eu-rights
+  #   json: 'https://assets.aquent.com/api/content/render/false/type/json/query/+contentType:webPageContent%20+webPageContent.title:*privacy-policy-european-rights*%20+languageId:1%20+deleted:false%20+working:true/'
 
diff --git a/netlify.toml b/netlify.toml
index 869953fcf..2d34f69e7 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -22,6 +22,13 @@
     Access-Control-Allow-Origin = "*"
     Cache-Control = "public, max-age=31536000, immutable"
 
+[build]
+edge_functions = ".netlify/functions"
+
+[[edge_functions]]
+  function = "og"
+  path = "/og-image"
+
 # dev branch build
 # https://dev--gymcms.netlify.com/
 [context.dev]

From 06bfb80f860a97a15b6ef1fa64b1f95b44cc7d04 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 22 Nov 2022 17:15:59 -0500
Subject: [PATCH 02/77] Update og.tsx

---
 .netlify/functions/og.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 3bade3701..61e0e1697 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,5 +1,5 @@
 import React from "https://esm.sh/react@18.2.0";
-import { ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";
+import { ImportMeta, ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";
 
 const font = fetch(new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url)).then(
   (res) => res.arrayBuffer(),
@@ -42,6 +42,7 @@ export default async function handler(req: Request) {
             alignSelf: 'center',
             justifyContent: 'center',
             width: '40%',
+            background: '#2C9959',
           }}
         >
           <img src="https://thegymcms.com/img/course-artwork/svg/gym-001.svg" alt="" width="200" />

From 82ea0f21b636d2405212bd7394b5571528ebf3b8 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 23 Nov 2022 13:59:41 -0500
Subject: [PATCH 03/77] Try dynamic imports to resolve netlify build error?

---
 .netlify/functions/og.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 61e0e1697..5aca1833e 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,7 +1,10 @@
 import React from "https://esm.sh/react@18.2.0";
-import { ImportMeta, ImageResponse } from "https://deno.land/x/og_edge@0.0.2/mod.ts";
+// import { ImageResponse } from "https://deno.land/x/og_edge@0.0.4/mod.ts";
+const { ImageResponse } = await import("https://deno.land/x/og_edge@0.0.4/mod.ts");
 
-const font = fetch(new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url)).then(
+const brandonReg = new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url);
+
+const font = fetch(brandonReg).then(
   (res) => res.arrayBuffer(),
 );
 

From b827d72c7936dd227c176aea8a0ce42e70fafc8f Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 23 Nov 2022 14:18:30 -0500
Subject: [PATCH 04/77] Revert, add log

---
 .netlify/functions/og.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 5aca1833e..675d0b9c6 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,9 +1,10 @@
 import React from "https://esm.sh/react@18.2.0";
-// import { ImageResponse } from "https://deno.land/x/og_edge@0.0.4/mod.ts";
-const { ImageResponse } = await import("https://deno.land/x/og_edge@0.0.4/mod.ts");
+import { ImageResponse } from "https://deno.land/x/og_edge@0.0.4/mod.ts";
 
 const brandonReg = new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url);
 
+console.log('brandonReg: ', brandonReg);
+
 const font = fetch(brandonReg).then(
   (res) => res.arrayBuffer(),
 );

From f3cd407362c83abd274df2255e63d39376329e27 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 23 Nov 2022 15:05:32 -0500
Subject: [PATCH 05/77] OK, try using a non-local webfont URL instead?

---
 .netlify/functions/og.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 675d0b9c6..626f6040d 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,9 +1,7 @@
 import React from "https://esm.sh/react@18.2.0";
 import { ImageResponse } from "https://deno.land/x/og_edge@0.0.4/mod.ts";
 
-const brandonReg = new URL('../../fonts/brandon_reg-webfont.woff', import.meta.url);
-
-console.log('brandonReg: ', brandonReg);
+const brandonReg = new URL('https://thegymcms.com/fonts/brandon_reg-webfont.woff', import.meta.url);
 
 const font = fetch(brandonReg).then(
   (res) => res.arrayBuffer(),

From 8a29b5ab667f9a57b64781ad474cffc63d3cc0a3 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 28 Nov 2022 14:56:33 -0500
Subject: [PATCH 06/77] Working take5 image generation

Example: http://localhost:8888/og-image?type=take5&courseNum=5051
---
 .netlify/functions/og.tsx | 72 ++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 626f6040d..8e5693b01 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -12,42 +12,60 @@ export default async function handler(req: Request) {
   // Get the query parameters from the request
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
+  const type = params.get("type") ?? 'default';
   const title = params.get("title") ?? "Welcome to Gymnasium";
+  const courseNum = params.get("courseNum") ?? "000";
   const pubDate = params.get("pubDate") ?? new Date().toISOString();
+  let imgPath;
+  let ext;
+  if (type === 'take5') {
+    imgPath = '/img/take5/posters/gym-'
+    ext = '.jpg'
+  } else {
+    imgPath = '/img/course-artwork/svg/gym-'
+    ext = '.svg'
+  }
+
+  const fullUrl = 'https://thegymcms.com' + imgPath + courseNum + ext;
+
+  let WRAPPER_CONFIG = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignContent: 'stretch',
+    alignItems: 'flex-start',
+    backgroundColor: '#222',
+    color: '#fff',
+    fontSize: 40,
+    fontWeight: '900',
+    fontFamily: 'brandon-grotesque',
+    position: 'relative'
+  }
+
+  let CONFIG_IMG = {
+    order: 1,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '320px',
+    background: '#2C9959',
+    backgroundImage: 'url(' + fullUrl + ')',
+  }
+
   // Generate the open graph image
   return new ImageResponse(
     (
       <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexWrap: 'nowrap',
-          flexDirection: 'row',
-          justifyContent: 'flex-start',
-          alignContent: 'stretch',
-          alignItems: 'flex-start',
-          backgroundColor: '#222',
-          color: '#fff',
-          fontSize: 40,
-          fontWeight: '900',
-          fontFamily: 'brandon-grotesque',
-          padding: '1rem',
-          position: 'relative'
-        }}
+        style={WRAPPER_CONFIG}
       >
         <section
-          style={{
-            order: 1,
-            flexGrow: 1,
-            flexShrink: 0,
-            alignSelf: 'center',
-            justifyContent: 'center',
-            width: '40%',
-            background: '#2C9959',
-          }}
+          style={CONFIG_IMG}
         >
-          <img src="https://thegymcms.com/img/course-artwork/svg/gym-001.svg" alt="" width="200" />
         </section>
         <section
           style={{

From 651ec38b09541516c7d200dd87fe7ebf6823c5bc Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:28:24 -0500
Subject: [PATCH 07/77] config JSON

---
 .netlify/functions/og.tsx | 62 +++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 8e5693b01..9d06c3d7a 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -13,6 +13,7 @@ export default async function handler(req: Request) {
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
   const type = params.get("type") ?? 'default';
+  const color = params.get('color') ?? '222';
   const title = params.get("title") ?? "Welcome to Gymnasium";
   const courseNum = params.get("courseNum") ?? "000";
   const pubDate = params.get("pubDate") ?? new Date().toISOString();
@@ -28,7 +29,7 @@ export default async function handler(req: Request) {
 
   const fullUrl = 'https://thegymcms.com' + imgPath + courseNum + ext;
 
-  let WRAPPER_CONFIG = {
+  let CONFIG_WRAPPER = {
     height: '100%',
     width: '100%',
     display: 'flex',
@@ -42,7 +43,8 @@ export default async function handler(req: Request) {
     fontSize: 40,
     fontWeight: '900',
     fontFamily: 'brandon-grotesque',
-    position: 'relative'
+    position: 'relative',
+    zIndex: 1,
   }
 
   let CONFIG_IMG = {
@@ -52,40 +54,50 @@ export default async function handler(req: Request) {
     alignSelf: 'center',
     justifyContent: 'center',
     height: '100%',
-    width: '320px',
-    background: '#2C9959',
+    width: '100%',
+    backgroundColor: '#' + color,
     backgroundImage: 'url(' + fullUrl + ')',
+    backgroundOrigin: '0 0',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'initial',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 2,
+  }
+
+  let CONFIG_TEXT = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    order: 2,
+    flexGrow: 1,
+    flexShrink: 0,
+    padding: '2rem',
+    position: 'absolute',
+    left: '320px',
+    top: 0,
+    backgroundColor: '#' + color,
+    width: '880px',
+    height: '100%',
+    zIndex: 3,
   }
 
   // Generate the open graph image
   return new ImageResponse(
     (
-      <div
-        style={WRAPPER_CONFIG}
-      >
-        <section
-          style={CONFIG_IMG}
-        >
-        </section>
-        <section
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            alignSelf: 'center',
-            justifyContent: 'center',
-            flexWrap: 'wrap',
-            order: 2,
-            flexGrow: 1,
-            flexShrink: 0,
-          }}
-        >
+      <div style={CONFIG_WRAPPER}>
+        <figure style={CONFIG_IMG}>
+        </figure>
+        <section style={CONFIG_TEXT}>
           <img src="https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg" width="300" />
           <h1>{title}</h1>
           <div>{pubDate}</div>
           <div style={{color: '#ff5f14'}}>thegymnasium.com</div>
         </section>
-        
       </div>
     ),
     {

From 063765109354126042d56fa2a24a1b516abfca8c Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 29 Nov 2022 10:50:38 -0500
Subject: [PATCH 08/77] Add additional logic for scraping meta

---
 .netlify/functions/og.tsx | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 9d06c3d7a..6be74a7f0 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,5 +1,6 @@
-import React from "https://esm.sh/react@18.2.0";
-import { ImageResponse } from "https://deno.land/x/og_edge@0.0.4/mod.ts";
+import React from 'https://esm.sh/react@18.2.0';
+import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
+import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
 
 const brandonReg = new URL('https://thegymcms.com/fonts/brandon_reg-webfont.woff', import.meta.url);
 
@@ -12,21 +13,35 @@ export default async function handler(req: Request) {
   // Get the query parameters from the request
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
-  const type = params.get("type") ?? 'default';
+  const type = params.get('type') ?? 'default';
   const color = params.get('color') ?? '222';
-  const title = params.get("title") ?? "Welcome to Gymnasium";
-  const courseNum = params.get("courseNum") ?? "000";
-  const pubDate = params.get("pubDate") ?? new Date().toISOString();
+  const title = params.get('title') ?? 'Welcome to Gymnasium';
+  const courseNum = params.get('courseNum') ?? '000';
+  const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath;
   let ext;
+  let metaPath;
   if (type === 'take5') {
-    imgPath = '/img/take5/posters/gym-'
-    ext = '.jpg'
+    imgPath = '/img/take5/posters/gym-';
+    ext = '.jpg';
+    metaPath = '/courses/take5/gym-5001/meta/index.html';
   } else {
-    imgPath = '/img/course-artwork/svg/gym-'
-    ext = '.svg'
+    imgPath = '/img/course-artwork/svg/gym-';
+    ext = '.svg';
+    metaPath = false;
   }
 
+  async function loadMeta() {
+    const resp = await fetch('https://thegymcms.com' + metaPath);
+    const html = await resp.text();
+    const parser = new DOMParser();
+    const htmlDoc = parser.parseFromString(html, 'text/html');
+    const metaDesc = htmlDoc.querySelector('meta[property="og:description"]').getAttribute('content');
+    console.log('og description: ', metaDesc);
+  }
+
+  loadMeta();
+
   const fullUrl = 'https://thegymcms.com' + imgPath + courseNum + ext;
 
   let CONFIG_WRAPPER = {
@@ -59,7 +74,7 @@ export default async function handler(req: Request) {
     backgroundImage: 'url(' + fullUrl + ')',
     backgroundOrigin: '0 0',
     backgroundRepeat: 'no-repeat',
-    backgroundSize: 'initial',
+    backgroundSize: 'cover',
     position: 'absolute',
     top: 0,
     left: 0,
@@ -93,7 +108,7 @@ export default async function handler(req: Request) {
         <figure style={CONFIG_IMG}>
         </figure>
         <section style={CONFIG_TEXT}>
-          <img src="https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg" width="300" />
+          <img src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
           <h1>{title}</h1>
           <div>{pubDate}</div>
           <div style={{color: '#ff5f14'}}>thegymnasium.com</div>

From 1983aa577000cf09c719fb04c410929f20466631 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 29 Nov 2022 16:10:04 -0500
Subject: [PATCH 09/77] working dynamic meta title

---
 .netlify/functions/og.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 6be74a7f0..4b80f7681 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,6 +1,10 @@
 import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
-import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
+import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
+
+const domain = window.Location[0];
+
+console.log(domain);
 
 const brandonReg = new URL('https://thegymcms.com/fonts/brandon_reg-webfont.woff', import.meta.url);
 
@@ -15,16 +19,16 @@ export default async function handler(req: Request) {
   const params = new URLSearchParams(url.search);
   const type = params.get('type') ?? 'default';
   const color = params.get('color') ?? '222';
-  const title = params.get('title') ?? 'Welcome to Gymnasium';
   const courseNum = params.get('courseNum') ?? '000';
   const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath;
   let ext;
   let metaPath;
+  let metaTitle;
   if (type === 'take5') {
     imgPath = '/img/take5/posters/gym-';
     ext = '.jpg';
-    metaPath = '/courses/take5/gym-5001/meta/index.html';
+    metaPath = '/courses/take5/gym-' + courseNum + '/meta/index.html';
   } else {
     imgPath = '/img/course-artwork/svg/gym-';
     ext = '.svg';
@@ -32,15 +36,15 @@ export default async function handler(req: Request) {
   }
 
   async function loadMeta() {
-    const resp = await fetch('https://thegymcms.com' + metaPath);
+    const resp = await fetch('http://localhost:8888' + metaPath);
     const html = await resp.text();
     const parser = new DOMParser();
     const htmlDoc = parser.parseFromString(html, 'text/html');
-    const metaDesc = htmlDoc.querySelector('meta[property="og:description"]').getAttribute('content');
-    console.log('og description: ', metaDesc);
+    metaTitle = htmlDoc.querySelector('[name="og:title"]').getAttribute('content');
+    return metaTitle;
   }
 
-  loadMeta();
+  let title = await loadMeta();
 
   const fullUrl = 'https://thegymcms.com' + imgPath + courseNum + ext;
 

From 3315bf55578fa9a75dd588ddae1bd04b68b2fa84 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 29 Nov 2022 16:33:10 -0500
Subject: [PATCH 10/77] Working courses meta (sans workshop)

---
 .netlify/functions/og.tsx | 40 +++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 4b80f7681..d9ae9afe2 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -2,10 +2,6 @@ import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 
-const domain = window.Location[0];
-
-console.log(domain);
-
 const brandonReg = new URL('https://thegymcms.com/fonts/brandon_reg-webfont.woff', import.meta.url);
 
 const font = fetch(brandonReg).then(
@@ -17,22 +13,30 @@ export default async function handler(req: Request) {
   // Get the query parameters from the request
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
-  const type = params.get('type') ?? 'default';
   const color = params.get('color') ?? '222';
-  const courseNum = params.get('courseNum') ?? '000';
+  const courseNum = params.get('courseNum') ?? 0;
   const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath;
-  let ext;
   let metaPath;
   let metaTitle;
-  if (type === 'take5') {
-    imgPath = '/img/take5/posters/gym-';
-    ext = '.jpg';
-    metaPath = '/courses/take5/gym-' + courseNum + '/meta/index.html';
-  } else {
-    imgPath = '/img/course-artwork/svg/gym-';
-    ext = '.svg';
-    metaPath = false;
+  let courseType;
+
+  if (courseNum > 0) {
+    if (courseNum < 100) {
+      courseType = 'gym-shorts';
+    } else if (courseNum >= 100 && courseNum < 700) {
+      courseType = 'full';
+    } else if (courseNum >= 5000) {
+      courseType = 'take5';
+    }
+
+    metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
+
+    if (courseType === 'take5') {
+      imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
+    } else {
+      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    }
   }
 
   async function loadMeta() {
@@ -40,13 +44,13 @@ export default async function handler(req: Request) {
     const html = await resp.text();
     const parser = new DOMParser();
     const htmlDoc = parser.parseFromString(html, 'text/html');
-    metaTitle = htmlDoc.querySelector('[name="og:title"]').getAttribute('content');
+    metaTitle = htmlDoc.querySelector('[property="og:title"]').getAttribute('content');
     return metaTitle;
   }
 
   let title = await loadMeta();
 
-  const fullUrl = 'https://thegymcms.com' + imgPath + courseNum + ext;
+  const fullUrl = `https://thegymcms.com${imgPath}`;
 
   let CONFIG_WRAPPER = {
     height: '100%',
@@ -75,7 +79,7 @@ export default async function handler(req: Request) {
     height: '100%',
     width: '100%',
     backgroundColor: '#' + color,
-    backgroundImage: 'url(' + fullUrl + ')',
+    backgroundImage: `url(${fullUrl})`,
     backgroundOrigin: '0 0',
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',

From 69d16156ee7c30575772ed40a12af38bda5a04c8 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 29 Nov 2022 16:52:27 -0500
Subject: [PATCH 11/77] Adds offset

---
 .netlify/functions/og.tsx | 45 ++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index d9ae9afe2..c93d86b27 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -8,6 +8,15 @@ const font = fetch(brandonReg).then(
   (res) => res.arrayBuffer(),
 );
 
+async function loadMetaTitle(url: string) {
+  const resp = await fetch(url);
+  const html = await resp.text();
+  const parser = new DOMParser();
+  const htmlDoc = parser.parseFromString(html, 'text/html');
+  const metaTitle = htmlDoc.querySelector('[property="og:title"]').getAttribute('content');
+  return metaTitle;
+}
+
 export default async function handler(req: Request) {
   const fontData = await font;
   // Get the query parameters from the request
@@ -15,40 +24,28 @@ export default async function handler(req: Request) {
   const params = new URLSearchParams(url.search);
   const color = params.get('color') ?? '222';
   const courseNum = params.get('courseNum') ?? 0;
+  const offset = params.get('offset') ?? 0;
   const pubDate = params.get('pubDate') ?? new Date().toISOString();
-  let imgPath;
-  let metaPath;
-  let metaTitle;
-  let courseType;
+  let imgPath: any;
+  let metaPath: any;
+  let courseType: any;
 
   if (courseNum > 0) {
     if (courseNum < 100) {
       courseType = 'gym-shorts';
+      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
     } else if (courseNum >= 100 && courseNum < 700) {
       courseType = 'full';
+      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
     } else if (courseNum >= 5000) {
       courseType = 'take5';
-    }
-
-    metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
-
-    if (courseType === 'take5') {
       imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
-    } else {
-      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
     }
-  }
 
-  async function loadMeta() {
-    const resp = await fetch('http://localhost:8888' + metaPath);
-    const html = await resp.text();
-    const parser = new DOMParser();
-    const htmlDoc = parser.parseFromString(html, 'text/html');
-    metaTitle = htmlDoc.querySelector('[property="og:title"]').getAttribute('content');
-    return metaTitle;
+    metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
   }
 
-  let title = await loadMeta();
+  let title = await loadMetaTitle(`http://localhost:8888${metaPath}`);
 
   const fullUrl = `https://thegymcms.com${imgPath}`;
 
@@ -78,11 +75,11 @@ export default async function handler(req: Request) {
     justifyContent: 'center',
     height: '100%',
     width: '100%',
-    backgroundColor: '#' + color,
-    backgroundImage: `url(${fullUrl})`,
-    backgroundOrigin: '0 0',
+    backgroundColor: `#${color}`,
+    background: `url(${fullUrl})`,
+    backgroundPosition: `${offset}px 0`,
     backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
+    // backgroundSize: 'auto',
     position: 'absolute',
     top: 0,
     left: 0,

From 66363a2c343426382afec1f460d85ed331f043e5 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 30 Nov 2022 09:34:26 -0500
Subject: [PATCH 12/77] add domain

---
 .netlify/functions/og.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index c93d86b27..ca94b7c0d 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -2,7 +2,10 @@ import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 
-const brandonReg = new URL('https://thegymcms.com/fonts/brandon_reg-webfont.woff', import.meta.url);
+// TODO: Change URL before release
+const domain = 'https://staging.thegymcms.com';
+
+const brandonReg = new URL(`${domain}/fonts/brandon_reg-webfont.woff`, import.meta.url);
 
 const font = fetch(brandonReg).then(
   (res) => res.arrayBuffer(),
@@ -23,14 +26,14 @@ export default async function handler(req: Request) {
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
   const color = params.get('color') ?? '222';
-  const courseNum = params.get('courseNum') ?? 0;
+  const courseNum: any = params.get('courseNum') ?? false;
   const offset = params.get('offset') ?? 0;
   const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath: any;
   let metaPath: any;
   let courseType: any;
 
-  if (courseNum > 0) {
+  if (courseNum) {
     if (courseNum < 100) {
       courseType = 'gym-shorts';
       imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
@@ -45,9 +48,9 @@ export default async function handler(req: Request) {
     metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
   }
 
-  let title = await loadMetaTitle(`http://localhost:8888${metaPath}`);
+  let title = await loadMetaTitle(`${domain}${metaPath}`);
 
-  const fullUrl = `https://thegymcms.com${imgPath}`;
+  const fullUrl = `${domain}${imgPath}`;
 
   let CONFIG_WRAPPER = {
     height: '100%',

From 8487bb3054ee26108e57c8a8c083026ff1ba49b7 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 30 Nov 2022 10:27:14 -0500
Subject: [PATCH 13/77] Adds back custom title, support for workshops

---
 .netlify/functions/og.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index ca94b7c0d..38bce96ea 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -32,7 +32,9 @@ export default async function handler(req: Request) {
   let imgPath: any;
   let metaPath: any;
   let courseType: any;
+  let defaultTitle: string;
 
+  // If we have a course number, grab specific data
   if (courseNum) {
     if (courseNum < 100) {
       courseType = 'gym-shorts';
@@ -40,6 +42,9 @@ export default async function handler(req: Request) {
     } else if (courseNum >= 100 && courseNum < 700) {
       courseType = 'full';
       imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    } else if (courseNum >= 700 && courseNum < 800) {
+      courseType = 'workshops';
+      imgPath = null;
     } else if (courseNum >= 5000) {
       courseType = 'take5';
       imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
@@ -48,9 +53,16 @@ export default async function handler(req: Request) {
     metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
   }
 
-  let title = await loadMetaTitle(`${domain}${metaPath}`);
+  if (metaPath === undefined) {
+    defaultTitle = 'Welcome to Gymnasium';
+  } else {
+    defaultTitle = await loadMetaTitle(`${domain}${metaPath}`);
+  }
+
+  // Allow override of title via url params
+  let title = params.get('title') ?? defaultTitle;
 
-  const fullUrl = `${domain}${imgPath}`;
+  const imgUrl = `${domain}${imgPath}`;
 
   let CONFIG_WRAPPER = {
     height: '100%',
@@ -79,9 +91,6 @@ export default async function handler(req: Request) {
     height: '100%',
     width: '100%',
     backgroundColor: `#${color}`,
-    background: `url(${fullUrl})`,
-    backgroundPosition: `${offset}px 0`,
-    backgroundRepeat: 'no-repeat',
     // backgroundSize: 'auto',
     position: 'absolute',
     top: 0,
@@ -89,6 +98,13 @@ export default async function handler(req: Request) {
     zIndex: 2,
   }
 
+  // If we have an image, use these settings
+  if (!!imgPath) {
+    CONFIG_IMG['background'] = `url(${imgUrl})`;
+    CONFIG_IMG['backgroundPosition'] = `${offset}px 0`;
+    CONFIG_IMG['backgroundRepeat'] = 'no-repeat';
+  }
+
   let CONFIG_TEXT = {
     display: 'flex',
     flexDirection: 'column',

From 42f5e95a011bf1bba0c6e050719d386da3e103f3 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 2 Dec 2022 16:45:48 -0500
Subject: [PATCH 14/77] Adds meta data attributes, improved logic

---
 .netlify/functions/og.tsx                  | 164 +++++++++++++++------
 _includes/partials/meta/logic-courses.html |   1 +
 _includes/partials/meta/logic-take5.html   |   4 +-
 _includes/partials/meta/tags.html          |   2 +-
 4 files changed, 123 insertions(+), 48 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 38bce96ea..4f1c01e23 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -2,12 +2,17 @@ import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 
+// $gym-green: #2c9959;
+// $gym-magenta: #d73158;
+// $gym-purple: #764c9f;
+// $gym-teal: #5ca5a0;
+
 // TODO: Change URL before release
 const domain = 'https://staging.thegymcms.com';
 
-const brandonReg = new URL(`${domain}/fonts/brandon_reg-webfont.woff`, import.meta.url);
+const brandon = new URL(`../../fonts/brandon_bld-webfont.woff`, import.meta.url);
 
-const font = fetch(brandonReg).then(
+const font = fetch(brandon).then(
   (res) => res.arrayBuffer(),
 );
 
@@ -16,8 +21,17 @@ async function loadMetaTitle(url: string) {
   const html = await resp.text();
   const parser = new DOMParser();
   const htmlDoc = parser.parseFromString(html, 'text/html');
-  const metaTitle = htmlDoc.querySelector('[property="og:title"]').getAttribute('content');
-  return metaTitle;
+  const metaTitle = htmlDoc.querySelector('[property="og:title"]');
+  const ogTitle = metaTitle.getAttribute('content');
+  const topic = metaTitle.getAttribute('data-topic');
+  return {ogTitle, topic};
+}
+
+// Calculate aspect ratio of a resized image, assuming one knows the initial dimensions
+function aspectRatio(width:number, height:number, newWidth:number) {
+  let ratio = height/width;
+
+  return newWidth * ratio; 
 }
 
 export default async function handler(req: Request) {
@@ -25,14 +39,16 @@ export default async function handler(req: Request) {
   // Get the query parameters from the request
   const url = new URL(req.url);
   const params = new URLSearchParams(url.search);
-  const color = params.get('color') ?? '222';
+  const bgColor = params.get('bg') ?? '222';
+  const imgBgColor = params.get('imgbg') ?? '222';
   const courseNum: any = params.get('courseNum') ?? false;
   const offset = params.get('offset') ?? 0;
-  const pubDate = params.get('pubDate') ?? new Date().toISOString();
+  let footerText = params.get('footer') ?? 'thegymnasium.com';
+  // const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath: any;
   let metaPath: any;
   let courseType: any;
-  let defaultTitle: string;
+  let metaData: any;
 
   // If we have a course number, grab specific data
   if (courseNum) {
@@ -53,17 +69,64 @@ export default async function handler(req: Request) {
     metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
   }
 
-  if (metaPath === undefined) {
-    defaultTitle = 'Welcome to Gymnasium';
+  console.log(metaPath);
+  if (!metaPath) {
+    metaData = '';
   } else {
-    defaultTitle = await loadMetaTitle(`${domain}${metaPath}`);
+    metaData = await loadMetaTitle(`http://localhost:8888/${metaPath}`);
   }
 
   // Allow override of title via url params
-  let title = params.get('title') ?? defaultTitle;
+  let title = params.get('title') ?? metaData.ogTitle;
 
   const imgUrl = `${domain}${imgPath}`;
 
+  // defaults
+  const wrapperWidth = 1200;
+  const wrapperHeight = 628;
+  let imgWidth = 0;
+  let bgImg = '';
+  let bgSize = '';
+  let bgPos = '0 0';
+  let titleFontSize = 50;
+  let footerColor = 'ff5f14';
+  let footerCase = 'initial';
+  let contentJustify = 'space-around';
+  let logoDisplay = 'flex';
+  let headerDisplay = 'none';
+  let headerText = '';
+
+  if (!!imgPath) {
+    // General defaults + some take 5 settings
+    bgImg = `url(${imgUrl})`;
+    bgSize = 'initial';
+
+    if (courseType === 'take5') {
+      imgWidth = 320;
+      titleFontSize = 90;
+      footerColor = 'ccc';
+      contentJustify = 'space-between';
+      bgPos = `-${offset}px 0px`;
+      footerCase = 'uppercase';
+      logoDisplay = 'none';
+      headerDisplay = 'flex';
+      headerText = 'Take 5';
+      if (metaData.topic) {
+        footerText = metaData.topic;
+      }
+    } else {
+      const iconSize = 300;
+      bgSize = `${iconSize}px ${aspectRatio(574,488,iconSize)}px`;
+
+      imgWidth = 516;
+      bgPos = `10% 40%`;
+      titleFontSize = 80;
+      contentJustify = 'space-around';
+    }
+  }
+
+  let contentWidth = wrapperWidth - imgWidth;
+
   let CONFIG_WRAPPER = {
     height: '100%',
     width: '100%',
@@ -75,8 +138,8 @@ export default async function handler(req: Request) {
     alignItems: 'flex-start',
     backgroundColor: '#222',
     color: '#fff',
-    fontSize: 40,
-    fontWeight: '900',
+    fontSize: '50px',
+    fontWeight: 'bold',
     fontFamily: 'brandon-grotesque',
     position: 'relative',
     zIndex: 1,
@@ -90,65 +153,74 @@ export default async function handler(req: Request) {
     justifyContent: 'center',
     height: '100%',
     width: '100%',
-    backgroundColor: `#${color}`,
-    // backgroundSize: 'auto',
+    backgroundImage: `${bgImg}`,
+    backgroundColor: `#${imgBgColor}`,
+    backgroundOrigin: 'border-box',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: `${bgPos}`,
+    backgroundSize: `${bgSize}`,
     position: 'absolute',
     top: 0,
     left: 0,
     zIndex: 2,
   }
 
-  // If we have an image, use these settings
-  if (!!imgPath) {
-    CONFIG_IMG['background'] = `url(${imgUrl})`;
-    CONFIG_IMG['backgroundPosition'] = `${offset}px 0`;
-    CONFIG_IMG['backgroundRepeat'] = 'no-repeat';
-  }
-
-  let CONFIG_TEXT = {
+  let CONFIG_CONTENT = {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'flex-start',
-    alignSelf: 'center',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    order: 2,
-    flexGrow: 1,
-    flexShrink: 0,
-    padding: '2rem',
-    position: 'absolute',
-    left: '320px',
-    top: 0,
-    backgroundColor: '#' + color,
-    width: '880px',
+    justifyContent: `${contentJustify}`,
+    padding: '60px',
+    marginLeft: `${imgWidth}px`,
+    backgroundColor: `#${bgColor}`,
+    width: `${contentWidth}px`,
     height: '100%',
-    zIndex: 3,
+  }
+
+  let CONFIG_TITLE = {
+    color: '#fff',
+    textTransform: 'uppercase',
+    fontSize: `${titleFontSize}px`,
+    lineHeight: 1,
+  }
+
+  let CONFIG_FOOTER = {
+    color: `#${footerColor}`,
+    textTransform: `${footerCase}`,
   }
 
   // Generate the open graph image
   return new ImageResponse(
     (
       <div style={CONFIG_WRAPPER}>
-        <figure style={CONFIG_IMG}>
-        </figure>
-        <section style={CONFIG_TEXT}>
-          <img src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
-          <h1>{title}</h1>
-          <div>{pubDate}</div>
-          <div style={{color: '#ff5f14'}}>thegymnasium.com</div>
+        <figure style={CONFIG_IMG}></figure>
+        <section style={CONFIG_CONTENT}>
+          <header style={
+            {
+              color: '#000',
+              display: `${headerDisplay}`,
+            }
+          }>{headerText}</header>
+          <img style={
+            {
+              display: `${logoDisplay}`,
+            }
+          } src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
+          <h1 style={CONFIG_TITLE}>{title}</h1>
+          <div style={CONFIG_FOOTER}>{footerText}</div>
         </section>
       </div>
     ),
     {
       width: 1200,
       height: 628,
+      debug: true,
       fonts: [
         {
           name: 'brandon-grotesque',
           data: fontData,
-          style: 'normal'
+          style: 'normal',
         }
-      ]
+      ],
     }
   );
 }
diff --git a/_includes/partials/meta/logic-courses.html b/_includes/partials/meta/logic-courses.html
index 523e9cf73..d9cbffc28 100644
--- a/_includes/partials/meta/logic-courses.html
+++ b/_includes/partials/meta/logic-courses.html
@@ -7,3 +7,4 @@
 {%- assign og_title = course.title -%}
 {%- assign page_title =  course.title | append: " | Gymnasium" -%}
 {%- assign og_art = course.course_ID | downcase | append: "-social.png" | prepend: "/img/social/courses/" -%}
+{%- assign data_topic = course.topic -%}
diff --git a/_includes/partials/meta/logic-take5.html b/_includes/partials/meta/logic-take5.html
index f2ed4c7fa..9de321e33 100644
--- a/_includes/partials/meta/logic-take5.html
+++ b/_includes/partials/meta/logic-take5.html
@@ -4,6 +4,8 @@
 {%- assign course = site.data.take5[id] -%}
 {%- assign og_description = course.short_description -%}
 {%- assign og_url = course.title | slugify | prepend: "/courses/take5/" -%}
-{%- assign page_title = "Take 5 | Gymnasium" -%}
+{%- assign og_title = course.title -%}
+{%- assign page_title =  course.title | append: " | Gymnasium" -%}
 {%- assign og_art = course.course_ID | downcase | append: "-og.png" | prepend: "/img/take5/og/" -%}
 {%- assign og_img_alt = course.title | prepend: "Video poster for tutorial titled " -%}
+{%- assign data_topic = course.topic -%}
diff --git a/_includes/partials/meta/tags.html b/_includes/partials/meta/tags.html
index 1cce4f7d9..e2e32a40d 100644
--- a/_includes/partials/meta/tags.html
+++ b/_includes/partials/meta/tags.html
@@ -4,7 +4,7 @@
 <meta property="og:type" content="website">
 <meta property="og:locale" content="en_US">
 <meta property="og:site_name" content="{{ page_title }}">
-<meta property="og:title" content="{{ og_title }}">
+<meta name="og:title" property="og:title" content="{{ og_title }}" data-topic="{{ data_topic }}" data-color="">
 <meta property="og:description" content="{{ og_description }}">
 <meta property="og:image:alt" content="{{ og_img_alt }}">
 <meta property="og:image" content="{{ og_art }}">

From c273ba77c55bb4668d71f1346c030dabf07a0d2a Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 2 Dec 2022 16:49:12 -0500
Subject: [PATCH 15/77] Use netlify deploy URL

---
 .netlify/functions/og.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 4f1c01e23..6ffad68ff 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -8,9 +8,9 @@ import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 // $gym-teal: #5ca5a0;
 
 // TODO: Change URL before release
-const domain = 'https://staging.thegymcms.com';
+const domain = 'https://deploy-preview-832--thegymcms.netlify.app/';
 
-const brandon = new URL(`../../fonts/brandon_bld-webfont.woff`, import.meta.url);
+const brandon = new URL(`${domain}/fonts/brandon_bld-webfont.woff`, import.meta.url);
 
 const font = fetch(brandon).then(
   (res) => res.arrayBuffer(),
@@ -73,7 +73,7 @@ export default async function handler(req: Request) {
   if (!metaPath) {
     metaData = '';
   } else {
-    metaData = await loadMetaTitle(`http://localhost:8888/${metaPath}`);
+    metaData = await loadMetaTitle(`${domain}/${metaPath}`);
   }
 
   // Allow override of title via url params

From 2b88edee49625d2e644b5c497c9b73569a22e01c Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 5 Dec 2022 14:25:26 -0500
Subject: [PATCH 16/77] Update og.tsx

---
 .netlify/functions/og.tsx | 49 +++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 6ffad68ff..679f0d600 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -38,11 +38,12 @@ export default async function handler(req: Request) {
   const fontData = await font;
   // Get the query parameters from the request
   const url = new URL(req.url);
-  const params = new URLSearchParams(url.search);
+  const params:any = new URLSearchParams(url.search);
   const bgColor = params.get('bg') ?? '222';
   const imgBgColor = params.get('imgbg') ?? '222';
   const courseNum: any = params.get('courseNum') ?? false;
-  const offset = params.get('offset') ?? 0;
+  const offset:any = Math.abs(params.get('offset')) ?? 0;
+  let titleFontSize = 50;
   let footerText = params.get('footer') ?? 'thegymnasium.com';
   // const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath: any;
@@ -88,18 +89,21 @@ export default async function handler(req: Request) {
   let bgImg = '';
   let bgSize = '';
   let bgPos = '0 0';
-  let titleFontSize = 50;
   let footerColor = 'ff5f14';
   let footerCase = 'initial';
-  let contentJustify = 'space-around';
+  let contentJustify = 'center';
   let logoDisplay = 'flex';
   let headerDisplay = 'none';
   let headerText = '';
+  let wrapperJustify = 'center';
+  let wrapperAlign = 'center';
 
   if (!!imgPath) {
     // General defaults + some take 5 settings
     bgImg = `url(${imgUrl})`;
     bgSize = 'initial';
+    wrapperJustify = 'flex-start';
+    wrapperAlign = 'flex-start';
 
     if (courseType === 'take5') {
       imgWidth = 320;
@@ -119,8 +123,8 @@ export default async function handler(req: Request) {
       bgSize = `${iconSize}px ${aspectRatio(574,488,iconSize)}px`;
 
       imgWidth = 516;
-      bgPos = `10% 40%`;
-      titleFontSize = 80;
+      bgPos = `9% 30%`;
+      titleFontSize = 70;
       contentJustify = 'space-around';
     }
   }
@@ -133,9 +137,9 @@ export default async function handler(req: Request) {
     display: 'flex',
     flexWrap: 'nowrap',
     flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignContent: 'stretch',
-    alignItems: 'flex-start',
+    justifyContent: `${wrapperJustify}`,
+    // alignContent: 'stretch',
+    alignItems: `${wrapperAlign}`,
     backgroundColor: '#222',
     color: '#fff',
     fontSize: '50px',
@@ -143,9 +147,11 @@ export default async function handler(req: Request) {
     fontFamily: 'brandon-grotesque',
     position: 'relative',
     zIndex: 1,
+    lineHeight: 1,
   }
 
   let CONFIG_IMG = {
+    display: 'flex',
     order: 1,
     flexGrow: 0,
     flexShrink: 0,
@@ -179,8 +185,16 @@ export default async function handler(req: Request) {
   let CONFIG_TITLE = {
     color: '#fff',
     textTransform: 'uppercase',
-    fontSize: `${titleFontSize}px`,
-    lineHeight: 1,
+    fontSize: titleFontSize,
+  }
+
+  let CONFIG_HEADER = {
+    color: '#000',
+    display: `${headerDisplay}`,
+  }
+
+  let CONFIG_LOGO = {
+    display: `${logoDisplay}`,
   }
 
   let CONFIG_FOOTER = {
@@ -194,17 +208,8 @@ export default async function handler(req: Request) {
       <div style={CONFIG_WRAPPER}>
         <figure style={CONFIG_IMG}></figure>
         <section style={CONFIG_CONTENT}>
-          <header style={
-            {
-              color: '#000',
-              display: `${headerDisplay}`,
-            }
-          }>{headerText}</header>
-          <img style={
-            {
-              display: `${logoDisplay}`,
-            }
-          } src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
+          <header style={CONFIG_HEADER}>{headerText}</header>
+          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
           <h1 style={CONFIG_TITLE}>{title}</h1>
           <div style={CONFIG_FOOTER}>{footerText}</div>
         </section>

From b18b9805705365dd4a6089a4e17a343976fa13da Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 5 Dec 2022 14:54:13 -0500
Subject: [PATCH 17/77] improved bg img size for full/short courses

---
 .netlify/functions/og.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 679f0d600..f4ef64637 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -119,13 +119,15 @@ export default async function handler(req: Request) {
         footerText = metaData.topic;
       }
     } else {
-      const iconSize = 300;
-      bgSize = `${iconSize}px ${aspectRatio(574,488,iconSize)}px`;
+      const iconWidth = 516;
+      let iconHeight = aspectRatio(574,488,iconWidth);
+      bgSize = `${iconWidth}px ${iconHeight}px`;
+      const iconVOffset = (wrapperHeight - iconHeight)/2;
 
-      imgWidth = 516;
-      bgPos = `9% 30%`;
+      imgWidth = iconWidth;
+      bgPos = `0px ${iconVOffset}px`;
       titleFontSize = 70;
-      contentJustify = 'space-around';
+      contentJustify = 'center';
     }
   }
 

From 506b3a74be9d4781cfd7548657091ec28c20ac13 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:21:35 -0500
Subject: [PATCH 18/77] update take 5 logic from staging

---
 _includes/partials/meta/logic-take5.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/_includes/partials/meta/logic-take5.html b/_includes/partials/meta/logic-take5.html
index 9de321e33..793f87867 100644
--- a/_includes/partials/meta/logic-take5.html
+++ b/_includes/partials/meta/logic-take5.html
@@ -3,9 +3,8 @@
 {%- endcomment -%}
 {%- assign course = site.data.take5[id] -%}
 {%- assign og_description = course.short_description -%}
-{%- assign og_url = course.title | slugify | prepend: "/courses/take5/" -%}
 {%- assign og_title = course.title -%}
+{%- assign og_url = course.title | slugify | prepend: "/courses/take5/" -%}
 {%- assign page_title =  course.title | append: " | Gymnasium" -%}
 {%- assign og_art = course.course_ID | downcase | append: "-og.png" | prepend: "/img/take5/og/" -%}
 {%- assign og_img_alt = course.title | prepend: "Video poster for tutorial titled " -%}
-{%- assign data_topic = course.topic -%}

From 5784f27d99dcb9e2badc7b3047c5f2fec6531b3f Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:22:03 -0500
Subject: [PATCH 19/77] Add back data_topic

---
 _includes/partials/meta/logic-take5.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_includes/partials/meta/logic-take5.html b/_includes/partials/meta/logic-take5.html
index 793f87867..59b898f47 100644
--- a/_includes/partials/meta/logic-take5.html
+++ b/_includes/partials/meta/logic-take5.html
@@ -8,3 +8,4 @@
 {%- assign page_title =  course.title | append: " | Gymnasium" -%}
 {%- assign og_art = course.course_ID | downcase | append: "-og.png" | prepend: "/img/take5/og/" -%}
 {%- assign og_img_alt = course.title | prepend: "Video poster for tutorial titled " -%}
+{%- assign data_topic = course.topic -%}

From 8b63c9282b076ac3dba1b11e4e148e2e2e5890ea Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 12 Dec 2022 11:22:20 -0500
Subject: [PATCH 20/77] Update og.tsx

---
 .netlify/functions/og.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index f4ef64637..7d4da065b 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -86,6 +86,7 @@ export default async function handler(req: Request) {
   const wrapperWidth = 1200;
   const wrapperHeight = 628;
   let imgWidth = 0;
+  let imgDisplay = 'none';
   let bgImg = '';
   let bgSize = '';
   let bgPos = '0 0';
@@ -97,6 +98,7 @@ export default async function handler(req: Request) {
   let headerText = '';
   let wrapperJustify = 'center';
   let wrapperAlign = 'center';
+  let contentAlign = 'center';
 
   if (!!imgPath) {
     // General defaults + some take 5 settings
@@ -104,6 +106,8 @@ export default async function handler(req: Request) {
     bgSize = 'initial';
     wrapperJustify = 'flex-start';
     wrapperAlign = 'flex-start';
+    imgDisplay = 'flex';
+    contentAlign = 'flex-start';
 
     if (courseType === 'take5') {
       imgWidth = 320;
@@ -153,7 +157,7 @@ export default async function handler(req: Request) {
   }
 
   let CONFIG_IMG = {
-    display: 'flex',
+    display: `${imgDisplay}`,
     order: 1,
     flexGrow: 0,
     flexShrink: 0,
@@ -177,6 +181,7 @@ export default async function handler(req: Request) {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: `${contentJustify}`,
+    alignItems: `${contentAlign}`,
     padding: '60px',
     marginLeft: `${imgWidth}px`,
     backgroundColor: `#${bgColor}`,

From 9bb8ea817d26df8cc57402948a00b5669f951f75 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 13 Dec 2022 09:38:57 -0500
Subject: [PATCH 21/77] Set default logo size

---
 .netlify/functions/og.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 7d4da065b..2a577d5d8 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -70,7 +70,6 @@ export default async function handler(req: Request) {
     metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
   }
 
-  console.log(metaPath);
   if (!metaPath) {
     metaData = '';
   } else {
@@ -99,6 +98,7 @@ export default async function handler(req: Request) {
   let wrapperJustify = 'center';
   let wrapperAlign = 'center';
   let contentAlign = 'center';
+  let logoWidth = 834;
 
   if (!!imgPath) {
     // General defaults + some take 5 settings
@@ -108,6 +108,7 @@ export default async function handler(req: Request) {
     wrapperAlign = 'flex-start';
     imgDisplay = 'flex';
     contentAlign = 'flex-start';
+    logoWidth = 300;
 
     if (courseType === 'take5') {
       imgWidth = 320;
@@ -202,6 +203,7 @@ export default async function handler(req: Request) {
 
   let CONFIG_LOGO = {
     display: `${logoDisplay}`,
+    width: `${logoWidth}`,
   }
 
   let CONFIG_FOOTER = {
@@ -216,7 +218,7 @@ export default async function handler(req: Request) {
         <figure style={CONFIG_IMG}></figure>
         <section style={CONFIG_CONTENT}>
           <header style={CONFIG_HEADER}>{headerText}</header>
-          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' width='300' />
+          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
           <h1 style={CONFIG_TITLE}>{title}</h1>
           <div style={CONFIG_FOOTER}>{footerText}</div>
         </section>

From 9be6b45d061f2110a8dca50f94e70f4c601ce934 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 11 Jan 2023 15:04:42 -0500
Subject: [PATCH 22/77] Fix localhost error

Resolves `Uncaught CompileError: WebAssembly.instantiate(): expected magic word` error
---
 .netlify/edge-functions-import-map.json | 2 +-
 .netlify/functions/og.tsx               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.netlify/edge-functions-import-map.json b/.netlify/edge-functions-import-map.json
index 2592951a1..ef311bf52 100644
--- a/.netlify/edge-functions-import-map.json
+++ b/.netlify/edge-functions-import-map.json
@@ -1 +1 @@
-{"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"}}
\ No newline at end of file
+{"imports":{"netlify:edge":"https://edge.netlify.com/v1/index.ts"},"scopes":{}}
\ No newline at end of file
diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 2a577d5d8..e2af22caa 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,5 +1,5 @@
 import React from 'https://esm.sh/react@18.2.0';
-import { ImageResponse } from 'https://deno.land/x/og_edge@0.0.4/mod.ts';
+import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 
 // $gym-green: #2c9959;
@@ -8,7 +8,7 @@ import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 // $gym-teal: #5ca5a0;
 
 // TODO: Change URL before release
-const domain = 'https://deploy-preview-832--thegymcms.netlify.app/';
+const domain = 'https://deploy-preview-832--thegymcms.netlify.app';
 
 const brandon = new URL(`${domain}/fonts/brandon_bld-webfont.woff`, import.meta.url);
 

From d0417336c4589dbfdf09b372857f1af675f5bd7d Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 16 Jan 2023 14:30:06 -0500
Subject: [PATCH 23/77] Create .nvmrc

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..3c032078a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18

From 5a411114e0284f63cabdbb04414685dc0161326a Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 16 Jan 2023 14:32:09 -0500
Subject: [PATCH 24/77] Add debugging, footer display

---
 .netlify/functions/og.tsx | 71 ++++++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 15 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index e2af22caa..adbff2602 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -7,7 +7,7 @@ import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
 
-// TODO: Change URL before release
+// TODO: Change URL to production before release
 const domain = 'https://deploy-preview-832--thegymcms.netlify.app';
 
 const brandon = new URL(`${domain}/fonts/brandon_bld-webfont.woff`, import.meta.url);
@@ -42,7 +42,7 @@ export default async function handler(req: Request) {
   const bgColor = params.get('bg') ?? '222';
   const imgBgColor = params.get('imgbg') ?? '222';
   const courseNum: any = params.get('courseNum') ?? false;
-  const offset:any = Math.abs(params.get('offset')) ?? 0;
+  const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
   let titleFontSize = 50;
   let footerText = params.get('footer') ?? 'thegymnasium.com';
   // const pubDate = params.get('pubDate') ?? new Date().toISOString();
@@ -50,6 +50,18 @@ export default async function handler(req: Request) {
   let metaPath: any;
   let courseType: any;
   let metaData: any;
+  let hideFooter: boolean = false;
+  let debug: boolean = false;
+
+  if (params.has('debug')) {
+    debug = true;
+    params.delete('debug');
+  }
+
+  // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
+  if (params && params.toString().length === 0) {
+    hideFooter = true;
+  }
 
   // If we have a course number, grab specific data
   if (courseNum) {
@@ -76,29 +88,35 @@ export default async function handler(req: Request) {
     metaData = await loadMetaTitle(`${domain}/${metaPath}`);
   }
 
-  // Allow override of title via url params
-  let title = params.get('title') ?? metaData.ogTitle;
-
-  const imgUrl = `${domain}${imgPath}`;
-
   // defaults
   const wrapperWidth = 1200;
   const wrapperHeight = 628;
-  let imgWidth = 0;
   let imgDisplay = 'none';
+  let imgWidth = 0;
   let bgImg = '';
   let bgSize = '';
   let bgPos = '0 0';
-  let footerColor = 'ff5f14';
-  let footerCase = 'initial';
+  let contentAlign = 'center';
   let contentJustify = 'center';
+  let footerCase = 'initial';
+  let footerColor = 'ff5f14';
+  let footerDisplay = 'flex';
   let logoDisplay = 'flex';
+  let logoWidth = 834;
   let headerDisplay = 'none';
   let headerText = '';
-  let wrapperJustify = 'center';
   let wrapperAlign = 'center';
-  let contentAlign = 'center';
-  let logoWidth = 834;
+  let wrapperJustify = 'center';
+
+  // Allow override of title via url params
+  let title = params.get('title') ?? metaData.ogTitle;
+
+  // Permit hiding the footer (?footer=false)
+  if (hideFooter === true) {
+    footerDisplay = 'none';
+  }
+
+  const imgUrl = `${domain}${imgPath}`;
 
   if (!!imgPath) {
     // General defaults + some take 5 settings
@@ -115,7 +133,7 @@ export default async function handler(req: Request) {
       titleFontSize = 90;
       footerColor = 'ccc';
       contentJustify = 'space-between';
-      bgPos = `-${offset}px 0px`;
+      bgPos = `-${imgOffset}px 0px`;
       footerCase = 'uppercase';
       logoDisplay = 'none';
       headerDisplay = 'flex';
@@ -124,6 +142,7 @@ export default async function handler(req: Request) {
         footerText = metaData.topic;
       }
     } else {
+      // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
       let iconHeight = aspectRatio(574,488,iconWidth);
       bgSize = `${iconWidth}px ${iconHeight}px`;
@@ -209,6 +228,28 @@ export default async function handler(req: Request) {
   let CONFIG_FOOTER = {
     color: `#${footerColor}`,
     textTransform: `${footerCase}`,
+    display: `${footerDisplay}`,
+  }
+
+  if (debug) {
+    console.log(
+      'URL parameters: ',
+      params.toString(), '\n',
+      'CONFIG_WRAPPER =',
+      CONFIG_WRAPPER, '\n',
+      'CONFIG_IMG =',
+      CONFIG_IMG, '\n',
+      'CONFIG_CONTENT =',
+      CONFIG_CONTENT, '\n',
+      'CONFIG_HEADER =',
+      CONFIG_HEADER, '\n',
+      'CONFIG_LOGO =',
+      CONFIG_LOGO, '\n',
+      'CONFIG_TITLE =',
+      CONFIG_TITLE, '\n',
+      'CONFIG_FOOTER =',
+      CONFIG_FOOTER, '\n',
+    );
   }
 
   // Generate the open graph image
@@ -227,7 +268,7 @@ export default async function handler(req: Request) {
     {
       width: 1200,
       height: 628,
-      debug: true,
+      debug: debug,
       fonts: [
         {
           name: 'brandon-grotesque',

From db7e9c0782ad035fd56090a9db7c234f2e813708 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 18 Jan 2023 13:29:29 -0500
Subject: [PATCH 25/77] support for yaml data files

---
 .netlify/functions/og.tsx | 80 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index adbff2602..b2f56b786 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -2,6 +2,16 @@ import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
 
+
+// import { ProfanityEngine } from 'npm:@coffeeandfun/google-profanity-words';
+
+import {
+  parse as yamlParse,
+  parseAll as yamlParseAll,
+  stringify as yamlStringify,
+} from 'https://deno.land/std/encoding/yaml.ts';
+
+
 // $gym-green: #2c9959;
 // $gym-magenta: #d73158;
 // $gym-purple: #764c9f;
@@ -16,6 +26,71 @@ const font = fetch(brandon).then(
   (res) => res.arrayBuffer(),
 );
 
+// Get a full file name if we only have the first part
+async function getFileName(currentPath: string, fileFragment: string) {
+
+  try {
+    for await (const dirEntry of Deno.readDir(currentPath)) {
+      // console.log(dirEntry);
+      const fileName = dirEntry.name.startsWith(fileFragment) &&  dirEntry.isFile ? dirEntry.name : false;
+      
+      if (fileName) {
+        console.log(fileName);
+        return fileName;
+      }
+    }
+  } catch(err) {
+    console.error(err);
+  }
+}
+
+// Parse YAML data file!
+async function loadDataFile(id: string) {
+  // TODO: process incoming ID and determine data file path based on ID
+  const lowerId = id.toLowerCase();
+  const upperId = id.toUpperCase();
+  let pathFragment:any = '';
+  let fullPath:string = '';
+
+  if (lowerId.startsWith('gym')) {
+
+    const checkId = id.match(/\d+/);
+    const numericId = checkId !== null ? parseInt(checkId, 10) : ()=> {return false};
+
+    if (numericId < 700) {
+      pathFragment = 'courses';
+    } else if (numericId >= 700 && numericId < 800) {
+      pathFragment = 'workshop';
+    } else if (numericId >= 5000) {
+      pathFragment = 'take5';
+    }
+
+    fullPath = `${pathFragment}/${upperId}.yml`;
+
+  } else if (lowerId.startsWith('web')) {
+    let fileName = await getFileName('./_data/webinars/', lowerId);
+    fullPath = `webinars/${fileName}`;
+  }
+
+  try {
+    const yaml = yamlParseAll(await Deno.readTextFile(`./_data/${fullPath}`));
+    const data = yaml[0];
+    const ogTitle = data['title'] ? data['title'] : '[Unspecified]';
+    const topic = data['topic'] ? data['topic'] : '[Unspecified]';
+    const imgBg = data['image_background_color'] ? data['image_background_color'] : '[Unspecified]';
+    const img = data['poster_art'] ? data['poster_art'] : '[Unspecified]';
+    return {ogTitle, topic, imgBg, img};
+
+  } catch(err) {
+    console.error(err);
+  }
+}
+
+// TODO: get meta data file from path (for static pages without data files)
+async function loadMetaData(path: string) {
+  // TODO
+}
+
 async function loadMetaTitle(url: string) {
   const resp = await fetch(url);
   const html = await resp.text();
@@ -86,6 +161,11 @@ export default async function handler(req: Request) {
     metaData = '';
   } else {
     metaData = await loadMetaTitle(`${domain}/${metaPath}`);
+    
+  }
+
+  if (params.get('id')) {
+    console.log(await loadDataFile(params.get('id')));
   }
 
   // defaults

From 5be1889a816f75fc13058b9eb232611799cfa182 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 18 Jan 2023 15:30:29 -0500
Subject: [PATCH 26/77] data file: course_type

---
 .netlify/functions/og.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index b2f56b786..4d9486aa2 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -75,11 +75,12 @@ async function loadDataFile(id: string) {
   try {
     const yaml = yamlParseAll(await Deno.readTextFile(`./_data/${fullPath}`));
     const data = yaml[0];
-    const ogTitle = data['title'] ? data['title'] : '[Unspecified]';
-    const topic = data['topic'] ? data['topic'] : '[Unspecified]';
-    const imgBg = data['image_background_color'] ? data['image_background_color'] : '[Unspecified]';
-    const img = data['poster_art'] ? data['poster_art'] : '[Unspecified]';
-    return {ogTitle, topic, imgBg, img};
+    const ogTitle = data['title'] ? data['title'] : null;
+    const topic = data['topic'] ? data['topic'] : null;
+    const courseType = data['course_type'] ? data['course_type'] : null;
+    const imgBg = data['image_background_color'] ? data['image_background_color'] : null;
+    const img = data['poster_art'] ? data['poster_art'] : null;
+    return {ogTitle, topic, imgBg, img, courseType};
 
   } catch(err) {
     console.error(err);

From 55258bed44bead4af5c3e4e0b9cb34ecd994b535 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 19 Jan 2023 15:59:08 -0500
Subject: [PATCH 27/77] query local data files only!

---
 .netlify/functions/og.tsx | 66 +++++++++++++++++++++++----------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 4d9486aa2..5357dfe8f 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,14 +1,16 @@
 import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
 import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
-
+import { basename, dirname } from 'https://deno.land/std/path/mod.ts';
+import { Buffer } from "https://deno.land/std/io/buffer.ts";
+import { readableStreamFromReader } from "https://deno.land/std@0.140.0/streams/conversion.ts";
 
 // import { ProfanityEngine } from 'npm:@coffeeandfun/google-profanity-words';
 
 import {
-  parse as yamlParse,
+  // parse as yamlParse,
   parseAll as yamlParseAll,
-  stringify as yamlStringify,
+  // stringify as yamlStringify,
 } from 'https://deno.land/std/encoding/yaml.ts';
 
 
@@ -17,12 +19,9 @@ import {
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
 
-// TODO: Change URL to production before release
-const domain = 'https://deploy-preview-832--thegymcms.netlify.app';
-
-const brandon = new URL(`${domain}/fonts/brandon_bld-webfont.woff`, import.meta.url);
+const fontUrl = new URL(`${Deno.cwd()}/fonts/brandon_bld-webfont.woff`, import.meta.url);
 
-const font = fetch(brandon).then(
+const font = fetch(fontUrl).then(
   (res) => res.arrayBuffer(),
 );
 
@@ -80,6 +79,9 @@ async function loadDataFile(id: string) {
     const courseType = data['course_type'] ? data['course_type'] : null;
     const imgBg = data['image_background_color'] ? data['image_background_color'] : null;
     const img = data['poster_art'] ? data['poster_art'] : null;
+    
+    console.log(data);
+
     return {ogTitle, topic, imgBg, img, courseType};
 
   } catch(err) {
@@ -92,16 +94,17 @@ async function loadMetaData(path: string) {
   // TODO
 }
 
-async function loadMetaTitle(url: string) {
-  const resp = await fetch(url);
-  const html = await resp.text();
-  const parser = new DOMParser();
-  const htmlDoc = parser.parseFromString(html, 'text/html');
-  const metaTitle = htmlDoc.querySelector('[property="og:title"]');
-  const ogTitle = metaTitle.getAttribute('content');
-  const topic = metaTitle.getAttribute('data-topic');
-  return {ogTitle, topic};
-}
+// async function loadMetaTitle(url: string) {
+//   // const resp = await fetch(url);
+//   const resp = await Deno.readFile(`./${url}`);
+//   const html = await resp.text();
+//   const parser = new DOMParser();
+//   const htmlDoc = parser.parseFromString(html, 'text/html');
+//   const metaTitle = htmlDoc.querySelector('[property="og:title"]');
+//   const ogTitle = metaTitle.getAttribute('content');
+//   const topic = metaTitle.getAttribute('data-topic');
+//   return {ogTitle, topic};
+// }
 
 // Calculate aspect ratio of a resized image, assuming one knows the initial dimensions
 function aspectRatio(width:number, height:number, newWidth:number) {
@@ -112,9 +115,11 @@ function aspectRatio(width:number, height:number, newWidth:number) {
 
 export default async function handler(req: Request) {
   const fontData = await font;
+
   // Get the query parameters from the request
   const url = new URL(req.url);
   const params:any = new URLSearchParams(url.search);
+  const id = params.get('id') ?? null;
   const bgColor = params.get('bg') ?? '222';
   const imgBgColor = params.get('imgbg') ?? '222';
   const courseNum: any = params.get('courseNum') ?? false;
@@ -139,6 +144,7 @@ export default async function handler(req: Request) {
     hideFooter = true;
   }
 
+  // TODO: refactor courseNum to use id
   // If we have a course number, grab specific data
   if (courseNum) {
     if (courseNum < 100) {
@@ -155,18 +161,23 @@ export default async function handler(req: Request) {
       imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
     }
 
-    metaPath = `/courses/${courseType}/gym-${courseNum}/meta/index.html`;
+    metaPath = `/courses/${courseType}/GYM-${courseNum}/meta.md`;
   }
 
-  if (!metaPath) {
-    metaData = '';
-  } else {
-    metaData = await loadMetaTitle(`${domain}/${metaPath}`);
-    
+  try {
+    metaData = await loadDataFile(`gym-${courseNum}`);
+  } catch(err) {
+    console.error(err);
   }
 
-  if (params.get('id')) {
-    console.log(await loadDataFile(params.get('id')));
+  // TODO: refactor courseNum to use id
+  if (id) {
+    try {
+      metaData = await loadDataFile(id);
+      imgPath = metaData.img;
+    } catch(err) {
+      console.error(err);
+    }
   }
 
   // defaults
@@ -197,7 +208,8 @@ export default async function handler(req: Request) {
     footerDisplay = 'none';
   }
 
-  const imgUrl = `${domain}${imgPath}`;
+  const imgUrl = `file://${Deno.cwd()}${imgPath}`;
+  courseType = metaData.courseType;
 
   if (!!imgPath) {
     // General defaults + some take 5 settings

From 37968dc8dd064d851dffd45ecf17deb22ee367e4 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 09:46:50 -0500
Subject: [PATCH 28/77] Update og.tsx

---
 .netlify/functions/og.tsx | 57 +++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 5357dfe8f..eba6a18df 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -90,9 +90,9 @@ async function loadDataFile(id: string) {
 }
 
 // TODO: get meta data file from path (for static pages without data files)
-async function loadMetaData(path: string) {
-  // TODO
-}
+// async function loadMetaData(path: string) {
+//   // TODO
+// }
 
 // async function loadMetaTitle(url: string) {
 //   // const resp = await fetch(url);
@@ -147,27 +147,28 @@ export default async function handler(req: Request) {
   // TODO: refactor courseNum to use id
   // If we have a course number, grab specific data
   if (courseNum) {
-    if (courseNum < 100) {
-      courseType = 'gym-shorts';
-      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    } else if (courseNum >= 100 && courseNum < 700) {
-      courseType = 'full';
-      imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    } else if (courseNum >= 700 && courseNum < 800) {
-      courseType = 'workshops';
-      imgPath = null;
-    } else if (courseNum >= 5000) {
-      courseType = 'take5';
-      imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
-    }
+    // if (courseNum < 100) {
+    //   courseType = 'gym-shorts';
+    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    // } else if (courseNum >= 100 && courseNum < 700) {
+    //   courseType = 'full';
+    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    // } else if (courseNum >= 700 && courseNum < 800) {
+    //   courseType = 'workshops';
+    //   imgPath = null;
+    // } else if (courseNum >= 5000) {
+    //   courseType = 'take5';
+    //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
+    // }
+
+    // metaPath = `/courses/${courseType}/GYM-${courseNum}/meta.md`;
 
-    metaPath = `/courses/${courseType}/GYM-${courseNum}/meta.md`;
-  }
-
-  try {
-    metaData = await loadDataFile(`gym-${courseNum}`);
-  } catch(err) {
-    console.error(err);
+    try {
+      metaData = await loadDataFile(`gym-${courseNum}`);
+      imgPath = metaData.img;
+    } catch(err) {
+      console.error(err);
+    }
   }
 
   // TODO: refactor courseNum to use id
@@ -201,7 +202,7 @@ export default async function handler(req: Request) {
   let wrapperJustify = 'center';
 
   // Allow override of title via url params
-  let title = params.get('title') ?? metaData.ogTitle;
+  let title;
 
   // Permit hiding the footer (?footer=false)
   if (hideFooter === true) {
@@ -209,9 +210,13 @@ export default async function handler(req: Request) {
   }
 
   const imgUrl = `file://${Deno.cwd()}${imgPath}`;
-  courseType = metaData.courseType;
 
-  if (!!imgPath) {
+  if (metaData) {
+    courseType = metaData.courseType;
+    title = params.get('title') ?? metaData.ogTitle;
+  }
+  
+  if (metaData.img) {
     // General defaults + some take 5 settings
     bgImg = `url(${imgUrl})`;
     bgSize = 'initial';

From 9a4d2ad6a0a9208605a065fadaa20b160eadc5c8 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 10:28:59 -0500
Subject: [PATCH 29/77] Add img_bg_color to data

---
 .netlify/functions/og.tsx   | 535 ++++++++++++++++++------------------
 _data/courses/GYM-001.yml   |   1 +
 _data/courses/GYM-002.yml   |   1 +
 _data/courses/GYM-003.yml   |   1 +
 _data/courses/GYM-004.yml   |   1 +
 _data/courses/GYM-005.yml   |   1 +
 _data/courses/GYM-006.yml   |   1 +
 _data/courses/GYM-007.yml   |   1 +
 _data/courses/GYM-008.yml   |   1 +
 _data/courses/GYM-009.yml   |   1 +
 _data/courses/GYM-011.yml   |   1 +
 _data/courses/GYM-012.yml   |   1 +
 _data/courses/GYM-013.yml   |   1 +
 _data/courses/GYM-014.yml   |   1 +
 _data/courses/GYM-015.yml   |   1 +
 _data/courses/GYM-016.yml   |   3 +-
 _data/courses/GYM-017.yml   |   1 +
 _data/courses/GYM-018.yml   |   1 +
 _data/courses/GYM-019.yml   |   1 +
 _data/courses/GYM-020.yml   |   1 +
 _data/courses/GYM-100.yml   |   1 +
 _data/courses/GYM-101.yml   |   1 +
 _data/courses/GYM-102.yml   |   1 +
 _data/courses/GYM-103.yml   |   1 +
 _data/courses/GYM-104.yml   |   1 +
 _data/courses/GYM-105.yml   |   1 +
 _data/courses/GYM-106.yml   |   1 +
 _data/courses/GYM-107.yml   |   1 +
 _data/courses/GYM-108.yml   |   1 +
 _data/courses/GYM-109.yml   |   1 +
 _data/courses/GYM-700.yml   |  22 --
 _data/workshops/GYM-700.yml |   1 +
 32 files changed, 306 insertions(+), 283 deletions(-)
 delete mode 100644 _data/courses/GYM-700.yml

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index eba6a18df..e1cea3af5 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -18,6 +18,7 @@ import {
 // $gym-magenta: #d73158;
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
+console.log(`cwd: ${Deno.cwd()}`);
 
 const fontUrl = new URL(`${Deno.cwd()}/fonts/brandon_bld-webfont.woff`, import.meta.url);
 
@@ -59,7 +60,7 @@ async function loadDataFile(id: string) {
     if (numericId < 700) {
       pathFragment = 'courses';
     } else if (numericId >= 700 && numericId < 800) {
-      pathFragment = 'workshop';
+      pathFragment = 'workshops';
     } else if (numericId >= 5000) {
       pathFragment = 'take5';
     }
@@ -76,13 +77,14 @@ async function loadDataFile(id: string) {
     const data = yaml[0];
     const ogTitle = data['title'] ? data['title'] : null;
     const topic = data['topic'] ? data['topic'] : null;
-    const courseType = data['course_type'] ? data['course_type'] : null;
-    const imgBg = data['image_background_color'] ? data['image_background_color'] : null;
+    const type = data['course_type'] ? data['course_type'] : null;
+    const imgBgColor = data['img_bg_color'] ? data['img_bg_color'] : null;
+    const bgColor = data['bg_color'] ? data['bg_color'] : null;
     const img = data['poster_art'] ? data['poster_art'] : null;
     
-    console.log(data);
+    // console.log(data);
 
-    return {ogTitle, topic, imgBg, img, courseType};
+    return {ogTitle, topic, imgBgColor, bgColor, img, type};
 
   } catch(err) {
     console.error(err);
@@ -114,266 +116,279 @@ function aspectRatio(width:number, height:number, newWidth:number) {
 }
 
 export default async function handler(req: Request) {
-  const fontData = await font;
-
-  // Get the query parameters from the request
-  const url = new URL(req.url);
-  const params:any = new URLSearchParams(url.search);
-  const id = params.get('id') ?? null;
-  const bgColor = params.get('bg') ?? '222';
-  const imgBgColor = params.get('imgbg') ?? '222';
-  const courseNum: any = params.get('courseNum') ?? false;
-  const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
-  let titleFontSize = 50;
-  let footerText = params.get('footer') ?? 'thegymnasium.com';
-  // const pubDate = params.get('pubDate') ?? new Date().toISOString();
-  let imgPath: any;
-  let metaPath: any;
-  let courseType: any;
-  let metaData: any;
-  let hideFooter: boolean = false;
-  let debug: boolean = false;
-
-  if (params.has('debug')) {
-    debug = true;
-    params.delete('debug');
-  }
-
-  // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
-  if (params && params.toString().length === 0) {
-    hideFooter = true;
-  }
-
-  // TODO: refactor courseNum to use id
-  // If we have a course number, grab specific data
-  if (courseNum) {
-    // if (courseNum < 100) {
-    //   courseType = 'gym-shorts';
-    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    // } else if (courseNum >= 100 && courseNum < 700) {
-    //   courseType = 'full';
-    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    // } else if (courseNum >= 700 && courseNum < 800) {
-    //   courseType = 'workshops';
-    //   imgPath = null;
-    // } else if (courseNum >= 5000) {
-    //   courseType = 'take5';
-    //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
-    // }
-
-    // metaPath = `/courses/${courseType}/GYM-${courseNum}/meta.md`;
-
-    try {
-      metaData = await loadDataFile(`gym-${courseNum}`);
-      imgPath = metaData.img;
-    } catch(err) {
-      console.error(err);
+  try {
+    const fontData = await font;
+
+    // Get the query parameters from the request
+    const url = new URL(req.url);
+    const params:any = new URLSearchParams(url.search);
+    const id = params.get('id') ?? null;
+    let bgColor = params.get('bg') ?? '222';
+    let imgBgColor = params.get('imgbg') ?? '222';
+    const courseNum: any = params.get('courseNum') ?? false;
+    const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
+    let titleFontSize = 50;
+    let footerText = params.get('footer') ?? 'thegymnasium.com';
+    // const pubDate = params.get('pubDate') ?? new Date().toISOString();
+    let imgPath: any;
+    let metaPath: any;
+    let type: any;
+    let metaData: any;
+    let hideFooter: boolean = false;
+    let debug: boolean = false;
+  
+    if (params.has('debug')) {
+      debug = true;
+      params.delete('debug');
     }
-  }
-
-  // TODO: refactor courseNum to use id
-  if (id) {
-    try {
-      metaData = await loadDataFile(id);
-      imgPath = metaData.img;
-    } catch(err) {
-      console.error(err);
+  
+    // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
+    if (params && params.toString().length === 0) {
+      hideFooter = true;
     }
-  }
-
-  // defaults
-  const wrapperWidth = 1200;
-  const wrapperHeight = 628;
-  let imgDisplay = 'none';
-  let imgWidth = 0;
-  let bgImg = '';
-  let bgSize = '';
-  let bgPos = '0 0';
-  let contentAlign = 'center';
-  let contentJustify = 'center';
-  let footerCase = 'initial';
-  let footerColor = 'ff5f14';
-  let footerDisplay = 'flex';
-  let logoDisplay = 'flex';
-  let logoWidth = 834;
-  let headerDisplay = 'none';
-  let headerText = '';
-  let wrapperAlign = 'center';
-  let wrapperJustify = 'center';
-
-  // Allow override of title via url params
-  let title;
-
-  // Permit hiding the footer (?footer=false)
-  if (hideFooter === true) {
-    footerDisplay = 'none';
-  }
-
-  const imgUrl = `file://${Deno.cwd()}${imgPath}`;
-
-  if (metaData) {
-    courseType = metaData.courseType;
-    title = params.get('title') ?? metaData.ogTitle;
-  }
   
-  if (metaData.img) {
-    // General defaults + some take 5 settings
-    bgImg = `url(${imgUrl})`;
-    bgSize = 'initial';
-    wrapperJustify = 'flex-start';
-    wrapperAlign = 'flex-start';
-    imgDisplay = 'flex';
-    contentAlign = 'flex-start';
-    logoWidth = 300;
-
-    if (courseType === 'take5') {
-      imgWidth = 320;
-      titleFontSize = 90;
-      footerColor = 'ccc';
-      contentJustify = 'space-between';
-      bgPos = `-${imgOffset}px 0px`;
-      footerCase = 'uppercase';
-      logoDisplay = 'none';
-      headerDisplay = 'flex';
-      headerText = 'Take 5';
-      if (metaData.topic) {
-        footerText = metaData.topic;
+    // TODO: refactor courseNum to use id
+    // If we have a course number, grab specific data
+    if (courseNum) {
+      // if (courseNum < 100) {
+      //   type = 'gym-shorts';
+      //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+      // } else if (courseNum >= 100 && courseNum < 700) {
+      //   type = 'full';
+      //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+      // } else if (courseNum >= 700 && courseNum < 800) {
+      //   type = 'workshops';
+      //   imgPath = null;
+      // } else if (courseNum >= 5000) {
+      //   type = 'take5';
+      //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
+      // }
+  
+      // metaPath = `/courses/${type}/GYM-${courseNum}/meta.md`;
+  
+      try {
+        metaData = await loadDataFile(`gym-${courseNum}`);
+        imgPath = metaData.img;
+      } catch(err) {
+        console.error(err);
       }
-    } else {
-      // calculate aspect ratio for proportional resizing
-      const iconWidth = 516;
-      let iconHeight = aspectRatio(574,488,iconWidth);
-      bgSize = `${iconWidth}px ${iconHeight}px`;
-      const iconVOffset = (wrapperHeight - iconHeight)/2;
-
-      imgWidth = iconWidth;
-      bgPos = `0px ${iconVOffset}px`;
-      titleFontSize = 70;
-      contentJustify = 'center';
     }
-  }
-
-  let contentWidth = wrapperWidth - imgWidth;
-
-  let CONFIG_WRAPPER = {
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    flexWrap: 'nowrap',
-    flexDirection: 'row',
-    justifyContent: `${wrapperJustify}`,
-    // alignContent: 'stretch',
-    alignItems: `${wrapperAlign}`,
-    backgroundColor: '#222',
-    color: '#fff',
-    fontSize: '50px',
-    fontWeight: 'bold',
-    fontFamily: 'brandon-grotesque',
-    position: 'relative',
-    zIndex: 1,
-    lineHeight: 1,
-  }
-
-  let CONFIG_IMG = {
-    display: `${imgDisplay}`,
-    order: 1,
-    flexGrow: 0,
-    flexShrink: 0,
-    alignSelf: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    width: '100%',
-    backgroundImage: `${bgImg}`,
-    backgroundColor: `#${imgBgColor}`,
-    backgroundOrigin: 'border-box',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: `${bgPos}`,
-    backgroundSize: `${bgSize}`,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 2,
-  }
-
-  let CONFIG_CONTENT = {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: `${contentJustify}`,
-    alignItems: `${contentAlign}`,
-    padding: '60px',
-    marginLeft: `${imgWidth}px`,
-    backgroundColor: `#${bgColor}`,
-    width: `${contentWidth}px`,
-    height: '100%',
-  }
-
-  let CONFIG_TITLE = {
-    color: '#fff',
-    textTransform: 'uppercase',
-    fontSize: titleFontSize,
-  }
-
-  let CONFIG_HEADER = {
-    color: '#000',
-    display: `${headerDisplay}`,
-  }
-
-  let CONFIG_LOGO = {
-    display: `${logoDisplay}`,
-    width: `${logoWidth}`,
-  }
-
-  let CONFIG_FOOTER = {
-    color: `#${footerColor}`,
-    textTransform: `${footerCase}`,
-    display: `${footerDisplay}`,
-  }
-
-  if (debug) {
-    console.log(
-      'URL parameters: ',
-      params.toString(), '\n',
-      'CONFIG_WRAPPER =',
-      CONFIG_WRAPPER, '\n',
-      'CONFIG_IMG =',
-      CONFIG_IMG, '\n',
-      'CONFIG_CONTENT =',
-      CONFIG_CONTENT, '\n',
-      'CONFIG_HEADER =',
-      CONFIG_HEADER, '\n',
-      'CONFIG_LOGO =',
-      CONFIG_LOGO, '\n',
-      'CONFIG_TITLE =',
-      CONFIG_TITLE, '\n',
-      'CONFIG_FOOTER =',
-      CONFIG_FOOTER, '\n',
-    );
-  }
-
-  // Generate the open graph image
-  return new ImageResponse(
-    (
-      <div style={CONFIG_WRAPPER}>
-        <figure style={CONFIG_IMG}></figure>
-        <section style={CONFIG_CONTENT}>
-          <header style={CONFIG_HEADER}>{headerText}</header>
-          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
-          <h1 style={CONFIG_TITLE}>{title}</h1>
-          <div style={CONFIG_FOOTER}>{footerText}</div>
-        </section>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 628,
-      debug: debug,
-      fonts: [
-        {
-          name: 'brandon-grotesque',
-          data: fontData,
-          style: 'normal',
+  
+    // TODO: refactor courseNum to use id
+    if (id) {
+      try {
+        metaData = await loadDataFile(id);
+        if (metaData.img) {
+          imgPath = metaData.img;
         }
-      ],
+        if (metaData.imgBgColor) {
+          imgBgColor = metaData.imgBgColor;
+        }
+        if (metaData.bgColor) {
+          bgColor = metaData.bgColor;
+        }
+        
+      } catch(err) {
+        console.error(err);
+      }
+    }
+  
+    // defaults
+    const wrapperWidth = 1200;
+    const wrapperHeight = 628;
+    let imgDisplay = 'none';
+    let imgWidth = 0;
+    let bgImg = '';
+    let bgSize = '';
+    let bgPos = '0 0';
+    let contentAlign = 'center';
+    let contentJustify = 'center';
+    let footerCase = 'initial';
+    let footerColor = 'ff5f14';
+    let footerDisplay = 'flex';
+    let logoDisplay = 'flex';
+    let logoWidth = 834;
+    let headerDisplay = 'none';
+    let headerText = '';
+    let wrapperAlign = 'center';
+    let wrapperJustify = 'center';
+  
+    // Allow override of title via url params
+    let title;
+  
+    // Permit hiding the footer (?footer=false)
+    if (hideFooter === true) {
+      footerDisplay = 'none';
+    }
+  
+    const imgUrl = `file://${Deno.cwd()}${imgPath}`;
+  
+    if (metaData) {
+      type = metaData.type;
+      title = params.get('title') ?? metaData.ogTitle;
+    }
+    
+    if (metaData.img) {
+      // General defaults + some take 5 settings
+      bgImg = `url(${imgUrl})`;
+      bgSize = 'initial';
+      wrapperJustify = 'flex-start';
+      wrapperAlign = 'flex-start';
+      imgDisplay = 'flex';
+      contentAlign = 'flex-start';
+      logoWidth = 300;
+  
+      if (type === 'take5') {
+        imgWidth = 320;
+        titleFontSize = 90;
+        footerColor = 'ccc';
+        contentJustify = 'space-between';
+        bgPos = `-${imgOffset}px 0px`;
+        footerCase = 'uppercase';
+        logoDisplay = 'none';
+        headerDisplay = 'flex';
+        headerText = 'Take 5';
+        if (metaData.topic) {
+          footerText = metaData.topic;
+        }
+      } else {
+        // calculate aspect ratio for proportional resizing
+        const iconWidth = 516;
+        let iconHeight = aspectRatio(574,488,iconWidth);
+        bgSize = `${iconWidth}px ${iconHeight}px`;
+        const iconVOffset = (wrapperHeight - iconHeight)/2;
+  
+        imgWidth = iconWidth;
+        bgPos = `0px ${iconVOffset}px`;
+        titleFontSize = 70;
+        contentJustify = 'center';
+      }
+    }
+  
+    let contentWidth = wrapperWidth - imgWidth;
+  
+    let CONFIG_WRAPPER = {
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      flexWrap: 'nowrap',
+      flexDirection: 'row',
+      justifyContent: `${wrapperJustify}`,
+      // alignContent: 'stretch',
+      alignItems: `${wrapperAlign}`,
+      backgroundColor: '#222',
+      color: '#fff',
+      fontSize: '50px',
+      fontWeight: 'bold',
+      fontFamily: 'brandon-grotesque',
+      position: 'relative',
+      zIndex: 1,
+      lineHeight: 1,
+    }
+  
+    let CONFIG_IMG = {
+      display: `${imgDisplay}`,
+      order: 1,
+      flexGrow: 0,
+      flexShrink: 0,
+      alignSelf: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+      backgroundImage: `${bgImg}`,
+      backgroundColor: `#${imgBgColor}`,
+      backgroundOrigin: 'border-box',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: `${bgPos}`,
+      backgroundSize: `${bgSize}`,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 2,
+    }
+  
+    let CONFIG_CONTENT = {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: `${contentJustify}`,
+      alignItems: `${contentAlign}`,
+      padding: '60px',
+      marginLeft: `${imgWidth}px`,
+      backgroundColor: `#${bgColor}`,
+      width: `${contentWidth}px`,
+      height: '100%',
+    }
+  
+    let CONFIG_TITLE = {
+      color: '#fff',
+      textTransform: 'uppercase',
+      fontSize: titleFontSize,
+    }
+  
+    let CONFIG_HEADER = {
+      color: '#000',
+      display: `${headerDisplay}`,
+    }
+  
+    let CONFIG_LOGO = {
+      display: `${logoDisplay}`,
+      width: `${logoWidth}`,
     }
-  );
+  
+    let CONFIG_FOOTER = {
+      color: `#${footerColor}`,
+      textTransform: `${footerCase}`,
+      display: `${footerDisplay}`,
+    }
+  
+    if (debug) {
+      console.log(
+        'URL parameters: ',
+        params.toString(), '\n',
+        'CONFIG_WRAPPER =',
+        CONFIG_WRAPPER, '\n',
+        'CONFIG_IMG =',
+        CONFIG_IMG, '\n',
+        'CONFIG_CONTENT =',
+        CONFIG_CONTENT, '\n',
+        'CONFIG_HEADER =',
+        CONFIG_HEADER, '\n',
+        'CONFIG_LOGO =',
+        CONFIG_LOGO, '\n',
+        'CONFIG_TITLE =',
+        CONFIG_TITLE, '\n',
+        'CONFIG_FOOTER =',
+        CONFIG_FOOTER, '\n',
+      );
+    }
+  
+    // Generate the open graph image
+    return new ImageResponse(
+      (
+        <div style={CONFIG_WRAPPER}>
+          <figure style={CONFIG_IMG}></figure>
+          <section style={CONFIG_CONTENT}>
+            <header style={CONFIG_HEADER}>{headerText}</header>
+            <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
+            <h1 style={CONFIG_TITLE}>{title}</h1>
+            <div style={CONFIG_FOOTER}>{footerText}</div>
+          </section>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 628,
+        debug: debug,
+        fonts: [
+          {
+            name: 'brandon-grotesque',
+            data: fontData,
+            style: 'normal',
+          }
+        ],
+      }
+    );
+  } catch(err) {
+    console.error(err);
+  }
 }
diff --git a/_data/courses/GYM-001.yml b/_data/courses/GYM-001.yml
index b79287551..072f5dac7 100644
--- a/_data/courses/GYM-001.yml
+++ b/_data/courses/GYM-001.yml
@@ -5,6 +5,7 @@ date: 2019-10-28T00:00:00-04:00
 course_type: short
 url: /courses/GYM/001/0/about
 poster_art: /img/course-artwork/png/gym-001.png
+img_bg_color: 2c9959
 live: true
 topic: "Career Skills"
 short_description: "Learn how to estimate, plan, track, and manage your time in order to complete projects. Being busy isn’t a bad thing, but not being in control of your own time is."
diff --git a/_data/courses/GYM-002.yml b/_data/courses/GYM-002.yml
index 15ad3cee8..ad7969337 100644
--- a/_data/courses/GYM-002.yml
+++ b/_data/courses/GYM-002.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons. <span class='text-wrap'>We recommend taking the updated course <a href='https://thegymnasium.com/courses/course-v1:GYM+012+0/about'>Introduction to Node.js</a> (and earning a badge) instead.</span>"
 url: /courses/GYM/002/0/about
 poster_art: /img/course-artwork/png/gym-002.png
+img_bg_color: 764c9f
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Learn the basics of Node.js by building a “sample social” profile form."
diff --git a/_data/courses/GYM-003.yml b/_data/courses/GYM-003.yml
index f564a4c64..ba02f4dae 100644
--- a/_data/courses/GYM-003.yml
+++ b/_data/courses/GYM-003.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons. <span class='text-wrap'>We recommend watching the tutorial <a href='https://thegymnasium.com/courses/take5/prototyping-in-the-browser-with-css-grid-layout'>Prototyping in the Browser with CSS Grid Layout</a> instead.</span>"
 url: /courses/GYM/003/0/about
 poster_art: /img/course-artwork/png/gym-003.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Get up to speed with the Twitter Bootstrap’s grid layout system and learn how to build a responsive layout that looks great on multiple screen sizes and devices."
diff --git a/_data/courses/GYM-004.yml b/_data/courses/GYM-004.yml
index c9fcb1734..210be50d4 100644
--- a/_data/courses/GYM-004.yml
+++ b/_data/courses/GYM-004.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/GYM/004/0/about
 poster_art: /img/course-artwork/png/gym-004.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "Learn how to convert your HTML/CSS design into a WordPress website. Discover how to set up a local development environment, and add WordPress tags to your design."
 instructor: ghodgkinson
diff --git a/_data/courses/GYM-005.yml b/_data/courses/GYM-005.yml
index 06d101744..c0e433d59 100644
--- a/_data/courses/GYM-005.yml
+++ b/_data/courses/GYM-005.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons."
 url: /courses/GYM/005/0/about
 poster_art: /img/course-artwork/png/gym-005.png
+img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-006.yml b/_data/courses/GYM-006.yml
index 684ac6b5a..4e2b7f3e3 100644
--- a/_data/courses/GYM-006.yml
+++ b/_data/courses/GYM-006.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/GYM/006/0/about
 poster_art: /img/course-artwork/png/gym-006.png
+img_bg_color: 2c9959
 topic: "Development"
 short_description: "Learn the basics of version control and get a high-level overview of both Git and GitHub. Perfect for someone with little to no first-hand experience with either."
 instructor: jausura
diff --git a/_data/courses/GYM-007.yml b/_data/courses/GYM-007.yml
index 9cf8a3630..73f4a6c92 100644
--- a/_data/courses/GYM-007.yml
+++ b/_data/courses/GYM-007.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/GYM/007/0/about
 poster_art: /img/course-artwork/png/gym-007.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "Learn some of the latest standards and thinking around coding HTML forms using the new HTML5 tags and attributes."
 instructor: jkramer
diff --git a/_data/courses/GYM-008.yml b/_data/courses/GYM-008.yml
index d52ea5705..e8c9b0659 100644
--- a/_data/courses/GYM-008.yml
+++ b/_data/courses/GYM-008.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons."
 url: /courses/GYM/008/0/about
 poster_art: /img/course-artwork/png/gym-008.png
+img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-009.yml b/_data/courses/GYM-009.yml
index 04b76adbd..b08265e16 100644
--- a/_data/courses/GYM-009.yml
+++ b/_data/courses/GYM-009.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/GYM/009/0/about
 poster_art: /img/course-artwork/png/gym-009.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This course will teach you how to create themes for Drupal 8. Specifically, you will learn how to install a local development environment for Drupal 8, and use the new TWIG templating engine to customize the structure and style of your theme."
 instructor: ghodgkinson
diff --git a/_data/courses/GYM-011.yml b/_data/courses/GYM-011.yml
index 81ecf3ca6..6360c9e1e 100644
--- a/_data/courses/GYM-011.yml
+++ b/_data/courses/GYM-011.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+011+0/about
 poster_art: /img/course-artwork/png/gym-011.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "In this course, you will get a familiarity with all aspects of the built-in developer tools within the Chrome browser. Understanding how to use these tools will speed up your development time and help you create bug-free, high-performing pages and web applications."
 instructor: kpeters
diff --git a/_data/courses/GYM-012.yml b/_data/courses/GYM-012.yml
index 2439bd7fa..7691845be 100644
--- a/_data/courses/GYM-012.yml
+++ b/_data/courses/GYM-012.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+012+0/about
 poster_art: /img/course-artwork/png/gym-012.png
+img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-013.yml b/_data/courses/GYM-013.yml
index bb2356f93..6942ffccb 100644
--- a/_data/courses/GYM-013.yml
+++ b/_data/courses/GYM-013.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+013+0/about
 poster_art: /img/course-artwork/png/gym-013.png
+img_bg_color: 5ca5a0
 topic: "Design"
 short_description: "Learn how to create 3D generated imagery in Maya for use in Virtual Reality production."
 instructor: groberts
diff --git a/_data/courses/GYM-014.yml b/_data/courses/GYM-014.yml
index bbd9666a5..8a236a12b 100644
--- a/_data/courses/GYM-014.yml
+++ b/_data/courses/GYM-014.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+014+0/about
 poster_art: /img/course-artwork/png/gym-014.png
+img_bg_color: 5ca5a0
 topic: "Development"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-015.yml b/_data/courses/GYM-015.yml
index b10c32cb2..358b24211 100644
--- a/_data/courses/GYM-015.yml
+++ b/_data/courses/GYM-015.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+015+0/about
 poster_art: /img/course-artwork/png/gym-015.png
+img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-016.yml b/_data/courses/GYM-016.yml
index 8d216b497..1254e95d8 100644
--- a/_data/courses/GYM-016.yml
+++ b/_data/courses/GYM-016.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+016+0/about
 poster_art: /img/course-artwork/png/gym-016.png
+img_bg_color: d73158
 topic: "Development"
 subtopics:
   - label: "Accessibility"
@@ -22,4 +23,4 @@ audience:
 lessons_duration: "1 hour"
 completion_duration: "Up to 2 hours"
 skill_level: "Intermediate"
----
\ No newline at end of file
+---
diff --git a/_data/courses/GYM-017.yml b/_data/courses/GYM-017.yml
index fb7b93dd7..3ed6d1a1f 100644
--- a/_data/courses/GYM-017.yml
+++ b/_data/courses/GYM-017.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+017+0/about
 poster_art: /img/course-artwork/png/gym-017.png
+img_bg_color: 2c9959
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-018.yml b/_data/courses/GYM-018.yml
index 3e72fa969..957740cbb 100644
--- a/_data/courses/GYM-018.yml
+++ b/_data/courses/GYM-018.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+018+0/about
 poster_art: /img/course-artwork/png/gym-018.png
+img_bg_color: 5ca5a0
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-019.yml b/_data/courses/GYM-019.yml
index 067b1a032..9d3a9f9ea 100644
--- a/_data/courses/GYM-019.yml
+++ b/_data/courses/GYM-019.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+019+0/about
 poster_art: /img/course-artwork/png/gym-019.png
+img_bg_color: d73158
 topic: "Development"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-020.yml b/_data/courses/GYM-020.yml
index 5c096caeb..6138d8228 100644
--- a/_data/courses/GYM-020.yml
+++ b/_data/courses/GYM-020.yml
@@ -6,6 +6,7 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+020+0/about
 poster_art: /img/course-artwork/png/gym-020.png
+img_bg_color: 5ca5a0
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-100.yml b/_data/courses/GYM-100.yml
index 43e7e3e85..cd891139e 100644
--- a/_data/courses/GYM-100.yml
+++ b/_data/courses/GYM-100.yml
@@ -9,6 +9,7 @@ retired_message:
   2: "<strong>This course has been retired.</strong> We recommend taking the course <a href='https://thegymnasium.com/courses/GYM/107/0/about'>Modern Web Design</a> instead. It’s a bit more advanced, but we think you’d get a lot out of it."
 url: /courses/GYM/100/0/about
 poster_art: /img/course-artwork/png/gym-100.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Learn HTML and CSS and become the Web Designer that Developers love. Professional design experience is a prerequisite, but no prior web or coding experience is necessary."
diff --git a/_data/courses/GYM-101.yml b/_data/courses/GYM-101.yml
index b8304dc10..e966255b9 100644
--- a/_data/courses/GYM-101.yml
+++ b/_data/courses/GYM-101.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a certificate for this course, but you can still view the lessons. <span class='text-wrap'>We recommend taking the course <a href='https://thegymnasium.com/courses/course-v1:GYM+109+0/about'>Responsive Web Design Fundamentals</a> (and earning a certificate) instead.</span>"
 url: /courses/GYM/101/0/about
 poster_art: /img/course-artwork/png/gym-101.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "In this course, you’ll learn best practices for building responsive websites that adapt to different devices and user behaviors."
diff --git a/_data/courses/GYM-102.yml b/_data/courses/GYM-102.yml
index bf507063a..7048887c5 100644
--- a/_data/courses/GYM-102.yml
+++ b/_data/courses/GYM-102.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/GYM/102/0/about
 poster_art: /img/course-artwork/png/gym-102.png
+img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-103.yml b/_data/courses/GYM-103.yml
index c4eff024f..2ba1e5db1 100644
--- a/_data/courses/GYM-103.yml
+++ b/_data/courses/GYM-103.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/GYM/103/0/about
 poster_art: /img/course-artwork/png/gym-103.png
+img_bg_color: 5ca5a0
 topic: "UX"
 short_description: "Learn how to apply user-centered design principles to improve your website and mobile app design. A must-take course for anyone working in design and development."
 instructor: jwebb
diff --git a/_data/courses/GYM-104.yml b/_data/courses/GYM-104.yml
index 4d9f44319..7abda47b0 100644
--- a/_data/courses/GYM-104.yml
+++ b/_data/courses/GYM-104.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/GYM/104/0/about
 poster_art: /img/course-artwork/png/gym-104.png
+img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-105.yml b/_data/courses/GYM-105.yml
index 65d61e1e6..425892be9 100644
--- a/_data/courses/GYM-105.yml
+++ b/_data/courses/GYM-105.yml
@@ -8,6 +8,7 @@ retired_message:
   1: "<strong>This course has been retired.</strong>"
 url: /courses/GYM/105/0/about
 poster_art: /img/course-artwork/png/gym-105.png
+img_bg_color: 2c9959
 topic: "Career Skills"
 short_description: "This course has been retired."
 short_description_orig: "Learn how to write compelling content through meaningful audience research and find the right words to attract and engage users."
diff --git a/_data/courses/GYM-106.yml b/_data/courses/GYM-106.yml
index 6cff71fba..94257d3c6 100644
--- a/_data/courses/GYM-106.yml
+++ b/_data/courses/GYM-106.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/GYM/106/0/about
 poster_art: /img/course-artwork/png/gym-106.png
+img_bg_color: 2c9959
 topic: "Design"
 short_description: "Learn the design and visual principles needed to create effective information graphics and data visualizations."
 instructor: groberts
diff --git a/_data/courses/GYM-107.yml b/_data/courses/GYM-107.yml
index c612d001a..f1874190b 100644
--- a/_data/courses/GYM-107.yml
+++ b/_data/courses/GYM-107.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/GYM/107/0/about
 poster_art: /img/course-artwork/png/gym-107.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This course will prepare you to be a front-end developer by walking you through the process of building a simple, responsive website using HTML, CSS, and JavaScript."
 instructor: agustafson
diff --git a/_data/courses/GYM-108.yml b/_data/courses/GYM-108.yml
index c8d4e12bd..e684bde0b 100644
--- a/_data/courses/GYM-108.yml
+++ b/_data/courses/GYM-108.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/course-v1:GYM+108+0/about
 poster_art: /img/course-artwork/png/gym-108.png
+img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-109.yml b/_data/courses/GYM-109.yml
index 2c6faf2a9..341b2fcb3 100644
--- a/_data/courses/GYM-109.yml
+++ b/_data/courses/GYM-109.yml
@@ -6,6 +6,7 @@ course_type: full
 live: true
 url: /courses/course-v1:GYM+109+0/about
 poster_art: /img/course-artwork/png/gym-109.png
+img_bg_color: d73158
 topic: "Development"
 short_description: "This is a hands-on, code-intensive course on how to build high-performance, responsive websites that look great across multiple screen sizes and devices."
 instructor: jpamental
diff --git a/_data/courses/GYM-700.yml b/_data/courses/GYM-700.yml
deleted file mode 100644
index d39588f22..000000000
--- a/_data/courses/GYM-700.yml
+++ /dev/null
@@ -1,22 +0,0 @@
----
-course_ID: GYM-700
-title: "Portfolio Workshop"
-date: 2021-11-30T00:00:00-00:00
-course_type: workshop
-live: false
-url: /courses/course-v1:GYM+700+0/about
-poster_art: /img/course-artwork/png/gym-700.png
-topic: "Portfolio Workshop"
-short_description: "Portfolio Workshop"
-instructor: josborn
-skills:
-  - label: "Populate me"
-  - label: "Populate me"
-  - label: "Populate me"
-  - label: "Populate me"
-audience:
-  - label: "Populate me"
-  - label: "Populate me"
-  - label: "Populate me"
-  - label: "Populate me"
----
diff --git a/_data/workshops/GYM-700.yml b/_data/workshops/GYM-700.yml
index 8b6c04b8a..0fa14eb29 100644
--- a/_data/workshops/GYM-700.yml
+++ b/_data/workshops/GYM-700.yml
@@ -6,6 +6,7 @@ datetime: "December 5–9, Monday–Friday, 4–5 PM EST"
 course_type: workshop
 url: /courses/GYM/700/0/about
 poster_art: /img/course-artwork/png/gym-700.png
+img_bg_color: 2c9959
 live: false
 topic: "Career Skills"
 short_description: "This workshop will teach students how to create an outstanding portfolio using content strategy and storytelling skills. Students will leave with actionable next steps to improve their portfolio."

From b947ac77d2ae449718637b9a2942b69452069c53 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 10:32:13 -0500
Subject: [PATCH 30/77] Try to fix netlify error

---
 .netlify/functions/og.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index e1cea3af5..b5369e6e7 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -18,9 +18,8 @@ import {
 // $gym-magenta: #d73158;
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
-console.log(`cwd: ${Deno.cwd()}`);
 
-const fontUrl = new URL(`${Deno.cwd()}/fonts/brandon_bld-webfont.woff`, import.meta.url);
+const fontUrl = new URL(`file://${Deno.cwd()}/fonts/brandon_bld-webfont.woff`, import.meta.url);
 
 const font = fetch(fontUrl).then(
   (res) => res.arrayBuffer(),

From db55742810ef3fe46da09874bc6b689e5038f6d9 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 12:13:30 -0500
Subject: [PATCH 31/77] Fix broken build?

---
 .netlify/functions/og.tsx | 533 +++++++++++++++++++-------------------
 1 file changed, 271 insertions(+), 262 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index b5369e6e7..5c791e566 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -79,7 +79,7 @@ async function loadDataFile(id: string) {
     const type = data['course_type'] ? data['course_type'] : null;
     const imgBgColor = data['img_bg_color'] ? data['img_bg_color'] : null;
     const bgColor = data['bg_color'] ? data['bg_color'] : null;
-    const img = data['poster_art'] ? data['poster_art'] : null;
+    const img = data['poster_art'] ? data['poster_art'] : 'none';
     
     // console.log(data);
 
@@ -115,279 +115,288 @@ function aspectRatio(width:number, height:number, newWidth:number) {
 }
 
 export default async function handler(req: Request) {
-  try {
-    const fontData = await font;
-
-    // Get the query parameters from the request
-    const url = new URL(req.url);
-    const params:any = new URLSearchParams(url.search);
-    const id = params.get('id') ?? null;
-    let bgColor = params.get('bg') ?? '222';
-    let imgBgColor = params.get('imgbg') ?? '222';
-    const courseNum: any = params.get('courseNum') ?? false;
-    const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
-    let titleFontSize = 50;
-    let footerText = params.get('footer') ?? 'thegymnasium.com';
-    // const pubDate = params.get('pubDate') ?? new Date().toISOString();
-    let imgPath: any;
-    let metaPath: any;
-    let type: any;
-    let metaData: any;
-    let hideFooter: boolean = false;
-    let debug: boolean = false;
-  
-    if (params.has('debug')) {
-      debug = true;
-      params.delete('debug');
-    }
-  
-    // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
-    if (params && params.toString().length === 0) {
-      hideFooter = true;
+  const fontData = await font;
+
+  // Get the query parameters from the request
+  const url = new URL(req.url);
+  const params:any = new URLSearchParams(url.search);
+  const id = params.get('id') ?? null;
+  let bgColor = params.get('bg') ?? '222';
+  let imgBgColor = params.get('imgbg') ?? '222';
+  const courseNum: any = params.get('courseNum') ?? false;
+  const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
+  let titleFontSize = 50;
+  let footerText = params.get('footer') ?? 'thegymnasium.com';
+  // const pubDate = params.get('pubDate') ?? new Date().toISOString();
+  let imgPath: any;
+  let metaPath: any;
+  let type: any;
+  let metaData: any;
+  let hideFooter: boolean = false;
+  let debug: boolean = false;
+
+  if (params.has('debug')) {
+    debug = true;
+    params.delete('debug');
+  }
+
+  // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
+  if (params && params.toString().length === 0) {
+    hideFooter = true;
+  }
+
+  // TODO: refactor courseNum to use id
+  // If we have a course number, grab specific data
+  if (courseNum) {
+    // if (courseNum < 100) {
+    //   type = 'gym-shorts';
+    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    // } else if (courseNum >= 100 && courseNum < 700) {
+    //   type = 'full';
+    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
+    // } else if (courseNum >= 700 && courseNum < 800) {
+    //   type = 'workshops';
+    //   imgPath = null;
+    // } else if (courseNum >= 5000) {
+    //   type = 'take5';
+    //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
+    // }
+
+    // metaPath = `/courses/${type}/GYM-${courseNum}/meta.md`;
+
+    try {
+      metaData = await loadDataFile(`gym-${courseNum}`);
+      imgPath = metaData.img;
+    } catch(err) {
+      console.error(err);
     }
-  
-    // TODO: refactor courseNum to use id
-    // If we have a course number, grab specific data
-    if (courseNum) {
-      // if (courseNum < 100) {
-      //   type = 'gym-shorts';
-      //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-      // } else if (courseNum >= 100 && courseNum < 700) {
-      //   type = 'full';
-      //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-      // } else if (courseNum >= 700 && courseNum < 800) {
-      //   type = 'workshops';
-      //   imgPath = null;
-      // } else if (courseNum >= 5000) {
-      //   type = 'take5';
-      //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
-      // }
-  
-      // metaPath = `/courses/${type}/GYM-${courseNum}/meta.md`;
-  
-      try {
-        metaData = await loadDataFile(`gym-${courseNum}`);
+  }
+
+  // TODO: refactor courseNum to use id
+  if (id) {
+    try {
+      metaData = await loadDataFile(id);
+      if (metaData.img) {
         imgPath = metaData.img;
-      } catch(err) {
-        console.error(err);
       }
-    }
-  
-    // TODO: refactor courseNum to use id
-    if (id) {
-      try {
-        metaData = await loadDataFile(id);
-        if (metaData.img) {
-          imgPath = metaData.img;
-        }
-        if (metaData.imgBgColor) {
-          imgBgColor = metaData.imgBgColor;
-        }
-        if (metaData.bgColor) {
-          bgColor = metaData.bgColor;
-        }
-        
-      } catch(err) {
-        console.error(err);
+      if (metaData.imgBgColor) {
+        imgBgColor = metaData.imgBgColor;
       }
+      if (metaData.bgColor) {
+        bgColor = metaData.bgColor;
+      }
+      
+    } catch(err) {
+      console.error(err);
     }
+  }
+
+  // defaults
+  const wrapperWidth = 1200;
+  const wrapperHeight = 628;
+  let imgDisplay = 'none';
+  let imgWidth = 0;
+  let bgImg = '';
+  let bgSize = '';
+  let bgPos = '0 0';
+  let contentAlign = 'center';
+  let contentJustify = 'center';
+  let footerCase = 'initial';
+  let footerColor = 'ff5f14';
+  let footerDisplay = 'flex';
+  let logoDisplay = 'flex';
+  let logoWidth = 834;
+  let headerDisplay = 'none';
+  let headerText = '';
+  let wrapperAlign = 'center';
+  let wrapperJustify = 'center';
+
+  // Allow override of title via url params
+  let title;
+
+  // Permit hiding the footer (?footer=false)
+  if (hideFooter === true) {
+    footerDisplay = 'none';
+  }
+
+  let imgUrl;
+  if (imgPath) {
+    imgUrl = `file://${Deno.cwd()}${imgPath}`;
+  }
   
-    // defaults
-    const wrapperWidth = 1200;
-    const wrapperHeight = 628;
-    let imgDisplay = 'none';
-    let imgWidth = 0;
-    let bgImg = '';
-    let bgSize = '';
-    let bgPos = '0 0';
-    let contentAlign = 'center';
-    let contentJustify = 'center';
-    let footerCase = 'initial';
-    let footerColor = 'ff5f14';
-    let footerDisplay = 'flex';
-    let logoDisplay = 'flex';
-    let logoWidth = 834;
-    let headerDisplay = 'none';
-    let headerText = '';
-    let wrapperAlign = 'center';
-    let wrapperJustify = 'center';
-  
-    // Allow override of title via url params
-    let title;
-  
-    // Permit hiding the footer (?footer=false)
-    if (hideFooter === true) {
-      footerDisplay = 'none';
-    }
-  
-    const imgUrl = `file://${Deno.cwd()}${imgPath}`;
-  
-    if (metaData) {
+  if (metaData) {
+    if (metaData.type) {
       type = metaData.type;
-      title = params.get('title') ?? metaData.ogTitle;
     }
     
-    if (metaData.img) {
-      // General defaults + some take 5 settings
-      bgImg = `url(${imgUrl})`;
-      bgSize = 'initial';
-      wrapperJustify = 'flex-start';
-      wrapperAlign = 'flex-start';
-      imgDisplay = 'flex';
-      contentAlign = 'flex-start';
-      logoWidth = 300;
-  
-      if (type === 'take5') {
-        imgWidth = 320;
-        titleFontSize = 90;
-        footerColor = 'ccc';
-        contentJustify = 'space-between';
-        bgPos = `-${imgOffset}px 0px`;
-        footerCase = 'uppercase';
-        logoDisplay = 'none';
-        headerDisplay = 'flex';
-        headerText = 'Take 5';
-        if (metaData.topic) {
-          footerText = metaData.topic;
-        }
-      } else {
-        // calculate aspect ratio for proportional resizing
-        const iconWidth = 516;
-        let iconHeight = aspectRatio(574,488,iconWidth);
-        bgSize = `${iconWidth}px ${iconHeight}px`;
-        const iconVOffset = (wrapperHeight - iconHeight)/2;
-  
-        imgWidth = iconWidth;
-        bgPos = `0px ${iconVOffset}px`;
-        titleFontSize = 70;
-        contentJustify = 'center';
-      }
-    }
-  
-    let contentWidth = wrapperWidth - imgWidth;
-  
-    let CONFIG_WRAPPER = {
-      height: '100%',
-      width: '100%',
-      display: 'flex',
-      flexWrap: 'nowrap',
-      flexDirection: 'row',
-      justifyContent: `${wrapperJustify}`,
-      // alignContent: 'stretch',
-      alignItems: `${wrapperAlign}`,
-      backgroundColor: '#222',
-      color: '#fff',
-      fontSize: '50px',
-      fontWeight: 'bold',
-      fontFamily: 'brandon-grotesque',
-      position: 'relative',
-      zIndex: 1,
-      lineHeight: 1,
-    }
-  
-    let CONFIG_IMG = {
-      display: `${imgDisplay}`,
-      order: 1,
-      flexGrow: 0,
-      flexShrink: 0,
-      alignSelf: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      width: '100%',
-      backgroundImage: `${bgImg}`,
-      backgroundColor: `#${imgBgColor}`,
-      backgroundOrigin: 'border-box',
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: `${bgPos}`,
-      backgroundSize: `${bgSize}`,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      zIndex: 2,
-    }
-  
-    let CONFIG_CONTENT = {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: `${contentJustify}`,
-      alignItems: `${contentAlign}`,
-      padding: '60px',
-      marginLeft: `${imgWidth}px`,
-      backgroundColor: `#${bgColor}`,
-      width: `${contentWidth}px`,
-      height: '100%',
-    }
-  
-    let CONFIG_TITLE = {
-      color: '#fff',
-      textTransform: 'uppercase',
-      fontSize: titleFontSize,
-    }
-  
-    let CONFIG_HEADER = {
-      color: '#000',
-      display: `${headerDisplay}`,
-    }
-  
-    let CONFIG_LOGO = {
-      display: `${logoDisplay}`,
-      width: `${logoWidth}`,
-    }
-  
-    let CONFIG_FOOTER = {
-      color: `#${footerColor}`,
-      textTransform: `${footerCase}`,
-      display: `${footerDisplay}`,
-    }
-  
-    if (debug) {
-      console.log(
-        'URL parameters: ',
-        params.toString(), '\n',
-        'CONFIG_WRAPPER =',
-        CONFIG_WRAPPER, '\n',
-        'CONFIG_IMG =',
-        CONFIG_IMG, '\n',
-        'CONFIG_CONTENT =',
-        CONFIG_CONTENT, '\n',
-        'CONFIG_HEADER =',
-        CONFIG_HEADER, '\n',
-        'CONFIG_LOGO =',
-        CONFIG_LOGO, '\n',
-        'CONFIG_TITLE =',
-        CONFIG_TITLE, '\n',
-        'CONFIG_FOOTER =',
-        CONFIG_FOOTER, '\n',
-      );
+    if (metaData.title) {
+      title = metaData.ogTitle;
     }
+    
+  }
+
+  if (params.get('title')) {
+    title = params.get('title')
+  }
   
-    // Generate the open graph image
-    return new ImageResponse(
-      (
-        <div style={CONFIG_WRAPPER}>
-          <figure style={CONFIG_IMG}></figure>
-          <section style={CONFIG_CONTENT}>
-            <header style={CONFIG_HEADER}>{headerText}</header>
-            <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
-            <h1 style={CONFIG_TITLE}>{title}</h1>
-            <div style={CONFIG_FOOTER}>{footerText}</div>
-          </section>
-        </div>
-      ),
-      {
-        width: 1200,
-        height: 628,
-        debug: debug,
-        fonts: [
-          {
-            name: 'brandon-grotesque',
-            data: fontData,
-            style: 'normal',
-          }
-        ],
+  if (imgUrl) {
+    // General defaults + some take 5 settings
+    bgImg = `url(${imgUrl})`;
+    bgSize = 'initial';
+    wrapperJustify = 'flex-start';
+    wrapperAlign = 'flex-start';
+    imgDisplay = 'flex';
+    contentAlign = 'flex-start';
+    logoWidth = 300;
+
+    if (type === 'take5') {
+      imgWidth = 320;
+      titleFontSize = 90;
+      footerColor = 'ccc';
+      contentJustify = 'space-between';
+      bgPos = `-${imgOffset}px 0px`;
+      footerCase = 'uppercase';
+      logoDisplay = 'none';
+      headerDisplay = 'flex';
+      headerText = 'Take 5';
+      if (metaData.topic) {
+        footerText = metaData.topic;
       }
+    } else {
+      // calculate aspect ratio for proportional resizing
+      const iconWidth = 516;
+      let iconHeight = aspectRatio(574,488,iconWidth);
+      bgSize = `${iconWidth}px ${iconHeight}px`;
+      const iconVOffset = (wrapperHeight - iconHeight)/2;
+
+      imgWidth = iconWidth;
+      bgPos = `0px ${iconVOffset}px`;
+      titleFontSize = 70;
+      contentJustify = 'center';
+    }
+  }
+
+  let contentWidth = wrapperWidth - imgWidth;
+
+  let CONFIG_WRAPPER = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    flexDirection: 'row',
+    justifyContent: `${wrapperJustify}`,
+    // alignContent: 'stretch',
+    alignItems: `${wrapperAlign}`,
+    backgroundColor: '#222',
+    color: '#fff',
+    fontSize: '50px',
+    fontWeight: 'bold',
+    fontFamily: 'brandon-grotesque',
+    position: 'relative',
+    zIndex: 1,
+    lineHeight: 1,
+  }
+
+  let CONFIG_IMG = {
+    display: `${imgDisplay}`,
+    order: 1,
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    backgroundImage: `${bgImg}`,
+    backgroundColor: `#${imgBgColor}`,
+    backgroundOrigin: 'border-box',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: `${bgPos}`,
+    backgroundSize: `${bgSize}`,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 2,
+  }
+
+  let CONFIG_CONTENT = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: `${contentJustify}`,
+    alignItems: `${contentAlign}`,
+    padding: '60px',
+    marginLeft: `${imgWidth}px`,
+    backgroundColor: `#${bgColor}`,
+    width: `${contentWidth}px`,
+    height: '100%',
+  }
+
+  let CONFIG_TITLE = {
+    color: '#fff',
+    textTransform: 'uppercase',
+    fontSize: titleFontSize,
+  }
+
+  let CONFIG_HEADER = {
+    color: '#000',
+    display: `${headerDisplay}`,
+  }
+
+  let CONFIG_LOGO = {
+    display: `${logoDisplay}`,
+    width: `${logoWidth}`,
+  }
+
+  let CONFIG_FOOTER = {
+    color: `#${footerColor}`,
+    textTransform: `${footerCase}`,
+    display: `${footerDisplay}`,
+  }
+
+  if (debug) {
+    console.log(
+      'URL parameters: ',
+      params.toString(), '\n',
+      'CONFIG_WRAPPER =',
+      CONFIG_WRAPPER, '\n',
+      'CONFIG_IMG =',
+      CONFIG_IMG, '\n',
+      'CONFIG_CONTENT =',
+      CONFIG_CONTENT, '\n',
+      'CONFIG_HEADER =',
+      CONFIG_HEADER, '\n',
+      'CONFIG_LOGO =',
+      CONFIG_LOGO, '\n',
+      'CONFIG_TITLE =',
+      CONFIG_TITLE, '\n',
+      'CONFIG_FOOTER =',
+      CONFIG_FOOTER, '\n',
     );
-  } catch(err) {
-    console.error(err);
   }
+
+  // Generate the open graph image
+  return new ImageResponse(
+    (
+      <div style={CONFIG_WRAPPER}>
+        <figure style={CONFIG_IMG}></figure>
+        <section style={CONFIG_CONTENT}>
+          <header style={CONFIG_HEADER}>{headerText}</header>
+          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
+          <h1 style={CONFIG_TITLE}>{title}</h1>
+          <div style={CONFIG_FOOTER}>{footerText}</div>
+        </section>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 628,
+      debug: debug,
+      fonts: [
+        {
+          name: 'brandon-grotesque',
+          data: fontData,
+          style: 'normal',
+        }
+      ],
+    }
+  );
 }

From 6780a5955ff0552a4d36d5108f32d1aad2d8508c Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 12:20:23 -0500
Subject: [PATCH 32/77] Add included_files to config

---
 netlify.toml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/netlify.toml b/netlify.toml
index 2d34f69e7..387a2445a 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -29,6 +29,9 @@ edge_functions = ".netlify/functions"
   function = "og"
   path = "/og-image"
 
+[functions."og"]
+  included_files = ["_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+
 # dev branch build
 # https://dev--gymcms.netlify.com/
 [context.dev]

From 9a8ce4713db10669a4a41cc61ef71b8761c590a0 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:03:16 -0500
Subject: [PATCH 33/77] __root instead of Deno.cwd()

---
 .netlify/functions/og.tsx | 58 ++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 5c791e566..af238d35d 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -19,7 +19,10 @@ import {
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
 
-const fontUrl = new URL(`file://${Deno.cwd()}/fonts/brandon_bld-webfont.woff`, import.meta.url);
+const __dirname = new URL('.', import.meta.url).pathname;
+const __root = `${__dirname}../../`;
+
+const fontUrl = new URL(`${__root}fonts/brandon_bld-webfont.woff`, import.meta.url);
 
 const font = fetch(fontUrl).then(
   (res) => res.arrayBuffer(),
@@ -74,7 +77,7 @@ async function loadDataFile(id: string) {
   try {
     const yaml = yamlParseAll(await Deno.readTextFile(`./_data/${fullPath}`));
     const data = yaml[0];
-    const ogTitle = data['title'] ? data['title'] : null;
+    const title = data['title'] ? data['title'] : null;
     const topic = data['topic'] ? data['topic'] : null;
     const type = data['course_type'] ? data['course_type'] : null;
     const imgBgColor = data['img_bg_color'] ? data['img_bg_color'] : null;
@@ -83,7 +86,7 @@ async function loadDataFile(id: string) {
     
     // console.log(data);
 
-    return {ogTitle, topic, imgBgColor, bgColor, img, type};
+    return {title, topic, imgBgColor, bgColor, img, type};
 
   } catch(err) {
     console.error(err);
@@ -91,9 +94,19 @@ async function loadDataFile(id: string) {
 }
 
 // TODO: get meta data file from path (for static pages without data files)
-// async function loadMetaData(path: string) {
-//   // TODO
-// }
+async function loadMetaData(path: string) {
+
+  if (path) {
+    const metaPath = path.replaceAll('"','');
+    console.log(`metaPath: ${metaPath}`);
+    try {
+      const md = await Deno.readTextFile(`.${metaPath}`);
+      return md;
+    } catch(err) {
+      console.error(err);
+    }
+  }
+}
 
 // async function loadMetaTitle(url: string) {
 //   // const resp = await fetch(url);
@@ -121,6 +134,7 @@ export default async function handler(req: Request) {
   const url = new URL(req.url);
   const params:any = new URLSearchParams(url.search);
   const id = params.get('id') ?? null;
+  const metaPath = params.get('metapath') ?? null;
   let bgColor = params.get('bg') ?? '222';
   let imgBgColor = params.get('imgbg') ?? '222';
   const courseNum: any = params.get('courseNum') ?? false;
@@ -129,7 +143,7 @@ export default async function handler(req: Request) {
   let footerText = params.get('footer') ?? 'thegymnasium.com';
   // const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath: any;
-  let metaPath: any;
+  let title: any;
   let type: any;
   let metaData: any;
   let hideFooter: boolean = false;
@@ -185,12 +199,25 @@ export default async function handler(req: Request) {
       if (metaData.bgColor) {
         bgColor = metaData.bgColor;
       }
+
+      if (metaData.type) {
+        type = metaData.type;
+      }
+      
+      if (metaData.title) {
+        title = metaData.title;
+      }
       
     } catch(err) {
       console.error(err);
     }
   }
 
+  if (metaPath) {
+    metaData = await loadMetaData(metaPath);
+    console.log(`metaData from meta file: ${metaData}`)
+  }
+
   // defaults
   const wrapperWidth = 1200;
   const wrapperHeight = 628;
@@ -211,30 +238,17 @@ export default async function handler(req: Request) {
   let wrapperAlign = 'center';
   let wrapperJustify = 'center';
 
-  // Allow override of title via url params
-  let title;
-
   // Permit hiding the footer (?footer=false)
   if (hideFooter === true) {
     footerDisplay = 'none';
   }
 
   let imgUrl;
+
   if (imgPath) {
-    imgUrl = `file://${Deno.cwd()}${imgPath}`;
+    imgUrl = `file://${__root}${imgPath}`;
   }
   
-  if (metaData) {
-    if (metaData.type) {
-      type = metaData.type;
-    }
-    
-    if (metaData.title) {
-      title = metaData.ogTitle;
-    }
-    
-  }
-
   if (params.get('title')) {
     title = params.get('title')
   }

From c6b61e1b8923b7db9816d27432bc4e0e0b971dab Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 13:03:26 -0500
Subject: [PATCH 34/77] Add font to included_files

---
 netlify.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netlify.toml b/netlify.toml
index 387a2445a..05beb51c5 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -30,7 +30,7 @@ edge_functions = ".netlify/functions"
   path = "/og-image"
 
 [functions."og"]
-  included_files = ["_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+  included_files = ["/fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
 
 # dev branch build
 # https://dev--gymcms.netlify.com/

From 023a9ffb9f8005c0968dacdc32b11e61e36d88a8 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:19:08 -0500
Subject: [PATCH 35/77] Read meta.md files by path

---
 .netlify/functions/og.tsx | 105 ++++++++++++++++++++++++--------------
 1 file changed, 67 insertions(+), 38 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index af238d35d..a00edb277 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -77,19 +77,22 @@ async function loadDataFile(id: string) {
   try {
     const yaml = yamlParseAll(await Deno.readTextFile(`./_data/${fullPath}`));
     const data = yaml[0];
-    const title = data['title'] ? data['title'] : null;
-    const topic = data['topic'] ? data['topic'] : null;
-    const type = data['course_type'] ? data['course_type'] : null;
-    const imgBgColor = data['img_bg_color'] ? data['img_bg_color'] : null;
-    const bgColor = data['bg_color'] ? data['bg_color'] : null;
-    const img = data['poster_art'] ? data['poster_art'] : 'none';
+    const title = data['title'] ?? null;
+    const topic = data['topic'] ?? null;
+    const type = data['course_type'] ?? null;
+    const imgBgColor = data['img_bg_color'] ?? null;
+    const bgColor = data['bg_color'] ?? null;
+    const img = data['poster_art'] ?? 'none';
     
     // console.log(data);
 
     return {title, topic, imgBgColor, bgColor, img, type};
 
-  } catch(err) {
-    console.error(err);
+  } catch(e: any) {
+    console.warn(`${e.message}`);
+    return new Response(`Failed loading data file.`, {
+      status: 500,
+    });
   }
 }
 
@@ -97,13 +100,27 @@ async function loadDataFile(id: string) {
 async function loadMetaData(path: string) {
 
   if (path) {
-    const metaPath = path.replaceAll('"','');
+    path = path.replace(/['"]+/g, '');
+    const metaPath = `${path}meta.md`;
     console.log(`metaPath: ${metaPath}`);
     try {
-      const md = await Deno.readTextFile(`.${metaPath}`);
-      return md;
-    } catch(err) {
-      console.error(err);
+      const yaml = yamlParseAll(await Deno.readTextFile(`.${metaPath}`));
+      const data = yaml[0];
+      const title = data['og_title'] ?? null;
+      const topic = data['topic'] ?? null;
+      const type = 'static';
+      const imgBgColor = data['img_bg_color'] ?? null;
+      const bgColor = data['bg_color'] ?? null;
+      const img = data['poster_art'] ?? null;
+      
+      console.log(data);
+  
+      return {title, topic, imgBgColor, bgColor, img, type};
+    } catch(e: any) {
+      console.warn(`${e.message}`);
+      return new Response(`Failed loading meta file.`, {
+        status: 500,
+      });
     }
   }
 }
@@ -181,41 +198,53 @@ export default async function handler(req: Request) {
     try {
       metaData = await loadDataFile(`gym-${courseNum}`);
       imgPath = metaData.img;
-    } catch(err) {
-      console.error(err);
+    } catch(e: any) {
+      console.warn(`${e.message}`);
+      return new Response(`Invalid course number (course data not found)`, {
+        status: 500,
+      });
     }
   }
 
   // TODO: refactor courseNum to use id
   if (id) {
     try {
-      metaData = await loadDataFile(id);
-      if (metaData.img) {
-        imgPath = metaData.img;
-      }
-      if (metaData.imgBgColor) {
-        imgBgColor = metaData.imgBgColor;
-      }
-      if (metaData.bgColor) {
-        bgColor = metaData.bgColor;
-      }
-
-      if (metaData.type) {
-        type = metaData.type;
-      }
-      
-      if (metaData.title) {
-        title = metaData.title;
-      }
-      
-    } catch(err) {
-      console.error(err);
+      metaData = await loadDataFile(id);      
+    } catch(e: any) {
+      console.warn(`${e.message}`);
+      return new Response(`Invalid id (data file not found)`, {
+        status: 500,
+      });
     }
   }
 
   if (metaPath) {
-    metaData = await loadMetaData(metaPath);
-    console.log(`metaData from meta file: ${metaData}`)
+    try {
+      metaData = await loadMetaData(metaPath);     
+    } catch(e: any) {
+      console.warn(`${e.message}`);
+      return new Response(`Invalid meta path (file not found)`, {
+        status: 500,
+      });
+    }
+  }
+
+  if (metaData) {
+    if (metaData.img) {
+      imgPath = metaData.img;
+    }
+    if (metaData.imgBgColor) {
+      imgBgColor = metaData.imgBgColor;
+    }
+    if (metaData.bgColor) {
+      bgColor = metaData.bgColor;
+    }
+    if (metaData.type) {
+      type = metaData.type;
+    }
+    if (metaData.title) {
+      title = metaData.title;
+    }
   }
 
   // defaults

From 78fac7651a8a5ae03e836907c43f527a50b223cf Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:45:47 -0500
Subject: [PATCH 36/77] Add testing edge function

---
 .netlify/functions/test.tsx | 88 +++++++++++++++++++++++++++++++++++++
 netlify.toml                |  9 +++-
 2 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 .netlify/functions/test.tsx

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
new file mode 100644
index 000000000..4c7014c91
--- /dev/null
+++ b/.netlify/functions/test.tsx
@@ -0,0 +1,88 @@
+import React from "https://esm.sh/react@18.2.0";
+import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+
+const fontUrl = new URL(`https://deploy-preview-832--thegymcms.netlify.app/fonts/brandon_bld-webfont.woff`, import.meta.url);
+
+const font = fetch(fontUrl).then(
+  (res) => res.arrayBuffer(),
+);
+
+export default async function handler(req: Request) {
+  try {
+    const fontData = await font;
+    const url = new URL(req.url);
+    const params:any = new URLSearchParams(url.search);
+
+    // ?title=<title>
+    const hasTitle = params.has("title");
+    const title = hasTitle
+      ? params.get("title") : "Testing Playground";
+
+    return new ImageResponse(
+      <div
+        style={{
+          backgroundColor: "black",
+          backgroundSize: "150px 150px",
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          textAlign: "center",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          flexWrap: "nowrap",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            alignContent: "center",
+            justifyContent: "center",
+            justifyItems: "center",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            alt="Circle"
+            height={200}
+            src="data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E"
+            style={{ margin: "0 30px" }}
+            width={200}
+          />
+        </div>
+        <div
+          style={{
+            fontFamily: 'brandon-grotesque',
+            fontSize: 60,
+            fontStyle: "normal",
+            letterSpacing: "-0.025em",
+            color: "white",
+            marginTop: 30,
+            padding: "0 120px",
+            lineHeight: 1.4,
+            whiteSpace: "pre-wrap",
+          }}
+        >
+          {title}
+        </div>
+      </div>,
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'brandon-grotesque',
+            data: fontData,
+            style: 'normal',
+          }
+        ],
+      },
+    );
+  } catch (e: any) {
+    console.log(`${e.message}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}
diff --git a/netlify.toml b/netlify.toml
index 05beb51c5..8f7d13c2f 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -29,8 +29,15 @@ edge_functions = ".netlify/functions"
   function = "og"
   path = "/og-image"
 
+[[edge_functions]]
+  function = "test"
+  path = "/test"
+
 [functions."og"]
-  included_files = ["/fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+  included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+
+[functions."test"]
+  included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
 
 # dev branch build
 # https://dev--gymcms.netlify.com/

From f646a0cd18aac058562357d88e99269387b3a2bd Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:52:03 -0500
Subject: [PATCH 37/77] Update test.tsx

---
 .netlify/functions/test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index 4c7014c91..efe36c119 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -1,9 +1,7 @@
 import React from "https://esm.sh/react@18.2.0";
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
 
-const fontUrl = new URL(`https://deploy-preview-832--thegymcms.netlify.app/fonts/brandon_bld-webfont.woff`, import.meta.url);
-
-const font = fetch(fontUrl).then(
+const font = fetch('https://deploy-preview-832--thegymcms.netlify.app/fonts/brandon_bld-webfont.woff').then(
   (res) => res.arrayBuffer(),
 );
 

From 549e3d8deeb78df5256a8351e7a481375e74f86d Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:09:58 -0500
Subject: [PATCH 38/77] Test: Use deno.readFile

---
 .netlify/functions/test.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index efe36c119..6583ea8c4 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -1,13 +1,22 @@
 import React from "https://esm.sh/react@18.2.0";
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+// import { serve } from "https://deno.land/std/http/server.ts";
 
-const font = fetch('https://deploy-preview-832--thegymcms.netlify.app/fonts/brandon_bld-webfont.woff').then(
-  (res) => res.arrayBuffer(),
-);
+// const font = fetch('http://localhost:8888/fonts/brandon_bld-webfont.woff').then(
+//   (res) => res.arrayBuffer(),
+// );
+function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
+  return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
+}
+
+const __root = Deno.cwd();
+
+const font = await Deno.readFile(`${__root}/fonts/brandon_bld-webfont.woff`);
+const buffer = Uint8ArrayToArrayBuffer(font);
 
 export default async function handler(req: Request) {
   try {
-    const fontData = await font;
+    const fontData = await buffer;
     const url = new URL(req.url);
     const params:any = new URLSearchParams(url.search);
 

From c2baa28780a12a9e00faabd834d0939b40fab581 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:23:29 -0500
Subject: [PATCH 39/77] Update netlify.toml

---
 netlify.toml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/netlify.toml b/netlify.toml
index 8f7d13c2f..5cfcc1e88 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -33,11 +33,11 @@ edge_functions = ".netlify/functions"
   function = "test"
   path = "/test"
 
-[functions."og"]
-  included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+# [functions."og"]
+#   included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
 
-[functions."test"]
-  included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
+# [functions."test"]
+#   included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
 
 # dev branch build
 # https://dev--gymcms.netlify.com/

From 84064219442de067387da41cfa611d6d2180d45f Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:30:22 -0500
Subject: [PATCH 40/77] Update test.tsx

---
 .netlify/functions/test.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index 6583ea8c4..5818bb0f0 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -9,13 +9,10 @@ function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
   return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
 }
 
-const __root = Deno.cwd();
-
-const font = await Deno.readFile(`${__root}/fonts/brandon_bld-webfont.woff`);
-const buffer = Uint8ArrayToArrayBuffer(font);
-
 export default async function handler(req: Request) {
   try {
+    const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
+    const buffer = Uint8ArrayToArrayBuffer(font);
     const fontData = await buffer;
     const url = new URL(req.url);
     const params:any = new URLSearchParams(url.search);

From fd5c5dbbde6c4ad3d531b3fe301edaf07bed103d Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 15:56:15 -0500
Subject: [PATCH 41/77] Update test.tsx

---
 .netlify/functions/test.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index 5818bb0f0..30e5b9687 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -1,19 +1,20 @@
 import React from "https://esm.sh/react@18.2.0";
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
-// import { serve } from "https://deno.land/std/http/server.ts";
 
-// const font = fetch('http://localhost:8888/fonts/brandon_bld-webfont.woff').then(
-//   (res) => res.arrayBuffer(),
-// );
 function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
   return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
 }
 
 export default async function handler(req: Request) {
   try {
-    const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
-    const buffer = Uint8ArrayToArrayBuffer(font);
-    const fontData = await buffer;
+    const font = fetch('https://thegymcms.com/fonts/brandon_bld-webfont.woff').then(
+      (res) => res.arrayBuffer(),
+    );
+
+    // const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
+    // const buffer = Uint8ArrayToArrayBuffer(font);
+    const fontData = await font;
+
     const url = new URL(req.url);
     const params:any = new URLSearchParams(url.search);
 

From 18dd4cfb880c5c94e009d083a3c47db2035b32cc Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:17:28 -0500
Subject: [PATCH 42/77] Read headers for host name

---
 .netlify/functions/test.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index 30e5b9687..bbe36bdb3 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -1,13 +1,18 @@
-import React from "https://esm.sh/react@18.2.0";
+import React from "https://esm.sh/react";
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
+import { Context } from "https://edge.netlify.com";
 
 function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
   return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
 }
 
-export default async function handler(req: Request) {
+export default async (req: Request, context: Context) => {
   try {
-    const font = fetch('https://thegymcms.com/fonts/brandon_bld-webfont.woff').then(
+    const headers= req.headers;
+    const domain = headers.get('host');
+    const protocol = req.url.split(':')[0];
+
+    const font = fetch(`${protocol}://${domain}/fonts/brandon_bld-webfont.woff`).then(
       (res) => res.arrayBuffer(),
     );
 

From a2a6a0c8dc932a21b6b54dd5b168cc0f47cb9a86 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:25:15 -0500
Subject: [PATCH 43/77] Disable og function

---
 netlify.toml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/netlify.toml b/netlify.toml
index 5cfcc1e88..1586ea713 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -25,9 +25,9 @@
 [build]
 edge_functions = ".netlify/functions"
 
-[[edge_functions]]
-  function = "og"
-  path = "/og-image"
+# [[edge_functions]]
+#   function = "og"
+#   path = "/og-image"
 
 [[edge_functions]]
   function = "test"

From f42033f76a9c33fb18a680d14e752fc3f045ad55 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:36:58 -0500
Subject: [PATCH 44/77] simplify

---
 .netlify/functions/test.tsx | 23 ++++++++++++++---------
 netlify.toml                |  4 ++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index bbe36bdb3..c1a2dd626 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -8,20 +8,25 @@ function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
 
 export default async (req: Request, context: Context) => {
   try {
-    const headers= req.headers;
-    const domain = headers.get('host');
-    const protocol = req.url.split(':')[0];
+    const url = new URL(req.url);
+    const params:any = new URLSearchParams(url.search);
+    let fontData:any;
 
-    const font = fetch(`${protocol}://${domain}/fonts/brandon_bld-webfont.woff`).then(
-      (res) => res.arrayBuffer(),
-    );
+    try {
+      fontData = await fetch(`${url.origin}/fonts/brandon_bld-webfont.woff`).then(
+        (res) => res.arrayBuffer(),
+      );
+    } catch(e:any) {
+      console.log(`${e.message}`);
+      return new Response(`Failed to get font`, {
+        status: 500,
+      });
+    }
+    
 
     // const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
     // const buffer = Uint8ArrayToArrayBuffer(font);
-    const fontData = await font;
 
-    const url = new URL(req.url);
-    const params:any = new URLSearchParams(url.search);
 
     // ?title=<title>
     const hasTitle = params.has("title");
diff --git a/netlify.toml b/netlify.toml
index 1586ea713..67aab8c7d 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -26,8 +26,8 @@
 edge_functions = ".netlify/functions"
 
 # [[edge_functions]]
-#   function = "og"
-#   path = "/og-image"
+  function = "og"
+  path = "/og-image"
 
 [[edge_functions]]
   function = "test"

From 39092beb6fe0897e2c16b3de5ee322a602caff9b Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:44:59 -0500
Subject: [PATCH 45/77] does it work w/o a font?

---
 .netlify/functions/test.tsx | 37 +++++++++++++++++++------------------
 netlify.toml                |  2 +-
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
index c1a2dd626..7accadb64 100644
--- a/.netlify/functions/test.tsx
+++ b/.netlify/functions/test.tsx
@@ -12,17 +12,18 @@ export default async (req: Request, context: Context) => {
     const params:any = new URLSearchParams(url.search);
     let fontData:any;
 
-    try {
-      fontData = await fetch(`${url.origin}/fonts/brandon_bld-webfont.woff`).then(
-        (res) => res.arrayBuffer(),
-      );
-    } catch(e:any) {
-      console.log(`${e.message}`);
-      return new Response(`Failed to get font`, {
-        status: 500,
-      });
-    }
-    
+    const origin = url.origin;
+
+    // try {
+    //   fontData = await fetch(`https://thegymcms.com/fonts/brandon_bld-webfont.woff`).then(
+    //     (res) => res.arrayBuffer(),
+    //   );
+    // } catch(e:any) {
+    //   console.log(`${e.message}`);
+    //   return new Response(`Failed to get font`, {
+    //     status: 500,
+    //   });
+    // }
 
     // const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
     // const buffer = Uint8ArrayToArrayBuffer(font);
@@ -85,13 +86,13 @@ export default async (req: Request, context: Context) => {
       {
         width: 1200,
         height: 630,
-        fonts: [
-          {
-            name: 'brandon-grotesque',
-            data: fontData,
-            style: 'normal',
-          }
-        ],
+        // fonts: [
+        //   {
+        //     name: 'brandon-grotesque',
+        //     data: fontData,
+        //     style: 'normal',
+        //   }
+        // ],
       },
     );
   } catch (e: any) {
diff --git a/netlify.toml b/netlify.toml
index 67aab8c7d..5cfcc1e88 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -25,7 +25,7 @@
 [build]
 edge_functions = ".netlify/functions"
 
-# [[edge_functions]]
+[[edge_functions]]
   function = "og"
   path = "/og-image"
 

From c6e0d1adc5dd5052e75b9af4bd3c1c6500c83fe4 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 18:23:46 -0500
Subject: [PATCH 46/77] Create custom data feed

---
 feeds/data.json | 93 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 feeds/data.json

diff --git a/feeds/data.json b/feeds/data.json
new file mode 100644
index 000000000..51561d48e
--- /dev/null
+++ b/feeds/data.json
@@ -0,0 +1,93 @@
+---
+layout: null
+permalink: /feeds/data.json
+---
+{%- if site.data -%}
+{
+  "title": "Gymnasium Edge Function Data Feed",
+  "feed_url": "{{site.url}}{{page.permalink}}",
+  "date_modified": "{{ site.time | date_to_xmlschema }}",
+  "courses":[
+    {%- assign sorted = site.data.courses | sort: course_id -%}
+    {%- for hash in sorted -%}
+      {%- assign id = hash[0] -%}
+      {%- assign item = hash[1] -%}
+      {
+        "id": "{{ id }}",
+        "title": "{{ item.title }}",
+        "type": "{{ item.course_type }}",
+        "topic": "{{ item.topic }}",
+        "img": "{{ item.poster_art | replace: 'png', 'svg' }}",
+        "img_offset": "{{ item.img_offset }}",
+        "img_bg_color": "{{ item.img_bg_color }}",
+        "bg_color": "{{ item.bg_color }}"
+      },
+    {%- endfor -%}
+
+    {%- assign sorted = site.data.workshops | sort: course_id -%}
+    {%- for hash in sorted -%}
+      {%- assign id = hash[0] -%}
+      {%- assign item = hash[1] -%}
+      {
+        "id": "{{ id }}",
+        "title": "{{ item.title }}",
+        "type": "{{ item.course_type }}",
+        "topic": "{{ item.topic }}",
+        "img": "{{ item.poster_art | replace: 'png', 'svg' }}",
+        "img_offset": "{{ item.img_offset }}",
+        "img_bg_color": "{{ item.img_bg_color }}",
+        "bg_color": "{{ item.bg_color }}"
+      }, 
+    {%- endfor -%}
+
+    {%- assign sorted = site.data.take5 | sort: course_id -%}
+    {%- for hash in sorted -%}
+      {%- assign id = hash[0] -%}
+      {%- assign item = hash[1] -%}
+      {
+        "id": "{{ id }}",
+        "title": "{{ item.title }}",
+        "type": "{{ item.course_type }}",
+        "topic": "{{ item.topic }}",
+        "img": "{{ item.poster_art }}",
+        "img_offset": "{{ item.img_offset }}",
+        "img_bg_color": "{{ item.img_bg_color }}",
+        "bg_color": "{{ item.bg_color }}"
+      }
+      {%- if forloop.index != forloop.length -%},{%- endif -%}
+    {%- endfor -%}
+  ],
+  "webinars":[
+    {%- assign sorted = site.data.webinars | sort: event_ID -%}
+    {%- for hash in sorted -%}
+      {%- assign id = hash[0] -%}
+      {%- assign item = hash[1] -%}
+      {
+        "id": "{{ id | slice: 0,7 }}",
+        "title": "{{ item.event_title | strip_html }}",
+        "type": "webinar",
+        "topic": "{{ item.topic | strip_html }}",
+        "img": "/img/social/webinars/{{ item.event_ogimage }}",
+        "img_offset": "{{ item.img_offset }}",
+        "img_bg_color": "{{ item.img_bg_color }}",
+        "bg_color": "{{ item.bg_color }}"
+      }
+      {%- if forloop.index != forloop.length -%},{%- endif -%}
+    {%- endfor -%}
+  ]
+  {%- assign sortedpages = site.pages | where_exp: 'page', "page.url contains '/courses/'" | sort: "url" -%}
+
+  {%-comment-%}
+  "static":[
+    {%- for page in sortedpages -%}
+      {%- if page.url contains '/meta/' -%}
+        {{ page | replace: "=>", ":" }}
+      {%- endif -%}
+    {%- endfor -%}
+  ]
+  {%-endcomment-%}
+}
+{%- else -%}
+{"error": "no JSON feed found!"}
+{%- endif -%}
+

From 141daa1ca39bb8802d3abfcdf22303192cc704e7 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 20 Jan 2023 18:24:13 -0500
Subject: [PATCH 47/77] update local logic

---
 index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.md b/index.md
index a408ae46f..7a359a1d2 100644
--- a/index.md
+++ b/index.md
@@ -3,7 +3,7 @@ title: thegymcms
 layout: default
 ---
 
-{% if site.url == "http://0.0.0.0:4000" %}
+{% if site.url == "http://0.0.0.0:4000" or site.url == "http://localhost:4000" %}
 # Local Development
 {% else %}
 # {{ site.url }}

From 2a7f19bcbde2af986ce4310a0ecd9be50ffa5ddd Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 23 Jan 2023 11:19:04 -0500
Subject: [PATCH 48/77] home meta image path

---
 home/meta.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/home/meta.md b/home/meta.md
index b9f83ebdf..a3d6154ed 100644
--- a/home/meta.md
+++ b/home/meta.md
@@ -6,6 +6,7 @@ catalog: false
 og_title: "Aquent Gymnasium"
 og_description: "Design a career you love with free online courses on design, development, accessibility, prototyping, UX, and career skills."
 og_keywords: "free online courses designers design user experience UX javascript node nodejs sketch wordpress drupal UI"
-og_art: /img/brand/og/gym-brand-og.png
+# og_art: /img/brand/og/gym-brand-og.png
+og_art: /og-image?metapath="/home/"
 og_url: https://thegymnasium.com
 ---

From dfad7819b31a9f6b507ddf3862a91c178d183723 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 23 Jan 2023 17:22:10 -0500
Subject: [PATCH 49/77] remove svg bg img support

For some reason, it's breaking everything
---
 feeds/data.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feeds/data.json b/feeds/data.json
index 51561d48e..d65948ab1 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -17,7 +17,7 @@ permalink: /feeds/data.json
         "title": "{{ item.title }}",
         "type": "{{ item.course_type }}",
         "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art | replace: 'png', 'svg' }}",
+        "img": "{{ item.poster_art }}",
         "img_offset": "{{ item.img_offset }}",
         "img_bg_color": "{{ item.img_bg_color }}",
         "bg_color": "{{ item.bg_color }}"

From a1df8d29fd68aadbd3342a80aa378b7f91e8cdba Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 23 Jan 2023 17:22:34 -0500
Subject: [PATCH 50/77] Working with JSON?

---
 .netlify/functions/og.tsx | 233 +++++++++-----------------------------
 1 file changed, 52 insertions(+), 181 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index a00edb277..9638d8df0 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,166 +1,70 @@
 import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
-import { DOMParser } from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
-import { basename, dirname } from 'https://deno.land/std/path/mod.ts';
-import { Buffer } from "https://deno.land/std/io/buffer.ts";
-import { readableStreamFromReader } from "https://deno.land/std@0.140.0/streams/conversion.ts";
-
-// import { ProfanityEngine } from 'npm:@coffeeandfun/google-profanity-words';
-
-import {
-  // parse as yamlParse,
-  parseAll as yamlParseAll,
-  // stringify as yamlStringify,
-} from 'https://deno.land/std/encoding/yaml.ts';
-
 
 // $gym-green: #2c9959;
 // $gym-magenta: #d73158;
 // $gym-purple: #764c9f;
 // $gym-teal: #5ca5a0;
 
-const __dirname = new URL('.', import.meta.url).pathname;
-const __root = `${__dirname}../../`;
-
-const fontUrl = new URL(`${__root}fonts/brandon_bld-webfont.woff`, import.meta.url);
-
-const font = fetch(fontUrl).then(
-  (res) => res.arrayBuffer(),
-);
-
-// Get a full file name if we only have the first part
-async function getFileName(currentPath: string, fileFragment: string) {
-
+// Parse Data File
+async function getData(domain: string, id:string) {
   try {
-    for await (const dirEntry of Deno.readDir(currentPath)) {
-      // console.log(dirEntry);
-      const fileName = dirEntry.name.startsWith(fileFragment) &&  dirEntry.isFile ? dirEntry.name : false;
-      
-      if (fileName) {
-        console.log(fileName);
-        return fileName;
-      }
-    }
-  } catch(err) {
-    console.error(err);
-  }
-}
+    const JSON = await fetch(`${domain}/feeds/data.json`);
+    const data = await JSON.json();
+    let itemData: any;
 
-// Parse YAML data file!
-async function loadDataFile(id: string) {
-  // TODO: process incoming ID and determine data file path based on ID
-  const lowerId = id.toLowerCase();
-  const upperId = id.toUpperCase();
-  let pathFragment:any = '';
-  let fullPath:string = '';
-
-  if (lowerId.startsWith('gym')) {
-
-    const checkId = id.match(/\d+/);
-    const numericId = checkId !== null ? parseInt(checkId, 10) : ()=> {return false};
-
-    if (numericId < 700) {
-      pathFragment = 'courses';
-    } else if (numericId >= 700 && numericId < 800) {
-      pathFragment = 'workshops';
-    } else if (numericId >= 5000) {
-      pathFragment = 'take5';
+    let type = 'courses';
+    // console.log(Object.entries(data));
+
+    if (id.toLowerCase().startsWith('web')) {
+      type = 'webinars';
     }
 
-    fullPath = `${pathFragment}/${upperId}.yml`;
+    Object.entries(data[type]).map(obj => {
+      const item:any = obj[1];
 
-  } else if (lowerId.startsWith('web')) {
-    let fileName = await getFileName('./_data/webinars/', lowerId);
-    fullPath = `webinars/${fileName}`;
-  }
+      if (id.toLowerCase() === item['id'].toLowerCase()) {
+        itemData = item;
+      }
+    });
 
-  try {
-    const yaml = yamlParseAll(await Deno.readTextFile(`./_data/${fullPath}`));
-    const data = yaml[0];
-    const title = data['title'] ?? null;
-    const topic = data['topic'] ?? null;
-    const type = data['course_type'] ?? null;
-    const imgBgColor = data['img_bg_color'] ?? null;
-    const bgColor = data['bg_color'] ?? null;
-    const img = data['poster_art'] ?? 'none';
-    
-    // console.log(data);
-
-    return {title, topic, imgBgColor, bgColor, img, type};
-
-  } catch(e: any) {
+    return itemData;
+  } catch(e:any) {
     console.warn(`${e.message}`);
-    return new Response(`Failed loading data file.`, {
+    return new Response(`Couldn't find matching id!`, {
       status: 500,
     });
   }
 }
 
-// TODO: get meta data file from path (for static pages without data files)
-async function loadMetaData(path: string) {
-
-  if (path) {
-    path = path.replace(/['"]+/g, '');
-    const metaPath = `${path}meta.md`;
-    console.log(`metaPath: ${metaPath}`);
-    try {
-      const yaml = yamlParseAll(await Deno.readTextFile(`.${metaPath}`));
-      const data = yaml[0];
-      const title = data['og_title'] ?? null;
-      const topic = data['topic'] ?? null;
-      const type = 'static';
-      const imgBgColor = data['img_bg_color'] ?? null;
-      const bgColor = data['bg_color'] ?? null;
-      const img = data['poster_art'] ?? null;
-      
-      console.log(data);
-  
-      return {title, topic, imgBgColor, bgColor, img, type};
-    } catch(e: any) {
-      console.warn(`${e.message}`);
-      return new Response(`Failed loading meta file.`, {
-        status: 500,
-      });
-    }
-  }
-}
-
-// async function loadMetaTitle(url: string) {
-//   // const resp = await fetch(url);
-//   const resp = await Deno.readFile(`./${url}`);
-//   const html = await resp.text();
-//   const parser = new DOMParser();
-//   const htmlDoc = parser.parseFromString(html, 'text/html');
-//   const metaTitle = htmlDoc.querySelector('[property="og:title"]');
-//   const ogTitle = metaTitle.getAttribute('content');
-//   const topic = metaTitle.getAttribute('data-topic');
-//   return {ogTitle, topic};
-// }
-
 // Calculate aspect ratio of a resized image, assuming one knows the initial dimensions
-function aspectRatio(width:number, height:number, newWidth:number) {
+async function aspectRatio(width:number, height:number, newWidth:number) {
   let ratio = height/width;
 
   return newWidth * ratio; 
 }
 
 export default async function handler(req: Request) {
-  const fontData = await font;
+  const url = new URL(req.url);
+  const domain = url.origin;
+
+  // load webfont
+  const fontData = await fetch(`${domain}/fonts/brandon_bld-webfont.woff`).then(
+    (res) => res.arrayBuffer(),
+  );
 
   // Get the query parameters from the request
-  const url = new URL(req.url);
   const params:any = new URLSearchParams(url.search);
   const id = params.get('id') ?? null;
-  const metaPath = params.get('metapath') ?? null;
   let bgColor = params.get('bg') ?? '222';
   let imgBgColor = params.get('imgbg') ?? '222';
-  const courseNum: any = params.get('courseNum') ?? false;
-  const imgOffset:any = Math.abs(params.get('offset')) ?? 0;
+  let imgOffset:any = Math.abs(params.get('offset')) ?? 0;
   let titleFontSize = 50;
   let footerText = params.get('footer') ?? 'thegymnasium.com';
   // const pubDate = params.get('pubDate') ?? new Date().toISOString();
   let imgPath: any;
   let title: any;
+  let topic: any;
   let type: any;
   let metaData: any;
   let hideFooter: boolean = false;
@@ -176,40 +80,11 @@ export default async function handler(req: Request) {
     hideFooter = true;
   }
 
-  // TODO: refactor courseNum to use id
-  // If we have a course number, grab specific data
-  if (courseNum) {
-    // if (courseNum < 100) {
-    //   type = 'gym-shorts';
-    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    // } else if (courseNum >= 100 && courseNum < 700) {
-    //   type = 'full';
-    //   imgPath = `/img/course-artwork/svg/gym-${courseNum}.svg`;
-    // } else if (courseNum >= 700 && courseNum < 800) {
-    //   type = 'workshops';
-    //   imgPath = null;
-    // } else if (courseNum >= 5000) {
-    //   type = 'take5';
-    //   imgPath = `/img/take5/posters/gym-${courseNum}.jpg`;
-    // }
-
-    // metaPath = `/courses/${type}/GYM-${courseNum}/meta.md`;
-
-    try {
-      metaData = await loadDataFile(`gym-${courseNum}`);
-      imgPath = metaData.img;
-    } catch(e: any) {
-      console.warn(`${e.message}`);
-      return new Response(`Invalid course number (course data not found)`, {
-        status: 500,
-      });
-    }
-  }
-
   // TODO: refactor courseNum to use id
   if (id) {
     try {
-      metaData = await loadDataFile(id);      
+      metaData = await getData(domain, id);
+      console.log(metaData);
     } catch(e: any) {
       console.warn(`${e.message}`);
       return new Response(`Invalid id (data file not found)`, {
@@ -218,26 +93,19 @@ export default async function handler(req: Request) {
     }
   }
 
-  if (metaPath) {
-    try {
-      metaData = await loadMetaData(metaPath);     
-    } catch(e: any) {
-      console.warn(`${e.message}`);
-      return new Response(`Invalid meta path (file not found)`, {
-        status: 500,
-      });
-    }
-  }
-
   if (metaData) {
     if (metaData.img) {
       imgPath = metaData.img;
+      console.log(imgPath);
+    }
+    if (metaData.img_bg_color) {
+      imgBgColor = metaData.img_bg_color;
     }
-    if (metaData.imgBgColor) {
-      imgBgColor = metaData.imgBgColor;
+    if (metaData.img_offset) {
+      imgOffset = metaData.img_offset;
     }
-    if (metaData.bgColor) {
-      bgColor = metaData.bgColor;
+    if (metaData.bg_color) {
+      bgColor = metaData.bg_color;
     }
     if (metaData.type) {
       type = metaData.type;
@@ -245,6 +113,9 @@ export default async function handler(req: Request) {
     if (metaData.title) {
       title = metaData.title;
     }
+    if (metaData.topic) {
+      topic = metaData.topic;
+    }
   }
 
   // defaults
@@ -252,8 +123,8 @@ export default async function handler(req: Request) {
   const wrapperHeight = 628;
   let imgDisplay = 'none';
   let imgWidth = 0;
-  let bgImg = '';
-  let bgSize = '';
+  let bgImg = 'none';
+  let bgSize = 'contain';
   let bgPos = '0 0';
   let contentAlign = 'center';
   let contentJustify = 'center';
@@ -272,20 +143,20 @@ export default async function handler(req: Request) {
     footerDisplay = 'none';
   }
 
-  let imgUrl;
+  let imgUrl:any;
 
   if (imgPath) {
-    imgUrl = `file://${__root}${imgPath}`;
+    imgUrl = `${domain}${imgPath}`;
   }
-  
+
   if (params.get('title')) {
     title = params.get('title')
   }
   
   if (imgUrl) {
     // General defaults + some take 5 settings
-    bgImg = `url(${imgUrl})`;
-    bgSize = 'initial';
+    bgImg = `url('${imgUrl}')`;
+    bgSize = '100%';
     wrapperJustify = 'flex-start';
     wrapperAlign = 'flex-start';
     imgDisplay = 'flex';
@@ -302,13 +173,13 @@ export default async function handler(req: Request) {
       logoDisplay = 'none';
       headerDisplay = 'flex';
       headerText = 'Take 5';
-      if (metaData.topic) {
-        footerText = metaData.topic;
+      if (topic) {
+        footerText = topic;
       }
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
-      let iconHeight = aspectRatio(574,488,iconWidth);
+      let iconHeight = await aspectRatio(574,488,iconWidth);
       bgSize = `${iconWidth}px ${iconHeight}px`;
       const iconVOffset = (wrapperHeight - iconHeight)/2;
 

From 04054accf55cc74ad585276370ad182924ca45cc Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 24 Jan 2023 16:41:53 -0500
Subject: [PATCH 51/77] prep take5 data files

---
 _data/take5/GYM-5001.yml | 3 +++
 _data/take5/GYM-5002.yml | 3 +++
 _data/take5/GYM-5003.yml | 3 +++
 _data/take5/GYM-5004.yml | 3 +++
 _data/take5/GYM-5005.yml | 3 +++
 _data/take5/GYM-5006.yml | 3 +++
 _data/take5/GYM-5007.yml | 3 +++
 _data/take5/GYM-5008.yml | 3 +++
 _data/take5/GYM-5009.yml | 3 +++
 _data/take5/GYM-5010.yml | 3 +++
 _data/take5/GYM-5011.yml | 3 +++
 _data/take5/GYM-5012.yml | 3 +++
 _data/take5/GYM-5013.yml | 3 +++
 _data/take5/GYM-5014.yml | 3 +++
 _data/take5/GYM-5015.yml | 3 +++
 _data/take5/GYM-5016.yml | 3 +++
 _data/take5/GYM-5017.yml | 3 +++
 _data/take5/GYM-5018.yml | 3 +++
 _data/take5/GYM-5019.yml | 3 +++
 _data/take5/GYM-5020.yml | 3 +++
 _data/take5/GYM-5021.yml | 3 +++
 _data/take5/GYM-5022.yml | 3 +++
 _data/take5/GYM-5023.yml | 3 +++
 _data/take5/GYM-5024.yml | 3 +++
 _data/take5/GYM-5025.yml | 3 +++
 _data/take5/GYM-5026.yml | 3 +++
 _data/take5/GYM-5027.yml | 3 +++
 _data/take5/GYM-5028.yml | 3 +++
 _data/take5/GYM-5029.yml | 3 +++
 _data/take5/GYM-5030.yml | 3 +++
 _data/take5/GYM-5031.yml | 3 +++
 _data/take5/GYM-5032.yml | 3 +++
 _data/take5/GYM-5033.yml | 3 +++
 _data/take5/GYM-5034.yml | 3 +++
 _data/take5/GYM-5035.yml | 3 +++
 _data/take5/GYM-5036.yml | 3 +++
 _data/take5/GYM-5037.yml | 3 +++
 _data/take5/GYM-5038.yml | 3 +++
 _data/take5/GYM-5039.yml | 3 +++
 _data/take5/GYM-5040.yml | 3 +++
 _data/take5/GYM-5041.yml | 3 +++
 _data/take5/GYM-5042.yml | 3 +++
 _data/take5/GYM-5043.yml | 3 +++
 _data/take5/GYM-5044.yml | 3 +++
 _data/take5/GYM-5045.yml | 3 +++
 _data/take5/GYM-5046.yml | 3 +++
 _data/take5/GYM-5047.yml | 3 +++
 _data/take5/GYM-5048.yml | 3 +++
 _data/take5/GYM-5049.yml | 3 +++
 _data/take5/GYM-5050.yml | 3 +++
 _data/take5/GYM-5051.yml | 3 +++
 _data/take5/GYM-5052.yml | 3 +++
 _data/take5/GYM-5053.yml | 3 +++
 _data/take5/GYM-5056.yml | 3 +++
 54 files changed, 162 insertions(+)

diff --git a/_data/take5/GYM-5001.yml b/_data/take5/GYM-5001.yml
index 756a8b6a1..81ae7196a 100644
--- a/_data/take5/GYM-5001.yml
+++ b/_data/take5/GYM-5001.yml
@@ -5,6 +5,9 @@ date: 2019-10-28T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5001/
 poster_art: /img/take5/posters/gym-5001.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5002.yml b/_data/take5/GYM-5002.yml
index a74401640..fa8f126bc 100644
--- a/_data/take5/GYM-5002.yml
+++ b/_data/take5/GYM-5002.yml
@@ -5,6 +5,9 @@ date: 2019-10-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5002/
 poster_art: /img/take5/posters/gym-5002.jpg
+img_bg_color:
+img_offset: 500
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5003.yml b/_data/take5/GYM-5003.yml
index 446d448fe..57cfe2e93 100644
--- a/_data/take5/GYM-5003.yml
+++ b/_data/take5/GYM-5003.yml
@@ -5,6 +5,9 @@ date: 2019-10-30T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5003/
 poster_art: /img/take5/posters/gym-5003.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5004.yml b/_data/take5/GYM-5004.yml
index 582daf5ff..e5c6ce087 100644
--- a/_data/take5/GYM-5004.yml
+++ b/_data/take5/GYM-5004.yml
@@ -5,6 +5,9 @@ date: 2019-10-31T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5004/
 poster_art: /img/take5/posters/gym-5004.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5005.yml b/_data/take5/GYM-5005.yml
index ea621de77..07bd2171d 100644
--- a/_data/take5/GYM-5005.yml
+++ b/_data/take5/GYM-5005.yml
@@ -5,6 +5,9 @@ date: 2019-11-01T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5005/
 poster_art: /img/take5/posters/gym-5005.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5006.yml b/_data/take5/GYM-5006.yml
index 98acdc2b0..15367b0c3 100644
--- a/_data/take5/GYM-5006.yml
+++ b/_data/take5/GYM-5006.yml
@@ -5,6 +5,9 @@ date: 2019-11-18T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5006/
 poster_art: /img/take5/posters/gym-5006.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5007.yml b/_data/take5/GYM-5007.yml
index 5af4837b9..5ac73f1b1 100644
--- a/_data/take5/GYM-5007.yml
+++ b/_data/take5/GYM-5007.yml
@@ -5,6 +5,9 @@ date: 2019-11-19T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5007/
 poster_art: /img/take5/posters/gym-5007.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5008.yml b/_data/take5/GYM-5008.yml
index 40928ee98..d813e0407 100644
--- a/_data/take5/GYM-5008.yml
+++ b/_data/take5/GYM-5008.yml
@@ -5,6 +5,9 @@ date: 2019-11-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5008/
 poster_art: /img/take5/posters/gym-5008.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5009.yml b/_data/take5/GYM-5009.yml
index 62ee1a5f1..8c7310c03 100644
--- a/_data/take5/GYM-5009.yml
+++ b/_data/take5/GYM-5009.yml
@@ -5,6 +5,9 @@ date: 2019-11-21T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5009/
 poster_art: /img/take5/posters/gym-5009.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5010.yml b/_data/take5/GYM-5010.yml
index d4aa3643a..4a70a5565 100644
--- a/_data/take5/GYM-5010.yml
+++ b/_data/take5/GYM-5010.yml
@@ -5,6 +5,9 @@ date: 2019-11-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5010/
 poster_art: /img/take5/posters/gym-5010.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5011.yml b/_data/take5/GYM-5011.yml
index 621fffb2f..8b776a4be 100644
--- a/_data/take5/GYM-5011.yml
+++ b/_data/take5/GYM-5011.yml
@@ -5,6 +5,9 @@ date: 2019-11-04T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5011/
 poster_art: /img/take5/posters/gym-5011.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5012.yml b/_data/take5/GYM-5012.yml
index a0c985a7e..552df619d 100644
--- a/_data/take5/GYM-5012.yml
+++ b/_data/take5/GYM-5012.yml
@@ -5,6 +5,9 @@ date: 2019-11-05T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5012/
 poster_art: /img/take5/posters/gym-5012.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5013.yml b/_data/take5/GYM-5013.yml
index 96671df98..1c6025985 100644
--- a/_data/take5/GYM-5013.yml
+++ b/_data/take5/GYM-5013.yml
@@ -5,6 +5,9 @@ date: 2019-11-06T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5013/
 poster_art: /img/take5/posters/gym-5013.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5014.yml b/_data/take5/GYM-5014.yml
index 1490eee5f..e606799bc 100644
--- a/_data/take5/GYM-5014.yml
+++ b/_data/take5/GYM-5014.yml
@@ -5,6 +5,9 @@ date: 2019-11-07T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5014/
 poster_art: /img/take5/posters/gym-5014.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5015.yml b/_data/take5/GYM-5015.yml
index dd97f9c7a..a5e98784b 100644
--- a/_data/take5/GYM-5015.yml
+++ b/_data/take5/GYM-5015.yml
@@ -5,6 +5,9 @@ date: 2019-11-08T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5015/
 poster_art: /img/take5/posters/gym-5015.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5016.yml b/_data/take5/GYM-5016.yml
index fe51078d4..b1c34b767 100644
--- a/_data/take5/GYM-5016.yml
+++ b/_data/take5/GYM-5016.yml
@@ -5,6 +5,9 @@ date: 2019-11-11T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5016/
 poster_art: /img/take5/posters/gym-5016.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5017.yml b/_data/take5/GYM-5017.yml
index 63248864d..d73831155 100644
--- a/_data/take5/GYM-5017.yml
+++ b/_data/take5/GYM-5017.yml
@@ -5,6 +5,9 @@ date: 2019-11-12T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5017/
 poster_art: /img/take5/posters/gym-5017.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
 instructor_bio: "Creative Coach"
diff --git a/_data/take5/GYM-5018.yml b/_data/take5/GYM-5018.yml
index 5f7564542..8db656d1c 100644
--- a/_data/take5/GYM-5018.yml
+++ b/_data/take5/GYM-5018.yml
@@ -5,6 +5,9 @@ date: 2019-11-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5018/
 poster_art: /img/take5/posters/gym-5018.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5019.yml b/_data/take5/GYM-5019.yml
index f11cb43b5..a8d77ce69 100644
--- a/_data/take5/GYM-5019.yml
+++ b/_data/take5/GYM-5019.yml
@@ -5,6 +5,9 @@ date: 2019-11-14T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5019/
 poster_art: /img/take5/posters/gym-5019.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
 instructor_bio: "Creative Coach"
diff --git a/_data/take5/GYM-5020.yml b/_data/take5/GYM-5020.yml
index e9b5c6913..d5244f5f6 100644
--- a/_data/take5/GYM-5020.yml
+++ b/_data/take5/GYM-5020.yml
@@ -5,6 +5,9 @@ date: 2019-11-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5020/
 poster_art: /img/take5/posters/gym-5020.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5021.yml b/_data/take5/GYM-5021.yml
index 8b5fcf89c..4fc5ff998 100644
--- a/_data/take5/GYM-5021.yml
+++ b/_data/take5/GYM-5021.yml
@@ -5,6 +5,9 @@ date: 2019-12-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5021/
 poster_art: /img/take5/posters/gym-5021.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5022.yml b/_data/take5/GYM-5022.yml
index d6ee871df..d9804aed0 100644
--- a/_data/take5/GYM-5022.yml
+++ b/_data/take5/GYM-5022.yml
@@ -5,6 +5,9 @@ date: 2019-12-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5022/
 poster_art: /img/take5/posters/gym-5022.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5023.yml b/_data/take5/GYM-5023.yml
index 027ea92d1..24f7207ea 100644
--- a/_data/take5/GYM-5023.yml
+++ b/_data/take5/GYM-5023.yml
@@ -5,6 +5,9 @@ date: 2020-01-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5023/
 poster_art: /img/take5/posters/gym-5023.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5024.yml b/_data/take5/GYM-5024.yml
index 129a3182a..97271f73a 100644
--- a/_data/take5/GYM-5024.yml
+++ b/_data/take5/GYM-5024.yml
@@ -5,6 +5,9 @@ date: 2020-01-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5024/
 poster_art: /img/take5/posters/gym-5024.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5025.yml b/_data/take5/GYM-5025.yml
index bbb992acb..06c1ae56e 100644
--- a/_data/take5/GYM-5025.yml
+++ b/_data/take5/GYM-5025.yml
@@ -5,6 +5,9 @@ date: 2020-01-27T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5025/
 poster_art: /img/take5/posters/gym-5025.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5026.yml b/_data/take5/GYM-5026.yml
index 86bd45d61..9f2c65d02 100644
--- a/_data/take5/GYM-5026.yml
+++ b/_data/take5/GYM-5026.yml
@@ -5,6 +5,9 @@ date: 2020-02-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5026/
 poster_art: /img/take5/posters/gym-5026.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Mike Bifulco"
 instructor_bio: "Developer Advocate at Stripe"
diff --git a/_data/take5/GYM-5027.yml b/_data/take5/GYM-5027.yml
index 7d0537f42..27aaaf06c 100644
--- a/_data/take5/GYM-5027.yml
+++ b/_data/take5/GYM-5027.yml
@@ -5,6 +5,9 @@ date: 2020-02-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5027/
 poster_art: /img/take5/posters/gym-5027.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5028.yml b/_data/take5/GYM-5028.yml
index 3483e67f0..9039e3dc5 100644
--- a/_data/take5/GYM-5028.yml
+++ b/_data/take5/GYM-5028.yml
@@ -5,6 +5,9 @@ date: 2020-02-17T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5028/
 poster_art: /img/take5/posters/gym-5028.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5029.yml b/_data/take5/GYM-5029.yml
index 1e6290071..08e6109c6 100644
--- a/_data/take5/GYM-5029.yml
+++ b/_data/take5/GYM-5029.yml
@@ -5,6 +5,9 @@ date: 2020-02-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5029/
 poster_art: /img/take5/posters/gym-5029.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5030.yml b/_data/take5/GYM-5030.yml
index 76d68f3e1..71b8c256e 100644
--- a/_data/take5/GYM-5030.yml
+++ b/_data/take5/GYM-5030.yml
@@ -5,6 +5,9 @@ date: 2020-03-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5030/
 poster_art: /img/take5/posters/gym-5030.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5031.yml b/_data/take5/GYM-5031.yml
index b542eef10..a186d05f2 100644
--- a/_data/take5/GYM-5031.yml
+++ b/_data/take5/GYM-5031.yml
@@ -5,6 +5,9 @@ date: 2020-03-31T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5031/
 poster_art: /img/take5/posters/gym-5031.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5032.yml b/_data/take5/GYM-5032.yml
index 2bda8bcd9..900ab239c 100644
--- a/_data/take5/GYM-5032.yml
+++ b/_data/take5/GYM-5032.yml
@@ -5,6 +5,9 @@ date: 2020-06-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5032/
 poster_art: /img/take5/posters/gym-5032.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5033.yml b/_data/take5/GYM-5033.yml
index f3580f17c..c61621aa1 100644
--- a/_data/take5/GYM-5033.yml
+++ b/_data/take5/GYM-5033.yml
@@ -5,6 +5,9 @@ date: 2020-06-23T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5033/
 poster_art: /img/take5/posters/gym-5033.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5034.yml b/_data/take5/GYM-5034.yml
index 167e6692a..df6fc0674 100644
--- a/_data/take5/GYM-5034.yml
+++ b/_data/take5/GYM-5034.yml
@@ -5,6 +5,9 @@ date: 2020-06-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5034/
 poster_art: /img/take5/posters/gym-5034.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5035.yml b/_data/take5/GYM-5035.yml
index 1aa5f58ab..1351c8140 100644
--- a/_data/take5/GYM-5035.yml
+++ b/_data/take5/GYM-5035.yml
@@ -5,6 +5,9 @@ date: 2020-06-25T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5035/
 poster_art: /img/take5/posters/gym-5035.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5036.yml b/_data/take5/GYM-5036.yml
index f6654d1ea..add7ce2ca 100644
--- a/_data/take5/GYM-5036.yml
+++ b/_data/take5/GYM-5036.yml
@@ -5,6 +5,9 @@ date: 2020-06-26T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5036/
 poster_art: /img/take5/posters/gym-5036.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5037.yml b/_data/take5/GYM-5037.yml
index 918c545ad..3a89fb3b0 100644
--- a/_data/take5/GYM-5037.yml
+++ b/_data/take5/GYM-5037.yml
@@ -5,6 +5,9 @@ date: 2020-09-02T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5037/
 poster_art: /img/take5/posters/gym-5037.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5038.yml b/_data/take5/GYM-5038.yml
index 3a961bcbc..4973ba37b 100644
--- a/_data/take5/GYM-5038.yml
+++ b/_data/take5/GYM-5038.yml
@@ -5,6 +5,9 @@ date: 2020-09-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5038/
 poster_art: /img/take5/posters/gym-5038.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5039.yml b/_data/take5/GYM-5039.yml
index 535fdcc42..8c535e238 100644
--- a/_data/take5/GYM-5039.yml
+++ b/_data/take5/GYM-5039.yml
@@ -5,6 +5,9 @@ date: 2020-09-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5039/
 poster_art: /img/take5/posters/gym-5039.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5040.yml b/_data/take5/GYM-5040.yml
index 5787436c2..e0bab7a27 100644
--- a/_data/take5/GYM-5040.yml
+++ b/_data/take5/GYM-5040.yml
@@ -5,6 +5,9 @@ date: 2020-09-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5040/
 poster_art: /img/take5/posters/gym-5040.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5041.yml b/_data/take5/GYM-5041.yml
index d603fb325..0e33c8a91 100644
--- a/_data/take5/GYM-5041.yml
+++ b/_data/take5/GYM-5041.yml
@@ -5,6 +5,9 @@ date: 2020-10-06T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5041/
 poster_art: /img/take5/posters/gym-5041.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5042.yml b/_data/take5/GYM-5042.yml
index dc3da0f8a..c6164e81e 100644
--- a/_data/take5/GYM-5042.yml
+++ b/_data/take5/GYM-5042.yml
@@ -5,6 +5,9 @@ date: 2020-10-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5042/
 poster_art: /img/take5/posters/gym-5042.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5043.yml b/_data/take5/GYM-5043.yml
index b351a83c0..a541a1be5 100644
--- a/_data/take5/GYM-5043.yml
+++ b/_data/take5/GYM-5043.yml
@@ -5,6 +5,9 @@ date: 2020-10-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5043/
 poster_art: /img/take5/posters/gym-5043.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5044.yml b/_data/take5/GYM-5044.yml
index 98f771427..e55cb6341 100644
--- a/_data/take5/GYM-5044.yml
+++ b/_data/take5/GYM-5044.yml
@@ -5,6 +5,9 @@ date: 2020-10-27T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5044/
 poster_art: /img/take5/posters/gym-5044.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5045.yml b/_data/take5/GYM-5045.yml
index a191b480c..c6d1e9a84 100644
--- a/_data/take5/GYM-5045.yml
+++ b/_data/take5/GYM-5045.yml
@@ -5,6 +5,9 @@ date: 2020-11-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5045/
 poster_art: /img/take5/posters/gym-5045.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5046.yml b/_data/take5/GYM-5046.yml
index 997b2f052..a8e4ab37a 100644
--- a/_data/take5/GYM-5046.yml
+++ b/_data/take5/GYM-5046.yml
@@ -5,6 +5,9 @@ date: 2020-11-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5046/
 poster_art: /img/take5/posters/gym-5046.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5047.yml b/_data/take5/GYM-5047.yml
index d428e3195..d762b41dd 100644
--- a/_data/take5/GYM-5047.yml
+++ b/_data/take5/GYM-5047.yml
@@ -5,6 +5,9 @@ date: 2020-11-17T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5047/
 poster_art: /img/take5/posters/gym-5047.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5048.yml b/_data/take5/GYM-5048.yml
index 27a3746ac..9fef46a6c 100644
--- a/_data/take5/GYM-5048.yml
+++ b/_data/take5/GYM-5048.yml
@@ -5,6 +5,9 @@ date: 2020-11-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5048/
 poster_art: /img/take5/posters/gym-5048.jpg
+img_bg_color:
+img_offset:
+bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5049.yml b/_data/take5/GYM-5049.yml
index fb07239cb..5e02657b4 100644
--- a/_data/take5/GYM-5049.yml
+++ b/_data/take5/GYM-5049.yml
@@ -5,6 +5,9 @@ date: 2021-06-01T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5049/
 poster_art: /img/take5/posters/gym-5049.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5050.yml b/_data/take5/GYM-5050.yml
index 819379637..4262e6f18 100644
--- a/_data/take5/GYM-5050.yml
+++ b/_data/take5/GYM-5050.yml
@@ -5,6 +5,9 @@ date: 2021-06-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5050/
 poster_art: /img/take5/posters/gym-5050.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5051.yml b/_data/take5/GYM-5051.yml
index 4a9464d2e..9dc88dfe4 100644
--- a/_data/take5/GYM-5051.yml
+++ b/_data/take5/GYM-5051.yml
@@ -5,6 +5,9 @@ date: 2021-06-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5051/
 poster_art: /img/take5/posters/gym-5051.jpg
+img_bg_color:
+img_offset:
+bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5052.yml b/_data/take5/GYM-5052.yml
index ca207995e..8908430ce 100644
--- a/_data/take5/GYM-5052.yml
+++ b/_data/take5/GYM-5052.yml
@@ -5,6 +5,9 @@ date: 2022-08-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5052/
 poster_art: /img/take5/posters/gym-5052.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: false
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5053.yml b/_data/take5/GYM-5053.yml
index ef2529637..da83b6088 100644
--- a/_data/take5/GYM-5053.yml
+++ b/_data/take5/GYM-5053.yml
@@ -5,6 +5,9 @@ date: 2022-08-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5053/
 poster_art: /img/take5/posters/gym-5053.jpg
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 live: false
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5056.yml b/_data/take5/GYM-5056.yml
index c0abd7dd5..812a6be47 100644
--- a/_data/take5/GYM-5056.yml
+++ b/_data/take5/GYM-5056.yml
@@ -4,6 +4,9 @@ title: "Taking Your Portfolio Case Studies to the Next Level"
 date: 2022-12-05T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5056/
+img_bg_color:
+img_offset:
+bg_color: 2c9959
 poster_art: /img/take5/posters/gym-5056.jpg
 live: false
 instructor: "Jeremy Osborn"

From eab32dfaeae9c15ca197997a8b9f06b34a6f7b81 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 24 Jan 2023 16:42:30 -0500
Subject: [PATCH 52/77] Take5s use the hero image, I guess

---
 feeds/data.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/feeds/data.json b/feeds/data.json
index d65948ab1..ad4e84596 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -33,7 +33,7 @@ permalink: /feeds/data.json
         "title": "{{ item.title }}",
         "type": "{{ item.course_type }}",
         "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art | replace: 'png', 'svg' }}",
+        "img": "{{ item.poster_art }}",
         "img_offset": "{{ item.img_offset }}",
         "img_bg_color": "{{ item.img_bg_color }}",
         "bg_color": "{{ item.bg_color }}"
@@ -49,7 +49,7 @@ permalink: /feeds/data.json
         "title": "{{ item.title }}",
         "type": "{{ item.course_type }}",
         "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art }}",
+        "img": "{{ item.poster_art | replace: '.jpg', '-hero.jpg' }}",
         "img_offset": "{{ item.img_offset }}",
         "img_bg_color": "{{ item.img_bg_color }}",
         "bg_color": "{{ item.bg_color }}"

From c06c24e79f0ada65f2dfd3b1ad45c2db26bb1343 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 24 Jan 2023 16:43:25 -0500
Subject: [PATCH 53/77] better img height calc

---
 .netlify/functions/og.tsx | 68 +++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 9638d8df0..6810bb5d7 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -1,10 +1,5 @@
 import React from 'https://esm.sh/react@18.2.0';
-import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
-
-// $gym-green: #2c9959;
-// $gym-magenta: #d73158;
-// $gym-purple: #764c9f;
-// $gym-teal: #5ca5a0;
+import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts';
 
 // Parse Data File
 async function getData(domain: string, id:string) {
@@ -14,7 +9,6 @@ async function getData(domain: string, id:string) {
     let itemData: any;
 
     let type = 'courses';
-    // console.log(Object.entries(data));
 
     if (id.toLowerCase().startsWith('web')) {
       type = 'webinars';
@@ -38,10 +32,16 @@ async function getData(domain: string, id:string) {
 }
 
 // Calculate aspect ratio of a resized image, assuming one knows the initial dimensions
-async function aspectRatio(width:number, height:number, newWidth:number) {
+async function newImgHeight(width:number, height:number, newDimension:number) {
   let ratio = height/width;
 
-  return newWidth * ratio; 
+  return newDimension * ratio; 
+}
+// TODO: combine these into one
+async function newImgWidth(width:number, height:number, newDimension:number) {
+  let ratio = width/height;
+
+  return newDimension * ratio; 
 }
 
 export default async function handler(req: Request) {
@@ -84,7 +84,6 @@ export default async function handler(req: Request) {
   if (id) {
     try {
       metaData = await getData(domain, id);
-      console.log(metaData);
     } catch(e: any) {
       console.warn(`${e.message}`);
       return new Response(`Invalid id (data file not found)`, {
@@ -96,16 +95,23 @@ export default async function handler(req: Request) {
   if (metaData) {
     if (metaData.img) {
       imgPath = metaData.img;
-      console.log(imgPath);
     }
     if (metaData.img_bg_color) {
       imgBgColor = metaData.img_bg_color;
+
+      if (!imgBgColor.includes('#')) {
+        imgBgColor = `#${imgBgColor}`;
+      }
     }
     if (metaData.img_offset) {
       imgOffset = metaData.img_offset;
     }
     if (metaData.bg_color) {
       bgColor = metaData.bg_color;
+
+      if (!bgColor.includes('#')) {
+        bgColor = `#${bgColor}`;
+      }
     }
     if (metaData.type) {
       type = metaData.type;
@@ -156,7 +162,7 @@ export default async function handler(req: Request) {
   if (imgUrl) {
     // General defaults + some take 5 settings
     bgImg = `url('${imgUrl}')`;
-    bgSize = '100%';
+    bgSize = 'contain';
     wrapperJustify = 'flex-start';
     wrapperAlign = 'flex-start';
     imgDisplay = 'flex';
@@ -164,6 +170,10 @@ export default async function handler(req: Request) {
     logoWidth = 300;
 
     if (type === 'take5') {
+      let iconWidth = await newImgWidth(1920,1080,wrapperHeight);
+
+      bgSize = `${iconWidth}px ${wrapperHeight}px`;
+
       imgWidth = 320;
       titleFontSize = 90;
       footerColor = 'ccc';
@@ -179,10 +189,10 @@ export default async function handler(req: Request) {
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
-      let iconHeight = await aspectRatio(574,488,iconWidth);
-      bgSize = `${iconWidth}px ${iconHeight}px`;
+      let iconHeight = await newImgHeight(574,488,iconWidth);
       const iconVOffset = (wrapperHeight - iconHeight)/2;
 
+      bgSize = `${iconWidth}px ${iconHeight}px`;
       imgWidth = iconWidth;
       bgPos = `0px ${iconVOffset}px`;
       titleFontSize = 70;
@@ -221,7 +231,7 @@ export default async function handler(req: Request) {
     height: '100%',
     width: '100%',
     backgroundImage: `${bgImg}`,
-    backgroundColor: `#${imgBgColor}`,
+    backgroundColor: `${imgBgColor}`,
     backgroundOrigin: 'border-box',
     backgroundRepeat: 'no-repeat',
     backgroundPosition: `${bgPos}`,
@@ -239,7 +249,7 @@ export default async function handler(req: Request) {
     alignItems: `${contentAlign}`,
     padding: '60px',
     marginLeft: `${imgWidth}px`,
-    backgroundColor: `#${bgColor}`,
+    backgroundColor: `${bgColor}`,
     width: `${contentWidth}px`,
     height: '100%',
   }
@@ -287,19 +297,21 @@ export default async function handler(req: Request) {
     );
   }
 
+  const layout1 = (
+    <div style={CONFIG_WRAPPER}>
+      <figure style={CONFIG_IMG}></figure>
+      <section style={CONFIG_CONTENT}>
+        <header style={CONFIG_HEADER}>{headerText}</header>
+        <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
+        <h1 style={CONFIG_TITLE}>{title}</h1>
+        <div style={CONFIG_FOOTER}>{footerText}</div>
+      </section>
+    </div>
+  );
+
+
   // Generate the open graph image
-  return new ImageResponse(
-    (
-      <div style={CONFIG_WRAPPER}>
-        <figure style={CONFIG_IMG}></figure>
-        <section style={CONFIG_CONTENT}>
-          <header style={CONFIG_HEADER}>{headerText}</header>
-          <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
-          <h1 style={CONFIG_TITLE}>{title}</h1>
-          <div style={CONFIG_FOOTER}>{footerText}</div>
-        </section>
-      </div>
-    ),
+  return new ImageResponse(layout1,
     {
       width: 1200,
       height: 628,

From a92eba45bafc35a7d814ad048a8ef1251374d7fa Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 25 Jan 2023 14:16:30 -0500
Subject: [PATCH 54/77] Refactor aspectRatio function

---
 .netlify/functions/og.tsx | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 6810bb5d7..91901671c 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -32,16 +32,26 @@ async function getData(domain: string, id:string) {
 }
 
 // Calculate aspect ratio of a resized image, assuming one knows the initial dimensions
-async function newImgHeight(width:number, height:number, newDimension:number) {
-  let ratio = height/width;
+async function aspectRatio(width:number, height:number, dimension:{type: string,value: number}) {
+  let ratio: any;
 
-  return newDimension * ratio; 
-}
-// TODO: combine these into one
-async function newImgWidth(width:number, height:number, newDimension:number) {
-  let ratio = width/height;
-
-  return newDimension * ratio; 
+  try {
+    if (dimension.type === 'width') {
+      // return a width
+      ratio = width/height;
+    } else if (dimension.type === 'height') {
+      // return a height
+      ratio = height/width;
+    } else {
+      throw new Error('dimension.type must be `width` or `height`!');
+    }
+  } catch(e:any) {
+    console.warn(`${e.message}`);
+    return new Response(`Failed to calculate aspect ratio.`, {
+      status: 500,
+    });
+  }
+  return dimension.value * ratio; 
 }
 
 export default async function handler(req: Request) {
@@ -170,7 +180,8 @@ export default async function handler(req: Request) {
     logoWidth = 300;
 
     if (type === 'take5') {
-      let iconWidth = await newImgWidth(1920,1080,wrapperHeight);
+      // let iconWidth = await newImgWidth(1920,1080,wrapperHeight);
+      let iconWidth = await aspectRatio(1920,1080,{type:'width',value:wrapperHeight});
 
       bgSize = `${iconWidth}px ${wrapperHeight}px`;
 
@@ -178,7 +189,7 @@ export default async function handler(req: Request) {
       titleFontSize = 90;
       footerColor = 'ccc';
       contentJustify = 'space-between';
-      bgPos = `-${imgOffset}px 0px`;
+      bgPos = imgOffset ? `-${imgOffset}px 0px` : '0 0';
       footerCase = 'uppercase';
       logoDisplay = 'none';
       headerDisplay = 'flex';
@@ -189,7 +200,7 @@ export default async function handler(req: Request) {
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
-      let iconHeight = await newImgHeight(574,488,iconWidth);
+      let iconHeight:any = await aspectRatio(574,488,{type:'height',value:iconWidth});
       const iconVOffset = (wrapperHeight - iconHeight)/2;
 
       bgSize = `${iconWidth}px ${iconHeight}px`;

From f3f88366d53f3b6a85f6edcb325c5837e6df6d72 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 25 Jan 2023 14:43:25 -0500
Subject: [PATCH 55/77] add static pages to JSON

---
 feeds/data.json | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/feeds/data.json b/feeds/data.json
index ad4e84596..3fa624252 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -74,18 +74,34 @@ permalink: /feeds/data.json
       }
       {%- if forloop.index != forloop.length -%},{%- endif -%}
     {%- endfor -%}
-  ]
-  {%- assign sortedpages = site.pages | where_exp: 'page', "page.url contains '/courses/'" | sort: "url" -%}
+  ],
+
+  {%- assign sortedpages = site.pages | where_exp: 'page', "page.permalink contains '/meta/'" | sort: "url" -%}
+  {%- assign filtered_pages = ""  | split: ", " -%}
+  {%- for page in sortedpages -%}
+    {%- unless page.permalink contains '/courses/' or page.permalink contains '/webinars/' -%}
+      {%- assign filtered_pages = filtered_pages | push: page -%}
+    {%- endunless -%}
+  {%- endfor -%}
 
-  {%-comment-%}
   "static":[
-    {%- for page in sortedpages -%}
-      {%- if page.url contains '/meta/' -%}
-        {{ page | replace: "=>", ":" }}
-      {%- endif -%}
+    {%- for page in filtered_pages -%}
+      {%- comment -%}
+      {{ page | replace: "=>", ":" }}
+      {%- endcomment -%}
+      {
+        "path": "{{ page.permalink }}",
+        "title": "{{ page.og_title }}",
+        "type": "static",
+        "topic": "",
+        "img": "",
+        "img_offset": "",
+        "img_bg_color": "",
+        "bg_color": ""
+      }
+      {%- if forloop.index != forloop.length -%},{%- endif -%}
     {%- endfor -%}
   ]
-  {%-endcomment-%}
 }
 {%- else -%}
 {"error": "no JSON feed found!"}

From f529453076a805e8d35ee7eb092bedf05e69c179 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 10:37:26 -0500
Subject: [PATCH 56/77] Ignore tests folder

- Testing: Add "data" section for static pages (to expose front matter)
- restore original home og image
---
 feeds/data.json | 14 +++++++++-----
 home/meta.md    |  3 +--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/feeds/data.json b/feeds/data.json
index 3fa624252..c7ec65fd0 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -77,19 +77,23 @@ permalink: /feeds/data.json
   ],
 
   {%- assign sortedpages = site.pages | where_exp: 'page', "page.permalink contains '/meta/'" | sort: "url" -%}
-  {%- assign filtered_pages = ""  | split: ", " -%}
+  {%- assign filtered_pages = "" | split: ", " -%}
   {%- for page in sortedpages -%}
-    {%- unless page.permalink contains '/courses/' or page.permalink contains '/webinars/' -%}
+    {%- unless page.permalink contains '/courses/' or page.permalink contains '/webinars/' or page.permalink contains '/tests/' -%}
       {%- assign filtered_pages = filtered_pages | push: page -%}
     {%- endunless -%}
   {%- endfor -%}
 
   "static":[
     {%- for page in filtered_pages -%}
-      {%- comment -%}
-      {{ page | replace: "=>", ":" }}
-      {%- endcomment -%}
       {
+        "id": "",
+        "data": [{
+          {%- for item in page -%}
+            "{{item[0] | JSON }}": "{{item[1] | JSON }}"
+            {%- if forloop.index != forloop.length -%},{%- endif -%}
+          {%- endfor -%}
+        }],
         "path": "{{ page.permalink }}",
         "title": "{{ page.og_title }}",
         "type": "static",
diff --git a/home/meta.md b/home/meta.md
index a3d6154ed..b9f83ebdf 100644
--- a/home/meta.md
+++ b/home/meta.md
@@ -6,7 +6,6 @@ catalog: false
 og_title: "Aquent Gymnasium"
 og_description: "Design a career you love with free online courses on design, development, accessibility, prototyping, UX, and career skills."
 og_keywords: "free online courses designers design user experience UX javascript node nodejs sketch wordpress drupal UI"
-# og_art: /img/brand/og/gym-brand-og.png
-og_art: /og-image?metapath="/home/"
+og_art: /img/brand/og/gym-brand-og.png
 og_url: https://thegymnasium.com
 ---

From bf7d99c4848a5f0d8c06282e36433e0517ccc5f9 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:22:55 -0500
Subject: [PATCH 57/77] Add rudimentary path support

---
 .netlify/functions/og.tsx | 89 ++++++++++++++++++++++++++++++++-------
 1 file changed, 73 insertions(+), 16 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 91901671c..f2996ba46 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -2,25 +2,41 @@ import React from 'https://esm.sh/react@18.2.0';
 import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts';
 
 // Parse Data File
-async function getData(domain: string, id:string) {
+async function getData(domain: string, id:any, path:any) {
   try {
     const JSON = await fetch(`${domain}/feeds/data.json`);
     const data = await JSON.json();
+    id = id ? id.toLowerCase(): null;
+    path = path ? `/${path.toLowerCase()}/meta/`: null;
     let itemData: any;
+    let type: any;
 
-    let type = 'courses';
-
-    if (id.toLowerCase().startsWith('web')) {
-      type = 'webinars';
-    }
+    if (id) {
+      if (id.startsWith('web')) {
+        type = 'webinars';
+      } else if (id.startsWith('gym-')) {
+        type = 'courses';
+      }
+  
+      Object.entries(data[type]).map(obj => {
+        const item:any = obj[1];
 
-    Object.entries(data[type]).map(obj => {
-      const item:any = obj[1];
+        if (id === item['id'].toLowerCase()) {
+          itemData = item;
+        }
+      });
 
-      if (id.toLowerCase() === item['id'].toLowerCase()) {
-        itemData = item;
-      }
-    });
+    } else if (path) {
+      type = 'static';
+      
+      Object.entries(data[type]).map(obj => {
+        const item:any = obj[1];
+        
+        if (path === item['path'].toLowerCase()) {
+          itemData = item;
+        }
+      });
+    }
 
     return itemData;
   } catch(e:any) {
@@ -66,6 +82,7 @@ export default async function handler(req: Request) {
   // Get the query parameters from the request
   const params:any = new URLSearchParams(url.search);
   const id = params.get('id') ?? null;
+  const path = params.get('path') ?? null;
   let bgColor = params.get('bg') ?? '222';
   let imgBgColor = params.get('imgbg') ?? '222';
   let imgOffset:any = Math.abs(params.get('offset')) ?? 0;
@@ -90,10 +107,10 @@ export default async function handler(req: Request) {
     hideFooter = true;
   }
 
-  // TODO: refactor courseNum to use id
+  // have id?
   if (id) {
     try {
-      metaData = await getData(domain, id);
+      metaData = await getData(domain, id, null);
     } catch(e: any) {
       console.warn(`${e.message}`);
       return new Response(`Invalid id (data file not found)`, {
@@ -102,6 +119,18 @@ export default async function handler(req: Request) {
     }
   }
 
+  // have path?
+  if (path) {
+    try {
+      metaData = await getData(domain, null, path);
+    } catch(e: any) {
+      console.warn(`${e.message}`);
+      return new Response(`Invalid path (data not found)`, {
+        status: 500,
+      });
+    }
+  }
+
   if (metaData) {
     if (metaData.img) {
       imgPath = metaData.img;
@@ -168,6 +197,17 @@ export default async function handler(req: Request) {
   if (params.get('title')) {
     title = params.get('title')
   }
+
+  let numWords:number;
+
+  if (title) {
+    numWords = title.split(' ').length;
+  }
+
+  if (path) {
+    contentAlign = 'flex-start';
+    contentJustify = 'space-between';
+  }
   
   if (imgUrl) {
     // General defaults + some take 5 settings
@@ -184,10 +224,10 @@ export default async function handler(req: Request) {
       let iconWidth = await aspectRatio(1920,1080,{type:'width',value:wrapperHeight});
 
       bgSize = `${iconWidth}px ${wrapperHeight}px`;
-
+      titleFontSize = 80;
       imgWidth = 320;
-      titleFontSize = 90;
       footerColor = 'ccc';
+      contentAlign = 'flex-start';
       contentJustify = 'space-between';
       bgPos = imgOffset ? `-${imgOffset}px 0px` : '0 0';
       footerCase = 'uppercase';
@@ -197,6 +237,19 @@ export default async function handler(req: Request) {
       if (topic) {
         footerText = topic;
       }
+
+
+      console.log(numWords);
+
+      if (title.length >= 50) {
+        titleFontSize = titleFontSize * 0.80;
+      } else if (title.length >= 40) {
+        titleFontSize = titleFontSize * 0.90;
+      } else {
+        titleFontSize = titleFontSize;
+      }
+
+      console.log(titleFontSize);
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
@@ -263,17 +316,20 @@ export default async function handler(req: Request) {
     backgroundColor: `${bgColor}`,
     width: `${contentWidth}px`,
     height: '100%',
+    lineHeight: 1,
   }
 
   let CONFIG_TITLE = {
     color: '#fff',
     textTransform: 'uppercase',
     fontSize: titleFontSize,
+    lineHeight: 1,
   }
 
   let CONFIG_HEADER = {
     color: '#000',
     display: `${headerDisplay}`,
+    lineHeight: 1,
   }
 
   let CONFIG_LOGO = {
@@ -285,6 +341,7 @@ export default async function handler(req: Request) {
     color: `#${footerColor}`,
     textTransform: `${footerCase}`,
     display: `${footerDisplay}`,
+    lineHeight: 1,
   }
 
   if (debug) {

From 69c984cd9f6d4391a9c2bde2e3df398de7d5f453 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:35:47 -0500
Subject: [PATCH 58/77] Adds back missing indices

---
 feeds/data.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/feeds/data.json b/feeds/data.json
index c7ec65fd0..1238270ab 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -82,6 +82,9 @@ permalink: /feeds/data.json
     {%- unless page.permalink contains '/courses/' or page.permalink contains '/webinars/' or page.permalink contains '/tests/' -%}
       {%- assign filtered_pages = filtered_pages | push: page -%}
     {%- endunless -%}
+    {%-if page.permalink == '/courses/meta/' or page.permalink == '/webinars/meta/' -%}
+      {%- assign filtered_pages = filtered_pages | push: page -%}
+    {%- endif -%}
   {%- endfor -%}
 
   "static":[

From 0ce4ffab757c7364a5cbd295aae128a163b1f8ca Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:44:54 -0500
Subject: [PATCH 59/77] static use og_description

---
 feeds/data.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feeds/data.json b/feeds/data.json
index 1238270ab..934775f85 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -98,7 +98,7 @@ permalink: /feeds/data.json
           {%- endfor -%}
         }],
         "path": "{{ page.permalink }}",
-        "title": "{{ page.og_title }}",
+        "title": "{{ page.og_description }}",
         "type": "static",
         "topic": "",
         "img": "",

From fbf2f6e59471d2937cab68ef26a5768983848f04 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 16:15:01 -0500
Subject: [PATCH 60/77] Update og.tsx

---
 .netlify/functions/og.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index f2996ba46..5437c166d 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -31,7 +31,7 @@ async function getData(domain: string, id:any, path:any) {
       
       Object.entries(data[type]).map(obj => {
         const item:any = obj[1];
-        
+
         if (path === item['path'].toLowerCase()) {
           itemData = item;
         }
@@ -207,6 +207,8 @@ export default async function handler(req: Request) {
   if (path) {
     contentAlign = 'flex-start';
     contentJustify = 'space-between';
+    wrapperJustify = 'space-between';
+    logoWidth = 400;
   }
   
   if (imgUrl) {

From ae14d740253effda254f9df0d9e22098d13a6b1a Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 31 Jan 2023 16:17:01 -0500
Subject: [PATCH 61/77] Notes

---
 .netlify/functions/og.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 5437c166d..fcd826c99 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -198,6 +198,7 @@ export default async function handler(req: Request) {
     title = params.get('title')
   }
 
+  // TODO: something to calculate number of words to apply font size adjustments?
   let numWords:number;
 
   if (title) {
@@ -240,9 +241,7 @@ export default async function handler(req: Request) {
         footerText = topic;
       }
 
-
-      console.log(numWords);
-
+      // TODO: improve logic for font size, based on sentence length
       if (title.length >= 50) {
         titleFontSize = titleFontSize * 0.80;
       } else if (title.length >= 40) {
@@ -250,8 +249,6 @@ export default async function handler(req: Request) {
       } else {
         titleFontSize = titleFontSize;
       }
-
-      console.log(titleFontSize);
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;

From 9256956a43ba981364ae0058ba7043f641434a09 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:34:02 -0500
Subject: [PATCH 62/77] Add offsets

---
 _data/take5/GYM-5001.yml | 2 +-
 _data/take5/GYM-5002.yml | 2 +-
 _data/take5/GYM-5003.yml | 2 +-
 _data/take5/GYM-5004.yml | 2 +-
 _data/take5/GYM-5005.yml | 2 +-
 _data/take5/GYM-5006.yml | 2 +-
 _data/take5/GYM-5007.yml | 2 +-
 _data/take5/GYM-5008.yml | 2 +-
 _data/take5/GYM-5009.yml | 2 +-
 _data/take5/GYM-5010.yml | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/_data/take5/GYM-5001.yml b/_data/take5/GYM-5001.yml
index 81ae7196a..e7c5ed088 100644
--- a/_data/take5/GYM-5001.yml
+++ b/_data/take5/GYM-5001.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5001/
 poster_art: /img/take5/posters/gym-5001.jpg
 img_bg_color:
-img_offset:
+img_offset: 520
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5002.yml b/_data/take5/GYM-5002.yml
index fa8f126bc..5fe33208b 100644
--- a/_data/take5/GYM-5002.yml
+++ b/_data/take5/GYM-5002.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5002/
 poster_art: /img/take5/posters/gym-5002.jpg
 img_bg_color:
-img_offset: 500
+img_offset: 520
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5003.yml b/_data/take5/GYM-5003.yml
index 57cfe2e93..dd60e5f64 100644
--- a/_data/take5/GYM-5003.yml
+++ b/_data/take5/GYM-5003.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5003/
 poster_art: /img/take5/posters/gym-5003.jpg
 img_bg_color:
-img_offset:
+img_offset: 315
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5004.yml b/_data/take5/GYM-5004.yml
index e5c6ce087..859d93b33 100644
--- a/_data/take5/GYM-5004.yml
+++ b/_data/take5/GYM-5004.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5004/
 poster_art: /img/take5/posters/gym-5004.jpg
 img_bg_color:
-img_offset:
+img_offset: 385
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5005.yml b/_data/take5/GYM-5005.yml
index 07bd2171d..1a774e79b 100644
--- a/_data/take5/GYM-5005.yml
+++ b/_data/take5/GYM-5005.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5005/
 poster_art: /img/take5/posters/gym-5005.jpg
 img_bg_color:
-img_offset:
+img_offset: 385
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5006.yml b/_data/take5/GYM-5006.yml
index 15367b0c3..4d143b95c 100644
--- a/_data/take5/GYM-5006.yml
+++ b/_data/take5/GYM-5006.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5006/
 poster_art: /img/take5/posters/gym-5006.jpg
 img_bg_color:
-img_offset:
+img_offset: 280
 bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
diff --git a/_data/take5/GYM-5007.yml b/_data/take5/GYM-5007.yml
index 5ac73f1b1..39d32c84e 100644
--- a/_data/take5/GYM-5007.yml
+++ b/_data/take5/GYM-5007.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5007/
 poster_art: /img/take5/posters/gym-5007.jpg
 img_bg_color:
-img_offset:
+img_offset: 100
 bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
diff --git a/_data/take5/GYM-5008.yml b/_data/take5/GYM-5008.yml
index d813e0407..0a8b35777 100644
--- a/_data/take5/GYM-5008.yml
+++ b/_data/take5/GYM-5008.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5008/
 poster_art: /img/take5/posters/gym-5008.jpg
 img_bg_color:
-img_offset:
+img_offset: 335
 bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
diff --git a/_data/take5/GYM-5009.yml b/_data/take5/GYM-5009.yml
index 8c7310c03..0016b4d10 100644
--- a/_data/take5/GYM-5009.yml
+++ b/_data/take5/GYM-5009.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5009/
 poster_art: /img/take5/posters/gym-5009.jpg
 img_bg_color:
-img_offset:
+img_offset: 205
 bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
diff --git a/_data/take5/GYM-5010.yml b/_data/take5/GYM-5010.yml
index 4a70a5565..9b94ce3b5 100644
--- a/_data/take5/GYM-5010.yml
+++ b/_data/take5/GYM-5010.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5010/
 poster_art: /img/take5/posters/gym-5010.jpg
 img_bg_color:
-img_offset:
+img_offset: 187
 bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"

From 9ae821bf49d0400f87b1443ce49ff457fefa1847 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:37:39 -0500
Subject: [PATCH 63/77] Remove unused data attr

---
 _includes/partials/meta/tags.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/partials/meta/tags.html b/_includes/partials/meta/tags.html
index ab2e0605d..f437b9c61 100644
--- a/_includes/partials/meta/tags.html
+++ b/_includes/partials/meta/tags.html
@@ -7,7 +7,7 @@
 <meta name="twitter:site" content="@AquentGymnasium">
 <meta name="twitter:creator" content="@AquentGymnasium">
 <meta name="twitter:url" property="og:url" content="{{ og_url }}">
-<meta name="twitter:title" property="og:title" content="{{ og_title }}" data-topic="{{ data_topic }}" data-color="">
+<meta name="twitter:title" property="og:title" content="{{ og_title }}">
 <meta name="twitter:description" property="og:description" content="{{ og_description }}">
 <meta name="twitter:image" property="og:image" content="{{ og_art }}">
 <meta name="twitter:image:alt" property="og:image:alt" content="{{ og_img_alt }}">

From 3535270ed77b5c52b153c035db403c2419988a6e Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:46:33 -0500
Subject: [PATCH 64/77] Add take5 border

---
 .netlify/functions/og.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index fcd826c99..f77269d1f 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -171,6 +171,7 @@ export default async function handler(req: Request) {
   let bgImg = 'none';
   let bgSize = 'contain';
   let bgPos = '0 0';
+  let contentBorderLeft = 'none';
   let contentAlign = 'center';
   let contentJustify = 'center';
   let footerCase = 'initial';
@@ -228,10 +229,11 @@ export default async function handler(req: Request) {
 
       bgSize = `${iconWidth}px ${wrapperHeight}px`;
       titleFontSize = 80;
+      contentBorderLeft = '2px solid #ccc';
       imgWidth = 320;
       footerColor = 'ccc';
       contentAlign = 'flex-start';
-      contentJustify = 'space-between';
+      contentJustify = 'flex-start';
       bgPos = imgOffset ? `-${imgOffset}px 0px` : '0 0';
       footerCase = 'uppercase';
       logoDisplay = 'none';
@@ -306,6 +308,7 @@ export default async function handler(req: Request) {
   }
 
   let CONFIG_CONTENT = {
+    borderLeft: `${contentBorderLeft}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: `${contentJustify}`,

From 6f6d78f7965e252657a1cb8d8ab527b3c12aab8b Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:47:04 -0500
Subject: [PATCH 65/77] Update og.tsx

---
 .netlify/functions/og.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index f77269d1f..a89eef5d9 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -233,7 +233,7 @@ export default async function handler(req: Request) {
       imgWidth = 320;
       footerColor = 'ccc';
       contentAlign = 'flex-start';
-      contentJustify = 'flex-start';
+      contentJustify = 'space-between';
       bgPos = imgOffset ? `-${imgOffset}px 0px` : '0 0';
       footerCase = 'uppercase';
       logoDisplay = 'none';

From 0f0a44aa5ae601210a52d8518de4357645817eba Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:57:42 -0500
Subject: [PATCH 66/77] Add offsets

---
 _data/take5/GYM-5012.yml | 2 +-
 _data/take5/GYM-5013.yml | 2 +-
 _data/take5/GYM-5014.yml | 2 +-
 _data/take5/GYM-5015.yml | 2 +-
 _data/take5/GYM-5016.yml | 2 +-
 _data/take5/GYM-5017.yml | 2 +-
 _data/take5/GYM-5018.yml | 2 +-
 _data/take5/GYM-5019.yml | 2 +-
 _data/take5/GYM-5020.yml | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/_data/take5/GYM-5012.yml b/_data/take5/GYM-5012.yml
index 552df619d..9eba53793 100644
--- a/_data/take5/GYM-5012.yml
+++ b/_data/take5/GYM-5012.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5012/
 poster_art: /img/take5/posters/gym-5012.jpg
 img_bg_color:
-img_offset:
+img_offset: 685
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5013.yml b/_data/take5/GYM-5013.yml
index 1c6025985..2a9e4e68a 100644
--- a/_data/take5/GYM-5013.yml
+++ b/_data/take5/GYM-5013.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5013/
 poster_art: /img/take5/posters/gym-5013.jpg
 img_bg_color:
-img_offset:
+img_offset: 510
 bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5014.yml b/_data/take5/GYM-5014.yml
index e606799bc..3822dc2f2 100644
--- a/_data/take5/GYM-5014.yml
+++ b/_data/take5/GYM-5014.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5014/
 poster_art: /img/take5/posters/gym-5014.jpg
 img_bg_color:
-img_offset:
+img_offset: 355
 bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5015.yml b/_data/take5/GYM-5015.yml
index a5e98784b..8bb44372d 100644
--- a/_data/take5/GYM-5015.yml
+++ b/_data/take5/GYM-5015.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5015/
 poster_art: /img/take5/posters/gym-5015.jpg
 img_bg_color:
-img_offset:
+img_offset: 795
 bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
diff --git a/_data/take5/GYM-5016.yml b/_data/take5/GYM-5016.yml
index b1c34b767..143a05cf5 100644
--- a/_data/take5/GYM-5016.yml
+++ b/_data/take5/GYM-5016.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5016/
 poster_art: /img/take5/posters/gym-5016.jpg
 img_bg_color:
-img_offset:
+img_offset: 70
 bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
diff --git a/_data/take5/GYM-5017.yml b/_data/take5/GYM-5017.yml
index d73831155..ed6ea605d 100644
--- a/_data/take5/GYM-5017.yml
+++ b/_data/take5/GYM-5017.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5017/
 poster_art: /img/take5/posters/gym-5017.jpg
 img_bg_color:
-img_offset:
+img_offset: 175
 bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
diff --git a/_data/take5/GYM-5018.yml b/_data/take5/GYM-5018.yml
index 8db656d1c..5b09d1399 100644
--- a/_data/take5/GYM-5018.yml
+++ b/_data/take5/GYM-5018.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5018/
 poster_art: /img/take5/posters/gym-5018.jpg
 img_bg_color:
-img_offset:
+img_offset: 95
 bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
diff --git a/_data/take5/GYM-5019.yml b/_data/take5/GYM-5019.yml
index a8d77ce69..8b9067136 100644
--- a/_data/take5/GYM-5019.yml
+++ b/_data/take5/GYM-5019.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5019/
 poster_art: /img/take5/posters/gym-5019.jpg
 img_bg_color:
-img_offset:
+img_offset: 390
 bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
diff --git a/_data/take5/GYM-5020.yml b/_data/take5/GYM-5020.yml
index d5244f5f6..e41d4e469 100644
--- a/_data/take5/GYM-5020.yml
+++ b/_data/take5/GYM-5020.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5020/
 poster_art: /img/take5/posters/gym-5020.jpg
 img_bg_color:
-img_offset:
+img_offset: 365
 bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"

From e2a82018729e018f9f0a6137f8f33c5a94568373 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 1 Feb 2023 14:09:42 -0500
Subject: [PATCH 67/77] take5 font size logic

---
 .netlify/functions/og.tsx | 7 +++++++
 _data/take5/GYM-5021.yml  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index a89eef5d9..e8af98a51 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -245,12 +245,19 @@ export default async function handler(req: Request) {
 
       // TODO: improve logic for font size, based on sentence length
       if (title.length >= 50) {
+        titleFontSize = titleFontSize * 0.75;
+      } else if (title.length >= 45) {
         titleFontSize = titleFontSize * 0.80;
       } else if (title.length >= 40) {
+        titleFontSize = titleFontSize * 0.85;
+      } else if (title.length >= 35) {
         titleFontSize = titleFontSize * 0.90;
       } else {
         titleFontSize = titleFontSize;
       }
+
+      console.log(title.length, titleFontSize);
+
     } else {
       // calculate aspect ratio for proportional resizing
       const iconWidth = 516;
diff --git a/_data/take5/GYM-5021.yml b/_data/take5/GYM-5021.yml
index 4fc5ff998..cce399057 100644
--- a/_data/take5/GYM-5021.yml
+++ b/_data/take5/GYM-5021.yml
@@ -6,7 +6,7 @@ course_type: take5
 url: /courses/take5/GYM-5021/
 poster_art: /img/take5/posters/gym-5021.jpg
 img_bg_color:
-img_offset:
+img_offset: 50
 bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"

From 6879bd3dd1fbbfcfc81bc99e8f9381fde445a768 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 2 Feb 2023 12:46:08 -0500
Subject: [PATCH 68/77] cleanup unused config

---
 .netlify/functions/test.tsx | 104 ------------------------------------
 netlify.toml                |  10 ----
 2 files changed, 114 deletions(-)
 delete mode 100644 .netlify/functions/test.tsx

diff --git a/.netlify/functions/test.tsx b/.netlify/functions/test.tsx
deleted file mode 100644
index 7accadb64..000000000
--- a/.netlify/functions/test.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "https://esm.sh/react";
-import { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'
-import { Context } from "https://edge.netlify.com";
-
-function Uint8ArrayToArrayBuffer(array: Uint8Array): ArrayBuffer {
-  return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
-}
-
-export default async (req: Request, context: Context) => {
-  try {
-    const url = new URL(req.url);
-    const params:any = new URLSearchParams(url.search);
-    let fontData:any;
-
-    const origin = url.origin;
-
-    // try {
-    //   fontData = await fetch(`https://thegymcms.com/fonts/brandon_bld-webfont.woff`).then(
-    //     (res) => res.arrayBuffer(),
-    //   );
-    // } catch(e:any) {
-    //   console.log(`${e.message}`);
-    //   return new Response(`Failed to get font`, {
-    //     status: 500,
-    //   });
-    // }
-
-    // const font = await Deno.readFile(`./fonts/brandon_bld-webfont.woff`);
-    // const buffer = Uint8ArrayToArrayBuffer(font);
-
-
-    // ?title=<title>
-    const hasTitle = params.has("title");
-    const title = hasTitle
-      ? params.get("title") : "Testing Playground";
-
-    return new ImageResponse(
-      <div
-        style={{
-          backgroundColor: "black",
-          backgroundSize: "150px 150px",
-          height: "100%",
-          width: "100%",
-          display: "flex",
-          textAlign: "center",
-          alignItems: "center",
-          justifyContent: "center",
-          flexDirection: "column",
-          flexWrap: "nowrap",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            alignContent: "center",
-            justifyContent: "center",
-            justifyItems: "center",
-          }}
-        >
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            alt="Circle"
-            height={200}
-            src="data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' /%3E%3C/svg%3E"
-            style={{ margin: "0 30px" }}
-            width={200}
-          />
-        </div>
-        <div
-          style={{
-            fontFamily: 'brandon-grotesque',
-            fontSize: 60,
-            fontStyle: "normal",
-            letterSpacing: "-0.025em",
-            color: "white",
-            marginTop: 30,
-            padding: "0 120px",
-            lineHeight: 1.4,
-            whiteSpace: "pre-wrap",
-          }}
-        >
-          {title}
-        </div>
-      </div>,
-      {
-        width: 1200,
-        height: 630,
-        // fonts: [
-        //   {
-        //     name: 'brandon-grotesque',
-        //     data: fontData,
-        //     style: 'normal',
-        //   }
-        // ],
-      },
-    );
-  } catch (e: any) {
-    console.log(`${e.message}`);
-    return new Response(`Failed to generate the image`, {
-      status: 500,
-    });
-  }
-}
diff --git a/netlify.toml b/netlify.toml
index 5cfcc1e88..2d34f69e7 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -29,16 +29,6 @@ edge_functions = ".netlify/functions"
   function = "og"
   path = "/og-image"
 
-[[edge_functions]]
-  function = "test"
-  path = "/test"
-
-# [functions."og"]
-#   included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
-
-# [functions."test"]
-#   included_files = ["fonts/brandon_bld-webfont.woff","_data/courses/**.yml", "_data/take5/**.yml", "_data/workshops/**.yml", "_data/webinars/**.yml"]
-
 # dev branch build
 # https://dev--gymcms.netlify.com/
 [context.dev]

From 6875ae9dc6a1c3b212e5feca1075700849ddcdd0 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Thu, 2 Feb 2023 13:17:07 -0500
Subject: [PATCH 69/77] add initial layouts

---
 .netlify/functions/og.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index e8af98a51..5eae832c1 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -374,7 +374,7 @@ export default async function handler(req: Request) {
     );
   }
 
-  const layout1 = (
+  const defaultLayout = (
     <div style={CONFIG_WRAPPER}>
       <figure style={CONFIG_IMG}></figure>
       <section style={CONFIG_CONTENT}>
@@ -386,9 +386,19 @@ export default async function handler(req: Request) {
     </div>
   );
 
+  const logoOnlyLayout = (
+    <div style={CONFIG_WRAPPER}>
+      <section style={CONFIG_CONTENT}>
+        <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
+      </section>
+    </div>
+  );
+
+  const layout = defaultLayout;
+
 
   // Generate the open graph image
-  return new ImageResponse(layout1,
+  return new ImageResponse(layout,
     {
       width: 1200,
       height: 628,

From 9c4f7ae9ca6d8e2e284349ffdfa7f32495a3d70a Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 8 Feb 2023 12:22:13 -0500
Subject: [PATCH 70/77] Add additional layout logic

---
 .netlify/functions/og.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/.netlify/functions/og.tsx b/.netlify/functions/og.tsx
index 5eae832c1..9df6eeaf0 100644
--- a/.netlify/functions/og.tsx
+++ b/.netlify/functions/og.tsx
@@ -95,6 +95,7 @@ export default async function handler(req: Request) {
   let type: any;
   let metaData: any;
   let hideFooter: boolean = false;
+  let layoutType = 'default';
   let debug: boolean = false;
 
   if (params.has('debug')) {
@@ -105,6 +106,7 @@ export default async function handler(req: Request) {
   // Are there any URL parameters (other than debug [see above]) attached? If not, hide the footer too. This is to display only the Gymnasium logo when visiting /og-image
   if (params && params.toString().length === 0) {
     hideFooter = true;
+    layoutType = 'logo';
   }
 
   // have id?
@@ -374,7 +376,7 @@ export default async function handler(req: Request) {
     );
   }
 
-  const defaultLayout = (
+  const layoutDefault = (
     <div style={CONFIG_WRAPPER}>
       <figure style={CONFIG_IMG}></figure>
       <section style={CONFIG_CONTENT}>
@@ -386,7 +388,7 @@ export default async function handler(req: Request) {
     </div>
   );
 
-  const logoOnlyLayout = (
+  const layoutLogo = (
     <div style={CONFIG_WRAPPER}>
       <section style={CONFIG_CONTENT}>
         <img style={CONFIG_LOGO} src='https://thegymcms.com/img/brand/svg/gymnasium-logo-white.svg' />
@@ -394,8 +396,12 @@ export default async function handler(req: Request) {
     </div>
   );
 
-  const layout = defaultLayout;
+  let layout = layoutDefault;
 
+  // TODO: refactor to improve logic
+  if (layoutType === 'logo') {
+    layout = layoutLogo;
+  }
 
   // Generate the open graph image
   return new ImageResponse(layout,

From d5d9726502198491b45596a907e5e5407df3e342 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 10 Feb 2023 11:24:18 -0500
Subject: [PATCH 71/77] Update page inclusion logic

---
 feeds/data.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/feeds/data.json b/feeds/data.json
index 934775f85..6fe2c6b2a 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -82,7 +82,7 @@ permalink: /feeds/data.json
     {%- unless page.permalink contains '/courses/' or page.permalink contains '/webinars/' or page.permalink contains '/tests/' -%}
       {%- assign filtered_pages = filtered_pages | push: page -%}
     {%- endunless -%}
-    {%-if page.permalink == '/courses/meta/' or page.permalink == '/webinars/meta/' -%}
+    {%-if page.permalink == '/courses/meta/' or page.permalink == '/webinars/meta/' or page.permalink == '/courses/take5/meta/' or page.permalink == '/courses/gym-shorts/meta/' or page.permalink == '/courses/full/meta/' -%}
       {%- assign filtered_pages = filtered_pages | push: page -%}
     {%- endif -%}
   {%- endfor -%}

From dac1274e058e981b05c590e3206e2ad1a439b0a0 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Fri, 10 Feb 2023 15:56:59 -0500
Subject: [PATCH 72/77] DRY logic improvements

---
 feeds/data.json          | 53 +++++++++++++++++++---------------------
 feeds/og-data-logic.html | 32 ++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 28 deletions(-)
 create mode 100644 feeds/og-data-logic.html

diff --git a/feeds/data.json b/feeds/data.json
index 6fe2c6b2a..dcc194ffe 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -10,49 +10,46 @@ permalink: /feeds/data.json
   "courses":[
     {%- assign sorted = site.data.courses | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- assign id = hash[0] -%}
-      {%- assign item = hash[1] -%}
+      {%- include_relative og-data-logic.html -%}
       {
         "id": "{{ id }}",
-        "title": "{{ item.title }}",
-        "type": "{{ item.course_type }}",
-        "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art }}",
-        "img_offset": "{{ item.img_offset }}",
-        "img_bg_color": "{{ item.img_bg_color }}",
-        "bg_color": "{{ item.bg_color }}"
+        "title": "{{ title }}",
+        "type": "{{ type }}",
+        "topic": "{{ topic }}",
+        "img": "{{ img }}",
+        "img_offset": "{{ img_offset }}",
+        "img_bg_color": "{{ img_bg_color }}",
+        "bg_color": "{{ bg_color }}"
       },
     {%- endfor -%}
 
     {%- assign sorted = site.data.workshops | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- assign id = hash[0] -%}
-      {%- assign item = hash[1] -%}
+      {%- include_relative og-data-logic.html -%}
       {
         "id": "{{ id }}",
-        "title": "{{ item.title }}",
-        "type": "{{ item.course_type }}",
-        "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art }}",
-        "img_offset": "{{ item.img_offset }}",
-        "img_bg_color": "{{ item.img_bg_color }}",
-        "bg_color": "{{ item.bg_color }}"
-      }, 
+        "title": "{{ title }}",
+        "type": "{{ type }}",
+        "topic": "{{ topic }}",
+        "img": "{{ img }}",
+        "img_offset": "{{ img_offset }}",
+        "img_bg_color": "{{ img_bg_color }}",
+        "bg_color": "{{ bg_color }}"
+      },
     {%- endfor -%}
 
     {%- assign sorted = site.data.take5 | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- assign id = hash[0] -%}
-      {%- assign item = hash[1] -%}
+      {%- include_relative og-data-logic.html -%}
       {
         "id": "{{ id }}",
-        "title": "{{ item.title }}",
-        "type": "{{ item.course_type }}",
-        "topic": "{{ item.topic }}",
-        "img": "{{ item.poster_art | replace: '.jpg', '-hero.jpg' }}",
-        "img_offset": "{{ item.img_offset }}",
-        "img_bg_color": "{{ item.img_bg_color }}",
-        "bg_color": "{{ item.bg_color }}"
+        "title": "{{ title }}",
+        "type": "{{ type }}",
+        "topic": "{{ topic }}",
+        "img": "{{ img | replace: '.jpg', '-hero.jpg' }}",
+        "img_offset": "{{ img_offset }}",
+        "img_bg_color": "{{ img_bg_color }}",
+        "bg_color": "{{ bg_color }}"
       }
       {%- if forloop.index != forloop.length -%},{%- endif -%}
     {%- endfor -%}
diff --git a/feeds/og-data-logic.html b/feeds/og-data-logic.html
new file mode 100644
index 000000000..a36c1e265
--- /dev/null
+++ b/feeds/og-data-logic.html
@@ -0,0 +1,32 @@
+{%- assign id = hash[0] -%}
+{%- assign item = hash[1] -%}
+{%- assign title = item.title -%}
+{%- assign type = item.course_type -%}
+{%- assign topic = item.topic -%}
+{%- assign img = item.poster_art -%}
+{%- assign img_offset = item.img_offset -%}
+{%- assign img_bg_color = item.img_bg_color -%}
+{%- assign bg_color = item.bg_color -%}
+{%- if item.og_gen_data -%}
+  {%- if item.og_gen_data.bg_color -%}
+    {%- assign bg_color = item.og_gen_data.bg_color -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.title -%}
+    {%- assign title = item.og_gen_data.title -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.topic -%}
+    {%- assign topic = item.og_gen_data.topic -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.img -%}
+    {%- assign img = item.og_gen_data.img -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.img2 -%}
+    {%- assign img2 = item.og_gen_data.img2 -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.img_bg_color -%}
+    {%- assign img_bg_color = item.og_gen_data.img_bg_color -%}
+  {%- endif -%}
+  {%- if item.og_gen_data.img_offset -%}
+    {%- assign img_offset = item.og_gen_data.img_offset -%}
+  {%- endif -%}
+{%- endif -%}

From 16be9363cea4a30388a5cef9190c7304a53620f0 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 22 Feb 2023 15:14:56 -0500
Subject: [PATCH 73/77] use liquid extension

---
 feeds/data.json                                    | 6 +++---
 feeds/{og-data-logic.html => og-data-logic.liquid} | 0
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename feeds/{og-data-logic.html => og-data-logic.liquid} (100%)

diff --git a/feeds/data.json b/feeds/data.json
index dcc194ffe..281862047 100644
--- a/feeds/data.json
+++ b/feeds/data.json
@@ -10,7 +10,7 @@ permalink: /feeds/data.json
   "courses":[
     {%- assign sorted = site.data.courses | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- include_relative og-data-logic.html -%}
+      {%- include_relative og-data-logic.liquid -%}
       {
         "id": "{{ id }}",
         "title": "{{ title }}",
@@ -25,7 +25,7 @@ permalink: /feeds/data.json
 
     {%- assign sorted = site.data.workshops | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- include_relative og-data-logic.html -%}
+      {%- include_relative og-data-logic.liquid -%}
       {
         "id": "{{ id }}",
         "title": "{{ title }}",
@@ -40,7 +40,7 @@ permalink: /feeds/data.json
 
     {%- assign sorted = site.data.take5 | sort: course_id -%}
     {%- for hash in sorted -%}
-      {%- include_relative og-data-logic.html -%}
+      {%- include_relative og-data-logic.liquid -%}
       {
         "id": "{{ id }}",
         "title": "{{ title }}",
diff --git a/feeds/og-data-logic.html b/feeds/og-data-logic.liquid
similarity index 100%
rename from feeds/og-data-logic.html
rename to feeds/og-data-logic.liquid

From 16ee6f47d1ff6b8617a4fa9278b2ee61701cd7a8 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Wed, 22 Feb 2023 15:25:36 -0500
Subject: [PATCH 74/77] Use og_gen_data prefix

---
 _data/courses/GYM-001.yml | 3 ++-
 _data/courses/GYM-002.yml | 3 ++-
 _data/courses/GYM-003.yml | 3 ++-
 _data/courses/GYM-004.yml | 3 ++-
 _data/courses/GYM-005.yml | 3 ++-
 _data/courses/GYM-006.yml | 3 ++-
 _data/courses/GYM-007.yml | 3 ++-
 _data/courses/GYM-008.yml | 3 ++-
 _data/courses/GYM-009.yml | 3 ++-
 _data/courses/GYM-011.yml | 3 ++-
 _data/courses/GYM-012.yml | 3 ++-
 _data/courses/GYM-013.yml | 3 ++-
 _data/courses/GYM-014.yml | 3 ++-
 _data/courses/GYM-015.yml | 3 ++-
 _data/courses/GYM-016.yml | 3 ++-
 _data/courses/GYM-017.yml | 3 ++-
 _data/courses/GYM-018.yml | 3 ++-
 _data/courses/GYM-019.yml | 3 ++-
 _data/courses/GYM-020.yml | 3 ++-
 _data/courses/GYM-100.yml | 3 ++-
 _data/courses/GYM-101.yml | 3 ++-
 _data/courses/GYM-102.yml | 3 ++-
 _data/courses/GYM-103.yml | 3 ++-
 _data/courses/GYM-104.yml | 3 ++-
 _data/courses/GYM-105.yml | 3 ++-
 _data/courses/GYM-106.yml | 3 ++-
 _data/courses/GYM-107.yml | 3 ++-
 _data/courses/GYM-108.yml | 3 ++-
 _data/courses/GYM-109.yml | 3 ++-
 _data/take5/GYM-5001.yml  | 8 +++++---
 _data/take5/GYM-5002.yml  | 7 ++++---
 _data/take5/GYM-5003.yml  | 7 ++++---
 _data/take5/GYM-5004.yml  | 7 ++++---
 _data/take5/GYM-5005.yml  | 7 ++++---
 _data/take5/GYM-5006.yml  | 7 ++++---
 _data/take5/GYM-5007.yml  | 7 ++++---
 _data/take5/GYM-5008.yml  | 7 ++++---
 _data/take5/GYM-5009.yml  | 7 ++++---
 _data/take5/GYM-5010.yml  | 7 ++++---
 _data/take5/GYM-5011.yml  | 7 ++++---
 _data/take5/GYM-5012.yml  | 7 ++++---
 _data/take5/GYM-5013.yml  | 7 ++++---
 _data/take5/GYM-5014.yml  | 7 ++++---
 _data/take5/GYM-5015.yml  | 7 ++++---
 _data/take5/GYM-5016.yml  | 7 ++++---
 _data/take5/GYM-5017.yml  | 7 ++++---
 _data/take5/GYM-5018.yml  | 7 ++++---
 _data/take5/GYM-5019.yml  | 7 ++++---
 _data/take5/GYM-5020.yml  | 7 ++++---
 _data/take5/GYM-5021.yml  | 7 ++++---
 _data/take5/GYM-5022.yml  | 7 ++++---
 _data/take5/GYM-5023.yml  | 7 ++++---
 _data/take5/GYM-5024.yml  | 7 ++++---
 _data/take5/GYM-5025.yml  | 7 ++++---
 _data/take5/GYM-5026.yml  | 7 ++++---
 _data/take5/GYM-5027.yml  | 7 ++++---
 _data/take5/GYM-5028.yml  | 7 ++++---
 _data/take5/GYM-5029.yml  | 7 ++++---
 _data/take5/GYM-5030.yml  | 7 ++++---
 _data/take5/GYM-5031.yml  | 7 ++++---
 _data/take5/GYM-5032.yml  | 7 ++++---
 _data/take5/GYM-5033.yml  | 7 ++++---
 _data/take5/GYM-5034.yml  | 7 ++++---
 _data/take5/GYM-5035.yml  | 7 ++++---
 _data/take5/GYM-5036.yml  | 7 ++++---
 _data/take5/GYM-5037.yml  | 7 ++++---
 _data/take5/GYM-5038.yml  | 7 ++++---
 _data/take5/GYM-5039.yml  | 7 ++++---
 _data/take5/GYM-5040.yml  | 7 ++++---
 _data/take5/GYM-5041.yml  | 7 ++++---
 _data/take5/GYM-5042.yml  | 7 ++++---
 _data/take5/GYM-5043.yml  | 7 ++++---
 _data/take5/GYM-5044.yml  | 7 ++++---
 _data/take5/GYM-5045.yml  | 7 ++++---
 _data/take5/GYM-5046.yml  | 7 ++++---
 _data/take5/GYM-5047.yml  | 7 ++++---
 _data/take5/GYM-5048.yml  | 7 ++++---
 _data/take5/GYM-5049.yml  | 7 ++++---
 _data/take5/GYM-5050.yml  | 7 ++++---
 _data/take5/GYM-5051.yml  | 7 ++++---
 _data/take5/GYM-5052.yml  | 7 ++++---
 _data/take5/GYM-5053.yml  | 7 ++++---
 _data/take5/GYM-5056.yml  | 7 ++++---
 83 files changed, 275 insertions(+), 191 deletions(-)

diff --git a/_data/courses/GYM-001.yml b/_data/courses/GYM-001.yml
index 072f5dac7..c9b0e9ca7 100644
--- a/_data/courses/GYM-001.yml
+++ b/_data/courses/GYM-001.yml
@@ -5,7 +5,8 @@ date: 2019-10-28T00:00:00-04:00
 course_type: short
 url: /courses/GYM/001/0/about
 poster_art: /img/course-artwork/png/gym-001.png
-img_bg_color: 2c9959
+og_gen_data:
+  img_bg_color: 2c9959
 live: true
 topic: "Career Skills"
 short_description: "Learn how to estimate, plan, track, and manage your time in order to complete projects. Being busy isn’t a bad thing, but not being in control of your own time is."
diff --git a/_data/courses/GYM-002.yml b/_data/courses/GYM-002.yml
index ad7969337..3385af06a 100644
--- a/_data/courses/GYM-002.yml
+++ b/_data/courses/GYM-002.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons. <span class='text-wrap'>We recommend taking the updated course <a href='https://thegymnasium.com/courses/course-v1:GYM+012+0/about'>Introduction to Node.js</a> (and earning a badge) instead.</span>"
 url: /courses/GYM/002/0/about
 poster_art: /img/course-artwork/png/gym-002.png
-img_bg_color: 764c9f
+og_gen_data:
+  img_bg_color: 764c9f
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Learn the basics of Node.js by building a “sample social” profile form."
diff --git a/_data/courses/GYM-003.yml b/_data/courses/GYM-003.yml
index ba02f4dae..a03e96ecd 100644
--- a/_data/courses/GYM-003.yml
+++ b/_data/courses/GYM-003.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons. <span class='text-wrap'>We recommend watching the tutorial <a href='https://thegymnasium.com/courses/take5/prototyping-in-the-browser-with-css-grid-layout'>Prototyping in the Browser with CSS Grid Layout</a> instead.</span>"
 url: /courses/GYM/003/0/about
 poster_art: /img/course-artwork/png/gym-003.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Get up to speed with the Twitter Bootstrap’s grid layout system and learn how to build a responsive layout that looks great on multiple screen sizes and devices."
diff --git a/_data/courses/GYM-004.yml b/_data/courses/GYM-004.yml
index 210be50d4..61d39ef25 100644
--- a/_data/courses/GYM-004.yml
+++ b/_data/courses/GYM-004.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/GYM/004/0/about
 poster_art: /img/course-artwork/png/gym-004.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "Learn how to convert your HTML/CSS design into a WordPress website. Discover how to set up a local development environment, and add WordPress tags to your design."
 instructor: ghodgkinson
diff --git a/_data/courses/GYM-005.yml b/_data/courses/GYM-005.yml
index c0e433d59..4db0eb8db 100644
--- a/_data/courses/GYM-005.yml
+++ b/_data/courses/GYM-005.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons."
 url: /courses/GYM/005/0/about
 poster_art: /img/course-artwork/png/gym-005.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-006.yml b/_data/courses/GYM-006.yml
index 4e2b7f3e3..7935c7608 100644
--- a/_data/courses/GYM-006.yml
+++ b/_data/courses/GYM-006.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/GYM/006/0/about
 poster_art: /img/course-artwork/png/gym-006.png
-img_bg_color: 2c9959
+og_gen_data:
+  img_bg_color: 2c9959
 topic: "Development"
 short_description: "Learn the basics of version control and get a high-level overview of both Git and GitHub. Perfect for someone with little to no first-hand experience with either."
 instructor: jausura
diff --git a/_data/courses/GYM-007.yml b/_data/courses/GYM-007.yml
index 73f4a6c92..53104e3fb 100644
--- a/_data/courses/GYM-007.yml
+++ b/_data/courses/GYM-007.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/GYM/007/0/about
 poster_art: /img/course-artwork/png/gym-007.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "Learn some of the latest standards and thinking around coding HTML forms using the new HTML5 tags and attributes."
 instructor: jkramer
diff --git a/_data/courses/GYM-008.yml b/_data/courses/GYM-008.yml
index e8c9b0659..70124f284 100644
--- a/_data/courses/GYM-008.yml
+++ b/_data/courses/GYM-008.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons."
 url: /courses/GYM/008/0/about
 poster_art: /img/course-artwork/png/gym-008.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-009.yml b/_data/courses/GYM-009.yml
index b08265e16..fc4100594 100644
--- a/_data/courses/GYM-009.yml
+++ b/_data/courses/GYM-009.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/GYM/009/0/about
 poster_art: /img/course-artwork/png/gym-009.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This course will teach you how to create themes for Drupal 8. Specifically, you will learn how to install a local development environment for Drupal 8, and use the new TWIG templating engine to customize the structure and style of your theme."
 instructor: ghodgkinson
diff --git a/_data/courses/GYM-011.yml b/_data/courses/GYM-011.yml
index 6360c9e1e..1b2f07e8c 100644
--- a/_data/courses/GYM-011.yml
+++ b/_data/courses/GYM-011.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+011+0/about
 poster_art: /img/course-artwork/png/gym-011.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "In this course, you will get a familiarity with all aspects of the built-in developer tools within the Chrome browser. Understanding how to use these tools will speed up your development time and help you create bug-free, high-performing pages and web applications."
 instructor: kpeters
diff --git a/_data/courses/GYM-012.yml b/_data/courses/GYM-012.yml
index 7691845be..ad8162ce5 100644
--- a/_data/courses/GYM-012.yml
+++ b/_data/courses/GYM-012.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+012+0/about
 poster_art: /img/course-artwork/png/gym-012.png
-img_bg_color: 764c9f
+og_gen_data:
+  img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-013.yml b/_data/courses/GYM-013.yml
index 6942ffccb..202465a75 100644
--- a/_data/courses/GYM-013.yml
+++ b/_data/courses/GYM-013.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+013+0/about
 poster_art: /img/course-artwork/png/gym-013.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "Design"
 short_description: "Learn how to create 3D generated imagery in Maya for use in Virtual Reality production."
 instructor: groberts
diff --git a/_data/courses/GYM-014.yml b/_data/courses/GYM-014.yml
index 8a236a12b..1654e416d 100644
--- a/_data/courses/GYM-014.yml
+++ b/_data/courses/GYM-014.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+014+0/about
 poster_art: /img/course-artwork/png/gym-014.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "Development"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-015.yml b/_data/courses/GYM-015.yml
index 358b24211..6cd6bf4da 100644
--- a/_data/courses/GYM-015.yml
+++ b/_data/courses/GYM-015.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+015+0/about
 poster_art: /img/course-artwork/png/gym-015.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "UX"
 subtopics:
   - label: "Prototyping"
diff --git a/_data/courses/GYM-016.yml b/_data/courses/GYM-016.yml
index 1254e95d8..ac6d1d51f 100644
--- a/_data/courses/GYM-016.yml
+++ b/_data/courses/GYM-016.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+016+0/about
 poster_art: /img/course-artwork/png/gym-016.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 subtopics:
   - label: "Accessibility"
diff --git a/_data/courses/GYM-017.yml b/_data/courses/GYM-017.yml
index 3ed6d1a1f..7cb99fc28 100644
--- a/_data/courses/GYM-017.yml
+++ b/_data/courses/GYM-017.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+017+0/about
 poster_art: /img/course-artwork/png/gym-017.png
-img_bg_color: 2c9959
+og_gen_data:
+  img_bg_color: 2c9959
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-018.yml b/_data/courses/GYM-018.yml
index 957740cbb..b2862472b 100644
--- a/_data/courses/GYM-018.yml
+++ b/_data/courses/GYM-018.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+018+0/about
 poster_art: /img/course-artwork/png/gym-018.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-019.yml b/_data/courses/GYM-019.yml
index 9d3a9f9ea..579f7ec18 100644
--- a/_data/courses/GYM-019.yml
+++ b/_data/courses/GYM-019.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+019+0/about
 poster_art: /img/course-artwork/png/gym-019.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-020.yml b/_data/courses/GYM-020.yml
index 6138d8228..549ca3d34 100644
--- a/_data/courses/GYM-020.yml
+++ b/_data/courses/GYM-020.yml
@@ -6,7 +6,8 @@ course_type: short
 live: true
 url: /courses/course-v1:GYM+020+0/about
 poster_art: /img/course-artwork/png/gym-020.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "Design"
 subtopics:
   - label: "Design Systems"
diff --git a/_data/courses/GYM-100.yml b/_data/courses/GYM-100.yml
index cd891139e..16d060057 100644
--- a/_data/courses/GYM-100.yml
+++ b/_data/courses/GYM-100.yml
@@ -9,7 +9,8 @@ retired_message:
   2: "<strong>This course has been retired.</strong> We recommend taking the course <a href='https://thegymnasium.com/courses/GYM/107/0/about'>Modern Web Design</a> instead. It’s a bit more advanced, but we think you’d get a lot out of it."
 url: /courses/GYM/100/0/about
 poster_art: /img/course-artwork/png/gym-100.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "Learn HTML and CSS and become the Web Designer that Developers love. Professional design experience is a prerequisite, but no prior web or coding experience is necessary."
diff --git a/_data/courses/GYM-101.yml b/_data/courses/GYM-101.yml
index e966255b9..f7eb67da4 100644
--- a/_data/courses/GYM-101.yml
+++ b/_data/courses/GYM-101.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong> Due to outdated content, we don’t offer a certificate for this course, but you can still view the lessons. <span class='text-wrap'>We recommend taking the course <a href='https://thegymnasium.com/courses/course-v1:GYM+109+0/about'>Responsive Web Design Fundamentals</a> (and earning a certificate) instead.</span>"
 url: /courses/GYM/101/0/about
 poster_art: /img/course-artwork/png/gym-101.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This course has been retired."
 short_description_orig: "In this course, you’ll learn best practices for building responsive websites that adapt to different devices and user behaviors."
diff --git a/_data/courses/GYM-102.yml b/_data/courses/GYM-102.yml
index 7048887c5..80eb3f324 100644
--- a/_data/courses/GYM-102.yml
+++ b/_data/courses/GYM-102.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/GYM/102/0/about
 poster_art: /img/course-artwork/png/gym-102.png
-img_bg_color: 764c9f
+og_gen_data:
+  img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-103.yml b/_data/courses/GYM-103.yml
index 2ba1e5db1..8119c612f 100644
--- a/_data/courses/GYM-103.yml
+++ b/_data/courses/GYM-103.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/GYM/103/0/about
 poster_art: /img/course-artwork/png/gym-103.png
-img_bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color: 5ca5a0
 topic: "UX"
 short_description: "Learn how to apply user-centered design principles to improve your website and mobile app design. A must-take course for anyone working in design and development."
 instructor: jwebb
diff --git a/_data/courses/GYM-104.yml b/_data/courses/GYM-104.yml
index 7abda47b0..fdfd3362f 100644
--- a/_data/courses/GYM-104.yml
+++ b/_data/courses/GYM-104.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/GYM/104/0/about
 poster_art: /img/course-artwork/png/gym-104.png
-img_bg_color: 764c9f
+og_gen_data:
+  img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-105.yml b/_data/courses/GYM-105.yml
index 425892be9..9787273ae 100644
--- a/_data/courses/GYM-105.yml
+++ b/_data/courses/GYM-105.yml
@@ -8,7 +8,8 @@ retired_message:
   1: "<strong>This course has been retired.</strong>"
 url: /courses/GYM/105/0/about
 poster_art: /img/course-artwork/png/gym-105.png
-img_bg_color: 2c9959
+og_gen_data:
+  img_bg_color: 2c9959
 topic: "Career Skills"
 short_description: "This course has been retired."
 short_description_orig: "Learn how to write compelling content through meaningful audience research and find the right words to attract and engage users."
diff --git a/_data/courses/GYM-106.yml b/_data/courses/GYM-106.yml
index 94257d3c6..b8f4dd500 100644
--- a/_data/courses/GYM-106.yml
+++ b/_data/courses/GYM-106.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/GYM/106/0/about
 poster_art: /img/course-artwork/png/gym-106.png
-img_bg_color: 2c9959
+og_gen_data:
+  img_bg_color: 2c9959
 topic: "Design"
 short_description: "Learn the design and visual principles needed to create effective information graphics and data visualizations."
 instructor: groberts
diff --git a/_data/courses/GYM-107.yml b/_data/courses/GYM-107.yml
index f1874190b..d57a67fd5 100644
--- a/_data/courses/GYM-107.yml
+++ b/_data/courses/GYM-107.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/GYM/107/0/about
 poster_art: /img/course-artwork/png/gym-107.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This course will prepare you to be a front-end developer by walking you through the process of building a simple, responsive website using HTML, CSS, and JavaScript."
 instructor: agustafson
diff --git a/_data/courses/GYM-108.yml b/_data/courses/GYM-108.yml
index e684bde0b..c21eee255 100644
--- a/_data/courses/GYM-108.yml
+++ b/_data/courses/GYM-108.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/course-v1:GYM+108+0/about
 poster_art: /img/course-artwork/png/gym-108.png
-img_bg_color: 764c9f
+og_gen_data:
+  img_bg_color: 764c9f
 topic: "Development"
 subtopics:
   - label: "JavaScript"
diff --git a/_data/courses/GYM-109.yml b/_data/courses/GYM-109.yml
index 341b2fcb3..d6a251e40 100644
--- a/_data/courses/GYM-109.yml
+++ b/_data/courses/GYM-109.yml
@@ -6,7 +6,8 @@ course_type: full
 live: true
 url: /courses/course-v1:GYM+109+0/about
 poster_art: /img/course-artwork/png/gym-109.png
-img_bg_color: d73158
+og_gen_data:
+  img_bg_color: d73158
 topic: "Development"
 short_description: "This is a hands-on, code-intensive course on how to build high-performance, responsive websites that look great across multiple screen sizes and devices."
 instructor: jpamental
diff --git a/_data/take5/GYM-5001.yml b/_data/take5/GYM-5001.yml
index e7c5ed088..96142492d 100644
--- a/_data/take5/GYM-5001.yml
+++ b/_data/take5/GYM-5001.yml
@@ -5,9 +5,11 @@ date: 2019-10-28T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5001/
 poster_art: /img/take5/posters/gym-5001.jpg
-img_bg_color:
-img_offset: 520
-bg_color: d73158
+og_gen_data:
+og_gen_data:
+  img_bg_color:
+  img_offset: 520
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5002.yml b/_data/take5/GYM-5002.yml
index 5fe33208b..b60ace536 100644
--- a/_data/take5/GYM-5002.yml
+++ b/_data/take5/GYM-5002.yml
@@ -5,9 +5,10 @@ date: 2019-10-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5002/
 poster_art: /img/take5/posters/gym-5002.jpg
-img_bg_color:
-img_offset: 520
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 520
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5003.yml b/_data/take5/GYM-5003.yml
index dd60e5f64..e83e0b01c 100644
--- a/_data/take5/GYM-5003.yml
+++ b/_data/take5/GYM-5003.yml
@@ -5,9 +5,10 @@ date: 2019-10-30T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5003/
 poster_art: /img/take5/posters/gym-5003.jpg
-img_bg_color:
-img_offset: 315
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 315
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5004.yml b/_data/take5/GYM-5004.yml
index 859d93b33..bb8f7356e 100644
--- a/_data/take5/GYM-5004.yml
+++ b/_data/take5/GYM-5004.yml
@@ -5,9 +5,10 @@ date: 2019-10-31T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5004/
 poster_art: /img/take5/posters/gym-5004.jpg
-img_bg_color:
-img_offset: 385
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 385
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5005.yml b/_data/take5/GYM-5005.yml
index 1a774e79b..945e6097d 100644
--- a/_data/take5/GYM-5005.yml
+++ b/_data/take5/GYM-5005.yml
@@ -5,9 +5,10 @@ date: 2019-11-01T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5005/
 poster_art: /img/take5/posters/gym-5005.jpg
-img_bg_color:
-img_offset: 385
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 385
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5006.yml b/_data/take5/GYM-5006.yml
index 4d143b95c..fb38fcba7 100644
--- a/_data/take5/GYM-5006.yml
+++ b/_data/take5/GYM-5006.yml
@@ -5,9 +5,10 @@ date: 2019-11-18T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5006/
 poster_art: /img/take5/posters/gym-5006.jpg
-img_bg_color:
-img_offset: 280
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 280
+  bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5007.yml b/_data/take5/GYM-5007.yml
index 39d32c84e..f1bbcf248 100644
--- a/_data/take5/GYM-5007.yml
+++ b/_data/take5/GYM-5007.yml
@@ -5,9 +5,10 @@ date: 2019-11-19T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5007/
 poster_art: /img/take5/posters/gym-5007.jpg
-img_bg_color:
-img_offset: 100
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 100
+  bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5008.yml b/_data/take5/GYM-5008.yml
index 0a8b35777..9b6cc5e1b 100644
--- a/_data/take5/GYM-5008.yml
+++ b/_data/take5/GYM-5008.yml
@@ -5,9 +5,10 @@ date: 2019-11-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5008/
 poster_art: /img/take5/posters/gym-5008.jpg
-img_bg_color:
-img_offset: 335
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 335
+  bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5009.yml b/_data/take5/GYM-5009.yml
index 0016b4d10..995eeb132 100644
--- a/_data/take5/GYM-5009.yml
+++ b/_data/take5/GYM-5009.yml
@@ -5,9 +5,10 @@ date: 2019-11-21T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5009/
 poster_art: /img/take5/posters/gym-5009.jpg
-img_bg_color:
-img_offset: 205
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 205
+  bg_color: 5ca5a0
 live: true
 instructor: "Heather O’Neill"
 instructor_bio: "CEO of Pixels for Humans"
diff --git a/_data/take5/GYM-5010.yml b/_data/take5/GYM-5010.yml
index 9b94ce3b5..66303cb6d 100644
--- a/_data/take5/GYM-5010.yml
+++ b/_data/take5/GYM-5010.yml
@@ -5,9 +5,10 @@ date: 2019-11-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5010/
 poster_art: /img/take5/posters/gym-5010.jpg
-img_bg_color:
-img_offset: 187
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 187
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5011.yml b/_data/take5/GYM-5011.yml
index 8b776a4be..4edd1762a 100644
--- a/_data/take5/GYM-5011.yml
+++ b/_data/take5/GYM-5011.yml
@@ -5,9 +5,10 @@ date: 2019-11-04T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5011/
 poster_art: /img/take5/posters/gym-5011.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5012.yml b/_data/take5/GYM-5012.yml
index 9eba53793..c6a466d78 100644
--- a/_data/take5/GYM-5012.yml
+++ b/_data/take5/GYM-5012.yml
@@ -5,9 +5,10 @@ date: 2019-11-05T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5012/
 poster_art: /img/take5/posters/gym-5012.jpg
-img_bg_color:
-img_offset: 685
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 685
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5013.yml b/_data/take5/GYM-5013.yml
index 2a9e4e68a..bd795eeae 100644
--- a/_data/take5/GYM-5013.yml
+++ b/_data/take5/GYM-5013.yml
@@ -5,9 +5,10 @@ date: 2019-11-06T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5013/
 poster_art: /img/take5/posters/gym-5013.jpg
-img_bg_color:
-img_offset: 510
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 510
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5014.yml b/_data/take5/GYM-5014.yml
index 3822dc2f2..32d25d364 100644
--- a/_data/take5/GYM-5014.yml
+++ b/_data/take5/GYM-5014.yml
@@ -5,9 +5,10 @@ date: 2019-11-07T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5014/
 poster_art: /img/take5/posters/gym-5014.jpg
-img_bg_color:
-img_offset: 355
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 355
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5015.yml b/_data/take5/GYM-5015.yml
index 8bb44372d..852dcbfcc 100644
--- a/_data/take5/GYM-5015.yml
+++ b/_data/take5/GYM-5015.yml
@@ -5,9 +5,10 @@ date: 2019-11-08T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5015/
 poster_art: /img/take5/posters/gym-5015.jpg
-img_bg_color:
-img_offset: 795
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset: 795
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5016.yml b/_data/take5/GYM-5016.yml
index 143a05cf5..21abbc26f 100644
--- a/_data/take5/GYM-5016.yml
+++ b/_data/take5/GYM-5016.yml
@@ -5,9 +5,10 @@ date: 2019-11-11T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5016/
 poster_art: /img/take5/posters/gym-5016.jpg
-img_bg_color:
-img_offset: 70
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset: 70
+  bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5017.yml b/_data/take5/GYM-5017.yml
index ed6ea605d..e575b5e04 100644
--- a/_data/take5/GYM-5017.yml
+++ b/_data/take5/GYM-5017.yml
@@ -5,9 +5,10 @@ date: 2019-11-12T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5017/
 poster_art: /img/take5/posters/gym-5017.jpg
-img_bg_color:
-img_offset: 175
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset: 175
+  bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
 instructor_bio: "Creative Coach"
diff --git a/_data/take5/GYM-5018.yml b/_data/take5/GYM-5018.yml
index 5b09d1399..fd67ea446 100644
--- a/_data/take5/GYM-5018.yml
+++ b/_data/take5/GYM-5018.yml
@@ -5,9 +5,10 @@ date: 2019-11-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5018/
 poster_art: /img/take5/posters/gym-5018.jpg
-img_bg_color:
-img_offset: 95
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset: 95
+  bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5019.yml b/_data/take5/GYM-5019.yml
index 8b9067136..839f11de9 100644
--- a/_data/take5/GYM-5019.yml
+++ b/_data/take5/GYM-5019.yml
@@ -5,9 +5,10 @@ date: 2019-11-14T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5019/
 poster_art: /img/take5/posters/gym-5019.jpg
-img_bg_color:
-img_offset: 390
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset: 390
+  bg_color: 2c9959
 live: true
 instructor: "Anne Ditmeyer"
 instructor_bio: "Creative Coach"
diff --git a/_data/take5/GYM-5020.yml b/_data/take5/GYM-5020.yml
index e41d4e469..1cc214f85 100644
--- a/_data/take5/GYM-5020.yml
+++ b/_data/take5/GYM-5020.yml
@@ -5,9 +5,10 @@ date: 2019-11-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5020/
 poster_art: /img/take5/posters/gym-5020.jpg
-img_bg_color:
-img_offset: 365
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset: 365
+  bg_color: 2c9959
 live: true
 instructor: "Lee Andrese"
 instructor_bio: "Vice President of Learning and Development at Onward Search"
diff --git a/_data/take5/GYM-5021.yml b/_data/take5/GYM-5021.yml
index cce399057..87b16571a 100644
--- a/_data/take5/GYM-5021.yml
+++ b/_data/take5/GYM-5021.yml
@@ -5,9 +5,10 @@ date: 2019-12-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5021/
 poster_art: /img/take5/posters/gym-5021.jpg
-img_bg_color:
-img_offset: 50
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset: 50
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5022.yml b/_data/take5/GYM-5022.yml
index d9804aed0..2398e5f38 100644
--- a/_data/take5/GYM-5022.yml
+++ b/_data/take5/GYM-5022.yml
@@ -5,9 +5,10 @@ date: 2019-12-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5022/
 poster_art: /img/take5/posters/gym-5022.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5023.yml b/_data/take5/GYM-5023.yml
index 24f7207ea..5dbd866e6 100644
--- a/_data/take5/GYM-5023.yml
+++ b/_data/take5/GYM-5023.yml
@@ -5,9 +5,10 @@ date: 2020-01-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5023/
 poster_art: /img/take5/posters/gym-5023.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5024.yml b/_data/take5/GYM-5024.yml
index 97271f73a..98e6bbe63 100644
--- a/_data/take5/GYM-5024.yml
+++ b/_data/take5/GYM-5024.yml
@@ -5,9 +5,10 @@ date: 2020-01-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5024/
 poster_art: /img/take5/posters/gym-5024.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5025.yml b/_data/take5/GYM-5025.yml
index 06c1ae56e..fa123554a 100644
--- a/_data/take5/GYM-5025.yml
+++ b/_data/take5/GYM-5025.yml
@@ -5,9 +5,10 @@ date: 2020-01-27T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5025/
 poster_art: /img/take5/posters/gym-5025.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5026.yml b/_data/take5/GYM-5026.yml
index 9f2c65d02..6416a1c4e 100644
--- a/_data/take5/GYM-5026.yml
+++ b/_data/take5/GYM-5026.yml
@@ -5,9 +5,10 @@ date: 2020-02-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5026/
 poster_art: /img/take5/posters/gym-5026.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Mike Bifulco"
 instructor_bio: "Developer Advocate at Stripe"
diff --git a/_data/take5/GYM-5027.yml b/_data/take5/GYM-5027.yml
index 27aaaf06c..5bc4157fc 100644
--- a/_data/take5/GYM-5027.yml
+++ b/_data/take5/GYM-5027.yml
@@ -5,9 +5,10 @@ date: 2020-02-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5027/
 poster_art: /img/take5/posters/gym-5027.jpg
-img_bg_color:
-img_offset:
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 2c9959
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5028.yml b/_data/take5/GYM-5028.yml
index 9039e3dc5..b78a87a65 100644
--- a/_data/take5/GYM-5028.yml
+++ b/_data/take5/GYM-5028.yml
@@ -5,9 +5,10 @@ date: 2020-02-17T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5028/
 poster_art: /img/take5/posters/gym-5028.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5029.yml b/_data/take5/GYM-5029.yml
index 08e6109c6..0bcd31c37 100644
--- a/_data/take5/GYM-5029.yml
+++ b/_data/take5/GYM-5029.yml
@@ -5,9 +5,10 @@ date: 2020-02-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5029/
 poster_art: /img/take5/posters/gym-5029.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5030.yml b/_data/take5/GYM-5030.yml
index 71b8c256e..c43dd2c81 100644
--- a/_data/take5/GYM-5030.yml
+++ b/_data/take5/GYM-5030.yml
@@ -5,9 +5,10 @@ date: 2020-03-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5030/
 poster_art: /img/take5/posters/gym-5030.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5031.yml b/_data/take5/GYM-5031.yml
index a186d05f2..c1a4c255c 100644
--- a/_data/take5/GYM-5031.yml
+++ b/_data/take5/GYM-5031.yml
@@ -5,9 +5,10 @@ date: 2020-03-31T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5031/
 poster_art: /img/take5/posters/gym-5031.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5032.yml b/_data/take5/GYM-5032.yml
index 900ab239c..428932554 100644
--- a/_data/take5/GYM-5032.yml
+++ b/_data/take5/GYM-5032.yml
@@ -5,9 +5,10 @@ date: 2020-06-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5032/
 poster_art: /img/take5/posters/gym-5032.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5033.yml b/_data/take5/GYM-5033.yml
index c61621aa1..540058af7 100644
--- a/_data/take5/GYM-5033.yml
+++ b/_data/take5/GYM-5033.yml
@@ -5,9 +5,10 @@ date: 2020-06-23T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5033/
 poster_art: /img/take5/posters/gym-5033.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5034.yml b/_data/take5/GYM-5034.yml
index df6fc0674..3681fface 100644
--- a/_data/take5/GYM-5034.yml
+++ b/_data/take5/GYM-5034.yml
@@ -5,9 +5,10 @@ date: 2020-06-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5034/
 poster_art: /img/take5/posters/gym-5034.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5035.yml b/_data/take5/GYM-5035.yml
index 1351c8140..6265ce7aa 100644
--- a/_data/take5/GYM-5035.yml
+++ b/_data/take5/GYM-5035.yml
@@ -5,9 +5,10 @@ date: 2020-06-25T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5035/
 poster_art: /img/take5/posters/gym-5035.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5036.yml b/_data/take5/GYM-5036.yml
index add7ce2ca..d78c83249 100644
--- a/_data/take5/GYM-5036.yml
+++ b/_data/take5/GYM-5036.yml
@@ -5,9 +5,10 @@ date: 2020-06-26T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5036/
 poster_art: /img/take5/posters/gym-5036.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Ethan Marcotte"
 instructor_bio: "Partner at Autogram"
diff --git a/_data/take5/GYM-5037.yml b/_data/take5/GYM-5037.yml
index 3a89fb3b0..516ab39d3 100644
--- a/_data/take5/GYM-5037.yml
+++ b/_data/take5/GYM-5037.yml
@@ -5,9 +5,10 @@ date: 2020-09-02T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5037/
 poster_art: /img/take5/posters/gym-5037.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5038.yml b/_data/take5/GYM-5038.yml
index 4973ba37b..c4305c94a 100644
--- a/_data/take5/GYM-5038.yml
+++ b/_data/take5/GYM-5038.yml
@@ -5,9 +5,10 @@ date: 2020-09-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5038/
 poster_art: /img/take5/posters/gym-5038.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5039.yml b/_data/take5/GYM-5039.yml
index 8c535e238..807850b3d 100644
--- a/_data/take5/GYM-5039.yml
+++ b/_data/take5/GYM-5039.yml
@@ -5,9 +5,10 @@ date: 2020-09-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5039/
 poster_art: /img/take5/posters/gym-5039.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5040.yml b/_data/take5/GYM-5040.yml
index e0bab7a27..297142c15 100644
--- a/_data/take5/GYM-5040.yml
+++ b/_data/take5/GYM-5040.yml
@@ -5,9 +5,10 @@ date: 2020-09-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5040/
 poster_art: /img/take5/posters/gym-5040.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5041.yml b/_data/take5/GYM-5041.yml
index 0e33c8a91..3338a3672 100644
--- a/_data/take5/GYM-5041.yml
+++ b/_data/take5/GYM-5041.yml
@@ -5,9 +5,10 @@ date: 2020-10-06T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5041/
 poster_art: /img/take5/posters/gym-5041.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5042.yml b/_data/take5/GYM-5042.yml
index c6164e81e..157771209 100644
--- a/_data/take5/GYM-5042.yml
+++ b/_data/take5/GYM-5042.yml
@@ -5,9 +5,10 @@ date: 2020-10-13T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5042/
 poster_art: /img/take5/posters/gym-5042.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5043.yml b/_data/take5/GYM-5043.yml
index a541a1be5..96927102f 100644
--- a/_data/take5/GYM-5043.yml
+++ b/_data/take5/GYM-5043.yml
@@ -5,9 +5,10 @@ date: 2020-10-20T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5043/
 poster_art: /img/take5/posters/gym-5043.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5044.yml b/_data/take5/GYM-5044.yml
index e55cb6341..c4242c7b4 100644
--- a/_data/take5/GYM-5044.yml
+++ b/_data/take5/GYM-5044.yml
@@ -5,9 +5,10 @@ date: 2020-10-27T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5044/
 poster_art: /img/take5/posters/gym-5044.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5045.yml b/_data/take5/GYM-5045.yml
index c6d1e9a84..282330a03 100644
--- a/_data/take5/GYM-5045.yml
+++ b/_data/take5/GYM-5045.yml
@@ -5,9 +5,10 @@ date: 2020-11-03T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5045/
 poster_art: /img/take5/posters/gym-5045.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5046.yml b/_data/take5/GYM-5046.yml
index a8e4ab37a..e87fb1d88 100644
--- a/_data/take5/GYM-5046.yml
+++ b/_data/take5/GYM-5046.yml
@@ -5,9 +5,10 @@ date: 2020-11-10T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5046/
 poster_art: /img/take5/posters/gym-5046.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5047.yml b/_data/take5/GYM-5047.yml
index d762b41dd..bb032338d 100644
--- a/_data/take5/GYM-5047.yml
+++ b/_data/take5/GYM-5047.yml
@@ -5,9 +5,10 @@ date: 2020-11-17T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5047/
 poster_art: /img/take5/posters/gym-5047.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5048.yml b/_data/take5/GYM-5048.yml
index 9fef46a6c..6a43e9346 100644
--- a/_data/take5/GYM-5048.yml
+++ b/_data/take5/GYM-5048.yml
@@ -5,9 +5,10 @@ date: 2020-11-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5048/
 poster_art: /img/take5/posters/gym-5048.jpg
-img_bg_color:
-img_offset:
-bg_color: d73158
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: d73158
 live: true
 instructor: "Clarissa Peterson"
 instructor_bio: "Strategy Director at Forum One"
diff --git a/_data/take5/GYM-5049.yml b/_data/take5/GYM-5049.yml
index 5e02657b4..d10092ece 100644
--- a/_data/take5/GYM-5049.yml
+++ b/_data/take5/GYM-5049.yml
@@ -5,9 +5,10 @@ date: 2021-06-01T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5049/
 poster_art: /img/take5/posters/gym-5049.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5050.yml b/_data/take5/GYM-5050.yml
index 4262e6f18..38b3b57a6 100644
--- a/_data/take5/GYM-5050.yml
+++ b/_data/take5/GYM-5050.yml
@@ -5,9 +5,10 @@ date: 2021-06-15T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5050/
 poster_art: /img/take5/posters/gym-5050.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5051.yml b/_data/take5/GYM-5051.yml
index 9dc88dfe4..4796d9dcb 100644
--- a/_data/take5/GYM-5051.yml
+++ b/_data/take5/GYM-5051.yml
@@ -5,9 +5,10 @@ date: 2021-06-29T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5051/
 poster_art: /img/take5/posters/gym-5051.jpg
-img_bg_color:
-img_offset:
-bg_color: 5ca5a0
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 5ca5a0
 live: true
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5052.yml b/_data/take5/GYM-5052.yml
index 8908430ce..e2668b70b 100644
--- a/_data/take5/GYM-5052.yml
+++ b/_data/take5/GYM-5052.yml
@@ -5,9 +5,10 @@ date: 2022-08-22T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5052/
 poster_art: /img/take5/posters/gym-5052.jpg
-img_bg_color:
-img_offset:
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 2c9959
 live: false
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5053.yml b/_data/take5/GYM-5053.yml
index da83b6088..7839b97d5 100644
--- a/_data/take5/GYM-5053.yml
+++ b/_data/take5/GYM-5053.yml
@@ -5,9 +5,10 @@ date: 2022-08-24T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5053/
 poster_art: /img/take5/posters/gym-5053.jpg
-img_bg_color:
-img_offset:
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 2c9959
 live: false
 instructor: "Jeremy Osborn"
 instructor_bio: "Director of Learning at Aquent Gymnasium"
diff --git a/_data/take5/GYM-5056.yml b/_data/take5/GYM-5056.yml
index 812a6be47..fde9c3724 100644
--- a/_data/take5/GYM-5056.yml
+++ b/_data/take5/GYM-5056.yml
@@ -4,9 +4,10 @@ title: "Taking Your Portfolio Case Studies to the Next Level"
 date: 2022-12-05T00:00:00-04:00
 course_type: take5
 url: /courses/take5/GYM-5056/
-img_bg_color:
-img_offset:
-bg_color: 2c9959
+og_gen_data:
+  img_bg_color:
+  img_offset:
+  bg_color: 2c9959
 poster_art: /img/take5/posters/gym-5056.jpg
 live: false
 instructor: "Jeremy Osborn"

From 352747bd5467e5999d3c14d1d48ac6b46503345d Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 6 Mar 2023 15:41:58 -0500
Subject: [PATCH 75/77] README for /og-image

---
 .netlify/functions/README.md | 13 +++++++++++++
 _config.yml                  |  1 +
 _dev_config.yml              |  1 +
 _local_config.yml            |  1 +
 _production_config.yml       |  1 +
 5 files changed, 17 insertions(+)
 create mode 100644 .netlify/functions/README.md

diff --git a/.netlify/functions/README.md b/.netlify/functions/README.md
new file mode 100644
index 000000000..f22362eec
--- /dev/null
+++ b/.netlify/functions/README.md
@@ -0,0 +1,13 @@
+# Netlify Edge Functions
+
+
+## OG Image Generator
+Path: `/og-image`
+
+
+### Layouts
+
+#### Logo only
+
+
+
diff --git a/_config.yml b/_config.yml
index 146e0f9e0..50ef6367f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -16,6 +16,7 @@ exclude:
   - 'netlify.toml'
   - '.jekyll-cache'
   - 'local'
+  - '.netlify/functions/README.md'
 
 include:
   - '_redirects'
diff --git a/_dev_config.yml b/_dev_config.yml
index df8d5c408..c6a72740f 100644
--- a/_dev_config.yml
+++ b/_dev_config.yml
@@ -16,6 +16,7 @@ exclude:
   - 'netlify.toml'
   - '.jekyll-cache'
   - 'local'
+  - '.netlify/functions/README.md'
 
 include:
   - '_redirects'
diff --git a/_local_config.yml b/_local_config.yml
index 719e2a238..3633d38f6 100644
--- a/_local_config.yml
+++ b/_local_config.yml
@@ -15,6 +15,7 @@ exclude:
   - 'README.md'
   - 'netlify.toml'
   - '.jekyll-cache'
+  - '.netlify/functions/README.md'
 
 include:
   - '_redirects'
diff --git a/_production_config.yml b/_production_config.yml
index 6d6486d7b..b9064b8ac 100644
--- a/_production_config.yml
+++ b/_production_config.yml
@@ -16,6 +16,7 @@ exclude:
   - 'netlify.toml'
   - '.jekyll-cache'
   - 'local'
+  - '.netlify/functions/README.md'
 
 include:
   - '_redirects'

From 4fa95d5afd1f2ec5aab3080e6734876a4cf0c77a Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Mon, 6 Mar 2023 15:50:21 -0500
Subject: [PATCH 76/77] Update README.md

---
 .netlify/functions/README.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/.netlify/functions/README.md b/.netlify/functions/README.md
index f22362eec..d042eb32d 100644
--- a/.netlify/functions/README.md
+++ b/.netlify/functions/README.md
@@ -1,13 +1,27 @@
 # Netlify Edge Functions
-
+Below is a list of the edge functions we currently have.
 
 ## OG Image Generator
+
 Path: `/og-image`
 
+Accepted parameters:
+ - `?id=gym-100`
+ - `?path=courses/take5`
+
+The parameters are used in turn to look up entries in the `/feeds/data.json` file, which provides everything we need to render content specific to each course.
 
 ### Layouts
+Most layouts are automatically determined by the id or path passed in.
 
 #### Logo only
+Visiting `/og-image` without any parameters will display the single column logo only layout.
 
+#### Two-Column Layouts
+All courses use a two-column layout. 
 
+##### Full & Short Course Layouts
+Standard course layouts use a course icon/badge and a hex color value to color the background area behind the icon.
 
+##### Take 5 Tutorial Layouts
+Take 5 tutorials are visually different from course layouts, utilizing a custom image and an image offset.

From 4f41e4954f13b8a2e93fbac9515935c4ffd15361 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 7 Mar 2023 11:03:43 -0500
Subject: [PATCH 77/77] Add Satori reference

---
 .netlify/functions/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.netlify/functions/README.md b/.netlify/functions/README.md
index d042eb32d..a406bc46a 100644
--- a/.netlify/functions/README.md
+++ b/.netlify/functions/README.md
@@ -25,3 +25,6 @@ Standard course layouts use a course icon/badge and a hex color value to color t
 
 ##### Take 5 Tutorial Layouts
 Take 5 tutorials are visually different from course layouts, utilizing a custom image and an image offset.
+
+### Additional Documentation
+- [Satori](https://github.com/vercel/satori) - documentation on the Satori library, by Vercel. Of particular interest should be the section on permissible CSS.