bleh

devcon-app/README.md

@@ -1,12 +1,10 @@
-NOTES ON PWA:
-
-    next-pwa uses workbox under the hood, it emits: sw.js and workbox.****.js
+next-pwa uses workbox under the hood, it emits: sw.js and workbox.\*\*\*\*.js
 
     These files work like this:
         The service worker (sw.js) is registered, and Workbox (workbox.****.js) scripts are imported.
         self.skipWaiting() is invoked to ensure the new service worker will activate immediately after installation.
         Workbox precacheAndRoute lists resources to be precached during the install event that Workbox manages internally.
-        When the installation phase is complete (including precaching), if self.skipWaiting() was called, the service worker will
+        When the installation phase is complete (including precaching), if self.skipWaiting() was called, the service worker will activate immediately.
 
     Update logic:
         Whenever a user opens the pwa, it will fetch "sw.js" - if this changed (even a single byte), the service worker will kick into gear and go through the listed steps above.
@@ -18,3 +16,13 @@ NOTES ON PWA:
 
         Lets say page A and B both return the full schedule data in getStaticProps - nextjs will then generate a .json file for each of these pages - and both would be precached in the end. This is
         obviously inefficient, so it's better to fetch this data in some shared manner.
+
+Open issues:
+
+    Nextjs doesn't seem to play well with the walletconnect/web3modal version we use - probably have to update there to get it working again.
+
+    How to handle SEO combined with PWA data requirements?
+        https://nextjs.org/docs/app/building-your-application/caching
+        Nextjs has a fetch cache size limit of 2mb;
+            this means we can't fetch all sessions in one request, we have to break them apart
+            which also means the caching is

devcon-app/src/pages/404.tsx → devcon-app/_pages/404.tsx

@@ -1,44 +1,33 @@
 import React from 'react'
 import Image404 from 'assets/images/404.png'
-import themes from './themes.module.scss'
-import { PageHero } from 'components/common/page-hero'
 import Image from 'next/image'
 import css from './404.module.scss'
-import { GetPage } from 'services/page'
 import { pageHOC } from 'context/pageHOC'
 import { getGlobalData } from 'services/global'
-import Page from 'components/common/layouts/page'
+import { AppLayout } from 'components/domain/app/Layout'
 
 const FourOhFour = pageHOC(() => {
   return (
-    <Page theme={themes['no-page']}>
-      <PageHero
-        path={[
-          { text: <span className="bold">4</span> },
-          { text: <span className="bold">0</span> },
-          { text: <span className="bold">4</span> },
-        ]}
-      />
-
+    <AppLayout>
       <div className="section clear-top clear-bottom">
         <div className={css['container']}>
           <div className={css['center']}>
             <Image src={Image404} alt="Man looking for something" />
           </div>
         </div>
       </div>
-    </Page>
+    </AppLayout>
   )
 })
 
 export async function getStaticProps(context: any) {
   const globalData = await getGlobalData(context)
-  const page = await GetPage('/404')
+  // const page = await GetPage('/404')
 
   return {
     props: {
       ...globalData,
-      page,
+      // page,
     },
   }
 }

devcon-app/_pages/info.tsx

@@ -0,0 +1,58 @@
+// import { Info } from 'components/domain/app/info'
+import { AppLayout } from 'components/domain/app/Layout'
+import { pageHOC } from 'context/pageHOC'
+import React from 'react'
+// import { GetCategories, GetContentSections, GetFAQ } from 'services/page'
+import { DEFAULT_APP_PAGE } from 'utils/constants'
+import { getGlobalData } from 'services/global'
+import { SEO } from 'components/domain/seo'
+
+export default pageHOC((props: any) => {
+  return <AppLayout>Info Page Under Construction</AppLayout>
+  // return (
+  //   <AppLayout>
+  //     <>
+  //       <SEO title="Info" />
+  //       <Info {...props} />
+  //     </>
+  //   </AppLayout>
+  // )
+})
+
+export async function getStaticProps(context: any) {
+  // const globalData = await getGlobalData(context)
+  const globalAppData = await getGlobalData(context, true)
+  // // const pageFAQ = await GetPage('/faq', context.locale)
+  // // const pageBogota = await GetPage('/bogota', context.locale)
+  // const sections = await GetContentSections(
+  //   [
+  //     'why-devcon-in-bogota',
+  //     'is-bogota-safe',
+  //     'devcon-manual',
+  //     'hacker-basement',
+  //     'relaxation',
+  //     'sustainability',
+  //     'general-tips',
+  //     'internet-wifi-sim-cards',
+  //     'community-hubs',
+  //     'devcon-activations-and-experiences',
+  //     'ticket-attestations-nft-minting',
+  //     'impact-booths',
+  //     'public-good-supporters',
+  //     'passport-app-tips',
+  //     'registration-checkin',
+  //     'venue-guide',
+  //   ],
+  //   context.locale
+  // )
+
+  return {
+    props: {
+      ...globalAppData,
+      // faqs: await GetCategories(context.locale),
+      // cityGuideFaqs: await GetFAQ(context.locale),
+      // sections,
+      page: DEFAULT_APP_PAGE,
+    },
+  }
+}

devcon-app/_pages/themes.module.scss

@@ -0,0 +1,199 @@
+@use 'assets/css/partials/index' as *;
+
+// .light-blue {
+//   --theme-color: #{$colors-track-light-blue};
+//   --theme-color-hover: #{$colors-track-light-blue-hover};
+//   --theme-logo: url('../assets/images/theme/info.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #0fadcf 0%,
+//     rgba(0, 149, 255, 0.4) 58.33%,
+//     rgba(13, 174, 208, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #0fadcf 0%,
+//     rgba(0, 149, 255, 0.4) 58.33%,
+//     rgba(13, 174, 208, 0) 100%
+//   );
+// }
+
+// .blog {
+//   --theme-color: #{$colors-track-yellow};
+//   --theme-color-hover: #{$colors-track-yellow-hover};
+//   --theme-logo: url('../assets/images/pages/blog.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #fee506 0%,
+//     rgba(247, 232, 104, 0.4) 58.33%,
+//     rgba(242, 238, 166, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #fee506 0%,
+//     rgba(247, 232, 104, 0.4) 58.33%,
+//     rgba(242, 238, 166, 0) 100%
+//   );
+// }
+
+// .tickets {
+//   --theme-color: #{$colors-track-blue};
+//   --theme-color-hover: #{$colors-track-blue-hover};
+//   --theme-logo: url('../assets/images/pages/tickets-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #064ae1 0%,
+//     rgba(0, 149, 255, 0.4) 58.33%,
+//     rgba(13, 174, 208, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #064ae1 0%,
+//     rgba(0, 149, 255, 0.4) 58.33%,
+//     rgba(13, 174, 208, 0) 100%
+//   );
+// }
+
+// .teal {
+//   --theme-color: #{$colors-track-teal};
+//   --theme-color-hover: #{$colors-track-teal-hover};
+//   --theme-logo: url('../assets/images/pages/get-involved-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #00b3a4 0%,
+//     rgba(0, 255, 117, 0.4) 58.33%,
+//     rgba(203, 227, 214, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #00b3a4 0%,
+//     rgba(0, 255, 117, 0.4) 58.33%,
+//     rgba(203, 227, 214, 0) 100%
+//   );
+// }
+
+// .about {
+//   --theme-color: #{$colors-track-green};
+//   --theme-color-hover: #{$colors-track-green-hover};
+//   --theme-logo: url('../assets/images/pages/about-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #88c43f 0%,
+//     #50d100 0.01%,
+//     rgba(140, 255, 0, 0.4) 58.33%,
+//     rgba(136, 196, 63, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #88c43f 0%,
+//     #50d100 0.01%,
+//     rgba(140, 255, 0, 0.4) 58.33%,
+//     rgba(136, 196, 63, 0) 100%
+//   );
+// }
+
+// .yellow {
+//   --theme-color: #{$colors-track-yellow};
+//   --theme-color-hover: #{$colors-track-yellow-hover};
+//   --theme-logo: url('../assets/images/pages/blog.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #fee506 0%,
+//     rgba(247, 232, 104, 0.4) 58.33%,
+//     rgba(242, 238, 166, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #fee506 0%,
+//     rgba(247, 232, 104, 0.4) 58.33%,
+//     rgba(242, 238, 166, 0) 100%
+//   );
+// }
+
+// .orange {
+//   --theme-color: #{$colors-track-orange};
+//   --theme-color-hover: #{$colors-track-orange-hover};
+//   --theme-logo: url('../assets/images/pages/blog-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0) 100%
+//   );
+// }
+
+// .red {
+//   --theme-color: #{$colors-track-red};
+//   --theme-color-hover: #{$colors-track-red-hover};
+//   --theme-logo: url('../assets/images/pages/blog-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e92639 0%,
+//     rgba(232, 123, 104, 0.4) 58.33%,
+//     rgba(232, 125, 104, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e92639 0%,
+//     rgba(232, 123, 104, 0.4) 58.33%,
+//     rgba(232, 125, 104, 0) 100%
+//   );
+// }
+
+// .news {
+//   --theme-color: #{$colors-track-red};
+//   --theme-color-hover: #{$colors-track-red-hover};
+//   --theme-logo: url('../assets/images/pages/blog-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0.1) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0.1) 100%
+//   );
+// }
+
+// .bogota {
+//   --theme-color: #{$colors-track-orange};
+//   --theme-color-hover: #{$colors-track-orange-hover};
+//   --theme-logo: url('../assets/images/pages/bogota-stroked.svg');
+//   --theme-gradient: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0) 100%
+//   );
+//   --theme-gradient-footer: radial-gradient(
+//     73.15% 179.46% at 90.19% 25.94%,
+//     #e55066 0%,
+//     rgba(255, 183, 0, 0.4) 58.33%,
+//     rgba(255, 184, 0, 0) 100%
+//   );
+// }
+
+// .program {
+//   --theme-color: #{$colors-track-purple};
+//   --theme-color-hover: #{$colors-track-purple-hover};
+//   --theme-logo: url('../assets/images/pages/program-stroked.svg');
+//   --theme-gradient: radial-gradient(73.15% 179.46% at 90.19% 25.94%, #7958A5 0%, #7000FF 0.01%, rgba(206, 66, 255, 0.2) 100%);
+//   --theme-gradient-footer: radial-gradient(73.15% 179.46% at 90.19% 25.94%, #7958A5 0%, #7000FF 0.01%, rgba(206, 66, 255, 0.2) 100%);
+// }
+
+// .no-page {
+//   --theme-color: #{$colors-track-purple};
+//   --theme-color-hover: #{$colors-track-purple-hover};
+//   --theme-logo: url('../assets/images/pages/bogota-stroked.svg');
+//   --theme-gradient: radial-gradient(73.15% 179.46% at 90.19% 25.94%, #948aa2 0%, #909090 0.01%, rgba(162, 162, 162, 0.2) 100%);
+//   --theme-gradient-footer: radial-gradient(73.15% 179.46% at 90.19% 25.94%, #948aa2 0%, #424242 0.01%, rgba(126, 126, 126, 0.2) 100%);
+// }