Skip to content

Commit 3eda497

Browse files
nikoshellnikoshell
committed
Load content collections from json files.
1 parent 2634410 commit 3eda497

12 files changed

Lines changed: 204 additions & 66 deletions

File tree

‎astro.config.mjs‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import path, { dirname } from "path";
2-
import { fileURLToPath } from "url";
1+
import path from "path";
32
import { defineConfig } from "astro/config";
43
import mdx from "@astrojs/mdx";
54
import { h } from "hastscript";
@@ -13,9 +12,6 @@ import metaTags from "astro-meta-tags";
1312
import pagefind from "astro-pagefind";
1413
import deleteUnusedImages from "astro-delete-unused-images";
1514

16-
const __filename = fileURLToPath(import.meta.url);
17-
const __dirname = dirname(__filename); // @type-check enabled!
18-
1915
// https://astro.build/config
2016
export default defineConfig({
2117
vite: {
@@ -24,7 +20,14 @@ export default defineConfig({
2420
},
2521
resolve: {
2622
alias: {
27-
$: path.resolve(__dirname, "./src"),
23+
"@data": path.resolve("./src/data"),
24+
"@components": path.resolve("./src/components"),
25+
"@sections": path.resolve("./src/components/sections"),
26+
"@layouts": path.resolve("./src/layouts"),
27+
"@ui": path.resolve("./src/components/ui"),
28+
"@assets": path.resolve("./src/assets"),
29+
"@i18n": path.resolve("./src/i18n"),
30+
"@src": path.resolve("./src"),
2831
},
2932
},
3033
},
@@ -76,4 +79,10 @@ export default defineConfig({
7679
build: {
7780
minify: true,
7881
},
82+
image: {
83+
experimentalLayout: "responsive",
84+
},
85+
experimental: {
86+
responsiveImages: true,
87+
},
7988
});

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"date-fns-tz": "^3.2.0",
3333
"hastscript": "^9.0.0",
3434
"js-yaml": "^4.1.0",
35+
"marked": "^15.0.7",
3536
"pagefind": "^1.3.0",
3637
"react": "^19.0.0",
3738
"react-dom": "^19.0.0",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/favicon.ico‎

56.6 KB
Binary file not shown.

‎src/components/ui/Markdown.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
import { marked } from 'marked';
3+
4+
interface Props {
5+
content: string;
6+
}
7+
8+
const { content } = Astro.props;
9+
const html = marked.parse(content);
10+
---
11+
12+
<div class="prose prose-xl max-w-none" >
13+
<article set:html={html} />
14+
</div>

‎src/content/config.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineCollection, reference, z } from "astro:content";
2+
import { file } from "astro/loaders";
23

34
const tiers = [
45
"Keystone",
@@ -54,11 +55,13 @@ const keynoters = defineCollection({
5455
});
5556

5657
const speakers = defineCollection({
57-
type: "content",
58+
loader: file("src/content/speakers/data.json"),
5859
schema: z.object({
5960
code: z.string(),
6061
name: z.string(),
62+
slug: z.string(),
6163
avatar: z.string(),
64+
biography: z.string().nullable(),
6265
submissions: z.array(reference("sessions")),
6366
affiliation: z.string().nullable(),
6467
homepage: z.string().nullable(),
@@ -70,10 +73,12 @@ const speakers = defineCollection({
7073
});
7174

7275
const sessions = defineCollection({
73-
type: "content",
76+
loader: file("src/content/sessions/data.json"),
7477
schema: z.object({
7578
code: z.string(),
7679
title: z.string(),
80+
slug: z.string(),
81+
abstract: z.string().nullable(),
7782
speakers: z.array(reference("speakers")),
7883
session_type: z.string(),
7984
track: z.string().nullable(),
@@ -84,7 +89,7 @@ const sessions = defineCollection({
8489
.nullable(),
8590
duration: z.string(),
8691
level: z.enum(["beginner", "intermediate", "advanced"]),
87-
delivery: z.enum(["in-person", "remote"]),
92+
delivery: z.enum(["in-person", "remote", ""]),
8893
room: z.string().nullable(),
8994
start: z.string().nullable(),
9095
end: z.string().nullable(),

‎src/pages/session/[slug].astro‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import Prose from "../../components/prose/prose.astro";
55
import { Separator } from "../../components/separator/separator";
66
import { formatInTimeZone } from "date-fns-tz";
77
import { YouTube } from "@astro-community/astro-embed-youtube";
8+
import { Picture } from "astro:assets";
9+
import Markdown from "@ui/Markdown.astro";
810
911
export async function getStaticPaths() {
1012
const sessions = await getCollection("sessions");
1113
return sessions.map((entry) => ({
12-
params: { slug: entry.slug },
14+
params: { slug: entry.id},
1315
props: { entry },
1416
}));
1517
}
@@ -18,15 +20,9 @@ export async function getStaticPaths() {
1820
const sessions = await getCollection("sessions");
1921
2022
const { entry } = Astro.props;
21-
const { Content } = await entry.render();
2223
2324
const speakers = await getEntries(entry.data.speakers);
2425
25-
for (const speaker of speakers) {
26-
// @ts-ignore
27-
speaker.Content = (await speaker.render()).Content;
28-
}
29-
3026
// Resolve session codes to session data
3127
const resolveSessions = (codes: string[]) =>
3228
codes.map((code) => sessions.find((s) => s?.data?.code === code));
@@ -106,7 +102,6 @@ const nextSessionsOrdered = sameRoomNextSession
106102

107103
<Prose>
108104
<h2>Abstract</h2>
109-
<Content />
110105
</Prose>
111106

112107
{
@@ -155,11 +150,14 @@ const nextSessionsOrdered = sameRoomNextSession
155150
<div class="md:grid grid-cols-[260px_1fr] md:gap-6">
156151
{speaker.data.avatar ? (
157152
<div class="flex items-start">
158-
<img
159-
src={speaker.data.avatar}
160-
alt={speaker.data.name}
161-
class="w-full max-w-sm mb-12"
162-
/>
153+
<div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
154+
<Picture
155+
src={speaker.data.avatar}
156+
alt={speaker.data.name}
157+
inferSize={true}
158+
class="max-w-[240px] sm:max-w-[540px] xl:max-w-[720px] max-h-[240px] sm:max-h-[540px] xl:max-h-[720px] object-scale-down"
159+
/>
160+
</div>
163161
</div>
164162
) : (
165163
<div class="flex items-start mb-4 invisible">
@@ -169,15 +167,14 @@ const nextSessionsOrdered = sameRoomNextSession
169167
<div>
170168
<p class="mb-4">
171169
<a
172-
href={`/speaker/${speaker.slug}`}
170+
href={`/speaker/${speaker.id}`}
173171
class="text-4xl hover:text-primary-hover underline font-bold"
174172
>
175173
{speaker.data.name}
176174
</a>
177175
</p>
178176
<Prose>
179-
{/* @ts-ignore */}
180-
<speaker.Content />
177+
<Markdown content={speaker.data.biography || ""} />
181178
</Prose>
182179
</div>
183180
</div>
@@ -201,7 +198,7 @@ const nextSessionsOrdered = sameRoomNextSession
201198
{parallelSessions.map((session: any) => (
202199
<li>
203200
<Prose>
204-
<a href={`/session/${session.slug}`}>
201+
<a href={`/session/${session.id}`}>
205202
{session.data.title}
206203
</a>
207204
</Prose>
@@ -219,7 +216,7 @@ const nextSessionsOrdered = sameRoomNextSession
219216
{nextSessionsOrdered.map((session: any) => (
220217
<li>
221218
<a
222-
href={`/session/${session.slug}`}
219+
href={`/session/${session.id}`}
223220
class={`${session === sameRoomNextSession ? "text-primary font-bold" : ""}`}
224221
>
225222
{session.data.title}

‎src/pages/sessions.astro‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
import { getCollection } from "astro:content";
3+
import Layout from "../layouts/Layout.astro";
4+
import Prose from "../components/prose/prose.astro";
5+
import { Separator } from "../components/separator/separator";
6+
7+
// Fetch all speaker entries
8+
const sessionsCollection = await getCollection("sessions");
9+
10+
// Define the type for the groups object
11+
type Session= {
12+
id: string;
13+
data: {
14+
title : string;
15+
};
16+
};
17+
18+
type Groups = {
19+
[key: string]: Session[];
20+
};
21+
22+
// Group speakers by the first letter of their name
23+
const groups: Groups = sessionsCollection
24+
.filter((session: Session) => !!session.data.title)
25+
.reduce((acc: Groups, session: Session) => {
26+
const letter = session.data.title[0].toUpperCase();
27+
if (!acc[letter]) {
28+
acc[letter] = [];
29+
}
30+
acc[letter].push(session);
31+
return acc;
32+
}, {} as Groups);
33+
34+
const letters = Object.keys(groups).sort((a, b) => a.localeCompare(b));
35+
36+
const title = "Sessions";
37+
38+
const description =
39+
"Alphabetical list of all confirmed sessions for the conference";
40+
---
41+
42+
<Layout title={title} description={description}>
43+
<div class="px-6">
44+
<Prose>
45+
<h1>Sessions</h1>
46+
</Prose>
47+
48+
<div class="flex text-3xl font-bold flex-wrap mb-6">
49+
{
50+
letters.map((letter) => (
51+
<h3 class="mr-2">
52+
<a href={`#letter-${letter}`}>{letter}</a>
53+
</h3>
54+
))
55+
}
56+
</div>
57+
58+
<ol class="sessions">
59+
{
60+
letters.map((letter, index) => (
61+
<>
62+
<div id={`letter-${letter}`}>
63+
<h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-4xl">
64+
{letter}
65+
</h2>
66+
67+
<ul class="pl-4">
68+
{groups[letter]
69+
.sort((a, b) => a.data.title.localeCompare(b.data.title))
70+
.map((session) => (
71+
<li {...{ key: session.id }} class="mb-1">
72+
<a
73+
class="underline hover:text-primary-hover"
74+
href={`/session/${session.id}`}
75+
>
76+
{session.data.title}
77+
</a>
78+
</li>
79+
))}
80+
</ul>
81+
</div>
82+
83+
{index !== letters.length - 1 ? (
84+
<Separator />
85+
) : (
86+
<div class="mb-20" />
87+
)}
88+
</>
89+
))
90+
}
91+
</ol>
92+
</div>
93+
</Layout>

0 commit comments

Comments
 (0)