feat: add FAQ page

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",

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 = () => {
       <Routes>
         <Route element={<GlobalLayout />}>
           <Route path='/' element={<Home />} />
+          <Route path='/faq' element={<FAQ />} />
+          <Route path='*' element={<NotFound />} />
+
           <Route element={<BoardLayout />}>
             <Route path='/p/:subplebbitAddress' element={<Board />} />
             <Route path='/p/:subplebbitAddress/settings' element={<Board />} />
@@ -108,7 +112,6 @@ const App = () => {
             <Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
             <Route path='/profile/:accountCommentIndex/settings' element={<PendingPost />} />
           </Route>
-          <Route path='*' element={<NotFound />} />
         </Route>
       </Routes>
     </div>

src/components/post-desktop/post-desktop.tsx

@@ -107,7 +107,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
                 </span>
               }
               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)}
             />
             ){' '}
           </>

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';

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;
+  }
+}

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 (
+    <div className={styles.wrapper}>
+      <div className={styles.content}>
+        <HomeLogo />
+        <div className={`${styles.box} ${styles.infoBox}`}>
+          <div className={styles.boxBar}>
+            <h2>Frequently Asked Questions</h2>
+          </div>
+          <div className={styles.boxContent}>
+            Welcome to Plebchan's <strong>F</strong>requently <strong>A</strong>sked <strong>Q</strong>uestions page. Please remember that Plebchan does <i>not</i> have
+            global admins or rules.
+          </div>
+        </div>
+        <div className={styles.columns}>
+          <div className={`${styles.box} ${styles.leftBox}`}>
+            <div className={styles.boxBar}>
+              <h2>Questions</h2>
+            </div>
+            <div className={styles.boxContent}>
+              <ul className={styles.list}>
+                <li>
+                  <strong>
+                    <HashLink to='#basics'>Basics</HashLink>
+                  </strong>
+                  <ul>
+                    <li>
+                      <HashLink to='#whatplebchan'>What is Plebchan?</HashLink>
+                    </li>
+                    <ul>
+                      <li>
+                        <HashLink to='#howaccess'>How do I access the boards?</HashLink>
+                      </li>
+                    </ul>
+                    <li>
+                      <HashLink to='#whatbasics'>What should I know before I post?</HashLink>
+                    </li>
+                    <ul>
+                      <li>
+                        <HashLink to='#postanon'>How do I post anonymously?</HashLink>
+                      </li>
+                      <li>
+                        <HashLink to='#register'>Can I register a username?</HashLink>
+                      </li>
+                      <li>
+                        <HashLink to='#howimage'>How do I post an image?</HashLink>
+                      </li>
+                      <li>
+                        <HashLink to='#uploadimage'>Can I upload an image?</HashLink>
+                      </li>
+                      <li>
+                        <HashLink to='#postimage'>Must I post an image?</HashLink>
+                      </li>
+                      <li>
+                        <HashLink to='#replyimage'>Can I reply with an image?</HashLink>
+                      </li>
+                    </ul>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className={`${styles.box} ${styles.rightBox}`}>
+            <div className={styles.boxBar}>
+              <h2 id='basics'>Basics</h2>
+            </div>
+            <div className={styles.boxContent}>
+              <dl>
+                <dt className={styles.first} id='whatplebchan'>
+                  What is Plebchan?
+                </dt>
+                <dd>
+                  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.
+                </dd>
+                <dt id='howaccess'>How do I access the boards?</dt>
+                <dd>
+                  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.
+                </dd>
+                <dt id='whatbasics'>What should I know before I post?</dt>
+                <dd>
+                  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.
+                </dd>
+                <dt id='postanon'>How do I post anonymously?</dt>
+                <dd>
+                  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.
+                </dd>
+                <dt id='register'>Can I register a username?</dt>
+                <dd>
+                  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.
+                  <br />
+                  <br />
+                  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.
+                </dd>
+                <dt id='howimage'>How do I post an image?</dt>
+                <dd>
+                  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.
+                  <br />
+                  <br />
+                  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.
+                </dd>
+                <dt id='uploadimage'>Can I upload an image?</dt>
+                <dd>
+                  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).
+                </dd>
+                <dt id='postimage'>Must I post an image?</dt>
+                <dd>
+                  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.
+                </dd>
+                <dt id='replyimage'>Can I reply with an image?</dt>
+                <dd>
+                  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.
+                </dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;

src/views/faq/index.ts

@@ -0,0 +1 @@
+export { default } from './faq';

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 = () => {
           </li>
         )}
         <li>
-          <Link
+          <Link to='/faq'>FAQ</Link>
-            to='/faq'
-            onClick={(e) => {
-              e.preventDefault();
-              alert('work in progress');
-            }}
-          >
-            FAQ
-          </Link>
         </li>
         <li>
           <a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>

src/views/home/index.ts

@@ -1 +1 @@
-export { HomeLogo, default } from './home';
+export { HomeLogo, Footer, default } from './home';

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"