Skip to content

Commit

Permalink
Merge pull request #3 from syncosaurus/puzzle-demo
Browse files Browse the repository at this point in the history
Puzzle demo
  • Loading branch information
sklarfox authored Apr 11, 2024
2 parents b93eefd + 5583612 commit ba72eaf
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 53 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
PUZZLE_URL=https://website-puzzle.pages.dev
4 changes: 3 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
{}
{
"singleQuote": true
}
82 changes: 44 additions & 38 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
}),
],
Expand All @@ -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',
},
],
},
Expand All @@ -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;
},
};
Expand Down
12 changes: 12 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/HomepageFeatures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
17 changes: 17 additions & 0 deletions src/components/Puzzle/index.js
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
30 changes: 17 additions & 13 deletions src/pages/index.js
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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 />
Expand Down

0 comments on commit ba72eaf

Please sign in to comment.