diff --git a/web/public/favicon.png b/web/public/favicon.png new file mode 100644 index 0000000..5b06469 Binary files /dev/null and b/web/public/favicon.png differ diff --git a/web/public/favicon.svg b/web/public/favicon.svg deleted file mode 100644 index 0ded7c1..0000000 --- a/web/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/components/psc/progress.tsx b/web/src/components/psc/progress.tsx index 5b94404..3ed701a 100644 --- a/web/src/components/psc/progress.tsx +++ b/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(); + // Completion data for each section + const sectionCompletion = useSignal([]); /** * 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$(() => { diff --git a/web/src/components/router-head/router-head.tsx b/web/src/components/router-head/router-head.tsx index 8d6134a..aa1b9c2 100644 --- a/web/src/components/router-head/router-head.tsx +++ b/web/src/components/router-head/router-head.tsx @@ -15,7 +15,7 @@ export const RouterHead = component$(() => { - + {head.meta.map((m) => ( @@ -32,6 +32,7 @@ export const RouterHead = component$(() => { {head.scripts.map((s) => ( ); }); diff --git a/web/src/routes/article/[slug]/index.tsx b/web/src/routes/article/[slug]/index.tsx index 1336b46..9254152 100644 --- a/web/src/routes/article/[slug]/index.tsx +++ b/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'; diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx index bf02565..01e8066 100644 --- a/web/src/routes/index.tsx +++ b/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.", }, ], }; diff --git a/web/src/store/theme-store.ts b/web/src/store/theme-store.ts index a92c622..26b70d0 100644 --- a/web/src/store/theme-store.ts +++ b/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);