Improving the note section!

Author: mleonelli

src/components/sections/notes/NotesSearch.astro

@@ -0,0 +1,144 @@
+---
+import type { Note } from '../../../types/NoteType';
+
+interface Props {
+  notes: Note[];
+}
+
+const { notes } = Astro.props;
+
+// Extract unique types and tags from notes
+const types = Array.from(new Set(notes.map(n => n.data.type).filter(Boolean))) as string[];
+const tags = Array.from(new Set(notes.flatMap(n => n.data.tags || [])));
+---
+
+<section class="py-12 bg-background">
+  <div class="container mx-auto px-4 max-w-4xl">
+    <h1 class="text-center text-3xl mb-10">Notes</h1>
+    
+    <div class="mb-8 space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-2">Filter by Type</label>
+        <div class="flex flex-wrap gap-2">
+          <button 
+            class="filter-btn px-4 py-2 rounded border border-primary text-primary hover:bg-primary hover:text-white transition-colors active"
+            data-filter="all"
+          >
+            All
+          </button>
+          {types.map(type => (
+            <button 
+              class="filter-btn px-4 py-2 rounded border border-gray-300 hover:border-primary hover:text-primary transition-colors"
+              data-filter={`type-${type}`}
+              data-type={type}
+            >
+              {type.charAt(0).toUpperCase() + type.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium mb-2">Filter by Tag</label>
+        <div class="flex flex-wrap gap-2">
+          {tags.map(tag => (
+            <button 
+              class="tag-filter px-3 py-1 rounded-full text-sm border border-gray-300 hover:border-primary hover:text-primary transition-colors"
+              data-tag={tag}
+            >
+              #{tag}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+
+    <div id="notes-container" class="space-y-6">
+      {notes.map((note: Note, index: number) => (
+        <div 
+          class="note-item transition-all duration-300"
+          data-type={note.data.type || 'all'}
+          data-tags={JSON.stringify(note.data.tags || [])}
+        >
+          <a href={`/notes/${note.slug}`} class="block hover:opacity-80">
+            <h3 class="text-xl font-semibold mb-2">{note.data.title}</h3>
+            <p class="text-gray-600 dark:text-gray-400 mb-3">{note.data.description}</p>
+            {(note.data.tags && note.data.tags.length > 0) && (
+              <div class="flex flex-wrap gap-2 mb-2">
+                {note.data.tags.map(tag => (
+                  <span class="inline-block px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+            )}
+            <span class="text-sm text-gray-500">
+              {new Date(note.data.datetime).toLocaleDateString()}
+              {note.data.type && ` • ${note.data.type}`}
+            </span>
+          </a>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const tagBtns = document.querySelectorAll('.tag-filter');
+    const noteItems = document.querySelectorAll('.note-item');
+
+    let activeType = 'all';
+    let activeTags = new Set<string>();
+
+    const updateDisplay = () => {
+      noteItems.forEach(item => {
+        const itemType = item.getAttribute('data-type');
+        const itemTags = JSON.parse(item.getAttribute('data-tags') || '[]');
+
+        const typeMatch = activeType === 'all' || itemType === activeType;
+        const tagMatch = activeTags.size === 0 || itemTags.some(tag => activeTags.has(tag));
+
+        if (typeMatch && tagMatch) {
+          item.classList.remove('hidden');
+          item.classList.add('opacity-100');
+        } else {
+          item.classList.add('hidden');
+          item.classList.remove('opacity-100');
+        }
+      });
+    };
+
+    filterBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        filterBtns.forEach(b => b.classList.remove('active', 'bg-primary', 'text-white'));
+        btn.classList.add('active', 'bg-primary', 'text-white');
+        activeType = btn.getAttribute('data-filter')?.replace('type-', '') || 'all';
+        updateDisplay();
+      });
+    });
+
+    tagBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tag = btn.getAttribute('data-tag');
+        if (tag) {
+          if (activeTags.has(tag)) {
+            activeTags.delete(tag);
+            btn.classList.remove('active', 'border-primary', 'text-primary', 'bg-primary/10');
+          } else {
+            activeTags.add(tag);
+            btn.classList.add('active', 'border-primary', 'text-primary', 'bg-primary/10');
+          }
+          updateDisplay();
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .active {
+    @apply bg-primary text-white border-primary;
+  }
+</style>

src/content/config.ts

@@ -15,8 +15,8 @@ const notesCollection = defineCollection({
     title: z.string(),
     description: z.string(),
     datetime: z.string().or(z.date()),
-    // Optional: add type field if you want to differentiate note types
-    type: z.enum(['technical', 'personal', 'learning']).optional(),
+    type: z.enum(['technical', 'personal', 'learning', 'linkedin']).optional(),
+    tags: z.array(z.string()).optional(),
   }),
 });
 

src/content/notes/technical/regex.mdx

@@ -2,6 +2,11 @@
 title: Regular Expressions (Regex) Cheatsheet
 description: A concise, one-page reference for the most common regex tokens and patterns
 datetime: 2025-12-17
+type: technical
+tags:
+  - regex
+  - pattern-matching
+  - javascript
 ---
 
 # 🧩 Regular Expressions (Regex) Cheatsheet

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

@@ -0,0 +1,45 @@
+---
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+
+import Layout from '../../layouts/Layout.astro';
+
+export const getStaticPaths = async () => {
+    const notes = await getCollection("notes");
+    const paths = notes.map(note => {
+        return {
+            params: {
+                slug: note.slug
+            },
+            props: {
+                note
+            }
+        }
+    });
+
+    return paths;
+}
+
+type Props = {
+    note: CollectionEntry<"notes">
+}
+
+const {note} = Astro.props;
+const {Content} = await note.render();
+---
+
+<Layout title={note.data.title}>
+    <section class="flex justify-center mt-12">
+        <div id="markdown" class="prose prose-lg overflow-visible relative mb-5">
+            <Content />
+        </div>
+    </section>
+
+    <script>
+        import { toggleMarkdownTheme } from "../../scripts/theme";
+
+        const theme = document.documentElement.dataset.theme;
+
+        toggleMarkdownTheme(theme)
+    </script>
+</Layout>

src/pages/notes/index.astro

@@ -0,0 +1,14 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+import NotesSearch from '../../components/sections/notes/NotesSearch.astro';
+
+const notes = await getCollection("notes");
+const sortedNotes = notes.sort((a, b) =>
+    new Date(b.data.datetime).getTime() - new Date(a.data.datetime).getTime()
+);
+---
+
+<Layout title="Notes">
+    <NotesSearch notes={sortedNotes} />
+</Layout>

src/types/NoteType.ts

@@ -7,5 +7,7 @@ export interface Note {
         description: string;
         datetime: string;
         image?: string;
+        type?: string;
+        tags?: string[];
     }
 }