Community award badge and meta descriptions (#4567)

## What are you changing in this pull request and why? Currently on the live site, the meta descriptions for individual spotlight member pages pull from the `description` field in the frontmatter as-is, causing the meta descriptions to be long and have HTML within it: ![image](https://github.com/dbt-labs/docs.getdbt.com/assets/13647110/266c7c9a-c07b-467a-8fbb-2d4c4b8bc766) This adjusts the meta descriptions for spotlight member pages, to strip HTML from the meta descriptions and set a max length of 130 characters. This also adds frontmatter field `communityAward` to add an award badge above spotlight member cards. This field is a `boolean` which can be set in individual spotlight member files. ## Preview View the award badges for the top two spotlight members on the index page: https://docs-getdbt-com-git-community-award-badge-dbt-labs.vercel.app/community/spotlight/ Verify meta `description` and `og:description` fields are set for individual spotlight member pages. You can also paste these in a message to yourself in Slack to see the social card: https://docs-getdbt-com-git-community-award-badge-dbt-labs.vercel.app/community/spotlight/karen-hsieh https://docs-getdbt-com-git-community-award-badge-dbt-labs.vercel.app/community/spotlight/josh-devlin https://docs-getdbt-com-git-community-award-badge-dbt-labs.vercel.app/community/spotlight/alan-cruickshank https://docs-getdbt-com-git-community-award-badge-dbt-labs.vercel.app/community/spotlight/emily-riederer ## Checklist - [x] Remove `communityAward` field from two spotlight member files used for an example in this PR
dbt-labs · Dec 4, 2023 · 75ba438 · 75ba438
2 parents 7a24d57 + 5da4645
commit 75ba438
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 32 deletions.
diff --git 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';
 
@@ -47,44 +48,72 @@ function CommunitySpotlightCard({ frontMatter, isSpotlightMember = false }) {
     jobTitle, 
     companyName, 
     organization, 
-    socialLinks 
+    socialLinks,
+    communityAward
   } = frontMatter
 
-  return (  
-    <SpotlightWrapper isSpotlightMember={isSpotlightMember} frontMatter={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>
+        </div>
+      ) : null}
       {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>
       )}
       <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,46 +130,60 @@ 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}>
             {socialLinks.map((item, i) => (
               <>
                 {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>
                   </>
                 )}
               </>
             ))}
           </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
+// 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
@@ -162,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/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;
   }
 }
-
-
-
-
diff --git 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