Doc edits for Windows users and Light/Dark Mode toggle

README.md

@@ -35,25 +35,49 @@ Read those README files before proceeding.
 
 Follow these steps CAREFULLY, or else it won't work. Also read the README files referred above before proceeding.
 
-1. If using Docker then copy `.env.example` to `.env` and then edit it to match your environment. And then just run `docker compose up -d`. Without Docker, see below ...
-2. Setup the backend in accordance with [./pb/README.md](./pb/README.md)
-3. Setup the frontend in accordance with [./sk/README.md](./sk/README.md)
+## With Docker
+This method is the most recommended method for setting up this application in most use cases, especially when customizing with Go code. 
 
-# Developing
+Make sure your Docker daemon is running then complete the following steps:
+
+1. Copy`.env.example` to `.env` and then edit it to match your environment. And then just run `docker compose up -d`.
+2. Open a new terminal and navigate to the `/sk` directory. Install dependencies by running `npx pnpm install`
+3. In the same terminal, after the dependencies are installed, run the command `npm run dev:backend` This runs `go build` in the `/pb` directory and runs `modd` for live development on a backend server
+4. Open a seperate terminal, navigate to the `/sk` directory, and run the command `npm run dev`. This starts the frontend development server.
+5. Both sides are working if you navigate to the "Hello" page on the development server and there is an API response that says "Hello World!"
+
+## With pocketbase binary
+This method is a good alternative for simple use cases that don't use either Docker or Go, and instead uses JavaScript-exclusive customizations.
+
+1. [Download the latest version of PocketBase.](https://github.com/pocketbase/pocketbase/releases/latest)
+   - The versions support Darwin, Linux, and Windows. Make sure that you download the correct version that supports itself within the OS that you are using.
+2. Extract the `pocketbase.exe` from the `.zip` file you downloaded into the `/pb` folder within your project.
+3. Set up the backend
+   - Open a new terminal, navigate to the `/sk` directory and run the command `npm run backend`
+      - *For Windows:* You will have to edit the `"backend"` script in the `./sk/package.json` file to `cd .. && cd pb && pocketbase serve --publicDir=../sk/build`
+      - *For Mac:* *Please contribute*
+4. Set up the frontend
+   - Open a new terminal, navigate to the `/sk` directory and run the following
+      - First install dependencies using `npx pnpm install`
+      - Then, `npm run dev`
+5. Extend JavaScript by [checking out this documentation here.](https://pocketbase.io/docs/js-overview/).
 
-After you've done the setup in the above two README files, run
-the backend and the frontend in dev mode (from `sk` directory).
+## With Go Tools 
+This method works if you have Go Tools installed and want to set up the machine directly on your specific OS and you don't want to use Docker.
 
-```bash
-# start the backend
-npm run dev:backend
-# and then start the frontend ...
-npm run dev
-```
+1. Verify that the Go compiler is installed on your machine by opening a terminal and running `go version`. If there is an error, set up the go compiler in acccordance with the type of OS you are using.
+2. Make sure you `go.mod` file is ready to be built by navigating to the `/pb` directory and running `go mod tidy` in the terminal, especially if the file is throwing errors.
+3. In the same terminal, run `go build`. This may take a moment
+   - If you want to use `modd` for live devlopment, after building, install the latest version by running `go install github.com/cortesi/modd/cmd/modd@latest`, test the installation by running `modd`. If successful, data migration should occur and a backend development server should be running. You can learn more by reading about it in the README located in the `/pb` directory.
+4. Open a new terminal, and run `cd sk && npm run develop`. When you open the localhost page in your browser, the “Hello” page should have an “Hello World” message coming from the  API response
+
+
+
+# Developing
 
-Now visit http://localhost:5173 (sk) or http://localhost:8090 (pb)
+Visit http://localhost:5173 (sk) or http://localhost:8090 (pb)
 
-Now making changes in the Svelte code (frontend) or Go code (backend) will show
+If you are running `modd`, making changes in the Svelte code (frontend) or Go code (backend) will show
 results (almost) immediately.
 
 # Usage

pb/README.md

@@ -7,11 +7,11 @@ There are two flavors of the backend:
 
 Out of the box, the project assumes #2 (custom compiled with my customizations).
 
-## standard (official) release of pocketbase
+## Standard (official) release of pocketbase
 
 Download from release archive from https://github.com/pocketbase/pocketbase/releases/latest, unzip it and place the `pocketbase` binary in this folder, and you're done.
 
-## custom build
+## Custom build
 
 If you would like to extend PocketBase and use it as a framework then there is a `main.go` in this folder that you can customize and build using `go build` or do live development using `modd`.
 
@@ -24,9 +24,11 @@ See https://pocketbase.io/docs/use-as-framework/ for details.
 > **Note:** For optimal set up, ensure you are using Linux (bare-metal, VM, WSL) or Docker. For other operating systems, you may run into issues, or need additional configuration.
 > A docker-compose setup is included with the project, which can be used on any OS.
 
-### TBD: For Windows users
+### For Windows users
 
-_please contribute if you are a Windows user_
+> - If you are using Docker, make sure that virtualization is enabled on your CPU. You can easily check this by opening your Task Manager, navigating to the Performance tab, and clicking the CPU button on the Performance UI. If virtualization is disabled and you wish to enable it, you'd typically do so in the BIOS or UEFI firmware settings.
+> - Make sure to update your WSL kernel to the latest version by opening up a separate command line and running `wsl --update`
+> - Also, make sure your Docker daemon is running by keeping Docker Desktop open when running the command `docker compose up -d`
 
 ### TBD: For MacOS users
 

sk/src/app.html

@@ -5,9 +5,29 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <meta name="viewport" content="width=device-width" />
     <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
-    />
+    id="theme-light-stylesheet"
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"
+    media="none" 
+  />
+  <link
+    id="theme-dark-stylesheet"
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"
+    media="none"
+  />
+  <script>
+    // IIFE to set the theme stylesheet
+    (function() {
+      const theme = localStorage.getItem('theme');
+      if (theme === 'theme-dark') {
+        document.getElementById('theme-dark-stylesheet').media = 'all';
+      } else {
+        document.getElementById('theme-light-stylesheet').media = 'all';
+      }
+    })();
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     %sveltekit.head%
   </head>
   <body>

sk/src/app.scss

@@ -27,9 +27,9 @@ html {
     max-width: 1280px;
     // no horizonal scrollbars
     overflow-x: hidden;
-    background-color: var(--background-color-dark);
+
     /* TODO: Set background color based on mode */
-    background-color: var(--background-color-dark);
+
     max-width: 1280px;
     // override default fonts
     font-family: Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,

sk/src/lib/app/themeStore.ts

@@ -0,0 +1,17 @@
+import { writable } from "svelte/store";
+
+type Theme = "theme-light" | "theme-dark";
+
+function createThemeStore() {
+  const initialValue: Theme =
+    (localStorage.getItem("theme") as Theme) || "theme-light";
+  const store = writable<Theme>(initialValue);
+
+  store.subscribe((value) => {
+    localStorage.setItem("theme", value);
+  });
+
+  return store;
+}
+
+export const theme = createThemeStore();

sk/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { onMount, afterUpdate } from "svelte";
+    import { theme } from "../app/themeStore";
+
+    /* global feather */
+
+    function toggleTheme() {
+      const newTheme = $theme === "theme-dark" ? "theme-light" : "theme-dark";
+      $theme = newTheme;
+
+      const lightStylesheet = document.getElementById("theme-light-stylesheet");
+      const darkStylesheet = document.getElementById("theme-dark-stylesheet");
+
+      if (newTheme === "theme-dark") {
+        if (darkStylesheet && "media" in darkStylesheet)
+          darkStylesheet.media = "all";
+        if (lightStylesheet && "media" in lightStylesheet)
+          lightStylesheet.media = "none";
+      } else {
+        if (lightStylesheet && "media" in lightStylesheet)
+          lightStylesheet.media = "all";
+        if (darkStylesheet && "media" in darkStylesheet)
+          darkStylesheet.media = "none";
+      }
+    }
+
+    onMount(() => {
+      feather.replace();
+    });
+
+    afterUpdate(() => {
+      feather.replace();
+    });
+  </script>
+
+
+<nav>
+  <button on:click={toggleTheme}><i data-feather="sun" /></button>
+</nav>

sk/src/routes/+layout.svelte

@@ -10,6 +10,7 @@
 
 <script lang="ts">
   import LoginBadge from "$lib/components/LoginBadge.svelte";
+  import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 
   $: title = $metadata.title ? $metadata.title + " | " + site.name : site.name;
   $: description = $metadata.description ?? site.description;
@@ -31,6 +32,7 @@
   >
   <Nav />
   <LoginBadge />
+  <ThemeToggle />
 </header>
 <main>
   {#if headline}