From 980da058710c02d1fc08b841c17da2aeb151cc64 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 21 Sep 2022 03:22:52 +0100
Subject: [PATCH] feat: display banner

---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 92 +++++++++++--------
 src/components/site/SiteHeader.tsx            | 30 +++++-
 src/css/tailwind.css                          |  8 ++
 src/css/variables.css                         |  2 +
 .../dashboard/[subdomain]/settings/css.tsx    | 10 ++
 6 files changed, 103 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 6f77206b..64f0b1ac 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "busboy": "^1.6.0",
     "clsx": "^1.1.1",
     "cookie": "^0.5.0",
-    "crossbell.js": "^0.10.20",
+    "crossbell.js": "^0.10.27",
     "dayjs": "^1.11.1",
     "dotenv": "^16.0.0",
     "emoji-mart": "^5.2.0",
@@ -86,7 +86,7 @@
     "remark-stringify": "^10.0.2",
     "sortablejs": "^1.15.0",
     "ua-parser-js": "^1.0.2",
-    "unidata.js": "^0.6.21",
+    "unidata.js": "^0.7.0",
     "unified": "^10.1.2",
     "unist-builder": "^3.0.0",
     "unist-util-visit": "^4.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87837d1f..8f8d4d0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ specifiers:
   clsx: ^1.1.1
   cookie: ^0.5.0
   cross-spawn: ^7.0.3
-  crossbell.js: ^0.10.20
+  crossbell.js: ^0.10.27
   dayjs: ^1.11.1
   dotenv: ^16.0.0
   emoji-mart: ^5.2.0
@@ -106,7 +106,7 @@ specifiers:
   tailwindcss: ^3.0.24
   typescript: ^4.5.5
   ua-parser-js: ^1.0.2
-  unidata.js: ^0.6.21
+  unidata.js: ^0.7.0
   unified: ^10.1.2
   unist-builder: ^3.0.0
   unist-util-visit: ^4.1.0
@@ -150,7 +150,7 @@ dependencies:
   busboy: 1.6.0
   clsx: 1.1.1
   cookie: 0.5.0
-  crossbell.js: 0.10.20
+  crossbell.js: 0.10.27
   dayjs: 1.11.3
   dotenv: 16.0.1
   emoji-mart: 5.2.0
@@ -187,7 +187,7 @@ dependencies:
   remark-stringify: 10.0.2
   sortablejs: 1.15.0
   ua-parser-js: 1.0.2
-  unidata.js: 0.6.21
+  unidata.js: 0.7.0
   unified: 10.1.2
   unist-builder: 3.0.0
   unist-util-visit: 4.1.0
@@ -1050,6 +1050,12 @@ packages:
       '@ethersproject/logger': 5.7.0
     dev: false
 
+  /@ethersproject/networks/5.7.1:
+    resolution: {integrity: sha512-n/MufjFYv3yFcUyfhnXotyDlNdFb7onmkSy8aQERi2PjNcnWQ66xXxa3XlS8nCcA8aJKJjIIMNJTC7tu80GwpQ==}
+    dependencies:
+      '@ethersproject/logger': 5.7.0
+    dev: false
+
   /@ethersproject/pbkdf2/5.6.1:
     resolution: {integrity: sha512-k4gRQ+D93zDRPNUfmduNKq065uadC2YjMP/CqwwX5qG6R05f47boq6pLZtV/RnC4NZAYOPH1Cyo54q0c9sshRQ==}
     dependencies:
@@ -1104,8 +1110,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@ethersproject/providers/5.7.0:
-    resolution: {integrity: sha512-+TTrrINMzZ0aXtlwO/95uhAggKm4USLm1PbeCBR/3XZ7+Oey+3pMyddzZEyRhizHpy1HXV0FRWRMI1O3EGYibA==}
+  /@ethersproject/providers/5.7.1:
+    resolution: {integrity: sha512-vZveG/DLyo+wk4Ga1yx6jSEHrLPgmTt+dFv0dv8URpVCRf0jVhalps1jq/emN/oXnMRsC7cQgAF32DcXLL7BPQ==}
     dependencies:
       '@ethersproject/abstract-provider': 5.7.0
       '@ethersproject/abstract-signer': 5.7.0
@@ -1117,14 +1123,14 @@ packages:
       '@ethersproject/constants': 5.7.0
       '@ethersproject/hash': 5.7.0
       '@ethersproject/logger': 5.7.0
-      '@ethersproject/networks': 5.7.0
+      '@ethersproject/networks': 5.7.1
       '@ethersproject/properties': 5.7.0
       '@ethersproject/random': 5.7.0
       '@ethersproject/rlp': 5.7.0
       '@ethersproject/sha2': 5.7.0
       '@ethersproject/strings': 5.7.0
       '@ethersproject/transactions': 5.7.0
-      '@ethersproject/web': 5.7.0
+      '@ethersproject/web': 5.7.1
       bech32: 1.1.4
       ws: 7.4.6
     transitivePeerDependencies:
@@ -1340,6 +1346,16 @@ packages:
       '@ethersproject/strings': 5.7.0
     dev: false
 
+  /@ethersproject/web/5.7.1:
+    resolution: {integrity: sha512-Gueu8lSvyjBWL4cYsWsjh6MtMwM0+H4HvqFPZfB6dV8ctbP9zFAO73VG1cMWae0FLPCtz0peKPpZY8/ugJJX2w==}
+    dependencies:
+      '@ethersproject/base64': 5.7.0
+      '@ethersproject/bytes': 5.7.0
+      '@ethersproject/logger': 5.7.0
+      '@ethersproject/properties': 5.7.0
+      '@ethersproject/strings': 5.7.0
+    dev: false
+
   /@ethersproject/wordlists/5.6.1:
     resolution: {integrity: sha512-wiPRgBpNbNwCQFoCr8bcWO8o5I810cqO6mkdtKfLKFlLxeCWcnzDi4Alu8iyNzlhYuS9npCwivMbRWF19dyblw==}
     dependencies:
@@ -2102,8 +2118,8 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/lodash/4.14.184:
-    resolution: {integrity: sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==}
+  /@types/lodash/4.14.185:
+    resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==}
     dev: false
 
   /@types/long/4.0.2:
@@ -3806,16 +3822,16 @@ packages:
       which: 2.0.2
     dev: true
 
-  /crossbell.js/0.10.20:
-    resolution: {integrity: sha512-OdXWPA2kAETDnKzola8n1aZnwQjvu/3gIMXp4cGD7YnMTTYWALwJyvWVaTya4JnDWhX6xgAtx/ZTExKD6rlUXQ==}
+  /crossbell.js/0.10.27:
+    resolution: {integrity: sha512-qKeOsc2CK8lKJhgoAAqgikD6GTJQ9pHqygS49iKr2B/uSGkWdtGAyIeVp25HtcTH+GOW4onI9vglgGRbH4Rp1w==}
     dependencies:
       async-retry: 1.3.3
-      ethers: 5.7.0
+      ethers: 5.7.1
       fetch-undici: 3.0.1
       is-ipfs: 6.0.2
       query-string: 7.1.1
       ts-mixer: 6.0.1
-      web3-providers-ws: 1.7.5
+      web3-providers-ws: 1.8.0
     transitivePeerDependencies:
       - bufferutil
       - node-fetch
@@ -4947,8 +4963,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /ethers/5.7.0:
-    resolution: {integrity: sha512-5Xhzp2ZQRi0Em+0OkOcRHxPzCfoBfgtOQA+RUylSkuHbhTEaQklnYi2hsWbRgs3ztJsXVXd9VKBcO1ScWL8YfA==}
+  /ethers/5.7.1:
+    resolution: {integrity: sha512-5krze4dRLITX7FpU8J4WscXqADiKmyeNlylmmDLbS95DaZpBhDe2YSwRQwKXWNyXcox7a3gBgm/MkGXV1O1S/Q==}
     dependencies:
       '@ethersproject/abi': 5.7.0
       '@ethersproject/abstract-provider': 5.7.0
@@ -4965,10 +4981,10 @@ packages:
       '@ethersproject/json-wallets': 5.7.0
       '@ethersproject/keccak256': 5.7.0
       '@ethersproject/logger': 5.7.0
-      '@ethersproject/networks': 5.7.0
+      '@ethersproject/networks': 5.7.1
       '@ethersproject/pbkdf2': 5.7.0
       '@ethersproject/properties': 5.7.0
-      '@ethersproject/providers': 5.7.0
+      '@ethersproject/providers': 5.7.1
       '@ethersproject/random': 5.7.0
       '@ethersproject/rlp': 5.7.0
       '@ethersproject/sha2': 5.7.0
@@ -4978,7 +4994,7 @@ packages:
       '@ethersproject/transactions': 5.7.0
       '@ethersproject/units': 5.7.0
       '@ethersproject/wallet': 5.7.0
-      '@ethersproject/web': 5.7.0
+      '@ethersproject/web': 5.7.1
       '@ethersproject/wordlists': 5.7.0
     transitivePeerDependencies:
       - bufferutil
@@ -5998,7 +6014,7 @@ packages:
       iso-url: 1.2.1
       mafmt: 10.0.0
       multiaddr: 10.0.1
-      multiformats: 9.7.1
+      multiformats: 9.9.0
       uint8arrays: 3.1.0
     transitivePeerDependencies:
       - node-fetch
@@ -7141,6 +7157,10 @@ packages:
     resolution: {integrity: sha512-TaVmGEBt0fhxiNJMGphBfB+oGvUxFs8KgGvgl8d3C+GWtrFcvXdJ2196eg+dYhmSFClmgFfSfJEklo+SZzdNuw==}
     dev: false
 
+  /multiformats/9.9.0:
+    resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==}
+    dev: false
+
   /multimath/2.0.0:
     resolution: {integrity: sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==}
     dependencies:
@@ -9171,13 +9191,13 @@ packages:
     engines: {node: '>=12.18'}
     dev: false
 
-  /unidata.js/0.6.21:
-    resolution: {integrity: sha512-HiEG+tTJ4HXbajBm3qY6MUw1CExuQvR9aZMRjNCCzBTvI3w+SFHmD3is+e8akPNapyN7d0sI8xIwYrqFjUAtsA==}
+  /unidata.js/0.7.0:
+    resolution: {integrity: sha512-C5fOZnpJ2cXh8fgJOFUaA7iQYdJB6hRyhdMsgt7Q3KxsUszDR6gB3GMzc7U/3mpNLqglCOAU4eUCZH86diut6A==}
     dependencies:
-      '@types/lodash': 4.14.184
+      '@types/lodash': 4.14.185
       '@urql/core': 2.5.0_graphql@16.5.0
       axios: 0.27.2
-      crossbell.js: 0.10.20
+      crossbell.js: 0.10.27
       ethers: 5.6.9
       graphql: 16.5.0
       lodash: 4.17.21
@@ -9591,35 +9611,35 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
-  /web3-core-helpers/1.7.5:
-    resolution: {integrity: sha512-lDDjTks6Q6aNUO87RYrY2xub3UWTKr/RIWxpHJODEqkLxZS1dWdyliJ6aIx3031VQwsNT5HE7NvABe/t0p3iDQ==}
+  /web3-core-helpers/1.8.0:
+    resolution: {integrity: sha512-nMAVwZB3rEp/khHI2BvFy0e/xCryf501p5NGjswmJtEM+Zrd3Biaw52JrB1qAZZIzCA8cmLKaOgdfamoDOpWdw==}
     engines: {node: '>=8.0.0'}
     dependencies:
-      web3-eth-iban: 1.7.5
-      web3-utils: 1.7.5
+      web3-eth-iban: 1.8.0
+      web3-utils: 1.8.0
     dev: false
 
-  /web3-eth-iban/1.7.5:
-    resolution: {integrity: sha512-mn2W5t/1IpL8OZvzAabLKT4kvwRnZSJ9K0tctndl9sDNWkfITYQibEEhUaNNA50Q5fJKgVudHI/m0gwIVTyG8Q==}
+  /web3-eth-iban/1.8.0:
+    resolution: {integrity: sha512-4RbvUxcMpo/e5811sE3a6inJ2H4+FFqUVmlRYs0RaXaxiHweahSRBNcpO0UWgmlePTolj0rXqPT2oEr0DuC8kg==}
     engines: {node: '>=8.0.0'}
     dependencies:
       bn.js: 5.2.1
-      web3-utils: 1.7.5
+      web3-utils: 1.8.0
     dev: false
 
-  /web3-providers-ws/1.7.5:
-    resolution: {integrity: sha512-9uJNVVkIGC8PmM9kNbgPth56HDMSSsxZh3ZEENdwO3LNWemaADiQYUDCsD/dMVkn0xsGLHP5dgAy4Q5msqySLg==}
+  /web3-providers-ws/1.8.0:
+    resolution: {integrity: sha512-bcZtSifsqyJxwkfQYamfdIRp4nhj9eJd7cxHg1uUkfLJK125WP96wyJL1xbPt7qt0MpfnTFn8/UuIqIB6nFENg==}
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.4
-      web3-core-helpers: 1.7.5
+      web3-core-helpers: 1.8.0
       websocket: 1.0.34
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /web3-utils/1.7.5:
-    resolution: {integrity: sha512-9AqNOziQky4wNQadEwEfHiBdOZqopIHzQQVzmvvv6fJwDSMhP+khqmAZC7YTiGjs0MboyZ8tWNivqSO1699XQw==}
+  /web3-utils/1.8.0:
+    resolution: {integrity: sha512-7nUIl7UWpLVka2f09CMbKOSEvorvHnaugIabU4mj7zfMvm0tSByLcEu3eyV9qgS11qxxLuOkzBIwCstTflhmpQ==}
     engines: {node: '>=8.0.0'}
     dependencies:
       bn.js: 5.2.1
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 51a3edb2..a5e9c714 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -183,10 +183,30 @@ export const SiteHeader: React.FC<{
   }
 
   return (
-    <header className="border-b">
-      <div className="px-5 max-w-screen-md mx-auto">
-        <div className="flex py-10">
-          <div className="xlog-site-info flex space-x-6 items-center">
+    <header className="xlog-header border-b relative">
+      <div className="xlog-banner absolute top-0 bottom-0 left-0 right-0 -z-10 overflow-hidden">
+        {site?.banners?.[0]?.mime_type.split("/")[0] === "image" && (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            className="max-w-screen-md mx-auto object-cover h-full w-full"
+            src={site?.banners?.[0]?.address}
+            alt="banner"
+          />
+        )}
+        {site?.banners?.[0]?.mime_type.split("/")[0] === "video" && (
+          <video
+            className="max-w-screen-md mx-auto object-cover h-full w-full"
+            src={site?.banners?.[0]?.address}
+            autoPlay
+            muted
+            playsInline
+          />
+        )}
+      </div>
+      <div className="px-5 max-w-screen-md mx-auto h-full relative flex items-center flex-col">
+        <div className="mb-auto"></div>
+        <div className="flex py-10 w-full">
+          <div className="xlog-site-info flex space-x-6 items-center w-full">
             {site?.avatars?.[0] && (
               <Avatar
                 className="xlog-site-icon"
@@ -279,7 +299,7 @@ export const SiteHeader: React.FC<{
             </div>
           </div>
         </div>
-        <div className="text-sm text-gray-400 flex items-center justify-between">
+        <div className="text-sm text-gray-400 flex items-center justify-between w-full mt-auto">
           <div className="xlog-site-navigation flex items-center space-x-5">
             {leftLinks.map((link, i) => {
               return <HeaderLink link={link} key={`${link.label}${i}`} />
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index e6febd35..6f70cd28 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -255,3 +255,11 @@ textarea.input {
   @apply bg-accent;
   color: #fff;
 }
+
+.xlog-header {
+  height: var(--header-height);
+}
+
+.xlog-banner {
+  background-color: var(--banner-bg-color);
+}
diff --git a/src/css/variables.css b/src/css/variables.css
index 47d7ad5e..0b0f47a1 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -4,6 +4,8 @@
   --shadow-color-button: theme("colors.gray.300");
   --theme-color: theme("colors.indigo.600");
   --theme-color-dark: theme("colors.indigo.700");
+  --header-height: auto;
+  --header-bg-color: #fff;
   /* Accent color for form controls */
   accent-color: var(--theme-color);
 }
diff --git a/src/pages/dashboard/[subdomain]/settings/css.tsx b/src/pages/dashboard/[subdomain]/settings/css.tsx
index 1d044042..c27297c2 100644
--- a/src/pages/dashboard/[subdomain]/settings/css.tsx
+++ b/src/pages/dashboard/[subdomain]/settings/css.tsx
@@ -63,6 +63,16 @@ export default function SettingsDomainsPage() {
                   --theme-color-dark: #4338ca;
                 </span>
               </p>
+              <p>
+                <span className="bg-zinc-200 rounded-lg px-2">
+                  --header-height: auto;
+                </span>
+              </p>
+              <p>
+                <span className="bg-zinc-200 rounded-lg px-2">
+                  --header-bg-color: #fff;
+                </span>
+              </p>
               <p>
                 <span className="bg-zinc-200 rounded-lg px-2">
                   --font-fans: ui-sans-serif, system-ui, -apple-system,