Change dark mode illustration logic

CONTRIBUTING.md

@@ -12,9 +12,10 @@ Without a reduced test case, your issue may be closed.
 
 ## Releasing a new version
 
-- Update `changelog.html`.
+- Update `changelog.md`.
 - Run tests.
 - Commit changes.
+- `cd packages/shuffle`
 - `npm version major|minor|patch`.
 - `npm publish`
 - `git push && git push --tags`
@@ -22,9 +23,7 @@ Without a reduced test case, your issue may be closed.
 
 ## Running locally
 
-This project uses [Jekyll](https://jekyllrb.com/).
-
-- Head over to [their quickstart guide](https://jekyllrb.com/docs/quickstart/) to setup jekyll.
-- Install npm dependencies `npm install`.
-- Run `npm run watch` to rebuild, start the jekyll server, and watch for changes.
-- go to `http://localhost:4000` to see it.
+- Clone the project.
+- Install dependencies with `yarn`.
+- Run `yarn watch` to rebuild, start the server, and watch for changes.
+- go to `http://localhost:3000/Shuffle/` to see it.

README.md

@@ -31,81 +31,3 @@ This project was inspired by [Isotope](http://isotope.metafizzy.co/) and [Packer
 [npm-img]: https://img.shields.io/npm/v/shufflejs.svg
 [dependabot-url]: https://docs.github.com/en/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/configuring-dependabot-security-updates
 [dependabot-img]: https://img.shields.io/badge/Dependabot-enabled-blue.svg
-
-# Turborepo starter
-
-This is an official Yarn v1 starter turborepo.
-
-## What's inside?
-
-This turborepo uses [Yarn](https://classic.yarnpkg.com/lang/en/) as a package manager. It includes the following packages/apps:
-
-### Apps and Packages
-
-- `docs`: a [Next.js](https://nextjs.org) app
-- `web`: another [Next.js](https://nextjs.org) app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
-- `config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
-
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
-
-### Utilities
-
-This turborepo has some additional tools already setup for you:
-
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
-
-## Setup
-
-This repository is used in the `npx create-turbo` command, and selected when choosing which package manager you wish to use with your monorepo (Yarn).
-
-### Build
-
-To build all apps and packages, run the following command:
-
-```
-cd my-turborepo
-yarn run build
-```
-
-### Develop
-
-To develop all apps and packages, run the following command:
-
-```
-cd my-turborepo
-yarn run dev
-```
-
-### Remote Caching
-
-Turborepo can use a technique known as [Remote Caching (Beta)](https://turborepo.org/docs/features/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
-
-By default, Turborepo will cache locally. To enable Remote Caching (Beta) you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
-
-```
-cd my-turborepo
-npx turbo login
-```
-
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
-
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
-
-```
-npx turbo link
-```
-
-## Useful Links
-
-Learn more about the power of Turborepo:
-
-- [Pipelines](https://turborepo.org/docs/features/pipelines)
-- [Caching](https://turborepo.org/docs/features/caching)
-- [Remote Caching (Beta)](https://turborepo.org/docs/features/remote-caching)
-- [Scoped Tasks](https://turborepo.org/docs/features/scopes)
-- [Configuration Options](https://turborepo.org/docs/reference/configuration)
-- [CLI Usage](https://turborepo.org/docs/reference/command-line-reference)

apps/website/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
+    "watch": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

apps/website/src/components/HomepageFeatures.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import clsx from 'clsx';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useColorMode } from '@docusaurus/theme-common';
 
 import styles from './HomepageFeatures.module.css';
 import responsiveSvg from '../../static/img/undraw-responsive-design.svg';
@@ -37,15 +35,11 @@ const features = [
 ];
 
 function Feature({ Svg, SvgDark, title, description }) {
-  const { colorMode } = useColorMode();
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        {colorMode === 'dark' ? (
-          <SvgDark className={styles.featureSvg} alt={title} />
-        ) : (
-          <Svg className={styles.featureSvg} alt={title} />
-        )}
+        <SvgDark className={clsx(styles.featureSvg, styles.featureSvgDark)} />
+        <Svg className={clsx(styles.featureSvg, styles.featureSvgLight)} />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

apps/website/src/components/HomepageFeatures.module.css

@@ -8,3 +8,12 @@
   height: 200px;
   width: 200px;
 }
+
+.featureSvgDark,
+[data-theme="dark"] .featureSvgLight {
+  display: none;
+}
+
+[data-theme="dark"] .featureSvgDark {
+  display: inline-block;
+}

apps/website/src/pages/index.jsx

@@ -102,7 +102,7 @@ function HomepageHeader() {
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs/intro">
+          <Link className="button button--secondary button--lg" to="/docs/install">
             Get started with Shuffle
           </Link>
         </div>
@@ -114,7 +114,7 @@ function HomepageHeader() {
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+    <Layout title="Home" description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
         <HomepageFeatures />