doc-survival-kit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Youssef MEDAGHRI-ALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,248 @@
+# myTasks. myNotes. myLinks. & Diagrams !
+
+> A three-column personal productivity dashboard, and a diagramming tool with zero dependencies, zero server, zero security compromises. Available in **French** and **English**.
+
+## Security — why this project can be used anywhere
+
+This is one of the dashboard's greatest strengths. Here is why it poses **no risk** in a secure environment:
+
+| Criterion        | This project                                                                  |
+| ---------------- | ----------------------------------------------------------------------------- |
+| Network requests | **None** — no CDN, no API, no tracking                                        |
+| External deps    | **None** — plain HTML, CSS and Vanilla JavaScript only                        |
+| Server required  | **No** — opens directly via `file://` in the browser                          |
+| Data sent        | **Never** — everything stays on your machine (`localStorage` and local files) |
+| Installation     | **None** — no executable, no package manager, no admin rights                 |
+| Auditable code   | **Yes** — a handful of readable files, nothing minified or obfuscated         |
+
+> **In practice**: you can open this on any machine without internet access, or in any environment where installing tools or reaching external services is not possible. It makes no outbound connections, loads nothing from the outside, and stores your data only where you choose.
+
+---
+
+![Dashboard preview](mon_dashboard.png)
+
+![Diagraming preview](mes_diagrammes.png)
+
+## Why this project?
+
+Some environments have **no internet access** or don't allow installing tools: no task-tracking software, no CDN, nothing from the outside.
+
+Yet your productivity depends on your ability to **log your tasks**, your **notes** and your **useful links** somewhere — and find them again each morning.
+
+This project solves that problem: a **single HTML file** you drop on your desktop that works in any browser, even offline.
+
+---
+
+## The three panels
+
+### myTasks. — Task manager
+
+Add tasks in an instant, sort them by priority, tick them off as the day goes on.
+
+- Three priority levels: **Urgent**, **Normal**, **Later**
+- Status filters: All, To do, Done, Urgent, Normal, Later
+- Checkbox to mark a task as complete
+- Individual deletion
+
+### myNotes. — Structured notepad
+
+Everything you need to remember, organised as notes made of freely stackable blocks.
+
+- Five block types per note:
+  - **Title** — short bold text to structure the note
+  - **Text** — free paragraph
+  - **Code** — monospace block with grey background (commands, regex, snippets…)
+  - **List** — bullet points
+  - **Table** — columns separated by `|`, first line = headers
+- Each note has a customisable colour
+- Notes are **collapsed by default** — click the chevron to expand; use the toolbar button to expand/collapse all at once
+- Add, edit and delete notes and blocks in edit mode
+
+### myLinks. — Useful link directory
+
+Your links organised by category, accessible in one click.
+
+- Customisable categories with a colour of your choice
+- Categories are **collapsed by default** — click the chevron to expand; use the toolbar button to expand/collapse all at once
+- Displayed with name and description
+- Add, edit and delete in edit mode
+
+### myDiagrams. — Diagram editor
+
+A lightweight SVG diagram editor accessible via the diagram icon (top-right of the dashboard).
+
+![Diagram editor overview](images/diagram-overview.png)
+
+#### Shapes
+
+Six shape types are available from the toolbar:
+
+| Shape             | Description                                               |
+| ----------------- | --------------------------------------------------------- |
+| Rectangle         | Standard box with slightly rounded corners                |
+| Rounded rectangle | Pill-shaped box                                           |
+| Database          | Cylinder — represents a data store                        |
+| External service  | Solid ellipse — represents a third-party or cloud service |
+| Free text         | Label without a background                                |
+| Post-it           | Sticky note with a folded corner, multi-line text         |
+
+#### Arrows
+
+- Draw arrows by clicking **source → target** with the arrow tool, or by **dragging from a connection dot** on any shape
+- The label input opens automatically after creating an arrow
+- **Double-click** an arrow (or use the ✎ button) to edit its label
+
+#### Text editing
+
+- **Double-click** a shape (or use the ✎ button) to edit its text inline
+- For `rect`, `rounded`, `db`, `cloud` and `postit` shapes, a **transparent textarea** is overlaid directly on the shape — text wraps automatically as you type
+- The text input for the `db` cylinder is positioned in the **body only**, below the top cap
+
+#### Text formatting palette
+
+When a shape is selected, a formatting palette appears. From left to right:
+
+| Control       | Effect                                                                                             |
+| ------------- | -------------------------------------------------------------------------------------------------- |
+| 6 colour dots | Apply a theme colour to the shape                                                                  |
+| ✎             | Open the inline text editor                                                                        |
+| `Aa+` / `Aa−` | Increase / decrease font size (range: 8–28 px)                                                     |
+| ← / ↔ / →     | Horizontal text alignment: left / centre / right                                                   |
+| ↑ / ↕ / ↓     | Vertical text alignment: top / middle / bottom                                                     |
+| Hollow drop   | Copy the **font size** from another shape — click the button then click the source shape           |
+| Filled drop   | Copy the **full style** from another shape (font size, colour, shape type, dimensions, alignments) |
+
+> The style copy (filled drop) works with multi-selection: select several shapes, activate the drop, click the source — all selected shapes are updated at once.
+
+#### Text wrapping
+
+Text in `rect`, `rounded`, `db`, `cloud` and `postit` shapes wraps automatically to fit the shape width. Resizing a shape immediately re-flows the text. The font size set via `Aa+`/`Aa−` is also taken into account when computing line breaks.
+
+#### Zoom per diagram
+
+Each diagram remembers its own zoom level. Switching from one diagram to another restores the zoom you were using last time — stored in `localStorage` separately from the diagram data.
+
+#### Lock per diagram
+
+The lock button (🔓/🔒) in the toolbar freezes the diagram: all canvas interactions (selection, tools, keyboard shortcuts) are disabled and any click simply pans the view. The lock state is saved per diagram in `localStorage` and restored when you switch back to it.
+
+#### Navigation
+
+- The ☰ button opens the diagram list panel — clicking a diagram name switches to it **and closes the panel automatically**
+- Diagram names **wrap to the next line** if they are too long — nothing is truncated
+- Diagrams can be **reordered by drag & drop** in the panel: grab the `⠿` handle on the left of any item, drag it up or down, and a dashed orange line shows exactly where it will land
+- The `+ New` button creates a new diagram
+- The ← button in the top-right returns to the main dashboard
+
+#### Saving
+
+- Saves directly to `diagrammes.js` on disk via the File System Access API (same mechanism as notes and links)
+- The green **save** button appears in the toolbar whenever the in-memory data differs from the saved file
+
+---
+
+## Data persistence
+
+Everything is saved in the browser's `localStorage` — your content survives browser restarts.
+
+To avoid losing data when you clear the cache or switch machines, each panel has a **"save changes"** button that overwrites the source file (`mesLiens.js` or `mesNotes.js`) directly on your disk, using the **File System Access API** (Chrome and Edge Chromium only).
+
+> **First save**: a modal asks you to select the project folder. The file is then updated directly on every subsequent save, with no dialog.
+
+## Administration page
+
+The ⚙ icon in the top-right corner of the dashboard opens `admin.html`. It lets you:
+
+- **Choose the language** — switch between Français and English (saved in localStorage)
+- **Clear localStorage** — resets to the default data from `mesLiens.js` and `mesNotes.js` on next load
+- **Delete IndexedDB** — clears the stored file handle; the next save will ask you to select the folder again
+
+The two reset actions are independent, can be checked separately, and are executed via a single button. The page explains the consequences before acting.
+
+## Internationalisation
+
+The interface is available in **French** (default) and **English**. The language is chosen from the administration page and stored in `localStorage`.
+
+Translations live in the `i18n/` folder:
+
+| File           | Role                                                                       |
+| -------------- | -------------------------------------------------------------------------- |
+| `i18n/fr.js`   | French translations (`var i18n_fr`)                                        |
+| `i18n/en.js`   | English translations (`var i18n_en`)                                       |
+| `i18n/i18n.js` | Engine: reads `localStorage["lang"]`, exposes `window.t` and `applyI18n()` |
+
+---
+
+## Quick start
+
+### Via npx (recommended)
+
+```bash
+npx doc-survival-kit
+```
+
+Creates a `doc-survival-kit/` folder in the current directory and opens the application automatically in the browser. Subsequent runs simply open the application without overwriting anything.
+
+> Requires Node.js >= 16.7. Use Chrome or Edge for file saving.
+
+### Without any tool
+
+1. Copy the following files and folder into a new directory:
+
+- `index.html`
+- `admin.html`
+- `diagram.html`
+- `diagram.js`
+- `diagrammes.js`
+- `liens.js`
+- `mesLiens.js`
+- `mesNotes.js`
+- `notes.js`
+- `style.css`
+- `taches.js`
+- `i18n/` (entire folder)
+
+2. Open `index.html` in Chrome or Edge
+3. That's it.
+
+Sample content is already present in each panel to give you an idea of what you can put there.
+
+### Manually
+
+1. Clone or download this repository
+2. Open `index.html` in Chrome or Edge
+3. That's it.
+
+```bash
+git clone https://github.com/ymedaghri/doc-survival-kit.git
+cd doc-survival-kit
+open index.html   # macOS
+# or
+start index.html  # Windows
+```
+
+---
+
+## Tech stack
+
+| Technology         | Detail                                                  |
+| ------------------ | ------------------------------------------------------- |
+| HTML               | Semantic structure, no framework                        |
+| CSS                | Separate styles in `style.css`, no framework            |
+| JavaScript         | Vanilla, no third-party library                         |
+| Local storage      | Browser `localStorage`                                  |
+| File storage       | File System Access API (`showDirectoryPicker`)          |
+| Handle persistence | `IndexedDB` — file handle is remembered across sessions |
+
+---
+
+## Author
+
+**Youssef MEDAGHRI-ALAOUI**
+[craftskillz.com](https://www.craftskillz.com/posts/stay-secure-and-productive)
+
+---
+
+## License
+
+This project is distributed under the **MIT** licence — you are free to use, modify and redistribute it, including in commercial projects, provided you retain the original author credit.

package/admin.html

@@ -0,0 +1,329 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title data-i18n="page_title_admin">
+      Administration — doc-survival-kit
+    </title>
+    <link rel="stylesheet" href="style.css" />
+    <style>
+      .admin-shell {
+        max-width: 560px;
+        margin: 0 auto;
+        padding: 60px 36px 80px;
+      }
+      .admin-back {
+        position: fixed;
+        top: 16px;
+        right: 20px;
+        font-size: 1.4rem;
+        color: #78716c;
+        text-decoration: none;
+        background: #f5f5f4;
+        border: 1px solid #e7e5e4;
+        border-radius: 8px;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition:
+          background 0.15s,
+          color 0.15s;
+        line-height: 1;
+      }
+      .admin-back:hover {
+        background: #292524;
+        color: #fff;
+        border-color: #292524;
+      }
+      .admin-lang-section {
+        margin-bottom: 36px;
+      }
+      .admin-lang-section h2 {
+        font-family: "Cascadia Code", "SF Mono", "Consolas", monospace;
+        font-size: 0.65rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #a8a29e;
+        margin-bottom: 12px;
+      }
+      .admin-lang-options {
+        display: flex;
+        gap: 8px;
+      }
+      .btn-lang {
+        font-family: "Cascadia Code", "SF Mono", "Consolas", monospace;
+        font-size: 0.7rem;
+        letter-spacing: 0.08em;
+        padding: 8px 20px;
+        border-radius: 8px;
+        border: 1px solid #e7e5e4;
+        background: #fff;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          border-color 0.15s,
+          color 0.15s;
+      }
+      .btn-lang:hover {
+        border-color: #f97316;
+        background: #fff7ed;
+      }
+      .btn-lang.active {
+        background: #f97316;
+        color: #fff;
+        border-color: #f97316;
+      }
+      .admin-intro {
+        background: #fff7ed;
+        border: 1px solid #fed7aa;
+        border-radius: 10px;
+        padding: 20px 24px;
+        margin-bottom: 36px;
+      }
+      .admin-intro h2 {
+        font-family: "Cascadia Code", "SF Mono", "Consolas", monospace;
+        font-size: 0.65rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #f97316;
+        margin-bottom: 12px;
+      }
+      .admin-intro p {
+        font-size: 0.875rem;
+        line-height: 1.65;
+        color: #57534e;
+        margin-bottom: 10px;
+      }
+      .admin-intro p:last-child {
+        margin-bottom: 0;
+      }
+      .admin-intro strong {
+        color: #292524;
+      }
+      .admin-actions {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 32px;
+      }
+      .admin-check-label {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 16px 20px;
+        border-radius: 10px;
+        border: 1px solid #e7e5e4;
+        background: #fff;
+        cursor: pointer;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+      .admin-check-label:hover {
+        border-color: #f97316;
+        background: #fff7ed;
+      }
+      .admin-check-label input[type="checkbox"] {
+        margin-top: 2px;
+        flex-shrink: 0;
+        width: 16px;
+        height: 16px;
+        accent-color: #f97316;
+        cursor: pointer;
+      }
+      .admin-check-text strong {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #292524;
+        margin-bottom: 3px;
+      }
+      .admin-check-text span {
+        font-size: 0.8rem;
+        color: #a8a29e;
+        line-height: 1.5;
+      }
+      .btn-execute {
+        font-family: "Cascadia Code", "SF Mono", "Consolas", monospace;
+        font-size: 0.65rem;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        padding: 10px 20px;
+        border-radius: 8px;
+        background: #fef2f2;
+        color: #ef4444;
+        border: 1px solid #fecaca;
+        transition:
+          background 0.15s,
+          color 0.15s,
+          border-color 0.15s;
+        cursor: pointer;
+      }
+      .btn-execute:hover {
+        background: #ef4444;
+        color: #fff;
+        border-color: #ef4444;
+      }
+      .btn-execute:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+      .admin-feedback {
+        display: none;
+        margin-top: 20px;
+        padding: 14px 18px;
+        border-radius: 8px;
+        font-size: 0.875rem;
+        line-height: 1.5;
+      }
+      .admin-feedback.success {
+        background: #d1fae5;
+        color: #047857;
+        border: 1px solid #6ee7b7;
+      }
+    </style>
+  </head>
+  <body>
+    <a href="index.html" class="admin-back" title="Retour au dashboard">←</a>
+
+    <div class="admin-shell">
+      <h1>admin<span class="accent">.</span></h1>
+      <p class="subtitle" data-i18n="admin_subtitle">
+        réinitialisation des données
+      </p>
+
+      <!-- ── Sélecteur de langue ── -->
+      <div class="admin-lang-section">
+        <h2 data-i18n="admin_lang_title">Langue / Language</h2>
+        <div class="admin-lang-options">
+          <button class="btn-lang" id="btnLangFr" onclick="setLang('fr')">
+            Français
+          </button>
+          <button class="btn-lang" id="btnLangEn" onclick="setLang('en')">
+            English
+          </button>
+        </div>
+      </div>
+
+      <div class="admin-intro">
+        <h2 data-i18n="admin_why_title">Pourquoi cette page ?</h2>
+        <p data-i18n-html="admin_why_p1">
+          L'application stocke tes données à deux endroits dans ton navigateur :
+          le <strong>localStorage</strong> (tâches, notes, liens) et l'<strong
+            >IndexedDB</strong
+          >
+          (le handle du fichier pour la sauvegarde directe).
+        </p>
+        <p data-i18n-html="admin_why_p2">
+          Ces données <strong>ne sont pas supprimées</strong> en vidant le cache
+          classique ou en fermant le navigateur. Cette page te permet de les
+          effacer proprement, par exemple pour repartir d'une installation
+          vierge ou résoudre un problème de synchronisation entre le fichier et
+          le navigateur.
+        </p>
+        <p data-i18n-html="admin_why_p3">
+          <strong>Attention :</strong> ces actions sont irréversibles. Si tu
+          n'as pas sauvegardé tes modifications dans les fichiers
+          <code>mesLiens.js</code> et <code>mesNotes.js</code>, tes données
+          seront perdues.
+        </p>
+      </div>
+
+      <div class="admin-actions">
+        <label class="admin-check-label">
+          <input type="checkbox" id="checkLocalStorage" />
+          <div class="admin-check-text">
+            <strong data-i18n="admin_ls_label">Effacer le localStorage</strong>
+            <span data-i18n-html="admin_ls_desc"
+              >Supprime toutes les tâches, notes et liens mémorisés dans le
+              navigateur. Au prochain chargement, l'application repart des
+              données par défaut contenues dans <code>mesLiens.js</code> et
+              <code>mesNotes.js</code>.</span
+            >
+          </div>
+        </label>
+
+        <label class="admin-check-label">
+          <input type="checkbox" id="checkIndexedDB" />
+          <div class="admin-check-text">
+            <strong data-i18n="admin_idb_label">Supprimer l'IndexedDB</strong>
+            <span data-i18n="admin_idb_desc"
+              >Efface le handle de fichier mémorisé pour la sauvegarde directe.
+              La prochaine sauvegarde te demandera à nouveau de sélectionner le
+              dossier du projet, comme lors de la première utilisation.</span
+            >
+          </div>
+        </label>
+      </div>
+
+      <button
+        class="btn-execute"
+        id="btnExecute"
+        disabled
+        onclick="executer()"
+        data-i18n="admin_execute_btn"
+      >
+        exécuter les actions sélectionnées
+      </button>
+
+      <div class="admin-feedback" id="adminFeedback"></div>
+    </div>
+
+    <script src="i18n/fr.js"></script>
+    <script src="i18n/en.js"></script>
+    <script src="i18n/i18n.js"></script>
+    <script>
+      var chkLS = document.getElementById("checkLocalStorage");
+      var chkIDB = document.getElementById("checkIndexedDB");
+      var btn = document.getElementById("btnExecute");
+      var feedback = document.getElementById("adminFeedback");
+
+      // Highlight active language button
+      (function () {
+        var lang = localStorage.getItem("lang") || "fr";
+        document
+          .getElementById(lang === "en" ? "btnLangEn" : "btnLangFr")
+          .classList.add("active");
+      })();
+
+      function setLang(lang) {
+        localStorage.setItem("lang", lang);
+        window.location.reload();
+      }
+
+      function updateBtn() {
+        btn.disabled = !chkLS.checked && !chkIDB.checked;
+      }
+      chkLS.addEventListener("change", updateBtn);
+      chkIDB.addEventListener("change", updateBtn);
+
+      function executer() {
+        var messages = [];
+
+        if (chkLS.checked) {
+          localStorage.clear();
+          // Restore lang setting so the page stays in the right language
+          var lang = window.t === i18n_en ? "en" : "fr";
+          localStorage.setItem("lang", lang);
+          messages.push(window.t.admin_feedback_ls);
+          chkLS.checked = false;
+        }
+
+        if (chkIDB.checked) {
+          indexedDB.deleteDatabase("doc-survival-kit-db");
+          messages.push(window.t.admin_feedback_idb);
+          chkIDB.checked = false;
+        }
+
+        updateBtn();
+        feedback.textContent =
+          messages.join(" ") + " " + window.t.admin_feedback_return;
+        feedback.className = "admin-feedback success";
+        feedback.style.display = "block";
+      }
+    </script>
+  </body>
+</html>

package/bin/cli.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { exec } = require("child_process");
+
+const DEST_DIR = path.join(process.cwd(), "doc-survival-kit");
+const SRC_DIR = path.join(__dirname, "..");
+const APP_FILES = [
+  "index.html",
+  "admin.html",
+  "diagram.html",
+  "style.css",
+  "liens.js",
+  "taches.js",
+  "notes.js",
+  "diagram.js",
+];
+const DATA_FILES = ["mesLiens.js", "mesNotes.js", "diagrammes.js"];
+const I18N_FILES = ["i18n/fr.js", "i18n/en.js", "i18n/i18n.js"];
+const IMAGES_FILES = ["images/img_1774270331723.png"];
+
+function openBrowser(filePath) {
+  const url = "file://" + filePath;
+  const cmd =
+    process.platform === "win32"
+      ? `start "" "${url}"`
+      : process.platform === "darwin"
+        ? `open "${url}"`
+        : `xdg-open "${url}"`;
+  exec(cmd, (err) => {
+    if (err) {
+      console.log("Ouvre manuellement dans Chrome ou Edge :");
+      console.log(filePath);
+    }
+  });
+}
+
+const htmlFile = path.join(DEST_DIR, "index.html");
+
+if (fs.existsSync(DEST_DIR)) {
+  console.log("Le dossier doc-survival-kit existe déjà.");
+  console.log("Ouverture de l'application...");
+  openBrowser(htmlFile);
+} else {
+  fs.mkdirSync(DEST_DIR, { recursive: true });
+
+  // Fichiers app (toujours copiés)
+  for (const file of APP_FILES) {
+    fs.copyFileSync(path.join(SRC_DIR, file), path.join(DEST_DIR, file));
+  }
+
+  // Fichiers i18n (toujours copiés)
+  fs.mkdirSync(path.join(DEST_DIR, "i18n"), { recursive: true });
+  for (const file of I18N_FILES) {
+    fs.copyFileSync(path.join(SRC_DIR, file), path.join(DEST_DIR, file));
+  }
+
+  // Fichiers i18n (toujours copiés)
+  fs.mkdirSync(path.join(DEST_DIR, "images"), { recursive: true });
+  for (const file of IMAGES_FILES) {
+    fs.copyFileSync(path.join(SRC_DIR, file), path.join(DEST_DIR, file));
+  }
+  // Fichiers de données (copiés seulement à la création)
+  for (const file of DATA_FILES) {
+    fs.copyFileSync(path.join(SRC_DIR, file), path.join(DEST_DIR, file));
+  }
+
+  console.log("doc-survival-kit créé dans : " + DEST_DIR);
+  console.log("");
+  console.log("Note : tes données sont sauvegardées dans ce dossier.");
+  console.log("       Ouvre toujours le fichier depuis ce même dossier.");
+  console.log("");
+  console.log("Ouverture de l'application...");
+  console.log("(Utilise Chrome ou Edge pour la sauvegarde de fichiers)");
+  openBrowser(htmlFile);
+}