Merge pull request #340 from Shinsina/podcast-adjustments

Podcast Social Link Adjustments

packages/global/components/layouts/website-section/podcast-feed.marko

@@ -140,12 +140,24 @@ $ const perPage = 10;
     </h5>
     <theme-content-contact-details-section block-name="social-follow" modifiers=["social-links"]>
       <for|item| of=podcastLinks>
-        <theme-social-icon-link
-          label=item.label
-          provider=item.provider
-          href=item.href
-          modifiers=["dark", "xl"]
-        />
+        <if(item.label !== "Amazon")>
+          <theme-social-icon-link
+            label=item.label
+            provider=item.provider
+            href=item.href
+            target="_blank"
+            modifiers=["dark", "xl", "podcast-icon"]
+          />
+        </if>
+        <else>
+          <global-social-icon-link
+            label=item.label
+            provider=item.provider
+            href=item.href
+            target="_blank"
+            modifiers=["dark", "xl", "podcast-icon"]
+          />
+        </else>
       </for>
     </theme-content-contact-details-section>
   </@section>

packages/global/components/marko.json

@@ -36,5 +36,8 @@
   },
   "<global-site-footer>": {
     "template": "./site-footer.marko"
+  },
+  "<global-social-icon-link>": {
+    "template": "./social-icon-link.marko"
   }
 }

packages/global/components/social-icon-link.marko

@@ -0,0 +1,54 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { get } from "@parameter1/base-cms-object-path";
+import createClasses from "@parameter1/base-cms-marko-web-icons/utils/create-classes";
+
+$ const  getProvider = ({ provider, label }) => {
+  let formatted = provider ? `${provider}`.toLowerCase() : '';
+  if (formatted === 'other' && label) formatted = `${label}`.toLowerCase();
+  return formatted;
+};
+
+$ const load = () => {
+  try {
+    const file = resolve(__dirname, `../svg/${input.provider}.svg`);
+    return readFileSync(file, 'utf8').toString();
+  } catch (e) {
+    return null;
+  }
+};
+
+$ const blockName = input.blockName || 'marko-web-icon';
+$ const className = input.className || "social-icon-link";
+
+$ const provider = get(input, "provider", "");
+$ const label = get(input, "label", "");
+
+$ const formatted = getProvider({ provider, label });
+$ const name = label || provider;
+$ const title = name ? `Visit us on ${name.charAt(0).toUpperCase()}${name.slice(1)}` : null;
+$ const svg = load();
+
+$ const classNames = createClasses({
+  iconName: name,
+  blockName,
+  modifiers: input.modifiers,
+});
+
+<if(formatted && input.href && svg)>
+  $ const tag = input.tag || 'span';
+  <marko-web-link
+    class=className
+    href=input.href
+    target=input.target
+    title=title
+    attrs=input.attrs
+  >
+    <${tag} ...input.attrs class=classNames>$!{svg}</>
+  </marko-web-link>
+</if>
+<else>
+  <theme-social-icon-link
+    ...input
+  />
+</else>

packages/global/scss/components/_podcasts-page.scss

@@ -80,3 +80,8 @@
 .watch-latest-rail {
   text-align: center;
 }
+
+.marko-web-icon--podcast-icon svg {
+  height: 5rem;
+  width: 5rem;
+}

sites/diverseeducation.com/config/site.js

@@ -54,7 +54,7 @@ module.exports = {
   },
   podcastLinks: [
     { provider: 'applepodcasts', label: 'Apple Podcasts', href: 'https://podcasts.apple.com/us/podcast/in-the-margins/id1540117090' },
-    { provider: 'prime', label: 'Amazon', href: 'https://music.amazon.com/podcasts/cc87b264-f43c-4d79-a423-84e18364640b/in-the-margins' },
+    { provider: 'amazon', label: 'Amazon', href: 'https://music.amazon.com/podcasts/cc87b264-f43c-4d79-a423-84e18364640b/in-the-margins' },
     { provider: 'spotify', label: 'Spotify', href: 'https://open.spotify.com/show/6FSDlxj88XFUgOsfeftBfP' },
     { provider: 'youtube', label: 'YouTube', href: 'https://www.youtube.com/playlist?list=PL6yKpacB8wLWYUWHMgGMtG5G7kEHuKrHK' },
   ],