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