Puzzle demo

.env

@@ -0,0 +1 @@
+PUZZLE_URL=https://website-puzzle.pages.dev

.prettierrc

@@ -1 +1,3 @@
-{}
+{
+  "singleQuote": true
+}

docusaurus.config.js

@@ -4,58 +4,64 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-import { themes as prismThemes } from "prism-react-renderer";
+import 'dotenv/config';
+import { themes as prismThemes } from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Syncosaurus",
+  title: 'Syncosaurus',
   tagline:
-    "Syncosaurus is a React-and-Javascript-based framework for building real-time, collaborative React applications backed by the Cloudflare edge network of Workers and Durable Objects.",
-  favicon: "img/favicon.ico",
+    'Syncosaurus is a React-and-Javascript-based framework for building real-time, collaborative React applications backed by the Cloudflare edge network of Workers and Durable Objects.',
+  favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
-  url: "https://syncosaurus.github.io",
+  url: 'https://syncosaurus.github.io',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+  baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "syncosaurus", // Usually your GitHub org/user name.
-  projectName: "syncosaurus", // Usually your repo name.
+  organizationName: 'syncosaurus', // Usually your GitHub org/user name.
+  projectName: 'syncosaurus.github.io', // Usually your repo name.
+  trailingSlash: false,
 
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  customFields: {
+    puzzleUrl: process.env.PUZZLE_URL,
   },
 
   presets: [
     [
-      "classic",
+      'classic',
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: "./sidebars.js",
+          sidebarPath: './sidebars.js',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         theme: {
-          customCss: "./src/css/custom.css",
+          customCss: './src/css/custom.css',
         },
       }),
     ],
@@ -65,40 +71,40 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
-      image: "img/docusaurus-social-card.jpg",
+      image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: "Syncosaurus",
+        title: 'Syncosaurus',
         logo: {
-          alt: "Syncosaurus Logo",
-          src: "img/logo.svg",
+          alt: 'Syncosaurus Logo',
+          src: 'img/logo.svg',
         },
         items: [
-          { to: "/case-study", label: "Case Study", position: "right" },
-          { to: "/team", label: "Team", position: "right" },
+          { to: '/case-study', label: 'Case Study', position: 'right' },
+          { to: '/team', label: 'Team', position: 'right' },
           {
-            to: "https://github.com/syncosaurus",
-            label: "GitHub",
-            position: "right",
+            to: 'https://github.com/syncosaurus',
+            label: 'GitHub',
+            position: 'right',
           },
         ],
       },
       footer: {
-        style: "dark",
+        style: 'dark',
         links: [
           {
-            title: "Navigation",
+            title: 'Navigation',
             items: [
               {
-                label: "Case Study",
-                to: "/case-study",
+                label: 'Case Study',
+                to: '/case-study',
               },
               {
-                label: "Team",
-                to: "/team",
+                label: 'Team',
+                to: '/team',
               },
               {
-                label: "GitHub",
-                to: "https://github.com/syncosaurus",
+                label: 'GitHub',
+                to: 'https://github.com/syncosaurus',
               },
             ],
           },
@@ -109,16 +115,16 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
-      colorMode: { defaultMode: "light", disableSwitch: true },
+      colorMode: { defaultMode: 'light', disableSwitch: true },
     }),
   plugins: [
     async function myPlugin(context, options) {
       return {
-        name: "docusaurus-tailwindcss",
+        name: 'docusaurus-tailwindcss',
         configurePostCss(postcssOptions) {
           // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require("tailwindcss"));
-          postcssOptions.plugins.push(require("autoprefixer"));
+          postcssOptions.plugins.push(require('tailwindcss'));
+          postcssOptions.plugins.push(require('autoprefixer'));
           return postcssOptions;
         },
       };

package.json

@@ -19,6 +19,7 @@
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.0.0",
+    "dotenv": "^16.4.5",
     "postcss": "^8.4.38",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

src/components/HomepageFeatures/index.js

@@ -35,7 +35,7 @@ const FeatureList = [
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">

src/components/Puzzle/index.js

@@ -0,0 +1,17 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export default function Puzzle() {
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
+  console.log(customFields.puzzleUrl);
+  return (
+    <>
+      <iframe
+        style={{ height: 500, width: 500 }}
+        src={customFields.puzzleUrl}
+      ></iframe>
+    </>
+  );
+}

src/pages/index.js

@@ -1,26 +1,29 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Puzzle from "@site/src/components/Puzzle";
 
-import Heading from '@theme/Heading';
-import styles from './index.module.css';
+import Heading from "@theme/Heading";
+import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
+          <Puzzle />
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            to="/case-study"
+          >
+            Read the Case Study
           </Link>
         </div>
       </div>
@@ -29,11 +32,12 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />