feat: moves draft logic to dev toolbar

can be defaulted to true by running `DRAFT_MODE=true npm start`

astro.config.ts

@@ -5,6 +5,7 @@ import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
 import sitemap from "@astrojs/sitemap";
 import { SITE } from "./src/config";
+import draftModeIntergration from "./src/toolbar/draftMode/draftModeIntergration";
 
 // https://astro.build/config
 export default defineConfig({
@@ -15,6 +16,7 @@ export default defineConfig({
     }),
     react(),
     sitemap(),
+    draftModeIntergration,
   ],
   markdown: {
     remarkPlugins: [

src/toolbar/draftMode/draftModeClient.js

@@ -0,0 +1,47 @@
+export default {
+  id: "draft-mode",
+  name: `Toggle Draft Mode ${
+    localStorage.getItem("DRAFT_MODE") === "true" ? "Off" : "On"
+  }`,
+  icon:
+    localStorage.getItem("DRAFT_MODE") === "true"
+      ? `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /><path d="M13.5 6.5l4 4" /></svg>`
+      : `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pencil-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10l-6 6v4h4l6 -6m1.99 -1.99l2.504 -2.504a2.828 2.828 0 1 0 -4 -4l-2.5 2.5" /><path d="M13.5 6.5l4 4" /><path d="M3 3l18 18" /></svg>`,
+  init(canvas, eventTarget) {
+    console.debug("Initrialising: setting block to TRUE");
+    let block = true;
+
+    eventTarget.addEventListener("app-toggled", event => {
+      if (!block) {
+        console.debug(
+          `Draft Mode has been toggled to  ${
+            event.detail.state ? "enabled" : "disabled"
+          } mode.`
+        );
+        localStorage.setItem("DRAFT_MODE", event.detail.state);
+        location.reload();
+      } else {
+        console.debug(
+          "App-Toggled Event blocked until initialiation is completed."
+        );
+      }
+    });
+    import.meta.hot?.on("draftMode:sync", data => {
+      const bool = data === "true";
+      if (localStorage.getItem("DRAFT_MODE") !== data) {
+        console.log(
+          "Mismatch between server mode and client mode, syncing with the Server. The window will reload."
+        );
+        localStorage.setItem("DRAFT_MODE", bool);
+        location.reload();
+      }
+      console.debug("draftMode:sync event triggered, setting state to :", bool);
+      eventTarget.dispatchEvent(
+        new CustomEvent("toggle-app", { detail: { state: bool } })
+      );
+
+      console.debug("unblocking the state and reload as init has completed");
+      block = false;
+    });
+  },
+};

src/toolbar/draftMode/draftModeIntergration.js

@@ -0,0 +1,13 @@
+import { draftModeServer } from "./draftModeServer";
+
+export default {
+  name: "Draft-Mode",
+  hooks: {
+    "astro:config:setup": ({ addDevToolbarApp }) => {
+      addDevToolbarApp("./src/toolbar/draftMode/draftModeClient.js");
+    },
+    "astro:server:setup": ({ server }) => {
+      draftModeServer(server);
+    },
+  },
+};

src/toolbar/draftMode/draftModeServer.js

@@ -0,0 +1,30 @@
+export function draftModeServer(server) {
+  let block = true;
+  if (process.env.DRAFT_MODE === undefined) {
+    console.debug("DRAFT_MODE env not set, defaulting to false");
+    process.env.DRAFT_MODE = false;
+  }
+  server.ws.on("astro-dev-toolbar:draft-mode:toggled", data => {
+    if (!block) {
+      console.debug(
+        `Draft Mode has been toggled to ${data.state ? "enabled" : "disabled"}!`
+      );
+      process.env.DRAFT_MODE = data.state;
+    } else {
+      console.debug("still initialising, action blocked");
+    }
+  });
+  server.ws.on("astro-dev-toolbar:draft-mode:initialized", () => {
+    console.debug(
+      "Draft Mode has been initialised, removing blocks and sending sync"
+    );
+    block = false;
+    server.ws.send("draftMode:sync", process.env.DRAFT_MODE);
+  });
+  server.ws.on("connection", () => {
+    console.debug(
+      "Client has connected, initialisation will begin, blocking updates until complete."
+    );
+    block = true;
+  });
+}

src/utils/postFilters.ts

@@ -1,4 +1,5 @@
 import type { CollectionEntry } from "astro:content";
 
-export const draftFilter = ({ data }: CollectionEntry<"blog">) =>
-  import.meta.env.MODE === "development" ? true : !data.draft;
+export const draftFilter = ({ data }: CollectionEntry<"blog">) => {
+  return process.env.DRAFT_MODE === "true" || !data.draft;
+};