310-links-card

.prettierignore

@@ -1,2 +1,3 @@
 dist/
 .prettierrc.cjs
+src/models/artifact-metas.json

src/components/link-card.stories.ts

@@ -0,0 +1,22 @@
+import LinkCard from './link-card.tsx';
+import { Meta, StoryObj } from '@storybook/react';
+import artifactMetas from '../utils/artifact-metas.ts';
+
+const meta: Meta<typeof LinkCard> = {
+  component: LinkCard,
+};
+export default meta;
+
+type Story = StoryObj<typeof LinkCard>;
+
+export const Default: Story = {
+  args: {
+    linkMeta: artifactMetas[7].links[0],
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    linkMeta: artifactMetas[9].links[0],
+  },
+};

src/components/link-card.tsx

@@ -0,0 +1,68 @@
+import { LinkMeta } from '../models/artifact-meta-models.ts';
+import { Avatar, Card, CardActionArea, CardContent, CardMedia, Link, Stack, Typography } from '@mui/material';
+
+/**
+ * Content of a link.
+ * @param title The title of the link.
+ * @param description The description of the link.
+ * @param faviconSrc The favicon of the link.
+ * @param domain The domain of the link.
+ * @constructor
+ */
+function LinkContent({
+  title,
+  description,
+  faviconSrc,
+  domain,
+}: {
+  title: string;
+  description: string;
+  faviconSrc: string;
+  domain: string;
+}) {
+  return (
+    <CardContent>
+      <Stack spacing={2}>
+        <Typography gutterBottom variant="h5" component="div">
+          {title}
+        </Typography>
+
+        <Typography variant="body2" color="text.secondary">
+          {description}
+        </Typography>
+
+        <Stack direction={'row'} spacing={2} alignItems={'center'}>
+          {faviconSrc && <Avatar src={faviconSrc} />}
+          <Link href={`https://${domain}`}>{domain}</Link>
+        </Stack>
+      </Stack>
+    </CardContent>
+  );
+}
+
+/**
+ * Rich representation of a link.
+ * @param linkMeta The metadata of the link.
+ * @constructor
+ */
+function LinkCard({ linkMeta }: { linkMeta: LinkMeta }) {
+  return (
+    <Link href={linkMeta.url} underline={'none'}>
+      <Card sx={{ maxWidth: 345 }}>
+        <CardActionArea>
+          {linkMeta.imageSrc && (
+            <CardMedia component={'img'} height={180} image={linkMeta.imageSrc} alt={linkMeta.title} />
+          )}
+          <LinkContent
+            title={linkMeta.title}
+            description={linkMeta.description}
+            faviconSrc={linkMeta.faviconSrc}
+            domain={linkMeta.domain}
+          />
+        </CardActionArea>
+      </Card>
+    </Link>
+  );
+}
+
+export default LinkCard;

src/models/artifact-meta-models.ts

@@ -0,0 +1,64 @@
+enum Year {
+  None = -1,
+  Freshman,
+  Sophomore,
+  Junior,
+  Senior,
+}
+
+enum Quarter {
+  None = -1,
+  Fall,
+  Winter,
+  Spring,
+  Summer,
+}
+
+interface ImageMeta {
+  title: string;
+  description: string;
+  width: number;
+  height: number;
+  src: string;
+  thumbnailSrc: string;
+}
+
+interface LinkMeta {
+  url: string;
+  title: string;
+  description: string;
+  imageSrc: string;
+  faviconSrc: string;
+  domain: string;
+}
+
+interface LinkExtract {
+  title: string;
+  description: string;
+  images: string[];
+  sitename: string;
+  favicon: string;
+  duration: number;
+  domain: string;
+  url: string;
+  source: string;
+}
+
+interface ArtifactMeta {
+  title: string;
+  subtitle: string;
+  year: Year;
+  quarter: Quarter;
+  text: string;
+  images: ImageMeta[];
+  links: LinkMeta[];
+  embeds: string[];
+}
+
+/**
+ * A map of artifact names to their metadata.
+ */
+type ArtifactMetas = ArtifactMeta[];
+
+export { Quarter, Year };
+export type { ArtifactMeta, ArtifactMetas, ImageMeta, LinkMeta, LinkExtract };

src/utils/artifact-metas.ts

@@ -0,0 +1,6 @@
+import { ArtifactMetas } from '../models/artifact-meta-models.ts';
+import artifactMetasString from '../models/artifact-metas.json?raw';
+
+const artifactMetas: ArtifactMetas = JSON.parse(artifactMetasString) as ArtifactMetas;
+
+export default artifactMetas;