From 66cc23c404f158c839bc1382aab2f0db3181a78a Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 2 Jul 2024 13:32:50 +0200 Subject: [PATCH] feat: add FAQ page --- package.json | 1 + src/app.tsx | 5 +- src/components/post-desktop/post-desktop.tsx | 2 +- src/modules.d.ts | 2 + src/views/faq/faq.module.css | 123 ++++++++++++++++ src/views/faq/faq.tsx | 145 +++++++++++++++++++ src/views/faq/index.ts | 1 + src/views/home/home.tsx | 12 +- src/views/home/index.ts | 2 +- yarn.lock | 9 +- 10 files changed, 288 insertions(+), 14 deletions(-) create mode 100644 src/views/faq/faq.module.css create mode 100644 src/views/faq/faq.tsx create mode 100644 src/views/faq/index.ts diff --git a/package.json b/package.json index db435258..2ec62b61 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react-i18next": "13.2.2", "react-markdown": "8.0.6", "react-router-dom": "6.16.0", + "react-router-hash-link": "2.4.3", "react-scripts": "5.0.1", "react-virtuoso": "4.7.8", "rehype-sanitize": "5.0.1", diff --git a/src/app.tsx b/src/app.tsx index d735a1a1..599aa91f 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -5,6 +5,7 @@ import useIsMobile from './hooks/use-is-mobile'; import styles from './app.module.css'; import Board from './views/board'; import Catalog from './views/catalog'; +import FAQ from './views/faq'; import Home from './views/home'; import NotFound from './views/not-found'; import PendingPost from './views/pending-post'; @@ -81,6 +82,9 @@ const App = () => { }> } /> + } /> + } /> + }> } /> } /> @@ -108,7 +112,6 @@ const App = () => { } /> } /> - } /> diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 9747c2c1..73635faa 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -107,7 +107,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: } content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_user_address') : t('x_posts_by_this_user_address', { number: numberOfPostsByAuthor })}`} - showTooltip={isInPostPageView || showOmittedReplies[postCid] || postReplyCount < 6} + showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)} /> ){' '} diff --git a/src/modules.d.ts b/src/modules.d.ts index 0bfc6acd..9d2f2b5d 100644 --- a/src/modules.d.ts +++ b/src/modules.d.ts @@ -8,3 +8,5 @@ declare module 'ext-name'; declare module 'lodash'; declare module 'react-draggable'; + +declare module 'react-router-hash-link'; diff --git a/src/views/faq/faq.module.css b/src/views/faq/faq.module.css new file mode 100644 index 00000000..fa6ce7d3 --- /dev/null +++ b/src/views/faq/faq.module.css @@ -0,0 +1,123 @@ +.content { + width: 100%; + height: 100%; + margin: auto; + text-align: left; + width: 750px; + min-width: 750px; +} + +.box { + position: relative; + margin-bottom: 0.5em; + padding-bottom: 0.5em; + border: 1px solid var(--homepage-box-border-color); +} + +.boxBar { + padding-left: 0.5em; + line-height: 2em; + text-transform: capitalize; +} + +.boxBar h2 { + font-size: 131%; + font-weight: 700; +} + +.boxContent { + line-height: 1.5em; + font-size: 93%; + padding: 0.5em; + padding-top: 0.25em; + padding-bottom: 0; + line-height: 1.5em; + color: #000; +} + +.infoBox { + background: var(--homepage-box-background-color); + color: var(--homepage-infobox-text-color); +} + +.infoBox .boxBar { + background: var(--homepage-box-bar-background-color); + color: var(--homepage-box-bar-text-color); +} + +.leftBox { + float: left; + width: 49.1%; + background: #efe; + color: #060; +} + +.leftBox .boxBar { + background: #9c6; + color: #060; +} + +.rightBox { + float: right; + width: 49.1%; + background: #eff; + color: #006; +} + +.rightBox .boxBar { + background: #59a; + color: #fff; +} + +.list { + margin: 1em; + margin-left: 4em; +} + +.list ul { + margin-left: 1em; + margin-bottom: .5em; +} + +.box ul li { + list-style: disc outside; +} + +.leftBox a:visited { + color: #00e; + text-decoration: underline; +} + +.rightBox dl { + margin: 1em; +} + +.rightBox .first { + padding-top: 0; +} + +.rightBox dt { + padding-top: 1em; + margin-bottom: .5em; + font-weight: 700; + color: #006; +} + +.rightBox dd { + margin-left: 1em; + padding-bottom: 1.5em; + border-bottom: solid #006 1px; +} + +@media (max-width: 640px) { + .content { + min-width: 0; + width: auto; + padding: 10px; + } + + .rightBox, .leftBox { + float: none; + width: auto; + } +} \ No newline at end of file diff --git a/src/views/faq/faq.tsx b/src/views/faq/faq.tsx new file mode 100644 index 00000000..fa7c09e2 --- /dev/null +++ b/src/views/faq/faq.tsx @@ -0,0 +1,145 @@ +import { HashLink } from 'react-router-hash-link'; +import { Footer, HomeLogo } from '../home'; +import styles from './faq.module.css'; + +const FAQ = () => { + return ( +
+
+ +
+
+

Frequently Asked Questions

+
+
+ Welcome to Plebchan's Frequently Asked Questions page. Please remember that Plebchan does not have + global admins or rules. +
+
+
+
+
+

Questions

+
+
+
    +
  • + + Basics + +
      +
    • + What is Plebchan? +
      • +
        +
      • + How do I access the boards? +
        • +
      +
    • + What should I know before I post? +
      • +
        +
      • + How do I post anonymously? +
        • +
      • + Can I register a username? +
        • +
      • + How do I post an image? +
        • +
      • + Can I upload an image? +
        • +
      • + Must I post an image? +
        • +
      • + Can I reply with an image? +
        • +
      +
    +
    • +
+
+
+
+
+

Basics

+
+
+
+
+ What is Plebchan? +
+
+ Plebchan is a serverless, adminless, decentralized 4chan alternative where any pleb can create and own unlimited boards. All data comes from the Plebbit + protocol, it's all text including links from which media is embedded, shared peer-to-peer. Users do not need to register an account before participating + in the community. +
+
How do I access the boards?
+
+ Anyone can access any board at a any time by simply knowing its address. Paste it in the search box, located in the homepage or at the top of the board + pages. Hit enter, and you will connect peer-to-peer to the board owner. Each board is completely independent and moderates itself, the board admin has + full ownership of their board. +
+
What should I know before I post?
+
+ Whatever community you decide to post to, please remember to read the rules and guidelines of that board. Each board is independent and has its own + rules and guidelines. If you are unsure about the rules, you should try to ask the board owner or the community. +
+
How do I post anonymously?
+
+ To post as "Anonymous", simply do not fill in the [Name] field when submitting content. Plebchan uses the Plebbit protocol to function, which does not + leak IP addresses of people who post. This means that when you post on Plebchan, no board admin can know your IP address, nor can the app itself. + However, the Plebbit protocol is not fully anonymous, it uses IPFS, which means your IP address is part of a public P2P swarm, similarly to BitTorrent. +
+
Can I register a username?
+
+ You already have one, it's automatically generated by the app and you can find it in the settings. It's the address of your generated account file, and + you can change it to something readable (e.g., "myname.eth") by purchasing a crypto domain like ENS (Ethereum Name Service) and resolving your account + address with it. +
+
+ By default, Anon Mode is enabled in the settings, which automatically generates and enables a new username per thread you visit. These anon mode + usernames stem from the currently active account file, which you can backup. +
+
How do I post an image?
+
+ You need a link to the image, ideally using an image hosting service, like Imgur. Paste the link to the image in the [Link] field when submitting + content. Plebchan will attempt to load the media from the link and show its type next to the [Link] field. If the link type is "webpage", the link is + not an image, and you should try another link. +
+
+ You can also post videos, audios and gifs by pasting their direct links. Plebchan also supports the following websites to embed media without a direct + link: YouTube, Twitter/X, Reddit, Twitch, TikTok, Instagram, Odysee, Bitchute, Streamable, Spotify and Soundcloud. +
+
Can I upload an image?
+
+ No, because Plebchan is a client for the Plebbit protocol, which is text-only (including links, from which media is embedded by clients). However, + Plebbit uses IPFS, so in theory Plebchan could upload media to IPFS, and then post the direct IPFS link for the media. This is not enabled on Plebchan + because loading media from IPFS is extremely slow, at the moment (because most people have slow internet). +
+
Must I post an image?
+
+ It depends on the board. Each board has its own rules, and a board owner might decide to only allow posts with images in their community. Plebchan + automatically filters out text-only threads in the catalog view, and you can disable this in the [Filters] menu. +
+
Can I reply with an image?
+
+ Yes. To reply to a thread with an image of your own, fill in the post box as you normally would, making sure to specify a direct image link (e.g., + ending in .png or .jpeg) in the "Link" field. Plebchan will attempt to load the image, and if it worked it will show the Link type as "image", next to + the field, before posting. If the Link type is "webpage", the link is not an image, and you should try another link. +
+
+
+
+
+
+
+
+ ); +}; + +export default FAQ; diff --git a/src/views/faq/index.ts b/src/views/faq/index.ts new file mode 100644 index 00000000..bed122e8 --- /dev/null +++ b/src/views/faq/index.ts @@ -0,0 +1 @@ +export { default } from './faq'; diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index fc99129b..1dc481b7 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -133,7 +133,7 @@ const downloadAppLink = (() => { const isElectron = window.isElectron === true; const commitRef = process.env.REACT_APP_COMMIT_REF; -const Footer = () => { +export const Footer = () => { const { t } = useTranslation(); return ( <> @@ -151,15 +151,7 @@ const Footer = () => { )}
  • - { - e.preventDefault(); - alert('work in progress'); - }} - > - FAQ - + FAQ
  • diff --git a/src/views/home/index.ts b/src/views/home/index.ts index 1b862780..101c8830 100644 --- a/src/views/home/index.ts +++ b/src/views/home/index.ts @@ -1 +1 @@ -export { HomeLogo, default } from './home'; +export { HomeLogo, Footer, default } from './home'; diff --git a/yarn.lock b/yarn.lock index d3742fe6..746d6bb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14038,7 +14038,7 @@ prompts@^2.0.1, prompts@^2.3.2, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.0.0, prop-types@^15.8.1: +prop-types@^15.0.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -14354,6 +14354,13 @@ react-router-dom@6.16.0: "@remix-run/router" "1.9.0" react-router "6.16.0" +react-router-hash-link@^2.4.3: + version "2.4.3" + resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz#570824d53d6c35ce94d73a46c8e98673a127bf08" + integrity sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A== + dependencies: + prop-types "^15.7.2" + react-router@6.16.0: version "6.16.0" resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.16.0.tgz#abbf3d5bdc9c108c9b822a18be10ee004096fb81"