TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format user guide files with prettier

Browse Source
This commit is contained in:
gorkem-bwl committed 2026-01-17 12:39:31 -05:00
1 parent c7107a5034
commit b196d0de78
20 files changed
+400 -190
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Components/v1/UserGuide/ArticlePage.css
+5 -5
View File
@@ -6,7 +6,7 @@
}
.user-guide-breadcrumb-link:hover {
color: #1570EF;
color: #1570ef;
}
/* ToC link hover */
@@ -15,7 +15,7 @@
}
.user-guide-toc-link:hover {
color: #1570EF;
color: #1570ef;
text-decoration: underline !important;
}
@@ -25,7 +25,7 @@
}
.user-guide-nav-button:hover .nav-text {
color: #1570EF;
color: #1570ef;
}
/* Article body typography */
@@ -70,7 +70,7 @@
}
.user-guide-article-body a {
color: #1570EF;
color: #1570ef;
text-decoration: none;
font-weight: 500;
}
@@ -104,7 +104,7 @@
}
.user-guide-article-body blockquote {
border-left: 3px solid #1570EF;
border-left: 3px solid #1570ef;
background-color: rgba(255, 255, 255, 0.05);
padding: 12px 16px;
border-radius: 0 4px 4px 0;
client/src/Components/v1/UserGuide/ArticlePage.jsx
+9 -5
View File
@@ -136,7 +136,9 @@ const ArticlePage = ({
<div
style={{
backgroundColor: isInApp
? isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)"
? isDark
? "rgba(255, 255, 255, 0.05)"
: "rgba(0, 0, 0, 0.02)"
: "transparent",
borderRadius: isInApp ? border.radius : 0,
padding: isInApp ? spacing.md : 0,
@@ -188,9 +190,7 @@ const ArticlePage = ({
style={{
fontFamily: typography.fontFamily.sans,
fontSize: isInApp ? 13 : 12,
color: isActive
? colors.brand.primary
: colors.text.secondary,
color: isActive ? colors.brand.primary : colors.text.secondary,
fontWeight: isActive
? typography.fontWeight.medium
: typography.fontWeight.normal,
@@ -250,7 +250,11 @@ const ArticlePage = ({
cursor: "pointer",
}}
>
<ChevronLeft size={16} strokeWidth={1.5} color={colors.text.muted} />
<ChevronLeft
size={16}
strokeWidth={1.5}
color={colors.text.muted}
/>
<div>
<span
style={{
client/src/Components/v1/UserGuide/CollectionPage.css
+2 -2
View File
@@ -6,7 +6,7 @@
}
.user-guide-back-link:hover {
color: #1570EF;
color: #1570ef;
}
/* Article row hover */
@@ -27,5 +27,5 @@
}
.user-guide-article-row:hover .arrow-icon {
color: #1570EF;
color: #1570ef;
}
client/src/Components/v1/UserGuide/CollectionPage.jsx
+1 -3
View File
@@ -117,9 +117,7 @@ const CollectionPage = ({ collection, onBack, onArticleClick }) => {
cursor: "pointer",
}}
>
<div
style={{ display: "flex", alignItems: "flex-start", gap: spacing.md }}
>
<div style={{ display: "flex", alignItems: "flex-start", gap: spacing.md }}>
<FileText
size={16}
strokeWidth={1.5}
client/src/Components/v1/UserGuide/ContentRenderer.css
+2 -2
View File
@@ -32,7 +32,7 @@
}
.user-guide-article-link-item:hover .link-title {
color: #1570EF;
color: #1570ef;
}
.user-guide-article-link-item .arrow-icon {
@@ -41,5 +41,5 @@
.user-guide-article-link-item:hover .arrow-icon {
transform: translateX(4px);
color: #1570EF;
color: #1570ef;
}
client/src/Components/v1/UserGuide/ContentRenderer.jsx
+30 -7
View File
@@ -53,7 +53,8 @@ const iconMap = {
const getIcon = (name) => iconMap[name] || Info;
const ContentRenderer = ({ content, onNavigate }) => {
const { colors, typography, spacing, border, chipStyles, imageStyles, isDark } = useUserGuideTheme();
const { colors, typography, spacing, border, chipStyles, imageStyles, isDark } =
useUserGuideTheme();
const [lightboxImage, setLightboxImage] = useState(null);
// Parse basic markdown in text (inside component to access onNavigate)
@@ -83,7 +84,10 @@ const ContentRenderer = ({ content, onNavigate }) => {
// Code: `text`
const style = getChipStyle(match[2]);
parts.push(
<span key={key++} style={style}>
<span
key={key++}
style={style}
>
{match[2]}
</span>
);
@@ -317,7 +321,10 @@ const ContentRenderer = ({ content, onNavigate }) => {
);
const renderChecklist = (block, index) => (
<div key={index} style={{ marginBottom: spacing["2xl"], paddingLeft: spacing.sm }}>
<div
key={index}
style={{ marginBottom: spacing["2xl"], paddingLeft: spacing.sm }}
>
{block.items.map((item, i) => (
<div
key={i}
@@ -383,7 +390,11 @@ const ContentRenderer = ({ content, onNavigate }) => {
height: "22px",
}}
>
<IconComponent size={20} strokeWidth={1.5} color={colors.brand.primary} />
<IconComponent
size={20}
strokeWidth={1.5}
color={colors.brand.primary}
/>
</div>
<div>
<span
@@ -513,7 +524,11 @@ const ContentRenderer = ({ content, onNavigate }) => {
height: "20px",
}}
>
<Clock size={16} strokeWidth={1.5} color={colors.brand.primary} />
<Clock
size={16}
strokeWidth={1.5}
color={colors.brand.primary}
/>
</span>
<span
style={{
@@ -762,7 +777,12 @@ const ContentRenderer = ({ content, onNavigate }) => {
display: "grid",
gridTemplateColumns: block.columns.map((col) => col.width || "1fr").join(" "),
borderBottom: i < block.rows.length - 1 ? border.default : "none",
backgroundColor: i % 2 === 1 ? (isDark ? "rgba(255, 255, 255, 0.02)" : "rgba(0, 0, 0, 0.02)") : "transparent",
backgroundColor:
i % 2 === 1
? isDark
? "rgba(255, 255, 255, 0.02)"
: "rgba(0, 0, 0, 0.02)"
: "transparent",
padding: `10px ${spacing.lg}`,
gap: spacing.md,
alignItems: "center",
@@ -820,7 +840,10 @@ const ContentRenderer = ({ content, onNavigate }) => {
);
const renderArticleLinks = (block, index) => (
<div key={index} style={{ marginBottom: spacing["2xl"] }}>
<div
key={index}
style={{ marginBottom: spacing["2xl"] }}
>
<div
style={{
height: "1px",
client/src/Components/v1/UserGuide/HelpSection.css
+1 -1
View File
@@ -5,7 +5,7 @@
}
.user-guide-help-button:hover {
border-color: #1570EF;
border-color: #1570ef;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
client/src/Components/v1/UserGuide/HelpSection.jsx
+10 -2
View File
@@ -62,7 +62,11 @@ const HelpSection = () => {
}}
>
Join our Discord
<ExternalLink size={14} strokeWidth={1.5} color={colors.text.muted} />
<ExternalLink
size={14}
strokeWidth={1.5}
color={colors.text.muted}
/>
</a>
</div>
@@ -116,7 +120,11 @@ const HelpSection = () => {
}}
>
GitHub discussions
<ExternalLink size={14} strokeWidth={1.5} color={colors.text.muted} />
<ExternalLink
size={14}
strokeWidth={1.5}
color={colors.text.muted}
/>
</a>
</div>
</div>
client/src/Components/v1/UserGuide/ImageLightbox.jsx
+5 -1
View File
@@ -74,7 +74,11 @@ const ImageLightbox = ({ src, alt, caption, onClose }) => {
}}
title="Close (Esc)"
>
<X size={24} strokeWidth={1.5} color="#fff" />
<X
size={24}
strokeWidth={1.5}
color="#fff"
/>
</button>
{/* Image container */}
client/src/Components/v1/UserGuide/STYLE_GUIDE.md
+137 -105
View File
@@ -9,15 +9,18 @@ This document defines the writing standards, formatting rules, and content patte
### Core Principles
1. **Second person, active voice** - Address the reader directly
- ✅ "You can configure monitors from the dashboard"
- ❌ "Monitors can be configured from the dashboard"
2. **Professional but approachable** - Clear and helpful, not stiff or overly casual
- ✅ "Select the notification channel you want to use"
- ❌ "Go ahead and pick whatever notification channel works for you!"
- ❌ "The user shall select the appropriate notification channel"
3. **Direct and instructional** - Tell users what to do, not what the system does
- ✅ "Click Save to apply your changes"
- ❌ "The Save button will apply your changes"
@@ -28,18 +31,21 @@ This document defines the writing standards, formatting rules, and content patte
### Language Patterns
**Opening phrases:**
- "The [Feature] allows you to..."
- "[Feature] is..."
- "You can..."
- "To [action]:"
**Navigation instructions:**
- "Navigate to [location]"
- "Click [element]"
- "Select [option]"
- "From the [page], click..."
**Avoid:**
- Passive voice where active is clearer
- Jargon without explanation
- Assuming prior knowledge
@@ -88,11 +94,11 @@ Never use H4 or deeper. If content requires more nesting, restructure into separ
### Section Length
| Element | Target Length |
|---------|---------------|
| Paragraphs | 2-4 sentences |
| H2 sections | 100-300 words |
| H3 sections | 50-150 words |
| Element | Target Length |
| ------------- | -------------- |
| Paragraphs | 2-4 sentences |
| H2 sections | 100-300 words |
| H3 sections | 50-150 words |
| Full articles | 800-1500 words |
---
@@ -102,6 +108,7 @@ Never use H4 or deeper. If content requires more nesting, restructure into separ
### Lists
**Bullet lists** - Use for features, options, characteristics (unordered items)
```javascript
{
type: 'bullet-list',
@@ -114,6 +121,7 @@ Never use H4 or deeper. If content requires more nesting, restructure into separ
```
**Ordered lists** - Use for step-by-step procedures (sequential actions)
```javascript
{
type: 'ordered-list',
@@ -127,6 +135,7 @@ Never use H4 or deeper. If content requires more nesting, restructure into separ
```
**List guidelines:**
- Keep procedures to 4-6 steps maximum
- If longer, break into multiple procedures
- Start each item with an action verb for procedures
@@ -138,12 +147,12 @@ Use callouts sparingly for important information that shouldn't be missed.
**Types:**
| Variant | Use For | Example |
|---------|---------|---------|
| `info` | Additional context, clarification | "Monitors check at the interval you specify, starting from creation time." |
| `tip` | Best practices, recommendations | "Use descriptive names to easily identify monitors in alerts." |
| `warning` | Restrictions, potential issues | "Deleting a monitor removes all associated check history." |
| `success` | Confirmations, positive outcomes | "Your monitor is now active and checking every 5 minutes." |
| Variant | Use For | Example |
| --------- | --------------------------------- | -------------------------------------------------------------------------- |
| `info` | Additional context, clarification | "Monitors check at the interval you specify, starting from creation time." |
| `tip` | Best practices, recommendations | "Use descriptive names to easily identify monitors in alerts." |
| `warning` | Restrictions, potential issues | "Deleting a monitor removes all associated check history." |
| `success` | Confirmations, positive outcomes | "Your monitor is now active and checking every 5 minutes." |
```javascript
{
@@ -155,6 +164,7 @@ Use callouts sparingly for important information that shouldn't be missed.
```
**Callout guidelines:**
- Maximum 2-3 callouts per article
- Keep callout text concise (1-2 sentences)
- Title is optional but helps scannability
@@ -163,11 +173,13 @@ Use callouts sparingly for important information that shouldn't be missed.
### Inline Formatting
**Bold** - Use for:
- UI element names: "Click **Save**"
- Key terms on first use: "**Uptime** measures availability over time"
- Emphasis in lists: "**Name** — The display name for your monitor"
**Code/monospace** - Use for:
- URLs: `https://example.com`
- File paths: `/api/v1/monitors`
- Technical values: `200`, `timeout`
@@ -175,12 +187,15 @@ Use callouts sparingly for important information that shouldn't be missed.
```javascript
// In paragraph text, use backticks in markdown:
{ text: 'Enter the URL (e.g., `https://example.com`) in the field' }
{
text: "Enter the URL (e.g., `https://example.com`) in the field";
}
```
### Tables
Use tables for:
- Feature comparisons
- Configuration options
- Reference data with multiple attributes
@@ -206,19 +221,19 @@ Use tables for:
### Block Types Reference
| Type | Purpose | When to Use |
|------|---------|-------------|
| `heading` | Section titles | Start each major topic |
| `paragraph` | Body text | Explanations, context |
| `bullet-list` | Unordered items | Features, options |
| `ordered-list` | Sequential steps | Procedures |
| `checklist` | Checkable items | Requirements, checklists |
| `callout` | Important notices | Tips, warnings |
| `code` | Code blocks | Commands, config examples |
| `table` | Structured data | Comparisons, reference |
| `image` | Screenshots | UI demonstration |
| `icon-cards` | Feature grids | Capability overviews |
| `article-links` | Related content | End-of-article navigation |
| Type | Purpose | When to Use |
| --------------- | ----------------- | ------------------------- |
| `heading` | Section titles | Start each major topic |
| `paragraph` | Body text | Explanations, context |
| `bullet-list` | Unordered items | Features, options |
| `ordered-list` | Sequential steps | Procedures |
| `checklist` | Checkable items | Requirements, checklists |
| `callout` | Important notices | Tips, warnings |
| `code` | Code blocks | Commands, config examples |
| `table` | Structured data | Comparisons, reference |
| `image` | Screenshots | UI demonstration |
| `icon-cards` | Feature grids | Capability overviews |
| `article-links` | Related content | End-of-article navigation |
### Icon Cards
@@ -284,11 +299,13 @@ Always end articles with related content:
```
**Alt text guidelines:**
- Describe what the image shows (15-30 words)
- Include key UI elements visible
- Make it useful for screen readers
**Caption guidelines:**
- Explain the context or what to notice
- Keep to one sentence
- Optional but recommended
@@ -308,6 +325,7 @@ Always end articles with related content:
### Step-by-Step Instructions
**Format:**
```javascript
{
type: 'ordered-list',
@@ -322,6 +340,7 @@ Always end articles with related content:
```
**Guidelines:**
- Start each step with an action verb (Click, Enter, Select, Navigate)
- One action per step
- Include the location of UI elements
@@ -331,6 +350,7 @@ Always end articles with related content:
### Describing Features
**Format:**
```javascript
{
type: 'bullet-list',
@@ -350,18 +370,19 @@ Always end articles with related content:
Use these terms consistently throughout documentation:
| Term | Use | Don't Use |
|------|-----|-----------|
| Monitor | The configured check | Watcher, probe, check |
| Check | A single monitoring event | Ping, request, poll |
| Incident | A detected problem | Outage, alert, issue |
| Notification | Alert sent to user | Message, email, ping |
| Dashboard | Main overview page | Home, overview |
| Sidebar | Left navigation | Menu, nav |
| Term | Use | Don't Use |
| ------------ | ------------------------- | --------------------- |
| Monitor | The configured check | Watcher, probe, check |
| Check | A single monitoring event | Ping, request, poll |
| Incident | A detected problem | Outage, alert, issue |
| Notification | Alert sent to user | Message, email, ping |
| Dashboard | Main overview page | Home, overview |
| Sidebar | Left navigation | Menu, nav |
### Feature Names
Always match UI exactly:
- **Uptime** (not "Uptime Monitoring")
- **PageSpeed** (not "Page Speed" or "Pagespeed")
- **Infrastructure** (not "Server Monitoring")
@@ -375,36 +396,36 @@ Always match UI exactly:
```javascript
{
blocks: [
{
type: 'heading',
level: 2,
text: 'Overview',
id: 'overview'
},
{
type: 'paragraph',
text: '[1-2 sentences: What this feature/concept is]'
},
{
type: 'paragraph',
text: '[1-2 sentences: Why it matters to users]'
},
{
type: 'heading',
level: 2,
text: '[Main topic]',
id: 'main-topic'
},
// ... content blocks
{
type: 'article-links',
title: 'Next steps',
items: [
// 2-3 logical next articles
]
}
]
blocks: [
{
type: "heading",
level: 2,
text: "Overview",
id: "overview",
},
{
type: "paragraph",
text: "[1-2 sentences: What this feature/concept is]",
},
{
type: "paragraph",
text: "[1-2 sentences: Why it matters to users]",
},
{
type: "heading",
level: 2,
text: "[Main topic]",
id: "main-topic",
},
// ... content blocks
{
type: "article-links",
title: "Next steps",
items: [
// 2-3 logical next articles
],
},
];
}
```
@@ -412,40 +433,40 @@ Always match UI exactly:
```javascript
{
blocks: [
{
type: 'heading',
level: 2,
text: 'Overview',
id: 'overview'
},
{
type: 'paragraph',
text: '[Brief description of what user will accomplish]'
},
{
type: 'heading',
level: 2,
text: '[Action: Creating/Configuring/Setting up...]',
id: 'action'
},
{
type: 'ordered-list',
items: [
// 4-6 steps
]
},
{
type: 'callout',
variant: 'tip',
text: '[Best practice or helpful hint]'
},
{
type: 'article-links',
title: 'Related articles',
items: []
}
]
blocks: [
{
type: "heading",
level: 2,
text: "Overview",
id: "overview",
},
{
type: "paragraph",
text: "[Brief description of what user will accomplish]",
},
{
type: "heading",
level: 2,
text: "[Action: Creating/Configuring/Setting up...]",
id: "action",
},
{
type: "ordered-list",
items: [
// 4-6 steps
],
},
{
type: "callout",
variant: "tip",
text: "[Best practice or helpful hint]",
},
{
type: "article-links",
title: "Related articles",
items: [],
},
];
}
```
@@ -492,6 +513,7 @@ Always match UI exactly:
Before publishing any article, verify:
### Content
- [ ] Overview explains what AND why
- [ ] Procedures are tested and accurate
- [ ] All UI element names match exactly
@@ -499,6 +521,7 @@ Before publishing any article, verify:
- [ ] Related articles are linked
### Formatting
- [ ] Only H2 and H3 headings used
- [ ] All headings have unique IDs
- [ ] Lists use correct type (bullet vs ordered)
@@ -506,6 +529,7 @@ Before publishing any article, verify:
- [ ] Bold used for UI elements
### Style
- [ ] Active voice throughout
- [ ] Second person ("you")
- [ ] Action verbs start procedure steps
@@ -513,6 +537,7 @@ Before publishing any article, verify:
- [ ] No marketing language
### Technical
- [ ] All links work
- [ ] Images have alt text
- [ ] Code examples are correct
@@ -525,6 +550,7 @@ Before publishing any article, verify:
For icon-cards and other icon references, use these Lucide icon names:
**Navigation:**
- `Globe` - Uptime/HTTP
- `Gauge` - PageSpeed
- `Server` - Infrastructure
@@ -536,6 +562,7 @@ For icon-cards and other icon references, use these Lucide icon names:
- `Users` - Team
**Actions:**
- `CheckCircle` - Success/complete
- `Clock` - Time/scheduling
- `Info` - Information
@@ -543,6 +570,7 @@ For icon-cards and other icon references, use these Lucide icon names:
- `ArrowRight` - Navigation
**Features:**
- `Database` - Data/storage
- `Terminal` - Commands
- `FileText` - Documentation
@@ -557,13 +585,13 @@ Articles are stored in `/content/index.js`:
```javascript
export const articleContents = {
'collection-id': {
'article-id': {
blocks: [
// Content blocks
]
}
}
"collection-id": {
"article-id": {
blocks: [
// Content blocks
],
},
},
};
```
@@ -583,9 +611,11 @@ Article metadata is in `/content/userGuideConfig.js`:
## Examples
### Good Paragraph
> "HTTP monitors check your websites and APIs at regular intervals. When a check fails—due to a timeout, error response, or connection issue—Checkmate creates an incident and sends notifications to your configured channels."
### Good Procedure
> 1. Navigate to **Uptime** in the sidebar
> 2. Click **Create monitor** in the top right
> 3. Enter the URL you want to monitor (include `https://`)
@@ -593,9 +623,11 @@ Article metadata is in `/content/userGuideConfig.js`:
> 5. Click **Save** to create the monitor
### Good Callout
> **Tip:** Use descriptive monitor names like "Production API" or "Marketing Website" to quickly identify issues in notifications.
### Good Feature List
> - **Name** — A descriptive label for easy identification
> - **URL** — The address to monitor (must include protocol)
> - **Interval** — How often to check (1-60 minutes)
@@ -603,4 +635,4 @@ Article metadata is in `/content/userGuideConfig.js`:
---
*Last updated: January 2025*
_Last updated: January 2025_
client/src/Components/v1/UserGuide/SearchResults.css
+3 -1
View File
@@ -1,7 +1,9 @@
/* SearchResults styles (Dark theme) */
.user-guide-search-result-item {
transition: background-color 150ms ease, border-color 150ms ease;
transition:
background-color 150ms ease,
border-color 150ms ease;
}
.user-guide-search-result-item:hover {
client/src/Components/v1/UserGuide/SidebarHeader.css
+3 -3
View File
@@ -6,12 +6,12 @@
.user-guide-header-icon-button:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #1570EF !important;
color: #1570ef !important;
}
.user-guide-header-icon-button.active {
background-color: #0d0d0d;
color: #1570EF;
color: #1570ef;
}
.user-guide-breadcrumb-dropdown-trigger {
@@ -32,7 +32,7 @@
.user-guide-search-input:focus {
outline: none;
border-color: #1570EF;
border-color: #1570ef;
}
.user-guide-search-input::placeholder {
client/src/Components/v1/UserGuide/SidebarHeader.jsx
+28 -10
View File
@@ -105,7 +105,10 @@ const SidebarHeader = ({
}}
title="Back"
>
<ChevronLeft size={16} strokeWidth={1.5} />
<ChevronLeft
size={16}
strokeWidth={1.5}
/>
</button>
{/* Forward button */}
@@ -129,7 +132,10 @@ const SidebarHeader = ({
}}
title="Forward"
>
<ChevronRight size={16} strokeWidth={1.5} />
<ChevronRight
size={16}
strokeWidth={1.5}
/>
</button>
{/* Home button */}
@@ -156,7 +162,10 @@ const SidebarHeader = ({
}}
title="Home"
>
<Home size={16} strokeWidth={1.5} />
<Home
size={16}
strokeWidth={1.5}
/>
</button>
</>
)}
@@ -167,9 +176,7 @@ const SidebarHeader = ({
style={{ position: "relative", flex: 1, minWidth: 0 }}
>
<button
onClick={() =>
breadcrumbs.length > 1 && setIsDropdownOpen(!isDropdownOpen)
}
onClick={() => breadcrumbs.length > 1 && setIsDropdownOpen(!isDropdownOpen)}
className="user-guide-breadcrumb-dropdown-trigger"
style={{
display: "flex",
@@ -222,7 +229,9 @@ const SidebarHeader = ({
backgroundColor: colors.background.white,
border: border.default,
borderRadius: border.radius,
boxShadow: isDark ? "0 4px 12px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.1)",
boxShadow: isDark
? "0 4px 12px rgba(0, 0, 0, 0.3)"
: "0 4px 12px rgba(0, 0, 0, 0.1)",
minWidth: 180,
maxWidth: 280,
zIndex: 100,
@@ -286,7 +295,10 @@ const SidebarHeader = ({
}}
title="Open in new tab"
>
<ExternalLink size={16} strokeWidth={1.5} />
<ExternalLink
size={16}
strokeWidth={1.5}
/>
</button>
)}
@@ -308,7 +320,10 @@ const SidebarHeader = ({
}}
title="Search"
>
<Search size={16} strokeWidth={1.5} />
<Search
size={16}
strokeWidth={1.5}
/>
</button>
{/* Close button */}
@@ -329,7 +344,10 @@ const SidebarHeader = ({
}}
title="Close"
>
<X size={16} strokeWidth={1.5} />
<X
size={16}
strokeWidth={1.5}
/>
</button>
</div>
</div>
client/src/Components/v1/UserGuide/SidebarWrapper.jsx
+14 -4
View File
@@ -11,7 +11,10 @@ import SearchResults from "./SearchResults";
import { getCollection, getArticle } from "./content/userGuideConfig";
import { getArticleContent } from "./content";
import { extractToc } from "./content/contentTypes";
import { useUserGuideSidebarContext, DEFAULT_CONTENT_WIDTH } from "./UserGuideSidebarContext";
import {
useUserGuideSidebarContext,
DEFAULT_CONTENT_WIDTH,
} from "./UserGuideSidebarContext";
import "./SidebarWrapper.css";
const STORAGE_KEY = "checkmate-sidebar-state";
@@ -166,7 +169,8 @@ const SidebarWrapper = ({ isOpen, onClose, onOpen, initialPath, onOpenInNewTab }
// Get current collection and article
const collection = collectionId ? getCollection(collectionId) : undefined;
const article = collectionId && articleId ? getArticle(collectionId, articleId) : undefined;
const article =
collectionId && articleId ? getArticle(collectionId, articleId) : undefined;
// Get prev/next articles for navigation
const getAdjacentArticles = () => {
@@ -259,7 +263,10 @@ const SidebarWrapper = ({ isOpen, onClose, onOpen, initialPath, onOpenInNewTab }
mode="in-app"
>
{articleContent && (
<ContentRenderer content={articleContent} onNavigate={handleNavigate} />
<ContentRenderer
content={articleContent}
onNavigate={handleNavigate}
/>
)}
</ArticlePage>
);
@@ -419,7 +426,10 @@ const SidebarWrapper = ({ isOpen, onClose, onOpen, initialPath, onOpenInNewTab }
</div>
{/* Tab Bar - Always visible */}
<TabBar activeTab={isOpen ? activeTab : undefined} onTabChange={handleTabClick} />
<TabBar
activeTab={isOpen ? activeTab : undefined}
onTabChange={handleTabClick}
/>
{/* Main Sidebar Content - Slides in/out */}
<div
client/src/Components/v1/UserGuide/TabBar.jsx
+12 -2
View File
@@ -64,7 +64,12 @@ const TabBar = ({ activeTab, onTabChange }) => {
<TabItem
id="user-guide"
label="User guide"
icon={<BookOpen size={18} strokeWidth={1.5} />}
icon={
<BookOpen
size={18}
strokeWidth={1.5}
/>
}
isActive={activeTab === "user-guide"}
onClick={() => onTabChange("user-guide")}
colors={colors}
@@ -73,7 +78,12 @@ const TabBar = ({ activeTab, onTabChange }) => {
<TabItem
id="help"
label="Help"
icon={<HelpCircle size={18} strokeWidth={1.5} />}
icon={
<HelpCircle
size={18}
strokeWidth={1.5}
/>
}
isActive={activeTab === "help"}
onClick={() => onTabChange("help")}
colors={colors}
client/src/Components/v1/UserGuide/UserGuideLanding.css
+1 -1
View File
@@ -35,5 +35,5 @@
}
.user-guide-fast-find-item:hover .arrow-icon {
color: #1570EF;
color: #1570ef;
}
client/src/Components/v1/UserGuide/UserGuideLanding.jsx
+6 -2
View File
@@ -29,7 +29,12 @@ const iconMap = {
Users,
};
const UserGuideLanding = ({ onNavigate, searchQuery, onSearchChange, mode = "in-app" }) => {
const UserGuideLanding = ({
onNavigate,
searchQuery,
onSearchChange,
mode = "in-app",
}) => {
const { colors, typography, spacing, border } = useUserGuideTheme();
const isInApp = mode === "in-app";
@@ -199,7 +204,6 @@ const UserGuideLanding = ({ onNavigate, searchQuery, onSearchChange, mode = "in-
Look for help icons and tooltips throughout the interface.
</p>
</div>
</div>
)}
</div>
client/src/Components/v1/UserGuide/content/index.js
+115 -32
View File
@@ -40,8 +40,7 @@ const articleContents = {
{
icon: "Gauge",
title: "PageSpeed insights",
description:
"Track website performance with Google Lighthouse integration.",
description: "Track website performance with Google Lighthouse integration.",
},
{
icon: "Server",
@@ -51,7 +50,8 @@ const articleContents = {
{
icon: "Bell",
title: "Instant alerts",
description: "Get notified via email, Slack, Discord, PagerDuty, or webhooks.",
description:
"Get notified via email, Slack, Discord, PagerDuty, or webhooks.",
},
],
},
@@ -141,14 +141,16 @@ const articleContents = {
{ text: "Click **Create monitor** in the top right" },
{ text: "Select **HTTP/HTTPS** as the monitor type" },
{ text: "Enter the URL you want to monitor (e.g., `https://example.com`)" },
{ text: "Set the check interval (1-5 minutes recommended for critical services)" },
{
text: "Set the check interval (1-5 minutes recommended for critical services)",
},
{ text: "Click **Create monitor** to start monitoring" },
],
},
{
type: "callout",
variant: "tip",
text: "Use descriptive names like \"Production API\" or \"Marketing Website\" to easily identify monitors in alerts.",
text: 'Use descriptive names like "Production API" or "Marketing Website" to easily identify monitors in alerts.',
},
{
type: "heading",
@@ -234,13 +236,22 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Uptime", text: "View and manage HTTP, ping, port, and Docker monitors" },
{ bold: "PageSpeed", text: "Access performance monitoring and Lighthouse reports" },
{
bold: "Uptime",
text: "View and manage HTTP, ping, port, and Docker monitors",
},
{
bold: "PageSpeed",
text: "Access performance monitoring and Lighthouse reports",
},
{ bold: "Infrastructure", text: "Monitor server hardware metrics" },
{ bold: "Incidents", text: "View current and past downtime events" },
{ bold: "Status pages", text: "Create and manage public status pages" },
{ bold: "Maintenance", text: "Schedule planned maintenance windows" },
{ bold: "Notifications", text: "Configure alert channels (email, Slack, Discord, etc.)" },
{
bold: "Notifications",
text: "Configure alert channels (email, Slack, Discord, etc.)",
},
{ bold: "Settings", text: "Manage account and global settings" },
],
},
@@ -257,7 +268,10 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Status indicator", text: "Green (up), red (down), or yellow (degraded)" },
{
bold: "Status indicator",
text: "Green (up), red (down), or yellow (degraded)",
},
{ bold: "Name", text: "The monitor's display name" },
{ bold: "URL/Host", text: "The target being monitored" },
{ bold: "Response time", text: "Latest response time in milliseconds" },
@@ -435,10 +449,19 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Name", text: "A descriptive name for the monitor (max 50 characters)" },
{
bold: "Name",
text: "A descriptive name for the monitor (max 50 characters)",
},
{ bold: "URL", text: "The full URL to monitor (must include protocol)" },
{ bold: "Check interval", text: "How often to check (15 seconds to 30 minutes)" },
{ bold: "Ignore TLS errors", text: "Skip SSL certificate validation if needed" },
{
bold: "Check interval",
text: "How often to check (15 seconds to 30 minutes)",
},
{
bold: "Ignore TLS errors",
text: "Skip SSL certificate validation if needed",
},
],
},
{
@@ -456,7 +479,10 @@ const articleContents = {
items: [
{ bold: "Match method", text: "How to compare: equal, include, or regex" },
{ bold: "Expected value", text: "The value to match against" },
{ bold: "JSON path", text: "JMESPath expression to extract data from JSON responses" },
{
bold: "JSON path",
text: "JMESPath expression to extract data from JSON responses",
},
],
},
{
@@ -680,10 +706,19 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Service criticality", text: "Mission-critical services need shorter intervals" },
{ bold: "Expected downtime impact", text: "High-traffic sites benefit from faster detection" },
{
bold: "Service criticality",
text: "Mission-critical services need shorter intervals",
},
{
bold: "Expected downtime impact",
text: "High-traffic sites benefit from faster detection",
},
{ bold: "Resource usage", text: "Shorter intervals use more system resources" },
{ bold: "False positive tolerance", text: "Longer intervals reduce noise from brief glitches" },
{
bold: "False positive tolerance",
text: "Longer intervals reduce noise from brief glitches",
},
],
},
{
@@ -782,7 +817,10 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Issuer", text: "The certificate authority that issued the certificate" },
{
bold: "Issuer",
text: "The certificate authority that issued the certificate",
},
{ bold: "Valid from", text: "When the certificate became valid" },
{ bold: "Expiration date", text: "When the certificate expires" },
{ bold: "Days until expiry", text: "Countdown to expiration" },
@@ -1002,7 +1040,10 @@ const articleContents = {
type: "bullet-list",
items: [
{ bold: "Performance", text: "Measures loading speed and interactivity" },
{ bold: "Accessibility", text: "Evaluates usability for people with disabilities" },
{
bold: "Accessibility",
text: "Evaluates usability for people with disabilities",
},
{ bold: "Best practices", text: "Checks for modern web development standards" },
{ bold: "SEO", text: "Assesses search engine optimization basics" },
],
@@ -1191,8 +1232,14 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Upward trends", text: "Scores improving—your optimizations are working" },
{ bold: "Downward trends", text: "Scores declining—investigate recent changes" },
{
bold: "Upward trends",
text: "Scores improving—your optimizations are working",
},
{
bold: "Downward trends",
text: "Scores declining—investigate recent changes",
},
{ bold: "Flat trends", text: "Stable performance—no significant changes" },
{ bold: "Spikes", text: "Temporary issues—check for one-time events" },
],
@@ -1573,7 +1620,10 @@ const articleContents = {
items: [
{ bold: "Started", text: "When the first failure was detected" },
{ bold: "Notifications sent", text: "When alerts were dispatched" },
{ bold: "Acknowledged", text: "When someone began investigating (if applicable)" },
{
bold: "Acknowledged",
text: "When someone began investigating (if applicable)",
},
{ bold: "Resolved", text: "When the monitor recovered" },
],
},
@@ -1678,9 +1728,18 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Recurring times", text: "Incidents at the same time might indicate scheduled jobs or traffic spikes" },
{ bold: "Duration trends", text: "Longer incidents may indicate slower recovery processes" },
{ bold: "Frequency changes", text: "Increasing incidents could signal infrastructure problems" },
{
bold: "Recurring times",
text: "Incidents at the same time might indicate scheduled jobs or traffic spikes",
},
{
bold: "Duration trends",
text: "Longer incidents may indicate slower recovery processes",
},
{
bold: "Frequency changes",
text: "Increasing incidents could signal infrastructure problems",
},
],
},
],
@@ -2174,10 +2233,19 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "Show uptime percentage", text: "Display overall uptime statistics for each monitor" },
{
bold: "Show uptime percentage",
text: "Display overall uptime statistics for each monitor",
},
{ bold: "Show charts", text: "Display response time performance graphs" },
{ bold: "Show admin login link", text: "Add a link to the Checkmate login page" },
{ bold: "Publish/Unpublish", text: "Control whether the page is publicly accessible" },
{
bold: "Show admin login link",
text: "Add a link to the Checkmate login page",
},
{
bold: "Publish/Unpublish",
text: "Control whether the page is publicly accessible",
},
],
},
{
@@ -2544,10 +2612,22 @@ const articleContents = {
{
type: "bullet-list",
items: [
{ bold: "CPU threshold", text: "Alert when CPU usage exceeds this percentage (1-100%)" },
{ bold: "Memory threshold", text: "Alert when memory usage exceeds this percentage (1-100%)" },
{ bold: "Disk threshold", text: "Alert when disk usage exceeds this percentage (1-100%)" },
{ bold: "Temperature threshold", text: "Alert when temperature exceeds this value (1-150°C)" },
{
bold: "CPU threshold",
text: "Alert when CPU usage exceeds this percentage (1-100%)",
},
{
bold: "Memory threshold",
text: "Alert when memory usage exceeds this percentage (1-100%)",
},
{
bold: "Disk threshold",
text: "Alert when disk usage exceeds this percentage (1-100%)",
},
{
bold: "Temperature threshold",
text: "Alert when temperature exceeds this value (1-150°C)",
},
],
},
],
@@ -2576,7 +2656,10 @@ const articleContents = {
items: [
{ bold: "Light/Dark mode", text: "Toggle between light and dark themes" },
{ bold: "Language", text: "Select your preferred language" },
{ bold: "Show URLs", text: "Toggle whether to display monitor URLs in the interface" },
{
bold: "Show URLs",
text: "Toggle whether to display monitor URLs in the interface",
},
],
},
{
client/src/Components/v1/UserGuide/content/userGuideConfig.js
+9 -1
View File
@@ -109,7 +109,15 @@ export const collections = [
id: "uptime-metrics",
title: "Understanding uptime metrics",
description: "Response time, status codes, and uptime percentage.",
keywords: ["metrics", "response", "time", "status", "code", "uptime", "percentage"],
keywords: [
"metrics",
"response",
"time",
"status",
"code",
"uptime",
"percentage",
],
},
],
},
client/src/Components/v1/UserGuide/index.jsx
+7 -1
View File
@@ -10,7 +10,13 @@ import {
const UserGuideSidebar = () => {
const { isOpen, open, close } = useUserGuideSidebarContext();
return <SidebarWrapper isOpen={isOpen} onOpen={open} onClose={close} />;
return (
<SidebarWrapper
isOpen={isOpen}
onOpen={open}
onClose={close}
/>
);
};
export {