The Ultimate Guide to Astro Blog Features

Welcome to the newly revamped blogging engine! This test post demonstrates all the advanced features that have just been integrated into the platform.

Cover Images

At the very top of this post, you should see a gorgeous, high-resolution cover image. The image is automatically constrained to the width of the article container and styled with soft rounded corners to match the minimal aesthetic of the site.

Cover images are entirely optional. If you omit the coverImage field in the frontmatter, the post will simply start with the title, just like it used to.

Dynamic Table of Contents

If you are reading this on a desktop, look to your right!

You will notice a floating Table of Contents. This sidebar is completely dynamic. It parses the Markdown of the article in real-time, extracts all the ## and ### headings, and builds a clickable navigation list.

Sticky Navigation

As you scroll down the page, the Table of Contents remains locked in place (using CSS position: sticky). This allows readers of long-form technical deep dives to jump around the article without losing their place.

Mobile Experience

On mobile devices, screen real estate is precious. The sidebar is intelligently hidden via CSS media queries to ensure the reading experience remains completely distraction-free.

Enhanced Typography

Technical writing requires excellent typography.

Blockquotes

“Good design is obvious. Great design is transparent.” — Joe Sparano

Blockquotes now feature a distinct accent border on the left, a subtle background tint, and italicized text to clearly separate them from the main body.

Code Blocks

Syntax highlighting and code blocks have been refined. Inline code like const x = 10; gets a subtle background. Multi-line blocks get a deep dark theme:

function calculateReadingTime(text) {
  const wordsPerMinute = 200;
  const wordCount = text.split(/\s+/).length;
  
  return Math.max(1, Math.ceil(wordCount / wordsPerMinute));
}

Reading Time & Metadata

Right under the title, alongside the date and description, you will now see an estimated reading time. This isn’t hardcoded! The system dynamically counts the words in the raw Markdown body and calculates the time using a standard 200 words-per-minute metric.

Tags and Author Block

Scroll to the very bottom of this post to see the new footer!

1. Tags: Articles can now be categorized. Any tags added to the frontmatter will render as beautiful pill-shaped badges.
2. Author Signature: A clean author block provides a personal touch, establishing authority and connection with the reader.
3. Share Actions: Quick, one-click buttons to copy the link to the clipboard or share the article directly to Twitter/X.

Happy writing!