lew/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sample blog posts and fix rendering

Browse source 
- Add hello-world.md and second-post.md sample posts
- Fix index page: use set:html for links, add charset, import global.css
- Fix post page: add charset meta tag
- Fix remark plugin: use className array, handle leaf directives
- Update CSS: support left/right margin note classes
This commit is contained in:
Lewis Wynne 2026-01-23 00:47:27 +00:00
parent bb1b30fc2d
commit cd7914dc4e
6 changed files with 43 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/blog/src/content/posts/hello-world.md Normal file
View file

@ -0,0 +1,15 @@
---
title: Hello World
date: 2025-01-01
---
This is my first blog post. :right[A sidenote appears here on wide screens.]
## A Heading
Some text with **bold** and *italic* formatting.
- A list item
- Another item
Here's a [link](https://example.com) and some "smart quotes" -- with an em dash.

12
apps/blog/src/content/posts/second-post.md Normal file
View file

@ -0,0 +1,12 @@
---
title: My Second Post
date: 2025-01-02
---
Another post to test the listing.
| Column A | Column B |
|----------|----------|
| Data 1 | Data 2 |
This tests GFM tables.

2
apps/blog/src/pages/[slug].astro
View file

@ -15,7 +15,7 @@ const { Content } = await render(post);
---
<!DOCTYPE html>
<html>
<head><title>{post.data.title}</title></head>
<head><meta charset="UTF-8"><title>{post.data.title}</title></head>
<body>
<article>
<h1>{post.data.title}</h1>

5
apps/blog/src/pages/index.astro
View file

@ -1,5 +1,6 @@
---
import { getCollection } from 'astro:content';
import '../styles/global.css';
const posts = await getCollection('posts');
const sorted = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
@ -13,8 +14,8 @@ function formatDate(date: Date): string {
---
<!DOCTYPE html>
<html>
<head><title>Blog</title></head>
<head><meta charset="UTF-8"><title>Blog</title></head>
<body>
<pre>{sorted.map(post => `<a href="/${post.id}">${formatDate(post.data.date)}</a> ${post.data.title}`).join('\n')}</pre>
<pre set:html={sorted.map(post => `${formatDate(post.data.date)} <a href="/${post.id}">${post.data.title}</a>`).join('\n')} />
</body>
</html>

6
apps/blog/src/plugins/remark-aside.ts
View file

@ -3,12 +3,12 @@ import type { Root } from 'mdast';
export default function remarkAside() {
return (tree: Root) => {
visit(tree, 'textDirective', (node: any) => {
if (node.name !== 'aside') return;
visit(tree, ['textDirective', 'leafDirective'], (node: any) => {
if (node.name !== 'left' && node.name !== 'right') return;
const data = node.data || (node.data = {});
data.hName = 'span';
data.hProperties = { class: 'aside' };
data.hProperties = { className: [node.name] };
});
};
}

12
apps/blog/src/styles/global.css
View file

@ -4,17 +4,23 @@ body {
padding: 1rem;
}
.aside {
.left, .right {
display: block;
font-size: 0.9rem;
}
@media (min-width: 63rem) {
.aside {
.left, .right {
display: inline;
float: right;
position: relative;
width: 10rem;
}
.left {
float: left;
margin-left: -12rem;
}
.right {
float: right;
margin-right: -12rem;
}
}