add subplebbit stats, improve css variables

src/app.tsx

@@ -22,7 +22,7 @@ const BoardLayout = () => {
           <BoardNav address={subplebbitAddress} />
           <BoardBanner title={subplebbit.title} address={subplebbitAddress} />
           <PostForm address={subplebbitAddress} />
-          <BoardStats address={subplebbitAddress} />
+          <BoardStats address={subplebbitAddress} createdAt={subplebbit.createdAt} />
         </>
       )}
       <Outlet />

src/components/board-stats/board-stats.module.css

@@ -0,0 +1,40 @@
+.content hr {
+  width: 468px;
+  /* revert to browser styling for burichan and futaba */
+  border: var(--hr-border, revert);
+  border-top: var(--hr-border-top, revert);
+  height: var(--hr-height, revert);
+}
+
+.blotter {
+  width: 468px;
+  margin: auto;
+  line-height: 1;
+  margin-top: -1px;
+}
+
+.blotter table {
+  border-spacing: 0px;
+  width: 100%;
+  margin-top: -1px;
+  padding-left: 3px;
+}
+
+.blotter tr {
+  vertical-align: top;
+  font-size: 11px;
+}
+
+.blotter tfoot {
+  text-align: right;
+}
+
+.hideButton {
+  color: var(--button-text-color);
+  text-decoration: var(--button-text-decoration);
+}
+
+.hideButton:hover {
+  cursor: pointer;
+  color: var(--button-text-color-hover);
+}

src/components/board-stats/board-stats.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
+import styles from './board-stats.module.css';
+
+export interface BoardStatsProps {
+  address: string | undefined;
+  createdAt: number;
+}
+
+const BoardStats = ({ address, createdAt }: BoardStatsProps) => {
+  const stats = useSubplebbitStats({ subplebbitAddress: address });
+  const [showStats, setShowStats] = useState(true);
+
+  const unixToMMDDYYYY = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const month = ('0' + (date.getMonth() + 1)).slice(-2);
+    const day = ('0' + date.getDate()).slice(-2);
+    const year = date.getFullYear().toString().slice(-2);
+    return month + '/' + day + '/' + year;
+  };
+
+  const pluralize = (count: number, singular: string, plural: string) => (count === 1 ? singular : plural);
+
+  return (
+    <div className={styles.content}>
+      <hr />
+      <table className={styles.blotter}>
+        {showStats && (
+          <tbody id='blotter-msgs'>
+            <tr>
+              <td>
+                In the past hour, <span id='stat-number'>{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made{' '}
+                <span id='stat-number'>{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} / in the past day,{' '}
+                <span id='stat-number'>{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made{' '}
+                <span id='stat-number'>{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                In the past week, <span id='stat-number'>{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made{' '}
+                <span id='stat-number'>{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} / in the past month,{' '}
+                <span id='stat-number'>{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made{' '}
+                <span id='stat-number'>{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                {unixToMMDDYYYY(createdAt)} board created / since then, <span id='stat-number'>{stats.allActiveUserCount}</span>{' '}
+                {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id='stat-number'>{stats.allPostCount}</span>{' '}
+                {pluralize(stats.allPostCount, 'post', 'posts')}
+              </td>
+            </tr>
+          </tbody>
+        )}
+        <tfoot>
+          <tr>
+            <td colSpan={2}>
+              [
+              <span className={styles.hideButton} onClick={() => setShowStats(!showStats)}>
+                {showStats ? 'Hide' : 'Show Stats'}
+              </span>
+              ]
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+};
+
+export default BoardStats;

src/components/board-stats/index.ts

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

src/components/post-form/post-form.module.css

@@ -5,11 +5,11 @@
 }
 
 .togglePostForm span {
-  color: var(--post-form-toggle-text-color);
+  color: var(--button-text-color);
-  text-decoration: var(--post-form-toggle-text-decoration);
+  text-decoration: var(--button-text-decoration);
 }
 
 .togglePostForm span:hover {
   cursor: pointer;
-  color: var(--post-form-toggle-text-color-hover);
+  color: var(--button-text-color-hover);
 }

src/themes.css

@@ -15,6 +15,8 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
   --box-border-color: #800;
+  --button-text-color: #00e;
+  --button-text-color-hover: red;
   --color1: #800;
   --color2: #fca;
   --color3: #fed;
@@ -29,8 +31,6 @@
   --internal-link-text-decoration-hover: underline;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #00e;
-  --post-form-toggle-text-color-hover: red;
   --text-color: maroon;
   --text-color-on-color1: #fff;
   --text-color-on-color2: #800;
@@ -58,6 +58,8 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
   --box-border-color: #000;
+  --button-text-color: #34345c;
+  --button-text-color-hover: #d00;
   --color1: #98e;
   --color2: #98e;
   --color3: #eef2ff;
@@ -71,8 +73,6 @@
   --internal-link-text-decoration-hover: underline;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #34345c;
-  --post-form-toggle-text-color-hover: #d00;
   --text-color: #000;
   --text-color-on-color1: #000;
   --text-color-on-color2: #000;
@@ -96,6 +96,9 @@
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
   --box-border-color: #800;
+  --button-text-color: #00e;
+  --button-text-color-hover: red;
+  --button-text-decoration: underline;
   --color1: #800;
   --color2: #fca;
   --color3: #fed;
@@ -107,9 +110,6 @@
   --internal-link-text-decoration-hover: underline;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #00e;
-  --post-form-toggle-text-decoration: underline;
-  --post-form-toggle-text-color-hover: red;
   --text-color: maroon;
   --text-color-on-color1: #fff;
   --text-color-on-color2: #800;
@@ -135,6 +135,9 @@
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
   --box-border-color: #000;
+  --button-text-color: #34345c;
+  --button-text-decoration: underline;
+  --button-text-color-hover: #d00;
   --color1: #98e;
   --color2: #98e;
   --color3: #eef2ff;
@@ -146,9 +149,6 @@
   --internal-link-text-decoration-hover: underline;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #34345c;
-  --post-form-toggle-text-decoration: underline;
-  --post-form-toggle-text-color-hover: #d00;
   --text-color: #000;
   --text-color-on-color1: #000;
   --text-color-on-color2: #000;
@@ -175,6 +175,8 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
   --box-border-color: rgb(45, 47, 51);
+  --button-text-color: #81a2be;
+  --button-text-color-hover: #5f89ac;
   --color1: rgb(33, 35, 38);
   --color2: rgb(33, 35, 38);
   --hr-border: none;
@@ -184,8 +186,6 @@
   --internal-link-text-color-hover: #5f89ac;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #81a2be;
-  --post-form-toggle-text-color-hover: #5f89ac;
   --text-color: #c5c8c6;
   --text-color-standard: #c5c8c6;
   --text-color-on-color1: #c5c8c6;
@@ -209,6 +209,8 @@
   --body-font-color: #333;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
+  --button-text-color: #f60;
+  --button-text-color-hover: #f30;
   --hr-border: none;
   --hr-border-top: 1px solid #ddd;
   --hr-height: 0px;
@@ -216,7 +218,5 @@
   --internal-link-text-color-hover: #f30;
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
-  --post-form-toggle-text-color: #f60;
-  --post-form-toggle-text-color-hover: #f30;
   --text-color: #333;
 }