mirror of
https://github.com/anotherhadi/blog.git
synced 2026-05-20 21:42:33 +02:00
Hadi
+12
-149
@@ -1,22 +1,24 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
import { ChevronRight, Shield } from "@lucide/astro";
|
||||
import { getCategory } from "../../utils/notes";
|
||||
import NotesSearch from "../../components/NotesSearch.svelte";
|
||||
|
||||
const notes = await getCollection("notes");
|
||||
const sortedNotes = notes.sort(
|
||||
(a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
|
||||
);
|
||||
|
||||
const categories = [...new Set(notes.map(getCategory))].sort();
|
||||
|
||||
const searchIndex = Object.fromEntries(
|
||||
sortedNotes.map((n) => [
|
||||
n.id,
|
||||
[n.data.title, n.data.description, n.body ?? ""].join(" ").toLowerCase(),
|
||||
]),
|
||||
);
|
||||
const searchNotes = sortedNotes.map((n) => ({
|
||||
id: n.id,
|
||||
title: n.data.title,
|
||||
description: n.data.description,
|
||||
tags: n.data.tags,
|
||||
category: getCategory(n),
|
||||
searchText: [n.data.title, n.data.description, n.body ?? ""]
|
||||
.join(" ")
|
||||
.toLowerCase(),
|
||||
}));
|
||||
---
|
||||
|
||||
<Layout
|
||||
@@ -30,145 +32,6 @@ const searchIndex = Object.fromEntries(
|
||||
Reference sheets on cybersecurity tools and techniques.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-12 max-w-sm mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="notes-container" class="space-y-12">
|
||||
{
|
||||
categories.map((cat) => {
|
||||
const catNotes = sortedNotes.filter((n) => getCategory(n) === cat);
|
||||
return (
|
||||
<section data-category={cat.toLowerCase()}>
|
||||
<div class="flex items-baseline gap-3 mb-4">
|
||||
<h2 class="text-xl font-bold tracking-tight">
|
||||
<span class="text-primary/50 font-mono mr-1">/</span>
|
||||
{cat}
|
||||
</h2>
|
||||
<span class="font-mono text-xs text-base-content/25">
|
||||
{catNotes.length} note{catNotes.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div class="border-t border-base-300/40 mb-1" />
|
||||
|
||||
<ul class="divide-y divide-base-300/20">
|
||||
{catNotes.map((n) => (
|
||||
<li>
|
||||
<a
|
||||
href={`/notes/${n.id}`}
|
||||
class="note-card group flex items-center gap-4 py-3 hover:bg-base-200/30 px-2 -mx-2 transition-colors"
|
||||
data-id={n.id}
|
||||
data-tags={n.data.tags.join(",")}
|
||||
>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex flex-col mb-0.5">
|
||||
<span class="font-semibold text-sm group-hover:text-primary transition-colors">
|
||||
{n.data.title}
|
||||
</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="badge badge-ghost badge-xs font-mono text-base-content/30">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight
|
||||
size={14}
|
||||
class="text-base-content/20 group-hover:text-primary/50 shrink-0 transition-colors"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="empty-state"
|
||||
class="hidden text-center py-20 font-mono text-sm text-base-content/25"
|
||||
>
|
||||
no results.
|
||||
</div>
|
||||
|
||||
<p class="text-center font-mono text-xs text-base-content/20 mt-16">
|
||||
<span id="note-count">{notes.length}</span> note{
|
||||
notes.length !== 1 ? "s" : ""
|
||||
} total
|
||||
</p>
|
||||
<NotesSearch client:load notes={searchNotes} />
|
||||
</main>
|
||||
|
||||
<script is:inline define:vars={{ searchIndex }}>
|
||||
function init() {
|
||||
const noteCards = document.querySelectorAll(".note-card");
|
||||
const sections = document.querySelectorAll("[data-category]");
|
||||
const emptyState = document.getElementById("empty-state");
|
||||
const noteCount = document.getElementById("note-count");
|
||||
const container = document.getElementById("notes-container");
|
||||
|
||||
function filter(raw) {
|
||||
const isTag = raw.startsWith("#");
|
||||
const query = isTag ? raw.slice(1) : raw;
|
||||
|
||||
let visible = 0;
|
||||
noteCards.forEach((card) => {
|
||||
const id = card.dataset.id ?? "";
|
||||
const tags = card.dataset.tags ? card.dataset.tags.split(",") : [];
|
||||
const show =
|
||||
!query ||
|
||||
(isTag
|
||||
? tags.some((t) => t.includes(query)) ||
|
||||
(searchIndex[id] ?? "").includes(`#${query}`)
|
||||
: (searchIndex[id] ?? "").includes(query));
|
||||
card.style.display = show ? "" : "none";
|
||||
if (show) visible++;
|
||||
});
|
||||
|
||||
sections.forEach((section) => {
|
||||
const anyVisible = [...section.querySelectorAll(".note-card")].some(
|
||||
(c) => c.style.display !== "none",
|
||||
);
|
||||
section.style.display = anyVisible ? "" : "none";
|
||||
});
|
||||
|
||||
noteCount.textContent = String(visible);
|
||||
container.style.display = visible > 0 ? "" : "none";
|
||||
emptyState.classList.toggle("hidden", visible > 0);
|
||||
}
|
||||
|
||||
document.querySelectorAll("[data-search]").forEach((input) => {
|
||||
input.addEventListener("input", (e) => {
|
||||
filter(e.target.value.toLowerCase().trim());
|
||||
});
|
||||
});
|
||||
|
||||
const urlTag = new URLSearchParams(window.location.search).get("tag");
|
||||
if (urlTag) {
|
||||
document.querySelectorAll("[data-search]").forEach((i) => {
|
||||
i.value = `#${urlTag}`;
|
||||
});
|
||||
filter(`#${urlTag}`);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("astro:page-load", init);
|
||||
</script>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user