feat(website): add support menu (pmndrs#1415)

* feat(website): add support menu

* fix(website): fix import

* fix(website): revise input

* fix(website): remove deprecated flags

website/.prettierignore

@@ -1,5 +1,3 @@
-.cache
 package.json
 package-lock.json
 yarn.lock
-public

website/gatsby-config.js

@@ -101,10 +101,16 @@ module.exports = {
       },
     },
   ],
+  flags: {
+    DEV_SSR: false,
+    QUERY_ON_DEMAND: true,
+    LAZY_IMAGES: true,
+    DEV_WEBPACK_CACHE: true,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+    PARALLEL_SOURCING: true,
+  },
+  graphqlTypegen: false,
   jsxRuntime: 'automatic',
   polyfill: false,
   trailingSlash: 'never',
-  flags: {
-    FAST_DEV: true,
-  },
 };

website/package.json

@@ -6,46 +6,51 @@
   "bugs": "https://github.com/pmndrs/jotai/issues",
   "license": "MIT",
   "author": "Sophia Michelle Andren <[email protected]> (https://candycode.com/)",
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "deduplicate": "npx yarn-deduplicate yarn.lock",
-    "postdeduplicate": "yarn install"
+    "postdeduplicate": "yarn install",
+    "browserslist": "npx browserslist@latest --update-db"
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@radix-ui/react-dialog": "^0.1.5",
+    "@radix-ui/react-dialog": "^1.0.0",
     "algoliasearch": "^4.13.1",
     "classnames": "^2.3.1",
-    "gatsby": "^4.17.0",
+    "gatsby": "^4.22.1",
     "gatsby-plugin-algolia": "^0.26.0",
-    "gatsby-plugin-google-gtag": "^4.17.0",
+    "gatsby-plugin-google-gtag": "^4.22.0",
     "gatsby-plugin-mdx": "^3.17.0",
-    "gatsby-plugin-postcss": "^5.17.0",
-    "gatsby-plugin-sitemap": "^5.17.0",
+    "gatsby-plugin-postcss": "^5.22.0",
+    "gatsby-plugin-sitemap": "^5.22.0",
     "gatsby-plugin-use-dark-mode": "^1.5.0",
-    "gatsby-source-filesystem": "^4.17.0",
-    "jotai": "^1.7.0",
-    "just-kebab-case": "^4.0.3",
-    "just-throttle": "^4.0.1",
+    "gatsby-source-filesystem": "^4.22.0",
+    "jotai": "^1.8.3",
+    "just-kebab-case": "^4.1.1",
+    "just-throttle": "^4.1.1",
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-instantsearch-hooks-web": "^6.30.2",
+    "react-instantsearch-hooks-web": "^6.32.1",
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.2",
-    "autoprefixer": "^10.4.7",
-    "babel-preset-gatsby": "^2.17.0",
-    "postcss": "^8.4.14",
-    "postcss-import": "^14.1.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "autoprefixer": "^10.4.9",
+    "babel-preset-gatsby": "^2.22.1",
+    "postcss": "^8.4.16",
+    "postcss-import": "^15.0.0",
+    "postmark": "^3.0.14",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.1.8"
   },
   "private": true,
   "browserslist": [

website/src/api/contact.js

@@ -0,0 +1,33 @@
+import * as postmark from 'postmark';
+
+const client = new postmark.ServerClient(process.env.POSTMARK_API_TOKEN);
+
+export default async function handler(request, response) {
+  const body = request.body;
+
+  if (!body.name || !body.email || !body.message) {
+    return response.status(400).json({ data: 'Invalid' });
+  }
+
+  const subject = `Message from ${body.name} (${body.email}) via jotai.org`;
+
+  const message = `
+    Name: ${body.name}\r\n
+    Email: ${body.email}\r\n
+    Message: ${body.message}
+  `;
+
+  try {
+    client.sendEmail({
+      From: '[email protected]',
+      To: process.env.EMAIL_RECIPIENTS,
+      Subject: subject,
+      ReplyTo: body.email,
+      TextBody: message,
+    });
+
+    response.status(200).json({ status: 'Sent' });
+  } catch (error) {
+    response.status(500).json({ status: 'Not sent' });
+  }
+}

website/src/atoms/index.js

@@ -4,6 +4,7 @@ import { atomWithStorage } from 'jotai/utils';
 
 export const menuAtom = atom(false);
 export const searchAtom = atom(false);
+export const helpAtom = atom(false);
 
 export const textAtom = atom('hello');
 export const uppercaseAtom = atom((get) => get(textAtom).toUpperCase());

website/src/components/button.js

@@ -10,13 +10,15 @@ export const Button = ({
   to,
   external = false,
   dark = false,
+  bold = false,
   small = false,
   className = '',
   children,
   ...rest
 }) => {
   const buttonClassNames = cx(
     'inline-flex select-none items-center border dark:!shadow-none',
+    bold && 'font-medium',
     !small
       ? 'space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg'
       : 'space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md',

website/src/components/credits.js

@@ -3,28 +3,39 @@ import { Button } from '../components';
 export const Credits = () => {
   return (
     <>
+      <Button
+        to="https://twitter.com/dai_shi"
+        title="Daishi Kato"
+        className="inline-flex items-center justify-center"
+        style={{ width: 150 }}
+        dark
+        small
+        external
+      >
+        library by <span className="font-semibold">Daishi Kato</span>
+      </Button>
       <Button
         to="https://jessiewaters.com"
         title="Jessie Waters"
         className="inline-flex items-center justify-center"
-        style={{ width: 175 }}
+        style={{ width: 150 }}
         dark
         small
         external
       >
-        mascot by Jessie Waters
+        art by <span className="font-semibold">Jessie Waters</span>
       </Button>
       <Button
         to="https://candycode.com/"
         title="candycode, an alternative graphic design and web development agency based in San Diego"
         className="inline-flex items-center justify-center"
-        style={{ width: 175, height: 28 }}
+        style={{ width: 150, height: 28 }}
         dark
         small
         external
       >
         <div className="inline-flex items-center space-x-1">
-          <span className="whitespace-nowrap">website by</span>
+          <span className="whitespace-nowrap">site by</span>
           <img
             src="https://storage.googleapis.com/candycode/candycode.svg"
             alt="candycode alternative graphic design web development agency San Diego"

website/src/components/index.js

@@ -20,5 +20,7 @@ export * from './search-button';
 export * from './search-modal';
 export * from './sidebar';
 export * from './stackblitz';
+export * from './support-modal';
+export * from './support';
 export * from './toc';
 export * from './wrapper';

website/src/components/jotai.js

@@ -5,7 +5,7 @@ import { Logo } from '../components';
 export const Jotai = ({ isDocsPage = false, small = false, ...rest }) => {
   return (
     <div {...rest}>
-      <Headline isHomePage={!isDocsPage}>
+      <Headline mainTitle={!isDocsPage}>
         <Link to="/" className="inline-block rounded-lg focus:ring-offset-4">
           <Logo
             className={cx(
@@ -39,6 +39,6 @@ export const Jotai = ({ isDocsPage = false, small = false, ...rest }) => {
   );
 };
 
-const Headline = ({ isHomePage, children, ...rest }) => {
-  return isHomePage ? <h1 {...rest}>{children}</h1> : <h2 {...rest}>{children}</h2>;
+const Headline = ({ mainTitle = false, children, ...rest }) => {
+  return mainTitle ? <h1 {...rest}>{children}</h1> : <h2 {...rest}>{children}</h2>;
 };

website/src/components/layout.js

@@ -1,6 +1,15 @@
 import cx from 'classnames';
 import useDarkMode from 'use-dark-mode';
-import { Footer, Icon, Main, Menu, SearchModal, Sidebar, Wrapper } from '../components';
+import {
+  Footer,
+  Icon,
+  Main,
+  Menu,
+  SearchModal,
+  Sidebar,
+  SupportModal,
+  Wrapper,
+} from '../components';
 
 const INITIAL_STATE = false;
 
@@ -47,6 +56,7 @@ export const Layout = ({ showDocs = false, children }) => {
       </Wrapper>
       <Menu />
       <SearchModal />
+      <SupportModal />
     </>
   );
 };

website/src/components/sidebar.js

@@ -1,6 +1,10 @@
+import { useSetAtom } from 'jotai';
+import { helpAtom } from '../atoms';
 import { Button, Credits, Docs, Jotai, SearchButton } from '../components';
 
 export const Sidebar = ({ showDocs = false }) => {
+  const setShowHelp = useSetAtom(helpAtom);
+
   return (
     <aside className="scrollbar sticky top-0 hidden h-full max-h-screen min-h-full w-full flex-shrink-0 flex-col justify-between overflow-y-scroll overscroll-none p-8 lg:flex lg:max-w-[288px] xl:max-w-[384px] xl:p-16 2xl:max-w-[448px]">
       <div className="flex-grow">
@@ -21,35 +25,24 @@ export const Sidebar = ({ showDocs = false }) => {
               <Docs />
             </div>
           )}
+          <Button icon="help" onClick={() => setShowHelp(true)}>
+            Support
+          </Button>
           <Button icon="github" to="https://github.com/pmndrs/jotai" external>
             Repository
           </Button>
           <Button icon="npm" to="https://www.npmjs.com/package/jotai" external>
             Package
           </Button>
-          <Button
-            icon="cap"
-            to="https://egghead.io/courses/manage-application-state-with-jotai-atoms-2c3a29f0"
-            external
-          >
-            Course
-          </Button>
-          <Button
-            icon="chalkboard"
-            to="https://daishi.gumroad.com/l/learn-jotai/website_qpiwdj8"
-            external
-          >
-            Walkthrough
-          </Button>
           <Button icon="discord" to="https://discord.gg/poimandres" external>
             Community
           </Button>
-          <Button icon="twitter" to="https://twitter.com/dai_shi" external>
+          <Button icon="twitter" to="https://twitter.com/jotaijs" external>
             Updates
           </Button>
         </div>
       </div>
-      <div className="mt-8 inline-flex flex-col space-y-2 text-center">
+      <div className="mt-6 inline-flex flex-col space-y-1.5 text-center">
         <Credits />
       </div>
     </aside>

website/src/components/support-modal.js

@@ -0,0 +1,15 @@
+import { useAtom } from 'jotai';
+import { helpAtom } from '../atoms';
+import { Modal, Support } from '../components';
+
+export const SupportModal = () => {
+  const [showHelp, setShowHelp] = useAtom(helpAtom);
+
+  return (
+    <Modal isOpen={showHelp} onOpenChange={setShowHelp}>
+      <div className="rounded-xl bg-gray-100 p-4 text-sm leading-snug text-gray-700 dark:bg-gray-900 dark:text-gray-300 sm:text-base md:text-lg lg:gap-8 lg:p-8 lg:leading-normal">
+        <Support />
+      </div>
+    </Modal>
+  );
+};