Blogroll Block Demo

This page demonstrates the Blogroll block in both its default and compact variations.

Default Blogroll

Compact Blogroll

Note: This compact blogroll will default to showing posts from the current page's folder path and page name (without any part number). The filtering is case-insensitive.

Usage

The Blogroll block displays a list of blog posts grouped by series. You can filter the displayed posts by specifying paths in the rows below the block name.

The compact variation adds a floating icon (📚) with the text "Blogroll" in the top-left corner of the viewport. Clicking on either the icon or the text opens a slide-out panel, providing a more space-efficient option for displaying the blogroll.

Compact Variation Features:

• Floating icon (📚) with "Blogroll" text in the top-left corner
• Slide-out panel from the left side when clicked
• Panel contains a sticky header with "Blogroll" title and close button (×)
• Close panel by clicking outside, pressing Escape, or clicking the close button
• Compact format of blog posts within the panel
• "Show All Posts" button at the bottom of the panel to toggle between all posts and the filtered view

Accessibility

The compact variation supports keyboard navigation (Escape key to close the panel) and includes ARIA attributes for better screen reader compatibility.