refactor newsCard

This commit is contained in:
Miniapple8888 2022-02-10 16:09:16 -05:00
parent 2d27055bf8
commit c553e9bdbc
5 changed files with 22 additions and 113 deletions

View File

@ -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;
}
}

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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;
if (shortened) {
truncatedContent = truncateMarkdown(content, {
limit: 150,
ellipsis: true,
});
}
const content: string = shortened
? truncateMarkdown(rawContent, {
limit: 150,
ellipsis: true,
})
: rawContent;
return {
content: await serialize(truncatedContent),
content: await serialize(content),
metadata: {
...metadata,
date: getLocalDateFromEST(

View File

@ -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) => (
<MiniNewsCard
? props.news.map((news, idx) => (
<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>