fix attendee page (graphql#1545)

Author: dimaMachina

gatsby-node.ts

@@ -92,7 +92,12 @@ export const onCreatePage: GatsbyNode["onCreatePage"] = async ({
   actions,
 }) => {
   // This way is not "the Gatsby way", we create the pages, delete the pages, and create "code" paths page again.
-  if (page.path.startsWith("/blog") || page.path.startsWith("/tags")) {
+  if (
+    page.path.startsWith("/blog") ||
+    page.path.startsWith("/tags") ||
+    // we have manual og:image in this page that point to cf worker
+    page.path.startsWith("/conf/attendee/")
+  ) {
     return
   }
   const { createPage, deletePage } = actions

src/components/Conf/Schedule/ScheduleList.tsx

@@ -37,6 +37,7 @@ interface Props {
   scheduleData: ScheduleSession[]
   filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
 }
+
 const ScheduleList: FC<Props> = ({
   showEventType,
   filterSchedule,
@@ -78,8 +79,8 @@ const ScheduleList: FC<Props> = ({
                 </div>
                 <div className="lg:flex-row flex flex-col gap-5 relative lg:items-start items-end w-full lg:pl-0 pl-[28px]">
                   <div className="block lg:hidden absolute left-3 top-0 h-full w-0.5 bg-gray-200" />
-
                   {sessions.map(session => {
+                    session.event_type ??= ""
                     const eventType = session.event_type.endsWith("s")
                       ? session.event_type.slice(0, -1)
                       : session.event_type

src/pages/conf/attendee.tsx renamed to src/pages/conf/attendee/[hash].tsx

@@ -1,14 +1,13 @@
 import React from "react"
-import LayoutConf from "../../components/Conf/Layout"
-import HeaderConf from "../../components/Conf/Header"
+import LayoutConf from "../../../components/Conf/Layout"
+import HeaderConf from "../../../components/Conf/Header"
 // import ButtonConf from "../../components/Conf/Button"
 import clsx from "clsx"
 import { PageProps, HeadProps } from "gatsby"
-import SeoConf from "../../components/Conf/Seo"
-import { useLocation } from "@reach/router"
+import SeoConf from "../../../components/Conf/Seo"
 
-export default (_props: PageProps) => {
-  const { href, search } = useLocation()
+export default ({ location, params }: PageProps) => {
+  const search = getSeachParams(params.hash)
   // const text = "Nice! I got my @GraphQLConf ticket! Get yours too!"
   return (
     <LayoutConf>
@@ -30,7 +29,7 @@ export default (_props: PageProps) => {
                 )}
                 onClick={async () => {
                   try {
-                    await navigator.clipboard.writeText(href)
+                    await navigator.clipboard.writeText(location.href)
                     console.log("Content copied to clipboard")
                   } catch (err) {
                     console.error("Failed to copy:", err)
@@ -42,22 +41,53 @@ export default (_props: PageProps) => {
             </div>
           </section>
         </div>
-        <img
-          src={`https://og-image.the-guild.dev/conf${search}`}
-          className="block mx-auto"
-        />
+        {search && (
+          <img
+            src={`https://og-image.the-guild.dev/conf${search}`}
+            className="block mx-auto"
+          />
+        )}
       </div>
     </LayoutConf>
   )
 }
 
-export function Head(_props: HeadProps) {
-  const { search } = useLocation()
+function getSeachParams(base64: string): string {
+  let string: string
+  try {
+    string = atob(base64)
+  } catch (error) {
+    console.log(error)
+    return ""
+  }
+
+  let list: string[] = []
+
+  try {
+    list = JSON.parse(string)
+  } catch (error) {
+    console.log(error)
+    return ""
+  }
+
+  const [fullName, jobTitle, company, github] = list
+  const searchParams = new URLSearchParams({
+    ...(fullName && { fullName }),
+    ...(jobTitle && { jobTitle }),
+    ...(company && { company }),
+    ...(github && { github }),
+  })
+  return "?" + searchParams.toString()
+}
+
+export function Head({ params }: HeadProps & { hash: string }) {
   return (
     <SeoConf
       title="My ticket"
       ogImage={{
-        url: `https://og-image.the-guild.dev/conf${search}`,
+        url: `https://og-image.the-guild.dev/conf${getSeachParams(
+          params.hash
+        )}`,
         width: 1200,
         height: 600,
       }}

src/templates/event.tsx

@@ -42,6 +42,7 @@ export const EventComponent: FC<{
   speakers: SchedSpeaker[]
   hideBackButton?: boolean
 }> = ({ event, speakers, hideBackButton }) => {
+  event.event_type ??= ""
   const eventType = event.event_type.endsWith("s")
     ? event.event_type.slice(0, -1)
     : event.event_type