feat(feed): add description and rules

src/components/post/post.module.css

@@ -368,6 +368,10 @@
   text-align: right;
 }
 
+.capcodeMod {
+  color: var(--post-capcode-mod-text-color) !important;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/components/post/post.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Comment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
@@ -12,7 +11,7 @@ import styles from './post.module.css';
 import Markdown from '../markdown';
 import Media from '../media';
 
-const ReplyDesktop = ({ reply }: Comment) => {
+const ReplyDesktop = ({ reply }: any) => {
   const { t } = useTranslation();
   const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
@@ -102,10 +101,11 @@ const ReplyDesktop = ({ reply }: Comment) => {
   );
 };
 
-const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
+const PostDesktop = ({ post, showAllReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
 
   const isInPostPage = isPostPageView(useLocation().pathname, useParams());
 
@@ -170,19 +170,21 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
         </span>
         {title && <span className={styles.subject}>{displayTitle} </span>}
         <span className={styles.nameBlock}>
-          <span className={styles.name}>{displayName || 'Anonymous'} </span>
+          <span className={`${styles.name} ${(isDescription || isRules) && styles.capcodeMod}`}>{displayName || 'Anonymous'} </span>
-          <span className={styles.userAddress}>(u/{shortAddress}) </span>
+          {!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress}) </span>}
         </span>
         <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
         <span className={styles.postNum}>
-          <span className={styles.postNumLink}>
+          {!(isDescription || isRules) && (
-            <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
+            <span className={styles.postNumLink}>
-              c/
+              <Link to={`/p/${subplebbitAddress}/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
-            </Link>
+                c/
-            <span className={styles.replyToPost} title={t('reply_to_post')}>
+              </Link>
-              {shortCid}
+              <span className={styles.replyToPost} title={t('reply_to_post')}>
+                {shortCid}
+              </span>
             </span>
-          </span>
+          )}
           {pinned && (
             <span className={styles.stickyIconWrapper}>
               <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -194,7 +196,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
             </span>
           )}
           <span className={styles.replyButton}>
-            [<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
+            [<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{t('reply')}</Link>]
           </span>
         </span>
         <span className={styles.postMenuBtn}>▶</span>
@@ -211,7 +213,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
           )}
         </blockquote>
       )}
-      {(replies.length > 5 || pinned) && !isInPostPage && (
+      {(replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
         <span className={styles.summary}>
           <span className={styles.expandButtonWrapper}>
             <span className={styles.expandButton} />
@@ -233,7 +235,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
   );
 };
 
-const ReplyMobile = ({ reply }: Comment) => {
+const ReplyMobile = ({ reply }: any) => {
   const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
   const { displayName, shortAddress } = author || {};
 
@@ -288,10 +290,11 @@ const ReplyMobile = ({ reply }: Comment) => {
   );
 };
 
-const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
+const PostMobile = ({ post, showAllReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
+  const { isDescription, isRules } = post || {}; // custom properties, not from api
 
   const linkCount = useCountLinksInReplies(post);
   const isInPostPage = isPostPageView(useLocation().pathname, useParams());
@@ -317,8 +320,8 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
                 ...
               </span>
               <span className={styles.nameBlock}>
-                <span className={styles.name}>{displayName || 'Anonymous'} </span>
+                <span className={`${styles.name} ${(isDescription || isRules) && styles.capcodeMod}`}>{displayName || 'Anonymous'} </span>
-                <span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>
+                {!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>}
                 {title && (
                   <>
                     <br />
@@ -327,8 +330,13 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
                 )}
               </span>
               <span className={styles.dateTimePostNum}>
-                {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
+                {getFormattedDate(timestamp)}{' '}
-                <span className={styles.replyToPost}>{shortCid}</span>
+                {!(isDescription || isRules) && (
+                  <>
+                    <span className={styles.linkToPost}>c/</span>
+                    <span className={styles.replyToPost}>{shortCid}</span>
+                  </>
+                )}
               </span>
             </div>
             {hasThumbnail && (
@@ -357,7 +365,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
           {!isInPostPage && (
             <div className={styles.postLink}>
               <span className={styles.info}>
-                {replyCount} Replies
+                {replyCount > 0 && `${replyCount} Replies`}
                 {linkCount > 0 && ` / ${linkCount} Links`}
               </span>
               <Link to={`/p/${subplebbitAddress}/c/${cid}`} className='button'>
@@ -380,7 +388,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
 
 interface PostProps {
   index?: number;
-  post: Comment;
+  post: any;
   showAllReplies?: boolean;
 }
 

src/themes.css

@@ -100,6 +100,9 @@
   --post-mobile-file-info-text-color: #707070;
   --post-mobile-content-font-size: 11pt;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: purple;
+
   /* quotelink */
   --post-quotelink-text-color: navy;
   --post-quotelink-text-color-hover: red;
@@ -218,6 +221,9 @@
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: purple;
+
   /* quotelink */
   --post-quotelink-text-color: #d00;
   --post-quotelink-text-color-hover: #d00;
@@ -314,6 +320,9 @@
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: purple;
+
   /* quotelink */
   --post-quotelink-text-color: navy;
   --post-quotelink-text-color-hover: red;
@@ -423,6 +432,9 @@
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: purple;
+
   /* quotelink */
   --post-quotelink-text-color: #d00;
   --post-quotelink-text-color-hover: #d00;
@@ -532,6 +544,9 @@
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: #81a2be;
+
   /* quotelink */
   --post-quotelink-text-color: #5f89ac;
   --post-quotelink-text-color-hover: #81a2be;
@@ -635,6 +650,9 @@
   --post-mobile-content-font-size: 11pt;
   --post-mobile-border-bottom: 1px solid #ccc;
 
+  /* post capcodes */
+  --post-capcode-mod-text-color: #f60;
+
   /* quotelink */
   --post-quotelink-text-color: #f60;
   --post-quotelink-text-color-hover: #f30;

src/views/subplebbit/subplebbit.module.css

@@ -1,13 +1,3 @@
-.debug {
+.footer {
-  position: fixed;
+  padding-top: 10px;
-  top: 50px;
-  right: 0;
-  padding: 0.5em;
-}
-
-.debug select {
-  margin: 2px;
-  border: var(--select-border);
-  background-color: var(--select-background-color);
-  color: var(--select-color);
 }

src/views/subplebbit/subplebbit.tsx

@@ -18,7 +18,36 @@ const Subplebbit = () => {
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { shortAddress, state, title } = subplebbit || {};
+  const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
+
+  const descriptionPost = useMemo(
+    () => ({
+      isDescription: true,
+      subplebbitAddress,
+      timestamp: createdAt,
+      author: { displayName: '## Board Mods' },
+      content: description,
+      link: suggested?.avatarUrl,
+      title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!',
+      pinned: true,
+      locked: true,
+    }),
+    [subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress],
+  );
+
+  const rulesPost = useMemo(
+    () => ({
+      isRules: true,
+      subplebbitAddress,
+      timestamp: createdAt,
+      author: { displayName: '## Board Mods' },
+      content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
+      title: 'Rules',
+      pinned: true,
+      locked: true,
+    }),
+    [subplebbitAddress, createdAt, rules],
+  );
 
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
@@ -56,6 +85,12 @@ const Subplebbit = () => {
 
   return (
     <div className={styles.content}>
+      {createdAt && (
+        <>
+          {rules && rules.length > 0 && <Post post={rulesPost} />}
+          {description && description.length > 0 && <Post post={descriptionPost} />}
+        </>
+      )}
       <Virtuoso
         increaseViewportBy={{ bottom: 1200, top: 1200 }}
         totalCount={feed?.length || 0}