diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro
new file mode 100644
index 0000000..cca9df7
--- /dev/null
+++ b/src/components/JournalList.astro
@@ -0,0 +1,52 @@
+---
+import { Picture } from 'astro-imagetools/components';
+
+import type { CollectionEntry } from 'astro:content';
+interface Props {
+ entries: CollectionEntry<'journal'>[];
+}
+
+import { pickTwoRandomColors } from '../utils';
+import { Link, Subsubheadline } from '../components';
+
+const { entries } = Astro.props;
+---
+
+
diff --git a/src/pages/journal.astro b/src/pages/journal.astro
index 070ff1b..a3fece1 100644
--- a/src/pages/journal.astro
+++ b/src/pages/journal.astro
@@ -5,14 +5,19 @@ import { sortByDate } from '../utils';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
+import JournalList from '../components/JournalList.astro';
+import { Tag } from '../components';
+
import { Content as Intro } from '../text/journal/intro.mdx';
-import { Link } from '../components';
import { mapping } from '../mdx-components';
const allJournal = await getCollection('journal');
allJournal.sort(sortByDate);
+const uniqueTags = [...new Set(allJournal.map((entry) => entry.data.tags).flat())];
+uniqueTags.sort((a, b) => a.localeCompare(b));
+
const title = 'Journal';
const description = '…';
---
@@ -25,18 +30,8 @@ const description = '…';
>
-
-
+
+
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
new file mode 100644
index 0000000..830ba84
--- /dev/null
+++ b/src/pages/tags/[tag].astro
@@ -0,0 +1,48 @@
+---
+import { getCollection } from 'astro:content';
+
+import { sortByDate } from '../../utils';
+
+import GridLayout from '../../layouts/GridLayout.astro';
+import PageTitle from '../../components/PageTitle.astro';
+import JournalList from '../../components/JournalList.astro';
+
+console.log('test');
+
+export async function getStaticPaths() {
+ const journalEntries = await getCollection('journal');
+ journalEntries.sort(sortByDate);
+
+ const uniqueTags = [...new Set(journalEntries.map((entry) => entry.data.tags).flat())];
+
+ return uniqueTags.map((tag) => {
+ const filteredEntries = journalEntries.filter((entry) => entry.data.tags.includes(tag));
+ return {
+ params: { tag },
+ props: {
+ entries: filteredEntries,
+ },
+ };
+ });
+}
+
+const { tag } = Astro.params;
+const { entries } = Astro.props;
+
+const title = 'Journal';
+const description = '…';
+---
+
+
+
+ Tag: {tag}
+
+
+
diff --git a/src/schema/journal.ts b/src/schema/journal.ts
index 76801f7..6f94c57 100644
--- a/src/schema/journal.ts
+++ b/src/schema/journal.ts
@@ -13,24 +13,17 @@ export const journal = defineCollection({
z.enum([
'book',
'code',
- 'decentralization',
'design',
'download',
'film',
- 'health',
- 'minimalism',
- 'note-taking',
- 'personal',
'philosophy',
'poetry',
'politics',
'productivity',
- 'publication',
+ 'recommendation',
'self-improvement',
'software',
- 'survival',
- 'tip',
- 'typography',
+ 'technology',
'writing',
])
),
diff --git a/src/styles/global.css b/src/styles/global.css
index 6d8d0b1..b83e46a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -182,4 +182,21 @@
}
}
}
+
+ .journal-card {
+ @apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 hover:scale-105 dark:border-white/25 md:row-span-5;
+
+ & img,
+ & picture {
+ @apply !h-full w-full object-cover;
+ }
+
+ & img {
+ @apply !h-full scale-100 blur-0 brightness-[50%] filter transition duration-300 ease-in-out;
+ }
+
+ &:hover img {
+ @apply scale-105 blur-sm brightness-[70%];
+ }
+ }
}
diff --git a/src/text/journal/intro.mdx b/src/text/journal/intro.mdx
index 4fa9b18..a2e6a88 100644
--- a/src/text/journal/intro.mdx
+++ b/src/text/journal/intro.mdx
@@ -1 +1 @@
- Writing is a passion for me. I’ve written a huge collection of essays about [Ninja & Ninjutsu](https://www.kogakure.de/) that I later converted into a book. The online publishing platform Medium selected [one of my essays](/attention/) as a recommendation of the day.
+Writing is my passion. I've compiled a large collection of essays on [Ninja & Ninjutsu](https://www.kogakure.de/en/) which I later turned into a book. The online publishing platform Medium chose [one of my essays](/attention/) as their recommendation of the day. Additionally, I write [Haiku](/haiku/) poems.
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dcc8802..24f4eeb 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
export * from './date';
+export * from './pick-two-random-colors';
export * from './remark-reading-time';
export * from './sort-by-date';
export * from './sort-by-sortkey';
diff --git a/src/utils/pick-two-random-colors.ts b/src/utils/pick-two-random-colors.ts
new file mode 100644
index 0000000..9b8da1d
--- /dev/null
+++ b/src/utils/pick-two-random-colors.ts
@@ -0,0 +1,18 @@
+import colorsJson from '../data/colors-japan.json';
+
+interface Color {
+ id: string;
+ name: string;
+ description: string;
+ color: string;
+}
+
+export const pickTwoRandomColors = (): [string, string] => {
+ const colors: Color[] = colorsJson;
+ const randomIndex1 = Math.floor(Math.random() * colors.length);
+ let randomIndex2 = Math.floor(Math.random() * colors.length);
+ while (randomIndex2 === randomIndex1) {
+ randomIndex2 = Math.floor(Math.random() * colors.length);
+ }
+ return [colors[randomIndex1].color, colors[randomIndex2].color];
+};