@bbki.ng/site 1.5.9 → 1.5.11

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.5.11
+
+## 1.5.10
+
 ## 1.5.9
 
 ## 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.4.7",
+    "@bbki.ng/components": "workspace:2.4.8",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.3.7",
+    "@bbki.ng/stylebase": "workspace:0.3.8",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/app.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
-import { Routes, Route, Outlet } from "react-router-dom";
-import { Nav, Page, NotFound } from "@bbki.ng/components";
-import { HotKeyNav, Stickers } from "./components";
+import { Outlet, Route, Routes } from "react-router-dom";
+import { Nav, NotFound, Page } from "@bbki.ng/components";
+import { HotKeyNav } from "./components";
 import { threeColWrapper } from "@/components/with_wrapper";
 import { Cover } from "./pages";
 
@@ -22,9 +22,13 @@ import {
 } from "@/global_loading_state_provider";
 import { UploadPage } from "@/pages/upload";
 import { AppCtxMenu } from "@/components/app_ctx_menu";
+import { Pochacco, PochaccoPose } from "@/components/Pochacco/Pochacco";
+import { Role, useRole } from "@/hooks/use_role";
 
 const Layout = () => {
   const { isLoading } = useContext(GlobalLoadingContext);
+  const role = useRole();
+  const isQueen = role === Role.QUEEN;
   return (
     <>
       <Page
@@ -34,6 +38,9 @@ const Layout = () => {
               paths={usePaths()}
               className="blur-cover select-none"
               loading={isLoading}
+              customLogo={
+                isQueen ? <Pochacco pose={PochaccoPose.Watching} /> : null
+              }
             />
           </AppCtxMenu>
         }

package/src/components/Pochacco/Pochacco.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Watch } from "@/components/Pochacco/watch";
+import { Idle } from "@/components/Pochacco/idle";
+
+export enum PochaccoPose {
+  Idle = "idle",
+  Watching = "watching",
+}
+
+export type PochaccoProps = {
+  size?: number;
+  pose?: PochaccoPose;
+};
+
+export const Pochacco = (props: PochaccoProps) => {
+  const { size = 48, pose = PochaccoPose.Idle } = props;
+
+  if (pose === PochaccoPose.Watching) {
+    return <Watch {...props} />;
+  }
+
+  return <Idle {...props} />;
+};

package/src/components/Pochacco/idle.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { PochaccoProps } from "@/components/Pochacco/Pochacco";
+
+export const Idle = (props: PochaccoProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.0"
+      width={props.size || 48}
+      height={props.size || 48}
+      viewBox="0 0 256.000000 256.000000"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g
+        transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+        fill="#000000"
+        stroke="none"
+      >
+        <path d="M348 2063 c-17 -43 -14 -218 5 -284 36 -120 150 -281 231 -324 20 -11 36 -22 36 -26 0 -3 -9 -31 -20 -63 -29 -84 -43 -208 -35 -306 9 -107 18 -132 47 -128 22 3 22 6 23 173 1 151 3 177 24 235 52 144 141 249 251 297 93 40 105 48 105 68 0 17 -7 20 -41 19 -75 -1 -196 -76 -271 -166 l-32 -39 -5 33 c-3 18 -11 62 -16 98 -27 161 -97 294 -215 402 -48 45 -71 48 -87 11z m82 -104 c0 -11 -4 -17 -10 -14 -5 3 -10 13 -10 21 0 8 5 14 10 14 6 0 10 -9 10 -21z m70 -60 c7 -11 9 -27 6 -36 -9 -22 -36 3 -36 33 0 30 16 31 30 3z m68 -124 c14 -30 16 -55 5 -55 -18 1 -31 17 -38 48 -8 40 16 45 33 7z m-58 -69 c4 -11 5 -25 3 -29 -7 -12 -32 24 -33 46 0 23 19 12 30 -17z m114 -132 c4 -9 4 -19 2 -21 -8 -8 -26 8 -26 23 0 19 16 18 24 -2z" />
+        <path d="M1088 1889 c-30 -17 -20 -37 34 -74 63 -42 78 -44 78 -10 0 71 -59 115 -112 84z" />
+        <path d="M1329 1841 c-61 -60 -47 -95 29 -73 20 6 56 16 80 22 50 13 56 38 16 69 -42 33 -80 27 -125 -18z" />
+        <path d="M956 1839 c-14 -11 -26 -27 -26 -35 0 -8 34 -31 75 -51 67 -33 77 -36 90 -22 28 28 -53 129 -104 129 -5 0 -20 -9 -35 -21z" />
+        <path d="M1342 1705 c3 -25 9 -30 53 -40 117 -26 236 -117 287 -221 58 -115 70 -169 76 -342 l5 -163 26 3 26 3 0 176 0 176 40 -41 c71 -73 201 -149 329 -192 82 -28 102 -30 110 -8 25 65 -20 159 -145 305 -62 71 -150 119 -284 153 -129 32 -190 59 -242 107 -60 55 -156 100 -226 107 l-59 5 4 -28z m512 -286 c31 -36 33 -49 8 -49 -10 0 -25 13 -35 29 -33 56 -15 70 27 20z m174 -76 c5 -18 -23 -16 -39 3 -11 14 -10 15 11 12 13 -1 25 -9 28 -15z m76 -59 c22 -9 20 -34 -3 -34 -21 0 -45 23 -34 33 8 9 17 9 37 1z m-59 -55 c10 -31 0 -33 -31 -5 l-29 25 27 1 c18 0 29 -6 33 -21z m155 -61 c0 -13 -27 -9 -40 7 -19 23 -1 39 21 19 10 -9 19 -21 19 -26z" />
+        <path d="M880 941 c-17 -32 -12 -89 10 -111 34 -34 80 -2 80 58 0 49 -16 72 -50 72 -19 0 -33 -7 -40 -19z" />
+        <path d="M1470 941 c-5 -11 -10 -34 -10 -51 0 -47 16 -70 50 -70 34 0 50 23 50 70 0 47 -16 70 -50 70 -19 0 -33 -7 -40 -19z" />
+        <path d="M592 897 c-86 -92 -63 -258 49 -347 96 -76 220 -107 464 -116 453 -17 694 64 744 251 22 81 7 161 -39 207 -34 33 -46 35 -60 7 -9 -16 -8 -24 4 -38 31 -35 45 -84 36 -131 -5 -25 -9 -48 -10 -52 0 -5 -17 -27 -37 -50 -43 -47 -128 -89 -218 -108 -142 -30 -534 -27 -668 4 -115 27 -196 78 -231 146 -32 62 -26 134 15 189 14 17 16 28 8 42 -13 25 -31 24 -57 -4z" />
+        <path d="M1162 824 c-40 -28 -19 -74 41 -89 58 -15 105 57 60 91 -24 18 -74 17 -101 -2z" />
+      </g>
+    </svg>
+  );
+};

package/src/components/Pochacco/watch.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { PochaccoProps } from "@/components/Pochacco/Pochacco";
+
+export const Watch = (props: PochaccoProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.0"
+    width={props.size || 48}
+    height={props.size || 48}
+    viewBox="0 0 128.000000 128.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g
+      transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
+      fill="#000000"
+      stroke="none"
+    >
+      <path d="M1090 1111 c0 -39 -1 -41 -42 -52 -24 -7 -68 -11 -98 -9 -90 4 -105 3 -133 -4 -15 -3 -27 -12 -27 -20 0 -10 15 -12 68 -8 53 3 76 0 103 -13 47 -25 78 -50 106 -87 22 -31 23 -39 23 -210 l0 -178 -25 0 c-36 0 -99 -34 -151 -82 -39 -36 -50 -41 -108 -45 -62 -5 -66 -4 -95 25 -21 21 -31 40 -31 61 0 22 -5 31 -16 31 -14 0 -16 -8 -11 -45 8 -79 52 -108 155 -106 59 1 62 0 62 -23 0 -15 12 -35 32 -51 28 -24 38 -26 78 -21 25 3 57 15 72 26 15 11 29 20 32 20 3 0 7 -44 8 -97 4 -144 22 -122 31 37 8 158 8 141 -1 559 -5 245 -10 325 -19 329 -9 2 -13 -9 -13 -37z m-20 -101 c0 -5 -4 -10 -9 -10 -6 0 -13 5 -16 10 -3 6 1 10 9 10 9 0 16 -4 16 -10z m21 -520 c23 -13 25 -50 3 -96 -14 -28 -19 -32 -35 -24 -19 11 -69 78 -69 93 0 8 56 36 73 37 5 0 17 -5 28 -10z" />
+      <path d="M760 1091 c-14 -27 -13 -51 3 -51 17 0 69 54 60 63 -13 14 -53 6 -63 -12z" />
+      <path d="M647 1053 c-18 -17 -5 -33 28 -33 39 0 46 14 16 30 -23 12 -35 13 -44 3z" />
+      <path d="M599 1000 c-5 -29 -2 -33 27 -35 46 -4 65 11 40 30 -22 17 -65 20 -67 5z" />
+      <path d="M607 932 c-9 -10 -27 -42 -40 -72 -14 -30 -43 -77 -66 -105 -58 -70 -83 -126 -89 -201 -4 -57 -3 -64 13 -64 28 0 101 82 118 131 l15 44 20 -45 c27 -60 46 -85 60 -76 8 5 2 26 -19 69 -54 106 -49 238 11 292 23 21 26 45 7 45 -8 0 -21 -8 -30 -18z m-117 -261 c0 -12 -20 -25 -27 -18 -7 7 6 27 18 27 5 0 9 -4 9 -9z m30 -11 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z m-60 -59 c0 -6 -4 -13 -10 -16 -5 -3 -10 1 -10 9 0 9 5 16 10 16 6 0 10 -4 10 -9z" />
+      <path d="M1020 726 c0 -28 12 -46 30 -46 25 0 33 16 20 40 -12 23 -50 27 -50 6z" />
+      <path d="M920 615 c-28 -33 13 -61 44 -29 20 20 20 30 0 38 -23 9 -30 8 -44 -9z" />
+      <path d="M770 586 c0 -26 24 -51 40 -41 14 8 13 38 -2 53 -19 19 -38 14 -38 -12z" />
+    </g>
+  </svg>
+);