-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #287 from worldaffairsconference/dev
fix faq and register button bugs
- Loading branch information
Showing
3 changed files
with
109 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from "svelte"; | ||
| import LargeAccordion from "$lib/components/LargeAccordion.svelte"; | ||
| import DOMPurify from "dompurify"; | ||
| // Static FAQ data | ||
| interface FAQRecord { | ||
| question: string; | ||
| answer: string; | ||
|
|
@@ -12,28 +12,76 @@ | |
| [category: string]: FAQRecord[]; | ||
| }; | ||
| let faqByCategories: FAQCategories | null = null; | ||
| let loading = true; | ||
| let error = ""; | ||
| onMount(async () => { | ||
| try { | ||
| const response = await fetch("./faqData.json"); | ||
| if (!response.ok) { | ||
| throw new Error("Failed to load FAQ data"); | ||
| const faqByCategories: FAQCategories = { | ||
| "General": [ | ||
| { | ||
| question: "What is WAC?", | ||
| answer: "The World Affairs Conference (WAC) is Canada’s oldest annual student-run conference on current affairs. WAC annually connects over 2000 students, with a common interest in current affairs, from across the globe." | ||
| }, | ||
| { | ||
| question: "Where is WAC?", | ||
| answer: "WAC is held at Upper Canada College (200 Lonsdale Road) in Toronto, Canada." | ||
| }, | ||
| { | ||
| question: "Who makes WAC happen?", | ||
| answer: "A team of around 100 dedicated high school students from Upper Canada College and Branksome Hall voluntarily work for many months leading up to the day of the conference to ensure that WAC is a success and that everyone who attends has a positive and valuable experience." | ||
| }, | ||
| { | ||
| question: "When is WAC?", | ||
| answer: "WAC 2025 will be held on Wednesday, March 5th, 2025. It is an event that runs all day, filled with exciting and thoughtful discussions as well as networking opportunities." | ||
| }, | ||
| { | ||
| question: "Who can attend WAC?", | ||
| answer: "Any high school student can attend WAC. If you are interested in attending the conference, please contact a school teacher and ask them to reach out to [email protected]." | ||
| } | ||
| ], | ||
| "Registration": [ | ||
| { | ||
| question: "How much does WAC cost?", | ||
| answer: "More details will be shared soon!" | ||
| }, | ||
| { | ||
| question: "When is registration due?", | ||
| answer: "More details will be shared soon!" | ||
| }, | ||
| { | ||
| question: "How can I register my school?", | ||
| answer: "More details will be shared soon!" | ||
| }, | ||
| { | ||
| question: "What should I do if I encounter problems during registration?", | ||
| answer: "More details will be shared soon!" | ||
| } | ||
| ], | ||
| "Keynote Address": [ | ||
| { | ||
| question: "What happens during the Keynote Address?", | ||
| answer: "On the day of the conference, there will be an Opening and Closing Keynote address, and a prominent member of the community will give a keynote on current affairs. The Keynote Address will also feature a Q&A session." | ||
| }, | ||
| { | ||
| question: "When does the Keynote Address start?", | ||
| answer: "The registration dashboard will show keynote and plenary times, locations, and speaker details." | ||
| }, | ||
| { | ||
| question: "Who can attend the Keynote Address?", | ||
| answer: "Everybody is invited to come to the Opening and Closing Keynotes." | ||
| } | ||
| const data: FAQCategories = await response.json(); | ||
| faqByCategories = data; | ||
| } catch (err: unknown) { | ||
| if (err instanceof Error) { | ||
| error = err.message; | ||
| } else { | ||
| error = "An unknown error occurred"; | ||
| ], | ||
| "Plenaries": [ | ||
| { | ||
| question: "What happens during the Plenary Address?", | ||
| answer: "Plenary sessions include a variety of speaking formats, including fireside chats and presentations where speakers will discuss their topics and participants will be able to ask the speakers questions at the end of each session." | ||
| }, | ||
| { | ||
| question: "Who can attend the Plenary Address?", | ||
| answer: "During each plenary session, attendees have the option to choose to attend one plenary out of the 4 offered during the same time. We'll try our best to assign each participant's first choices as their plenaries on the day of WAC. Further information about participants’ chosen plenaries will be shared as the conference date approaches." | ||
| }, | ||
| { | ||
| question: "When do Plenary sessions start?", | ||
| answer: "The conference schedule, which will be shared at a later time, will outline the times for plenary sessions, lunch, and networking." | ||
| } | ||
| } finally { | ||
| loading = false; | ||
| } | ||
| }); | ||
| ] | ||
| }; | ||
| const sanitizeHtml = (html: string) => DOMPurify.sanitize(html); | ||
| </script> | ||
|
|
@@ -42,74 +90,52 @@ | |
| <title>FAQ - World Affairs Conference</title> | ||
| </svelte:head> | ||
|
|
||
| <section | ||
| class="faq-section pt-[5rem] md:pt-[7.5rem] lg:pt-[9rem] pb-[5rem] lg:pb-[7rem]" | ||
| > | ||
| <section class="faq-section pt-[5rem] md:pt-[7.5rem] lg:pt-[9rem] pb-[5rem] lg:pb-[7rem]"> | ||
| <div class="max-w-screen-xl mx-auto px-6 lg:px-16"> | ||
| <div class="mb-10 lg:mb-20 mt-6 text-center"> | ||
| <h3 | ||
| class="mb-1 md:mb-2 block md:text-lg font-semibold text-primary" | ||
| > | ||
| <h3 class="mb-1 md:mb-2 block md:text-lg font-semibold text-primary"> | ||
| FAQ | ||
| </h3> | ||
| <h1 | ||
| class="font-bold text-white text-4xl md:text-5xl tracking-tight" | ||
| > | ||
| <h1 class="font-bold text-white text-4xl md:text-5xl tracking-tight"> | ||
| Any Questions? | ||
| </h1> | ||
| </div> | ||
|
|
||
| {#if loading} | ||
| <p class="text-white">Loading...</p> | ||
| {:else if error} | ||
| <p class="text-red-500">{error}</p> | ||
| {:else if faqByCategories} | ||
| <div class="flex flex-col gap-16"> | ||
| {#each Object.entries(faqByCategories) as [categoryName, records]} | ||
| <div> | ||
| <h3 | ||
| class="text-2xl md:text-3xl font-semibold text-white mb-4 md:mb-8 text-center" | ||
| > | ||
| {categoryName} | ||
| </h3> | ||
| <div class="flex flex-col gap-16"> | ||
| {#each Object.entries(faqByCategories) as [categoryName, records]} | ||
| <div> | ||
| <h3 class="text-2xl md:text-3xl font-semibold text-white mb-4 md:mb-8 text-center"> | ||
| {categoryName} | ||
| </h3> | ||
|
|
||
| <div class="flex gap-4 w-full flex-col lg:flex-row"> | ||
| <div class="flex flex-col gap-4 w-full lg:w-1/2"> | ||
| {#each records as record, i} | ||
| {#if i % 2 === 0} | ||
| <LargeAccordion | ||
| header={record.question} | ||
| > | ||
| <!-- eslint-disable-next-line svelte/no-at-html-tags --> | ||
| <div class="markdown"> | ||
| {@html sanitizeHtml( | ||
| record.answer | ||
| )} | ||
| </div> | ||
| </LargeAccordion> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| <div class="flex flex-col gap-4 w-full lg:w-1/2"> | ||
| {#each records as record, i} | ||
| {#if i % 2 === 1} | ||
| <LargeAccordion | ||
| header={record.question} | ||
| > | ||
| <!-- eslint-disable-next-line svelte/no-at-html-tags --> | ||
| <div class="text-zinc-300 markdown"> | ||
| {@html sanitizeHtml( | ||
| record.answer | ||
| )} | ||
| </div> | ||
| </LargeAccordion> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| <div class="flex gap-4 w-full flex-col lg:flex-row"> | ||
| <div class="flex flex-col gap-4 w-full lg:w-1/2"> | ||
| {#each records as record, i} | ||
| {#if i % 2 === 0} | ||
| <LargeAccordion header={record.question}> | ||
| <!-- eslint-disable-next-line svelte/no-at-html-tags --> | ||
| <div class="markdown"> | ||
| {@html sanitizeHtml(record.answer)} | ||
| </div> | ||
| </LargeAccordion> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| <div class="flex flex-col gap-4 w-full lg:w-1/2"> | ||
| {#each records as record, i} | ||
| {#if i % 2 === 1} | ||
| <LargeAccordion header={record.question}> | ||
| <!-- eslint-disable-next-line svelte/no-at-html-tags --> | ||
| <div class="text-zinc-300 markdown"> | ||
| {@html sanitizeHtml(record.answer)} | ||
| </div> | ||
| </LargeAccordion> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| </section> | ||