This post demonstrates the sidenotes featureSidenotes are margin notes that appear beside the paragraph they reference, popularized by Edward Tufte’s work on information design. in XenT. Unlike traditional footnotes that appear at the bottom of the page, sidenotes appear in the margin on wide screens and as inline pop-ins on narrow screens.
XenT includes experimental Typst support as an alternative content format. This post provides an honest evaluation of its current state to help you decide whether to use it.
The XenT theme includes a responsive YouTube embedding component that automatically handles aspect ratios, accessibility, and responsive behavior.
Simply use the YouTube directive with a video ID:
::youtube{id="dQw4w9WgXcQ" title="Rick Astley - Never Gonna Give You Up"}Or with just the video ID:
::youtube[dQw4w9WgXcQ]Here’s a responsive YouTube embed that maintains a 16:9 aspect ratio:
The YouTube component supports several configuration options:
Here’s an example with custom start time:
The component features:
To use in your markdown posts, simply add the directive:
Your content here...
:youtube{id="YOUR_VIDEO_ID" title="Your video title"}Or with just the video ID for simple cases:
:youtube[YOUR_VIDEO_ID]To get the video ID from a YouTube URL:
https://www.youtube.com/watch?v=dQw4w9WgXcQ → dQw4w9WgXcQhttps://youtu.be/dQw4w9WgXcQ → dQw4w9WgXcQhttps://www.youtube.com/embed/dQw4w9WgXcQ → dQw4w9WgXcQThe video ID is the part after v=, after youtu.be/, or after embed/.
The component automatically adapts to different screen sizes:
This makes it perfect for content that needs to work across all devices and contexts.
This post is designed to test the sidebar functionality and ensure pixel-perfect reproduction of the NexT theme’s sidebar components. Since there’s no explicit description in frontmatter, this intro paragraph will be automatically extracted and used.
This post is designed to test the Creative Commons license functionality in the sidebar and ensure the license image URLs are constructed correctly. Auto-extracted description demonstrates the feature.
When building XenT, we faced a fundamental decision about content organization: should we support hierarchical categories or stick with a flat structure? After implementing and then removing hierarchical category support, here’s why we chose simplicity.
This post serves as both a demonstration and design documentation for mathematical rendering capabilities in the XenT theme, covering engine selection, configuration patterns, and future roadmap.
这是一篇中文演示文章，用于测试XenT主题的多语言支持功能。
中文文本需要特殊的排版考虑：
这段文字演示了中文内容的排版效果。注意行间距的调整，这对中文可读性很重要。中文字符的密度比拉丁字符更高，因此需要更多的垂直空间来避免视觉拥挤。
在实际使用中，经常会有中英文混排的情况，比如：
XenT主题通过以下方式实现智能排版：
/* 自动检测CJK字符并应用优化的行高 */
[has-cjk] {
--line-height-base: 2;
--line-height-headings: 1.8;
}主题在构建时自动检测内容中的CJK字符，并为包含中日韩文字的文章应用更适合的行高。这种方式比基于语言标签的方法更精确，能够处理混合语言内容。
智能排版是现代网站的重要功能，XenT主题通过自动CJK字符检测和CSS变量系统实现了精确的排版控制，无需手动配置语言标签。
XenT now supports GitHub-style callouts through the powerful @r4ai/remark-callout plugin. Create professional-looking information boxes, warnings, and tips that automatically adapt to your chosen theme.
Use this simple syntax to create callouts in your markdown:
> [!note] Remember This
> This is an important note that readers should pay attention to.
> [!warning] Heads Up!
> Be careful when making these changes to avoid breaking your setup.
> [!tip] Pro Tip
> Here's a helpful suggestion to improve your workflow.For collapsible callouts, add a + after the type:
> [!tip]+ Expandable Content
> This callout can be collapsed and expanded by clicking the title.
> Perfect for optional details or advanced information.Note - General information and reminders
XenT uses a configuration system. Edit user.config.ts in your project root for customizations.
Info - Neutral informational content
Callouts automatically inherit your theme’s color scheme and design tokens for perfect visual consistency.
Abstract/Summary/TLDR - Key takeaways
Callouts support multiple types, automatic theming, responsive design, and seamless content integration.
Todo - Action items and tasks
Tip - Helpful suggestions
Use callouts sparingly for maximum impact. Too many can overwhelm readers and reduce their effectiveness.
Success - Positive outcomes and confirmations
The callout feature is now active and ready to use in your posts!
Warning - Cautions and important notices
This feature requires Astro’s markdown processing. Ensure your content collections are properly configured.
Error/Danger - Critical issues and problems
Don’t forget the space after > and before [!type]. Missing spaces will prevent proper rendering.
Quote - Quotations and references
“Great design is not just what it looks like—great design is how it works.” - Steve Jobs
Create expandable callouts using the + syntax for content that users can toggle:
> [!tip]+ Performance Best Practices
> Here are advanced tips that you can expand when needed:
>
> 1. Use callouts strategically, not in every paragraph
> 2. Choose the right type for your content's urgency level
> 3. Keep titles concise but descriptiveHere are advanced tips that you can expand when needed:
Collapsible Features:
Callouts can be nested inside other callouts for complex information hierarchies:
Here are advanced configuration options:
Be careful with these settings as they can break your site.
These optimizations can improve your build times:
Callouts support rich markdown content including code blocks, lists, and links:
Here’s how to configure the plugin in your astro.config.ts:
import remarkCallout from '@r4ai/remark-callout';
export default defineConfig({
markdown: {
remarkPlugins: [remarkCallout],
},
});You can include multiple paragraphs in callouts to provide comprehensive information.
This second paragraph demonstrates how content flows naturally within the callout container.
Use this for detailed explanations that need more space.
XenT’s callout implementation automatically adapts to your chosen theme:
Callouts are fully responsive and mobile-optimized:
Use Sparingly - Callouts are most effective when used strategically, not throughout every paragraph.
Clear Hierarchy - Choose the right type for your content’s purpose and urgency level.
Consistent Voice - Match your callout tone to your overall content style.
While callouts are lightweight, avoid overusing them in long-form content as they can create visual fatigue.
Accessibility - Icons and colors provide visual cues, but ensure your text content is self-explanatory.
Print Compatibility - Callouts include print-friendly styles for documentation that needs hard copies.
The callout feature uses the @r4ai/remark-callout plugin, which:
XenT’s callout styles follow the theme’s design token system:
[data-callout] {
/* Uses semantic tokens for consistent theming */
background: var(--callout-bg, var(--surface-card));
color: var(--callout-text, var(--text-primary));
border-left: 0.25rem solid var(--callout-accent);
}Callouts work in all modern browsers and gracefully degrade in older ones:
Callouts Not Rendering
Ensure remarkCallout is added to your remarkPlugins array in astro.config.ts.
Styling Inconsistencies
Verify that callouts.css is imported in your global stylesheet after theme imports.
Mobile Display Problems
Test callouts on various screen sizes to ensure proper mobile rendering and readability.
XenT’s callout system is designed for extensibility:
Callouts are now integrated into your XenT theme and ready to enhance your content!
XenT uses a design token system based on 16 primitive values to generate complete themes. The architecture follows a three-tier hierarchy that separates concerns between primitive tokens, semantic meanings, and component-specific applications.
This is a test document written in Typst to verify the integration with XenT theme.
Typst has excellent support for mathematical notation: inline E = mc^2, display
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xidef fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
print(fibonacci(10))| Name | Age | City |
|---|---|---|
| Alice | 25 | New York |
| Bob | 30 | London |
| Carol | 28 | Tokyo |
This document demonstrates basic Typst features working within the XenT theme structure.
This is a second test post created specifically to validate that the sidebar statistics are calculated correctly across multiple posts.
This post serves to:
When this post is published alongside the sidebar test post, the statistics should show:
This post uses these categories:
This post uses these tags:
To verify the statistics are working correctly:
This post includes multiple sections to ensure it’s counted properly and provides sufficient content for testing.
Sample content to ensure this post has substantial structure.
Additional content to verify the post is processed correctly.
More content sections for comprehensive testing.
This validation post ensures that the sidebar statistics accurately reflect the content across multiple posts and properly count unique categories and tags.