January 24 Winter Days
21. January 2024
diff --git a/design/src/styles/common/button.css b/design/src/styles/common/button.css
index b015618..4f07e05 100644
--- 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
new file mode 100644
index 0000000..e375304
--- /dev/null
+++ 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
index cf42355..0c12e3e 100644
--- 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
index 76da004..6cf0083 100644
--- 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
new file mode 100644
index 0000000..cbae985
--- /dev/null
+++ b/site/src/components/FilterButtons.astro
@@ -0,0 +1,8 @@
+---
+var { current } = Astro.props;
+---
+
\ No newline at end of file
diff --git a/site/src/components/Note.astro b/site/src/components/Note.astro
index 724dfa1..b7b870b 100644
--- 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 `${md.utils.escapeHtml(str)}
`;
},
});
+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) => {
{item.title}
-
{getFormattedDate(item.date_created)}
+ {
+ !hideDate && (
+
+ {getFormattedDate(item.date_created)}
+
+ )
+ }
diff --git a/site/src/components/NoteList.astro b/site/src/components/NoteList.astro
index 3f4c423..d606822 100644
--- 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);
---
-
- {items.map((item: any) => )}
-
+{items.length === 0?
No notes found with this tag.
+ : (
+
+ {items.map((item: any) => )}
+
+ )
+}
diff --git a/site/src/functions/notes.func.js b/site/src/functions/notes.func.js
index c6a4f7f..b189a13 100644
--- 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
new file mode 100644
index 0000000..60ae72a
--- /dev/null
+++ 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;
+---
+
+
+
+
+ Small notes related to development, personal recaps, images and more.
+
+
+
+
+
+
+
diff --git a/site/src/pages/notes.astro b/site/src/pages/notes.astro
index 92c144d..6ffb572 100644
--- 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';
---
-
-
-
-
- Everything that pops in my mind and isn't a full blog post.
-
-
-
-
-
+
diff --git a/site/src/pages/notes/365pictures.astro b/site/src/pages/notes/365pictures.astro
new file mode 100644
index 0000000..0193769
--- /dev/null
+++ b/site/src/pages/notes/365pictures.astro
@@ -0,0 +1,6 @@
+---
+import NotesLayout from '../../layouts/NotesPage.astro';
+---
+
+ 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.
+
diff --git a/site/src/pages/notes/recap.astro b/site/src/pages/notes/recap.astro
new file mode 100644
index 0000000..46d7887
--- /dev/null
+++ b/site/src/pages/notes/recap.astro
@@ -0,0 +1,4 @@
+---
+import NotesLayout from '../../layouts/NotesPage.astro';
+---
+