From 7c1ab3b2e0045f462e3146305152ab107dfe3d5a Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Fri, 1 Dec 2023 09:58:02 -0500
Subject: [PATCH 1/4] add badge styling

---
 .../communitySpotlightCard/index.js           | 74 ++++++++++++-------
 .../communitySpotlightCard/styles.module.css  | 20 ++++-
 2 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/website/src/components/communitySpotlightCard/index.js b/website/src/components/communitySpotlightCard/index.js
index 08707a93dd4..32c5ab55346 100644
--- a/website/src/components/communitySpotlightCard/index.js
+++ b/website/src/components/communitySpotlightCard/index.js
@@ -50,21 +50,24 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
     socialLinks 
   } = frontMatter
 
-  return (  
-    <SpotlightWrapper isSpotlightMember={isSpotlightMember} frontMatter={frontMatter}>
+  return (
+    <SpotlightWrapper
+      isSpotlightMember={isSpotlightMember}
+      frontMatter={frontMatter}
+    >
+      <div className={styles.awardBadge}>
+        <span>Community Award Recipient</span>
+      </div>
       {image && (
         <div className={styles.spotlightMemberImgContainer}>
           {id && isSpotlightMember ? (
-            <img 
-              src={imageCacheWrapper(image)} 
-              alt={title} 
-            />
+            <img src={imageCacheWrapper(image)} alt={title} />
           ) : (
-            <Link to={`/community/spotlight/${id}`} className={styles.spotlightMemberHeader}>
-              <img 
-                src={imageCacheWrapper(image)} 
-                alt={title} 
-              />
+            <Link
+              to={`/community/spotlight/${id}`}
+              className={styles.spotlightMemberHeader}
+            >
+              <img src={imageCacheWrapper(image)} alt={title} />
             </Link>
           )}
         </div>
@@ -72,19 +75,26 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
       <div className={styles.spotlightMemberContent}>
         {!isSpotlightMember && id ? (
           <h2>
-            <Link to={`/community/spotlight/${id}`} className={`${styles.spotlightMemberHeader} ${styles.spotlightMemberHeaderSmall}`}>{title}</Link>
+            <Link
+              to={`/community/spotlight/${id}`}
+              className={`${styles.spotlightMemberHeader} ${styles.spotlightMemberHeaderSmall}`}
+            >
+              {title}
+            </Link>
           </h2>
-          ) : (
+        ) : (
           <h1 className={styles.spotlightMemberHeader}>{title}</h1>
         )}
-        {pronouns && <div className={styles.spotlightMemberPronouns}>{pronouns}</div>}
-        
+        {pronouns && (
+          <div className={styles.spotlightMemberPronouns}>{pronouns}</div>
+        )}
+
         {isSpotlightMember && (
           <div className={styles.spotlightMemberHeaderContain}>
             {(jobTitle || companyName) && (
               <div className={styles.spotlightMemberInfo}>
                 {jobTitle && jobTitle}
-                {jobTitle && companyName && ', '}
+                {jobTitle && companyName && ", "}
                 {companyName && companyName}
               </div>
             )}
@@ -101,7 +111,10 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
           </div>
         )}
         {description && !isSpotlightMember && (
-          <p className={styles.spotlightMemberDescription} dangerouslySetInnerHTML={{__html: truncateText(description)}} />
+          <p
+            className={styles.spotlightMemberDescription}
+            dangerouslySetInnerHTML={{ __html: truncateText(description) }}
+          />
         )}
         {socialLinks && isSpotlightMember && socialLinks?.length > 0 && (
           <div className={styles.spotlightMemberSocial}>
@@ -109,8 +122,15 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
               <>
                 {item?.name && item?.link && (
                   <>
-                    {i !== 0 && ' | '}
-                    <a href={item.link} title={item.name} target='_blank' rel='noreferrer'>{item.name}</a>
+                    {i !== 0 && " | "}
+                    <a
+                      href={item.link}
+                      title={item.name}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {item.name}
+                    </a>
                   </>
                 )}
               </>
@@ -118,21 +138,25 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
           </div>
         )}
         {id && !isSpotlightMember && (
-          <Link 
-            to={`/community/spotlight/${id}`} 
+          <Link
+            to={`/community/spotlight/${id}`}
             className={styles.spotlightReadMore}
-          >Read More</Link>
+          >
+            Read More
+          </Link>
         )}
       </div>
       {description && isSpotlightMember && (
         <div className={styles.spotlightMemberDescriptionFull}>
           <h2>About</h2>
-          <p className={styles.spotlightMemberDescription} dangerouslySetInnerHTML={{__html: description}} />
-
+          <p
+            className={styles.spotlightMemberDescription}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
         </div>
       )}
     </SpotlightWrapper>
-  )
+  );
 }
 
 // Truncate text
diff --git a/website/src/components/communitySpotlightCard/styles.module.css b/website/src/components/communitySpotlightCard/styles.module.css
index 253a561ebea..5df85c8a4cc 100644
--- a/website/src/components/communitySpotlightCard/styles.module.css
+++ b/website/src/components/communitySpotlightCard/styles.module.css
@@ -15,6 +15,19 @@ header.spotlightMemberCard {
 div.spotlightMemberCard {
   margin-bottom: 2.5rem;
 }
+.spotlightMemberCard .awardBadge {
+  flex: 0 0 100%;
+  margin-bottom: .5rem;
+}
+.spotlightMemberCard .awardBadge span {
+  max-width: fit-content;
+  color: #fff;
+  background: var(--ifm-color-primary);
+  display: block;
+  border-radius: 1rem;
+  padding: 5px 10px;
+  font-size: .7rem;
+}
 .spotlightMemberCard .spotlightMemberImgContainer {
   flex: 0 0 100%;
 }
@@ -81,6 +94,9 @@ div.spotlightMemberCard {
     margin-bottom: 0;
     padding-left: 0;
   }
+  .spotlightMemberCard .awardBadge span {
+      font-size: .8rem;
+    }
   .spotlightMemberCard .spotlightMemberImgContainer {
     flex: 0 0 346px;
     margin-right: 2rem;
@@ -100,7 +116,3 @@ div.spotlightMemberCard {
     line-height: 2rem;
   }
 }
-
-
-
-

From 4547e4b333e2b9daa363644a69e97280b1f8f8d6 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Fri, 1 Dec 2023 10:05:27 -0500
Subject: [PATCH 2/4] add communityAward frontmatter property and add examples

---
 website/docs/community/spotlight/josh-devlin.md       |  1 +
 website/docs/community/spotlight/sydney-burns.md      |  1 +
 .../src/components/communitySpotlightCard/index.js    | 11 +++++++----
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/website/docs/community/spotlight/josh-devlin.md b/website/docs/community/spotlight/josh-devlin.md
index d8a9b91c282..6036105940b 100644
--- a/website/docs/community/spotlight/josh-devlin.md
+++ b/website/docs/community/spotlight/josh-devlin.md
@@ -23,6 +23,7 @@ socialLinks:
     link: https://www.linkedin.com/in/josh-devlin/
 dateCreated: 2023-11-10
 hide_table_of_contents: true
+communityAward: true
 ---
 
 ## When did you join the dbt community and in what way has it impacted your career?
diff --git a/website/docs/community/spotlight/sydney-burns.md b/website/docs/community/spotlight/sydney-burns.md
index ecebd6cdec0..25278ac6ecf 100644
--- a/website/docs/community/spotlight/sydney-burns.md
+++ b/website/docs/community/spotlight/sydney-burns.md
@@ -15,6 +15,7 @@ socialLinks:
     link: https://www.linkedin.com/in/sydneyeburns/
 dateCreated: 2023-11-09
 hide_table_of_contents: true
+communityAward: true
 ---
 
 ## When did you join the dbt community and in what way has it impacted your career?
diff --git a/website/src/components/communitySpotlightCard/index.js b/website/src/components/communitySpotlightCard/index.js
index 32c5ab55346..b134fff7cb9 100644
--- a/website/src/components/communitySpotlightCard/index.js
+++ b/website/src/components/communitySpotlightCard/index.js
@@ -47,7 +47,8 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
     jobTitle, 
     companyName, 
     organization, 
-    socialLinks 
+    socialLinks,
+    communityAward
   } = frontMatter
 
   return (
@@ -55,9 +56,11 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
       isSpotlightMember={isSpotlightMember}
       frontMatter={frontMatter}
     >
-      <div className={styles.awardBadge}>
-        <span>Community Award Recipient</span>
-      </div>
+      {communityAward ? (
+        <div className={styles.awardBadge}>
+          <span>Community Award Recipient</span>
+        </div>
+      ) : null}
       {image && (
         <div className={styles.spotlightMemberImgContainer}>
           {id && isSpotlightMember ? (

From de9f3c17a0cd4dd883ba7d4911dcd838b749d914 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Fri, 1 Dec 2023 10:51:22 -0500
Subject: [PATCH 3/4] add function to prep meta description text from
 description field

---
 .../communitySpotlightCard/index.js           | 37 ++++++++++++++++++-
 .../communitySpotlightList/index.js           |  1 +
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/website/src/components/communitySpotlightCard/index.js b/website/src/components/communitySpotlightCard/index.js
index b134fff7cb9..122edee8f06 100644
--- a/website/src/components/communitySpotlightCard/index.js
+++ b/website/src/components/communitySpotlightCard/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from '@docusaurus/Link';
+import Head from "@docusaurus/Head";
 import styles from './styles.module.css';
 import imageCacheWrapper from '../../../functions/image-cache-wrapper';
 
@@ -51,11 +52,26 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
     communityAward
   } = frontMatter
 
+  // Get meta description text
+  const metaDescription = stripHtml(description)
+
   return (
     <SpotlightWrapper
       isSpotlightMember={isSpotlightMember}
       frontMatter={frontMatter}
     >
+      {isSpotlightMember && metaDescription ? (
+        <Head>
+          <meta
+            name="description"
+            content={metaDescription}
+          />
+          <meta
+            property="og:description"
+            content={metaDescription}
+          />
+        </Head>
+      ) : null}
       {communityAward ? (
         <div className={styles.awardBadge}>
           <span>Community Award Recipient</span>
@@ -162,12 +178,12 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
   );
 }
 
-// Truncate text
+// Truncate description text for community member cards
 function truncateText(str) {
   // Max length of string
   let maxLength = 300
 
-  // Check if anchor link starts within first 300 characters
+  // Check if anchor link starts within maxLength
   let hasLinks = false
   if(str.substring(0, maxLength - 3).match(/(?:<a)/g)) {
     hasLinks = true
@@ -189,4 +205,21 @@ function truncateText(str) {
     : str
 }
 
+// Strip HTML for meta description
+function stripHtml(desc) {
+  const maxLength = 130
+
+  if(!desc) return null
+
+  // Remove HTML elements from string
+  const strippedHtml = desc?.replace(/(<([^>]+)>)/gi, "")
+
+  // Strip new lines and return 130 character substring for description
+  const updatedDesc = strippedHtml
+    ?.substring(0, maxLength)
+    ?.replace(/(\r\n|\r|\n)/g, "");
+
+  return desc?.length > maxLength ? `${updatedDesc}...` : updatedDesc
+}
+
 export default CommunitySpotlightCard
diff --git a/website/src/components/communitySpotlightList/index.js b/website/src/components/communitySpotlightList/index.js
index 6885f5ff2ac..ed0dbf6d653 100644
--- a/website/src/components/communitySpotlightList/index.js
+++ b/website/src/components/communitySpotlightList/index.js
@@ -36,6 +36,7 @@ function CommunitySpotlightList({ spotlightData }) {
       <Head>
         <title>{metaTitle}</title>
         <meta property="og:title" content={metaTitle} />
+        <meta property="description" content={communityDescription} />
         <meta property="og:description" content={communityDescription} />
       </Head>
       <Hero 

From 97b4f415bf91741e7189421f9113fa58d273991d Mon Sep 17 00:00:00 2001
From: john-rock <johnmrock.jr@gmail.com>
Date: Mon, 4 Dec 2023 09:19:06 -0500
Subject: [PATCH 4/4] remove changes for demo in pr

---
 website/docs/community/spotlight/josh-devlin.md  | 1 -
 website/docs/community/spotlight/sydney-burns.md | 1 -
 2 files changed, 2 deletions(-)

diff --git a/website/docs/community/spotlight/josh-devlin.md b/website/docs/community/spotlight/josh-devlin.md
index 6036105940b..d8a9b91c282 100644
--- a/website/docs/community/spotlight/josh-devlin.md
+++ b/website/docs/community/spotlight/josh-devlin.md
@@ -23,7 +23,6 @@ socialLinks:
     link: https://www.linkedin.com/in/josh-devlin/
 dateCreated: 2023-11-10
 hide_table_of_contents: true
-communityAward: true
 ---
 
 ## When did you join the dbt community and in what way has it impacted your career?
diff --git a/website/docs/community/spotlight/sydney-burns.md b/website/docs/community/spotlight/sydney-burns.md
index 25278ac6ecf..ecebd6cdec0 100644
--- a/website/docs/community/spotlight/sydney-burns.md
+++ b/website/docs/community/spotlight/sydney-burns.md
@@ -15,7 +15,6 @@ socialLinks:
     link: https://www.linkedin.com/in/sydneyeburns/
 dateCreated: 2023-11-09
 hide_table_of_contents: true
-communityAward: true
 ---
 
 ## When did you join the dbt community and in what way has it impacted your career?