Merge pull request #1 from georgeguimaraes/gg-add-menu

Add Menu item that creates the PARA root page

README.md

@@ -32,9 +32,17 @@ You can also use these slashes commands to setup the page-type property:
 
 This is my workflow. I use those properties to query for pages related to projects, areas and resources.
 
+### PARA Root Page
+
+You can create a page that lists all your Projects, Areas, Resources and Archives using the menu bar:
+
+![menu bar](./demo/menu.png)
+![PARA Root page](./demo/para-root.png)
+
 ## Demo
 
-![demo](./demo.gif)
+![demo 1](./demo/demo1.gif)
+![demo 2](./demo/demo2.gif)
 
 ## Recommendations
 

src/main.ts

@@ -1,5 +1,6 @@
 import "@logseq/libs";
 import { PageEntity } from "@logseq/libs/dist/LSPlugin.user";
+import para_template from "./para_template";
 
 async function add_property_to_page(name: string, value: string) {
   const page = (await logseq.Editor.getCurrentPage()) as PageEntity;
@@ -34,6 +35,59 @@ async function configure_page_type(type: string) {
   await add_property_to_page("page-type", type);
 }
 
+function openAddParaPropertiesMenuBar(e) {
+  const { rect } = e;
+  const template = `
+    <div id="addParaPropertiesMenu" class="hidden-picker">
+      <span><button data-on-click="createParaRootPage">Create PARA Root Page</button></span>
+    </div>
+    `;
+
+  logseq.provideStyle(`
+    #addParaPropertiesMenu {
+      font-family: Roboto, sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 8px 0;
+      border-radius: 6px;
+    }
+  `);
+
+  logseq.provideUI({
+    key: "add-para-properties-menu",
+    template: template,
+    close: "outside",
+    style: {
+      width: "200px",
+      top: `${rect.top + 40}px`,
+      left: `${rect.right - 100}px`,
+    },
+  });
+}
+
+function createBlocksFromTemplate() {
+  return para_template;
+}
+
+async function createParaRootPage() {
+  const title = "PARA";
+  const obj = (await logseq.Editor.getPage(title)) as PageEntity | null;
+  if (obj === null) {
+    const page = await logseq.Editor.createPage(
+      title,
+      {},
+      {
+        createFirstBlock: false,
+        redirect: true,
+      }
+    );
+    await logseq.Editor.insertBatchBlock(page.uuid, createBlocksFromTemplate());
+  } else {
+    logseq.Editor.openInRightSidebar(title);
+    logseq.UI.showMsg("A page called 'PARA' already exists.", "warning");
+  }
+}
+
 logseq
   .ready(() => {
     logseq.Editor.registerSlashCommand(
@@ -72,5 +126,29 @@ logseq
         configure_page_type("resource");
       }
     );
+
+    logseq.provideModel({
+      createParaRootPage: () => {
+        console.log("createParaRootPage");
+        createParaRootPage();
+      },
+      openAddParaPropertiesMenuBar: (e) => {
+        console.log("openAddParaPropertiesMenuBar");
+        openAddParaPropertiesMenuBar(e);
+      },
+    });
+
+    logseq.App.registerUIItem("toolbar", {
+      key: "add-para-properties",
+      template: `
+                <button
+                class="button" id="add-para-properties"
+                data-on-click="openAddParaPropertiesMenuBar" data-rect>
+                    <span id="add-para-properties-icon" style="font-size: 10px">
+                        PARA
+                    </span>
+                </button>
+            `,
+    });
   })
   .catch(console.error);

src/para_template.ts

@@ -0,0 +1,139 @@
+const template = [
+  {
+    content: `This is a page to gather all your Projects, Areas, Resources and Archive together.`,
+    children: [
+      {
+        content: `To list all your Projects, we use any page that has its \`page-type\` set to \`project\`, or any page that is being linked to using \`project::\`. The same goes for Areas and Resources.`,
+      },
+      {
+        content: `Archive is any page that has \`archived\` set to \`true\`.`,
+        children: [{ content: "This functionality is not implemented yet" }],
+      },
+    ],
+  },
+  {
+    content: `## Projects`,
+    children: [
+      {
+        content: `
+#+BEGIN_QUERY
+{
+  :query [:find (pull ?page [*])
+         :where
+         (or-join [?page]
+                  (and [_ :block/properties ?prop]
+                       [(get ?prop :project) ?page1]
+                       [(str ?page1) ?page11]
+                       [_ :block/refs ?page]
+
+                       [?page :block/original-name ?page2]
+                       [(str "#{\\"" ?page2 "\\"}") ?page22]
+
+                       [(= ?page22 ?page11)]
+                       )
+                  (and
+                    [?page :block/name]
+                    [?page :block/properties ?prop3]
+                    [?page :block/original-name ?page3-name]
+                    [(get ?prop3 :page-type) ?v]
+                    (or [(= ?v "project")] [(contains? ?v "project")])
+                    )
+                  )
+         ]
+ :view (fn [result]
+          [:div.flex.flex-col
+          (for [page result]
+            [:a {:href (str "#/page/" (get page :block/original-name))} (get page :block/original-name) ]
+            )
+         [:hr]
+          ]
+         )
+}
+#+END_QUERY`,
+      },
+    ],
+  },
+  {
+    content: `## Areas`,
+    children: [
+      {
+        content: `#+BEGIN_QUERY
+{
+ :query [:find (pull ?page [*])
+         :where
+         (or-join [?page]
+                  (and [_ :block/properties ?prop]
+                       [(get ?prop :area) ?page1]
+                       [(str ?page1) ?page11]
+
+                       [_ :block/refs ?page]
+                       [?page :block/original-name ?page2]
+                       [(str "#{\\"" ?page2 "\\"}") ?page22]
+
+                       [(= ?page22 ?page11)]
+                       )
+                  (and
+                    [?page :block/name]
+                    [?page :block/properties ?prop3]
+                    [?page :block/original-name ?page3-name]
+                    [(get ?prop3 :page-type) ?v]
+                    (or [(= ?v "area")] [(contains? ?v "area")])
+                    )
+                  )
+         ]
+ :view (fn [result]
+          [:div.flex.flex-col
+          (for [page result]
+            [:a {:href (str "#/page/" (get page :block/original-name))} (get page :block/original-name) ]
+            )
+         [:hr]
+          ]
+         )
+ }
+#+END_QUERY`,
+      },
+    ],
+  },
+  {
+    content: `## Resources`,
+    children: [
+      {
+        content: `#+BEGIN_QUERY
+{
+ :query [:find (pull ?page [*])
+         :where
+         (or-join [?page]
+                  (and [_ :block/properties ?prop]
+                       [(get ?prop :resource) ?page1]
+                       [(str ?page1) ?page11]
+
+                       [_ :block/refs ?page]
+                       [?page :block/original-name ?page2]
+                       [(str "#{\\"" ?page2 "\\"}") ?page22]
+
+                       [(= ?page22 ?page11)]
+                       )
+                  (and
+                    [?page :block/name]
+                    [?page :block/properties ?prop3]
+                    [?page :block/original-name ?page3-name]
+                    [(get ?prop3 :page-type) ?v]
+                    (or [(= ?v "resource")] [(contains? ?v "resource")])
+                    )
+                  )
+         ]
+ :view (fn [result]
+          [:div.flex.flex-col
+          (for [page result]
+            [:a {:href (str "#/page/" (get page :block/original-name))} (get page :block/original-name) ]
+            )
+         [:hr]
+          ]
+         )
+ }
+#+END_QUERY`,
+      },
+    ],
+  },
+];
+export default template;

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "node",
@@ -14,7 +15,7 @@
     "noEmit": true,
 
     /* Linting */
-    "strict": true,
+    "strict": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true