Shiloh/remnantchat
Shiloh/remnantchat
1
0
Fork 1
Code Issues Pull Requests Packages Projects 4 Releases Wiki Activity

feat: [closes #40] Disclaimer (#42)

Browse Source 
* feat: [#40] stand up disclaimer page
* chore: use mui-markdown for disclaimer copy
* feat: [#40] add more disclaimer copy
* feat: style lists in messages
* refactor: author About page with Markdown
* feat: improve About page formatting
This commit is contained in:
Jeremy Kahn 2022-10-16 21:49:04 -05:00 committed by GitHub
parent a82d201c66
commit ee7d528f01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 198 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
package-lock.json generated
View File

@ -24,6 +24,7 @@
"fast-memoize": "^2.5.2",
"fun-animal-names": "^0.1.1",
"localforage": "^1.10.0",
"mui-markdown": "^0.5.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.3",
@ -16562,6 +16563,18 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/markdown-to-jsx": {
"version": "7.1.7",
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
"integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==",
"peer": true,
"engines": {
"node": ">= 10"
},
"peerDependencies": {
"react": ">= 0.14.0"
}
},
"node_modules/mdast-util-definitions": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz",
@ -17608,6 +17621,20 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/mui-markdown": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-0.5.5.tgz",
"integrity": "sha512-oy+93K5GXfyo3q6DMTX85Wed1XKWAa/wOqwF8/0hgojlPEc64E/3nDZzTh0kqs68x+yax/bctaNo/7ckJHQBIA==",
"peerDependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/material": "^5.3.0",
"markdown-to-jsx": "^7.1.6",
"prism-react-renderer": "^1.2.1",
"react": ">= 17.0.2",
"react-dom": ">= 17.0.2"
}
},
"node_modules/multiaddr": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/multiaddr/-/multiaddr-10.0.1.tgz",
@ -20133,6 +20160,15 @@
"node": ">=8"
}
},
"node_modules/prism-react-renderer": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
"integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
"peer": true,
"peerDependencies": {
"react": ">=0.14.9"
}
},
"node_modules/prismjs": {
"version": "1.29.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@ -36777,6 +36813,13 @@
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.2.tgz",
"integrity": "sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA=="
},
"markdown-to-jsx": {
"version": "7.1.7",
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
"integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==",
"peer": true,
"requires": {}
},
"mdast-util-definitions": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz",
@ -37449,6 +37492,12 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"mui-markdown": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-0.5.5.tgz",
"integrity": "sha512-oy+93K5GXfyo3q6DMTX85Wed1XKWAa/wOqwF8/0hgojlPEc64E/3nDZzTh0kqs68x+yax/bctaNo/7ckJHQBIA==",
"requires": {}
},
"multiaddr": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/multiaddr/-/multiaddr-10.0.1.tgz",
@ -39088,6 +39137,13 @@
}
}
},
"prism-react-renderer": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
"integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
"peer": true,
"requires": {}
},
"prismjs": {
"version": "1.29.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"fast-memoize": "^2.5.2",
"fun-animal-names": "^0.1.1",
"localforage": "^1.10.0",
"mui-markdown": "^0.5.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.3",

2
src/Bootstrap.tsx
View File

@ -9,6 +9,7 @@ import { SettingsContext } from 'contexts/SettingsContext'
import { routes } from 'config/routes'
import { Home } from 'pages/Home'
import { About } from 'pages/About'
import { Disclaimer } from 'pages/Disclaimer'
import { Settings } from 'pages/Settings'
import { PublicRoom } from 'pages/PublicRoom'
import { UserSettings } from 'models/settings'
@ -104,6 +105,7 @@ function Bootstrap({
/>
))}
<Route path={routes.ABOUT} element={<About />} />
<Route path={routes.DISCLAIMER} element={<Disclaimer />} />
<Route
path={routes.SETTINGS}
element={<Settings userId={userId} />}

13
src/components/Shell/Drawer.tsx
View File

@ -17,6 +17,7 @@ import SettingsApplications from '@mui/icons-material/SettingsRounded'
import QuestionMark from '@mui/icons-material/QuestionMark'
import Brightness4Icon from '@mui/icons-material/Brightness4'
import Brightness7Icon from '@mui/icons-material/Brightness7'
import ReportIcon from '@mui/icons-material/Report'
import { routes } from 'config/routes'
import { SettingsContext } from 'contexts/SettingsContext'
@ -29,6 +30,7 @@ export const drawerWidth = 240
export interface DrawerProps extends PropsWithChildren {
isDrawerOpen: boolean
onAboutLinkClick: () => void
onDisclaimerClick: () => void
onDrawerClose: () => void
onHomeLinkClick: () => void
onSettingsLinkClick: () => void
@ -39,6 +41,7 @@ export interface DrawerProps extends PropsWithChildren {
export const Drawer = ({
isDrawerOpen,
onAboutLinkClick,
onDisclaimerClick,
onDrawerClose,
onHomeLinkClick,
onSettingsLinkClick,
@ -124,6 +127,16 @@ export const Drawer = ({
</ListItemButton>
</ListItem>
</Link>
<Link to={routes.DISCLAIMER} onClick={onDisclaimerClick}>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<ReportIcon />
</ListItemIcon>
<ListItemText primary="Disclaimer" />
</ListItemButton>
</ListItem>
</Link>
<ListItem disablePadding>
<ListItemButton onClick={handleColorModeToggleClick}>
<ListItemIcon>

5
src/components/Shell/Shell.tsx
View File

@ -150,6 +150,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
setIsDrawerOpen(false)
}
const handleDisclaimerLinkClick = () => {
setIsDrawerOpen(false)
}
const handleSettingsLinkClick = () => {
setIsDrawerOpen(false)
}
@ -185,6 +189,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
<Drawer
isDrawerOpen={isDrawerOpen}
onAboutLinkClick={handleAboutLinkClick}
onDisclaimerClick={handleDisclaimerLinkClick}
onDrawerClose={handleDrawerClose}
onHomeLinkClick={handleHomeLinkClick}
onSettingsLinkClick={handleSettingsLinkClick}

1
src/config/routes.ts
View File

@ -1,5 +1,6 @@
export enum routes {
ABOUT = '/about',
DISCLAIMER = '/disclaimer',
INDEX_HTML = '/index.html',
PUBLIC_ROOM = '/public/:roomId',
ROOT = '/',

6
src/index.sass
View File

@ -1,3 +1,9 @@
@tailwind base
@tailwind components
@tailwind utilities
ol
@apply pl-4 list-decimal
ul
@apply pl-4 list-disc

109
src/pages/About/About.tsx
View File

@ -1,11 +1,11 @@
import { useContext, useEffect } from 'react'
import Link from '@mui/material/Link'
import MuiMarkdown from 'mui-markdown'
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'
import { messageCharacterSizeLimit } from 'config/messaging'
import './index.sass'
export const About = () => {
const { setTitle } = useContext(ShellContext)
@ -15,83 +15,30 @@ export const 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 className="About max-w-3xl mx-auto p-4">
<MuiMarkdown>
{`
### User Guide
Chitchatter is a communication tool designed to make secure and private communication accessible to all. Please [see the README](https://github.com/jeremyckahn/chitchatter/blob/develop/README.md) for full project documentation.
#### Chat rooms
Public rooms can be joined by **anyone** 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.
To connect to others, share the room URL with a secure tool such as [Burner Note](https://burnernote.com/) or [Yopass](https://yopass.se/). You will be notified when others join the room.
Chat message transcripts are erased as soon as you close the page or navigate away from the room.
#### Message Authoring
Chat messages support [GitHub-flavored Markdown](https://github.github.com/gfm/).
Press \`Enter\` to send a message. Press \`Shift + Enter\` to insert a line break. Message size is limited to ${Intl.NumberFormat().format(
messageCharacterSizeLimit
)} characters.
`}
</MuiMarkdown>
</Box>
)
}

3
src/pages/About/index.sass Normal file
View File

@ -0,0 +1,3 @@
.About
p
@apply mb-4

76
src/pages/Disclaimer/Disclaimer.tsx Normal file
View File

@ -0,0 +1,76 @@
import { useContext, useEffect } from 'react'
import Box from '@mui/material/Box'
import MuiMarkdown from 'mui-markdown'
import { ShellContext } from 'contexts/ShellContext'
import './index.sass'
export const Disclaimer = () => {
const { setTitle } = useContext(ShellContext)
useEffect(() => {
setTitle('Disclaimer')
}, [setTitle])
return (
<Box className="Disclaimer max-w-3xl mx-auto p-4">
<MuiMarkdown>
{`
### Interpretation and Definitions
#### Interpretation
The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
#### Definitions
For the purposes of this Disclaimer:
* **Project** (referred to as either "the Project", "We", "Us" or "Our" in this Disclaimer) refers to Chitchatter.
* **Service** refers to the Website.
* **You** means the individual accessing the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
* **Website** refers to Chitchatter, accessible from [https://chitchatter.im](https://chitchatter.im)
### Disclaimer
The information contained on the Service is for general information purposes only.
The Project assumes no responsibility for errors or omissions in the contents of the Service.
In no event shall the Project be liable for any special, direct, indirect, consequential, or incidental damages or any damages whatsoever, whether in an action of contract, negligence or other tort, arising out of or in connection with the use of the Service or the contents of the Service. The Project reserves the right to make additions, deletions, or modifications to the contents on the Service at any time without prior notice.
The Project does not warrant that the Service is free of viruses or other harmful components.
#### External Links Disclaimer
The Service may contain links to external websites that are not provided or maintained by or in any way affiliated with the Project.
Please note that the Project does not guarantee the accuracy, relevance, timeliness, or completeness of any information on these external websites.
#### Errors and Omissions Disclaimer
The information given by the Service is for general guidance on matters of interest only. Even if the Project takes every precaution to insure that the content of the Service is both current and accurate, errors can occur. Plus, given the changing nature of laws, rules and regulations, there may be delays, omissions or inaccuracies in the information contained on the Service.
The Project is not responsible for any errors or omissions, or for the results obtained from the use of this information.
#### Views Expressed Disclaimer
The Service may contain views and opinions which are those of the authors and do not necessarily reflect the official policy or position of any other author, agency, organization, employer or company, including the Project.
Messages sent by users are their sole responsibility and the users will take full responsibility, liability and blame for any libel or litigation that results from something written in or as a direct result of something written in a message. The Project is not liable for any messages sent by users.
#### No Responsibility Disclaimer
In no event shall the Project or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever arising out of or in connection with your access or use or inability to access or use the Service.
#### "Use at Your Own Risk" Disclaimer
All information in the Service is provided "as is", with no guarantee of completeness, accuracy, timeliness or of the results obtained from the use of this information, and without warranty of any kind, express or implied, including, but not limited to warranties of performance, merchantability and fitness for a particular purpose.
The Project will not be liable to You or anyone else for any decision made or action taken in reliance on the information given by the Service or for any consequential, special or similar damages, even if advised of the possibility of such damages.
`}
</MuiMarkdown>
</Box>
)
}

6
src/pages/Disclaimer/index.sass Normal file
View File

@ -0,0 +1,6 @@
.Disclaimer
ul
@apply my-4
p
@apply mb-4

1
src/pages/Disclaimer/index.ts Normal file
View File

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