feat: add bookmarks data file and render in index

Create bookmarks.yaml data file with sample entries and update
index.astro to import, parse, and display bookmarks with format
DD/MM/YY    Site Name (domain.com)
This commit is contained in:
Lewis Wynne 2026-01-23 01:28:19 +00:00
parent 8a09357036
commit a88af69ffd
3 changed files with 35 additions and 1 deletions

View file

@ -7,9 +7,11 @@
"preview": "astro preview"
},
"dependencies": {
"astro": "^5.16.13"
"astro": "^5.16.13",
"js-yaml": "^4.1.1"
},
"devDependencies": {
"@types/js-yaml": "^4.0.9",
"remark-directive": "^3.0.0",
"remark-gfm": "^4.0.0",
"remark-slug": "^7.0.1",

View file

@ -0,0 +1,7 @@
- date: 2026-01-15
title: Hacker News
url: https://news.ycombinator.com
- date: 2026-01-10
title: Astro Documentation
url: https://docs.astro.build/en/getting-started/

View file

@ -1,21 +1,46 @@
---
import { getCollection } from 'astro:content';
import '../styles/global.css';
import yaml from 'js-yaml';
import bookmarksRaw from '../data/bookmarks.yaml?raw';
interface Bookmark {
date: string;
title: string;
url: string;
}
const posts = await getCollection('posts');
const sorted = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const bookmarks = yaml.load(bookmarksRaw) as Bookmark[];
function formatDate(date: Date): string {
const d = String(date.getDate()).padStart(2, '0');
const m = String(date.getMonth() + 1).padStart(2, '0');
const y = String(date.getFullYear()).slice(-2);
return `${d}/${m}/${y}`;
}
function formatBookmarkDate(dateStr: string): string {
const date = new Date(dateStr);
return formatDate(date);
}
function extractDomain(url: string): string {
try {
const parsed = new URL(url);
return parsed.hostname.replace(/^www\./, '');
} catch {
return url;
}
}
---
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Blog</title></head>
<body>
<pre set:html={sorted.map(post => `${formatDate(post.data.date)} <a href="/${post.id}">${post.data.title}</a>`).join('\n')} />
<pre set:html={bookmarks.map(b => `${formatBookmarkDate(b.date)} <a href="${b.url}">${b.title}</a> (${extractDomain(b.url)})`).join('\n')} />
</body>
</html>