Community award badge and meta descriptions #4567
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
content
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
JKarlavige
commented
Dec 1, 2023
Comment on lines
+51
to
+79
| 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} |
There was a problem hiding this comment.
Lot of formatting changes here from editing the file, this was the main section updated.
JKarlavige
commented
Dec 1, 2023
Comment on lines
+208
to
+223
| // 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 | ||
| } |
There was a problem hiding this comment.
This is the 2nd edit adding a new function
JKarlavige
requested review from
a team,
breezyfasano and
john-rock
and removed request for
a team
john-rock
approved these changes
Dec 4, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
descriptionfield in the frontmatter as-is, causing the meta descriptions to be long and have HTML within it: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
communityAwardto add an award badge above spotlight member cards. This field is abooleanwhich 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
descriptionandog:descriptionfields 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
communityAwardfield from two spotlight member files used for an example in this PR