Updates progress view, favicon, router head and more

web/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>

web/src/components/psc/progress.tsx

@@ -4,6 +4,7 @@ import { Chart, registerables } from 'chart.js';
 import { useLocalStorage } from "~/hooks/useLocalStorage";
 import { ChecklistContext } from "~/store/checklist-context";
 import type { Priority, Sections, Section } from '~/types/PSC';
+import Icon from '~/components/core/icon';
 
 /**
  * Component for client-side user progress metrics.
@@ -23,6 +24,8 @@ export default component$(() => {
   const totalProgress = useSignal({ completed: 0, outOf: 0 });
   // Ref to the radar chart canvas
   const radarChart  = useSignal<HTMLCanvasElement>();
+  // Completion data for each section
+  const sectionCompletion =  useSignal<number[]>([]);
 
   /**
    * Calculates the users progress over specified sections.
@@ -152,6 +155,18 @@ export default component$(() => {
   }));
 
 
+  /**
+   * Calculates the percentage of completion for each section
+   */
+  useOnWindow('load', $(async () => {
+    sectionCompletion.value = await Promise.all(checklists.value.map(section => {
+      return calculateProgress([section]).then(
+        (progress) => Math.round(progress.completed / progress.outOf * 100)
+      );
+    }));
+  }));
+
+
   interface RadarChartData {
     labels: string[];
     datasets: {
@@ -306,7 +321,25 @@ export default component$(() => {
     <div class="justify-center flex-col items-center gap-6 hidden xl:flex">
       {/* Remaining Tasks */}
       <div class="p-4 rounded-box bg-front shadow-md w-96 flex-grow">
-        <p>Something else will go here....</p>
+        <ul>
+          { checklists.value.map((section: Section, index: number) => (
+              <li key={index}>
+                <a
+                  href={`/${section.slug}`}
+                  class="my-2 w-80 flex justify-between items-center tooltip"
+                  data-tip={`Completed ${sectionCompletion.value[index]}% of ${section.checklist.length} items.`}
+                >
+                <p class="text-sm m-0 flex items-center text-left gap-1 text-nowrap overflow-hidden max-w-40">
+                  <Icon icon={section.icon} width={14} />
+                  {section.title}
+                </p>
+                <div class="progress w-36">
+                  <span class={`block h-full transition bg-${section.color}-400`} style={`width: ${sectionCompletion.value[index] || 0}%;`}></span>
+                </div>
+                </a>
+              </li>
+          ))}
+        </ul>
       </div>
     </div>
   </div>

web/src/components/router-head/router-head.tsx

@@ -15,7 +15,7 @@ export const RouterHead = component$(() => {
 
       <link rel="canonical" href={loc.url.href} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+      <link rel="icon" type="image/png" href="/favicon.png" />
 
       {head.meta.map((m) => (
         <meta key={m.key} {...m} />
@@ -32,6 +32,7 @@ export const RouterHead = component$(() => {
       {head.scripts.map((s) => (
         <script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} />
       ))}
+      <script defer data-domain="security-list.js.org" src="https://no-track.as93.net/js/script.js"></script>
     </>
   );
 });

web/src/routes/article/[slug]/index.tsx

@@ -1,6 +1,6 @@
 // src/routes/articles/[slug].tsx
 import { component$, Resource, useResource$, useStore } from '@builder.io/qwik';
-import { type DocumentHead, useLocation, useDocumentHead } from '@builder.io/qwik-city';
+import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
 import { marked } from "marked";
 
 import articles from '~/data/articles';

web/src/routes/index.tsx

@@ -24,11 +24,11 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: "Welcome to Qwik",
+  title: "Digital Defense",
   meta: [
     {
       name: "description",
-      content: "Qwik site description",
+      content: "The ultimate personal security checklist, for securing your digital life.",
     },
   ],
 };

web/src/store/theme-store.ts

@@ -16,7 +16,6 @@ export const useTheme = () => {
   }));
 
   const setTheme = $((newTheme: string) => {
-    console.log('Updating Theme', newTheme);
     saveTheme(newTheme);
     state.theme = newTheme;
     document.getElementsByTagName('body')[0].setAttribute('data-theme', newTheme);