Adds progress saving, theme switching support and more

web/package.json

@@ -1,5 +1,4 @@
 {
-
   "license": "MIT",
   "scripts": {
     "dev": "vite --mode ssr",
@@ -25,6 +24,7 @@
     "daisyui": "^3.0.2",
     "eslint": "^8.56.0",
     "eslint-plugin-qwik": "^1.4.3",
+    "js-yaml": "^4.1.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4",
     "typescript": "^5.3.3",

web/public/personal-security-checklist.yml

@@ -0,0 +1 @@
+../../personal-security-checklist.yml

web/src/components/core/icon.tsx

@@ -94,6 +94,11 @@ const getSvgPath = (icon: string) => {
         vb: "0 0 512 512",
         path: "M0 72C0 49.9 17.9 32 40 32H88c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V72zM0 232c0-22.1 17.9-40 40-40H88c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V232zM128 392v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40H88c22.1 0 40 17.9 40 40zM160 72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V72zM288 232v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V232c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40zM160 392c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V392zM448 72v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40zM320 232c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V232zM448 392v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40z",
       };
+    case 'homepage':
+      return {
+        vb: "0 0 512 512",
+        path: "M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z",
+      };
     default:
       return { vb: "", path: "" }; // Default path or a placeholder icon
   }

web/src/components/furniture/nav.tsx

@@ -1,13 +1,15 @@
 
 import { component$ } from "@builder.io/qwik";
+import Icon from "~/components/core/icon";
+import { data } from '~/mock-data';
+import type { Section } from '~/types/PSC';
+import { useTheme } from '~/store/theme-store';
 
-import Icon from "../core/icon";
-
-import { data } from '../../mock-data';
-
-import type { Section } from '../../types/PSC';
 
 export default component$(() => {
+
+  const { theme, setTheme } = useTheme();
+
   return (
     <>
       <input id="my-drawer-3" type="checkbox" class="drawer-toggle" /> 
@@ -62,7 +64,14 @@ export default component$(() => {
           </ul>
           <div class="tooltip tooltip-bottom" data-tip="Theme">
             <label class="cursor-pointer grid place-items-center">
-              <input type="checkbox" value="synthwave" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
+              <input
+                type="checkbox"
+                checked={theme.theme === 'dark'}
+                onClick$={() => {
+                  setTheme(theme.theme === 'dark' ? 'light' : 'dark');
+                }}
+                class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"
+              />
               <svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
               <svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
             </label>
@@ -77,10 +86,10 @@ export default component$(() => {
           <Icon class="mr-2" icon="shield" width={16} height={16}  />
             Personal Security Checklist
           </h2>
-          <li><a href="/">Home</a></li>
+          <li><a href="/"><Icon class="mr-2" icon="homepage" width={16} height={16}  />Home</a></li>
-          <li><a href="/">GitHub</a></li>
+          <li><a href="/"><Icon class="mr-2" icon="github" width={16} height={16}  />GitHub</a></li>
           <li>
-            <a href="/checklist">Checklists</a>
+            <a href="/checklist"><Icon class="mr-2" icon="all" width={16} height={16}  />Checklists</a>
             <ul>
               {data.map((item: Section, index: number) => (
               <li key={`checklist-side-${index}`} class={`hover:bg-${item.color}-600 hover:bg-opacity-15`}>
@@ -109,10 +118,10 @@ export default component$(() => {
                 <a href="#">License</a>
               </li>
             </ul>
+            <ul>
             <li>
               <a href="#">Author</a>
               <ul>
-                <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
                 <li>
                   <a href="#">Socials</a>
@@ -137,6 +146,7 @@ export default component$(() => {
                 </li>
               </ul>
             </li>
+            </ul>
           </li>
         </ul>
       </div>

web/src/hooks/useLocalStorage.ts

@@ -0,0 +1,31 @@
+import { $, type QRL, useOnWindow, useStore } from "@builder.io/qwik";
+
+export function useLocalStorage(key: string, initialState: any): [any, QRL<(value: any) => void>]  {
+  const store = useStore({ value: initialState });
+
+  useOnWindow('load', $(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      if (!item) {
+        window.localStorage.setItem(key, JSON.stringify(initialState));
+      }
+      store.value = item ? JSON.parse(item) : initialState;
+    } catch (error) {
+      console.log(error);
+      store.value = initialState;
+    }
+  }));
+
+  const setValue$ = $((value: any) => {
+    try {
+      store.value = value;
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(value));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  });
+
+  return [store, setValue$];
+}

web/src/routes/about/index.tsx

@@ -4,35 +4,43 @@ import type { DocumentHead } from "@builder.io/qwik-city";
 
 export default component$(() => {
   return (
-    <article class="bg-base-200 bg-opacity-25 p-8 mx-auto max-w-[1200px] m-8 rounded-lg shadow-lg">
+    <div class="m-4 md:mx-16">
-      <h3>About the Author</h3>
+      <article class="bg-base-200 bg-opacity-25 p-8 mx-auto max-w-[1200px] m-8 rounded-lg shadow-lg">
-        <p>
+        <h2 class="text-2xl">About the Security Checklist</h2>
-          This project was originally started by me, Alicia Sykes- with a lot of help from the community.
+      </article>
-        </p>
+      <div class="divider"></div>
-        <br />
+      <article class="bg-base-200 bg-opacity-25 p-8 mx-auto max-w-[1200px] m-8 rounded-lg shadow-lg">
-        <p>
+        <h2 class="text-2xl">About the Author</h2>
-          I write apps which aim to help people escape big tech, secure their data,
+          <p>
-          and protect their privacy. I have a particular interest in self-hosting,
+            This project was originally started by me, Alicia Sykes- with a lot of help from the community.
-          Linux and OSINT.
+          </p>
-        </p>
+          <br />
-        <br />
+          <img class="ml-6 rounded-lg float-right" width="200" height="141" alt="Alicia Sykes Thames" src="https://i.ibb.co/s5SM1K7/DSC-0031-4.jpg" />
-        <p>
+          <p>
-          If this type of stuff interests you, I maintain several other repositories that you may also like:
+            I write apps which aim to help people escape big tech, secure their data,
-        </p>
+            and protect their privacy.
-        <br />
+          </p>
-        <ul>
+          <br />
-          <li>Web-Check - OSINT tool for analysing any website</li>
+          <p>
-          <li>Dashy - Dashboard app, for organising your self-hosted services</li>
+            I have a particular interest in self-hosting, Linux and OSINT.
-          <li>Portainer-Templates - Compiled repository of 1-click Docker apps for self-hosting</li>
+            So if this type of stuff interests you, check out these other projects that I maintain:
-          <li>AdGuardian - CLI tool for monitoring your networks traffic and AdGuard DNS stats</li>
+          </p>
-          <li>Bug-Bounties - Database of websites which accept responsible vulnerability discolsure</li>
+          <br />
-          <li>Awesome Privacy - A list of privacy-respscting software and services</li>
+          <ul class="list-disc pl-8">
-          <li>Email Comparison - Objective comparison of private/secure mail providers</li>
+            <li>Web-Check - OSINT tool for analysing any website</li>
-          <li>Git-In - Tools and resources to help beginners get into open source</li>
+            <li>Dashy - Dashboard app, for organising your self-hosted services</li>
-        </ul>
+            <li>Portainer-Templates - Compiled repository of 1-click Docker apps for self-hosting</li>
-        <p>For a full list of projects I've published, see <a href="https://apps.aliciasykes.com/">apps.aliciasykes.com</a>, or follow me on GitHub (I'm <a href="https://github.com/lissy93">Lissy93</a>).</p>
+            <li>AdGuardian - CLI tool for monitoring your networks traffic and AdGuard DNS stats</li>
+            <li>Bug-Bounties - Database of websites which accept responsible vulnerability discolsure</li>
+            <li>Awesome Privacy - A list of privacy-respscting software and services</li>
+            <li>Email Comparison - Objective comparison of private/secure mail providers</li>
+            <li>Git-In - Tools and resources to help beginners get into open source</li>
+          </ul>
+          <br />
+          <p>For a full list of projects I've published, see <a href="https://apps.aliciasykes.com/">apps.aliciasykes.com</a>, or follow me on GitHub (I'm <a href="https://github.com/lissy93">Lissy93</a>).</p>
 
-    </article>
+      </article>
+    </div>
   );
 });
 

web/src/routes/checklist/[title]/index.tsx

@@ -1,23 +1,23 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useContext } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 import { marked } from 'marked';
 
-import Icon from '../../../components/core/icon';
+import Icon from '~/components/core/icon';
-import { data } from '../../../mock-data';
+import { ChecklistContext } from '~/store/checklist-context';
-import type { Section, Priority } from '../../../types/PSC';
+import { useLocalStorage } from '~/hooks/useLocalStorage';
+import type { Section, Priority } from "~/types/PSC";
 
 export default component$(() => {
+
+  const checklists = useContext(ChecklistContext);
+
   const loc = useLocation();
-  // const endpoint = useEndpoint<{ params: { title: string } }>();
   const slug = loc.params.title;
 
-  const section: Section | undefined = data.find((item: Section) => item.slug === slug);
+  const section: Section | undefined = checklists.value.find((item: Section) => item.slug === slug);
-
-  // You can now use `title` to fetch data related to this checklist item
-  // and render it below.
 
   const getBadgeClass = (priority: Priority, precedeClass: string = '') => {
-    switch (priority) {
+    switch (priority.toLocaleLowerCase()) {
       case 'recommended':
         return `${precedeClass}success`;
       case 'optional':
@@ -37,7 +37,16 @@ export default component$(() => {
     return marked.parse(text || '', { async: false }) as string || '';
   };
 
+  const STORAGE_KEY = 'PSC_PROGRESS';
+  const [value, setValue] = useLocalStorage(STORAGE_KEY, {});
+
+  const isChecked = (point: string) => {
+    const pointId = generateId(point);
+    return value.value[pointId] || false;
+  };
+  
   return (
+    <div class="md:my-8 md:px-16 sm:px-2 rounded-md">
     <article class="bg-base-200 bg-opacity-25 p-8 mx-auto w-full max-w-[1200px] rounded-lg shadow-lg">
       <h1 class={['gap-2 text-5xl font-bold capitalize flex']}>
         <Icon height={36} width={36} icon={section?.icon || 'star'}  />
@@ -59,7 +68,18 @@ export default component$(() => {
             {section?.checklist.map((item, index) => (
               <tr key={index} class={`rounded-sm hover:bg-opacity-5 hover:bg-${getBadgeClass(item.priority)}`}>
                 <td>
-                  <input type="checkbox" class="checkbox" id={generateId(item.point)} />
+                  <input
+                    type="checkbox"
+                    class="checkbox"
+                    id={generateId(item.point)}
+                    checked={isChecked(item.point)}
+                    onClick$={() => {
+                      const id = item.point.toLowerCase().replace(/ /g, '-');
+                      const data = value.value;
+                      data[id] = !data[id];
+                      setValue(data);
+                    }}
+                  />
                 </td>
                 <td>
                   <label class="text-base font-bold" for={generateId(item.point)}>
@@ -78,6 +98,7 @@ export default component$(() => {
         </table>
       </div>
     </article>
+    </div>
   );
 });
 

web/src/routes/checklist/index.tsx

@@ -1,13 +1,16 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useContext } from "@builder.io/qwik";
 
-import { data } from '../../mock-data';
+import { ChecklistContext } from '~/store/checklist-context';
+import type { Section } from "~/types/PSC";
 
 export default component$(() => {
+  const checklists = useContext(ChecklistContext);
+
   return (
     <main class="p-8">
       <div class="join join-vertical w-full">
-        {data.map((section, index) => (
+        {checklists.value.map((section: Section, index: number) => (
-          <div key={index} class="collapse collapse-plus bg-base-200 join-item">
+          <div key={index} class={['collapse collapse-plus bg-base-200 my-4', `border-double border-2 border-${section.color}-400`]}>
             <input type="radio" name="my-accordion-3" /> 
             <div class={['collapse-title text-xl font-medium', `bg-${section.color}-400`]}>
               <h3 class="text-slate-700">{section.title}</h3>

web/src/routes/index.tsx

@@ -1,16 +1,18 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useContext } from '@builder.io/qwik';
-import type { DocumentHead } from "@builder.io/qwik-city";
+import { type DocumentHead } from "@builder.io/qwik-city";
 
 import Hero from "../components/furniture/hero";
 import SectionLinkGrid from "../components/psc/section-link-grid";
 
-import { data } from '../mock-data';
+import { ChecklistContext } from '~/store/checklist-context';
 
 export default component$(() => { 
+  const checklists = useContext(ChecklistContext);
+  
   return (
     <>
       <Hero />
-      <SectionLinkGrid sections={data} />
+      <SectionLinkGrid sections={checklists.value} />
     </>
   );
 });

web/src/routes/layout.tsx

@@ -1,9 +1,23 @@
-import { component$, Slot } from "@builder.io/qwik";
+import { component$, useContextProvider, Slot } from "@builder.io/qwik";
-import type { RequestHandler } from "@builder.io/qwik-city";
+import { routeLoader$, type RequestHandler } from "@builder.io/qwik-city";
 
 import Navbar from "../components/furniture/nav";
 import Footer from "../components/furniture/footer";
 
+import { ChecklistContext } from "../store/checklist-context";
+
+import { type Sections } from "~/types/PSC";
+import jsyaml from "js-yaml";
+
+
+export const useChecklists = routeLoader$(async () => {
+  const url = import.meta.env.DEV ? `http://localhost:5173/personal-security-checklist.yml` : '/personal-security-checklist.yml';
+  return await fetch(url)
+    .then((res) => res.text())
+    .then((res) => jsyaml.load(res) as Sections)
+    .catch(() => []);
+});
+
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   cacheControl({
     staleWhileRevalidate: 60 * 60 * 24 * 7,
@@ -12,6 +26,10 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
 };
 
 export default component$(() => {
+
+  const checklists = useChecklists();
+  useContextProvider(ChecklistContext, checklists)
+
   return (
     <>
       {/* <Header /> */}

web/src/store/checklist-context.ts

@@ -0,0 +1,8 @@
+import { type Signal } from '@builder.io/qwik';
+import { createContextId } from '@builder.io/qwik';
+
+import type { Sections } from '../types/PSC';
+
+export const ChecklistContext = createContextId<Signal<Sections>>(
+  'psc.ChecklistContext'
+);

web/src/store/theme-store.ts

@@ -0,0 +1,27 @@
+import { useStore, useOnWindow, $ } from '@builder.io/qwik';
+
+import { useLocalStorage } from '~/hooks/useLocalStorage';
+
+const STORAGE_KEY = 'PSC_THEME';
+const defaultTheme = 'dark';
+
+export const useTheme = () => {
+  const [theme, saveTheme] = useLocalStorage(STORAGE_KEY, defaultTheme);
+  const state = useStore({ theme: theme.value });
+
+  useOnWindow('load', $(() => {
+    const storedTheme = theme.value || defaultTheme;
+    state.theme = storedTheme;
+    document.getElementsByTagName('body')[0].setAttribute('data-theme', storedTheme);
+  }));
+
+  const setTheme = $((newTheme: string) => {
+    console.log('Updating Theme', newTheme);
+    saveTheme(newTheme);
+    state.theme = newTheme;
+    document.getElementsByTagName('body')[0].setAttribute('data-theme', newTheme);
+  });
+
+  return { theme: state, setTheme };
+};
+

web/src/types/PSC.ts

@@ -3,6 +3,8 @@ export interface PersonalSecurityChecklist {
   sections: Section[],
 }
 
+export type Sections = Section[];
+
 export interface Section {
   title: string,
   slug: string,

web/tailwind.config.js

@@ -40,7 +40,7 @@ module.exports = {
   },
   safelist: [
     {
-      pattern: /(bg|outline|text|tw-color)-(yellow|lime|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|red)-(200|300|400|500|600)/,
+      pattern: /(bg|outline|text|tw-color|border)-(yellow|lime|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|red)-(200|300|400|500|600)/,
       variants: ['light', 'dark', 'hover', 'focus'],
     },
     {