Nanopub

.github/workflows/pr.yaml

@@ -1,5 +1,8 @@
 name: Publish Extension
-on: pull_request
+
+on:
+  pull_request:
+  workflow_dispatch:
 
 env:
   AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

package.json

@@ -26,6 +26,7 @@
     "widgets"
   ],
   "dependencies": {
+    "@nanopub/sign": "^0.1.4",
     "@samepage/external": "^0.71.10",
     "@tldraw/tldraw": "^2.0.0-alpha.12",
     "contrast-color": "^1.0.1",

src/components/Export.tsx

@@ -50,6 +50,8 @@ import localStorageSet from "roamjs-components/util/localStorageSet";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import createPage from "roamjs-components/writes/createPage";
 import { createInitialTldrawProps } from "../utils/createInitialTldrawProps";
+import { render as renderNanopub } from "./nanopub/ExportNanopub";
+import { OnloadArgs } from "roamjs-components/types";
 
 const ExportProgress = ({ id }: { id: string }) => {
   const [progress, setProgress] = useState(0);
@@ -99,6 +101,7 @@ const EXPORT_DESTINATIONS = [
   { id: "app", label: "Store in Roam", active: false },
   { id: "samepage", label: "Store with SamePage", active: false },
   { id: "github", label: "Send to GitHub", active: true },
+  { id: "nanopub", label: "Publish as Nanopub", active: true },
 ];
 const SEND_TO_DESTINATIONS = ["page", "graph"];
 
@@ -525,6 +528,7 @@ const ExportDialog: ExportDialogComponent = ({
               items={exportTypes.map((e) => e.name)}
               activeItem={activeExportType}
               onItemSelect={(et) => setActiveExportType(et)}
+              disabled={activeExportType === "nanopub"}
             />
           </Label>
           <div>
@@ -646,6 +650,16 @@ const ExportDialog: ExportDialogComponent = ({
                   const exportType = exportTypes.find(
                     (e) => e.name === activeExportType
                   );
+
+                  if (activeExportDestination === "nanopub") {
+                    const allResults =
+                      typeof results === "function"
+                        ? await results(isSamePageEnabled)
+                        : results || [];
+                    handleNanopubExport(allResults, getExtensionAPI());
+                    return;
+                  }
+
                   if (exportType && window.RoamLazy) {
                     setDialogOpen(true);
                     setLoading(false);
@@ -804,6 +818,18 @@ const ExportDialog: ExportDialogComponent = ({
     </>
   );
 
+  const handleNanopubExport = (
+    results: Result[],
+    extensionAPI: OnloadArgs["extensionAPI"]
+  ) => {
+    onClose();
+    renderNanopub({
+      results,
+      onClose: () => {},
+      extensionAPI,
+    });
+  };
+
   return (
     <>
       <Dialog

src/components/QueryEditor.tsx

@@ -437,6 +437,7 @@ type QueryEditorComponent = (props: {
   setHasResults?: () => void;
   hideCustomSwitch?: boolean;
   showAlias?: boolean;
+  hideQueryButton?: boolean;
 }) => JSX.Element;
 
 const QueryEditor: QueryEditorComponent = ({
@@ -445,6 +446,7 @@ const QueryEditor: QueryEditorComponent = ({
   setHasResults,
   hideCustomSwitch,
   showAlias,
+  hideQueryButton,
 }) => {
   useEffect(() => {
     const previewQuery = ((e: CustomEvent) => {
@@ -896,7 +898,10 @@ const QueryEditor: QueryEditorComponent = ({
             onBlur={() => setShowDisabledMessage(false)}
             text={"Query"}
             onClick={disabledMessage ? undefined : onQuery}
-            className={disabledMessage ? "bp3-disabled" : ""}
+            className={`
+              ${disabledMessage ? "bp3-disabled" : ""}
+              ${hideQueryButton ? "hidden" : ""}
+            `}
             style={{
               maxHeight: 32,
             }}

src/components/SettingsDialog.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  Dialog,
+  Button,
+  Classes,
+  IconName,
+  MaybeElement,
+} from "@blueprintjs/core";
+import renderOverlay from "roamjs-components/util/renderOverlay";
+
+type SelectItem = {
+  id: string;
+  text: string;
+  icon?: IconName | MaybeElement;
+  onClick: () => void;
+};
+
+type SelectDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  items: SelectItem[];
+  errorMessage?: string;
+  width?: string;
+};
+
+const SelectDialog = ({
+  isOpen,
+  onClose,
+  title,
+  items,
+  errorMessage,
+  width = "20rem",
+}: SelectDialogProps) => {
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onClose}
+      canOutsideClickClose
+      canEscapeKeyClose
+      className="roamjs-canvas-dialog"
+      style={{ width }}
+    >
+      <div className={`${Classes.DIALOG_BODY} py-4 px-0 m-0`}>
+        <div className="flex flex-col">
+          <div className="text-lg font-bold p-2 mb-2 mx-5 mt-0">{title}</div>
+          <button
+            // Visually hidden button to catch initial focus
+            // this allows the Dialog to be called via command palette WITH the keyboard
+            // then use keyboard arrow keys to navigate
+            className="sr-only"
+            tabIndex={0}
+            aria-hidden="true"
+          />
+          {items.length > 0 ? (
+            items.map((item, i) => (
+              <div key={item.id} className="flex items-center">
+                <Button
+                  minimal
+                  text={item.text}
+                  className="p-2 px-7 focus:outline-none focus:bg-gray-300 justify-start flex-grow"
+                  icon={item.icon}
+                  style={{
+                    caretColor: "transparent",
+                  }}
+                  onClick={() => {
+                    item.onClick();
+                    onClose();
+                  }}
+                />
+              </div>
+            ))
+          ) : (
+            <div className="p-4 text-center">
+              {errorMessage || "No items available"}
+            </div>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export const renderSelectDialog = (props: SelectDialogProps) =>
+  renderOverlay({ Overlay: SelectDialog, props });