anotherhadi/blog
1
Fork 0
mirror of https://github.com/anotherhadi/blog.git synced 2026-05-20 05:32:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Testing on notes

Browse Source 
Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>
This commit is contained in:
Hadi
2026-04-27 23:12:57 +02:00
parent 5472ac3449
commit f00515e4c3
8 changed files with 277 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NoteVars.astro
+110
View File
@@ -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
View File
@@ -6,3 +6,9 @@ publishDate: 2026-04-24
---
## Notes
Salut comment ça va ! $test1
```bash
nmap -p $port "$Ip"
```
src/content/notes/test2.md
+14
View File
@@ -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
+14
View File
@@ -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
+115 -106
View File
@@ -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
+12 -24
View File
@@ -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
+3 -3
View File
@@ -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;
todolist.txt
+3
View File
@@ -0,0 +1,3 @@
- Fix left sidebar overflow/minwidth issue
- Transform to svelte 5 components
- The cat just TP