feat(er-next): miscellaneous stuff

apps/epic-react/package.json

@@ -78,6 +78,7 @@
     "feed": "^4.2.2",
     "formik": "2.2.9",
     "framer-motion": "^10.12.4",
+    "get-user-locale": "^2.3.1",
     "gray-matter": "^4.0.3",
     "groq": "^2.15.0",
     "inngest": "3.1.1",

apps/epic-react/schemas/documents/interview.tsx

@@ -1,25 +1,26 @@
 import * as React from 'react'
 import {MdPeople} from 'react-icons/md'
+import {defineArrayMember, defineField, defineType} from 'sanity'
 
-export default {
+export default defineType({
   name: 'interview',
   title: 'Interview',
   type: 'document',
   icon: MdPeople,
   fields: [
-    {
+    defineField({
       name: 'title',
       title: 'Title',
       type: 'string',
       validation: (Rule) => Rule.required(),
-    },
-    {
+    }),
+    defineField({
       name: 'description',
       title: 'Description',
       type: 'markdown',
-      validation: (Rule) => Rule.required(),
-    },
-    {
+      validation: (Rule) => Rule.max(160),
+    }),
+    defineField({
       name: 'slug',
       title: 'Slug',
       type: 'slug',
@@ -28,14 +29,14 @@ export default {
         source: 'title',
         maxLength: 96,
       },
-    },
-    {
-      name: 'isMultiple',
-      title: 'Is it multiple interview?',
-      type: 'boolean',
-      initialValue: false,
-    },
-    {
+    }),
+    defineField({
+      name: 'body',
+      description: 'Body in MDX',
+      title: 'Body',
+      type: 'markdown',
+    }),
+    defineField({
       name: 'portraits',
       title: 'Portraits',
       type: 'object',
@@ -46,28 +47,20 @@ export default {
           type: 'externalImage',
           validation: (Rule) => Rule.required(),
         },
-        {
-          name: 'image2',
-          title: 'Image 2',
-          type: 'externalImage',
-          hidden: ({document}) => {
-            return !document.isMultiple
-          },
-        },
       ],
-    },
-    {
+    }),
+    defineField({
       name: 'resources',
       title: 'Resources',
       type: 'array',
       of: [
-        {
+        defineArrayMember({
           title: 'Video Resource',
           type: 'reference',
           to: [{type: 'videoResource'}],
-        },
+        }),
       ],
-    },
+    }),
   ],
   preview: {
     select: {
@@ -82,4 +75,4 @@ export default {
       }
     },
   },
-}
+})

apps/epic-react/src/components/app/layout.tsx

@@ -61,7 +61,7 @@ const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
         description={description}
         titleTemplate={
           titleAppendSiteName
-            ? `%s | ${process.env.NEXT_PUBLIC_SITE_TITLE}`
+            ? `%s | ${process.env.NEXT_PUBLIC_SITE_TITLE} by ${process.env.NEXT_PUBLIC_PARTNER_FIRST_NAME} ${process.env.NEXT_PUBLIC_PARTNER_LAST_NAME}`
             : undefined
         }
         openGraph={{

apps/epic-react/src/components/livestream.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import getUserLocale from 'get-user-locale'
+import {formatDistance, isFuture} from 'date-fns'
+
+const Livestream = ({
+  title,
+  startDatetime,
+  description,
+  livestreamUrl,
+  children,
+  calendarUrl,
+}: any) => {
+  const userLocale = getUserLocale
+  const milliseconds = startDatetime
+  const isFutureLivestream = isFuture(startDatetime)
+  const date = new Date(milliseconds)
+  const dateOptions = {
+    timeZoneName: 'short',
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }
+
+  const url = `${livestreamUrl}&utm_source=${process.env.SITE_NAME}`
+
+  return (
+    <article className="border-b border-er-gray-200 py-8">
+      {isFutureLivestream && (
+        <span
+          className={`rounded-full bg-opacity-25 px-3 py-1 text-xs font-semibold uppercase tracking-wider ${
+            isFutureLivestream
+              ? 'bg-red-400 text-red-400'
+              : 'bg-green-400 text-green-400'
+          }`}
+        >
+          ● Live
+        </span>
+      )}
+      <a href={url} target="_blank">
+        <h2 className="mb-1 mt-4 text-3xl font-bold leading-tight">{title}</h2>
+      </a>
+      <time className="mb-4 block text-lg font-medium text-er-primary">
+        {isFutureLivestream ? 'Live in' : 'Streamed'}{' '}
+        {formatDistance(date, Date.now())} {!isFutureLivestream && 'ago'}{' '}
+        <span className="text-base font-normal text-er-primary opacity-75">
+          ({date.toLocaleString(userLocale as any, dateOptions as any)})
+        </span>
+      </time>
+      {description && (
+        <p className="text-base text-er-gray-700">{description}</p>
+      )}
+      {children}
+      {isFutureLivestream && calendarUrl ? (
+        <a
+          className="mt-4 inline-flex transform cursor-pointer items-center justify-center rounded-md bg-blue-500 px-4 py-2 font-semibold leading-8 text-white transition-all duration-100 ease-in-out hover:scale-105 hover:bg-blue-600"
+          href={calendarUrl}
+          target="_blank"
+        >
+          {/* prettier-ignore */}
+          <svg className="text-blue-100 mr-1" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M6 2a1 1 0 0 0-1 1v1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1V3a1 1 0 1 0-2 0v1H7V3a1 1 0 0 0-1-1zm0 5a1 1 0 0 0 0 2h8a1 1 0 1 0 0-2H6z" fill="currentColor"/></g></svg>
+          Remind Me
+        </a>
+      ) : (
+        <a
+          className="mt-4 inline-flex transform cursor-pointer items-center justify-center rounded-md bg-blue-500 px-4 py-2 font-semibold leading-8 text-white transition-all duration-100 ease-in-out hover:scale-105 hover:bg-blue-600"
+          href={url}
+          target="_blank"
+        >
+          {/* prettier-ignore */}
+          <svg className="mr-1 text-blue-100" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" ><path fillRule="evenodd" clipRule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9.555 7.168A1 1 0 0 0 8 8v4a1 1 0 0 0 1.555.832l3-2a1 1 0 0 0 0-1.664l-3-2z" fill="currentColor"/></g></svg>
+          Watch Recording
+        </a>
+      )}
+      {isFutureLivestream && (
+        <a
+          className="mt-4 inline-flex transform cursor-pointer items-center justify-center rounded-md border-2 border-blue-500 bg-background px-4 py-2 font-semibold leading-7 text-text transition-all duration-100 ease-in-out hover:scale-105 hover:bg-blue-300 hover:bg-opacity-25 sm:ml-3"
+          href={url}
+          target="_blank"
+        >
+          {/* prettier-ignore */}
+          <svg className="mr-1 text-gray-600" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M11 3a1 1 0 1 0 0 2h2.586l-6.293 6.293a1 1 0 1 0 1.414 1.414L15 6.414V9a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1h-5z" fill="currentColor"/><path d="M5 5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-3a1 1 0 1 0-2 0v3H5V7h3a1 1 0 0 0 0-2H5z" fill="currentColor"/></g></svg>
+          Open on Youtube
+        </a>
+      )}
+    </article>
+  )
+}
+
+export default Livestream

apps/epic-react/src/components/mdx-components/podcast-transcript/index.tsx

@@ -61,7 +61,7 @@ const PodcastTranscript = ({children}: {children: React.ReactNode}) => {
       </div>
       <SimpleBar
         className={cn(
-          'overflow-y-auto overscroll-contain rounded-lg border-er-gray-200 bg-er-gray-100 px-4 text-sm sm:px-7 sm:text-base',
+          'overflow-y-auto overscroll-contain rounded-lg border-er-gray-200 bg-er-gray-100 px-4 text-base sm:px-7 sm:text-lg',
           isOpen ? 'h-auto' : 'h-96',
         )}
       >

apps/epic-react/src/components/pricing-section.tsx

@@ -62,8 +62,7 @@ const PricingSection: React.FC<{
           purchases={purchases}
           couponIdFromCoupon={couponIdFromCoupon}
           couponFromCode={couponFromCode}
-          allowPurchase={true}
-          // allowPurchase={allowPurchase}
+          allowPurchase={allowPurchase}
         />
       </div>
     </div>

apps/epic-react/src/content/livestreams.ts

@@ -0,0 +1,138 @@
+export default [
+  {
+    title: 'React Patterns',
+    description:
+      'Why React Patterns are so critical to your success as an abstraction author.',
+    startDatetime: 1600707600000, // timestamp in milliseconds (https://www.epochconverter.com/)
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MmRzYzBhOWxsNjA0Mm1kY2VwaGJoYzJnY3AgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=WV0UUcSPk-0',
+  },
+  {
+    title: 'Never Use Shallow Rendering',
+    description:
+      'Tests should help me be confident that my application is working and tests that use shallow rendering are tests that need to be baby-sat.',
+    startDatetime: 1600794000000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MGpwbjE4MzlrajI0NWIybGxrdWVpb2llYTQgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=zkpwdw_JWBg',
+  },
+  {
+    title: 'AMA about React & Epic React',
+    startDatetime: 1600880400000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=NXIzZG40YzlkNGxsM2tuOW1hZ25zMDJiMmEgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=gl4X59r6FnE',
+  },
+  {
+    title: 'Tour of EpicReact.Dev',
+    startDatetime: 1601053200000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=M3EzaGtqaXBwY29rbzNlY2w0M2lja3QyYm0gOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=U-DFEZXbnkE',
+  },
+  {
+    title: 'EpicReact.Dev Q&A',
+    startDatetime: 1601312400000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=NHBrazYwdGZqMGtmbThucnBjbnYwZmcya2MgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=3pVB-tzac5o',
+  },
+  {
+    title: 'EpicReact is LIVE! What EpicReact.Dev is all about',
+    startDatetime: 1601398800000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MmluaDZwZWs3NWRpdmFta2FpaDY3NGRndW8gOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=Lr1fE1oLWjM',
+  },
+  {
+    title: 'EpicReact is LIVE! What EpicReact.Dev is all about',
+    startDatetime: 1601485200000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MGpvcDZhbGdpcGY3bm5oZWlpNmtmaGgxYnQgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=YYAb-t5Pvck',
+  },
+  {
+    title: 'EpicReact.Dev Review of React Fundamentals',
+    description: `Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1601571600000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MTgzMTY0ZzJqNXZhOW1xaGtndHMyMjM0ZzYgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=qmSXWPsonfg',
+  },
+  {
+    title: 'EpicReact.Dev Review of React Hooks',
+    description: `Learn the ins and outs of React Hooks. I will take you on a deep dive into React Hooks, and show you what you need to know to start using them in your applications right away. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1601658000000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=NXVuOHBldGhqYjNocmFiYnBicTU2YWgzNXAgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=qyuwWlhyBqc',
+  },
+  {
+    title: 'EpicReact.Dev Review of Advanced React Hooks',
+    description: `We’ll look at some of the more advanced hooks and ways they can be used to optimize your components and custom hooks. We’ll also look at several patterns you can follow to make custom hooks that provide great APIs for developers to be productive building applications. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1601917200000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=N2E2c2UxMGk4ajgwZ2RycTJtOG12MTJnamQgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=y_6tdBzljBY',
+  },
+  {
+    title:
+      'Livestream with Kent: EpicReact.Dev Review of Advanced React Patterns',
+    description: `Not only learn great patterns you can use but also the strengths and weaknesses of each, so you know which to reach for to provide your custom hooks and components the flexibility and power you need. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1602003600000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=NDk4c2VpZzB0aGxiMmhrbThwN2lwaGluZDUgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=rEMtM5vsWE8',
+  },
+  {
+    title: 'EpicReact.Dev Review of React Performance',
+    description: `Learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1602090000000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=Mzc0dTltMTFtdXNwcnRuc2Y3azZmYWN1aDggOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=aXVpX7eRRd8',
+  },
+  {
+    title: 'EpicReact.Dev Review of Testing React Apps',
+    description: `In this hands-on workshop you'll learn everything you need to test React components and applications with ease and get the knowledge you need to ship your applications with confidence. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1602176400000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MmtsMWdodjdxNjZsY2xuMWJob2I2ZzV0ZmIgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=rJr3EZXf2ms',
+  },
+  {
+    title: 'EpicReact.Dev Review of React Suspense',
+    description: `Learn how Suspense works under the hood, preparing you for the future of asynchronous state management. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1602262800000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MnRib2xjbGxoM3NhM2U5aDllYmIyM3NsdTAgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=39K7X_6mR8M',
+  },
+  {
+    title:
+      'Livestream with Kent: EpicReact.Dev Review of Build an Epic React App',
+    description: `The React and JavaScript ecosystem is full of tools and libraries to help you build your applications. In this (huge) workshop we’ll build an application from scratch using widely supported and proven tools and techniques. We’ll cover everything about building frontend React applications, from the absolute basics to the tricky parts you'll run into building real world React apps and how to create great abstractions. We'll review the material for the workshop and answer any questions you have about it.`,
+    startDatetime: 1602522000000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=NGwxYTFjYXVyZDBmMnBhbXBqbDdqa2h2ODkgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=W4JWlf5q4Xc',
+  },
+  {
+    title:
+      'Livestream with Kent: EpicReact.Dev Review of Epic React Expert Interviews',
+    description: `Kent Interviews experts on various topics. We'll go over what topics are covered in the interviews as well as the interviewees themselves.`,
+    startDatetime: 1602608400000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MmJ2c2s1ZXBrYnA0YWxxZHZwa21pYW1hcmEgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=QYGLUrDBglE',
+  },
+  {
+    title: 'EpicReact.Dev Final Q&A',
+    description: `The EpicReact.Dev launch sale is almost over! Join us and get your last minute questions answered.`,
+    startDatetime: 1602622800000,
+    calendarUrl:
+      'https://calendar.google.com/event?action=TEMPLATE&tmeid=MXRybDk4dGtnNTJmOWhmOTU4Mm1va2ZqaXEgOHM5ZHM1YmpyZzNhdHBoZW1nb2ozcnI5dTBAZw&tmsrc=8s9ds5bjrg3atphemgoj3rr9u0%40group.calendar.google.com',
+    livestreamUrl: 'https://www.youtube.com/watch?v=nZTVrhdkJBE',
+  },
+]