feat: added download agenda as a pdf by harshhgithub · Pull Request #823 · asyncapi/conference-website

harshhgithub · 2025-10-22T11:56:34Z

Resolves #553
This PR introduces a fully functional Agenda PDF feature for conference city pages.
Users can now view the agenda directly in the browser and download it as a PDF with consistent styling.
The feature enhances user experience by providing a readable, professional, and portable version of the conference agenda.

Here are some screenshots-

Example of the Exported PDF's-

Munich-Agenda.pdf
Lagos-Agenda (1).pdf
London-Agenda.4.pdf

netlify · 2025-10-22T11:56:39Z

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`cdcc4e8`
🔍 Latest deploy log	https://app.netlify.com/projects/peaceful-ramanujan-288045/deploys/698ddbc55c2e6d00088d63de
😎 Deploy Preview	https://deploy-preview-823--peaceful-ramanujan-288045.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…rence-website into agenda-as-pdf

harshhgithub · 2025-10-22T13:35:18Z

@AceTheCreator @thulieblack can you please review ,

thulieblack · 2025-10-23T11:00:35Z

@ashmit-coder @TenzDelek your review as well

TenzDelek

Overall looks fine, but I am concern about the code consistency within the repo if we add this. we generally use tailwind through out our codebase but this one doesn't seems to support it. I would research more on the possible alternatives packages or walk through that support those features.
let waits for others opinion as well. I might be wrong here 😄

components/Agenda/DownloadAgenda.tsx

harshhgithub · 2025-10-25T11:51:42Z

@TenzDelek Thanks a lot for the feedback! 🙏
You’re absolutely right — the rest of the codebase uses Tailwind, and I wanted to stay consistent.
However, since @react-pdf/renderer doesn’t render HTML (it creates a virtual PDF tree instead of DOM elements), it doesn’t support Tailwind classes or utility-based styling.

I looked into alternatives like react-pdf-tailwind and @react-pdf/styled-components, but they’re still limited or experimental for production-level use.

That’s why I went with StyleSheet.create() here — it’s the officially supported approach for PDFs and scoped only within this component, so it won’t affect any Tailwind-styled parts of the app.

harshhgithub · 2025-11-15T04:37:31Z

@TenzDelek @AceTheCreator pls review

AceTheCreator

Left you some reviews :)

AceTheCreator · 2025-11-15T12:37:47Z

components/Agenda/DownloadAgenda.tsx

+            </View>
+            <View style={styles.speakerCol}>
+              {Array.isArray(item.speaker)
+                ? item.speaker.map((id: any, j: React.Key | null | undefined) => {


The speaker ID can't be a type of any. It has to be a type of number

AceTheCreator · 2025-11-15T12:39:02Z

components/Agenda/DownloadAgenda.tsx

+            </View>
+            <View style={styles.speakerCol}>
+              {Array.isArray(item.speaker)
+                ? item.speaker.map((id: any, j: React.Key | null | undefined) => {


j: React.Key | null | undefined

This is a redundant line since the speaker id can also be used as a key, they're unique numbers :)

AceTheCreator · 2025-11-15T12:40:24Z

components/Agenda/DownloadAgenda.tsx

+                  })
+                : (() => {
+                    const sp = city.speakers.find(
+                      (s: any) => s.id === item.speaker


Please, avoid using any when a type exists. The speaker object has an interface; could you use the appropriate type construct?

AceTheCreator · 2025-11-15T12:40:52Z

components/Agenda/DownloadAgenda.tsx

+  );
+};
+
+export const PdfViewer = ({ city }: { city: any }) => (


{ city: any }

City has an interface too :)

AceTheCreator · 2025-11-15T12:41:38Z

components/Agenda/DownloadAgenda.tsx

+  </div>
+);
+
+export const PdfDownloadButton = ({ city }: { city: any }) => (


{ city: any }

Use the appropriate city type instead of 'any'.

AceTheCreator · 2025-11-15T12:42:19Z

components/Agenda/DownloadAgenda.tsx

+          className="w-full md:w-[200px] px-10 py-3"
+          disabled={loading}
+        >
+          {loading ? 'Preparing PDF…' : 'Download PDF'}


I think we shouldn't use the word 'Download PDF' instead use 'Download Agenda'

…rence-website into agenda-as-pdf

harshhgithub · 2025-11-15T14:49:52Z

@AceTheCreator i have made the requested changes , thankyou for your valuable feedback and reviews

AceTheCreator

Left you a final review!

AceTheCreator · 2025-12-02T14:46:18Z

components/Agenda/DownloadAgenda.tsx

+          className="w-full md:w-[200px] px-10 py-3"
+          disabled={loading}
+        >
+          {loading ? 'Preparing Agenda…' : 'Download Agenda'}


The loading text is breaking onto a new line, and I think it’s caused by the button’s [200px] width.

…rence-website into agenda-as-pdf

harshhgithub · 2025-12-02T15:40:03Z

@AceTheCreator fixed it .

AceTheCreator

@harshhgithub one final thing i'm thinking of is, do we really want the download agenda button visible for past events?

cc @thulieblack

harshhgithub · 2025-12-12T12:38:25Z

@harshhgithub one final thing i'm thinking of is, do we really want the download agenda button visible for past events?

cc @thulieblack

We could hide it for events marked as “completed” to keep the UI cleaner.
What do you think, @thulieblack?

thulieblack · 2025-12-12T13:09:50Z

Yes, if you can hide it once event is finished that would be great

…rence-website into agenda-as-pdf

harshhgithub · 2025-12-12T16:07:21Z

@thulieblack @AceTheCreator i have made the “Download Agenda” button hidden for past events and verified that the button appears for future event dates .

AceTheCreator

Left you some review :)

AceTheCreator · 2025-12-12T17:57:07Z

components/Agenda/agenda.tsx

+const isPastEvent = (dateString: string): boolean => {
+  if (dateString.includes('-')) {
+    const parts = dateString.split('-').map(p => p.trim());
+    const endDateString = parts[parts.length - 1];
+    const endDate = new Date(endDateString);
+    return endDate < new Date();
+  }
+  return new Date(dateString) < new Date();
+};
+


I think we should add a helper function to check whether an event is in the past, so it can be reused throughout the application. Right now, a new check is created each time it’s needed (for example, the tickets section also checks for past events).

AceTheCreator · 2025-12-12T17:57:47Z

package.json

    "@googleapis/sheets": "^7.0.0",
-    "axios": "^1.12.0",
+    "@react-pdf/renderer": "^4.3.1",
+    "axios": "^1.8.2",


Sorry, where's axios being used in your implementation?

yes axios isn’t used in this implementation.
It was unintentionally left in package.json and can be removed.

harshhgithub · 2025-12-13T10:03:57Z

@AceTheCreator @thulieblack please have a look

harshhgithub · 2025-12-13T10:41:51Z

@AceTheCreator if i remove the axios it causes checks failing , axios was updated when i run npm run build

AceTheCreator

Left you an additional suggestion

AceTheCreator · 2025-12-17T14:18:19Z

utils/isPastEvent.ts

+export const isPastEvent = (dateString: string): boolean => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  if (dateString.includes('-')) {
+    const parts = dateString.split('-').map((p) => p.trim());
+    const endDateString = parts[parts.length - 1]; 
+    const endDate = new Date(endDateString);
+    if (isNaN(endDate.getTime())) {
+      return false;
+    }
+    endDate.setHours(0, 0, 0, 0);
+    return endDate < today;
+  }
+  const parsedDate = new Date(dateString);
+  if (isNaN(parsedDate.getTime())) {
+    return false;
+  }
+  parsedDate.setHours(0, 0, 0, 0);
+  return parsedDate < today;
+};


@harshhgithub I noticed we already have a utility function called status that checks whether an event is ONGOING, UPCOMING, or ENDED. I think it would be better to reuse that instead of creating a new helper function. What do you think?

@harshhgithub I noticed we already have a utility function called status that checks whether an event is ONGOING, UPCOMING, or ENDED. I think it would be better to reuse that instead of creating a new helper function. What do you think?

One thing I noticed though is that the current implementation doesn’t fully handle date ranges like 2 - 3 July, 2025. Splitting on - results in an invalid start date (new Date("2")), which can cause runtime issues during build/deploy.

I’m happy to refactor getEventStatus to safely parse ranged dates (derive proper start/end dates) and then reuse it instead of introducing isPastEvent. Let me know if that approach works for you.

@thulieblack @AceTheCreator any reviews

Yeah, i'd appreciate it if you extend the getEventStatus method. That'd be all for me

@AceTheCreator @thulieblack I extended getEventStatus to handle date ranges correctly, reusing isPastEvent to keep the logic consistent across the codebase.

…rence-website into agenda-as-pdf

AceTheCreator

I think it will also good for you to include a unit test that can be used to validate these utility functions 🙏🏽

AceTheCreator · 2026-01-27T23:36:20Z

utils/status.ts

+  if (isNaN(startDate.getTime())) {
    return ConferenceStatus.ENDED;
  }
-}


I notice a bug here... For range dates like "9 - 11 December, 2026", parts[0] is just "9". V8 silently parses new Date("9") as Sept 1, 2001 instead of returning Invalid Date, so the isNaN guard is skipped and future events incorrectly return ONGOING.

Fix: when parts[0] is just a number, borrow the month/year from the end part to form a valid start date (e.g. "9" → "9 December, 2026").

@AceTheCreator I’ve updated getEventStatus to normalize numeric start days by borrowing the month/year from the end date (e.g. "9 - 11 December, 2026"), which avoids the V8 parsing issue.

I’ve also added a small unit test alongside utils/status.test.ts

@AceTheCreator pls review

…rence-website into agenda-as-pdf

added download pdf component

3d3378a

harshhgithub requested review from AceTheCreator, Mayaleeeee, ashmit-coder and thulieblack as code owners October 22, 2025 11:56

harshhgithub added 4 commits October 22, 2025 17:33

Merge branch 'master' into agenda-as-pdf

80829e3

resolveed conflicts

1e85eb3

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

1dfd8f2

…rence-website into agenda-as-pdf

resolved

1920996

TenzDelek suggested changes Oct 25, 2025

View reviewed changes

TenzDelek reviewed Oct 25, 2025

View reviewed changes

components/Agenda/DownloadAgenda.tsx Outdated Show resolved Hide resolved

TenzDelek reviewed Oct 25, 2025

View reviewed changes

components/Agenda/DownloadAgenda.tsx Outdated Show resolved Hide resolved

removed the comments and fixed the wording

9b57118

harshhgithub requested a review from TenzDelek October 25, 2025 11:50

Merge branch 'master' into agenda-as-pdf

5b8b1fc

AceTheCreator requested changes Nov 15, 2025

View reviewed changes

AceTheCreator and others added 4 commits November 15, 2025 13:44

Merge branch 'master' into agenda-as-pdf

885c85c

Merge branch 'master' into agenda-as-pdf

4f40261

made the requested changes

7e2c441

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

14223e6

…rence-website into agenda-as-pdf

Merge branch 'master' into agenda-as-pdf

8b2b163

AceTheCreator requested changes Dec 2, 2025

View reviewed changes

harshhgithub added 2 commits December 2, 2025 21:09

fixed

fed790c

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

effd067

…rence-website into agenda-as-pdf

AceTheCreator and others added 4 commits December 3, 2025 20:51

Merge branch 'master' into agenda-as-pdf

e61e26b

Merge branch 'master' into agenda-as-pdf

569a750

Merge branch 'master' into agenda-as-pdf

0f841c7

Merge branch 'master' into agenda-as-pdf

e6e0cbf

AceTheCreator reviewed Dec 11, 2025

View reviewed changes

harshhgithub added 3 commits December 12, 2025 21:21

Merge branch 'master' into agenda-as-pdf

f45419d

made the changes

0e02fa8

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

7413795

…rence-website into agenda-as-pdf

AceTheCreator requested changes Dec 12, 2025

View reviewed changes

made some changes

f323d10

harshhgithub added 4 commits December 13, 2025 15:35

check

da767c2

dependencies

d81692a

fixed

9f6e7f5

fixed errors

b93f9e0

Merge branch 'master' into agenda-as-pdf

ce4c1af

AceTheCreator reviewed Dec 17, 2025

View reviewed changes

harshhgithub added 4 commits December 20, 2025 17:37

Merge branch 'master' into agenda-as-pdf

cd9a72d

extended getEventStatusMethod

6d50cd0

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

83e52ef

…rence-website into agenda-as-pdf

Merge branch 'master' into agenda-as-pdf

e4f4cbe

AceTheCreator requested changes Jan 27, 2026

View reviewed changes

harshhgithub added 3 commits January 28, 2026 14:21

made the asked changes and added unit test

c9b11ae

Merge branch 'agenda-as-pdf' of https://github.com/harshhgithub/confe…

774126d

…rence-website into agenda-as-pdf

Merge branch 'master' into agenda-as-pdf

cdcc4e8

Uh oh!

Conversation

harshhgithub commented Oct 22, 2025

Uh oh!

netlify bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Uh oh!

harshhgithub commented Oct 22, 2025

Uh oh!

thulieblack commented Oct 23, 2025

Uh oh!

TenzDelek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

harshhgithub commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

harshhgithub commented Nov 15, 2025

Uh oh!

AceTheCreator left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harshhgithub commented Nov 15, 2025

Uh oh!

AceTheCreator left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harshhgithub commented Dec 2, 2025

Uh oh!

AceTheCreator left a comment

Choose a reason for hiding this comment

Uh oh!

harshhgithub commented Dec 12, 2025

Uh oh!

thulieblack commented Dec 12, 2025

Uh oh!

harshhgithub commented Dec 12, 2025

Uh oh!

AceTheCreator left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harshhgithub commented Dec 13, 2025

Uh oh!

harshhgithub commented Dec 13, 2025

Uh oh!

AceTheCreator left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

netlify bot commented Oct 22, 2025 •

edited

Loading

harshhgithub commented Oct 25, 2025 •

edited

Loading

harshhgithub Jan 28, 2026 •

edited

Loading