The intention of this post is simply to test syntax and embeddings in a blogpost.
This webpage is a React app being built with a custom Vite SSG plugin that I made for the blog.
Each blog post is its own MDX file, supporting normal things that you can do in Markdown (like bold, italic, code, etc).
Each blog post also have its own frontmatter section:
---
slug: post1
title: Test post
dateWritten: 2024-01-01
---
# Test postUsing a plugin this gets converted into an export statement during parse:
export const frontmatter = {
slug: 'post1',
title: 'Test post',
dateWritten: '2024-01-01',
};
# Test post| column 1 | column 2 |
|---|---|
| testing that | tables work |
| this is an GitHub Flavored Markdown extension |
GFM should support1 footnotes2, strikethroughs and tasklists:
Task 1
Task 2
Links are automatically turned into links: www.google.com
this is an example quote — by me
NOTE
Useful information that users should know, even when skimming content.
TIP
Helpful advice for doing things better or more easily.
IMPORTANT
Key information users need to know to achieve their goal.
WARNING
Urgent info that needs immediate user attention to avoid problems.
Since each post is an MDX file/component then I should be able to simply import and use React components. So adding a tweet preview is as easy as:
pnpm add react-tweetAnd then import and use it:
import { Tweet } from 'react-tweet';
# Test post
## MDX and React components
<Tweet id="1683920951807971329" />Margin notes (often also called side notes) is a common things in physically written text, where (often studens) will take notes on a handout in the margins on the side. This might serve as an alternative to footnotes.
You should to the right of the paragraph above see a margin note.
Having two margin notes to close together might make them overlap.
I don't have a solution for overlap since I currently just float them to the right.
I could perhaps using a React portal and CSS Grid create a section for margin notes. But this brings its own problems; like how to I align it up with the main content? Margin notes should be coupled to a given section.