Merge pull request dbt-labs#2420 from dbt-labs/devblog/character-limit

Shorten Descriptions on Devhub Homepage Blog Posts
hanna-liashchuk · Nov 18, 2022 · e26cca0 · e26cca0
2 parents b8cdb16 + 82ba007
commit e26cca0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/website/functions/post-preview.js b/website/functions/post-preview.js
@@ -0,0 +1,7 @@
+export default function createPostPreview(description, charCount) {
+  if (description.length <= charCount) { return description }; 
+  const clippedDesc = description.slice(0, charCount-1);
+  // return the version of the description clipped to the last instance of a space
+  // this is so there are no cut-off words.
+  return clippedDesc.slice(0, clippedDesc.lastIndexOf(" ")) + '...';
+}
diff --git a/website/src/components/blogPostCard/index.js b/website/src/components/blogPostCard/index.js
@@ -2,21 +2,22 @@ import React from 'react';
 import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
+import createPostPreview from '@site/functions/post-preview';
 
 
 function BlogPostCard({ postMetaData }) {
   const { title, date, readingTime, description, link, image } = postMetaData
   return (
     <div className={styles.cardWrapper}>
       <article className={`${image ? styles.imageCard : styles.card}`}>
-        {image && <div className={styles.imageContainer} style={{ "background": `no-repeat center/100% url(${image})` }}></div>}
-        <div className={`${image ? styles.contentContainer : null}`}>
+        {image && <div className={styles.imageContentContainer} style={{ "background": `no-repeat center/100% url(${image})` }}></div>}
+        <div className={`${styles.contentContainer} ${image ? styles.imageContentContainer : null}`}>
           <Link to={useBaseUrl(link)}><h3>{title}</h3></Link>
           {readingTime && <span>{date} · {readingTime} minute read</span>}
           <p>
-            {description}
+            {createPostPreview(description, 140)}
           </p>
-          <Link to={useBaseUrl(link)}><a className={styles.ctaLink}>Read more</a></Link>
+          <Link className={styles.ctaLink} to={useBaseUrl(link)}>Read more</Link>
         </div>
       </article>
     </div>

diff --git a/website/src/components/blogPostCard/styles.module.css b/website/src/components/blogPostCard/styles.module.css
@@ -18,16 +18,25 @@
   padding: 0;
 }
 
-.contentContainer {
+.contentContainer.imageContentContainer {
   padding: 2.5rem 2.5rem 1.5rem 2.5rem;
+  display: block;
+}
+
+.contentContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-flow: wrap;
 }
 
-.imageContainer {
+.imageContentContainer {
   width: 100%;
   border-radius: var(--border-radius) var(--border-radius) 0px 0px;
   min-height: 200px;
 }
 
+
 .cardWrapper, .cardWrapper article {
   height: 100%;
 }
@@ -47,9 +56,11 @@
 a.ctaLink {
   color: #009999;
   font-weight: 600;
+  margin-top: auto;
 }
 a.ctaLink:after {
   content: ' →';
+  margin-left: 5px;
 }
 
 .icon {