Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Community award badge and meta descriptions #4567

Merged
merged 5 commits into from
Dec 4, 2023
Merged

Community award badge and meta descriptions #4567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c1ab3b
add badge styling
JKarlavige Dec 1, 2023
4547e4b
add communityAward frontmatter property and add examples
JKarlavige Dec 1, 2023
de9f3c1
add function to prep meta description text from description field
JKarlavige Dec 1, 2023
97b4f41
remove changes for demo in pr
john-rock Dec 4, 2023
5da4645
Merge branch 'current' into community-award-badge
john-rock Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 88 additions & 28 deletions website/src/components/communitySpotlightCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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}
Comment on lines +51 to +79
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lot of formatting changes here from editing the file, this was the main section updated.

{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>
)}
Expand All @@ -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
Expand All @@ -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
}
Comment on lines +208 to +223
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the 2nd edit adding a new function


export default CommunitySpotlightCard
20 changes: 16 additions & 4 deletions website/src/components/communitySpotlightCard/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down Expand Up @@ -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;
Expand All @@ -100,7 +116,3 @@ div.spotlightMemberCard {
line-height: 2rem;
}
}




1 change: 1 addition & 0 deletions website/src/components/communitySpotlightList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading