Feature Demo

This post demonstrates all the features available in this blog template.

Typography

Regular text with bold, italic, and bold italic formatting. You can also use inline code for technical terms.

This is a blockquote. Use it for highlighting important quotes or callouts.

Here’s a regular link to Astro’s website.

Lists

Unordered list:

• First item
• Second item
• Third item with nested items
  • Nested item one
  • Nested item two

Ordered list:

1. First step
2. Second step
3. Third step

Code Blocks

Code blocks have syntax highlighting and a copy button:

// TypeScript example with syntax highlighting
interface User {
  id: number
  name: string
  email: string
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

const user = await fetchUser(1)
console.log(user.name)

// JavaScript example
const greeting = (name) => {
  return `Hello, ${name}!`
}

console.log(greeting('World'))

/* CSS example */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

# Shell commands
bun install
bun run dev
bun run build

Embedded Media

Link Cards

Link cards automatically fetch metadata (title, description, image) from URLs:

YouTube Videos

Embed YouTube videos with the ::youtube directive:

Spotify

Embed Spotify tracks, albums, or playlists:

GitHub Repository Cards

Display GitHub repository information with stars, forks, and license:

X/Twitter Posts

Embed posts from X (formerly Twitter):

Tables

Footnotes

Here’s a sentence with a footnote¹. You can add multiple footnotes² throughout your content.

Horizontal Rule

Use three dashes to create a horizontal rule:

Conclusion

This template includes:

• View Transitions - Smooth, instant page navigation (50ms fade)
• Prefetching - All links are prefetched on page load
• Instant Click - Navigation triggers on mousedown, not click release
• Persistent Header - Header stays stable during transitions
• Dark/Light Mode - Follows system preference
• RSS & Atom Feeds - Available at /rss.xml and /atom.xml
• Sitemap - Auto-generated for SEO
• Responsive Design - Works on all screen sizes

Built with Astro and deployed on Cloudflare Pages.