refactor newsCard

components/MiniNewsCard.module.css

@@ -1,57 +0,0 @@
-.card {
-  padding: calc(30rem / 16) calc(40rem / 16);
-  max-width: calc(524rem / 16);
-  background-color: var(--primary-background);
-  border-radius: calc(20rem / 16);
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;  
-  overflow: hidden;
-  margin-bottom: 1rem;
-}
-
-.fit.card {
-  max-width: unset;
-  padding: unset;
-  border-radius: unset;
-}
-
-.date {
-  font-size: calc(18rem / 16);
-  margin: 0;
-}
-
-.author {
-  color: var(--secondary-heading);
-  font-style: normal;
-}
-
-.content { 
-  overflow: hidden;
-}
-
-.content > *:first-child {
-  margin-top: 0;
-}
-
-@media only screen and (max-width: calc(768rem / 16)) {
-  .card {
-    padding: 0;
-    max-width: unset;
-    background-color: transparent;
-    border-radius: 0;
-  }
-
-  .date {
-    font-weight: 600;
-  }
-
-  .content > *:first-child {
-    margin-top: 1rem;
-  }
-
-  .content ul,
-  .content ol {
-    padding: 0 1rem;
-  }
-}

components/MiniNewsCard.tsx

@@ -1,42 +0,0 @@
-import React, { ReactNode } from "react";
-
-import { Link } from "./Link";
-
-import styles from "./MiniNewsCard.module.css";
-
-interface MiniNewsCardProps {
-  date: Date;
-  author: string;
-  children: ReactNode;
-  permalink: string;
-  fit?: boolean;
-}
-
-export const MiniNewsCard: React.FC<MiniNewsCardProps> = ({
-  date,
-  author,
-  children,
-  permalink,
-  fit = false,
-}) => {
-  const classes = fit ? [styles.card, styles.fit] : [styles.card];
-
-  return (
-    <article className={classes.join(" ")}>
-      <h1 className={styles.date}>
-        <time dateTime={date.toISOString()}>
-          {date.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          })}
-        </time>
-      </h1>
-      <address className={styles.author}>{author}</address>
-      <div className={styles.content}>{children}</div>
-      <Link href={permalink}>
-        <span className={styles.mobileLearnMore}>Learn more</span>
-      </Link>
-    </article>
-  );
-};

components/NewsCard.tsx

@@ -1,11 +1,14 @@
 import React, { ReactNode } from "react";
 
+import { Link } from "./Link";
+
 import styles from "./NewsCard.module.css";
 
 interface NewsCardProps {
   date: Date;
   author: string;
   children: ReactNode;
+  permalink: string;
   fit?: boolean;
 }
 
@@ -13,6 +16,7 @@ export const NewsCard: React.FC<NewsCardProps> = ({
   date,
   author,
   children,
+  permalink,
   fit = false,
 }) => {
   const classes = fit ? [styles.card, styles.fit] : [styles.card];
@@ -30,6 +34,11 @@ export const NewsCard: React.FC<NewsCardProps> = ({
       </h1>
       <address className={styles.author}>{author}</address>
       <div className={styles.content}>{children}</div>
+      {!fit && (
+        <Link href={permalink}>
+          <span>Learn more</span>
+        </Link>
+      )}
     </article>
   );
 };

lib/news.ts

@@ -74,18 +74,17 @@ export async function getNewsBySlug(
     path.join(NEWS_PATH, year, term, `${slug}.md`),
     "utf-8"
   );
-  const { content, data: metadata } = matter(raw);
+  const { content: rawContent, data: metadata } = matter(raw);
   const slugDate = slug.split("-").slice(0, 3).join("-");
-  let truncatedContent: string = content;
+  const content: string = shortened
-  if (shortened) {
+    ? truncateMarkdown(rawContent, {
-    truncatedContent = truncateMarkdown(content, {
+        limit: 150,
-      limit: 150,
+        ellipsis: true,
-      ellipsis: true,
+      })
-    });
+    : rawContent;
-  }
 
   return {
-    content: await serialize(truncatedContent),
+    content: await serialize(content),
     metadata: {
       ...metadata,
       date: getLocalDateFromEST(

pages/index.tsx

@@ -8,7 +8,7 @@ import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { Link } from "@/components/Link";
-import { MiniNewsCard } from "@/components/MiniNewsCard";
+import { NewsCard } from "@/components/NewsCard";
 import { GetShapesConfig } from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 import { Title } from "@/components/Title";
@@ -87,14 +87,14 @@ export default function Home(props: Props) {
             </p>
             <hr className={styles.cardsDividingLine} />
             {props.news.length > 0
-              ? props.news.map((news) => (
+              ? props.news.map((news, idx) => (
-                  <MiniNewsCard
+                  <NewsCard
                     {...news.metadata}
                     date={new Date(news.metadata.date)}
-                    key={news.metadata.date.toString()}
+                    key={`${news.metadata.date.toString()}${idx}`}
                   >
                     <MDXRemote {...news.content} />
-                  </MiniNewsCard>
+                  </NewsCard>
                 ))
               : null}
           </section>