diff --git a/.eslintrc.js b/.eslintrc.js
index 99152a7..b144e66 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,7 @@
module.exports = {
- // extends: ['airbnb-base', 'prettier'],
extends: ['airbnb', 'eslint:recommended', 'plugin:react/recommended', 'prettier'],
plugins: ['react'],
env: {
- // node: true,
browser: true,
},
rules: {
diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000..dac255d
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+v16.15.1
diff --git a/README.md b/README.md
index 8176c32..f482589 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,6 @@ This project was inspired by [Isotope](http://isotope.metafizzy.co/) and [Packer
[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.
diff --git a/apps/website/docusaurus.config.js b/apps/website/docusaurus.config.js
index 2807d67..f775e59 100644
--- a/apps/website/docusaurus.config.js
+++ b/apps/website/docusaurus.config.js
@@ -41,16 +41,14 @@ const config = {
({
colorMode: {
respectPrefersColorScheme: true,
- switchConfig: {
- darkIcon: '🌕',
- lightIcon: '️☀️',
- },
},
navbar: {
title: 'Shuffle.js',
logo: {
alt: 'Shuffle.js Logo',
src: 'img/favicon.svg',
+ width: 24,
+ height: 24,
},
items: [
{
@@ -78,43 +76,43 @@ const config = {
title: 'Docs',
items: [
{
- label: 'Tutorial',
+ label: 'Installation',
to: '/docs/install',
},
+ {
+ label: 'FAQs',
+ to: '/docs/faqs',
+ },
],
},
{
title: 'Community',
items: [
{
- label: 'Stack Overflow',
- href: 'https://stackoverflow.com/questions/tagged/docusaurus',
- },
- {
- label: 'Discord',
- href: 'https://discordapp.com/invite/docusaurus',
+ label: 'Twitter',
+ href: 'https://twitter.com/Vestride',
},
{
- label: 'Twitter',
- href: 'https://twitter.com/docusaurus',
+ label: 'Stack Overflow',
+ href: 'https://stackoverflow.com/search?q=shuffle+js',
},
],
},
{
title: 'More',
items: [
- {
- label: 'Blog',
- to: '/blog',
- },
{
label: 'GitHub',
href: 'https://github.com/Vestride/Shuffle',
},
+ {
+ label: 'CodePen template',
+ href: 'http://codepen.io/pen?template=qrjOpX',
+ },
],
},
],
- copyright: `Copyright © ${new Date().getFullYear()} ShuffleJS. Built with Docusaurus.`,
+ copyright: `Copyright © ${new Date().getFullYear()} Glen Cheney. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
diff --git a/apps/website/package.json b/apps/website/package.json
index 0d69a30..8a35f06 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -15,12 +15,12 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
- "@docusaurus/core": "^2.0.0-beta.16",
- "@docusaurus/preset-classic": "^2.0.0-beta.16",
- "@docusaurus/types": "^2.0.0-beta.16",
+ "@docusaurus/core": "^2.0.0-beta.21",
+ "@docusaurus/preset-classic": "^2.0.0-beta.21",
+ "@docusaurus/types": "^2.0.0-beta.21",
"@mdx-js/react": "^1.6.21",
- "clsx": "^1.1.1",
- "prism-react-renderer": "^1.2.1",
+ "clsx": "^1.2.0",
+ "prism-react-renderer": "^1.3.5",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
diff --git a/apps/website/src/components/HomepageFeatures.jsx b/apps/website/src/components/HomepageFeatures.jsx
index b8d44e2..3ee54cd 100644
--- a/apps/website/src/components/HomepageFeatures.jsx
+++ b/apps/website/src/components/HomepageFeatures.jsx
@@ -1,48 +1,51 @@
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';
+import findSvg from '../../static/img/undraw-find-things.svg';
+import browsersSvg from '../../static/img/undraw-browsers.svg';
+import responsiveSvgDark from '../../static/img/undraw-responsive-design-dark.svg';
+import findSvgDark from '../../static/img/undraw-find-things-dark.svg';
+import browsersSvgDark from '../../static/img/undraw-browsers-dark.svg';
-const FeatureList = [
+const features = [
{
- title: 'Easy to Use',
- // eslint-disable-next-line global-require
- Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+ title: 'Responsive design',
+ Svg: responsiveSvg,
+ SvgDark: responsiveSvgDark,
description: (
- <>
- Docusaurus was designed from the ground up to be easily installed and used to get your website up and running
- quickly.
- >
+ <>Shuffle was built to make responsive design easy. Quickly update items in the grid by adding a class.>
),
},
{
- title: 'Focus on What Matters',
- // eslint-disable-next-line global-require
- Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
- description: (
- <>
- Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and move your docs into the{' '}
- docs
directory.
- >
- ),
+ title: 'Powerful filters',
+ Svg: findSvg,
+ SvgDark: findSvgDark,
+ description: <>Let your users find what they’re looking for with groups and custom filters.>,
},
{
- title: 'Powered by React',
- // eslint-disable-next-line global-require
- Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+ title: 'Smooth animations',
+ Svg: browsersSvg,
+ SvgDark: browsersSvgDark,
description: (
- <>
- Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same
- header and footer.
- >
+ <>Transitions are all handled by the CSS, which lets the browser optimize them for the user’s device.>
),
},
];
-function Feature({ Svg, title, description }) {
+function Feature({ Svg, SvgDark, title, description }) {
+ const { colorMode } = useColorMode();
return (
{siteConfig.tagline}