feat: display banner

2022-09-21 03:22:52 +01:00 · 2022-09-21 03:22:52 +01:00 · 980da05871
parent 130d021632
commit 980da05871
6 changed files with 103 additions and 43 deletions
--- 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",
--- 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
--- 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}`} />
--- 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);
+}
--- 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);
 }
--- 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,