diff --git a/apps/blog/src/content/posts/hello-world.md b/apps/blog/src/content/posts/hello-world.md new file mode 100644 index 0000000..1449b19 --- /dev/null +++ b/apps/blog/src/content/posts/hello-world.md @@ -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. diff --git a/apps/blog/src/content/posts/second-post.md b/apps/blog/src/content/posts/second-post.md new file mode 100644 index 0000000..882fe83 --- /dev/null +++ b/apps/blog/src/content/posts/second-post.md @@ -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. diff --git a/apps/blog/src/pages/[slug].astro b/apps/blog/src/pages/[slug].astro index 8786cb0..8625252 100644 --- a/apps/blog/src/pages/[slug].astro +++ b/apps/blog/src/pages/[slug].astro @@ -15,7 +15,7 @@ const { Content } = await render(post); --- -{post.data.title} +{post.data.title}

{post.data.title}

diff --git a/apps/blog/src/pages/index.astro b/apps/blog/src/pages/index.astro index ae34f7b..3d133ee 100644 --- a/apps/blog/src/pages/index.astro +++ b/apps/blog/src/pages/index.astro @@ -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 { --- -Blog +Blog -
{sorted.map(post => `${formatDate(post.data.date)}    ${post.data.title}`).join('\n')}
+
 `${formatDate(post.data.date)}    ${post.data.title}`).join('\n')} />
 
 
diff --git a/apps/blog/src/plugins/remark-aside.ts b/apps/blog/src/plugins/remark-aside.ts
index f98b084..847c25c 100644
--- a/apps/blog/src/plugins/remark-aside.ts
+++ b/apps/blog/src/plugins/remark-aside.ts
@@ -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] };
     });
   };
 }
diff --git a/apps/blog/src/styles/global.css b/apps/blog/src/styles/global.css
index 11053b2..4a85ec2 100644
--- a/apps/blog/src/styles/global.css
+++ b/apps/blog/src/styles/global.css
@@ -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;
   }
 }