Implement dynamic /resources/tech-talks
This commit is contained in:
parent
f1b6d08933
commit
f116afebd2
|
@ -1,6 +1,10 @@
|
|||
import React, { ImgHTMLAttributes } from "react";
|
||||
|
||||
export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
|
||||
if (props.src?.startsWith("http://") || props.src?.startsWith("https://")) {
|
||||
return <img {...props} />;
|
||||
}
|
||||
|
||||
const { src: relativeSrc = "" } = props;
|
||||
|
||||
let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
.card {
|
||||
.card > a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
padding: calc(16rem / 16);
|
||||
font-size: 1rem;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.card aside {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import { Image } from "./Image";
|
||||
|
@ -5,28 +6,36 @@ import { Image } from "./Image";
|
|||
import styles from "./MiniTechTalkCard.module.css";
|
||||
|
||||
interface MiniTechTalkProps {
|
||||
slug: string;
|
||||
title: string;
|
||||
presentors: string[];
|
||||
poster: string;
|
||||
}
|
||||
|
||||
export function MiniTechTalkCard({
|
||||
slug,
|
||||
title,
|
||||
presentors,
|
||||
poster,
|
||||
}: MiniTechTalkProps) {
|
||||
const presentorsStr = presentors.join(", ");
|
||||
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<aside>
|
||||
<Image
|
||||
alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
|
||||
src={poster}
|
||||
/>
|
||||
</aside>
|
||||
<div className={styles.content}>
|
||||
<h1>{title}</h1>
|
||||
<p>{presentors.join(", ")}</p>
|
||||
</div>
|
||||
<Link href={`/resources/tech-talks/${slug}`}>
|
||||
<a>
|
||||
<aside>
|
||||
<Image
|
||||
alt={`Thumbnail of tech talk by ${presentorsStr}: ${title}`}
|
||||
src={poster}
|
||||
/>
|
||||
</aside>
|
||||
<div className={styles.content}>
|
||||
<h1>{title}</h1>
|
||||
<p>{presentorsStr}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
import { GetStaticProps } from "next";
|
||||
import React from "react";
|
||||
|
||||
import { Image } from "../../components/Image";
|
||||
import { MiniTechTalkCard } from "../../components/MiniTechTalkCard";
|
||||
import { metadata as tempTechTalkMetadata } from "../../content/playground/temp.talk.mdx";
|
||||
import { Image } from "@/components/Image";
|
||||
import { MiniTechTalkCard } from "@/components/MiniTechTalkCard";
|
||||
import { getTechTalks, Metadata } from "@/lib/tech-talks";
|
||||
|
||||
import styles from "./tech-talks.module.css";
|
||||
|
||||
export default function TechTalks() {
|
||||
interface Props {
|
||||
talks: Metadata[];
|
||||
}
|
||||
|
||||
export default function TechTalks({ talks }: Props) {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.headerContainer}>
|
||||
|
@ -21,19 +26,20 @@ export default function TechTalks() {
|
|||
<Image src="images/tech-talks.svg" className={styles.image} />
|
||||
</div>
|
||||
<div className={styles.miniCards}>
|
||||
<MiniTechTalkCard
|
||||
{...tempTechTalkMetadata}
|
||||
poster={tempTechTalkMetadata.thumbnails.small}
|
||||
/>
|
||||
<MiniTechTalkCard
|
||||
{...tempTechTalkMetadata}
|
||||
poster={tempTechTalkMetadata.thumbnails.small}
|
||||
/>
|
||||
<MiniTechTalkCard
|
||||
{...tempTechTalkMetadata}
|
||||
poster={tempTechTalkMetadata.thumbnails.small}
|
||||
/>
|
||||
{talks.map((talk) => (
|
||||
<MiniTechTalkCard
|
||||
{...talk}
|
||||
poster={talk.thumbnails.small}
|
||||
key={talk.slug}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||
return {
|
||||
props: { talks: (await getTechTalks()).map(({ metadata }) => metadata) },
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue