feat: track page todos implicitly

package.json

@@ -31,7 +31,7 @@
     "semantic-release": "19.0.2",
     "typescript": "4.6.2",
     "vite": "2.8.6",
-    "vite-plugin-logseq": "^1.0.0",
+    "vite-plugin-logseq": "^1.1.0",
     "vite-plugin-windicss": "1.8.3"
   },
   "logseq": {

readme.md

@@ -2,11 +2,17 @@
 
 A simple plugin to render a progress bar to gather the overall progress of the current block or page.
 
-
 https://user-images.githubusercontent.com/584378/143900107-75c9b32e-d808-4454-9268-2c675682ac75.mp4
 
 
 ## Usage
-
+### Commands
 - Use slash command `[TODO Master] Add Progress Bar for children blocks` to add a progress bar to the parent (aka the master) block.
 - Use slash command `[TODO Master] Add Progress Bar for current page` to add a progress bar to the current page. Can be placed into page properties.
+
+### Implicit Macros based on the rendering position 
+The plugin actually has an implicit mode for `{{renderer :todomaster}}` based on the rendering position:
+- if it is at the root of the page (without a parent block) and have no children, then it will get the todos for the whole page
+- otherwise, it will render the todos for the children blocks
+
+This is useful if you want to add the plugin to your journals page template to track your daily completion.

src/progress-bar.tsx

@@ -15,12 +15,14 @@ function renderBar(num: number, marker: string) {
 
 export function ProgressBar({
   status,
+  mode,
 }: {
-  status: {
+  status?: {
     later: number;
     now: number;
     done: number;
-  } | null;
+  };
+  mode?: "page" | "block";
 }) {
   if (!status) {
     return (
@@ -45,7 +47,9 @@ export function ProgressBar({
         <div className="todo-master-progress-bar__percentage-label">
           {percentage}%
         </div>
-        <div className="todo-master-progress-bar__fraction-label">{`${done}/${total}`}</div>
+        <div className="todo-master-progress-bar__fraction-label">
+          {`${mode}:${done}/${total}`}
+        </div>
       </div>
     </div>
   );

src/register-command.tsx

@@ -41,20 +41,40 @@ const reduceToMap = (vals?: Marker[]) => {
 };
 
 async function getTODOStats(maybeUUID: string) {
-  const markers = await getBlockMarkers(maybeUUID);
-  return markers ? reduceToMap(markers) : null;
+  const result = await getBlockMarkers(maybeUUID);
+  return result
+    ? { mapping: reduceToMap(result.markers), mode: result.mode }
+    : null;
 }
 
 function checkIsUUid(maybeUUID: string) {
   return maybeUUID.length === 36 && maybeUUID.includes("-");
 }
 
-async function getBlockMarkers(maybeUUID: string): Promise<Marker[] | null> {
+async function getBlockMarkers(
+  maybeUUID: string
+): Promise<{ markers: Marker[]; mode: "page" | "block" } | null> {
   let tree: any;
+  let pageMode = false;
   if (checkIsUUid(maybeUUID)) {
     tree = await logseq.Editor.getBlock(maybeUUID, { includeChildren: true });
-  } else {
+
+    // If this is the root node and have no children
+    if (
+      tree &&
+      tree.children &&
+      tree.children.length === 0 &&
+      tree.parent?.id &&
+      tree.parent?.id === tree.page?.id
+    ) {
+      maybeUUID = tree.page?.originalName;
+      tree = null;
+    }
+  }
+
+  if (!tree) {
     tree = { children: await logseq.Editor.getPageBlocksTree(maybeUUID) };
+    pageMode = true;
   }
 
   if (!tree || !tree.children) {
@@ -74,7 +94,10 @@ async function getBlockMarkers(maybeUUID: string): Promise<Marker[] | null> {
     }
   }
   traverse(tree);
-  return res;
+  return {
+    markers: res,
+    mode: pageMode ? "page" : "block",
+  };
 }
 const pluginId = "todomaster";
 const slotElId = (slot: string) => `${pluginId}-${slot}-${logseq.baseInfo.id}`;
@@ -96,7 +119,7 @@ async function render(maybeUUID: string, slot: string, counter: number) {
       return;
     }
     const template = ReactDOMServer.renderToStaticMarkup(
-      <ProgressBar status={status} />
+      <ProgressBar status={status?.mapping} mode={status?.mode} />
     );
 
     // See https://github.com/logseq/logseq-plugin-samples/blob/master/logseq-pomodoro-timer/index.ts#L92

src/style.tcss

@@ -1,7 +1,7 @@
 /* make the extension with tcss to make sure vite does not transpile it by default */
 .todo-master-progress-bar {
   max-width: 100%;
-  height: 0.6rem;
+  height: 0.8rem;
   cursor: default;
   font-family: monospace;
   display: inline-flex !important;

vite.config.ts

@@ -2,11 +2,14 @@ import reactRefresh from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import logseqPlugin from "vite-plugin-logseq";
 
-const reactRefreshPlugin = reactRefresh();
+const reactRefreshPlugin = reactRefresh({
+  fastRefresh: false,
+});
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [reactRefreshPlugin, logseqPlugin()],
+  clearScreen: false,
   build: {
     target: "esnext",
     minify: "esbuild",