Adds info glass before stats are recorded

.github/README.md

@@ -11,8 +11,9 @@
 <br />
 </p>
 
+<details>
+    <summary><b>Contents</b></summary>
     
-## Contents
 - [The Checklist](#the-checklist)
 - [The Website](#the-website)
 - [The API](#the-api)
@@ -20,6 +21,8 @@
 - [Credits](#credits)
 - [License](#license)
 
+</details>
+
 ---
 
 ## The Checklist
@@ -32,7 +35,7 @@ You can view the full checklist in [`CHECKLIST.md`](https://github.com/Lissy93/p
 
 The easiest method for consuming the checklist is via our website, at: **[digital-defense.io](https://digital-defense.io/)**
 
-Here you can browse all checklists, filter by level, and check items off as you complete them.
+Here you can browse lists, filter by your threat model and tick items off once complete (plus, there's pretty charts to make you feel good about your progress ☺️).
 
 <p align="center">
 <img width="600" src="https://i.ibb.co/jzKn05H/digital-defense.png" />
@@ -53,9 +56,9 @@ To run the app locally, or to make code changes, you'll need Node and Git instal
 Alternatively, just open this repo is Code Spaces, where everything is already configured and ready to go.
 
 ### Deploying
-To deploy the app, follow the developing steps above, then run `yarn build`. You can then deploy it by copying the `dist/` directory to any CDN, web server or static hosting provider.
+To deploy the app, follow the developing steps above, then run `yarn build.static`. You can then deploy it by copying the `dist/` directory to any CDN, web server or static hosting provider of your choice.
 
-Alternatively, you can deploy to Netlify or Vercel simply by forking the repository, and then importing it via your dashboard. Or use the links below for an easy 1-click deploy.
+Alternatively, fork the repo and import into your providers dashboard. Or use the link below for an easy 1-click deploy 😉
 
 ---
 
@@ -81,7 +84,7 @@ Base: digital-defense.io/api
 ---
 
 ## Contributing
-All checklist data is stored in `personal-security-checklist.yml`. This is pulled in the website at build-time, and referenced by the API, and is also dynamically inserted into the markdown Checklist page.
+All checklist data is stored in [`personal-security-checklist.yml`](https://github.com/Lissy93/personal-security-checklist/blob/HEAD/personal-security-checklist.yml). This is pulled in the website at build-time, and referenced by the API, and is also dynamically inserted into the markdown [Checklist page](https://github.com/Lissy93/personal-security-checklist/blob/HEAD/CHECKLIST.md).
 
 So if you only wish to make changes to the data, this is the only file you need to edit.
 
@@ -89,7 +92,7 @@ Important: When submitting your pull request, provide references backing up any
 
 For modifying the website or API source, see the developing sections above for instructions on running locally.
 
-Prior to submitting an issue or PR, please ensure you've followed the community guidelines laid out in the Code of Conduct.
+Prior to submitting an issue or PR, please ensure you've followed the [community guidelines](https://github.com/Lissy93/personal-security-checklist/blob/master/.github/CONTRIBUTING.md) and followed the [Code of Conduct](https://github.com/Lissy93/personal-security-checklist/blob/HEAD/.github/CODE_OF_CONDUCT.md).
 
 ---
 

web/src/components/psc/progress.tsx

@@ -26,6 +26,7 @@ export default component$(() => {
   const radarChart  = useSignal<HTMLCanvasElement>();
   // Completion data for each section
   const sectionCompletion =  useSignal<number[]>([]);
+  const [ignoreDialog, setIgnoreDialog] = useLocalStorage('PSC_CLOSE_WELCOME', false);
 
   /**
    * Calculates the users progress over specified sections.
@@ -279,7 +280,21 @@ export default component$(() => {
 
   // Beware, some god-awful markup ahead (thank Tailwind for that!)
   return (
-  <div class="flex justify-center flex-wrap items-stretch gap-6 mb-4">
+  <div class="flex justify-center flex-wrap items-stretch gap-6 mb-4 relative">
+    {(!ignoreDialog.value && (!Object.keys(checkedItems.value).length) ) && (
+    <div class="
+      px-16 py-8 top-1/3 z-10 max-w-lg
+      absolute flex flex-col justify-center bg-gray-600 rounded-md bg-clip-padding
+      backdrop-filter backdrop-blur-md bg-opacity-40 border border-stone-800">
+        <button
+          class="absolute top-1 right-1 btn btn-sm opacity-50"
+          onClick$={() => setIgnoreDialog(true)}
+          >Close</button>
+        <p class="text-xl block text-center font-bold">No stats yet</p>
+        <p class="w-md text-left my-2">You'll see your progress here, once you start ticking items off the checklists</p>
+        <p class="w-md text-left my-2">Get started, by selecting a checklist below</p>
+      </div>
+    )}
 
     <div class="flex justify-center flex-col items-center gap-6">
       {/* Progress Percent */}
@@ -309,7 +324,7 @@ export default component$(() => {
       </div>
       {/* Something ??? */}
       <div class="p-4 rounded-box bg-front shadow-md w-96 flex-grow">
-        <p>Something else will go here....</p>
+        <p>Coming Soon!</p>
       </div>
     </div>