Testing on notes

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

src/components/NoteVars.astro

@@ -0,0 +1,110 @@
+---
+interface Props {
+  vars: string[];
+}
+
+const { vars } = Astro.props;
+---
+
+{
+  vars.length > 0 && (
+    <>
+      <button
+        id="vars-toggle"
+        data-note-vars={JSON.stringify(vars)}
+        class="btn btn-ghost btn-xs font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
+        onclick="document.getElementById('vars-modal').showModal()"
+      >
+        <span class="font-mono text-[10px] leading-none">$</span>
+        vars
+      </button>
+
+      <dialog id="vars-modal" class="modal">
+        <div
+          class="modal-box max-w-sm"
+          style="background: oklch(10% 0 0); border: 1px solid oklch(71% 0.0863 296.59 / 0.5);"
+        >
+          <h3 class="font-mono text-[10px] text-base-content/40 uppercase tracking-widest mb-4">
+            variables
+          </h3>
+          <div class="space-y-2.5">
+            {vars.map((v) => (
+              <div class="flex items-center gap-3">
+                <label
+                  class="font-mono text-xs text-primary/70 w-36 shrink-0 truncate"
+                  title={`$${v}`}
+                >
+                  ${v}
+                </label>
+                <input
+                  type="text"
+                  data-var={v}
+                  placeholder={`$${v}`}
+                  class="vars-input input input-sm flex-1 min-w-0 font-mono text-xs bg-base-300/20 border-base-300/60 text-base-content/80 placeholder:text-base-content/25 focus:border-primary/60"
+                />
+              </div>
+            ))}
+          </div>
+          <div class="mt-5 flex justify-end">
+            <button
+              class="btn btn-ghost btn-xs font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
+              onclick="document.getElementById('vars-modal').close()"
+            >
+              close
+            </button>
+          </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button>close</button>
+        </form>
+      </dialog>
+    </>
+  )
+}
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const btn = document.getElementById("vars-toggle");
+    if (!btn) return;
+
+    const vars: string[] = JSON.parse(btn.dataset.noteVars ?? "[]");
+    const content = document.querySelector(".note-content");
+    if (!vars.length || !content) return;
+
+    const originals = new Map<Text, string>();
+    const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
+    let node: Text | null;
+    while ((node = walker.nextNode() as Text | null)) {
+      if (/\$[a-zA-Z_][a-zA-Z0-9_]*/.test(node.nodeValue ?? "")) {
+        originals.set(node, node.nodeValue!);
+      }
+    }
+
+    function applyVars() {
+      const values: Record<string, string> = {};
+      document.querySelectorAll<HTMLInputElement>(".vars-input").forEach((input) => {
+        values[input.dataset.var!] = input.value.trim();
+      });
+
+      const sorted = [...vars].sort((a, b) => b.length - a.length);
+
+      for (const [node, original] of originals) {
+        let text = original;
+        for (const name of sorted) {
+          const val = values[name];
+          if (val) {
+            text = text.replace(
+              new RegExp(`\\$${name}(?![a-zA-Z0-9_])`, "g"),
+              val,
+            );
+          }
+        }
+        node.nodeValue = text;
+      }
+    }
+
+    document.addEventListener("input", (e) => {
+      if ((e.target as HTMLElement)?.classList.contains("vars-input")) applyVars();
+    });
+  });
+</script>

src/content/notes/nmap.md

@@ -6,3 +6,9 @@ publishDate: 2026-04-24
 ---
 
 ## Notes
+
+Salut comment ça va ! $test1
+
+```bash
+nmap -p $port "$Ip"
+```

src/content/notes/test2.md

@@ -0,0 +1,14 @@
+---
+title: "test2"
+description: ""
+tags: []
+publishDate: 2026-04-24
+---
+
+## Notes
+
+Salut comment ça va ! $test1
+
+```bash
+nmap -p $test2 "$test3$test4"
+```

src/content/notes/test3.md

@@ -0,0 +1,14 @@
+---
+title: "Bla blablalbal  ae aetnaekjta ektae ktklaaek ljbtaekjb taekbt akejbt"
+description: "lorem est seot nopsejt soejtosehtose ose toiseht jophs etosh etoshte osehtosht oshe topsh etopshiospehitopsehti."
+tags: ["test", "test1", "test2"]
+publishDate: 2026-04-24
+---
+
+## Notes
+
+Salut comment ça va ! $test1
+
+```bash
+nmap -p $port "$Ip"
+```

src/pages/notes/[...slug].astro

@@ -1,8 +1,9 @@
 ---
 import { getCollection, render } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
-import { Shield, ChevronLeft, List, PanelRight } from "@lucide/astro";
+import { List, PanelRight } from "@lucide/astro";
 import Author from "../../components/Author.astro";
+import NoteVars from "../../components/NoteVars.astro";
 import { getCategory, extractInlineHashtags } from "../../utils/notes";
 
 export async function getStaticPaths() {
@@ -69,6 +70,15 @@ function slugify(text: string) {
     .replace(/ +/g, "-");
 }
 
+const noteVars = [
+  ...new Set(
+    Array.from(
+      (entry.body ?? "").matchAll(/\$([a-zA-Z_][a-zA-Z0-9_]*)/g),
+      (m) => m[1],
+    ),
+  ),
+];
+
 const headings: { depth: number; text: string; id: string }[] = [];
 const headingRe = /^(#{2,4}) (.+)$/gm;
 let hm;
@@ -91,6 +101,26 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
     top: 3rem;
     height: calc(100vh - 3rem);
   }
+
+  /* DaisyUI .menu forces width:fit-content and display:grid on items.
+     Astro scoped styles add [data-astro-cid-*] which raises specificity above DaisyUI's class selectors. */
+  .nav-sidebar {
+    width: 100%;
+  }
+
+  .nav-sidebar a {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  .nav-sidebar a span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+  }
 </style>
 
 <Layout
@@ -107,26 +137,27 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
 
           <div class="drawer-content flex flex-col min-w-0">
             <main class="flex-1 px-4 sm:px-6 lg:px-10 py-6 lg:py-10 min-w-0">
-              <div class="max-w-2xl mx-auto lg:mx-0">
+              <div class="max-w-3xl mx-auto lg:mx-0">
                 <div class="flex items-center justify-between mb-6">
-                  <a
-                    href="/notes"
-                    class="inline-flex items-center gap-1 text-sm text-base-content/35 hover:text-base-content/70 transition-colors"
-                  >
-                    <ChevronLeft size={14} />Notes
-                  </a>
+                  <div class="breadcrumbs text-xs font-mono text-base-content/35 p-0">
+                    <ul>
+                      <li><a href="/notes" class="hover:text-base-content/70">notes</a></li>
+                      <li>{getCategory(entry)}</li>
+                    </ul>
+                  </div>
                   <div class="flex items-center gap-2">
                     <label
                       for="nav-drawer"
-                      class="lg:hidden flex items-center gap-1.5 font-mono text-xs text-base-content/40 hover:text-base-content/70 transition-colors border border-base-300/50 px-2 py-1 cursor-pointer"
+                      class="btn btn-ghost btn-xs lg:hidden font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
                     >
                       <List size={11} />
                       nav
                     </label>
+                    <NoteVars vars={noteVars} />
                     <label
                       for="graph-drawer"
                       id="graph-toggle"
-                      class="flex items-center gap-1.5 font-mono text-xs text-base-content/40 hover:text-base-content/70 transition-colors border border-base-300/50 px-2 py-1 cursor-pointer"
+                      class="btn btn-ghost btn-xs font-mono text-base-content/40 hover:text-base-content/70 border border-base-300/50"
                       title="Toggle graph"
                     >
                       <PanelRight size={11} />
@@ -136,19 +167,6 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
                 </div>
 
                 <header class="mb-8">
-                  <div class="flex items-center gap-3 mb-5">
-                    <span class="text-xl font-bold tracking-tight">
-                      <span class="text-primary/50 font-mono mr-0.5">/</span>
-                      {getCategory(entry)}
-                    </span>
-                    <span class="text-base-content/20 text-xs">·</span>
-                    <time
-                      datetime={entry.data.publishDate.toISOString()}
-                      class="text-xs text-base-content/35"
-                    >
-                      {formatDate(entry.data.publishDate)}
-                    </time>
-                  </div>
                   <h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-3">
                     {entry.data.title}
                   </h1>
@@ -161,7 +179,7 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
                         {entry.data.tags.map((tag) => (
                           <a
                             href={`/notes?tag=${tag}`}
-                            class="font-mono text-[10px] px-1.5 py-0.5 border border-base-300/40 text-base-content/25 hover:text-primary/70 hover:border-primary/40 transition-colors"
+                            class="badge badge-ghost badge-xs font-mono text-base-content/30 hover:text-primary/70 transition-colors"
                           >
                             {tag}
                           </a>
@@ -171,41 +189,36 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
                   }
                 </header>
 
-                <div class="border-t border-base-300/30 mb-6"></div>
-
                 {
                   headings.length > 0 && (
-                    <details
-                      class="mb-8 border border-base-300/40 group"
+                    <div
+                      class="collapse collapse-arrow mb-8 border border-base-300/40"
                       style="background: oklch(4% 0 0);"
                     >
-                      <summary class="px-3 py-2 flex items-center gap-2 cursor-pointer list-none select-none font-mono text-xs text-base-content/35 hover:text-base-content/60 transition-colors">
+                      <input type="checkbox" />
+                      <div class="collapse-title font-mono text-xs text-base-content/35 flex items-center gap-2 py-2 px-3 min-h-0">
                         <span class="text-primary/40">§</span>
-                        <span>table of contents</span>
-                        <span class="ml-auto opacity-50 group-open:hidden">+</span>
-                        <span class="ml-auto opacity-50 hidden group-open:inline">−</span>
-                      </summary>
-                      <nav class="px-3 pb-3 pt-1 border-t border-base-300/30 space-y-0.5">
-                        {headings.map((h) => (
-                          <a
-                            href={`#${h.id}`}
-                            class:list={[
-                              "block text-xs text-base-content/45 hover:text-base-content/80 transition-colors py-0.5",
-                              h.depth === 3
-                                ? "pl-4"
-                                : h.depth === 4
-                                  ? "pl-8"
-                                  : "",
-                            ]}
-                          >
-                            <span class="font-mono text-primary/25 mr-1.5">
-                              {"#".repeat(h.depth)}
-                            </span>
-                            {h.text}
-                          </a>
-                        ))}
-                      </nav>
-                    </details>
+                        table of contents
+                      </div>
+                      <div class="collapse-content px-0 pb-0">
+                        <nav class="px-3 pb-3 pt-1 border-t border-base-300/30 space-y-0.5">
+                          {headings.map((h) => (
+                            <a
+                              href={`#${h.id}`}
+                              class:list={[
+                                "block text-xs text-base-content/45 hover:text-base-content/80 transition-colors py-0.5",
+                                h.depth === 3 ? "pl-4" : h.depth === 4 ? "pl-8" : "",
+                              ]}
+                            >
+                              <span class="font-mono text-primary/25 mr-1.5">
+                                {"#".repeat(h.depth)}
+                              </span>
+                              {h.text}
+                            </a>
+                          ))}
+                        </nav>
+                      </div>
+                    </div>
                   )
                 }
 
@@ -220,8 +233,8 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
                   [&_ul_li]:before:content-['–'] [&_ul_li]:before:text-base-content/25 [&_ul_li]:before:mr-2 [&_ul_li]:before:font-mono
                   [&_ol]:mb-4 [&_ol]:ml-5 [&_ol]:list-decimal [&_ol]:space-y-1
                   [&_li]:text-base-content/75
-                  [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs [&_code]:bg-base-200 [&_code]:text-primary/80 [&_code]:border [&_code]:border-base-300/50
-                  [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:bg-base-200/60 [&_pre]:border [&_pre]:border-base-300/50 [&_pre]:text-xs
+                  [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded-field [&_code]:font-mono [&_code]:text-xs [&_code]:bg-base-200 [&_code]:text-primary/80 [&_code]:border [&_code]:border-base-300/50
+                  [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:rounded-box [&_pre]:bg-base-200/60 [&_pre]:border [&_pre]:border-base-300/50 [&_pre]:text-xs
                   [&_pre_code]:bg-transparent [&_pre_code]:border-0 [&_pre_code]:p-0 [&_pre_code]:text-base-content/80
                   [&_blockquote]:border-l-2 [&_blockquote]:border-primary/25 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-4 [&_blockquote]:text-base-content/50
                   [&_table]:w-full [&_table]:mb-6 [&_table]:text-xs [&_table]:border-collapse
@@ -255,65 +268,53 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
               class="w-56 flex flex-col border-r border-base-300/60 h-full"
               style="background: oklch(4% 0 0);"
             >
-              <div class="px-4 py-4 border-b border-base-300/40">
-                <a
-                  href="/notes"
-                  class="flex items-center gap-2 mb-3 hover:text-primary transition-colors"
-                >
-                  <Shield size={13} class="text-primary/60 shrink-0" />
-                  <span class="font-mono text-xs text-primary/60 tracking-widest uppercase">
-                    security notes
-                  </span>
-                </a>
-                <div class="flex items-center gap-1.5 bg-base-200/50 px-2 py-1.5 border border-base-300/40">
-                  <span class="font-mono text-xs text-base-content/30">›</span>
+              <div class="px-3 py-3 border-b border-base-300/40">
+                <label class="input input-sm w-full font-mono text-xs border-base-300/40 bg-base-200/50">
+                  <span class="text-base-content/30">›</span>
                   <input
                     data-search
                     type="text"
                     placeholder="search..."
-                    class="bg-transparent font-mono text-xs text-base-content/70 placeholder:text-base-content/25 outline-none w-full"
+                    class="text-base-content/70 placeholder:text-base-content/25"
                   />
-                </div>
+                </label>
               </div>
-              <nav class="px-3 py-3 flex-1 overflow-y-auto">
+              <ul class="nav-sidebar menu menu-xs flex-1 overflow-y-auto px-2 py-2 bg-transparent">
                 {
                   categories.map((cat) => (
-                    <div class="mb-4">
-                      <div class="px-1 mb-1.5">
-                        <span class="text-sm font-bold tracking-tight">
-                          <span class="text-primary/50 font-mono mr-0.5">/</span>
-                          {cat}
-                        </span>
-                      </div>
-                      <ul class="ml-3 space-y-0.5 border-l border-base-300/30 pl-2">
-                        {sortedNotes
-                          .filter((n) => getCategory(n) === cat)
-                          .map((n) => (
-                            <li>
-                              <a
-                                href={`/notes/${n.id}`}
-                                class:list={[
-                                  "nav-item font-mono text-xs block py-0.5 px-1 truncate transition-colors",
-                                  n.id === entry.id
-                                    ? "text-primary bg-primary/8"
-                                    : "text-base-content/45 hover:text-base-content/80 hover:bg-base-200/30",
-                                ]}
-                                data-title={n.data.title.toLowerCase()}
-                                data-tags={[
-                                  ...n.data.tags,
-                                  ...extractInlineHashtags(n.body ?? ""),
-                                ].join(",")}
-                              >
-                                {n.id === entry.id ? "▶ " : ""}
-                                {n.data.title}
-                              </a>
-                            </li>
-                          ))}
-                      </ul>
-                    </div>
+                    <li class="w-full">
+                      <details open={cat === getCategory(entry)}>
+                        <summary class="font-bold tracking-tight text-sm">
+                          <span class="text-primary/50 font-mono">/</span>{cat}
+                        </summary>
+                        <ul class="w-full">
+                          {sortedNotes
+                            .filter((n) => getCategory(n) === cat)
+                            .map((n) => (
+                              <li class="w-full">
+                                <a
+                                  href={`/notes/${n.id}`}
+                                  class:list={[
+                                    "nav-item font-mono text-xs tooltip tooltip-right",
+                                    n.id === entry.id ? "active" : "",
+                                  ]}
+                                  data-tip={n.data.title}
+                                  data-title={n.data.title.toLowerCase()}
+                                  data-tags={[
+                                    ...n.data.tags,
+                                    ...extractInlineHashtags(n.body ?? ""),
+                                  ].join(",")}
+                                >
+                                  <span>{n.data.title}</span>
+                                </a>
+                              </li>
+                            ))}
+                        </ul>
+                      </details>
+                    </li>
                   ))
                 }
-              </nav>
+              </ul>
             </aside>
           </div>
         </div>
@@ -404,7 +405,15 @@ while ((hm = headingRe.exec(entry.body ?? "")) !== null) {
             )
           }
 
-          <div class="px-4 py-6">
+          <div class="px-4 pt-4 pb-1 border-t border-base-300/40">
+            <time
+              datetime={entry.data.publishDate.toISOString()}
+              class="font-mono text-[10px] text-base-content/30 uppercase tracking-widest"
+            >
+              {formatDate(entry.data.publishDate)}
+            </time>
+          </div>
+          <div class="px-4 py-4">
             <Author />
           </div>
         </aside>

src/pages/notes/index.astro

@@ -25,31 +25,17 @@ const searchIndex = Object.fromEntries(
 >
   <main class="max-w-4xl mx-auto px-4 py-16 sm:py-20">
     <div class="text-center mb-12">
-      <div class="flex items-center justify-center gap-2 mb-4">
-        <Shield size={20} class="text-primary/60" />
-        <span
-          class="font-mono text-xs text-primary/60 tracking-widest uppercase"
-          >security notes</span
-        >
-      </div>
       <h1 class="text-4xl sm:text-5xl font-bold mb-4">Notes</h1>
-      <p class="text-base-content/50 max-w-md mx-auto">
+      <p class="text-xl text-base-content/70">
         Reference sheets on cybersecurity tools and techniques.
       </p>
     </div>
 
     <div class="mb-12 max-w-sm mx-auto">
-      <div
-        class="flex items-center gap-2 border border-base-300/60 px-3 py-2 bg-base-200/30 focus-within:border-primary/40 transition-colors"
-      >
-        <span class="font-mono text-sm text-base-content/25">›</span>
-        <input
-          data-search
-          type="text"
-          placeholder="search or #tag..."
-          class="bg-transparent font-mono text-sm text-base-content/70 placeholder:text-base-content/25 outline-none w-full"
-        />
-      </div>
+      <label class="input w-full">
+        <span class="text-base-content/25">›</span>
+        <input data-search type="text" placeholder="search or #tag..." />
+      </label>
       <p class="font-mono text-[10px] text-base-content/20 mt-1.5 text-center">
         use #tag to filter by tag
       </p>
@@ -82,18 +68,20 @@ const searchIndex = Object.fromEntries(
                       data-tags={n.data.tags.join(",")}
                     >
                       <div class="flex-1 min-w-0">
-                        <div class="flex items-baseline gap-3 mb-0.5">
+                        <div class="flex flex-col mb-0.5">
                           <span class="font-semibold text-sm group-hover:text-primary transition-colors">
                             {n.data.title}
                           </span>
-                          <span class="hidden sm:block text-xs text-base-content/35 truncate">
-                            {n.data.description}
-                          </span>
+                          {n.data.description && (
+                            <span class="text-xs text-base-content/35 truncate">
+                              {n.data.description}
+                            </span>
+                          )}
                         </div>
                         {n.data.tags.length > 0 && (
                           <div class="flex flex-wrap gap-1 mt-1">
                             {n.data.tags.map((tag) => (
-                              <span class="font-mono text-[10px] px-1.5 py-0.5 border border-base-300/40 text-base-content/25">
+                              <span class="badge badge-ghost badge-xs font-mono text-base-content/30">
                                 {tag}
                               </span>
                             ))}

src/styles/global.css

@@ -26,9 +26,9 @@
   --color-warning-content: oklch(19.359% 0.042 109.769);
   --color-error: oklch(62.795% 0.257 29.233);
   --color-error-content: oklch(12.559% 0.051 29.233);
-  --radius-selector: 0rem;
-  --radius-field: 0rem;
-  --radius-box: 0rem;
+  --radius-selector: 0.25rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
   --size-selector: 0.25rem;
   --size-field: 0.25rem;
   --border: 1px;