feat: add board-banner

src/app.tsx

@@ -6,6 +6,7 @@ import useTheme from './hooks/use-theme';
 import Subplebbit from './views/subplebbit';
 import { isHomeView } from './lib/utils/view-utils';
 import BoardNav from './components/board-nav';
+import BoardBanner from './components/board-banner';
 
 const App = () => {
   const [theme] = useTheme();
@@ -27,8 +28,8 @@ const App = () => {
   const boardLayout = (
     <>
       <BoardNav />
-      {/* <ImageBanner />
+      <BoardBanner />
-      <PostForm />
+      {/*<PostForm />
       <Stats /> */}
       <Outlet />
     </>

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

@@ -0,0 +1,34 @@
+.content {
+  text-align: center;
+  clear: both;
+}
+
+.bannerCnt img {
+  width: 300px;
+  height: 100px;
+  border: var(--banner-image-border);
+  max-width: 100%;
+}
+
+.boardTitle {
+  font-family: var(--board-title-font-family);
+  font-size: var(--board-title-font-size);
+  font-weight: 700;
+  letter-spacing: -2px;
+  margin-top: 0;
+  color: var(--board-title-text-color);
+}
+
+.boardAddress {
+  padding-top: 5px;
+  font-size: smaller;
+  color: var(--board-title-text-color);
+}
+
+.content hr {
+  width: 90%;
+  /* 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);
+}

src/components/board-banner/board-banner.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import styles from './board-banner.module.css';
+
+const totalBanners = 24;
+
+const ImageBanner = () => {
+  const [imagePath] = useState(() => {
+    const randomBannerIndex = Math.floor(Math.random() * totalBanners) + 1;
+    return `assets/banners/banner-${randomBannerIndex}.jpg`;
+  });
+
+  return <img src={imagePath} alt='banner' />;
+};
+
+const BoardBanner = () => {
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { address, title } = subplebbit || {};
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.bannerCnt}>
+        <ImageBanner key={subplebbitAddress} />
+      </div>
+      <div className={styles.boardTitle}>{title || `p/${address}`}</div>
+      {title && <div className={styles.boardAddress}>p/{address}</div>}
+      <hr />
+    </div>
+  );
+};
+
+export default BoardBanner;

src/components/board-banner/index.ts

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

src/components/board-nav/board-nav.tsx

@@ -57,7 +57,7 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
 
 const BoardNav = () => {
   const defaultSubplebbits = useDefaultSubplebbits();
-  const subplebbitAddress = useParams().subplebbitAddress;
+  const { subplebbitAddress } = useParams();
 
   return (
     <>

src/themes.css

@@ -2,11 +2,14 @@
   --background-base-color: #ffe;
   --background-pattern-image: url("/public/assets/background-fade.png");
   --background-text-color: #fff;
+  --banner-image-border: 1px solid #800;
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #b86;
   --boardnav-mobile-background-color: #f0e0d6;
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
   --boardnav-mobile-font-size: 10px;
+  --board-title-font-size: 28px;
+  --board-title-font-family: Tahoma, sans-serif;
   --body-font-color: maroon;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -14,8 +17,11 @@
   --color1: #800;
   --color2: #fca;
   --color3: #fed;
-  --external-link-text-color: #00f;
+  --external-link-text-color: rgb(160, 160, 180);
   --external-link-text-decoration: underline;
+  --hr-border: none;
+  --hr-border-top: 1px solid #d9bfb7;
+  --hr-height: 0px;
   --internal-link-text-color: #800;
   --internal-link-text-color-hover: #e00;
   --internal-link-text-decoration: none;
@@ -32,11 +38,15 @@
   --background-base-color: #eef2ff;
   --background-pattern-image: url("/public/assets/background-fade-blue.png");
   --background-text-color: #fff;
+  --banner-image-border: 1px solid #000;
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #89a;
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
   --boardnav-mobile-font-size: 10px;
+  --board-title-font-size: 28px;
+  --board-title-font-family: Tahoma, sans-serif;
+  --board-title-text-color: #af0a0f;
   --body-font-color: #000;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -46,6 +56,8 @@
   --color3: #eef2ff;
   --external-link-text-color: #00f;
   --external-link-text-decoration: underline;
+  --hr-border: none;
+  --hr-border-top: 1px solid #b7c5d9;
   --internal-link-text-color: #34345c;
   --internal-link-text-color-hover: #d00;
   --internal-link-text-decoration: none;
@@ -67,6 +79,7 @@
   --boardnav-mobile-background-color: #f0e0d6;
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
   --boardnav-mobile-font-size: 11pt;
+  --board-title-font-size: 32px;
   --body-font-color: maroon;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -97,6 +110,8 @@
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
   --boardnav-mobile-font-size: 11pt;
+  --board-title-font-size: 32px;
+  --board-title-text-color: #af0a0f;
   --body-font-color: #000;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -123,17 +138,23 @@
   --background-base-color: #1d1f21;
   --background-pattern-image: none;
   --background-text-color: #282a2e;
+  --banner-image-border: 1px solid #000;
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #c5c8c6;
   --boardnav-mobile-background-color: #1d1f21;
   --boardnav-mobile-border-bottom: 2px solid #282a2e;
   --boardnav-mobile-font-size: 10px;
+  --board-title-font-size: 28px;
+  --board-title-font-family: Tahoma, sans-serif;
   --body-font-color: #c5c8c6;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
   --box-border-color: rgb(45, 47, 51);
   --color1: rgb(33, 35, 38);
   --color2: rgb(33, 35, 38);
+  --hr-border: none;
+  --hr-border-top: 1px solid #282a2e;
+  --hr-height: 0px;
   --internal-link-text-color: #81a2be;
   --internal-link-text-color-hover: #5f89ac;
   --text-color: #c5c8c6;
@@ -146,14 +167,21 @@
 :root .photon {
   --background-base-color: #eee;
   --background-pattern-image: none;
+  --banner-image-border: 1px solid #000;
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #333;
   --boardnav-mobile-background-color: #ddd;
   --boardnav-mobile-border-bottom: 2px solid #ccc;
   --boardnav-mobile-font-size: 10px;
+  --board-title-font-size: 28px;
+  --board-title-font-family: Tahoma, sans-serif;
+  --board-title-text-color: #004a99;
   --body-font-color: #333;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
+  --hr-border: none;
+  --hr-border-top: 1px solid #ddd;
+  --hr-height: 0px;
   --internal-link-text-color: #f60;
   --internal-link-text-color-hover: #f30;
   --text-color: #333;