feat: [closes #17] add About page

src/Bootstrap.tsx

@@ -5,8 +5,9 @@ import localforage from 'localforage'
 
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import { SettingsContext } from 'contexts/SettingsContext'
-import { Home } from 'pages/Home/'
-import { PublicRoom } from 'pages/PublicRoom/'
+import { Home } from 'pages/Home'
+import { About } from 'pages/About'
+import { PublicRoom } from 'pages/PublicRoom'
 import { UserSettings } from 'models/settings'
 import { PersistedStorageKeys } from 'models/storage'
 import { Shell } from 'components/Shell'
@@ -91,6 +92,7 @@ function Bootstrap({
                   element={<Home userId={userId} />}
                 />
               ))}
+              <Route path="/about" element={<About />} />
               <Route
                 path="/public/:roomId"
                 element={<PublicRoom userId={userId} />}

src/components/Shell/Drawer.tsx

@@ -13,6 +13,7 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import Home from '@mui/icons-material/Home'
+import QuestionMark from '@mui/icons-material/QuestionMark'
 import Brightness4Icon from '@mui/icons-material/Brightness4'
 import Brightness7Icon from '@mui/icons-material/Brightness7'
 
@@ -27,6 +28,7 @@ export interface DrawerProps extends PropsWithChildren {
   isDrawerOpen: boolean
   onDrawerClose: () => void
   onHomeLinkClick: () => void
+  onAboutLinkClick: () => void
   theme: Theme
   userPeerId: string
 }
@@ -35,6 +37,7 @@ export const Drawer = ({
   isDrawerOpen,
   onDrawerClose,
   onHomeLinkClick,
+  onAboutLinkClick,
   theme,
   userPeerId,
 }: DrawerProps) => {
@@ -97,6 +100,16 @@ export const Drawer = ({
             </ListItemButton>
           </ListItem>
         </Link>
+        <Link to="/about" onClick={onAboutLinkClick}>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                <QuestionMark />
+              </ListItemIcon>
+              <ListItemText primary="About" />
+            </ListItemButton>
+          </ListItem>
+        </Link>
         <ListItem disablePadding>
           <ListItemButton onClick={handleColorModeToggleClick}>
             <ListItemIcon>

src/components/Shell/Shell.tsx

@@ -103,6 +103,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     setIsDrawerOpen(false)
   }
 
+  const handleAboutLinkClick = () => {
+    setIsDrawerOpen(false)
+  }
+
   return (
     <ShellContext.Provider value={shellContextValue}>
       <ThemeProvider theme={theme}>
@@ -133,6 +137,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
             isDrawerOpen={isDrawerOpen}
             onDrawerClose={handleDrawerClose}
             onHomeLinkClick={handleHomeLinkClick}
+            onAboutLinkClick={handleAboutLinkClick}
             theme={theme}
             userPeerId={userPeerId}
           />

src/pages/About/About.tsx

@@ -0,0 +1,97 @@
+import { useContext, useEffect } from 'react'
+import Link from '@mui/material/Link'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+
+import { messageCharacterSizeLimit } from 'config/messaging'
+import { ShellContext } from 'contexts/ShellContext'
+
+export const About = () => {
+  const { setTitle } = useContext(ShellContext)
+
+  useEffect(() => {
+    setTitle('About')
+  }, [setTitle])
+
+  return (
+    <Box className="max-w-3xl mx-auto p-4">
+      <Typography sx={{ mb: 1 }}>
+        Chitchatter is a communication tool designed to make secure and private
+        communication accessible to all. Please{' '}
+        <Link
+          href="https://github.com/jeremyckahn/chitchatter/blob/develop/README.md"
+          target="_blank"
+        >
+          see the README
+        </Link>{' '}
+        for full project documentation.
+      </Typography>
+      <Divider sx={{ my: 2 }} />
+      <Typography
+        variant="h2"
+        sx={theme => ({
+          fontSize: theme.typography.h3.fontSize,
+          fontWeight: theme.typography.fontWeightMedium,
+          mb: 2,
+        })}
+      >
+        User Guide
+      </Typography>
+      <Typography
+        variant="h2"
+        sx={theme => ({
+          fontSize: theme.typography.h5.fontSize,
+          fontWeight: theme.typography.fontWeightMedium,
+          mb: 1.5,
+        })}
+      >
+        Chat rooms
+      </Typography>
+      <Typography sx={{ mb: 1 }}>
+        Public rooms can be joined by <strong>anyone</strong> with the room URL.
+        By default, rooms are given a random and un-guessable name. You can name
+        your room whatever you'd like, but keep in mind that simpler room names
+        are more guessable by others. For maximum security, consider using the
+        default room name.
+      </Typography>
+      <Typography sx={{ mb: 1 }}>
+        To connect to others, share the room URL with a secure tool such as{' '}
+        <Link href="https://burnernote.com/" target="_blank">
+          Burner Note
+        </Link>{' '}
+        or{' '}
+        <Link href="https://yopass.se/" target="_blank">
+          Yopass
+        </Link>
+        . You will be notified when others join the room.
+      </Typography>
+      <Typography sx={{ mb: 1 }}>
+        Chat message transcripts are erased as soon as you close the page or
+        navigate away from the room.
+      </Typography>
+      <Typography
+        variant="h2"
+        sx={theme => ({
+          fontSize: theme.typography.h5.fontSize,
+          fontWeight: theme.typography.fontWeightMedium,
+          mb: 1.5,
+        })}
+      >
+        Message Authoring
+      </Typography>
+      <Typography sx={{ mb: 1 }}>
+        Chat messages support{' '}
+        <Link href="https://github.github.com/gfm/" target="_blank">
+          GitHub-flavored Markdown
+        </Link>
+        .
+      </Typography>
+      <Typography sx={{ mb: 1 }}>
+        Press <code>Enter</code> to send a message. Press{' '}
+        <code>Shift + Enter</code> to insert a line break. Message size is
+        limited to {messageCharacterSizeLimit.toLocaleString()} characters.
+      </Typography>
+    </Box>
+  )
+}

src/pages/About/index.ts

@@ -0,0 +1 @@
+export * from './About'

src/pages/Home/Home.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
-import Link from '@mui/material/Link'
+import MuiLink from '@mui/material/Link'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import Tooltip from '@mui/material/Tooltip'
 import { v4 as uuid } from 'uuid'
@@ -42,7 +42,9 @@ export function Home({ userId }: HomeProps) {
   return (
     <Box className="Home">
       <main className="mt-6 px-4 max-w-3xl text-center mx-auto">
-        <Logo className="px-1 pb-4 mx-auto max-w-md" />
+        <Link to="/about">
+          <Logo className="px-1 pb-4 mx-auto max-w-md" />
+        </Link>
         <form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">
           <Typography sx={{ mb: 2 }}>
             Your user name:{' '}
@@ -82,7 +84,7 @@ export function Home({ userId }: HomeProps) {
         </Typography>
       </Box>
       <Tooltip title="View project source code and documentation">
-        <Link
+        <MuiLink
           href="https://github.com/jeremyckahn/chitchatter"
           target="_blank"
           sx={{ display: 'block', textAlign: 'center', color: '#fff' }}
@@ -96,23 +98,23 @@ export function Home({ userId }: HomeProps) {
           >
             <GitHubIcon sx={{ fontSize: '2em' }} />
           </IconButton>
-        </Link>
+        </MuiLink>
       </Tooltip>
       <Typography variant="body1" sx={{ textAlign: 'center' }}>
         Licensed under{' '}
-        <Link
+        <MuiLink
           href="https://github.com/jeremyckahn/chitchatter/blob/develop/LICENSE"
           target="_blank"
         >
           GPL v2
-        </Link>
+        </MuiLink>
         . Please{' '}
-        <Link
+        <MuiLink
           href="https://github.com/jeremyckahn/chitchatter/blob/develop/README.md"
           target="_blank"
         >
           read the docs
-        </Link>
+        </MuiLink>
         .
       </Typography>
     </Box>