diff --git a/public/assets/banners/banner-20.png b/public/assets/banners/banner-20.jpg similarity index 100% rename from public/assets/banners/banner-20.png rename to public/assets/banners/banner-20.jpg diff --git a/src/app.tsx b/src/app.tsx index c1cf23b5..50c456d2 100644 --- a/src/app.tsx +++ b/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 = ( <> - {/* - + + {/* */} diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css new file mode 100644 index 00000000..fc3c8143 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx new file mode 100644 index 00000000..2be8197a --- /dev/null +++ b/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 banner; +}; + +const BoardBanner = () => { + const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { address, title } = subplebbit || {}; + + return ( +
+
+ +
+
{title || `p/${address}`}
+ {title &&
p/{address}
} +
+
+ ); +}; + +export default BoardBanner; diff --git a/src/components/board-banner/index.ts b/src/components/board-banner/index.ts new file mode 100644 index 00000000..0f24e0f6 --- /dev/null +++ b/src/components/board-banner/index.ts @@ -0,0 +1 @@ +export { default } from './board-banner'; diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 1f96c36c..22c20034 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/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 ( <> diff --git a/src/themes.css b/src/themes.css index f171bbb1..fbbd8dfd 100644 --- a/src/themes.css +++ b/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;