Component Test Article
This article showcases all available custom components for the blog system. It is meant for testing purposes and should not be published to the live site.
Basic Components
Let's start with the basic components that can be used in blog articles.
BlockQuote Component
Here's the BlockQuote component with and without attribution:
This is a simple blockquote without attribution.
The important thing is not to stop questioning. Curiosity has its own reason for existing.
ProContraList Component
The ProContraList component can be used with simple arrays or with detailed objects:
Simple Pros
- First advantage
- Second advantage
- Third advantage
Simple Cons
- First disadvantage
- Second disadvantage
- Third disadvantage
Detailed Pros
- First Advantage
A more detailed explanation of the first advantage
- Second Advantage
A more detailed explanation of the second advantage
Detailed Cons
- First Disadvantage
A more detailed explanation of the first disadvantage
- Second Disadvantage
A more detailed explanation of the second disadvantage
CustomImage Component
The CustomImage component allows for images with captions:
Alert Components
The Alert component has multiple types for different kinds of messages:
Information Alert
This is an information alert. Use it for general information.
Success Alert
This is a success alert. Use it for success messages.
Warning Alert
This is a warning alert. Use it for warnings that need attention.
Danger Alert
This is a danger alert. Use it for critical issues or errors.
Note Alert
This is a note alert. Use it for simple notes.
Tip Alert
This is a tip alert. Use it for helpful tips.
Note Component
The Note component is a simpler version of Alert for short messages:
This is a simple info note.
This is a simple tip note.
This is a simple warning note.
This is an important note.
Callout Component
The Callout component is for highlighting sections:
Primary Callout
This is a primary callout. Use it to highlight important information.
Info Callout
This is an info callout. Use it for informational content.
Success Callout
This is a success callout. Use it for successful outcomes.
Warning Callout
This is a warning callout. Use it for warning messages.
Danger Callout
This is a danger callout. Use it for dangerous actions or critical warnings.
Code Components
CodeBlock Component
The CodeBlock component for displaying code with syntax highlighting:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));def greet(name):
return f"Hello, {name}!"
print(greet("World"))Terminal Component
The Terminal component simulates command line interactions:
Diagram Component
Mermaid Component
The Mermaid component renders diagrams:
Layout Components
Tabs Component
The Tabs component organizes content in tabs:
Image Components
ResponsiveImage Component
The ResponsiveImage component provides enhanced image display options:
Table Components
ComparisonTable Component
The ComparisonTable component displays feature comparisons:
Cloud Storage Comparison
| Features | Service A Popular cloud storage solution | Service B Security-focused cloud storage | Service C Basic cloud storage |
|---|---|---|---|
Free Storage Amount of free storage provided | 15 GB | 10 GB | 5 GB |
Premium Storage Maximum storage available with paid plans | 2 TB | 1 TB | 500 GB |
File Sharing Ability to share files with others | |||
Cross-device Sync Synchronization across multiple devices | |||
End-to-end Encryption Files are encrypted before upload |
API Documentation Components
ApiEndpoint Component
The ApiEndpoint component documents REST API endpoints:
Headers
Authorization: Bearer {token}
Content-Type: application/jsonNotes
- Results are paginated
- Requires authentication
Possible Errors
- 401: Unauthorized - Invalid or missing token
- 500: Internal server error
Headers
Authorization: Bearer {token}
Content-Type: application/jsonBody
{
"name": "New User",
"email": "newuser@example.com",
"password": "securePassword123"
}Possible Errors
- 400: Bad Request - Invalid input data
- 409: Conflict - Email already exists
New Structural Components
ReadingProgress Component
The ReadingProgress component shows a fixed progress bar at the top of the page as you scroll:
KeyTakeaways Component
The KeyTakeaways component displays a summary box with highlighted items:
Key Takeaways
- Proxmox Backup Server supports incremental backups natively
- ZFS snapshots provide near-instant point-in-time recovery
- Remote replication ensures off-site disaster recovery
- Deduplication can reduce storage usage by up to 80%
StepByStep Component
The StepByStep component renders a vertical stepper with numbered steps:
Setting Up PBS Remote Sync
Install PBS on the remote server
Download and install Proxmox Backup Server on your target machine.
Configure the datastore
Create a new datastore pointing to your ZFS pool or directory.
Add the remote in the source PBS
Navigate to Configuration > Remotes and add the remote server credentials.
Create a sync job
Set up a scheduled sync job to replicate backups to the remote datastore.
Verify the first sync
Run the job manually and confirm data appears on the remote.
Prerequisites Component
The Prerequisites component shows a checklist with optional time and difficulty badges:
Prerequisites
- A running Proxmox Backup Server instance
- SSH access to both source and target servers
- At least 100 GB free disk space
- Basic familiarity with the PBS web interface
BeforeAfter Component
The BeforeAfter component shows a side-by-side comparison of before and after states:
Backup Strategy Transformation
Manual Backups
- Running rsync manually every week
- No deduplication — 3x storage waste
- No verification of backup integrity
- Single copy on the same server
PBS Automated Backups
- Scheduled incremental backups every 6 hours
- Built-in deduplication saves 70% storage
- Automatic integrity verification on every job
- Geo-redundant copies across two datacenters
StatCards Component
The StatCards component displays key metrics in a responsive grid:
CollapsibleSection Component
The CollapsibleSection component provides an expandable content toggle:
This section starts open because defaultOpen is set to true. Useful for content that is important but should still be collapsible.
Timeline Component
The Timeline component shows a vertical timeline with dated events:
PBS Release History
PBS 1.0 Released
First stable release with core backup and restore functionality.
Tape Backup Support
Added LTO tape drive support for long-term archival storage.
S3 Backend Support
Experimental support for S3-compatible storage backends.
PBS 3.0
Major update with improved UI, faster deduplication, and ARM64 support.
InlineCalculator Component
The InlineCalculator component provides interactive calculators for backup planning:
Backup Size Calculator:
Estimate Your Backup Storage
Transfer Time Calculator:
Estimate Transfer Duration
Cost Calculator:
Estimate Monthly Cost
VideoEmbed Component
The VideoEmbed component wraps YouTube/Vimeo videos responsively with privacy-first embedding:
DecisionTree Component
The DecisionTree component creates an interactive wizard to help users make decisions:
Which Backup Strategy Is Right for You?
How much data do you need to back up?
InlineCTA Component
The InlineCTA component shows a mid-article conversion box:
RelatedContentCard Component
The RelatedContentCard component shows related articles inline:
Combining Components
Components can be combined for more complex layouts:
Component Combination Example
You can combine components to create rich content layouts:
Conclusion
This article demonstrates all available custom components for the blog system. Use it as a reference when developing new content or making changes to the component system.
Test Article
Remember this is a test article and should not be published to the live site. It is marked with the "hidden" tag and set as a draft.