diff --git a/.env b/.env new file mode 100644 index 0000000..0ffd5e7 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +PUZZLE_URL=https://website-puzzle.pages.dev \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 0967ef4..544138b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,3 @@ -{} +{ + "singleQuote": true +} diff --git a/docusaurus.config.js b/docusaurus.config.js index 6ca9a60..84c57c4 100644 --- a/docusaurus.config.js +++ b/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 // pathname under which your site is served // For GitHub pages deployment, it is often '//' - 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; }, }; diff --git a/package-lock.json b/package-lock.json index ea07c43..444b72f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -6022,6 +6023,17 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", diff --git a/package.json b/package.json index 1d6b97e..f11f8e0 100644 --- a/package.json +++ b/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", diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index acc7621..db58a21 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -35,7 +35,7 @@ const FeatureList = [ }, ]; -function Feature({Svg, title, description}) { +function Feature({ Svg, title, description }) { return (
diff --git a/src/components/Puzzle/index.js b/src/components/Puzzle/index.js new file mode 100644 index 0000000..430f191 --- /dev/null +++ b/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 ( + <> + + + ); +} diff --git a/src/pages/index.js b/src/pages/index.js index a8c61f2..673fc61 100644 --- a/src/pages/index.js +++ b/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 ( -
+
{siteConfig.title}

{siteConfig.tagline}

+ - Docusaurus Tutorial - 5min ⏱️ + to="/case-study" + > + Read the Case Study
@@ -29,11 +32,12 @@ function HomepageHeader() { } export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( + description="Description will go into a meta tag in " + >