diff --git a/client/src/Components/v1/UserGuide/ArticlePage.css b/client/src/Components/v1/UserGuide/ArticlePage.css index fd1e1b7e6..ebe3e7b4d 100644 --- a/client/src/Components/v1/UserGuide/ArticlePage.css +++ b/client/src/Components/v1/UserGuide/ArticlePage.css @@ -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; diff --git a/client/src/Components/v1/UserGuide/ArticlePage.jsx b/client/src/Components/v1/UserGuide/ArticlePage.jsx index b90072a3f..6b4fe2c9a 100644 --- a/client/src/Components/v1/UserGuide/ArticlePage.jsx +++ b/client/src/Components/v1/UserGuide/ArticlePage.jsx @@ -136,7 +136,9 @@ const ArticlePage = ({
- +
{ cursor: "pointer", }} > -
+
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( - + {match[2]} ); @@ -317,7 +321,10 @@ const ContentRenderer = ({ content, onNavigate }) => { ); const renderChecklist = (block, index) => ( -
+
{block.items.map((item, i) => (
{ height: "22px", }} > - +
{ height: "20px", }} > - + { 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) => ( -
+
{ }} > Join our Discord - +
@@ -116,7 +120,11 @@ const HelpSection = () => { }} > GitHub discussions - +
diff --git a/client/src/Components/v1/UserGuide/ImageLightbox.jsx b/client/src/Components/v1/UserGuide/ImageLightbox.jsx index ab78b9501..f7ebb9670 100644 --- a/client/src/Components/v1/UserGuide/ImageLightbox.jsx +++ b/client/src/Components/v1/UserGuide/ImageLightbox.jsx @@ -74,7 +74,11 @@ const ImageLightbox = ({ src, alt, caption, onClose }) => { }} title="Close (Esc)" > - + {/* Image container */} diff --git a/client/src/Components/v1/UserGuide/STYLE_GUIDE.md b/client/src/Components/v1/UserGuide/STYLE_GUIDE.md index 5733595f8..1e6fdc4d7 100644 --- a/client/src/Components/v1/UserGuide/STYLE_GUIDE.md +++ b/client/src/Components/v1/UserGuide/STYLE_GUIDE.md @@ -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_ diff --git a/client/src/Components/v1/UserGuide/SearchResults.css b/client/src/Components/v1/UserGuide/SearchResults.css index 3d027be4e..6a04d90d8 100644 --- a/client/src/Components/v1/UserGuide/SearchResults.css +++ b/client/src/Components/v1/UserGuide/SearchResults.css @@ -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 { diff --git a/client/src/Components/v1/UserGuide/SidebarHeader.css b/client/src/Components/v1/UserGuide/SidebarHeader.css index 11b69c153..3f112b356 100644 --- a/client/src/Components/v1/UserGuide/SidebarHeader.css +++ b/client/src/Components/v1/UserGuide/SidebarHeader.css @@ -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 { diff --git a/client/src/Components/v1/UserGuide/SidebarHeader.jsx b/client/src/Components/v1/UserGuide/SidebarHeader.jsx index cc3137d3d..6a003fc3b 100644 --- a/client/src/Components/v1/UserGuide/SidebarHeader.jsx +++ b/client/src/Components/v1/UserGuide/SidebarHeader.jsx @@ -105,7 +105,10 @@ const SidebarHeader = ({ }} title="Back" > - + {/* Forward button */} @@ -129,7 +132,10 @@ const SidebarHeader = ({ }} title="Forward" > - + {/* Home button */} @@ -156,7 +162,10 @@ const SidebarHeader = ({ }} title="Home" > - + )} @@ -167,9 +176,7 @@ const SidebarHeader = ({ style={{ position: "relative", flex: 1, minWidth: 0 }} > )} @@ -308,7 +320,10 @@ const SidebarHeader = ({ }} title="Search" > - + {/* Close button */} @@ -329,7 +344,10 @@ const SidebarHeader = ({ }} title="Close" > - +
diff --git a/client/src/Components/v1/UserGuide/SidebarWrapper.jsx b/client/src/Components/v1/UserGuide/SidebarWrapper.jsx index 85ac7e9e5..70b7421d3 100644 --- a/client/src/Components/v1/UserGuide/SidebarWrapper.jsx +++ b/client/src/Components/v1/UserGuide/SidebarWrapper.jsx @@ -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 && ( - + )} ); @@ -419,7 +426,10 @@ const SidebarWrapper = ({ isOpen, onClose, onOpen, initialPath, onOpenInNewTab }
{/* Tab Bar - Always visible */} - + {/* Main Sidebar Content - Slides in/out */}
{ } + icon={ + + } isActive={activeTab === "user-guide"} onClick={() => onTabChange("user-guide")} colors={colors} @@ -73,7 +78,12 @@ const TabBar = ({ activeTab, onTabChange }) => { } + icon={ + + } isActive={activeTab === "help"} onClick={() => onTabChange("help")} colors={colors} diff --git a/client/src/Components/v1/UserGuide/UserGuideLanding.css b/client/src/Components/v1/UserGuide/UserGuideLanding.css index 7fe9a6a9a..dd1831332 100644 --- a/client/src/Components/v1/UserGuide/UserGuideLanding.css +++ b/client/src/Components/v1/UserGuide/UserGuideLanding.css @@ -35,5 +35,5 @@ } .user-guide-fast-find-item:hover .arrow-icon { - color: #1570EF; + color: #1570ef; } diff --git a/client/src/Components/v1/UserGuide/UserGuideLanding.jsx b/client/src/Components/v1/UserGuide/UserGuideLanding.jsx index 563d7ae31..7dc928b9d 100644 --- a/client/src/Components/v1/UserGuide/UserGuideLanding.jsx +++ b/client/src/Components/v1/UserGuide/UserGuideLanding.jsx @@ -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.

-
)}
diff --git a/client/src/Components/v1/UserGuide/content/index.js b/client/src/Components/v1/UserGuide/content/index.js index 6d6ddaf18..348653e0e 100644 --- a/client/src/Components/v1/UserGuide/content/index.js +++ b/client/src/Components/v1/UserGuide/content/index.js @@ -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", + }, ], }, { diff --git a/client/src/Components/v1/UserGuide/content/userGuideConfig.js b/client/src/Components/v1/UserGuide/content/userGuideConfig.js index 420dcd44e..1d1afbfe7 100644 --- a/client/src/Components/v1/UserGuide/content/userGuideConfig.js +++ b/client/src/Components/v1/UserGuide/content/userGuideConfig.js @@ -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", + ], }, ], }, diff --git a/client/src/Components/v1/UserGuide/index.jsx b/client/src/Components/v1/UserGuide/index.jsx index c30b5d724..6a0f65047 100644 --- a/client/src/Components/v1/UserGuide/index.jsx +++ b/client/src/Components/v1/UserGuide/index.jsx @@ -10,7 +10,13 @@ import { const UserGuideSidebar = () => { const { isOpen, open, close } = useUserGuideSidebarContext(); - return ; + return ( + + ); }; export {