aaronczichon · aaronczichon · Jan 9, 2025 · Jan 8, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git a/design/src/blog.html b/design/src/blog.html
@@ -46,6 +46,11 @@ <h1>Blog</h1>
 			All thoughts, notes, and ideas are my own and doesn't represents one of my customers or my
 			employer.
 		</p>
+		<ul class="filter">
+			<li><a class="disabled button" href="blog.html">All</a></li>
+			<li><a class="button" href="blog.html">Monthly Recap</a></li>
+			<li><a class="button" href="blog.html">365-Pictures</a></li>
+		</ul>
 		<div class="entry-grid">
 			<a href="blog-entry.html" class="entry">
 				<h3>January 24 Winter Days<br /><span class="entry--date">21. January 2024</span></h3>

diff --git a/design/src/styles/common/button.css b/design/src/styles/common/button.css
@@ -14,3 +14,9 @@
 	border-radius: var(--box-border-radius);
 	padding: 12px;
 }
+
+.button.disabled {
+	border-color: var(--primary-font-color);
+	color: var(--primary-font-color);
+	cursor: default;
+}
diff --git a/design/src/styles/common/filter-list.css b/design/src/styles/common/filter-list.css
@@ -0,0 +1,9 @@
+ul.filter {
+	list-style-type: none;
+	display: flex;
+	padding: 0;
+}
+
+ul.filter > li {
+	margin-right: 8px;
+}
diff --git a/design/src/styles/index.css b/design/src/styles/index.css
@@ -8,6 +8,7 @@
 @import "./common/code.css";
 @import "./common/divider.css";
 @import "./common/button.css";
+@import "./common/filter-list.css";
 
 @import "./layout/main.css";
 @import "./layout/hero.css";

diff --git a/design/src/styles/layout/notes.css b/design/src/styles/layout/notes.css
@@ -26,3 +26,8 @@
 .note-list-item--default {
 	font-weight: initial;
 }
+
+.note-list-item img {
+	max-width: 100%;
+	max-height: 400px;
+}
diff --git a/site/src/components/FilterButtons.astro b/site/src/components/FilterButtons.astro
@@ -0,0 +1,8 @@
+---
+var { current } = Astro.props;
+---
+<ul class="filter" style="padding-top: 16px; padding-bottom: 8px;">
+  <li><a class={current === undefined ? 'disabled button' : 'button'} href="/notes">Notes</a></li>
+  <li><a class={current === 'recap' ? 'disabled button' : 'button'} href="/notes/recap">Monthly Recap</a></li>
+  <li><a class={current === '365pictures' ? 'disabled button' : 'button'} href="/notes/365pictures">365-Pictures</a></li>
+</ul>
diff --git a/site/src/components/Note.astro b/site/src/components/Note.astro
@@ -1,13 +1,27 @@
 ---
 import markdownit from 'markdown-it';
 
-const { item } = Astro.props;
+const { item, hideDate } = Astro.props;
 
 const md: markdownit = markdownit({
 	highlight: (str: string, lang: string) => {
 		return `<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;"><code style="padding-left: 8px;">${md.utils.escapeHtml(str)}</code></pre>`;
 	},
 });
+md.renderer.rules.image = (tokens, idx, options, env, self) => {
+	const token = tokens[idx];
+	if (!token || !token.attrs) {
+		return self.renderToken(tokens, idx, options);
+	}
+	let src = token.attrs[token.attrIndex('src')][1];
+
+	if (src.startsWith('https://directus.aaronczichon.de/assets')) {
+		src += '?quality=80&width=800';
+	}
+
+	token.attrs[token.attrIndex('src')][1] = src;
+	return self.renderToken(tokens, idx, options);
+};
 
 const getFormattedDate = (date: string) => {
 	const d = new Date(date);
@@ -21,7 +35,13 @@ const getFormattedDate = (date: string) => {
     <a href={`#${item.id}`} target="_blank">
       <h3 id={item.id}>{item.title}</h3>
     </a>
-    <p class="note-list-item--time">{getFormattedDate(item.date_created)}</p>
+    {
+      !hideDate && (
+        <p class="note-list-item--time">
+          {getFormattedDate(item.date_created)}
+        </p>
+      )
+    }
     <p set:html={md.render(item.text)} />
     <hr />
   </article>

diff --git a/site/src/components/NoteList.astro b/site/src/components/NoteList.astro
@@ -2,9 +2,15 @@
 import { fetchNotes } from '../functions/notes.func';
 import Note from './Note.astro';
 
-const items = await fetchNotes();
+var { filter, hideDate } = Astro.props;
+
+const items = await fetchNotes(filter);
 ---
 
-<ol class="note-list">
-  {items.map((item: any) => <Note item={item} />)}
-</ol>
+{items.length === 0? <p>No notes found with this tag.</p>
+  : (
+      <ol class="note-list">
+        {items.map((item: any) => <Note item={item} hideDate={hideDate} />)}
+      </ol>
+    )
+}
diff --git a/site/src/functions/notes.func.js b/site/src/functions/notes.func.js
@@ -1,6 +1,6 @@
 const BASE_URL = 'https://directus.aaronczichon.de';
 
-export const fetchNotes = async () => {
+export const fetchNotes = async (filter) => {
 	const response = await fetch(`${BASE_URL}/items/microblog`);
 	const result = await response.json();
 	let items = result.data;
@@ -11,5 +11,10 @@ export const fetchNotes = async () => {
 
 		return aCreated < bCreated ? 1 : -1;
 	});
+	if (filter) {
+		items = items.filter(
+			(item) => item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()),
+		);
+	} else items = items.filter((item) => !item.tag);
 	return items;
 };
diff --git a/site/src/layouts/NotesPage.astro b/site/src/layouts/NotesPage.astro
@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+import NoteList from '../components/NoteList.astro';
+import FilterButtons from '../components/FilterButtons.astro';
+import Layout from './Layout.astro';
+
+import rssIcon from '../resources/rss.svg';
+
+var { title, current, hideDate } = Astro.props;
+---
+
+<Layout title={title}>
+  <main class="container">
+    <h1>
+      <a href="/notes" style="text-decoration: none;">Notes</a>
+      <a title="Yeah RSS is still cool!" href="/notes/rss.xml"
+        ><Image
+          style="width: 25px; height: 25px"
+          src={rssIcon}
+          alt="RSS Icon for subscribe to RSS feed."
+          widths={[30]}
+          sizes={`30px`}
+        /></a
+      >
+    </h1>
+    <p>Small notes related to development, personal recaps, images and more.</p>
+    <FilterButtons current={current} />
+    <slot />
+    <ol class="note-list">
+      <NoteList filter={current} hideDate={hideDate} />
+    </ol>
+  </main>
+</Layout>
diff --git a/site/src/pages/notes.astro b/site/src/pages/notes.astro
@@ -1,28 +1,4 @@
 ---
-import { Image } from 'astro:assets';
-import NoteList from '../components/NoteList.astro';
-import Layout from '../layouts/Layout.astro';
-
-import rssIcon from '../resources/rss.svg';
+import NotesLayout from '../layouts/NotesPage.astro';
 ---
-
-<Layout title="Aaron Czichon - Notes">
-  <main class="container">
-    <h1>
-      <a href="/notes" style="text-decoration: none;">Notes</a>
-      <a title="Yeah RSS is still cool!" href="/notes/rss.xml"
-        ><Image
-          style="width: 25px; height: 25px"
-          src={rssIcon}
-          alt="RSS Icon for subscribe to RSS feed."
-          widths={[30]}
-          sizes={`30px`}
-        /></a
-      >
-    </h1>
-    <p>Everything that pops in my mind and isn't a full blog post.</p>
-    <ol class="note-list">
-      <NoteList />
-    </ol>
-  </main>
-</Layout>
+<NotesLayout title="Aaron Czichon - Notes" />
diff --git a/site/src/pages/notes/365pictures.astro b/site/src/pages/notes/365pictures.astro
@@ -0,0 +1,6 @@
+---
+import NotesLayout from '../../layouts/NotesPage.astro';
+---
+<NotesLayout title="Aaron Czichon - Notes - 365 Pictures" current="365pictures" hideDate="true">
+  <p>This year, 2025, I try something new. Also to decouple myself a bit more from social media. This pages contains one picture of every day this year.</p>
+</NotesLayout>
diff --git a/site/src/pages/notes/recap.astro b/site/src/pages/notes/recap.astro
@@ -0,0 +1,4 @@
+---
+import NotesLayout from '../../layouts/NotesPage.astro';
+---
+<NotesLayout title="Aaron Czichon - Notes - Recap" current="recap" />