├── .eslintrc
├── .gitignore
├── .node-version
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode
    └── settings.json
├── README.md
├── components
    ├── Course
    │   ├── CourseContent.tsx
    │   ├── CourseHero.tsx
    │   ├── CourseNextLessonBtn.tsx
    │   └── CourseProgress.tsx
    ├── Footer.tsx
    ├── Header.tsx
    ├── Home
    │   ├── HomeCourses.tsx
    │   ├── HomeFeatures.tsx
    │   ├── HomeHero.tsx
    │   └── HomeProgress.tsx
    ├── Layout.tsx
    ├── Lesson
    │   ├── CompleteLessonBtn.tsx
    │   ├── LessonBreadcrumbs.tsx
    │   ├── LessonHero.tsx
    │   ├── LessonLayout.tsx
    │   ├── LessonProgress.tsx
    │   ├── LessonToc.tsx
    │   ├── MultipleChoiceChallenge.tsx
    │   ├── NextLessonBtn.tsx
    │   └── SkipChallenge.tsx
    ├── Mobile
    │   ├── MobileCourses.tsx
    │   ├── MobileNav.tsx
    │   └── MobileProgress.tsx
    ├── Progress
    │   ├── CompletedLesson.tsx
    │   ├── IncompleteLesson.tsx
    │   └── ProgressLine.tsx
    └── Subscribe.tsx
├── content
    └── courses
    │   ├── cypress-fundamentals
    │       ├── command-chaining.mdx
    │       ├── cypress-runs-in-the-browser.mdx
    │       └── how-to-write-a-test.mdx
    │   ├── testing-foundations
    │       ├── knowing-what-to-test.mdx
    │       ├── manual-vs-automated-testing.mdx
    │       └── testing-is-a-mindset.mdx
    │   └── testing-your-first-application
    │       ├── app-install-and-overview.mdx
    │       ├── installing-cypress-and-writing-our-first-test.mdx
    │       └── setting-up-data-before-each-test.mdx
├── data
    └── courses.json
├── docs
    ├── .vuepress
    │   └── config.js
    ├── directory-structure
    │   └── index.md
    ├── images
    │   └── progress.png
    ├── index.md
    ├── machines
    │   └── index.md
    ├── pages
    │   └── index.md
    ├── scripts
    │   └── index.md
    └── utils
    │   └── index.md
├── lib
    └── fetch-courses.ts
├── machines
    ├── progressMachine.ts
    └── progressService.ts
├── next-env.d.ts
├── next-sitemap.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── [course]
    │   ├── [slug].tsx
    │   └── index.tsx
    ├── _app.tsx
    ├── _document.js
    ├── api
    │   ├── courses.js
    │   └── subscribe.js
    └── index.tsx
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── images
    │   ├── courses
    │   │   ├── cypress-rwa.png
    │   │   └── store.png
    │   └── logo
    │   │   ├── cypress-logo.png
    │   │   └── cypress-logo.webp
    ├── robots.txt
    └── sitemap.xml
├── renovate.json
├── styles
    └── global.css
├── tailwind.config.js
├── tsconfig.json
├── types
    └── common.d.ts
└── utils
    ├── machineUtils.ts
    └── mdxUtils.ts


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next", 
 4 |     "prettier"
 5 |   ],
 6 |   "plugins": [
 7 |     "prettier"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | # Cypress
38 | cypress/videos
39 | cypress/screenshots


--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 18.17.1


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18.17.1


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .next


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"semi": false
3 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Real World Testing with Cypress - Course App
2 | 
3 | This application is for the [Testing your first application course](https://learn.cypress.io/testing-your-first-application) on [learn.cypress.io](https://learn.cypress.io/).
4 | 
5 | The `start` branch is the main branch for this repo and is the starting point for the course. The [final](https://github.com/cypress-io/cypress-realworld-testing-course-app/tree/final) branch contains the completed tests.
6 | 


--------------------------------------------------------------------------------
/components/Course/CourseContent.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import { CheckIcon } from "@heroicons/react/outline"
 3 | import CourseProgress from "./CourseProgress"
 4 | 
 5 | const CourseNextLessonBtn = dynamic(() => import("./CourseNextLessonBtn"), {
 6 |   ssr: false,
 7 | })
 8 | 
 9 | export default function CourseContent({
10 |   title,
11 |   lessons,
12 |   learnFeatures,
13 |   progressService,
14 |   course,
15 | }) {
16 |   const stats = [{ label: "Lessons", value: lessons.length }]
17 | 
18 |   return (
19 |     <>
20 |       <hr />
21 |       <div className="py-16 overflow-hidden">
22 |         <div className="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
23 |           <div className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
24 |             <div className="relative z-10">
25 |               <h2 className="text-base font-semibold tracking-wide uppercase">
26 |                 {title}
27 |               </h2>
28 |               <div className="mt-10 flex text-base max-w-prose mx-auto lg:max-w-none">
29 |                 <CourseProgress
30 |                   course={course}
31 |                   lessons={lessons}
32 |                   progressService={progressService}
33 |                 />
34 |               </div>
35 |             </div>
36 | 
37 |             {/* Right Column */}
38 |             <div className="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
39 |               <div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
40 |                 {/* Content area */}
41 |                 <div className="">
42 |                   <h2 className="text-3xl text-gray-900 font-extrabold tracking-tight sm:text-4xl">
43 |                     What You Will Learn
44 |                   </h2>
45 | 
46 |                   {/* Features */}
47 |                   <div className="mt-12">
48 |                     <dl className="">
49 |                       {learnFeatures.map((feature, index) => (
50 |                         <div key={index} className="relative mb-6">
51 |                           <dt>
52 |                             <CheckIcon
53 |                               className="absolute h-6 w-6 text-blue-500"
54 |                               aria-hidden="true"
55 |                             />
56 |                             <p className="ml-9 text-lg leading-6 font-medium text-gray-600">
57 |                               {feature}
58 |                             </p>
59 |                           </dt>
60 |                         </div>
61 |                       ))}
62 |                     </dl>
63 |                   </div>
64 |                 </div>
65 | 
66 |                 {/* Stats course */}
67 |                 <div className="mt-10">
68 |                   <dl className="grid grid-cols-2 gap-x-4 gap-y-8">
69 |                     {stats.map((stat) => (
70 |                       <div
71 |                         key={stat.label}
72 |                         className="border-t-2 border-gray-100 pt-6"
73 |                       >
74 |                         <dt className="text-base font-medium text-gray-500">
75 |                           {stat.label}
76 |                         </dt>
77 |                         <dd className="text-3xl font-extrabold tracking-tight text-gray-900">
78 |                           {stat.value}
79 |                         </dd>
80 |                       </div>
81 |                     ))}
82 |                   </dl>
83 |                 </div>
84 |                 <CourseNextLessonBtn
85 |                   lessons={lessons}
86 |                   progressService={progressService}
87 |                   course={course}
88 |                 />
89 |               </div>
90 |             </div>
91 |           </div>
92 |         </div>
93 |       </div>
94 |     </>
95 |   )
96 | }
97 | 


--------------------------------------------------------------------------------
/components/Course/CourseHero.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | export default function CourseHero({ title, description, image }) {
 4 |   return (
 5 |     <div className="relative bg-white overflow-hidden">
 6 |       <div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
 7 |         <main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
 8 |           <div className="lg:grid lg:grid-cols-12 lg:gap-8">
 9 |             <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
10 |               <h1>
11 |                 <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
12 |                   <span className="block text-gray-900">{title}</span>
13 |                 </span>
14 |               </h1>
15 |               <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
16 |                 {description}
17 |               </p>
18 |             </div>
19 |             <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
20 |               <div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
21 |                 <img className="w-full rounded-lg" src={image} />
22 |               </div>
23 |             </div>
24 |           </div>
25 |         </main>
26 |       </div>
27 |     </div>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/components/Course/CourseNextLessonBtn.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | import { isLessonCompleted } from "../../utils/machineUtils"
 3 | 
 4 | export default function CourseNextLessonBtn({
 5 |   lessons,
 6 |   progressService,
 7 |   course,
 8 | }) {
 9 |   const incompleLessons = lessons
10 |     .map((lesson) => {
11 |       if (!isLessonCompleted(progressService, `${course}/${lesson.slug}`)) {
12 |         return lesson.slug
13 |       }
14 |     })
15 |     .filter((lesson) => lesson !== undefined)
16 | 
17 |   const buttonText = () => {
18 |     if (!incompleLessons.length) {
19 |       return "Course Completed"
20 |     }
21 | 
22 |     if (incompleLessons.length === lessons.length) {
23 |       return "Start Course"
24 |     } else {
25 |       return "Next Lesson"
26 |     }
27 |   }
28 | 
29 |   const buttonURL = () => {
30 |     if (!incompleLessons.length) {
31 |       return "/"
32 |     } else {
33 |       return `${course}/${incompleLessons[0]}`
34 |     }
35 |   }
36 | 
37 |   return (
38 |     <div className="py-20">
39 |       <Link href={buttonURL()}>
40 |         <a
41 |           data-test="next-lesson-button"
42 |           className="mx-auto max-w-xl flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 md:py-4 md:text-lg md:px-10"
43 |         >
44 |           {buttonText()}
45 |         </a>
46 |       </Link>
47 |     </div>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/components/Course/CourseProgress.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import Link from "next/link"
 3 | import { isLessonCompleted } from "../../utils/machineUtils"
 4 | 
 5 | const ProgressLine = dynamic(() => import("../Progress/ProgressLine"), {
 6 |   ssr: false,
 7 | })
 8 | 
 9 | const CompletedLesson = dynamic(() => import("../Progress/CompletedLesson"), {
10 |   ssr: false,
11 | })
12 | 
13 | const IncompleteLesson = dynamic(() => import("../Progress/IncompleteLesson"), {
14 |   ssr: false,
15 | })
16 | 
17 | function classNames(...classes) {
18 |   return classes.filter(Boolean).join(" ")
19 | }
20 | 
21 | export default function CourseProgress({ lessons, progressService, course }) {
22 |   return (
23 |     <nav aria-label="Progress" className="mt-12" data-test="course-steps">
24 |       <ol className="overflow-hidden">
25 |         {lessons.map((lesson, index) => (
26 |           <li
27 |             data-test={`lesson-${index}`}
28 |             key={lesson.title}
29 |             className={classNames(
30 |               index !== lessons.length - 1 ? "pb-10" : "",
31 |               "relative"
32 |             )}
33 |           >
34 |             {/* Solid Line that connects the checkmarks */}
35 |             <ProgressLine
36 |               index={index}
37 |               lessons={lessons}
38 |               isCompleted={isLessonCompleted(
39 |                 progressService,
40 |                 `${course}/${lesson.slug}`
41 |               )}
42 |             />
43 | 
44 |             <div className="relative flex items-start group">
45 |               {isLessonCompleted(
46 |                 progressService,
47 |                 `${course}/${lesson.slug}`
48 |               ) && <CompletedLesson index={index} />}
49 | 
50 |               {!isLessonCompleted(
51 |                 progressService,
52 |                 `${course}/${lesson.slug}`
53 |               ) && <IncompleteLesson index={index} />}
54 | 
55 |               {/* Lesson Title */}
56 |               <span className="ml-4 min-w-0 flex flex-col">
57 |                 <span className="text-xs font-semibold tracking-wide uppercase">
58 |                   <Link href={`/${course}/${lesson.slug}`}>
59 |                     <a data-test={`lesson-progress-link-${index}`}>
60 |                       {lesson.title}
61 |                     </a>
62 |                   </Link>
63 |                 </span>
64 |               </span>
65 |             </div>
66 |           </li>
67 |         ))}
68 |       </ol>
69 |     </nav>
70 |   )
71 | }
72 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | const navigation = {
 2 |   main: [
 3 |     { name: "Next.js", href: "https://nextjs.org/" },
 4 |     {
 5 |       name: "Cypress",
 6 |       href: "https://www.cypress.io/",
 7 |     },
 8 |     {
 9 |       name: "GitHub",
10 |       href: "https://github.com/cypress-io/cypress",
11 |     },
12 |   ],
13 | }
14 | 
15 | export default function Footer() {
16 |   return (
17 |     <>
18 |       <hr />
19 |       <footer className="bg-white">
20 |         {/* Email Subscription */}
21 |         <div className="py-8 lg:flex lg:items-center lg:justify-between lg:max-w-7xl lg:mx-auto xl:mt-0">
22 |           <div>
23 |             <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
24 |               Subscribe for updates
25 |             </h3>
26 |             {/* <p className="mt-2 text-base text-gray-500">
27 |             The latest updates sent to your inbox.
28 |           </p> */}
29 |           </div>
30 |           <form className="mt-4 sm:flex sm:max-w-md lg:mt-0">
31 |             <label htmlFor="email-address" className="sr-only">
32 |               Email address
33 |             </label>
34 |             <input
35 |               type="email"
36 |               name="email-address"
37 |               id="email-address"
38 |               autoComplete="email"
39 |               required
40 |               className="appearance-none min-w-0 w-full bg-white border border-gray-300 py-2 px-4 text-base rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:placeholder-gray-400 sm:max-w-xs"
41 |               placeholder="Enter your email"
42 |             />
43 |             <div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
44 |               <button
45 |                 type="submit"
46 |                 className="w-full bg-blue-500 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
47 |               >
48 |                 Subscribe
49 |               </button>
50 |             </div>
51 |           </form>
52 |         </div>
53 |         <hr />
54 |         <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
55 |           <nav
56 |             className="-mx-5 -my-2 flex flex-wrap justify-center"
57 |             aria-label="Footer"
58 |           >
59 |             {navigation.main.map((item) => (
60 |               <div key={item.name} className="px-5 py-2">
61 |                 <a
62 |                   href={item.href}
63 |                   className="text-base text-gray-500 hover:text-gray-900"
64 |                 >
65 |                   {item.name}
66 |                 </a>
67 |               </div>
68 |             ))}
69 |           </nav>
70 |           <p className="mt-8 text-center text-base text-gray-400">
71 |             &copy; {`${new Date().getFullYear()}`} Cypress. All rights reserved.
72 |           </p>
73 |         </div>
74 |       </footer>
75 |     </>
76 |   )
77 | }
78 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | import { Fragment } from "react"
  2 | import { Popover, Transition } from "@headlessui/react"
  3 | import MobileNav from "./Mobile/MobileNav"
  4 | import Link from "next/link"
  5 | import coursesJson from "../data/courses.json"
  6 | import { MenuIcon } from "@heroicons/react/outline"
  7 | import { ChevronDownIcon, CodeIcon } from "@heroicons/react/solid"
  8 | 
  9 | function classNames(...classes) {
 10 |   return classes.filter(Boolean).join(" ")
 11 | }
 12 | 
 13 | export default function Header({ content, courses, progressService }) {
 14 |   const coursesJsonCourses = Object.keys(coursesJson)
 15 | 
 16 |   return (
 17 |     <>
 18 |       <Popover className="relative bg-white hidden lg:block">
 19 |         <div
 20 |           className="absolute inset-0 shadow z-30 pointer-events-none"
 21 |           aria-hidden="true"
 22 |         />
 23 |         <div className="relative z-20">
 24 |           <div className="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
 25 |             <div>
 26 |               <Link href="/">
 27 |                 <a className="flex">
 28 |                   <span className="sr-only">Workflow</span>
 29 |                   <CodeIcon className="h-8 w-auto sm:h-10 text-blue-500" />
 30 |                 </a>
 31 |               </Link>
 32 |             </div>
 33 |             <div className="md:hidden">
 34 |               <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
 35 |                 <span className="sr-only">Open menu</span>
 36 |                 <MenuIcon className="h-6 w-6" aria-hidden="true" />
 37 |               </Popover.Button>
 38 |             </div>
 39 |             <div className="hidden md:flex-1 md:flex md:items-center md:justify-between">
 40 |               <Popover.Group as="nav" className="flex space-x-10">
 41 |                 <Popover>
 42 |                   {({ open }) => (
 43 |                     <>
 44 |                       <Popover.Button
 45 |                         className={classNames(
 46 |                           open ? "text-gray-900" : "text-gray-500",
 47 |                           "group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 48 |                         )}
 49 |                         data-test="courses-dropdown"
 50 |                       >
 51 |                         <span>Courses</span>
 52 |                         <ChevronDownIcon
 53 |                           className={classNames(
 54 |                             open ? "text-gray-600" : "text-gray-400",
 55 |                             "ml-2 h-5 w-5 group-hover:text-gray-500"
 56 |                           )}
 57 |                           aria-hidden="true"
 58 |                         />
 59 |                       </Popover.Button>
 60 | 
 61 |                       <Transition
 62 |                         as={Fragment}
 63 |                         enter="transition ease-out duration-200"
 64 |                         enterFrom="opacity-0 -translate-y-1"
 65 |                         enterTo="opacity-100 translate-y-0"
 66 |                         leave="transition ease-in duration-150"
 67 |                         leaveFrom="opacity-100 translate-y-0"
 68 |                         leaveTo="opacity-0 -translate-y-1"
 69 |                       >
 70 |                         <Popover.Panel className="hidden md:block absolute z-10 top-full inset-x-0 transform shadow-lg bg-white">
 71 |                           <div
 72 |                             className="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16"
 73 |                             data-test="courses-dropdown-menu"
 74 |                           >
 75 |                             {coursesJsonCourses.map((course, index) => (
 76 |                               <a
 77 |                                 key={coursesJson[course].slug}
 78 |                                 href={`/${coursesJson[course].slug}`}
 79 |                                 className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50"
 80 |                               >
 81 |                                 <div className="flex md:h-full lg:flex-col">
 82 |                                   <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
 83 |                                     <div>
 84 |                                       <p className="text-base font-medium text-gray-900">
 85 |                                         {`${index + 1}. ${
 86 |                                           coursesJson[course].title
 87 |                                         }`}
 88 |                                       </p>
 89 |                                       <p className="mt-1 text-sm text-gray-500">
 90 |                                         {coursesJson[course].description}
 91 |                                       </p>
 92 |                                     </div>
 93 |                                     <p className="mt-2 text-sm font-medium text-blue-500 lg:mt-4">
 94 |                                       Get Started{" "}
 95 |                                       <span aria-hidden="true">&rarr;</span>
 96 |                                     </p>
 97 |                                   </div>
 98 |                                 </div>
 99 |                               </a>
100 |                             ))}
101 |                           </div>
102 |                         </Popover.Panel>
103 |                       </Transition>
104 |                     </>
105 |                   )}
106 |                 </Popover>
107 |               </Popover.Group>
108 |             </div>
109 |           </div>
110 |         </div>
111 |       </Popover>
112 |       <MobileNav
113 |         content={content}
114 |         courses={courses}
115 |         progressService={progressService}
116 |       />
117 |     </>
118 |   )
119 | }
120 | 


--------------------------------------------------------------------------------
/components/Home/HomeCourses.tsx:
--------------------------------------------------------------------------------
  1 | import dynamic from "next/dynamic"
  2 | 
  3 | const HomeProgress = dynamic(() => import("./HomeProgress"), {})
  4 | 
  5 | export default function HomeCourses({ courses, content, progressService }) {
  6 |   return (
  7 |     <div className="relative bg-white pt-16 pb-32 overflow-hidden">
  8 |       {courses.map((course, index) => (
  9 |         <div key={course} data-test={`course-${index}`}>
 10 |           {index % 2 === 0 ? (
 11 |             <div className="relative">
 12 |               <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
 13 |                 <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
 14 |                   <div>
 15 |                     <div className="mt-6">
 16 |                       <h2
 17 |                         data-test={`course-title`}
 18 |                         className="text-3xl font-extrabold tracking-tight text-gray-900"
 19 |                       >
 20 |                         {content[course].title}
 21 |                       </h2>
 22 |                       <p
 23 |                         data-test={`course-description`}
 24 |                         className="mt-4 text-lg text-gray-500"
 25 |                       >
 26 |                         {content[course].description}
 27 |                       </p>
 28 |                       <HomeProgress
 29 |                         course={course}
 30 |                         content={content[course]}
 31 |                         progressService={progressService}
 32 |                       />
 33 |                       <div className="mt-6">
 34 |                         <a
 35 |                           href={`/${content[course].slug}`}
 36 |                           className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600"
 37 |                         >
 38 |                           Get started
 39 |                         </a>
 40 |                       </div>
 41 |                     </div>
 42 |                   </div>
 43 |                 </div>
 44 |                 <div className="mt-12 sm:mt-16 lg:mt-0">
 45 |                   <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
 46 |                     <img
 47 |                       className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
 48 |                       src={content[course].image}
 49 |                     />
 50 |                   </div>
 51 |                 </div>
 52 |               </div>
 53 |             </div>
 54 |           ) : (
 55 |             <div className="mt-24">
 56 |               <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
 57 |                 <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
 58 |                   <div>
 59 |                     <div className="mt-6">
 60 |                       <h2
 61 |                         data-test={`course-title`}
 62 |                         className="text-3xl font-extrabold tracking-tight text-gray-900"
 63 |                       >
 64 |                         {content[course].title}
 65 |                       </h2>
 66 |                       <p
 67 |                         data-test={`course-description`}
 68 |                         className="mt-4 text-lg text-gray-500"
 69 |                       >
 70 |                         {content[course].description}
 71 |                       </p>
 72 |                       <HomeProgress
 73 |                         course={course}
 74 |                         content={content[course]}
 75 |                         progressService={progressService}
 76 |                       />
 77 |                       <div className="mt-6">
 78 |                         <a
 79 |                           href={`/${content[course].slug}`}
 80 |                           className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600"
 81 |                         >
 82 |                           Get started
 83 |                         </a>
 84 |                       </div>
 85 |                     </div>
 86 |                   </div>
 87 |                 </div>
 88 |                 <div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
 89 |                   <div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
 90 |                     <img
 91 |                       className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
 92 |                       src={content[course].image}
 93 |                     />
 94 |                   </div>
 95 |                 </div>
 96 |               </div>
 97 |             </div>
 98 |           )}
 99 |         </div>
100 |       ))}
101 |     </div>
102 |   )
103 | }
104 | 


--------------------------------------------------------------------------------
/components/Home/HomeFeatures.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   LightBulbIcon,
 3 |   BeakerIcon,
 4 |   TerminalIcon,
 5 |   DatabaseIcon,
 6 |   CodeIcon,
 7 |   AdjustmentsIcon,
 8 | } from "@heroicons/react/outline"
 9 | 
10 | const features = [
11 |   {
12 |     name: "Prepare your Testing Mindset",
13 |     icon: LightBulbIcon,
14 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
15 |   },
16 |   {
17 |     name: "Learn What to Test",
18 |     icon: BeakerIcon,
19 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
20 |   },
21 |   {
22 |     name: "Debug Failing Tests Efficiently",
23 |     icon: TerminalIcon,
24 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
25 |   },
26 |   {
27 |     name: "Learn Database Initialization & Seeding",
28 |     icon: DatabaseIcon,
29 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
30 |   },
31 |   {
32 |     name: "Understand Different Testing Types",
33 |     icon: CodeIcon,
34 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
35 |   },
36 |   {
37 |     name: "Apply your Knowledge",
38 |     icon: AdjustmentsIcon,
39 |     description: "lorem ipsum dolor sit amet, consectetur adipiscing elit.",
40 |   },
41 | ]
42 | 
43 | export default function HomeFeatures() {
44 |   return (
45 |     <div className="features relative bg-white py-16 sm:py-24 lg:py-16">
46 |       <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
47 |         <p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
48 |           What you&apos;ll learn
49 |         </p>
50 |         <div className="mt-12">
51 |           <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
52 |             {features.map((feature) => (
53 |               <div key={feature.name} className="pt-6">
54 |                 <div className="flow-root bg-gray-50 rounded-lg px-6 pb-8">
55 |                   <div className="-mt-6">
56 |                     <div>
57 |                       <span className="inline-flex items-center justify-center p-3 bg-blue-500 rounded-md shadow-lg">
58 |                         <feature.icon
59 |                           className="h-6 w-6 text-white"
60 |                           aria-hidden="true"
61 |                         />
62 |                       </span>
63 |                     </div>
64 |                     <h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">
65 |                       {feature.name}
66 |                     </h3>
67 |                     <p className="mt-5 text-base text-gray-500">
68 |                       {feature.description}
69 |                     </p>
70 |                   </div>
71 |                 </div>
72 |               </div>
73 |             ))}
74 |           </div>
75 |         </div>
76 |       </div>
77 |     </div>
78 |   )
79 | }
80 | 


--------------------------------------------------------------------------------
/components/Home/HomeHero.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react"
  2 | import { useForm, SubmitHandler } from "react-hook-form"
  3 | import { CheckIcon } from "@heroicons/react/outline"
  4 | import Subscribe from "../Subscribe"
  5 | 
  6 | const features = [
  7 |   {
  8 |     name: "4 Courses",
  9 |     description: "",
 10 |   },
 11 |   {
 12 |     name: "25+ Lessons",
 13 |     description: "",
 14 |   },
 15 |   {
 16 |     name: "Free and Open Source",
 17 |     description: "",
 18 |   },
 19 | ]
 20 | 
 21 | type Inputs = {
 22 |   email: string
 23 | }
 24 | 
 25 | export default function HomeHero() {
 26 |   const {
 27 |     register,
 28 |     handleSubmit,
 29 |     formState,
 30 |     formState: { errors },
 31 |   } = useForm<Inputs>()
 32 | 
 33 |   const [isSubmitted, setIsSubmitted] = React.useState("")
 34 | 
 35 |   const onSubmit: SubmitHandler<Inputs> = async (data, event) => {
 36 |     event.target.reset()
 37 | 
 38 |     const subscribe = await fetch("/api/subscribe", {
 39 |       method: "POST",
 40 |       headers: {
 41 |         "Content-Type": "application/json",
 42 |       },
 43 |       body: JSON.stringify(data),
 44 |     })
 45 |     const response = await subscribe.json()
 46 | 
 47 |     setIsSubmitted(response.message)
 48 |   }
 49 | 
 50 |   return (
 51 |     <div className="">
 52 |       <div className="relative overflow-hidden">
 53 |         <main>
 54 |           <div className="pt-10 bg-white sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
 55 |             <div className="mx-auto max-w-7xl lg:px-8">
 56 |               <div className="lg:grid lg:grid-cols-2 lg:gap-8">
 57 |                 <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
 58 |                   <div className="lg:py-24">
 59 |                     <h1
 60 |                       data-test="hero-heading"
 61 |                       className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl"
 62 |                     >
 63 |                       <span className="block text-gray-900">
 64 |                         Testing Next.js Applications with Cypress
 65 |                       </span>
 66 |                     </h1>
 67 |                     <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
 68 |                       Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 69 |                     </p>
 70 | 
 71 |                     {/* Features */}
 72 |                     <div className="mt-12">
 73 |                       <dl className="">
 74 |                         {features.map((feature) => (
 75 |                           <div key={feature.name} className="relative mb-6">
 76 |                             <dt>
 77 |                               <CheckIcon
 78 |                                 className="absolute h-6 w-6 text-blue-500"
 79 |                                 aria-hidden="true"
 80 |                               />
 81 |                               <p className="ml-9 text-lg leading-6 font-medium text-gray-500">
 82 |                                 {feature.name}
 83 |                               </p>
 84 |                             </dt>
 85 |                             <dd className="mt-2 ml-9 text-base text-gray-500">
 86 |                               {feature.description}
 87 |                             </dd>
 88 |                           </div>
 89 |                         ))}
 90 |                       </dl>
 91 |                     </div>
 92 | 
 93 |                     <div className="mt-10 sm:mt-12">
 94 |                       <Subscribe />
 95 |                     </div>
 96 |                   </div>
 97 |                 </div>
 98 |                 <div className="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
 99 |                   <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
100 |                     <img
101 |                       className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
102 |                       src="https://tailwindui.com/img/component-images/inbox-app-screenshot-1.jpg"
103 |                     />
104 |                   </div>
105 |                 </div>
106 |               </div>
107 |             </div>
108 |           </div>
109 |         </main>
110 |       </div>
111 |     </div>
112 |   )
113 | }
114 | 


--------------------------------------------------------------------------------
/components/Home/HomeProgress.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import Link from "next/link"
 3 | import { isLessonCompleted } from "../../utils/machineUtils"
 4 | 
 5 | const ProgressLine = dynamic(() => import("../Progress/ProgressLine"), {
 6 |   ssr: false,
 7 | })
 8 | 
 9 | const CompletedLesson = dynamic(() => import("../Progress/CompletedLesson"), {
10 |   ssr: false,
11 | })
12 | 
13 | const IncompleteLesson = dynamic(() => import("../Progress/IncompleteLesson"), {
14 |   ssr: false,
15 | })
16 | 
17 | function classNames(...classes) {
18 |   return classes.filter(Boolean).join(" ")
19 | }
20 | 
21 | export default function HomeProgress({ course, content, progressService }) {
22 |   return (
23 |     <nav aria-label="Progress" className="mt-12">
24 |       <ol className="overflow-hidden">
25 |         {content?.lessons.map((lesson, index) => (
26 |           <li
27 |             data-test={`lesson-${index}`}
28 |             key={lesson.title}
29 |             className={classNames(
30 |               index !== content?.lessons.length - 1 ? "pb-10" : "",
31 |               "relative"
32 |             )}
33 |           >
34 |             {/* Solid Line that connects the checkmarks */}
35 |             <ProgressLine
36 |               index={index}
37 |               lessons={content.lessons}
38 |               isCompleted={isLessonCompleted(
39 |                 progressService,
40 |                 `${course}/${lesson.slug}`
41 |               )}
42 |             />
43 | 
44 |             <div className="relative flex items-start group">
45 |               {isLessonCompleted(
46 |                 progressService,
47 |                 `${course}/${lesson.slug}`
48 |               ) && <CompletedLesson index={index} />}
49 | 
50 |               {!isLessonCompleted(
51 |                 progressService,
52 |                 `${course}/${lesson.slug}`
53 |               ) && <IncompleteLesson index={index} />}
54 | 
55 |               {/* Lesson Title */}
56 |               <span className="ml-4 min-w-0 flex flex-col">
57 |                 <span className="text-xs font-semibold tracking-wide uppercase">
58 |                   <Link href={`/${course}/${lesson.slug}`}>
59 |                     <a data-test={`lesson-progress-link-${index}`}>
60 |                       {lesson.title}
61 |                     </a>
62 |                   </Link>
63 |                 </span>
64 |               </span>
65 |             </div>
66 |           </li>
67 |         ))}
68 |       </ol>
69 |     </nav>
70 |   )
71 | }
72 | 


--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import Head from "next/head"
 3 | import Header from "./Header"
 4 | 
 5 | const Footer = dynamic(() => import("./Footer"), {
 6 |   ssr: false,
 7 | })
 8 | 
 9 | export default function Layout({
10 |   children,
11 |   content,
12 |   courses,
13 |   progressService,
14 | }) {
15 |   return (
16 |     <>
17 |       <Head>
18 |         <link rel="icon" href="/favicon.ico" />
19 |       </Head>
20 | 
21 |       <Header
22 |         content={content}
23 |         courses={courses}
24 |         progressService={progressService}
25 |       />
26 |       {children}
27 |       <Footer />
28 |     </>
29 |   )
30 | }
31 | 


--------------------------------------------------------------------------------
/components/Lesson/CompleteLessonBtn.tsx:
--------------------------------------------------------------------------------
 1 | import { useActor } from "@xstate/react"
 2 | 
 3 | export default function NextLessonBtn({
 4 |   nextLessonPath,
 5 |   progressService,
 6 |   lessonPath,
 7 | }) {
 8 |   const [, progressSend] = useActor(progressService)
 9 | 
10 |   return (
11 |     <div data-test="complete-lesson-button" className="py-20">
12 |       <a
13 |         href={nextLessonPath ? nextLessonPath : "/"}
14 |         className="mx-auto max-w-xl flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
15 |         onClick={() => {
16 |           progressSend({
17 |             type: "COMPLETE_LESSON",
18 |             id: lessonPath,
19 |           })
20 |         }}
21 |       >
22 |         {nextLessonPath ? "Next Lesson" : "Complete Course"}
23 |       </a>
24 |     </div>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/components/Lesson/LessonBreadcrumbs.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | import { HomeIcon } from "@heroicons/react/solid"
 3 | 
 4 | const pages = [
 5 |   { name: "Projects", href: "#", current: false },
 6 |   { name: "Project Nero", href: "#", current: true },
 7 | ]
 8 | 
 9 | export default function Breadcrumbs({ lessonPath, sectionTitle, lessonData }) {
10 |   const [sectionSlug] = lessonPath.split("/")
11 | 
12 |   return (
13 |     <nav
14 |       className="bg-white border-b border-gray-200 flex"
15 |       aria-label="Breadcrumb"
16 |     >
17 |       <ol
18 |         role="list"
19 |         className="max-w-screen-xl w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8"
20 |       >
21 |         <li className="flex">
22 |           <div className="flex items-center">
23 |             <Link href="/">
24 |               <a className="text-gray-400 hover:text-gray-500">
25 |                 <HomeIcon
26 |                   className="flex-shrink-0 h-5 w-5"
27 |                   aria-hidden="true"
28 |                 />
29 |                 <span className="sr-only">Home</span>
30 |               </a>
31 |             </Link>
32 |           </div>
33 |         </li>
34 | 
35 |         {/* Course */}
36 |         <li className="flex">
37 |           <div className="flex items-center">
38 |             <svg
39 |               className="flex-shrink-0 w-6 h-full text-gray-200"
40 |               viewBox="0 0 24 44"
41 |               preserveAspectRatio="none"
42 |               fill="currentColor"
43 |               xmlns="http://www.w3.org/2000/svg"
44 |               aria-hidden="true"
45 |             >
46 |               <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
47 |             </svg>
48 |             <Link href={`/${sectionSlug}`}>
49 |               <a className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">
50 |                 {sectionTitle}
51 |               </a>
52 |             </Link>
53 |           </div>
54 |         </li>
55 | 
56 |         {/* Lesson */}
57 |         <li className="flex">
58 |           <div className="flex items-center">
59 |             <svg
60 |               className="flex-shrink-0 w-6 h-full text-gray-200"
61 |               viewBox="0 0 24 44"
62 |               preserveAspectRatio="none"
63 |               fill="currentColor"
64 |               xmlns="http://www.w3.org/2000/svg"
65 |               aria-hidden="true"
66 |             >
67 |               <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
68 |             </svg>
69 |             <p className="ml-4 text-sm font-medium text-gray-500">
70 |               {lessonData.title}
71 |             </p>
72 |           </div>
73 |         </li>
74 |       </ol>
75 |     </nav>
76 |   )
77 | }
78 | 


--------------------------------------------------------------------------------
/components/Lesson/LessonHero.tsx:
--------------------------------------------------------------------------------
 1 | export default function LessonHero(props) {
 2 |   return (
 3 |     <div data-test="lesson-hero" className="relative bg-white overflow-hidden">
 4 |       <div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
 5 |         <main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
 6 |           <div className="lg:grid lg:grid-cols-12 lg:gap-8">
 7 |             <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
 8 |               <h1>
 9 |                 <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
10 |                   <span className="block text-gray-900">
11 |                     {props.lessonData.title}
12 |                   </span>
13 |                 </span>
14 |               </h1>
15 |               <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
16 |                 {props.lessonData.description}
17 |               </p>
18 |             </div>
19 |             <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
20 |               <div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
21 |                 <button
22 |                   type="button"
23 |                   className="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
24 |                 >
25 |                   <span className="sr-only">Watch our video to learn more</span>
26 |                   <img
27 |                     className="w-full"
28 |                     src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
29 |                     alt=""
30 |                   />
31 |                   <div
32 |                     className="absolute inset-0 w-full h-full flex items-center justify-center"
33 |                     aria-hidden="true"
34 |                   >
35 |                     <svg
36 |                       className="h-20 w-20 text-blue-500"
37 |                       fill="currentColor"
38 |                       viewBox="0 0 84 84"
39 |                     >
40 |                       <circle
41 |                         opacity="0.9"
42 |                         cx={42}
43 |                         cy={42}
44 |                         r={42}
45 |                         fill="white"
46 |                       />
47 |                       <path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
48 |                     </svg>
49 |                   </div>
50 |                 </button>
51 |               </div>
52 |             </div>
53 |           </div>
54 |         </main>
55 |       </div>
56 |     </div>
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/components/Lesson/LessonLayout.tsx:
--------------------------------------------------------------------------------
  1 | import LessonToc from "../../components/Lesson/LessonToc"
  2 | import LessonBreadcrumbs from "./LessonBreadcrumbs"
  3 | import { MDXRemote } from "next-mdx-remote"
  4 | import dynamic from "next/dynamic"
  5 | import Script from "next/script"
  6 | import LessonProgress from "./LessonProgress"
  7 | 
  8 | export default function LessonLayout({
  9 |   toc,
 10 |   source,
 11 |   components,
 12 |   sectionLessons,
 13 |   sectionTitle,
 14 |   progressService,
 15 |   lessonPath,
 16 |   lessonData,
 17 |   course,
 18 | }) {
 19 |   return (
 20 |     <>
 21 |       <LessonBreadcrumbs
 22 |         lessonPath={lessonPath}
 23 |         sectionTitle={sectionTitle}
 24 |         lessonData={lessonData}
 25 |       />
 26 | 
 27 |       <div className="min-h-screen mt-20">
 28 |         <div className="py-6">
 29 |           <div className="max-w-3xl mx-auto sm:px-6 lg:max-w-full lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
 30 |             {/* Table of Content */}
 31 |             <div className="hidden lg:block lg:col-span-3 xl:col-span-2">
 32 |               <div className="sticky top-6">
 33 |                 <p className="font-semibold mb-4">ON THIS PAGE</p>
 34 |                 <nav aria-label="Sidebar" className="">
 35 |                   <LessonToc navigation={toc} />
 36 |                 </nav>
 37 |               </div>
 38 |             </div>
 39 | 
 40 |             {/* Content */}
 41 |             <main className="lesson-content lg:col-span-9 xl:col-span-7">
 42 |               <div className="relative bg-white overflow-hidden">
 43 |                 <div className="relative px-4 sm:px-6 lg:px-8">
 44 |                   <div className="prose prose-blue prose-lg text-gray-500 mx-auto">
 45 |                     <MDXRemote {...source} components={components} />
 46 |                   </div>
 47 |                 </div>
 48 |               </div>
 49 |             </main>
 50 | 
 51 |             {/* Progress Steps */}
 52 |             <aside className="hidden xl:block xl:col-span-3">
 53 |               <div className="sticky top-6 space-y-4">
 54 |                 <p className="font-semibold mb-6">{sectionTitle}</p>
 55 |                 <LessonProgress
 56 |                   course={course}
 57 |                   lessons={sectionLessons}
 58 |                   progressService={progressService}
 59 |                 />
 60 |               </div>
 61 |             </aside>
 62 |           </div>
 63 |         </div>
 64 |       </div>
 65 | 
 66 |       <div id="modal" data-test="lesson-modal">
 67 |         <div className="modal-content">
 68 |           <span className="close">&times;</span>
 69 |           <img src="" alt="" />
 70 |         </div>
 71 |       </div>
 72 | 
 73 |       <Script id="show-banner" strategy="afterInteractive">
 74 |         {`
 75 |           const images = document.querySelectorAll(".lesson-content img")
 76 |           const modal = document.getElementById("modal")
 77 |           const modalImg = document.querySelector("#modal .modal-content img")
 78 |           const modalClose = document.querySelector("#modal .modal-content .close")
 79 | 
 80 |           images.forEach((img) => {
 81 |             img.addEventListener("click", (event) => {
 82 |               let src = event.target.getAttribute("src")
 83 |               modalImg.src = src
 84 |               modal.style.display = "block"
 85 |             })
 86 |           })
 87 | 
 88 |           modalClose.addEventListener("click", () => {
 89 |             modal.style.display = "none"
 90 |           })
 91 | 
 92 |           // When the user clicks anywhere outside of the modal, close it
 93 |           window.addEventListener("click", (event) => {
 94 |             if (event.target == modal) {
 95 |               modal.style.display = "none"
 96 |             }
 97 |           })
 98 |         `}
 99 |       </Script>
100 |     </>
101 |   )
102 | }
103 | 


--------------------------------------------------------------------------------
/components/Lesson/LessonProgress.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import Link from "next/link"
 3 | import { isLessonCompleted } from "../../utils/machineUtils"
 4 | 
 5 | const ProgressLine = dynamic(() => import("../Progress/ProgressLine"), {
 6 |   ssr: false,
 7 | })
 8 | 
 9 | const CompletedLesson = dynamic(() => import("../Progress/CompletedLesson"), {
10 |   ssr: false,
11 | })
12 | 
13 | const IncompleteLesson = dynamic(() => import("../Progress/IncompleteLesson"), {
14 |   ssr: false,
15 | })
16 | 
17 | function classNames(...classes) {
18 |   return classes.filter(Boolean).join(" ")
19 | }
20 | 
21 | export default function LessonProgress({ lessons, progressService, course }) {
22 |   return (
23 |     <nav aria-label="Progress" className="mt-12">
24 |       <ol className="overflow-hidden">
25 |         {lessons.map((lesson, index) => (
26 |           <li
27 |             data-test={`lesson-${index}`}
28 |             key={lesson.title}
29 |             className={classNames(
30 |               index !== lessons.length - 1 ? "pb-10" : "",
31 |               "relative"
32 |             )}
33 |           >
34 |             {/* Solid Line that connects the checkmarks */}
35 |             <ProgressLine
36 |               index={index}
37 |               lessons={lessons}
38 |               isCompleted={isLessonCompleted(
39 |                 progressService,
40 |                 `${course}/${lesson.slug}`
41 |               )}
42 |             />
43 | 
44 |             <div className="relative flex items-start group">
45 |               {isLessonCompleted(
46 |                 progressService,
47 |                 `${course}/${lesson.slug}`
48 |               ) && <CompletedLesson index={index} />}
49 | 
50 |               {!isLessonCompleted(
51 |                 progressService,
52 |                 `${course}/${lesson.slug}`
53 |               ) && <IncompleteLesson index={index} />}
54 | 
55 |               {/* Lesson Title */}
56 |               <span className="ml-4 min-w-0 flex flex-col">
57 |                 <span className="text-xs font-semibold tracking-wide uppercase">
58 |                   <Link href={`/${course}/${lesson.slug}`}>
59 |                     <a data-test={`lesson-progress-link-${index}`}>
60 |                       {lesson.title}
61 |                     </a>
62 |                   </Link>
63 |                 </span>
64 |               </span>
65 |             </div>
66 |           </li>
67 |         ))}
68 |       </ol>
69 |     </nav>
70 |   )
71 | }
72 | 


--------------------------------------------------------------------------------
/components/Lesson/LessonToc.tsx:
--------------------------------------------------------------------------------
 1 | import { LessonTableOfContents } from "../../types/common"
 2 | 
 3 | function classNames(...classes) {
 4 |   return classes.filter(Boolean).join(" ")
 5 | }
 6 | 
 7 | type Props = {
 8 |   navigation: LessonTableOfContents[]
 9 | }
10 | 
11 | export default function LessonSideNav({ navigation }: Props) {
12 |   return (
13 |     <nav data-test="toc-sidebar" className="space-y-1" aria-label="Sidebar">
14 |       {navigation.map((item) => (
15 |         <a
16 |           data-test={item.slug}
17 |           key={item.slug}
18 |           href={`#${item.slug}`}
19 |           className={classNames(
20 |             item.current
21 |               ? "bg-gray-100 text-gray-900"
22 |               : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
23 |             "group flex items-center px-3 py-2 text-sm font-medium rounded-md"
24 |           )}
25 |           aria-current={item.current ? "page" : undefined}
26 |         >
27 |           <span className="truncate">{item.content}</span>
28 |         </a>
29 |       ))}
30 |     </nav>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/components/Lesson/MultipleChoiceChallenge.tsx:
--------------------------------------------------------------------------------
 1 | import { useActor } from "@xstate/react"
 2 | import { useState } from "react"
 3 | 
 4 | export default function LessonChallenge({
 5 |   progressService,
 6 |   lessonData,
 7 |   lessonPath,
 8 | }) {
 9 |   const [answerIndicies, setAnswerChecked] = useState([])
10 |   const [, progressSend] = useActor(progressService)
11 | 
12 |   const isIncorrectAnswer = (index) => {
13 |     return (
14 |       answerIndicies.includes(index) &&
15 |       lessonData.challenges[0].correctAnswerIndex !== index
16 |     )
17 |   }
18 | 
19 |   return (
20 |     <>
21 |       <hr className="mb-6" />
22 |       <div data-test="multiple-choice-challenge" className="py-12 flex">
23 |         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24 |           <div className="lg:text-center">
25 |             <h2 className="text-base text-blue-500 font-semibold tracking-wide uppercase">
26 |               Unlock the Next Lesson
27 |             </h2>
28 |             <p className="mt-6 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
29 |               {lessonData.challenges[0].question}
30 |             </p>
31 |           </div>
32 | 
33 |           <div className="mt-10">
34 |             <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
35 |               {lessonData.challenges[0].answers.map((answer, index) => (
36 |                 <div key={index} className="relative">
37 |                   <dt>
38 |                     <div className="absolute flex items-center justify-center h-8 w-8">
39 |                       <input
40 |                         id={`answer-${index}`}
41 |                         data-test={`challenge-answer-${index}`}
42 |                         name="answer"
43 |                         type="checkbox"
44 |                         className={`${
45 |                           isIncorrectAnswer(index)
46 |                             ? "text-gray-300 focus:ring-gray-300"
47 |                             : ""
48 |                         } focus:ring-blue-500 text-blue-600 border-gray-300 rounded h-8 w-8`}
49 |                         onClick={() => {
50 |                           setAnswerChecked((prev) => [...prev, index])
51 |                           progressSend({
52 |                             type: "SUBMIT_ANSWER",
53 |                             id: lessonPath,
54 |                             challengeIndex: 0,
55 |                             userAnswerIndex: index,
56 |                           })
57 |                         }}
58 |                       />
59 |                     </div>
60 |                     <label
61 |                       htmlFor={`answer-${index}`}
62 |                       className={`${
63 |                         isIncorrectAnswer(index)
64 |                           ? "line-through text-gray-300"
65 |                           : ""
66 |                       } ml-16 text-lg leading-6 font-medium text-gray-900`}
67 |                     >
68 |                       {answer}
69 |                     </label>
70 |                   </dt>
71 |                 </div>
72 |               ))}
73 |             </dl>
74 |           </div>
75 |         </div>
76 |       </div>
77 |       <hr />
78 |     </>
79 |   )
80 | }
81 | 


--------------------------------------------------------------------------------
/components/Lesson/NextLessonBtn.tsx:
--------------------------------------------------------------------------------
 1 | export default function NextLessonBtn({ path, isCompleted }) {
 2 |   return (
 3 |     <div
 4 |       data-test="next-lesson-button"
 5 |       className={`${isCompleted ? "" : "hidden"} py-20`}
 6 |     >
 7 |       <a
 8 |         href={path ? path : "/"}
 9 |         className="mx-auto max-w-xl flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
10 |       >
11 |         {path ? "Next Lesson" : "Complete Course"}
12 |       </a>
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/components/Lesson/SkipChallenge.tsx:
--------------------------------------------------------------------------------
 1 | import { useActor } from "@xstate/react"
 2 | 
 3 | export default function LessonChallenge({ progressService }) {
 4 |   const [, progressSend] = useActor(progressService)
 5 | 
 6 |   const handleInputChange = (event) => {
 7 |     const target = event.target
 8 |     const value = target.type === "checkbox" ? target.checked : target.value
 9 | 
10 |     progressSend({
11 |       type: "DISABLE_CHALLENGES",
12 |       value,
13 |     })
14 |   }
15 | 
16 |   return (
17 |     <>
18 |       <hr />
19 |       <div className="flex items-center justify-center my-6">
20 |         <input
21 |           data-test="skip-challenge-input"
22 |           name="answer"
23 |           type="checkbox"
24 |           className="focus:ring-blue-500 text-blue-600 border-gray-300 rounded h-4 w-4"
25 |           checked={progressService.state.context.disableChallenges}
26 |           onChange={handleInputChange}
27 |         />
28 |         <label className="ml-4 leading-6 text-gray-300">
29 |           Disable questions on upcoming lessons
30 |         </label>
31 |       </div>
32 |     </>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/components/Mobile/MobileCourses.tsx:
--------------------------------------------------------------------------------
 1 | import dynamic from "next/dynamic"
 2 | import Link from "next/link"
 3 | 
 4 | const MobileProgress = dynamic(() => import("./MobileProgress"), {
 5 |   ssr: false,
 6 | })
 7 | 
 8 | export default function Courses({ courses, content, progressService }) {
 9 |   return (
10 |     <div className="relative bg-white overflow-hidden">
11 |       {courses.map((course, index) => (
12 |         <div key={course} data-test={`course-${index}`}>
13 |           <div className="relative">
14 |             <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
15 |               <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
16 |                 <div>
17 |                   <div className="mt-6">
18 |                     <Link href={`/${content[course].slug}`}>
19 |                       <a
20 |                         data-test={`course-title`}
21 |                         className="text-base font-extrabold tracking-tight text-gray-900"
22 |                       >
23 |                         {content[course].title}
24 |                       </a>
25 |                     </Link>
26 |                     <MobileProgress
27 |                       course={course}
28 |                       content={content[course]}
29 |                       progressService={progressService}
30 |                     />
31 |                   </div>
32 |                 </div>
33 |               </div>
34 |             </div>
35 |           </div>
36 |         </div>
37 |       ))}
38 |     </div>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/components/Mobile/MobileNav.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link"
  2 | import { Fragment } from "react"
  3 | import { Popover, Transition } from "@headlessui/react"
  4 | import MobileCourses from "./MobileCourses"
  5 | import { XIcon } from "@heroicons/react/outline"
  6 | 
  7 | export default function MobileProgressMenu({
  8 |   content,
  9 |   courses,
 10 |   progressService,
 11 | }) {
 12 |   return (
 13 |     <Popover className="relative bg-white md:hidden">
 14 |       <div className="max-w-7xl mx-auto px-4 sm:px-6">
 15 |         <div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
 16 |           <div className="flex justify-start lg:w-0 lg:flex-1">
 17 |             <Link href="/">
 18 |               <img
 19 |                 className="h-8 w-auto sm:h-10"
 20 |                 src="https://tailwindui.com/img/logos/workflow-mark-blue-600.svg"
 21 |                 alt=""
 22 |               />
 23 |             </Link>
 24 |           </div>
 25 |           {/* Mobile Hamburger Menu */}
 26 |           <div className="md:hidden">
 27 |             <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
 28 |               <span className="sr-only">Open menu</span>
 29 |               <svg
 30 |                 xmlns="http://www.w3.org/2000/svg"
 31 |                 className="h-6 w-6"
 32 |                 fill="none"
 33 |                 viewBox="0 0 24 24"
 34 |                 stroke="currentColor"
 35 |               >
 36 |                 <path
 37 |                   strokeLinecap="round"
 38 |                   strokeLinejoin="round"
 39 |                   strokeWidth={2}
 40 |                   d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
 41 |                 />
 42 |               </svg>
 43 |             </Popover.Button>
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 | 
 48 |       <Transition
 49 |         as={Fragment}
 50 |         enter="duration-200 ease-out"
 51 |         enterFrom="opacity-0 scale-95"
 52 |         enterTo="opacity-100 scale-100"
 53 |         leave="duration-100 ease-in"
 54 |         leaveFrom="opacity-100 scale-100"
 55 |         leaveTo="opacity-0 scale-95"
 56 |       >
 57 |         <Popover.Panel
 58 |           focus
 59 |           className="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
 60 |         >
 61 |           <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
 62 |             <div className="pt-5 pb-6 px-5">
 63 |               <div className="flex items-center justify-between">
 64 |                 <div>
 65 |                   <img
 66 |                     className="h-8 w-auto"
 67 |                     src="https://tailwindui.com/img/logos/workflow-mark-blue-600.svg"
 68 |                     alt="Workflow"
 69 |                   />
 70 |                 </div>
 71 |                 <div className="-mr-2">
 72 |                   <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
 73 |                     <span className="sr-only">Close menu</span>
 74 |                     <XIcon className="h-6 w-6" aria-hidden="true" />
 75 |                   </Popover.Button>
 76 |                 </div>
 77 |               </div>
 78 |               <div className="mt-6">
 79 |                 <MobileCourses
 80 |                   courses={courses}
 81 |                   content={content}
 82 |                   progressService={progressService}
 83 |                 />
 84 |               </div>
 85 |               <hr className="my-8" />
 86 |               <div>
 87 |                 <img
 88 |                   src="https://raw.githubusercontent.com/cypress-io/cypress-realworld-app/develop/public/img/rwa-readme-screenshot.png"
 89 |                   alt=""
 90 |                 />
 91 |               </div>
 92 |               <div className="relative bg-white pt-16 overflow-hidden">
 93 |                 <div className="max-w-lg mx-auto">
 94 |                   <Link href="/real-world-examples">
 95 |                     <a className="w-full bg-blue-600 border border-transparent rounded-md py-2 px-4 flex items-center justify-center text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 96 |                       Real World Examples
 97 |                     </a>
 98 |                   </Link>
 99 |                 </div>
100 |               </div>
101 |             </div>
102 |           </div>
103 |         </Popover.Panel>
104 |       </Transition>
105 |     </Popover>
106 |   )
107 | }
108 | 


--------------------------------------------------------------------------------
/components/Mobile/MobileProgress.tsx:
--------------------------------------------------------------------------------
 1 | import { CheckIcon } from "@heroicons/react/solid"
 2 | import { isLessonCompleted } from "../../utils/machineUtils"
 3 | 
 4 | function classNames(...classes) {
 5 |   return classes.filter(Boolean).join(" ")
 6 | }
 7 | 
 8 | export default function LessonSteps({ course, content, progressService }) {
 9 |   return (
10 |     <nav aria-label="Progress" className="mt-4">
11 |       <ol className="overflow-hidden">
12 |         {content?.lessons.map((lesson, index) => (
13 |           <li
14 |             data-test={`lesson-${index}`}
15 |             key={lesson.title}
16 |             className={classNames(
17 |               index !== content?.lessons.length - 1 ? "pb-4" : "",
18 |               "relative"
19 |             )}
20 |           >
21 |             {/* Solid Line that connects the checkmarks */}
22 |             {index !== content?.lessons.length - 1 ? (
23 |               <div
24 |                 className={`-ml-px absolute mt-0.5 top-4 left-2 w-0.5 h-full ${
25 |                   isLessonCompleted(progressService, `${course}/${lesson.slug}`)
26 |                     ? "bg-blue-600"
27 |                     : "bg-gray-300"
28 |                 }`}
29 |                 aria-hidden="true"
30 |               />
31 |             ) : null}
32 | 
33 |             <div className="relative flex items-center group">
34 |               {/* "completed" */}
35 | 
36 |               {isLessonCompleted(
37 |                 progressService,
38 |                 `${course}/${lesson.slug}`
39 |               ) && (
40 |                 <span className="h-9 flex items-center">
41 |                   <span
42 |                     data-test={`lesson-complete-${index}`}
43 |                     className="relative z-10 w-4 h-4 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800"
44 |                   >
45 |                     <CheckIcon
46 |                       className="w-5 h-5 text-white"
47 |                       aria-hidden="true"
48 |                     />
49 |                   </span>
50 |                 </span>
51 |               )}
52 | 
53 |               {/* "upcoming" */}
54 |               {!isLessonCompleted(
55 |                 progressService,
56 |                 `${course}/${lesson.slug}`
57 |               ) && (
58 |                 <span className="h-9 flex items-center" aria-hidden="true">
59 |                   <span
60 |                     data-test={`lesson-upcoming-${index}`}
61 |                     className="relative z-10 w-4 h-4 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400"
62 |                   >
63 |                     <span className="h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300" />
64 |                   </span>
65 |                 </span>
66 |               )}
67 | 
68 |               {/* Lesson Title */}
69 |               <span className="ml-4 min-w-0 flex flex-col">
70 |                 <span className="text-xs font-semibold tracking-wide uppercase">
71 |                   <a href={`${course}/${lesson.slug}`}>{lesson.title}</a>
72 |                 </span>
73 |               </span>
74 |             </div>
75 |           </li>
76 |         ))}
77 |       </ol>
78 |     </nav>
79 |   )
80 | }
81 | 


--------------------------------------------------------------------------------
/components/Progress/CompletedLesson.tsx:
--------------------------------------------------------------------------------
 1 | import { CheckIcon } from "@heroicons/react/solid"
 2 | 
 3 | type Props = {
 4 |   index: number
 5 | }
 6 | 
 7 | export default function CompletedLesson({ index }: Props) {
 8 |   return (
 9 |     <>
10 |       <span className="h-9 flex items-center">
11 |         <span
12 |           data-test={`lesson-complete-${index}`}
13 |           className="relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800"
14 |         >
15 |           <CheckIcon className="w-5 h-5 text-white" aria-hidden="true" />
16 |         </span>
17 |       </span>
18 |     </>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/components/Progress/IncompleteLesson.tsx:
--------------------------------------------------------------------------------
 1 | type Props = {
 2 |   index: number
 3 | }
 4 | 
 5 | export default function IncompleteLesson({ index }: Props) {
 6 |   return (
 7 |     <>
 8 |       <span className="h-9 flex items-center" aria-hidden="true">
 9 |         <span
10 |           data-test={`lesson-upcoming-${index}`}
11 |           className="relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400"
12 |         >
13 |           <span className="h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300" />
14 |         </span>
15 |       </span>
16 |     </>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/components/Progress/ProgressLine.tsx:
--------------------------------------------------------------------------------
 1 | type Props = {
 2 |   index: number
 3 |   isCompleted: boolean
 4 |   lessons: []
 5 | }
 6 | 
 7 | export default function ProgressLine({ index, isCompleted, lessons }: Props) {
 8 |   return (
 9 |     <>
10 |       {index !== lessons.length - 1 ? (
11 |         <div
12 |           className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${
13 |             isCompleted ? "bg-blue-600" : "bg-gray-300"
14 |           }`}
15 |           aria-hidden="true"
16 |         />
17 |       ) : null}
18 |     </>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/components/Subscribe.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { useForm, SubmitHandler } from "react-hook-form"
 3 | 
 4 | type Inputs = {
 5 |   email: string
 6 | }
 7 | 
 8 | export default function Subscribe() {
 9 |   const {
10 |     register,
11 |     handleSubmit,
12 |     formState,
13 |     formState: { errors },
14 |   } = useForm<Inputs>()
15 | 
16 |   const [isSubmitted, setIsSubmitted] = React.useState("")
17 | 
18 |   const onSubmit: SubmitHandler<Inputs> = async (data, event) => {
19 |     event.target.reset()
20 | 
21 |     const subscribe = await fetch("/api/subscribe", {
22 |       method: "POST",
23 |       headers: {
24 |         "Content-Type": "application/json",
25 |       },
26 |       body: JSON.stringify(data),
27 |     })
28 |     const response = await subscribe.json()
29 | 
30 |     setIsSubmitted(response.message)
31 |   }
32 | 
33 |   return (
34 |     <form onSubmit={handleSubmit(onSubmit)} className="sm:flex">
35 |       <div className="min-w-0 flex-1">
36 |         <label htmlFor="email" className="sr-only">
37 |           Subscribe for Updates
38 |         </label>
39 |         <input
40 |           data-test="email-input"
41 |           {...register("email", {
42 |             required: "Email is required",
43 |           })}
44 |           id="email"
45 |           type="email"
46 |           name="email"
47 |           placeholder="Subscribe for Updates"
48 |           className="block w-full px-4 py-3 rounded-md border-2text-base text-gray-900 placeholder-gray-500"
49 |         />
50 |         {errors.email && (
51 |           <span className="text-red-500" data-test="error-message">
52 |             {errors.email.message}
53 |           </span>
54 |         )}
55 |         {formState.isSubmitted && isSubmitted.includes("Success:") && (
56 |           <div className="text-jade-500" data-test="success-message">
57 |             {isSubmitted}
58 |           </div>
59 |         )}
60 |         {formState.isSubmitted && isSubmitted.includes("Error:") && (
61 |           <div className="text-red-500" data-test="server-error-message">
62 |             {isSubmitted}
63 |           </div>
64 |         )}
65 |       </div>
66 |       <div className="mt-3 sm:mt-0 sm:ml-3">
67 |         <input
68 |           data-test="submit-button"
69 |           type="submit"
70 |           value="Subscribe"
71 |           className="block w-full py-3 px-4 rounded-md shadow bg-blue-500 text-white font-medium hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-offset-gray-900"
72 |         />
73 |       </div>
74 |     </form>
75 |   )
76 | }
77 | 


--------------------------------------------------------------------------------
/content/courses/cypress-fundamentals/command-chaining.mdx:
--------------------------------------------------------------------------------
 1 | # Command Chaining
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
 4 | 
 5 | ## Section 1
 6 | 
 7 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
 8 | 
 9 | ## Section 2
10 | 
11 | ```js
12 | export async function getStaticProps(context) {
13 |   const res = await fetch(`https://.../data`)
14 |   const data = await res.json()
15 | 
16 |   if (!data) {
17 |     return {
18 |       notFound: true,
19 |     }
20 |   }
21 | 
22 |   return {
23 |     props: { data }, // will be passed to the page component as props
24 |   }
25 | }
26 | ```
27 | 
28 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
29 | 
30 | ## Section 3
31 | 
32 | Aenean eu lobortis nisi. Donec rutrum fringilla orci, vitae fermentum nisi porta eu. Nam sit amet odio lacus. Nulla eu fermentum metus. Suspendisse eu aliquet lectus, at fringilla massa. Pellentesque hendrerit iaculis metus id aliquet. Curabitur urna libero, molestie in lorem porta, imperdiet ultricies ex. Cras elementum aliquam lorem, non semper enim fermentum sed. Nullam egestas, elit at vulputate pretium, dui enim ornare erat, a tristique nulla risus id neque.
33 | 


--------------------------------------------------------------------------------
/content/courses/cypress-fundamentals/cypress-runs-in-the-browser.mdx:
--------------------------------------------------------------------------------
 1 | # Cypress runs in the browser
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
 4 | 
 5 | ## Section 1
 6 | 
 7 | ```js
 8 | describe("Next Lesson Button on Course Pages", () => {
 9 |   beforeEach(() => {
10 |     // @ts-ignore
11 |     cy.restoreLocalStorage()
12 |   })
13 | 
14 |   afterEach(() => {
15 |     // @ts-ignore
16 |     cy.saveLocalStorage()
17 |   })
18 | 
19 |   it("says 'Start Course' and links to the first lesson if none of the lessons have been completed", () => {
20 |     cy.visit(`/${sectionSlug}`)
21 |     cy.getBySel("next-lesson-button").then(($btn) => {
22 |       // @ts-ignore
23 |       const text = $btn.text()
24 |       // @ts-ignore
25 |       const href = $btn.attr("href")
26 | 
27 |       expect(text).to.eq("Start Course")
28 |       expect(href).to.eq(
29 |         `/${sectionSlug}/${coursesJson[`${sectionSlug}`].lessons[0].slug}`
30 |       )
31 |     })
32 |   })
33 | ```
34 | 
35 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
36 | 
37 | ## Section 2
38 | 
39 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
40 | 


--------------------------------------------------------------------------------
/content/courses/cypress-fundamentals/how-to-write-a-test.mdx:
--------------------------------------------------------------------------------
 1 | # How to Write a Test
 2 | 
 3 | ```js
 4 | // posts will be populated at build time by getStaticProps()
 5 | function Blog({ posts }) {
 6 |   return (
 7 |     <ul>
 8 |       {posts.map((post) => (
 9 |         <li>{post.title}</li>
10 |       ))}
11 |     </ul>
12 |   )
13 | }
14 | 
15 | // This function gets called at build time on server-side.
16 | // It won't be called on client-side, so you can even do
17 | // direct database queries. See the "Technical details" section.
18 | export async function getStaticProps() {
19 |   // Call an external API endpoint to get posts.
20 |   // You can use any data fetching library
21 |   const res = await fetch("https://.../posts")
22 |   const posts = await res.json()
23 | 
24 |   // By returning { props: { posts } }, the Blog component
25 |   // will receive `posts` as a prop at build time
26 |   return {
27 |     props: {
28 |       posts,
29 |     },
30 |   }
31 | }
32 | 
33 | export default Blog
34 | ```
35 | 
36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
37 | 
38 | ## Section 1
39 | 
40 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
41 | 
42 | ## Section 2
43 | 
44 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
45 | 
46 | ## Section 3
47 | 
48 | Aenean eu lobortis nisi. Donec rutrum fringilla orci, vitae fermentum nisi porta eu. Nam sit amet odio lacus. Nulla eu fermentum metus. Suspendisse eu aliquet lectus, at fringilla massa. Pellentesque hendrerit iaculis metus id aliquet. Curabitur urna libero, molestie in lorem porta, imperdiet ultricies ex. Cras elementum aliquam lorem, non semper enim fermentum sed. Nullam egestas, elit at vulputate pretium, dui enim ornare erat, a tristique nulla risus id neque.
49 | 
50 | ## Section 4
51 | 
52 | Suspendisse vel massa elementum, porta odio pharetra, fringilla nunc. Proin vitae porttitor ex. Phasellus suscipit lorem augue, a pretium mauris porttitor ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam interdum sollicitudin arcu et tristique. Ut consequat ullamcorper dolor, quis laoreet velit fermentum vitae. Aliquam erat volutpat.
53 | 


--------------------------------------------------------------------------------
/content/courses/testing-foundations/knowing-what-to-test.mdx:
--------------------------------------------------------------------------------
 1 | # Knowing What to Test
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
 4 | 
 5 | ## Section 1
 6 | 
 7 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
 8 | 
 9 | ## Section 2
10 | 
11 | ```js
12 | export async function getStaticProps(context) {
13 |   const res = await fetch(`https://.../data`)
14 |   const data = await res.json()
15 | 
16 |   if (!data) {
17 |     return {
18 |       notFound: true,
19 |     }
20 |   }
21 | 
22 |   return {
23 |     props: { data }, // will be passed to the page component as props
24 |   }
25 | }
26 | ```
27 | 
28 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
29 | 
30 | ## Section 3
31 | 
32 | Aenean eu lobortis nisi. Donec rutrum fringilla orci, vitae fermentum nisi porta eu. Nam sit amet odio lacus. Nulla eu fermentum metus. Suspendisse eu aliquet lectus, at fringilla massa. Pellentesque hendrerit iaculis metus id aliquet. Curabitur urna libero, molestie in lorem porta, imperdiet ultricies ex. Cras elementum aliquam lorem, non semper enim fermentum sed. Nullam egestas, elit at vulputate pretium, dui enim ornare erat, a tristique nulla risus id neque.
33 | 
34 | ## Section 4
35 | 
36 | Suspendisse vel massa elementum, porta odio pharetra, fringilla nunc. Proin vitae porttitor ex. Phasellus suscipit lorem augue, a pretium mauris porttitor ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam interdum sollicitudin arcu et tristique. Ut consequat ullamcorper dolor, quis laoreet velit fermentum vitae. Aliquam erat volutpat.
37 | 


--------------------------------------------------------------------------------
/content/courses/testing-foundations/manual-vs-automated-testing.mdx:
--------------------------------------------------------------------------------
1 | # Manual vs Automated Testing
2 | 
3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
4 | 
5 | ## Section 1
6 | 
7 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
8 | 


--------------------------------------------------------------------------------
/content/courses/testing-foundations/testing-is-a-mindset.mdx:
--------------------------------------------------------------------------------
 1 | # Testing is a Mindset
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
 4 | 
 5 | ## Section 1
 6 | 
 7 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
 8 | 
 9 | ## Section 2
10 | 
11 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
12 | 


--------------------------------------------------------------------------------
/content/courses/testing-your-first-application/app-install-and-overview.mdx:
--------------------------------------------------------------------------------
 1 | # App Install & Overview
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
 4 | 
 5 | ## Section 1
 6 | 
 7 | ```js
 8 | export async function getStaticProps(context) {
 9 |   const res = await fetch(`https://.../data`)
10 |   const data = await res.json()
11 | 
12 |   if (!data) {
13 |     return {
14 |       notFound: true,
15 |     }
16 |   }
17 | 
18 |   return {
19 |     props: { data }, // will be passed to the page component as props
20 |   }
21 | }
22 | ```
23 | 
24 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
25 | 
26 | ## Section 2
27 | 
28 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
29 | 
30 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
31 | 
32 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
33 | 
34 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
35 | 


--------------------------------------------------------------------------------
/content/courses/testing-your-first-application/installing-cypress-and-writing-our-first-test.mdx:
--------------------------------------------------------------------------------
 1 | # Installing Cypress and writing our first test
 2 | 
 3 | ```js
 4 | describe("Next Lesson Button on Course Pages", () => {
 5 |   beforeEach(() => {
 6 |     // @ts-ignore
 7 |     cy.restoreLocalStorage()
 8 |   })
 9 | 
10 |   afterEach(() => {
11 |     // @ts-ignore
12 |     cy.saveLocalStorage()
13 |   })
14 | 
15 |   it("says 'Start Course' and links to the first lesson if none of the lessons have been completed", () => {
16 |     cy.visit(`/${sectionSlug}`)
17 |     cy.getBySel("next-lesson-button").then(($btn) => {
18 |       // @ts-ignore
19 |       const text = $btn.text()
20 |       // @ts-ignore
21 |       const href = $btn.attr("href")
22 | 
23 |       expect(text).to.eq("Start Course")
24 |       expect(href).to.eq(
25 |         `/${sectionSlug}/${coursesJson[`${sectionSlug}`].lessons[0].slug}`
26 |       )
27 |     })
28 |   })
29 | ```
30 | 
31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
32 | 
33 | ## Section 1
34 | 
35 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
36 | 
37 | ## Section 2
38 | 
39 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
40 | 


--------------------------------------------------------------------------------
/content/courses/testing-your-first-application/setting-up-data-before-each-test.mdx:
--------------------------------------------------------------------------------
 1 | # Setting up Data Before Each Test
 2 | 
 3 | ```js
 4 | // posts will be populated at build time by getStaticProps()
 5 | function Blog({ posts }) {
 6 |   return (
 7 |     <ul>
 8 |       {posts.map((post) => (
 9 |         <li>{post.title}</li>
10 |       ))}
11 |     </ul>
12 |   )
13 | }
14 | 
15 | // This function gets called at build time on server-side.
16 | // It won't be called on client-side, so you can even do
17 | // direct database queries. See the "Technical details" section.
18 | export async function getStaticProps() {
19 |   // Call an external API endpoint to get posts.
20 |   // You can use any data fetching library
21 |   const res = await fetch("https://.../posts")
22 |   const posts = await res.json()
23 | 
24 |   // By returning { props: { posts } }, the Blog component
25 |   // will receive `posts` as a prop at build time
26 |   return {
27 |     props: {
28 |       posts,
29 |     },
30 |   }
31 | }
32 | 
33 | export default Blog
34 | ```
35 | 
36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis lobortis maximus. Quisque egestas, sem fringilla egestas aliquet, turpis nisl placerat justo, vitae feugiat ligula urna in justo. Curabitur porta risus libero, tempus imperdiet arcu auctor sed. Praesent eget luctus tortor, vel hendrerit sapien. Phasellus quis ex ligula. Curabitur vehicula, lacus imperdiet ornare pulvinar, sem massa vulputate sem, eget mattis ex diam a lorem. Cras ac ex gravida magna vestibulum volutpat et et elit. Nullam vitae porttitor nulla, sed volutpat nisi.
37 | 
38 | ## Section 1
39 | 
40 | Sed elementum ut nulla nec sagittis. Sed orci neque, cursus id lacinia id, suscipit eget ligula. Etiam mollis dolor et libero dapibus facilisis. Phasellus erat ex, efficitur egestas lorem vitae, rhoncus convallis quam. Aliquam non laoreet ipsum. Nullam luctus, felis ut imperdiet mattis, ligula ligula ultricies orci, at dignissim erat odio id ligula. Praesent placerat sapien eu urna hendrerit pulvinar. Integer eget diam enim. Cras id massa porta, feugiat mi ac, euismod dui. Ut sed justo augue. Quisque viverra enim id nisi placerat, nec tincidunt urna facilisis. Nam vitae vestibulum ex, quis malesuada orci. Nulla a mi nec sem consectetur luctus non placerat urna.
41 | 
42 | ## Section 2
43 | 
44 | Vestibulum congue consectetur quam in mattis. Maecenas condimentum gravida arcu eu blandit. Aenean lorem risus, imperdiet eu bibendum vitae, imperdiet in diam. Phasellus quis risus ac leo condimentum egestas quis in tortor. Pellentesque at aliquet urna. Proin quis est tincidunt, molestie sem sit amet, aliquam leo. Suspendisse egestas lacinia dignissim.
45 | 
46 | ## Section 3
47 | 
48 | Aenean eu lobortis nisi. Donec rutrum fringilla orci, vitae fermentum nisi porta eu. Nam sit amet odio lacus. Nulla eu fermentum metus. Suspendisse eu aliquet lectus, at fringilla massa. Pellentesque hendrerit iaculis metus id aliquet. Curabitur urna libero, molestie in lorem porta, imperdiet ultricies ex. Cras elementum aliquam lorem, non semper enim fermentum sed. Nullam egestas, elit at vulputate pretium, dui enim ornare erat, a tristique nulla risus id neque.
49 | 


--------------------------------------------------------------------------------
/data/courses.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "testing-your-first-application": {
  3 |     "title": "Testing Your First Next.js Application",
  4 |     "slug": "testing-your-first-application",
  5 |     "description": "How to test a Next.js e-commerce app with Cypress.",
  6 |     "image": "/images/courses/store.png",
  7 |     "learnFeatures": [
  8 |       "Lorem ipsum dolor sit amet",
  9 |       "Lorem ipsum dolor sit amet",
 10 |       "Lorem ipsum dolor sit amet"
 11 |     ],
 12 |     "lessons": [
 13 |       {
 14 |         "title": "App Install and Overview",
 15 |         "slug": "app-install-and-overview",
 16 |         "description": "How to install the TodoMVC application and get it up and running.",
 17 |         "challenges": [
 18 |           {
 19 |             "challengeType": "multiple-choice",
 20 |             "question": "Vestibulum congue consectetur quam in mattis?",
 21 |             "answers": ["True", "False"],
 22 |             "correctAnswerIndex": 0
 23 |           }
 24 |         ]
 25 |       },
 26 |       {
 27 |         "title": "Installing Cypress and writing our first test",
 28 |         "slug": "installing-cypress-and-writing-our-first-test",
 29 |         "description": "How to install Cypress and write your first end to end test.",
 30 |         "challenges": [
 31 |           {
 32 |             "challengeType": "multiple-choice",
 33 |             "question": "Vestibulum congue consectetur quam in mattis?",
 34 |             "answers": ["True", "False"],
 35 |             "correctAnswerIndex": 0
 36 |           }
 37 |         ]
 38 |       },
 39 |       {
 40 |         "title": "Setting up Data Before Each Test",
 41 |         "slug": "setting-up-data-before-each-test",
 42 |         "description": "How to utilize the beforeEach hook to setup data before each test.",
 43 |         "challenges": [
 44 |           {
 45 |             "challengeType": "multiple-choice",
 46 |             "question": "Vestibulum congue consectetur quam in mattis?",
 47 |             "answers": ["True", "False"],
 48 |             "correctAnswerIndex": 0
 49 |           }
 50 |         ]
 51 |       }
 52 |     ]
 53 |   },
 54 |   "testing-foundations": {
 55 |     "title": "Testing Foundations",
 56 |     "slug": "testing-foundations",
 57 |     "description": "The fundamentals you need to write great tests.",
 58 |     "image": "https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg",
 59 |     "learnFeatures": [
 60 |       "Lorem ipsum dolor sit amet",
 61 |       "Lorem ipsum dolor sit amet",
 62 |       "Lorem ipsum dolor sit amet"
 63 |     ],
 64 |     "lessons": [
 65 |       {
 66 |         "title": "Testing is a Mindset",
 67 |         "slug": "testing-is-a-mindset",
 68 |         "description": "Understand the testing mindset that is necessary before you begin writing tests.",
 69 |         "challenges": [
 70 |           {
 71 |             "challengeType": "multiple-choice",
 72 |             "question": "Vestibulum congue consectetur quam in mattis?",
 73 |             "answers": ["True", "False"],
 74 |             "correctAnswerIndex": 0
 75 |           }
 76 |         ]
 77 |       },
 78 |       {
 79 |         "title": "Knowing What to Test",
 80 |         "slug": "knowing-what-to-test",
 81 |         "description": "How to test user journeys, new features and bugs within your application.",
 82 |         "challenges": [
 83 |           {
 84 |             "challengeType": "multiple-choice",
 85 |             "question": "Vestibulum congue consectetur quam in mattis?",
 86 |             "answers": ["True", "False"],
 87 |             "correctAnswerIndex": 0
 88 |           }
 89 |         ]
 90 |       },
 91 |       {
 92 |         "title": "Manual vs Automated Testing",
 93 |         "slug": "manual-vs-automated-testing",
 94 |         "description": "The differences between automated testing and manual testing.",
 95 |         "challenges": [
 96 |           {
 97 |             "challengeType": "multiple-choice",
 98 |             "question": "Vestibulum congue consectetur quam in mattis?",
 99 |             "answers": ["True", "False"],
100 |             "correctAnswerIndex": 0
101 |           }
102 |         ]
103 |       }
104 |     ]
105 |   },
106 |   "cypress-fundamentals": {
107 |     "title": "Cypress Fundamentals",
108 |     "slug": "cypress-fundamentals",
109 |     "description": "The aspects of Cypress you must know.",
110 |     "image": "/images/courses/cypress-rwa.png",
111 |     "learnFeatures": [
112 |       "Lorem ipsum dolor sit amet",
113 |       "Lorem ipsum dolor sit amet",
114 |       "Lorem ipsum dolor sit amet"
115 |     ],
116 |     "lessons": [
117 |       {
118 |         "title": "How to Write a Test",
119 |         "slug": "how-to-write-a-test",
120 |         "description": "How to write tests using the Arrange, Act and Assert pattern.",
121 |         "challenges": [
122 |           {
123 |             "challengeType": "multiple-choice",
124 |             "question": "Vestibulum congue consectetur quam in mattis?",
125 |             "answers": ["True", "False"],
126 |             "correctAnswerIndex": 0
127 |           }
128 |         ]
129 |       },
130 |       {
131 |         "title": "Cypress Runs in the Browser",
132 |         "slug": "cypress-runs-in-the-browser",
133 |         "description": "Cypress's architecture, unlike most other testing tools, runs inside of the browser. This means that your tests are being executed in the same environment as your application.",
134 |         "challenges": [
135 |           {
136 |             "challengeType": "multiple-choice",
137 |             "question": "Vestibulum congue consectetur quam in mattis?",
138 |             "answers": ["True", "False"],
139 |             "correctAnswerIndex": 0
140 |           }
141 |         ]
142 |       },
143 |       {
144 |         "title": "Command Chaining",
145 |         "slug": "command-chaining",
146 |         "description": "It's important to understand the mechanism Cypress uses to chain commands together. It manages a Promise chain on your behalf...",
147 |         "challenges": [
148 |           {
149 |             "challengeType": "multiple-choice",
150 |             "question": "Vestibulum congue consectetur quam in mattis?",
151 |             "answers": ["True", "False"],
152 |             "correctAnswerIndex": 0
153 |           }
154 |         ]
155 |       }
156 |     ]
157 |   }
158 | }
159 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: "Real World Testing with Cypress Docs",
 3 |   description:
 4 |     "Documentation for the Real World Testing with Cypress Next.js app",
 5 |   themeConfig: {
 6 |     nav: [
 7 |       { text: "Home", link: "/" },
 8 |       {
 9 |         text: "GitHub Repo",
10 |         link: "https://github.com/cypress-io/cypress-realworld-testing",
11 |       },
12 |     ],
13 |     sidebar: [
14 |       {
15 |         title: "Directory Structure",
16 |         path: "/directory-structure/",
17 |       },
18 |       {
19 |         title: "Pages",
20 |         path: "/pages/",
21 |       },
22 |       {
23 |         title: "Machines",
24 |         path: "/machines/",
25 |       },
26 |       {
27 |         title: "Scripts",
28 |         path: "/scripts/",
29 |       },
30 |       {
31 |         title: "Utils",
32 |         path: "/utils/",
33 |       },
34 |     ],
35 |   },
36 |   markdown: {
37 |     lineNumbers: true,
38 |   },
39 | }
40 | 


--------------------------------------------------------------------------------
/docs/directory-structure/index.md:
--------------------------------------------------------------------------------
 1 | # Directory Structure
 2 | 
 3 | ### /components
 4 | 
 5 | Contains all of the React components used in the app.
 6 | 
 7 | ### /content
 8 | 
 9 | Contains all of the markdown files for the course lesson pages and real world examples
10 | 
11 | ### /cypress
12 | 
13 | Contains everything necessary for our Cypress E2E tests
14 | 
15 | ### /docs
16 | 
17 | You are here. This is where all of the documentation for the app lives.
18 | 
19 | ### /machines
20 | 
21 | Contains all of the [XState](https://xstate.js.org/docs/) machines used in the app.
22 | 
23 | ### /pages
24 | 
25 | Contains all of the pages for the app.
26 | 
27 | ### /public
28 | 
29 | This folder contains all of the images used in the app.
30 | 
31 | ### /scripts
32 | 
33 | Custom JS scripts
34 | 
35 | ### /styles
36 | 
37 | CSS files
38 | 
39 | ### /tests
40 | 
41 | Unit Tests written with Mocha
42 | 
43 | ### /types
44 | 
45 | TypeScript Type defintion files
46 | 
47 | ### /utils
48 | 
49 | Helpful utility methods and functions
50 | 
51 | ### ./learn.json
52 | 
53 | Contains all of the data for the courses
54 | 
55 | ### ./real-world-examples.json
56 | 
57 | Contains all of the data for the real world examples
58 | 


--------------------------------------------------------------------------------
/docs/images/progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/docs/images/progress.png


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | # Real World Testing with Cypress
2 | 
3 | Real World Testing with Cypress is built with [Next.js](https://nextjs.org). Check out the various links in the left-hand sidebar for more documentation.
4 | 


--------------------------------------------------------------------------------
/docs/machines/index.md:
--------------------------------------------------------------------------------
 1 | # Machines
 2 | 
 3 | This application is using [Xstate](https://xstate.js.org/docs/) for state management.
 4 | 
 5 | ## progressMachine.ts
 6 | 
 7 | This state machine is used to keep track of a user's progress as they complete lessons within the app. Whenever a user completes a challenge/quiz on a lesson page the progress indicators throughout the site are updated.
 8 | 
 9 | ![](../images/progress.png)
10 | 
11 | ## progressService.ts
12 | 
13 | Since this app is a static site, we need to use `localStorage` to keep track of state across page loads and refreshes. This service is responsible for keeping the state in sync with `localStorage`.
14 | 


--------------------------------------------------------------------------------
/docs/pages/index.md:
--------------------------------------------------------------------------------
 1 | # Pages
 2 | 
 3 | All of the pages in the application and how Next.js uses some of them to generate [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes).
 4 | 
 5 | ## index.tsx
 6 | 
 7 | This is the index/home page of the app, i.e., `/`
 8 | 
 9 | ## \_app.tsx
10 | 
11 | This page acts like a "layout" page and wraps all of the other pages within the app
12 | 
13 | ```js{11}
14 | function MyApp({ Component, pageProps }) {
15 |   return (
16 |     <>
17 |       <Head>
18 |         <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
19 |         <link
20 |           href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css"
21 |           rel="stylesheet"
22 |         />
23 |       </Head>
24 |       <Component {...pageProps} />
25 |     </>
26 |   )
27 | }
28 | ```
29 | 
30 | The `<Component {...pageProps} />` on line `11` is where the other pages are passed into this special component and rendered.
31 | 
32 | ## [section]/
33 | 
34 | This is a special directory that Next.js uses for [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes). There are two pages within this directory.
35 | 
36 | 1. `index.tsx` - is reponsible for rendering all of the course landing pages, i.e.,
37 | 
38 | - `/testing-your-first-application`.
39 | - `/testing-foundations`.
40 | - `/cypress-fundamentals`.
41 | - `/advanced-cypress-concepts`.
42 | 
43 | 2. `[slug].tsx` - is a [dynamic page](https://nextjs.org/docs/basic-features/pages) and is responsible for rendering all of the lesson pages for the courses, i.e., `/testing-your-first-application/todomvc-app-install-and-overview`.
44 | 
45 | ## real-world-examples/
46 | 
47 | This is a special directory that Next.js uses for [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes). There are two pages within this directory.
48 | 
49 | 1. `index.tsx` - is reponsible for rendering the real world examples landing page, i.e.,
50 | 
51 | - `/real-world-examples`.
52 | 
53 | 2. `[slug].tsx` - is a [dynamic page](https://nextjs.org/docs/basic-features/pages) and is responsible for rendering all of the real world example pages, i.e., `/real-world-examples/authentication-overview-and-setup`.
54 | 
55 | ## getStaticProps()
56 | 
57 | [getStaticProps()](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) is a special method from Next.js that is used to fetch the data necessary to render the page and its components.
58 | 
59 | ## getStaticPaths()
60 | 
61 | [getStaticPaths()](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) is a special method from Next.js that is used to get the lists of paths necessary to render dynamic routes.
62 | 


--------------------------------------------------------------------------------
/docs/scripts/index.md:
--------------------------------------------------------------------------------
 1 | # Scripts
 2 | 
 3 | ## generateContentFiles.ts
 4 | 
 5 | This script was used primarily during the early stages of development of the app to render some markdown files with dummy data for the courses content.
 6 | 
 7 | ## generateRealWorldExamples.ts
 8 | 
 9 | This script was used primarily during the early stages of development of the app to render some markdown files with dummy data for the real world examples content.
10 | 
11 | ## updateSlugs.ts
12 | 
13 | This script takes all of the titles from the lesson in `learn.json` and 'slugify's' them to populate the `slug:` property.
14 | 
15 | ## updateRWESlugs.ts
16 | 
17 | This script takes all of the titles from the lesson in `real-world-examples.json` and 'slugify's' them to populate the `slug:` property.
18 | 


--------------------------------------------------------------------------------
/docs/utils/index.md:
--------------------------------------------------------------------------------
 1 | # Utils
 2 | 
 3 | ## machineUtils.ts
 4 | 
 5 | Contains several utility methods used for fetching lesson data and state from `machines/progressMachine.ts`
 6 | 
 7 | ## mdxUtils.ts
 8 | 
 9 | Contains several utility methods used for fetching _courses_ and _real world examples_ content files and data from the `/content` directory.
10 | 


--------------------------------------------------------------------------------
/lib/fetch-courses.ts:
--------------------------------------------------------------------------------
1 | import coursesJson from "../data/courses.json"
2 | 
3 | export async function fetchCourses() {
4 |   return coursesJson
5 | }
6 | 


--------------------------------------------------------------------------------
/machines/progressMachine.ts:
--------------------------------------------------------------------------------
 1 | import { createMachine, assign } from "xstate"
 2 | import { ProgressContext } from "common"
 3 | import { concat } from "lodash/fp"
 4 | import {
 5 |   getCourse,
 6 |   getChallenge,
 7 |   isSectionCompleted,
 8 | } from "../utils/machineUtils"
 9 | import coursesJson from "../data/courses.json"
10 | 
11 | const defaultContext: ProgressContext = {
12 |   sectionsCompleted: [],
13 |   lessons: [],
14 |   disableChallenges: false,
15 | }
16 | 
17 | export const progressMachine = createMachine(
18 |   {
19 |     id: "progress",
20 |     initial: "started",
21 |     context: defaultContext,
22 |     states: {
23 |       started: {
24 |         on: {
25 |           SKIP_ANSWER: {
26 |             actions: ["saveProgress"],
27 |           },
28 |           SUBMIT_ANSWER: {
29 |             actions: ["validateAndLogAnswer", "isSectionCompleted"],
30 |           },
31 |           DISABLE_CHALLENGES: { actions: ["disableChallenges"] },
32 |           COMPLETE_LESSON: { actions: ["saveProgress"] },
33 |         },
34 |       },
35 |       completed: {
36 |         on: {
37 |           CLEAR_All_PROGRESS: "",
38 |         },
39 |       },
40 |     },
41 |   },
42 |   {
43 |     actions: {
44 |       saveProgress: assign((context: any, event: any) => ({
45 |         lessons: concat(context.lessons, {
46 |           id: event.id,
47 |           status: "completed",
48 |         }),
49 |       })),
50 |       validateAndLogAnswer: assign((context: any, event: any) => {
51 |         const challenge = getChallenge(
52 |           coursesJson,
53 |           event.id,
54 |           event.challengeIndex
55 |         )
56 | 
57 |         const isCorrectMultipleChoiceAnswer =
58 |           challenge.challengeType === "multiple-choice" &&
59 |           challenge.correctAnswerIndex === event.userAnswerIndex
60 | 
61 |         if (isCorrectMultipleChoiceAnswer) {
62 |           return {
63 |             lessons: concat(context.lessons, {
64 |               id: event.id,
65 |               status: "completed",
66 |             }),
67 |           }
68 |         }
69 |       }),
70 |       disableChallenges: assign((context: any, event: any) => ({
71 |         disableChallenges: event.value,
72 |       })),
73 | 
74 |       isSectionCompleted: assign((context: any, event: any) => {
75 |         const [sectionSlug] = event.id.split("/")
76 |         const course = getCourse(coursesJson, event.id)
77 |         const completedLessons = context.lessons.filter(
78 |           (lesson) => lesson.status === "completed"
79 |         )
80 | 
81 |         if (
82 |           completedLessons.length === course.lessons.length &&
83 |           !isSectionCompleted(context.sectionsCompleted, sectionSlug)
84 |         ) {
85 |           return {
86 |             sectionsCompleted: concat(context.sectionsCompleted, sectionSlug),
87 |           }
88 |         }
89 |       }),
90 |     },
91 |   }
92 | )
93 | 


--------------------------------------------------------------------------------
/machines/progressService.ts:
--------------------------------------------------------------------------------
 1 | import { interpret, State } from "xstate"
 2 | import { progressMachine } from "./progressMachine"
 3 | const LOCAL_STORAGE_ITEM = "progressState"
 4 | 
 5 | // @ts-ignore
 6 | const stateDefinition =
 7 |   typeof window !== "undefined"
 8 |     ? JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_ITEM))
 9 |     : undefined
10 | 
11 | let resolvedState
12 | if (stateDefinition) {
13 |   const previousState = State.create(stateDefinition)
14 | 
15 |   // @ts-ignore
16 |   resolvedState = progressMachine.resolveState(previousState)
17 | }
18 | 
19 | export const progressService = interpret(progressMachine, {
20 |   devTools: true,
21 | })
22 |   .onTransition((state) => {
23 |     if (state.changed) {
24 |       typeof window !== "undefined" &&
25 |         window.localStorage.setItem(LOCAL_STORAGE_ITEM, JSON.stringify(state))
26 |     }
27 |   })
28 |   .start(resolvedState)
29 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next-sitemap.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   siteUrl: 'https://cypress-realworld-testing-course-app.vercel.app/',
3 |   generateRobotsTxt: true,
4 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |   swcMinify: true,
 4 |   images: {
 5 |     domains: ["images.unsplash.com", "source.unsplash.com", "tailwindui.com"],
 6 |   },
 7 |   webpack: function (config) {
 8 |     config.module.rules.push({
 9 |       test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
10 |       use: {
11 |         loader: "url-loader",
12 |         options: {
13 |           limit: 100000,
14 |           name: "[name].[ext]",
15 |         },
16 |       },
17 |     })
18 |     return config
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start",
 7 |     "lint": "next lint"
 8 |   },
 9 |   "dependencies": {
10 |     "@headlessui/react": "^1.5.0",
11 |     "@heroicons/react": "^1.0.6",
12 |     "@mapbox/rehype-prism": "^0.8.0",
13 |     "@tailwindcss/aspect-ratio": "^0.4.0",
14 |     "@tailwindcss/forms": "^0.5.0",
15 |     "@tailwindcss/typography": "^0.5.2",
16 |     "@types/glob": "^7.2.0",
17 |     "@xstate/react": "^2.0.1",
18 |     "dotenv": "^16.0.0",
19 |     "glob": "^7.2.0",
20 |     "globby": "^13.1.1",
21 |     "linkinator": "^3.0.3",
22 |     "next": "^12.3.4",
23 |     "react": "^17.0.2",
24 |     "react-dom": "^17.0.2",
25 |     "react-hook-form": "^7.27.1",
26 |     "react-slick": "^0.28.1",
27 |     "rehype-slug": "^5.0.1",
28 |     "xstate": "^4.30.5"
29 |   },
30 |   "devDependencies": {
31 |     "@types/chai": "^4.3.0",
32 |     "@types/lodash": "^4.14.179",
33 |     "@types/mocha": "^9.1.0",
34 |     "@types/react": "^17.0.39",
35 |     "autoprefixer": "^10.4.2",
36 |     "chai": "^4.3.6",
37 |     "eslint": "^8.10.0",
38 |     "eslint-config-next": "^12.1.0",
39 |     "eslint-config-prettier": "^8.5.0",
40 |     "eslint-plugin-prettier": "^4.0.0",
41 |     "gray-matter": "^4.0.3",
42 |     "markdown-toc-unlazy": "^1.0.1",
43 |     "mocha": "^9.2.1",
44 |     "next-mdx-remote": "^4.0.0",
45 |     "next-remote-watch": "^1.0.0",
46 |     "next-sitemap": "^2.5.7",
47 |     "postcss": "^8.4.8",
48 |     "prettier": "^2.5.1",
49 |     "pretty-quick": "^3.1.3",
50 |     "slugify": "^1.6.5",
51 |     "tailwindcss": "^3.0.23",
52 |     "tsconfig-paths": "^3.13.0",
53 |     "typescript": "^4.6.2",
54 |     "unslugify": "^1.0.2",
55 |     "url-loader": "^4.1.1"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/pages/[course]/[slug].tsx:
--------------------------------------------------------------------------------
  1 | import fs from "fs"
  2 | import matter from "gray-matter"
  3 | import { MDXRemoteSerializeResult } from "next-mdx-remote"
  4 | import { serialize } from "next-mdx-remote/serialize"
  5 | import Head from "next/head"
  6 | import dynamic from "next/dynamic"
  7 | import path from "path"
  8 | import { find, findIndex } from "lodash/fp"
  9 | import { useActor } from "@xstate/react"
 10 | import rehypeSlug from "rehype-slug"
 11 | import rehypePrism from "@mapbox/rehype-prism"
 12 | import { progressService } from "../../machines/progressService"
 13 | import Layout from "../../components/Layout"
 14 | import LessonLayout from "../../components/Lesson/LessonLayout"
 15 | import MCChallenge from "../../components/Lesson/MultipleChoiceChallenge"
 16 | import { fetchCourses } from "../../lib/fetch-courses"
 17 | import {
 18 |   LessonTableOfContents,
 19 |   MultipleChoiceChallenge,
 20 | } from "../../types/common"
 21 | import {
 22 |   CONTENT_PATH,
 23 |   allContentFilePaths,
 24 |   getToCForMarkdown,
 25 | } from "../../utils/mdxUtils"
 26 | import { isLessonCompleted } from "../../utils/machineUtils"
 27 | 
 28 | const NextLessonBtn = dynamic(
 29 |   () => import("../../components/Lesson/NextLessonBtn"),
 30 |   {
 31 |     ssr: false,
 32 |   }
 33 | )
 34 | 
 35 | const CompleteLessonBtn = dynamic(
 36 |   () => import("../../components/Lesson/CompleteLessonBtn"),
 37 |   {
 38 |     ssr: false,
 39 |   }
 40 | )
 41 | 
 42 | const SkipChallenge = dynamic(
 43 |   () => import("../../components/Lesson/SkipChallenge"),
 44 |   {
 45 |     ssr: false,
 46 |   }
 47 | )
 48 | 
 49 | // Custom components/renderers to pass to MDX.
 50 | // Since the MDX files aren't loaded by webpack, they have no knowledge of how
 51 | // to handle import statements. Instead, you must include components in scope
 52 | // here.
 53 | const components = {
 54 |   //a: CustomLink,
 55 |   // It also works with dynamically-imported components, which is especially
 56 |   // useful for conditionally loading components for certain routes.
 57 |   // See the notes in README.md for more details.
 58 |   //TestComponent: dynamic(() => import('../../components/TestComponent')),
 59 |   Head,
 60 | }
 61 | 
 62 | type Props = {
 63 |   source: MDXRemoteSerializeResult<Record<string, unknown>>
 64 |   frontMatter: {
 65 |     [key: string]: any
 66 |   }
 67 |   toc: LessonTableOfContents[]
 68 |   lessonData: {
 69 |     title: string
 70 |     slug: string
 71 |     description: string
 72 |     status: string
 73 |     videoURL: string
 74 |     challenges: MultipleChoiceChallenge[]
 75 |   }
 76 |   sectionLessons: []
 77 |   nextLesson: string
 78 |   sectionTitle: string
 79 |   lessonPath: string
 80 |   coursesJson: object
 81 |   courses: []
 82 |   course: string
 83 | }
 84 | 
 85 | export default function LessonPage({
 86 |   source,
 87 |   toc,
 88 |   lessonData,
 89 |   sectionLessons,
 90 |   nextLesson,
 91 |   sectionTitle,
 92 |   lessonPath,
 93 |   coursesJson,
 94 |   courses,
 95 |   course,
 96 | }: Props) {
 97 |   useActor(progressService)
 98 | 
 99 |   return (
100 |     <Layout
101 |       content={coursesJson}
102 |       courses={courses}
103 |       progressService={progressService}
104 |     >
105 |       <Head>
106 |         <title>
107 |           {lessonData.title} | Testing Next.js Applications with Cypress
108 |         </title>
109 |         <meta name="description" content={lessonData.description} />
110 |       </Head>
111 | 
112 |       <LessonLayout
113 |         toc={toc}
114 |         source={source}
115 |         components={components}
116 |         sectionLessons={sectionLessons}
117 |         sectionTitle={sectionTitle}
118 |         progressService={progressService}
119 |         lessonPath={lessonPath}
120 |         lessonData={lessonData}
121 |         course={course}
122 |       />
123 | 
124 |       {(!lessonData.challenges ||
125 |         progressService.state.context.disableChallenges) && (
126 |         <CompleteLessonBtn
127 |           progressService={progressService}
128 |           nextLessonPath={nextLesson}
129 |           lessonPath={lessonPath}
130 |         />
131 |       )}
132 | 
133 |       {lessonData.challenges &&
134 |         progressService.state.context.disableChallenges == false && (
135 |           <>
136 |             <MCChallenge
137 |               progressService={progressService}
138 |               lessonData={lessonData}
139 |               lessonPath={lessonPath}
140 |             />
141 | 
142 |             <NextLessonBtn
143 |               path={nextLesson}
144 |               isCompleted={isLessonCompleted(progressService, lessonPath)}
145 |             />
146 |           </>
147 |         )}
148 | 
149 |       {lessonData.challenges && (
150 |         <SkipChallenge progressService={progressService} />
151 |       )}
152 |     </Layout>
153 |   )
154 | }
155 | 
156 | export const getStaticProps = async ({ params }) => {
157 |   const coursesJson = await fetchCourses()
158 |   const courses = Object.keys(coursesJson)
159 |   const contentFilePath = path.join(
160 |     CONTENT_PATH,
161 |     `${params.course}/${params.slug}.mdx`
162 |   )
163 |   const source = fs.readFileSync(contentFilePath)
164 |   const { content, data } = matter(source)
165 |   const toc: LessonTableOfContents[] = getToCForMarkdown(content)
166 |   const mdxSource = await serialize(content, {
167 |     // Optionally pass remark/rehype plugins
168 |     mdxOptions: {
169 |       remarkPlugins: [],
170 |       // @ts-ignore
171 |       rehypePlugins: [rehypeSlug, rehypePrism],
172 |     },
173 |     scope: data,
174 |   })
175 |   const lessonData = find(
176 |     { slug: params.slug },
177 |     coursesJson[params.course].lessons
178 |   )
179 |   const { title, lessons } = coursesJson[params.course]
180 |   const nextLessonIndex = findIndex({ slug: params.slug }, lessons) + 1
181 |   let nextLesson
182 | 
183 |   if (nextLessonIndex < lessons.length) {
184 |     nextLesson = lessons[nextLessonIndex].slug
185 |   } else {
186 |     nextLesson = null
187 |   }
188 | 
189 |   return {
190 |     props: {
191 |       source: mdxSource,
192 |       frontMatter: data,
193 |       toc,
194 |       lessonData,
195 |       sectionLessons: lessons,
196 |       nextLesson,
197 |       sectionTitle: title,
198 |       lessonPath: `${params.course}/${params.slug}`,
199 |       coursesJson,
200 |       courses,
201 |       course: params.course,
202 |     },
203 |   }
204 | }
205 | 
206 | export const getStaticPaths = async () => {
207 |   const paths = allContentFilePaths
208 |     // Remove file extensions for page paths
209 |     .map((path) => path.replace(/\.mdx?$/, ""))
210 |     // Map the path into the static paths object required by Next.js
211 |     .map((filePath) => {
212 |       const [course, slug] = filePath.split("/")
213 |       return { params: { slug, course } }
214 |     })
215 | 
216 |   return {
217 |     paths,
218 |     fallback: false,
219 |   }
220 | }
221 | 


--------------------------------------------------------------------------------
/pages/[course]/index.tsx:
--------------------------------------------------------------------------------
 1 | import Head from "next/head"
 2 | import Layout from "../../components/Layout"
 3 | import CourseHero from "../../components/Course/CourseHero"
 4 | import CourseContent from "../../components/Course/CourseContent"
 5 | import { progressService } from "../../machines/progressService"
 6 | import { fetchCourses } from "../../lib/fetch-courses"
 7 | 
 8 | export default function SectionPage({
 9 |   title,
10 |   lessons,
11 |   description,
12 |   learnFeatures,
13 |   content,
14 |   courses,
15 |   course,
16 | }) {
17 |   return (
18 |     <Layout
19 |       content={content}
20 |       courses={courses}
21 |       progressService={progressService}
22 |     >
23 |       <Head>
24 |         <title>{title} | Testing Next.js Applications with Cypress</title>
25 |         <meta name="description" content={description} />
26 |       </Head>
27 | 
28 |       <CourseHero
29 |         title={title}
30 |         description={description}
31 |         image={content[course].image}
32 |       />
33 |       <CourseContent
34 |         title={title}
35 |         lessons={lessons}
36 |         learnFeatures={learnFeatures}
37 |         progressService={progressService}
38 |         course={course}
39 |       />
40 |     </Layout>
41 |   )
42 | }
43 | 
44 | export async function getStaticProps({ params }) {
45 |   const coursesJson = await fetchCourses()
46 |   const { title, lessons, description, learnFeatures } =
47 |     coursesJson[params.course]
48 |   const courses = Object.keys(coursesJson)
49 | 
50 |   return {
51 |     props: {
52 |       lessons,
53 |       title,
54 |       description,
55 |       learnFeatures,
56 |       content: coursesJson,
57 |       courses,
58 |       course: params.course,
59 |     },
60 |   }
61 | }
62 | 
63 | export async function getStaticPaths() {
64 |   const coursesJson = await fetchCourses()
65 |   const courses = Object.keys(coursesJson)
66 |   const paths = courses.map((course) => {
67 |     const { title, lessons } = coursesJson[course]
68 |     return { params: { course, lessons, title } }
69 |   })
70 | 
71 |   return {
72 |     paths,
73 |     fallback: false,
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "tailwindcss/tailwind.css"
 2 | import "../styles/global.css"
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <>
 7 |       <Component {...pageProps} />
 8 |     </>
 9 |   )
10 | }
11 | 
12 | export default MyApp
13 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document"
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
 8 |         <link
 9 |           href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css"
10 |           rel="stylesheet"
11 |         />
12 |       </Head>
13 |       <body>
14 |         <Main />
15 |         <NextScript />
16 |       </body>
17 |     </Html>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/api/courses.js:
--------------------------------------------------------------------------------
1 | import coursesJson from "../../data/courses.json"
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json(coursesJson)
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/api/subscribe.js:
--------------------------------------------------------------------------------
 1 | const subscribed = ["john@example.com"]
 2 | 
 3 | export default function handler(req, res) {
 4 |   if (!req.rawHeaders.includes("application/json")) {
 5 |     res.status(400).json({
 6 |       message: `Error: request must be sent as JSON`,
 7 |     })
 8 | 
 9 |     return
10 |   }
11 | 
12 |   if (
13 |     req.method === "POST" &&
14 |     req.body.email &&
15 |     !subscribed.includes(req.body.email)
16 |   ) {
17 |     res.status(200).json({
18 |       message: `Success: ${req.body.email} has been successfully subscribed`,
19 |     })
20 | 
21 |     return
22 |   }
23 | 
24 |   if (
25 |     req.method === "POST" &&
26 |     req.body.email &&
27 |     subscribed.includes(req.body.email)
28 |   ) {
29 |     res.status(403).json({
30 |       message: `Error: ${req.body.email} already exists. Please use a different email address.`,
31 |     })
32 | 
33 |     return
34 |   }
35 | 
36 |   res.status(400).json({
37 |     message: "Error: There was an error with your request. Please try again.",
38 |   })
39 | }
40 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import Head from "next/head"
 2 | import Layout from "../components/Layout"
 3 | import HomeHero from "../components/Home/HomeHero"
 4 | import HomeFeatures from "../components/Home/HomeFeatures"
 5 | import HomeCourses from "../components/Home/HomeCourses"
 6 | import { progressService } from "../machines/progressService"
 7 | import { fetchCourses } from "../lib/fetch-courses"
 8 | 
 9 | export default function Home({ content, courses }) {
10 |   return (
11 |     <Layout
12 |       content={content}
13 |       courses={courses}
14 |       progressService={progressService}
15 |     >
16 |       <Head>
17 |         <title>Testing Next.js Applications with Cypress</title>
18 |         <meta
19 |           name="description"
20 |           content="Learn from top industry experts and level-up your testing knowledge - for free."
21 |         />
22 |       </Head>
23 | 
24 |       <HomeHero />
25 |       <HomeFeatures />
26 |       <HomeCourses
27 |         courses={courses}
28 |         content={content}
29 |         progressService={progressService}
30 |       />
31 |     </Layout>
32 |   )
33 | }
34 | 
35 | export async function getStaticProps({ params }) {
36 |   const coursesJson = await fetchCourses()
37 |   const courses = Object.keys(coursesJson)
38 |   return {
39 |     props: {
40 |       content: coursesJson,
41 |       courses,
42 |     },
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // If you want to use other PostCSS plugins, see the following:
2 | // https://tailwindcss.com/docs/using-with-preprocessors
3 | module.exports = {
4 |   plugins: {
5 |     tailwindcss: {},
6 |     autoprefixer: {},
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/courses/cypress-rwa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/public/images/courses/cypress-rwa.png


--------------------------------------------------------------------------------
/public/images/courses/store.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/public/images/courses/store.png


--------------------------------------------------------------------------------
/public/images/logo/cypress-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/public/images/logo/cypress-logo.png


--------------------------------------------------------------------------------
/public/images/logo/cypress-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-realworld-testing-course-app/9232930cdb32138b6e693b82a806110a82fa88d4/public/images/logo/cypress-logo.webp


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
 1 | # *
 2 | User-agent: *
 3 | Allow: /
 4 | 
 5 | # Host
 6 | Host: https://cypress-realworld-testing-course-app.vercel.app/
 7 | 
 8 | # Sitemaps
 9 | Sitemap: https://cypress-realworld-testing-course-app.vercel.app/sitemap.xml
10 | 


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3 | <sitemap><loc>https://cypress-realworld-testing-course-app.vercel.app/sitemap-0.xml</loc></sitemap>
4 | </sitemapindex>


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["config:base"],
 3 |   "baseBranch": "main",
 4 |   "automerge": false,
 5 |   "commitMessage": "{{semanticPrefix}}Update {{depName}} to {{newVersion}} 🌟",
 6 |   "prTitle": "{{semanticPrefix}}{{#if isPin}}Pin{{else}}Update{{/if}} dependency {{depName}} to version {{#if isRange}}{{newVersion}}{{else}}{{#if isMajor}}{{newVersionMajor}}.x{{else}}{{newVersion}}{{/if}}{{/if}} 🌟",
 7 |   "major": {
 8 |     "automerge": false
 9 |   },
10 |   "minor": {
11 |     "automerge": false
12 |   },
13 |   "prHourlyLimit": 1,
14 |   "updateNotScheduled": false,
15 |   "timezone": "America/New_York",
16 |   "masterIssue": true,
17 |   "schedule": ["every weekend"],
18 |   "packageRules": [
19 |     {
20 |       "packageNames": ["cypress"],
21 |       "schedule": ["every weekday"]
22 |     },
23 |     {
24 |       "groupName": "automergeTypesMinor",
25 |       "automerge": true,
26 |       "major": { "automerge": false },
27 |       "matchPackagePatterns": ["^@types/"]
28 |     },
29 |     {
30 |       "groupName": "devDeps",
31 |       "description": "automerge minor updates of widely used libraries in devDeps",
32 |       "automerge": true,
33 |       "matchUpdateTypes": ["minor"],
34 |       "matchDepTypes": ["devDependencies"]
35 |     },
36 |     {
37 |       "groupName": "Typescript",
38 |       "matchPackageNames": ["typescript", "ts-node", "tsconfig-paths"]
39 |     },
40 |     {
41 |       "groupName": "React",
42 |       "matchPackageNames": ["react", "react-dom"]
43 |     },
44 |     {
45 |       "groupName": "Tailwind",
46 |       "matchPackagePatterns": [
47 |         "@headlessui/react",
48 |         "@heroicons/react",
49 |         "tailwindcss",
50 |         "postcss",
51 |         "autoprefixer"
52 |       ]
53 |     },
54 |     {
55 |       "groupName": "Next",
56 |       "matchPackageNames": ["next"],
57 |       "matchPackagePatterns": ["^next-", "^@zeit/next-"]
58 |     },
59 |     {
60 |       "groupName": "Xstate",
61 |       "matchPackageNames": ["xstate", "@xstate/react"]
62 |     },
63 |     {
64 |       "groupName": "ESLint and Prettier",
65 |       "matchPackageNames": ["eslint", "prettier"],
66 |       "matchPackagePatterns": ["^eslint-config-", "^eslint-plugin-"]
67 |     },
68 |     {
69 |       "groupName": "Misc FE libs",
70 |       "matchPackageNames": ["gray-matter", "slugify", "markdown-toc-unlazy"]
71 |     },
72 |     {
73 |       "groupName": "Misc dev tooling",
74 |       "matchPackageNames": ["husky", "mocha", "chai", "pretty-quick"]
75 |     }
76 |   ]
77 | }
78 | 


--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |   Lesson Content
 3 | */
 4 | 
 5 | .lesson-content h1 {
 6 |   @apply mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900;
 7 | }
 8 | 
 9 | /* 
10 |   Modal for screenshots
11 | */
12 | 
13 | #modal {
14 |   display: none;
15 |   position: fixed;
16 |   z-index: 99;
17 |   left: 0;
18 |   top: 0;
19 |   width: 100%;
20 |   height: 100%;
21 |   overflow: auto;
22 |   background-color: rgba(0, 0, 0, 0.5);
23 | }
24 | 
25 | /* Modal Content/Box */
26 | .modal-content {
27 |   background-color: white;
28 |   margin: 20px auto;
29 |   padding: 20px;
30 |   border: 1px solid #888;
31 |   width: 80%;
32 | }
33 | 
34 | /* The Close Button */
35 | .close {
36 |   color: #aaa;
37 |   float: right;
38 |   font-size: 35px;
39 |   font-weight: bold;
40 | }
41 | 
42 | .close:hover,
43 | .close:focus {
44 |   color: black;
45 |   text-decoration: none;
46 |   cursor: pointer;
47 | }
48 | 
49 | /* 
50 |   Removes backticks `` from being redered
51 |   for inline code in markdown files
52 | */
53 | .prose code::before,
54 | .prose code::after {
55 |   content: "";
56 | }
57 | 
58 | .lesson-content img {
59 |   cursor: pointer;
60 | }
61 | 
62 | /* 
63 |   Doc Search
64 | */
65 | 
66 | input[type='search']:focus {
67 |   --tw-ring-color: none;
68 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | const defaultTheme = require("tailwindcss/defaultTheme")
  2 | 
  3 | module.exports = {
  4 |   content: [
  5 |     "./pages/**/*.{js,ts,jsx,tsx}",
  6 |     "./components/**/*.{js,ts,jsx,tsx}",
  7 |   ],
  8 |   theme: {
  9 |     extend: {
 10 |       fontFamily: {
 11 |         sans: ["Inter var", ...defaultTheme.fontFamily.sans],
 12 |       },
 13 |       colors: {
 14 |         gray: {
 15 |           50: "#f3f4fa",
 16 |           100: "#e1e3ed",
 17 |           200: "#d0d2e0",
 18 |           300: "#bfc2d4",
 19 |           400: "#afb3c7",
 20 |           500: "#9095ad",
 21 |           600: "#747994",
 22 |           700: "#5a5f7a",
 23 |           800: "#434861",
 24 |           900: "#2e3247",
 25 |           1000: "#1b1e2e",
 26 |         },
 27 |         red: {
 28 |           50: "#fbefef",
 29 |           100: "#fad9d9",
 30 |           200: "#f8c4c4",
 31 |           300: "#f59a9a",
 32 |           400: "#e4575a",
 33 |           500: "#c62b34",
 34 |           600: "#9f1321",
 35 |           700: "#7a0718",
 36 |           800: "#5e0216",
 37 |           900: "#4f0016",
 38 |           1000: "#490018",
 39 |         },
 40 |         orange: {
 41 |           50: "#fcf1e0",
 42 |           100: "#fbe3c3",
 43 |           200: "#f9d4a7",
 44 |           300: "#f6b66f",
 45 |           400: "#e5771a",
 46 |           500: "#c74f00",
 47 |           600: "#9f3500",
 48 |           700: "#792100",
 49 |           800: "#5d1300",
 50 |           900: "#4e0b00",
 51 |           1000: "#470600",
 52 |         },
 53 |         jade: {
 54 |           50: "#def8ed",
 55 |           100: "#b9eed8",
 56 |           200: "#96e4c4",
 57 |           300: "#58d09e",
 58 |           400: "#0aa767",
 59 |           500: "#00804c",
 60 |           600: "#005e39",
 61 |           700: "#00432a",
 62 |           800: "#003220",
 63 |           900: "#00291b",
 64 |           1000: "#00261a",
 65 |         },
 66 |         indigo: {
 67 |           50: "#eff1fd",
 68 |           100: "#dce2fb",
 69 |           200: "#cad2fa",
 70 |           300: "#a6b3f7",
 71 |           400: "#6b7de8",
 72 |           500: "#4356cf",
 73 |           600: "#2a3aae",
 74 |           700: "#1b288e",
 75 |           800: "#131d76",
 76 |           900: "#0f1767",
 77 |           1000: "#0e1461",
 78 |         },
 79 |         purple: {
 80 |           50: "#f5f0fb",
 81 |           100: "#e9ddfa",
 82 |           200: "#decbf8",
 83 |           300: "#c8a7f5",
 84 |           400: "#a06ce4",
 85 |           500: "#7f43c9",
 86 |           600: "#632aa6",
 87 |           700: "#4b1a83",
 88 |           800: "#3b1268",
 89 |           900: "#320e58",
 90 |           1000: "#2f0c52",
 91 |         },
 92 |       },
 93 |     },
 94 |   },
 95 |   plugins: [
 96 |     // https://github.com/tailwindlabs/tailwindcss-aspect-ratio
 97 |     require("@tailwindcss/aspect-ratio"),
 98 |     // https://github.com/tailwindlabs/tailwindcss-forms
 99 |     require("@tailwindcss/forms"),
100 |     // https://github.com/tailwindlabs/tailwindcss-typography
101 |     require("@tailwindcss/typography"),
102 |   ],
103 | }
104 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "*": [
 6 |         "types/*.d.ts"
 7 |       ]
 8 |     },
 9 |     "target": "es5",
10 |     "lib": [
11 |       "dom",
12 |       "dom.iterable",
13 |       "esnext"
14 |     ],
15 |     "allowJs": true,
16 |     "skipLibCheck": true,
17 |     "strict": false,
18 |     "forceConsistentCasingInFileNames": true,
19 |     "noEmit": true,
20 |     "esModuleInterop": true,
21 |     "module": "esnext",
22 |     "moduleResolution": "node",
23 |     "resolveJsonModule": true,
24 |     "isolatedModules": true,
25 |     "jsx": "preserve",
26 |     "incremental": true
27 |   },
28 |   "ts-node": {
29 |     // these options are overrides used only by ts-node
30 |     // same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
31 |     "compilerOptions": {
32 |       "module": "commonjs"
33 |     }
34 |   },
35 |   "include": [
36 |     "next-env.d.ts",
37 |     "**/*.ts",
38 |     "**/*.tsx"
39 |   ],
40 |   "exclude": [
41 |     "**/node_modules",
42 |     "**/.*/"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/types/common.d.ts:
--------------------------------------------------------------------------------
 1 | export type LessonTableOfContents = {
 2 |   content: string
 3 |   slug: string
 4 |   lvl: number
 5 |   current?: boolean
 6 | }
 7 | 
 8 | export interface ChallengeAnswer {
 9 |   id: string
10 |   answeredCorrectly?: boolean
11 |   skipped?: boolean
12 | }
13 | export interface EventPayload {
14 |   type: string
15 |   id: string
16 |   challengeIndex: number
17 | }
18 | 
19 | export interface MultipleChoicePayload extends EventPayload {
20 |   userAnswerIndex: number
21 | }
22 | 
23 | export interface ProgressContext {
24 |   sectionsCompleted: string[]
25 |   lessons: object[]
26 |   disableChallenges: boolean
27 | }
28 | 
29 | export interface Challenge {
30 |   challengeType: string
31 |   question: string
32 | }
33 | 
34 | export interface MultipleChoiceChallenge extends Challenge {
35 |   answers: []
36 |   correctAnswerIndex: string
37 | }
38 | 


--------------------------------------------------------------------------------
/utils/machineUtils.ts:
--------------------------------------------------------------------------------
 1 | import { find, findIndex, get, gte } from "lodash/fp"
 2 | 
 3 | export const getAllLessons = (coursesJson: object, lessonPath) => {
 4 |   const [sectionSlug] = lessonPath.split("/")
 5 |   const course = getCourse(coursesJson, sectionSlug)
 6 |   return get("lessons", course)
 7 | }
 8 | 
 9 | export const findLesson = (coursesJson: object, lessonPath: string) => {
10 |   const [, lessonSlug] = lessonPath.split("/")
11 |   const lessons = getAllLessons(coursesJson, lessonPath)
12 |   return find({ slug: lessonSlug }, lessons)
13 | }
14 | 
15 | export const getChallenge = (
16 |   coursesJson: object,
17 |   lessonPath: string,
18 |   challengeIndex: number
19 | ) => {
20 |   const lesson = findLesson(coursesJson, lessonPath)
21 |   return lesson.challenges[challengeIndex]
22 | }
23 | 
24 | export const getLessonIndex = (coursesJson: object, lessonPath: string) => {
25 |   const [, lessonSlug] = lessonPath.split("/")
26 |   const lessons = getAllLessons(coursesJson, lessonPath)
27 |   return findIndex({ slug: lessonSlug }, lessons)
28 | }
29 | 
30 | export const getCourse = (coursesJson: object, lessonPath: string) => {
31 |   const [sectionSlug] = lessonPath.split("/")
32 |   return coursesJson[sectionSlug]
33 | }
34 | 
35 | export const isLessonCompleted = (progressService, lessonPath) => {
36 |   return gte(
37 |     findIndex(
38 |       { id: lessonPath, status: "completed" },
39 |       progressService.state.context.lessons
40 |     ),
41 |     0
42 |   )
43 | }
44 | 
45 | export const isSectionCompleted = (sectionsCompleted, sectionSlug) => {
46 |   return sectionsCompleted.includes(sectionSlug)
47 | }
48 | 


--------------------------------------------------------------------------------
/utils/mdxUtils.ts:
--------------------------------------------------------------------------------
 1 | import fs from "fs"
 2 | import path from "path"
 3 | import glob from "glob"
 4 | import toc from "markdown-toc-unlazy"
 5 | import { LessonTableOfContents } from "../types/common"
 6 | 
 7 | export const CONTENT_PATH = path.join(process.cwd(), "content/courses")
 8 | 
 9 | export const contentFilePaths = fs
10 |   .readdirSync(CONTENT_PATH)
11 |   // Only include md(x) files
12 |   .filter((path) => /\.mdx?$/.test(path))
13 | 
14 | export const allContentFilePaths = glob
15 |   .sync("content/courses/**/*")
16 |   .filter((path) => /\.mdx?$/.test(path))
17 |   .map((path) => path.replace(/^content\/courses\//, ""))
18 | 
19 | export const getToCForMarkdown = (markdown): LessonTableOfContents[] =>
20 |   toc(markdown).json
21 | 


--------------------------------------------------------------------------------