This page demonstrates all reusable Vue components available in the SSM documentation system. Use this as a reference for how to implement and style each component.
Table of Contents
- PageHeader
- PlatformNote
- CopyButton
- NextStepCard
- SectionHeader
- FeatureGrid & FeatureCard
- ComponentInfoGrid & ComponentInfoCard
- RequirementsGrid
- StepPath
- PlaybookCodeExample
- PlaybookModelDiagram
- DeviceModelDiagram
- MentalModelDiagram
- ProcessSteps
- CardList
- Diagram
- Swiper
PageHeader
🧩
Demo Title
5 min read
PlatformNote
This is a macOS-specific note.
CopyButton
NextStepCard
SectionHeader
Section Title
FeatureGrid & FeatureCard
🛠️ Feature 1
Description for feature 1.
💡 Feature 2
Description for feature 2.
ComponentInfoGrid & ComponentInfoCard
Sample Component
Purpose: This is a demonstration of the ComponentInfoCard within a ComponentInfoGrid.
Stores:
- Data point A
- Configuration B
- Metric C
Another Component
Purpose: Illustrates how multiple cards appear in the grid layout.
Stores:
- Log file X
- User preference Y
- Cache entry Z
RequirementsGrid
Docker Host
✓ Docker 20.10+
✓ 2GB RAM
Target Devices
✓ SSH access
✓ Python 3.8+
StepPath
1
Step One
First step
Learn more2
Step Two
Second step
NextPlaybookCodeExample
---
- name: Example
hosts: all
tasks:
- debug: msg='Hello'
PlaybookModelDiagram
Playbook Model Architecture
Playbook
Ansible-based automation script
Structure
- Plays
- Tasks
- Handlers
- Roles
Storage
- Local
- Remote Git
- Version Control
Execution
- Manual
- Scheduled
- Triggered
Variables
- Inventory
- Playbook
- Extra
DeviceModelDiagram
Device Data Model
This interactive diagram will show the relationships between Device, SSH Connection, Docker Engine, Containers, and Metrics.
🖥️ Device
id, name, ip, status...
🔑 SSH Connection
host, port, username...
🐳 Docker Engine
version, status...
📦 Containers
id, name, image...
📊 Metrics
cpu, memory, disk...
MentalModelDiagram
Device Architecture
Figure 1: The Device Architecture in SSM
ProcessSteps
Step 1
Do this first.
↓
Step 2
Then do this.