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

👉

Next Step

Go to the next guide

→

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 more

2

Step Two

Second step

Next

PlaybookCodeExample

📄

---
- 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

1

Step 1

Do this first.

↓

2

Step 2

Then do this.

CardList

Diagram

Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.

Swiper

Devices

Manage all your devices effortlessly

Containers

Monitor and manage your containers seamlessly

Dashboard

Track CPU and memory usage efficiently

Deploy

Deploy containers to your devices effortlessly

Add Device

Add devices with ease