@bbki.ng/site 1.2.23 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 1.3.0
+
 ## 1.2.23
 
 ## 1.2.22

package/dev-dist/sw.js

@@ -98,7 +98,7 @@ define(["./workbox-baccbcc1"], function (workbox) {
     [
       {
         url: "index.html",
-        revision: "0.clbi8di3vmg",
+        revision: "0.bokbbik67o8",
       },
     ],
     {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.2.23",
+  "version": "1.3.0",
   "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.2.6",
+    "@bbki.ng/components": "workspace:2.3.0",
     "@supabase/supabase-js": "^1.30.6",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.1.4",
+    "@bbki.ng/stylebase": "workspace:0.2.0",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/components/app_ctx_menu/LoginMenuItem.tsx

@@ -0,0 +1,32 @@
+import { useAuthed } from "@/hooks/use_authed";
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+import {
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuShortcut,
+  Link,
+} from "@bbki.ng/components";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+export const LoginMenuItem = () => {
+  const isKing = useAuthed();
+  const sess = useSupabaseSession();
+  const nav = useNavigate();
+
+  if (isKing) {
+    return <ContextMenuLabel inset>{sess?.user?.email ?? ""}</ContextMenuLabel>;
+  }
+
+  return (
+    <ContextMenuItem
+      onClick={() => {
+        nav("/login");
+      }}
+      inset
+    >
+      login
+      <ContextMenuShortcut>l</ContextMenuShortcut>
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/VersionMenuItem.tsx

@@ -0,0 +1,13 @@
+import { ContextMenuItem, Tag } from "@bbki.ng/components";
+import React from "react";
+
+export const VersionMenuItem = () => {
+  // @ts-ignore
+  const appVer = GLOBAL_BBKING_VERSION;
+
+  return (
+    <ContextMenuItem inset disabled>
+      v{appVer}
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/ViewSourceMenuItem.tsx

@@ -0,0 +1,28 @@
+import { ContextMenuItem, ContextMenuShortcut } from "@bbki.ng/components";
+import React from "react";
+import { GITHUB_REPO_ADDRESS } from "@/constants";
+
+export const ViewSourceMenuItem = () => {
+  return (
+    <ContextMenuItem
+      onClick={() => {
+        // open tagUrl in new tab
+        window.open(GITHUB_REPO_ADDRESS, "_blank");
+      }}
+    >
+      <svg
+        height="16"
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        data-view-component="true"
+        className="mr-8"
+      >
+        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+      </svg>
+      view source
+      <ContextMenuShortcut>s</ContextMenuShortcut>
+    </ContextMenuItem>
+  );
+};

package/src/components/app_ctx_menu/index.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuItem,
+} from "@bbki.ng/components";
+import { LoginMenuItem } from "@/components/app_ctx_menu/LoginMenuItem";
+import { VersionMenuItem } from "@/components/app_ctx_menu/VersionMenuItem";
+import { ViewSourceMenuItem } from "@/components/app_ctx_menu/ViewSourceMenuItem";
+
+export const AppCtxMenu = (props: { children: ReactElement }) => {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-256">
+        <LoginMenuItem />
+        <ContextMenuSeparator />
+        <VersionMenuItem />
+        <ViewSourceMenuItem />
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};

package/src/demo/DemoMenu.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@bbki.ng/components";
+
+export function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>Right click here</ContextMenuTrigger>
+      <ContextMenuContent className="w-256">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/main.tsx

@@ -7,6 +7,7 @@ import "@bbki.ng/components/style";
 import App from "./app";
 import "./main.css";
 import Logger from "@/components/Logger";
+import { AppCtxMenu } from "@/components/app_ctx_menu";
 
 const container = document.getElementById("root") as Element;
 const root = createRoot(container);
@@ -14,7 +15,9 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <Router>
-      <App />
+      <AppCtxMenu>
+        <App />
+      </AppCtxMenu>
       <Toaster />
       <Logger />
       <ReloadPrompt />

package/src/pages/cover/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { CenterLinkList } from "@/components";
+import { ContextMenuDemo } from "@/demo/DemoMenu";
 
 export const Cover = (props: { className: string }) => {
   return (