Skip to content

Commit

Permalink
Merge pull request #69 from aaronczichon/feature/filter-notes
Browse files Browse the repository at this point in the history
Feature: Note Lists
  • Loading branch information
aaronczichon authored Jan 9, 2025
2 parents 27289ac + 158aba6 commit f7960af
Showing 13 changed files with 117 additions and 33 deletions.
5 changes: 5 additions & 0 deletions design/src/blog.html
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions design/src/styles/common/button.css
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 9 additions & 0 deletions design/src/styles/common/filter-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
ul.filter {
list-style-type: none;
display: flex;
padding: 0;
}

ul.filter > li {
margin-right: 8px;
}
1 change: 1 addition & 0 deletions design/src/styles/index.css
Original file line number Diff line number Diff line change
@@ -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";
5 changes: 5 additions & 0 deletions design/src/styles/layout/notes.css
Original file line number Diff line number Diff line change
@@ -26,3 +26,8 @@
.note-list-item--default {
font-weight: initial;
}

.note-list-item img {
max-width: 100%;
max-height: 400px;
}
8 changes: 8 additions & 0 deletions site/src/components/FilterButtons.astro
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 22 additions & 2 deletions site/src/components/Note.astro
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 10 additions & 4 deletions site/src/components/NoteList.astro
Original file line number Diff line number Diff line change
@@ -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>
)
}
7 changes: 6 additions & 1 deletion site/src/functions/notes.func.js
Original file line number Diff line number Diff line change
@@ -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;
};
33 changes: 33 additions & 0 deletions site/src/layouts/NotesPage.astro
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 2 additions & 26 deletions site/src/pages/notes.astro
Original file line number Diff line number Diff line change
@@ -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" />
6 changes: 6 additions & 0 deletions site/src/pages/notes/365pictures.astro
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 4 additions & 0 deletions site/src/pages/notes/recap.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
import NotesLayout from '../../layouts/NotesPage.astro';
---
<NotesLayout title="Aaron Czichon - Notes - Recap" current="recap" />

0 comments on commit f7960af

Please sign in to comment.