943 lines
234 KiB
HTML
943 lines
234 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-reference/web-ui-spec" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<title data-rh="true">CmdForge Web UI Design | CmdForge</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pages.brrd.tech/rob/CmdForge/reference/web-ui-spec/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="CmdForge Web UI Design | CmdForge"><meta data-rh="true" name="description" content="Purpose"><meta data-rh="true" property="og:description" content="Purpose"><link data-rh="true" rel="icon" href="/rob/CmdForge/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pages.brrd.tech/rob/CmdForge/reference/web-ui-spec/"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/CmdForge/reference/web-ui-spec/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/CmdForge/reference/web-ui-spec/" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Reference","item":"https://pages.brrd.tech/rob/CmdForge/category/reference"},{"@type":"ListItem","position":2,"name":"Web UI Design","item":"https://pages.brrd.tech/rob/CmdForge/reference/web-ui-spec"}]}</script><link rel="stylesheet" href="/rob/CmdForge/assets/css/styles.37cb0314.css">
|
||
<script src="/rob/CmdForge/assets/js/runtime~main.e42afd1d.js" defer="defer"></script>
|
||
<script src="/rob/CmdForge/assets/js/main.ff45e93b.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/rob/CmdForge/"><b class="navbar__title text--truncate">CmdForge</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://gitea.brrd.tech/rob/CmdForge" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Source Code<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/"><span title="CmdForge Overview" class="linkLabel_WmDU">CmdForge Overview</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/architecture/"><span title="CmdForge Architecture" class="linkLabel_WmDU">CmdForge Architecture</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" href="/rob/CmdForge/category/reference/"><span title="Reference" class="categoryLinkLabel_W154">Reference</span></a><button aria-label="Collapse sidebar category 'Reference'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/providers/"><span title="Provider Setup" class="linkLabel_WmDU">Provider Setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/registry-spec/"><span title="Registry API" class="linkLabel_WmDU">Registry API</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/meta-tools/"><span title="Meta-Tools" class="linkLabel_WmDU">Meta-Tools</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/collections/"><span title="Collections" class="linkLabel_WmDU">Collections</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/examples/"><span title="Example Tools" class="linkLabel_WmDU">Example Tools</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/rob/CmdForge/reference/design/"><span title="Design Philosophy" class="linkLabel_WmDU">Design Philosophy</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/rob/CmdForge/reference/web-ui-spec/"><span title="Web UI Design" class="linkLabel_WmDU">Web UI Design</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/todos/"><span title="CmdForge TODOs" class="linkLabel_WmDU">CmdForge TODOs</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/goals/"><span title="Goals" class="linkLabel_WmDU">Goals</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/ideas-and-exploration/"><span title="Ideas & Exploration" class="linkLabel_WmDU">Ideas & Exploration</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/CmdForge/milestones/"><span title="Milestones" class="linkLabel_WmDU">Milestones</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/rob/CmdForge/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/rob/CmdForge/category/reference/"><span>Reference</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Web UI Design</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>CmdForge Web UI Design</h1></header>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="purpose">Purpose<a href="#purpose" class="hash-link" aria-label="Direct link to Purpose" title="Direct link to Purpose" translate="no"></a></h2>
|
||
<p>Deliver a professional web front-end that explains CmdForge, helps users discover tools, and supports a collaborative ecosystem. The site should drive sustainable revenue without undermining trust or usability.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="mission-alignment">Mission Alignment<a href="#mission-alignment" class="hash-link" aria-label="Direct link to Mission Alignment" title="Direct link to Mission Alignment" translate="no"></a></h2>
|
||
<p>This web UI serves the broader CmdForge mission: to provide a <strong>universally accessible development ecosystem</strong> that empowers regular people to collaborate and build upon each other's progress rather than compete. Revenue generated supports:</p>
|
||
<ul>
|
||
<li class="">Maintaining and expanding the project</li>
|
||
<li class="">Future hosting of AI models for users with less access to paid services</li>
|
||
<li class="">Building a sustainable, community-first platform</li>
|
||
</ul>
|
||
<p>The UI design must reflect these values through its structure, content, and monetization approach.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="guiding-principles">Guiding Principles<a href="#guiding-principles" class="hash-link" aria-label="Direct link to Guiding Principles" title="Direct link to Guiding Principles" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Utility first</strong>: Documentation, tutorials, and examples are the primary draw.</li>
|
||
<li class=""><strong>Trust and clarity</strong>: Ads and monetization are transparent, minimal, and never block core flows.</li>
|
||
<li class=""><strong>Collaboration over competition</strong>: Highlight contributors, shared projects, and community learning.</li>
|
||
<li class=""><strong>Performance and accessibility</strong>: Fast, readable, WCAG 2.1 AA target.</li>
|
||
<li class=""><strong>Unix philosophy</strong>: Composable, provider-agnostic, YAML-based tools—the UI should communicate this clearly.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="information-architecture">Information Architecture<a href="#information-architecture" class="hash-link" aria-label="Direct link to Information Architecture" title="Direct link to Information Architecture" translate="no"></a></h2>
|
||
<p>Public, ad-supported (Tier 1):</p>
|
||
<ul>
|
||
<li class=""><code>/</code> landing</li>
|
||
<li class=""><code>/docs/*</code> documentation</li>
|
||
<li class=""><code>/tutorials/*</code></li>
|
||
<li class=""><code>/examples</code></li>
|
||
<li class=""><code>/blog</code></li>
|
||
<li class=""><code>/about</code></li>
|
||
<li class=""><code>/donate</code></li>
|
||
</ul>
|
||
<p>Registry (Tier 2, ad-free):</p>
|
||
<ul>
|
||
<li class=""><code>/tools</code></li>
|
||
<li class=""><code>/tools/{owner}/{name}</code></li>
|
||
<li class=""><code>/categories</code></li>
|
||
<li class=""><code>/categories/{name}</code></li>
|
||
<li class=""><code>/search</code></li>
|
||
</ul>
|
||
<p>Community (Tier 3, light ads):</p>
|
||
<ul>
|
||
<li class=""><code>/forum</code></li>
|
||
<li class=""><code>/contributors</code></li>
|
||
<li class=""><code>/announcements</code></li>
|
||
</ul>
|
||
<p>Publisher dashboard (auth-only):</p>
|
||
<ul>
|
||
<li class=""><code>/register</code>, <code>/login</code></li>
|
||
<li class=""><code>/dashboard/tools</code></li>
|
||
<li class=""><code>/dashboard/connections</code> (manage connected apps)</li>
|
||
<li class=""><code>/dashboard/settings</code></li>
|
||
</ul>
|
||
<p>API:</p>
|
||
<ul>
|
||
<li class=""><code>/api/v1/*</code> (shared with CLI)</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="visual-design-system">Visual Design System<a href="#visual-design-system" class="hash-link" aria-label="Direct link to Visual Design System" title="Direct link to Visual Design System" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="color-palette">Color Palette<a href="#color-palette" class="hash-link" aria-label="Direct link to Color Palette" title="Direct link to Color Palette" translate="no"></a></h3>
|
||
<table><thead><tr><th>Role</th><th>Color</th><th>Hex</th><th>Usage</th></tr></thead><tbody><tr><td>Primary</td><td>Indigo</td><td><code>#6366F1</code></td><td>CTAs, active states, brand identity</td></tr><tr><td>Secondary</td><td>Cyan</td><td><code>#06B6D4</code></td><td>Secondary actions, accents, links</td></tr><tr><td>Background</td><td>Off-white</td><td><code>#F9FAFB</code></td><td>Page background</td></tr><tr><td>Surface</td><td>White</td><td><code>#FFFFFF</code></td><td>Cards, content areas</td></tr><tr><td>Text Primary</td><td>Dark gray</td><td><code>#1F2937</code></td><td>Headlines, body text</td></tr><tr><td>Text Secondary</td><td>Medium gray</td><td><code>#6B7280</code></td><td>Descriptions, metadata</td></tr><tr><td>Text Muted</td><td>Light gray</td><td><code>#9CA3AF</code></td><td>Timestamps, hints</td></tr><tr><td>Border</td><td>Light gray</td><td><code>#E5E7EB</code></td><td>Card borders, dividers</td></tr><tr><td>Success</td><td>Green</td><td><code>#10B981</code></td><td>Success states, confirmations</td></tr><tr><td>Warning</td><td>Amber</td><td><code>#F59E0B</code></td><td>Warnings, deprecation notices</td></tr><tr><td>Error</td><td>Red</td><td><code>#EF4444</code></td><td>Error states, critical alerts</td></tr><tr><td>Header</td><td>Dark slate</td><td><code>#2C3E50</code></td><td>Header background</td></tr><tr><td>Ad Container</td><td>Light blue</td><td><code>#DBEAFE</code></td><td>Ad zone background (distinct from content)</td></tr><tr><td>Sponsored</td><td>Light amber</td><td><code>#FEF3C7</code></td><td>Sponsored content background</td></tr></tbody></table>
|
||
<p><strong>Contrast Requirements:</strong></p>
|
||
<ul>
|
||
<li class="">Body text: minimum 4.5:1 ratio (WCAG AA)</li>
|
||
<li class="">Large text (18px+): minimum 3:1 ratio</li>
|
||
<li class="">UI components: minimum 3:1 ratio against adjacent colors</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="typography">Typography<a href="#typography" class="hash-link" aria-label="Direct link to Typography" title="Direct link to Typography" translate="no"></a></h3>
|
||
<table><thead><tr><th>Element</th><th>Font</th><th>Size</th><th>Weight</th><th>Line Height</th></tr></thead><tbody><tr><td>H1</td><td>Inter/system-ui</td><td>36px (2.25rem)</td><td>700</td><td>1.2</td></tr><tr><td>H2</td><td>Inter/system-ui</td><td>24px (1.5rem)</td><td>700</td><td>1.3</td></tr><tr><td>H3</td><td>Inter/system-ui</td><td>20px (1.25rem)</td><td>600</td><td>1.4</td></tr><tr><td>H4</td><td>Inter/system-ui</td><td>18px (1.125rem)</td><td>600</td><td>1.4</td></tr><tr><td>Body</td><td>Inter/system-ui</td><td>16px (1rem)</td><td>400</td><td>1.6</td></tr><tr><td>Small</td><td>Inter/system-ui</td><td>14px (0.875rem)</td><td>400</td><td>1.5</td></tr><tr><td>Code</td><td>JetBrains Mono/monospace</td><td>14px</td><td>400</td><td>1.5</td></tr><tr><td>Code block</td><td>JetBrains Mono/monospace</td><td>13px</td><td>400</td><td>1.6</td></tr></tbody></table>
|
||
<p><strong>Font Stack:</strong></p>
|
||
<div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--font-sans</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'Inter'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> ui-sans-serif</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> system-ui</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> -apple-system</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> sans-serif</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--font-mono</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'JetBrains Mono'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> ui-monospace</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'Cascadia Code'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> monospace</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="spacing-system">Spacing System<a href="#spacing-system" class="hash-link" aria-label="Direct link to Spacing System" title="Direct link to Spacing System" translate="no"></a></h3>
|
||
<p>Use an 8px base grid for consistent spacing:</p>
|
||
<table><thead><tr><th>Token</th><th>Value</th><th>Usage</th></tr></thead><tbody><tr><td><code>--space-1</code></td><td>4px</td><td>Tight spacing, icon margins</td></tr><tr><td><code>--space-2</code></td><td>8px</td><td>Element gaps</td></tr><tr><td><code>--space-3</code></td><td>12px</td><td>Small component padding</td></tr><tr><td><code>--space-4</code></td><td>16px</td><td>Card padding, section gaps</td></tr><tr><td><code>--space-6</code></td><td>24px</td><td>Section padding</td></tr><tr><td><code>--space-8</code></td><td>32px</td><td>Large gaps</td></tr><tr><td><code>--space-12</code></td><td>48px</td><td>Section margins</td></tr><tr><td><code>--space-16</code></td><td>64px</td><td>Major section separators</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="border-radius">Border Radius<a href="#border-radius" class="hash-link" aria-label="Direct link to Border Radius" title="Direct link to Border Radius" translate="no"></a></h3>
|
||
<table><thead><tr><th>Token</th><th>Value</th><th>Usage</th></tr></thead><tbody><tr><td><code>--radius-sm</code></td><td>4px</td><td>Buttons, badges</td></tr><tr><td><code>--radius-md</code></td><td>8px</td><td>Cards, inputs</td></tr><tr><td><code>--radius-lg</code></td><td>12px</td><td>Modals, large cards</td></tr><tr><td><code>--radius-full</code></td><td>9999px</td><td>Avatars, pills</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="shadow-system">Shadow System<a href="#shadow-system" class="hash-link" aria-label="Direct link to Shadow System" title="Direct link to Shadow System" translate="no"></a></h3>
|
||
<div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--shadow-sm</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">1</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">2</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.05</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--shadow-md</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">4</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">6</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-1</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">2</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">4</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-2</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--shadow-lg</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">10</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">15</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-3</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">4</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">6</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-4</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--shadow-hover</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">20</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">25</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-5</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">8</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">10</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">-6</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.1</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="page-requirements">Page Requirements<a href="#page-requirements" class="hash-link" aria-label="Direct link to Page Requirements" title="Direct link to Page Requirements" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="landing-page-">Landing Page (<code>/</code>)<a href="#landing-page-" class="hash-link" aria-label="Direct link to landing-page-" title="Direct link to landing-page-" translate="no"></a></h3>
|
||
<p><strong>Purpose:</strong> Convert visitors to users by clearly communicating CmdForge' value proposition and providing immediate paths to explore.</p>
|
||
<p><strong>Reference mockup:</strong> <code>discussions/diagrams/cmdforge-registry_rob_6.svg</code></p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-1-hero-above-the-fold">Section 1: Hero (Above the Fold)<a href="#section-1-hero-above-the-fold" class="hash-link" aria-label="Direct link to Section 1: Hero (Above the Fold)" title="Direct link to Section 1: Hero (Above the Fold)" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [CmdForge] Docs Tutorials Registry Community About 🔍 │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├─────────────────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Build Custom AI Commands in YAML │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ───────────────────────────────────────────────────────── │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Create Unix-style pipeable tools that work with any AI │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ provider. Provider-agnostic and composable. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ┌──────────────────────────────────────────────────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ $ pip install cmdforge && cmdforge init │ [📋]│</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ └──────────────────────────────────────────────────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Get Started] [View Tutorials] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Headline:</strong> "Build Custom AI Commands in YAML" (benefit-focused, differentiating)</li>
|
||
<li class=""><strong>Subheadline:</strong> "Create Unix-style pipeable tools that work with any AI provider. Provider-agnostic and composable for ultimate flexibility."</li>
|
||
<li class=""><strong>Install snippet:</strong> <code>pip install cmdforge && cmdforge init</code> with copy button</li>
|
||
<li class=""><strong>Primary CTA:</strong> "Get Started" → links to <code>/docs/getting-started</code> (indigo background)</li>
|
||
<li class=""><strong>Secondary CTA:</strong> "View Tutorials" → links to <code>/tutorials</code> (outlined, cyan border)</li>
|
||
</ul>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Hero background: white card (#FFFFFF) with subtle shadow on off-white page</li>
|
||
<li class="">Maximum content width: 1100px centered</li>
|
||
<li class="">Install snippet: monospace font, light gray background (#E0E0E0), copy icon on right</li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-2-three-pillars-why-cmdforge">Section 2: Three Pillars (Why CmdForge?)<a href="#section-2-three-pillars-why-cmdforge" class="hash-link" aria-label="Direct link to Section 2: Three Pillars (Why CmdForge?)" title="Direct link to Section 2: Three Pillars (Why CmdForge?)" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Why CmdForge? │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┬──────────────────┬────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [✓] Easy │ [⚡] Powerful │ [👥] Community │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Simple YAML │ Any AI │ Share, discover, │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ configuration │ provider, │ contribute to a │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ for quick │ compose │ growing ecosystem. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ setup. │ complex │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ workflows. │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└──────────────────┴──────────────────┴────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content:</strong></p>
|
||
<ul>
|
||
<li class=""><strong>Pillar 1 - Easy to Use:</strong> Icon in indigo circle, "Simple YAML configuration for quick setup."</li>
|
||
<li class=""><strong>Pillar 2 - Powerful:</strong> Icon in cyan circle, "Leverage any AI provider, compose complex workflows."</li>
|
||
<li class=""><strong>Pillar 3 - Community:</strong> Icon in indigo circle, "Share, discover, and contribute to a growing ecosystem."</li>
|
||
</ul>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Each pillar: white card with 1px border, subtle shadow on hover</li>
|
||
<li class="">Icon circles: 40px diameter with pillar icon centered</li>
|
||
<li class="">Equal width columns (3 across on desktop)</li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-3-featured-tools--projects">Section 3: Featured Tools & Projects<a href="#section-3-featured-tools--projects" class="hash-link" aria-label="Direct link to Section 3: Featured Tools & Projects" title="Direct link to Section 3: Featured Tools & Projects" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Featured Tools & Projects │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┬──────────────────┬────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Category] │ [Category] │ [Category] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ● Tool Title │ ● Tool Title │ ● Tool Title │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Description... │ Description... │ Description... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Author: name │ Author: name │ Author: name │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Downloads: 1.2K │ Downloads: 800 │ Downloads: 2.5K │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ┌────────────┐ │ ┌────────────┐ │ ┌────────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │run command │ │ │run command │ │ │run command │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ └────────────┘ │ └────────────┘ │ └────────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┼──────────────────┼────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Row 2...] │ [Row 2...] │ [Row 2...] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└──────────────────┴──────────────────┴────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content (per card):</strong></p>
|
||
<ul>
|
||
<li class="">Category badge (top-right, cyan pill)</li>
|
||
<li class="">Tool icon/avatar (indigo circle)</li>
|
||
<li class="">Tool name (bold, 18px)</li>
|
||
<li class="">Short description (14px, secondary text)</li>
|
||
<li class="">Author attribution</li>
|
||
<li class="">Download count with icon</li>
|
||
<li class="">One-line install command in code box</li>
|
||
</ul>
|
||
<p><strong>Data Source:</strong> <code>GET /api/v1/tools?sort=downloads&limit=6</code></p>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">3 columns on desktop, 2 on tablet, 1 on mobile</li>
|
||
<li class="">Cards have subtle shadow, lift on hover</li>
|
||
<li class="">"View All Tools" link below grid → <code>/tools</code></li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-4-getting-started">Section 4: Getting Started<a href="#section-4-getting-started" class="hash-link" aria-label="Direct link to Section 4: Getting Started" title="Direct link to Section 4: Getting Started" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Getting Started │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┬──────────────────┬────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Tutorial 1: │ Tutorial 2: │ Tutorial 3: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Basic Setup │ Your First Tool │ Advanced Workflows │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Learn how to... │ Create a │ Combine multiple │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ simple AI... │ tools for... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Read More] │ [Read More] │ [Read More] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└──────────────────┴──────────────────┴────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content:</strong></p>
|
||
<ul>
|
||
<li class="">3 tutorial cards highlighting core learning paths</li>
|
||
<li class="">Each card: title (bold), description (2 lines max), CTA button</li>
|
||
</ul>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Matches tool card styling for visual consistency</li>
|
||
<li class="">"Read More" buttons in primary indigo</li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-5-featured-contributor">Section 5: Featured Contributor<a href="#section-5-featured-contributor" class="hash-link" aria-label="Direct link to Section 5: Featured Contributor" title="Direct link to Section 5: Featured Contributor" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Featured Contributor │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├─────────────────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Avatar] Name Here │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Creator of "Tool Name" and active community member. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [View Profile] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content:</strong></p>
|
||
<ul>
|
||
<li class="">Monthly rotating spotlight</li>
|
||
<li class="">Avatar (60px circle), name, brief bio, profile link</li>
|
||
</ul>
|
||
<p><strong>Data Source:</strong> Manual curation or <code>GET /api/v1/contributors/featured</code></p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-6-footer-ad-zone-optional">Section 6: Footer Ad Zone (Optional)<a href="#section-6-footer-ad-zone-optional" class="hash-link" aria-label="Direct link to Section 6: Footer Ad Zone (Optional)" title="Direct link to Section 6: Footer Ad Zone (Optional)" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Advertisement: Support CmdForge Development] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Light blue background (#DBEAFE) to distinguish from content</li>
|
||
<li class="">Clearly labeled as advertisement</li>
|
||
<li class="">Optional based on ad fill rate</li>
|
||
</ul>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="section-7-footer">Section 7: Footer<a href="#section-7-footer" class="hash-link" aria-label="Direct link to Section 7: Footer" title="Direct link to Section 7: Footer" translate="no"></a></h4>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ CmdForge │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ───────────────────────────────────────────────────────────── │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Docs | Registry | Community | About | Donate │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Privacy | Terms | GitHub | Twitter │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ © 2025 CmdForge. Open source under MIT License. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="docstutorials-pages-docs-tutorials">Docs/Tutorials Pages (<code>/docs/*</code>, <code>/tutorials/*</code>)<a href="#docstutorials-pages-docs-tutorials" class="hash-link" aria-label="Direct link to docstutorials-pages-docs-tutorials" title="Direct link to docstutorials-pages-docs-tutorials" translate="no"></a></h3>
|
||
<p><strong>Layout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Header Navigation] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────┬────────────────────────────────────────────┬───────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ TOC │ Content Area (70%) │ Sidebar │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ (Desktop) │ │ (Ads) │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ # Page Title │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Section 1 │ │ [Ad] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Section 2 │ Content with code blocks... │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Section 3 │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ ```python │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ # Code with syntax highlighting │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ ``` [Copy] │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ [Embedded Video] │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└──────────────┴────────────────────────────────────────────┴───────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Content Requirements:</strong></p>
|
||
<ul>
|
||
<li class="">Persistent left TOC on desktop (scroll-spy highlighting current section)</li>
|
||
<li class="">Code blocks with syntax highlighting and copy button</li>
|
||
<li class="">Video embeds (YouTube) with play button overlay, lazy-loaded</li>
|
||
<li class="">Callout boxes for tips, warnings, info (color-coded)</li>
|
||
<li class="">Related articles at bottom</li>
|
||
</ul>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">TOC: fixed on scroll, 200px width</li>
|
||
<li class="">Content area: max-width 700px, generous line-height (1.6-1.8)</li>
|
||
<li class="">Sidebar ads: 300px width, only on desktop</li>
|
||
<li class="">Mobile: TOC collapses to hamburger, sidebar hidden</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="tool-detail-page-toolsownername">Tool Detail Page (<code>/tools/{owner}/{name}</code>)<a href="#tool-detail-page-toolsownername" class="hash-link" aria-label="Direct link to tool-detail-page-toolsownername" title="Direct link to tool-detail-page-toolsownername" translate="no"></a></h3>
|
||
<p><strong>Layout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Header Navigation] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├─────────────────────────────────────────────────────┬─────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ README Content (70%) │ Sidebar (30%) │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ # tool-name │ ┌───────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │Install │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Rendered markdown from README.md... │ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │$ run cmd │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Usage examples │ └───────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Configuration │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ - Step definitions │ Versions: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ v1.2.0 ● │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ v1.1.0 │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ v1.0.0 │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ Downloads: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ 1,234 │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ Category: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ [text-proc] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ Tags: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ [ai] [cli] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ [Report] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┴─────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Sidebar Elements:</strong></p>
|
||
<ul>
|
||
<li class="">Install command with copy button (prominent)</li>
|
||
<li class="">Version selector/list (current version highlighted)</li>
|
||
<li class="">Download statistics</li>
|
||
<li class="">Category badge (linked)</li>
|
||
<li class="">Tags (linked to search)</li>
|
||
<li class="">Report abuse button</li>
|
||
<li class="">Publisher info (avatar, name, link to profile)</li>
|
||
</ul>
|
||
<p><strong>NO ADS on tool detail pages</strong> (Tier 2 - registry is ad-free)</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="registry-browse-page-tools">Registry Browse Page (<code>/tools</code>)<a href="#registry-browse-page-tools" class="hash-link" aria-label="Direct link to registry-browse-page-tools" title="Direct link to registry-browse-page-tools" translate="no"></a></h3>
|
||
<p><strong>Layout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Header Navigation] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├───────────────────────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ┌─────────────────────────────────────────────────────────────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ 🔍 Search tools... [Category ▼] [Sort ▼] │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ └─────────────────────────────────────────────────────────────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├───────────────────────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Showing 142 tools │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┬──────────────────┬──────────────────┬──────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Tool Card] │ [Tool Card] │ [Tool Card] │ [Tool Card] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├──────────────────┼──────────────────┼──────────────────┼──────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Tool Card] │ [Tool Card] │ [Tool Card] │ [Tool Card] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├───────────────────────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [← Previous] Page 1 of 8 [Next →] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Search/Filter Features:</strong></p>
|
||
<ul>
|
||
<li class="">Full-text search with debounce (300ms)</li>
|
||
<li class="">Category dropdown filter</li>
|
||
<li class="">Sort options: Popular (downloads), Recent, Name</li>
|
||
<li class="">Results count display</li>
|
||
<li class="">Pagination (20 per page)</li>
|
||
</ul>
|
||
<p><strong>Tool Card (compact):</strong></p>
|
||
<ul>
|
||
<li class="">Tool name + owner</li>
|
||
<li class="">Short description (2 lines max, truncated)</li>
|
||
<li class="">Download count</li>
|
||
<li class="">Last updated date</li>
|
||
<li class="">Category tag</li>
|
||
</ul>
|
||
<p><strong>NO ADS on browse pages</strong> (Tier 2)</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="publisher-dashboard-dashboard">Publisher Dashboard (<code>/dashboard</code>)<a href="#publisher-dashboard-dashboard" class="hash-link" aria-label="Direct link to publisher-dashboard-dashboard" title="Direct link to publisher-dashboard-dashboard" translate="no"></a></h3>
|
||
<p><strong>Layout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Header with user menu] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">├─────────────────┬─────────────────────────────────────────────────────┤</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Sidebar │ Content Area │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Overview │ ┌─ Tab: My Tools ──────────────────────────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ My Tools │ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Connections │ │ Published Tools (3) [+ New Tool] │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Settings │ │ ┌─────────────────────────────────────────┐ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ summarize v1.2.0 | 142 downloads │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ [Edit] [View] [Yank] │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ └─────────────────────────────────────────┘ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ Pending PRs (1) │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ ┌─────────────────────────────────────────┐ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ new-tool v1.0.0 | Awaiting review │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ │ [View PR] │ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ │ └─────────────────────────────────────────┘ │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ └──────────────────────────────────────────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────┴─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Tabs:</strong></p>
|
||
<ol>
|
||
<li class=""><strong>Overview:</strong> Dashboard with stats (tools count, downloads, connections)</li>
|
||
<li class=""><strong>My Tools:</strong> List of published tools with stats, edit/view/yank actions</li>
|
||
<li class=""><strong>Connections:</strong> Manage connected apps (CLI/TUI instances linked to account)</li>
|
||
<li class=""><strong>Settings:</strong> Profile editing (display name, bio, website), password change</li>
|
||
</ol>
|
||
<p><strong>Connections Page:</strong></p>
|
||
<p>The Connections page (<code>/dashboard/connections</code>) replaces the old API Tokens page with a simpler app pairing flow:</p>
|
||
<ul>
|
||
<li class=""><strong>Connect New App:</strong> Button opens modal with pairing instructions<!-- -->
|
||
<ol>
|
||
<li class="">Shows command: <code>cmdforge config connect <username></code></li>
|
||
<li class="">Or use the TUI: open <code>cmdforge ui</code> and click Connect</li>
|
||
<li class="">"I've Run the Command" button shows pending connections</li>
|
||
<li class="">Approve pending connection with one click</li>
|
||
</ol>
|
||
</li>
|
||
<li class=""><strong>Connected Apps:</strong> List of connected devices showing:<!-- -->
|
||
<ul>
|
||
<li class="">Device hostname</li>
|
||
<li class="">Connection date</li>
|
||
<li class="">Last used timestamp</li>
|
||
<li class="">Disconnect button to revoke access</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>This eliminates the need to manually copy API tokens - users just approve connections from the web UI.</p>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Clean, utilitarian design</li>
|
||
<li class="">Clear action buttons</li>
|
||
<li class="">Status indicators for pending PRs</li>
|
||
<li class="">Pairing modal guides users through connection flow</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="donate-page-donate">Donate Page (<code>/donate</code>)<a href="#donate-page-donate" class="hash-link" aria-label="Direct link to donate-page-donate" title="Direct link to donate-page-donate" translate="no"></a></h3>
|
||
<p><strong>Content:</strong></p>
|
||
<ul>
|
||
<li class="">Mission statement (emotional, connecting to values)</li>
|
||
<li class="">Clear explanation of fund usage (hosting, development, future AI hosting)</li>
|
||
<li class="">Multiple donation options (GitHub Sponsors, PayPal, Ko-fi)</li>
|
||
<li class="">Optional donor recognition section</li>
|
||
<li class="">Transparency about current costs/goals</li>
|
||
</ul>
|
||
<p><strong>Design Notes:</strong></p>
|
||
<ul>
|
||
<li class="">Clean, trustworthy design</li>
|
||
<li class="">Clear CTAs for each donation method</li>
|
||
<li class="">No ads on this page</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="component-library">Component Library<a href="#component-library" class="hash-link" aria-label="Direct link to Component Library" title="Direct link to Component Library" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="buttons">Buttons<a href="#buttons" class="hash-link" aria-label="Direct link to Buttons" title="Direct link to Buttons" translate="no"></a></h3>
|
||
<p><strong>Primary Button:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">btn-primary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Get Started</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Primary indigo (#6366F1)</li>
|
||
<li class="">Text: White, 16px, font-weight 600</li>
|
||
<li class="">Padding: 12px 24px</li>
|
||
<li class="">Border-radius: 4px</li>
|
||
<li class="">Hover: Darken 10%, subtle shadow</li>
|
||
<li class="">Focus: 2px outline offset</li>
|
||
</ul>
|
||
<p><strong>Secondary Button:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">btn-secondary</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">View Tutorials</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Transparent</li>
|
||
<li class="">Border: 2px solid cyan (#06B6D4)</li>
|
||
<li class="">Text: Cyan, 16px, font-weight 600</li>
|
||
<li class="">Hover: Light cyan background (#ECFEFF)</li>
|
||
</ul>
|
||
<p><strong>Ghost Button:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">btn-ghost</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Read More</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Transparent</li>
|
||
<li class="">Text: Primary indigo</li>
|
||
<li class="">Hover: Light indigo background</li>
|
||
</ul>
|
||
<p><strong>Danger Button:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">btn-danger</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Revoke Token</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">button</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Error red (#EF4444)</li>
|
||
<li class="">Text: White</li>
|
||
<li class="">Used for destructive actions</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="cards">Cards<a href="#cards" class="hash-link" aria-label="Direct link to Cards" title="Direct link to Cards" translate="no"></a></h3>
|
||
<p><strong>Tool Card:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Category] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [●] Tool Name │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Short description of the tool that │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ may span two lines maximum... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Author: owner-name │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ⬇ 1,234 downloads │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ┌─────────────────────────────────┐ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │ cmdforge run owner/tool │ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ └─────────────────────────────────┘ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: White (#FFFFFF)</li>
|
||
<li class="">Border: 1px solid border color (#E5E7EB)</li>
|
||
<li class="">Border-radius: 8px</li>
|
||
<li class="">Shadow: shadow-sm, shadow-md on hover</li>
|
||
<li class="">Padding: 16px</li>
|
||
<li class="">Category badge: absolute top-right, cyan background, white text, 12px</li>
|
||
</ul>
|
||
<p><strong>Tutorial Card:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Optional Thumbnail Image] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Tutorial Title Here │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Brief description of what the │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ tutorial covers... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Read More →] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Same base styling as tool card</li>
|
||
<li class="">Optional thumbnail: aspect-ratio 16:9, lazy-loaded</li>
|
||
</ul>
|
||
<p><strong>Contributor Card:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Avatar] Contributor Name │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ @github-handle │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Creator of "Tool Name" │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [View Profile] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Avatar: 48px circle</li>
|
||
<li class="">Horizontal layout for spotlight, vertical for grid</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="navigation">Navigation<a href="#navigation" class="hash-link" aria-label="Direct link to Navigation" title="Direct link to Navigation" translate="no"></a></h3>
|
||
<p><strong>Header Navigation:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Logo] [Docs] [Tutorials] [Registry] [Community] [About] 🔍 │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Donate] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Dark slate (#2C3E50)</li>
|
||
<li class="">Logo: White text, 24px, bold</li>
|
||
<li class="">Nav links: White text, 16px</li>
|
||
<li class="">Active/hover: Underline or slight background</li>
|
||
<li class="">Mobile: Hamburger menu with slide-out drawer</li>
|
||
</ul>
|
||
<p><strong>Breadcrumbs:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">Registry > owner > tool-name > v1.2.0</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Separator: <code>></code> or <code>/</code></li>
|
||
<li class="">Current page: bold, not linked</li>
|
||
<li class="">Previous pages: linked, secondary color</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="form-elements">Form Elements<a href="#form-elements" class="hash-link" aria-label="Direct link to Form Elements" title="Direct link to Form Elements" translate="no"></a></h3>
|
||
<p><strong>Text Input:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">input</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">text</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">input</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">placeholder</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Search tools...</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Border: 1px solid border color</li>
|
||
<li class="">Border-radius: 8px</li>
|
||
<li class="">Padding: 12px 16px</li>
|
||
<li class="">Focus: Primary indigo border, subtle shadow</li>
|
||
<li class="">Height: 44px (touch target compliance)</li>
|
||
</ul>
|
||
<p><strong>Search Input with Icon:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ 🔍 Search tools... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Icon: Left-aligned, muted color</li>
|
||
<li class="">Placeholder: Secondary text color</li>
|
||
</ul>
|
||
<p><strong>Select/Dropdown:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Category ▼ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Same styling as text input</li>
|
||
<li class="">Chevron icon on right</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="badges-and-tags">Badges and Tags<a href="#badges-and-tags" class="hash-link" aria-label="Direct link to Badges and Tags" title="Direct link to Badges and Tags" translate="no"></a></h3>
|
||
<p><strong>Category Badge:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">badge badge-category</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">text-processing</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Cyan (#06B6D4)</li>
|
||
<li class="">Text: White, 12px</li>
|
||
<li class="">Padding: 4px 8px</li>
|
||
<li class="">Border-radius: 4px</li>
|
||
</ul>
|
||
<p><strong>Tag:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">tag</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">ai</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light gray (#F3F4F6)</li>
|
||
<li class="">Text: Secondary gray, 12px</li>
|
||
<li class="">Border: 1px solid border color</li>
|
||
<li class="">Border-radius: 9999px (pill)</li>
|
||
<li class="">Clickable (links to search)</li>
|
||
</ul>
|
||
<p><strong>Status Badge:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">badge badge-success</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Published</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">badge badge-warning</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Pending</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">badge badge-error</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">Yanked</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">span</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Success: Green background</li>
|
||
<li class="">Warning: Amber background</li>
|
||
<li class="">Error: Red background</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="code-blocks">Code Blocks<a href="#code-blocks" class="hash-link" aria-label="Direct link to Code Blocks" title="Direct link to Code Blocks" translate="no"></a></h3>
|
||
<p><strong>Inline Code:</strong></p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">code</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">cmdforge run foo</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">code</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light gray (#F3F4F6)</li>
|
||
<li class="">Font: Monospace</li>
|
||
<li class="">Padding: 2px 6px</li>
|
||
<li class="">Border-radius: 4px</li>
|
||
</ul>
|
||
<p><strong>Code Block with Copy:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ```python [📋] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ def hello(): │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ print("Hello, World!") │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ``` │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Dark (#1F2937) or light (#F9FAFB)</li>
|
||
<li class="">Syntax highlighting (Prism.js or Highlight.js)</li>
|
||
<li class="">Copy button: top-right, appears on hover</li>
|
||
<li class="">Line numbers: optional, enabled for tutorials</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="callout-boxes">Callout Boxes<a href="#callout-boxes" class="hash-link" aria-label="Direct link to Callout Boxes" title="Direct link to Callout Boxes" translate="no"></a></h3>
|
||
<p><strong>Info Callout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ℹ️ Note │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ This is helpful information for the user. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light blue (#DBEAFE)</li>
|
||
<li class="">Border-left: 4px solid blue (#3B82F6)</li>
|
||
</ul>
|
||
<p><strong>Warning Callout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ⚠️ Warning │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Be careful with this configuration. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light amber (#FEF3C7)</li>
|
||
<li class="">Border-left: 4px solid amber (#F59E0B)</li>
|
||
</ul>
|
||
<p><strong>Error Callout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ❌ Important │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ This action cannot be undone. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light red (#FEE2E2)</li>
|
||
<li class="">Border-left: 4px solid red (#EF4444)</li>
|
||
</ul>
|
||
<p><strong>Tip Callout:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ 💡 Tip │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ You can also use this shortcut... │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Background: Light green (#D1FAE5)</li>
|
||
<li class="">Border-left: 4px solid green (#10B981)</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="loading-states">Loading States<a href="#loading-states" class="hash-link" aria-label="Direct link to Loading States" title="Direct link to Loading States" translate="no"></a></h3>
|
||
<p><strong>Skeleton Loader:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌───────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ████████████████ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ████████████████████████████████ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ████████████ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└───────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<ul>
|
||
<li class="">Animated shimmer effect</li>
|
||
<li class="">Matches component dimensions</li>
|
||
<li class="">Used for cards, text blocks</li>
|
||
</ul>
|
||
<p><strong>Spinner:</strong></p>
|
||
<ul>
|
||
<li class="">Circular spinner for buttons, inline loading</li>
|
||
<li class="">Primary indigo color</li>
|
||
<li class="">Size: 16px (small), 24px (medium), 32px (large)</li>
|
||
</ul>
|
||
<p><strong>Progress Bar:</strong></p>
|
||
<ul>
|
||
<li class="">Used for multi-step operations</li>
|
||
<li class="">Shows percentage or step count</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="responsive-design">Responsive Design<a href="#responsive-design" class="hash-link" aria-label="Direct link to Responsive Design" title="Direct link to Responsive Design" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="breakpoints">Breakpoints<a href="#breakpoints" class="hash-link" aria-label="Direct link to Breakpoints" title="Direct link to Breakpoints" translate="no"></a></h3>
|
||
<table><thead><tr><th>Breakpoint</th><th>Width</th><th>Name</th><th>Grid Columns</th></tr></thead><tbody><tr><td>xs</td><td>< 480px</td><td>Extra small phones</td><td>1</td></tr><tr><td>sm</td><td>480-639px</td><td>Phones</td><td>1</td></tr><tr><td>md</td><td>640-767px</td><td>Large phones / small tablets</td><td>2</td></tr><tr><td>lg</td><td>768-1023px</td><td>Tablets</td><td>2-3</td></tr><tr><td>xl</td><td>1024-1279px</td><td>Small desktops</td><td>3-4</td></tr><tr><td>2xl</td><td>≥ 1280px</td><td>Large desktops</td><td>4</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="layout-adaptations">Layout Adaptations<a href="#layout-adaptations" class="hash-link" aria-label="Direct link to Layout Adaptations" title="Direct link to Layout Adaptations" translate="no"></a></h3>
|
||
<p><strong>Mobile (< 640px):</strong></p>
|
||
<ul>
|
||
<li class="">Single-column layout</li>
|
||
<li class="">Navigation: hamburger menu with slide-out drawer</li>
|
||
<li class="">Hero: stacked content, centered</li>
|
||
<li class="">Tool cards: full-width, stacked</li>
|
||
<li class="">TOC: collapsible accordion at top of page</li>
|
||
<li class="">Sidebar ads: hidden</li>
|
||
<li class="">Footer ads: optional, minimal</li>
|
||
</ul>
|
||
<p><strong>Tablet (640-1023px):</strong></p>
|
||
<ul>
|
||
<li class="">Two-column grid for cards</li>
|
||
<li class="">Navigation: horizontal but condensed</li>
|
||
<li class="">TOC: collapsible sidebar</li>
|
||
<li class="">Sidebar ads: may show below content</li>
|
||
</ul>
|
||
<p><strong>Desktop (≥ 1024px):</strong></p>
|
||
<ul>
|
||
<li class="">Full multi-column layout</li>
|
||
<li class="">Navigation: full horizontal with all links visible</li>
|
||
<li class="">TOC: fixed left sidebar</li>
|
||
<li class="">Sidebar ads: visible in right column</li>
|
||
<li class="">Maximum content width: 1280px with centered container</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="touch-targets">Touch Targets<a href="#touch-targets" class="hash-link" aria-label="Direct link to Touch Targets" title="Direct link to Touch Targets" translate="no"></a></h3>
|
||
<p>All interactive elements must meet minimum touch target size:</p>
|
||
<ul>
|
||
<li class="">Minimum size: 44×44px (WCAG 2.1 AA)</li>
|
||
<li class="">Spacing between targets: minimum 8px</li>
|
||
<li class="">Applies to: buttons, links, form inputs, navigation items</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="mobile-specific-considerations">Mobile-Specific Considerations<a href="#mobile-specific-considerations" class="hash-link" aria-label="Direct link to Mobile-Specific Considerations" title="Direct link to Mobile-Specific Considerations" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">No horizontal scrolling</li>
|
||
<li class="">Images: responsive with max-width: 100%</li>
|
||
<li class="">Tables: horizontal scroll wrapper on small screens</li>
|
||
<li class="">Code blocks: horizontal scroll with visible scrollbar</li>
|
||
<li class="">Modals: full-screen on mobile, centered on desktop</li>
|
||
<li class="">Keyboard: virtual keyboard should not obscure inputs</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="performance-budgets">Performance Budgets<a href="#performance-budgets" class="hash-link" aria-label="Direct link to Performance Budgets" title="Direct link to Performance Budgets" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="core-web-vitals-targets">Core Web Vitals Targets<a href="#core-web-vitals-targets" class="hash-link" aria-label="Direct link to Core Web Vitals Targets" title="Direct link to Core Web Vitals Targets" translate="no"></a></h3>
|
||
<table><thead><tr><th>Metric</th><th>Target</th><th>Maximum</th></tr></thead><tbody><tr><td>Largest Contentful Paint (LCP)</td><td>< 1.5s</td><td>< 2.5s</td></tr><tr><td>First Input Delay (FID)</td><td>< 50ms</td><td>< 100ms</td></tr><tr><td>Cumulative Layout Shift (CLS)</td><td>< 0.05</td><td>< 0.1</td></tr><tr><td>First Contentful Paint (FCP)</td><td>< 1.0s</td><td>< 1.8s</td></tr><tr><td>Time to Interactive (TTI)</td><td>< 2.5s</td><td>< 3.5s</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="resource-budgets">Resource Budgets<a href="#resource-budgets" class="hash-link" aria-label="Direct link to Resource Budgets" title="Direct link to Resource Budgets" translate="no"></a></h3>
|
||
<table><thead><tr><th>Resource</th><th>Budget</th><th>Notes</th></tr></thead><tbody><tr><td>Total page weight</td><td>< 500KB</td><td>Excluding ads</td></tr><tr><td>JavaScript (compressed)</td><td>< 100KB</td><td>Main bundle</td></tr><tr><td>CSS (compressed)</td><td>< 50KB</td><td>Main stylesheet</td></tr><tr><td>Images (above fold)</td><td>< 200KB</td><td>Hero, featured tools</td></tr><tr><td>Fonts</td><td>< 100KB</td><td>Subset, WOFF2 format</td></tr><tr><td>Third-party scripts</td><td>< 150KB</td><td>Analytics, ads (lazy)</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="loading-strategy">Loading Strategy<a href="#loading-strategy" class="hash-link" aria-label="Direct link to Loading Strategy" title="Direct link to Loading Strategy" translate="no"></a></h3>
|
||
<p><strong>Critical Path (synchronous):</strong></p>
|
||
<ol>
|
||
<li class="">HTML document</li>
|
||
<li class="">Critical CSS (inlined in <code><head></code>)</li>
|
||
<li class="">Above-the-fold content</li>
|
||
</ol>
|
||
<p><strong>Deferred Loading:</strong></p>
|
||
<ol>
|
||
<li class="">Non-critical CSS (preload, async)</li>
|
||
<li class="">JavaScript (defer)</li>
|
||
<li class="">Below-fold images (lazy-load with <code>loading="lazy"</code>)</li>
|
||
<li class="">Third-party scripts (ads, analytics)</li>
|
||
<li class="">Video embeds (lazy, placeholder until visible)</li>
|
||
</ol>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="caching-strategy">Caching Strategy<a href="#caching-strategy" class="hash-link" aria-label="Direct link to Caching Strategy" title="Direct link to Caching Strategy" translate="no"></a></h3>
|
||
<table><thead><tr><th>Resource</th><th>Cache-Control</th><th>Notes</th></tr></thead><tbody><tr><td>Static assets (CSS, JS)</td><td><code>max-age=31536000, immutable</code></td><td>Hashed filenames</td></tr><tr><td>Images</td><td><code>max-age=86400</code></td><td>1 day</td></tr><tr><td>HTML pages</td><td><code>max-age=300, stale-while-revalidate=60</code></td><td>5 min, background refresh</td></tr><tr><td>API responses</td><td><code>max-age=60</code></td><td>1 min for tool lists</td></tr><tr><td>Tool downloads</td><td><code>max-age=3600, immutable</code></td><td>Immutable versions</td></tr></tbody></table>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="performance-monitoring">Performance Monitoring<a href="#performance-monitoring" class="hash-link" aria-label="Direct link to Performance Monitoring" title="Direct link to Performance Monitoring" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">Monitor Core Web Vitals in production</li>
|
||
<li class="">Set up alerts for degradation (<code>>10%</code> threshold)</li>
|
||
<li class="">Track page load times by route</li>
|
||
<li class="">Monitor JavaScript error rates</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="error-states-and-fallbacks">Error States and Fallbacks<a href="#error-states-and-fallbacks" class="hash-link" aria-label="Direct link to Error States and Fallbacks" title="Direct link to Error States and Fallbacks" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="network-errors">Network Errors<a href="#network-errors" class="hash-link" aria-label="Direct link to Network Errors" title="Direct link to Network Errors" translate="no"></a></h3>
|
||
<p><strong>API Unavailable:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ ⚠️ Registry Temporarily Unavailable │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ We're having trouble connecting to the registry. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Please try again in a few moments. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Retry] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<p><strong>Slow Connection:</strong></p>
|
||
<ul>
|
||
<li class="">Show skeleton loaders for content</li>
|
||
<li class="">Progressive loading with visible feedback</li>
|
||
<li class="">Timeout after 10 seconds with retry option</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="tool-not-found-404">Tool Not Found (404):<a href="#tool-not-found-404" class="hash-link" aria-label="Direct link to Tool Not Found (404):" title="Direct link to Tool Not Found (404):" translate="no"></a></h3>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Tool Not Found │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ The tool "owner/tool-name" doesn't exist or may │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ have been removed. │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Browse Tools] [Search Registry] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="search-no-results">Search No Results:<a href="#search-no-results" class="hash-link" aria-label="Direct link to Search No Results:" title="Direct link to Search No Results:" translate="no"></a></h3>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">┌─────────────────────────────────────────────────────┐</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ No tools found for "query" │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ Suggestions: │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ • Try different keywords │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ • Check spelling │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ • Browse by category │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">│ [Browse All Tools] │</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">└─────────────────────────────────────────────────────┘</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="offline-mode">Offline Mode<a href="#offline-mode" class="hash-link" aria-label="Direct link to Offline Mode" title="Direct link to Offline Mode" translate="no"></a></h3>
|
||
<p>If service worker is implemented:</p>
|
||
<ul>
|
||
<li class="">Show cached pages when offline</li>
|
||
<li class="">Indicate offline status in header</li>
|
||
<li class="">Queue actions (report, install) for when online</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="form-errors">Form Errors<a href="#form-errors" class="hash-link" aria-label="Direct link to Form Errors" title="Direct link to Form Errors" translate="no"></a></h3>
|
||
<p><strong>Inline Validation:</strong></p>
|
||
<ul>
|
||
<li class="">Show error message below field</li>
|
||
<li class="">Red border on invalid fields</li>
|
||
<li class="">Error icon in field</li>
|
||
</ul>
|
||
<p><strong>Form Submission Error:</strong></p>
|
||
<ul>
|
||
<li class="">Toast notification for transient errors</li>
|
||
<li class="">Inline error summary for validation failures</li>
|
||
<li class="">Preserve form state on error</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="ad-and-revenue-strategy">Ad and Revenue Strategy<a href="#ad-and-revenue-strategy" class="hash-link" aria-label="Direct link to Ad and Revenue Strategy" title="Direct link to Ad and Revenue Strategy" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Ad placement</strong>: One sidebar unit on long-form docs/tut pages, optional footer banner on landing, none on registry pages.</li>
|
||
<li class=""><strong>No ads</strong> in install flows, login/registration, or tool browsing details.</li>
|
||
<li class=""><strong>Sponsored content</strong>: Clearly labeled and separated from organic rankings.</li>
|
||
<li class=""><strong>YouTube</strong>: Embed tutorials with transcripts; also drive to channel.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="monetization-extensions-optional">Monetization Extensions (Optional)<a href="#monetization-extensions-optional" class="hash-link" aria-label="Direct link to Monetization Extensions (Optional)" title="Direct link to Monetization Extensions (Optional)" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Donations</strong>: Single page with clear use-of-funds.</li>
|
||
<li class=""><strong>Featured projects</strong>: Curated or sponsored slots with explicit labeling.</li>
|
||
<li class=""><strong>Premium publisher tier</strong>: More tools, enhanced analytics, priority review.</li>
|
||
<li class=""><strong>Training/consulting</strong>: Workshops or enterprise onboarding.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="data-and-governance">Data and Governance<a href="#data-and-governance" class="hash-link" aria-label="Direct link to Data and Governance" title="Direct link to Data and Governance" translate="no"></a></h2>
|
||
<p>Proposed minimal tables (web-only):</p>
|
||
<ul>
|
||
<li class=""><code>promotions</code> (featured tools/projects, start/end, placement, audit).</li>
|
||
<li class=""><code>featured_projects</code> (title, description, owner, url, status).</li>
|
||
<li class=""><code>content_pages</code> (docs/tutorials metadata for listing).</li>
|
||
<li class=""><code>announcements</code> (title, body, published_at).</li>
|
||
</ul>
|
||
<p>Roles and permissions:</p>
|
||
<ul>
|
||
<li class=""><code>admin</code>: can publish announcements, manage promotions, moderate reports.</li>
|
||
<li class=""><code>editor</code>: can create/update docs, tutorials, featured projects.</li>
|
||
<li class=""><code>publisher</code>: can manage their own tools and profile only.</li>
|
||
<li class=""><code>contributor</code>: can partisipate in discussions in the forums.</li>
|
||
</ul>
|
||
<p>Audit fields (required on content tables):</p>
|
||
<ul>
|
||
<li class=""><code>created_by</code>, <code>updated_by</code>, <code>created_at</code>, <code>updated_at</code>.</li>
|
||
</ul>
|
||
<p>Ranking rules:</p>
|
||
<ul>
|
||
<li class="">Organic search uses relevance and downloads.</li>
|
||
<li class="">Sponsored placements appear in dedicated sections and do not alter organic order.</li>
|
||
</ul>
|
||
<p>Promotions placement rules:</p>
|
||
<ul>
|
||
<li class="">Slots are deterministic (e.g., positions 1 and 5 in lists).</li>
|
||
<li class="">Promotions are clearly labeled and never mixed into organic ranking.</li>
|
||
<li class=""><code>promotions</code> includes <code>placement</code>, <code>priority</code>, <code>start_at</code>, <code>end_at</code>, <code>status</code>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="privacy-and-consent">Privacy and Consent<a href="#privacy-and-consent" class="hash-link" aria-label="Direct link to Privacy and Consent" title="Direct link to Privacy and Consent" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Consent banner for analytics/ads.</li>
|
||
<li class="">Minimal tracking, anonymized IPs.</li>
|
||
<li class="">Clear privacy policy and retention policy.</li>
|
||
</ul>
|
||
<p>Consent storage:</p>
|
||
<ul>
|
||
<li class="">Store a <code>consents</code> record keyed by <code>client_id</code> (anonymous) or user id (logged-in).</li>
|
||
<li class="">Respect opt-outs by disabling analytics/ads on server-rendered pages.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="ux-and-accessibility">UX and Accessibility<a href="#ux-and-accessibility" class="hash-link" aria-label="Direct link to UX and Accessibility" title="Direct link to UX and Accessibility" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Keyboard navigation for all interactive elements.</li>
|
||
<li class="">High contrast and readable typography.</li>
|
||
<li class="">Mobile-first layout; ads hidden on mobile except optional footer.</li>
|
||
<li class="">Avoid popups and auto-play media.</li>
|
||
</ul>
|
||
<p>Responsive breakpoints (baseline):</p>
|
||
<ul>
|
||
<li class="">Mobile: <code><640px</code></li>
|
||
<li class="">Tablet: <code>640–1024px</code></li>
|
||
<li class="">Desktop: <code>>1024px</code></li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="tech-stack-phase-7-target">Tech Stack (Phase 7 Target)<a href="#tech-stack-phase-7-target" class="hash-link" aria-label="Direct link to Tech Stack (Phase 7 Target)" title="Direct link to Tech Stack (Phase 7 Target)" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Flask + Jinja + Tailwind</strong> for SEO-friendly server-rendered pages.</li>
|
||
<li class="">Optional <strong>htmx</strong> or <strong>Alpine.js</strong> for small interactivity.</li>
|
||
<li class="">Shared registry API for data.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="auth-and-session-model">Auth and Session Model<a href="#auth-and-session-model" class="hash-link" aria-label="Direct link to Auth and Session Model" title="Direct link to Auth and Session Model" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Server-side sessions (DB-backed) for dashboard views.</li>
|
||
<li class="">Cookies: <code>HttpOnly</code>, <code>SameSite=Lax</code>, <code>Secure</code> in production.</li>
|
||
<li class="">CSRF protection on all POST/PUT/DELETE web forms.</li>
|
||
<li class="">Session TTL: 7 days with rotation on login.</li>
|
||
<li class="">Logout invalidates session server-side.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="api-surfaces-for-web-ui">API Surfaces for Web UI<a href="#api-surfaces-for-web-ui" class="hash-link" aria-label="Direct link to API Surfaces for Web UI" title="Direct link to API Surfaces for Web UI" translate="no"></a></h2>
|
||
<p>Read-only UI calls should use the existing API:</p>
|
||
<ul>
|
||
<li class=""><code>/api/v1/tools</code>, <code>/api/v1/tools/search</code>, <code>/api/v1/categories</code>, <code>/api/v1/stats/popular</code>.</li>
|
||
</ul>
|
||
<p>Publisher dashboard uses auth endpoints:</p>
|
||
<ul>
|
||
<li class=""><code>/api/v1/login</code>, <code>/api/v1/tokens</code>, <code>/api/v1/me/tools</code>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="payments-and-donations-optional">Payments and Donations (Optional)<a href="#payments-and-donations-optional" class="hash-link" aria-label="Direct link to Payments and Donations (Optional)" title="Direct link to Payments and Donations (Optional)" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Decide early on a processor (Stripe, Ko-fi, paypal, bitcoin/crypto) to avoid churn.</li>
|
||
<li class="">Webhook handling must verify signatures and enforce idempotency keys.</li>
|
||
<li class="">Store donation/subscription state with <code>status</code>, <code>amount</code>, <code>currency</code>, <code>provider_id</code>, <code>created_at</code>.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="moderation-and-abuse-reporting">Moderation and Abuse Reporting<a href="#moderation-and-abuse-reporting" class="hash-link" aria-label="Direct link to Moderation and Abuse Reporting" title="Direct link to Moderation and Abuse Reporting" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Tool detail pages require a minimal abuse report endpoint.</li>
|
||
<li class="">Create <code>reports</code> table with <code>tool_id</code>, <code>reporter</code>, <code>reason</code>, <code>status</code>.</li>
|
||
<li class="">Add rate limit to the report endpoint to prevent spam.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="media-and-asset-handling">Media and Asset Handling<a href="#media-and-asset-handling" class="hash-link" aria-label="Direct link to Media and Asset Handling" title="Direct link to Media and Asset Handling" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Images/screenshots stored in object storage (preferred) or a dedicated <code>assets/</code> bucket.</li>
|
||
<li class="">Enforce size limits and content-type validation.</li>
|
||
<li class="">Generate thumbnails for cards and lazy-load in UI.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="caching-and-seo-serving">Caching and SEO Serving<a href="#caching-and-seo-serving" class="hash-link" aria-label="Direct link to Caching and SEO Serving" title="Direct link to Caching and SEO Serving" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Public pages include ETag/Last-Modified for CDN caching.</li>
|
||
<li class="">Dashboard pages are non-cacheable and user-specific.</li>
|
||
<li class="">Avoid cache poisoning by varying on auth cookies.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="seo-strategy">SEO Strategy<a href="#seo-strategy" class="hash-link" aria-label="Direct link to SEO Strategy" title="Direct link to SEO Strategy" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="technical-seo">Technical SEO<a href="#technical-seo" class="hash-link" aria-label="Direct link to Technical SEO" title="Direct link to Technical SEO" translate="no"></a></h3>
|
||
<p><strong>URL Structure:</strong></p>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">/ # Landing page</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/tools # Registry browse</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/tools/{owner}/{name} # Tool detail (canonical)</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/tools/{owner}/{name}/v/1.0 # Specific version</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/categories/{slug} # Category listing</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/docs/{section}/{page} # Documentation</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">/tutorials/{slug} # Tutorial pages</span><br></span></code></pre></div></div>
|
||
<p><strong>Meta Tags (per page type):</strong></p>
|
||
<p>Landing page:</p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">title</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">CmdForge - Build Custom AI Commands in YAML</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">title</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">description</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Create Unix-style pipeable tools that work with any AI provider. Provider-agnostic, composable, and community-driven.</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">keywords</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">ai cli tools, yaml automation, ai commands, cmdforge</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<p>Tool detail page:</p>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">title</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">{tool-name} by {owner} - CmdForge Registry</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">title</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">description</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">{tool description, max 160 chars}</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="structured-data-schemaorg">Structured Data (Schema.org)<a href="#structured-data-schemaorg" class="hash-link" aria-label="Direct link to Structured Data (Schema.org)" title="Direct link to Structured Data (Schema.org)" translate="no"></a></h3>
|
||
<p><strong>SoftwareApplication (for tools):</strong></p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@context"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://schema.org"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"SoftwareApplication"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"name"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"summarize"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"applicationCategory"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"DeveloperApplication"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"operatingSystem"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Linux, macOS, Windows"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"author"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Person"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"name"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"owner-name"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"downloadUrl"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://cmdforge.brrd.tech/tools/owner/summarize"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"softwareVersion"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"1.2.0"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"aggregateRating"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"AggregateRating"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"ratingValue"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"4.5"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"ratingCount"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"142"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
|
||
<p><strong>Organization (site-wide):</strong></p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@context"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://schema.org"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Organization"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"name"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"CmdForge"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"url"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://cmdforge.dev"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"logo"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://cmdforge.dev/logo.png"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"sameAs"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://github.com/your-org/cmdforge"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://twitter.com/cmdforge"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
|
||
<p><strong>Article (for tutorials/blog):</strong></p>
|
||
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@context"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://schema.org"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"TechArticle"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"headline"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Getting Started with CmdForge"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"author"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token property">"@type"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Person"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token property">"name"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"Author Name"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"datePublished"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"2025-01-15"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token property">"dateModified"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"2025-01-20"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="open-graph--social-sharing">Open Graph & Social Sharing<a href="#open-graph--social-sharing" class="hash-link" aria-label="Direct link to Open Graph & Social Sharing" title="Direct link to Open Graph & Social Sharing" translate="no"></a></h3>
|
||
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)"><!-- Open Graph --></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">property</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">og:title</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">CmdForge - AI CLI Tools</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">property</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">og:description</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Build custom AI commands...</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">property</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">og:image</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">https://cmdforge.dev/og-image.png</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">property</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">og:url</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">https://cmdforge.dev</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">property</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">og:type</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">website</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)"><!-- Twitter Card --></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">twitter:card</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">summary_large_image</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">twitter:site</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">@cmdforge</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">twitter:title</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">CmdForge</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">twitter:description</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">Build custom AI commands...</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">meta</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">name</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">twitter:image</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">content</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">https://cmdforge.dev/twitter-card.png</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="sitemap">Sitemap<a href="#sitemap" class="hash-link" aria-label="Direct link to Sitemap" title="Direct link to Sitemap" translate="no"></a></h3>
|
||
<p>Auto-generate <code>sitemap.xml</code>:</p>
|
||
<ul>
|
||
<li class="">All public pages</li>
|
||
<li class="">Tool detail pages (updated on publish)</li>
|
||
<li class="">Category pages</li>
|
||
<li class="">Documentation pages</li>
|
||
<li class="">Priority based on page importance</li>
|
||
</ul>
|
||
<div class="language-xml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-xml codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token prolog" style="color:rgb(189, 147, 249)"><?xml version="1.0" encoding="UTF-8"?></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">urlset</span><span class="token tag" style="color:rgb(255, 121, 198)"> </span><span class="token tag attr-name" style="color:rgb(241, 250, 140)">xmlns</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag attr-value" style="color:rgb(255, 121, 198)">http://www.sitemaps.org/schemas/sitemap/0.9</span><span class="token tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">url</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">loc</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">https://cmdforge.dev/</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">loc</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">priority</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">1.0</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">priority</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">changefreq</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">daily</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">changefreq</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">url</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">url</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">loc</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">https://cmdforge.dev/tools</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">loc</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">priority</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">0.9</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">priority</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token tag" style="color:rgb(255, 121, 198)">changefreq</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain">daily</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">changefreq</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">url</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)"><!-- Tool pages, docs, etc. --></span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token tag" style="color:rgb(255, 121, 198)">urlset</span><span class="token tag punctuation" style="color:rgb(248, 248, 242)">></span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="robotstxt">robots.txt<a href="#robotstxt" class="hash-link" aria-label="Direct link to robots.txt" title="Direct link to robots.txt" translate="no"></a></h3>
|
||
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">User-agent: *</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Allow: /</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Block auth pages from indexing</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Disallow: /login</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Disallow: /register</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Disallow: /dashboard</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Disallow: /api/</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Sitemap: https://cmdforge.dev/sitemap.xml</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="canonical-urls">Canonical URLs<a href="#canonical-urls" class="hash-link" aria-label="Direct link to Canonical URLs" title="Direct link to Canonical URLs" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">Each page has a single canonical URL</li>
|
||
<li class="">Use <code><link rel="canonical" href="..."></code> tag</li>
|
||
<li class="">Avoid duplicate content issues</li>
|
||
<li class="">Tool versions link to latest as canonical</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="performance-for-seo">Performance for SEO<a href="#performance-for-seo" class="hash-link" aria-label="Direct link to Performance for SEO" title="Direct link to Performance for SEO" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">Server-side rendering for all public pages (Flask + Jinja)</li>
|
||
<li class="">No JavaScript required for content visibility</li>
|
||
<li class="">Fast TTFB (< 200ms target)</li>
|
||
<li class="">Mobile-friendly (responsive design)</li>
|
||
<li class="">Core Web Vitals in "good" range</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="content-strategy">Content Strategy<a href="#content-strategy" class="hash-link" aria-label="Direct link to Content Strategy" title="Direct link to Content Strategy" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Core tutorials that mirror CLI workflows.</li>
|
||
<li class="">"Project spotlights" to showcase real usage.</li>
|
||
<li class="">Contributor recognition (monthly spotlight).</li>
|
||
<li class="">Announcements and changelog summaries.</li>
|
||
<li class="">Encourage AI parsing to increase adsense revenue.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="risks-and-mitigations">Risks and Mitigations<a href="#risks-and-mitigations" class="hash-link" aria-label="Direct link to Risks and Mitigations" title="Direct link to Risks and Mitigations" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Ad overload</strong>: strict placement rules, no ads in registry.</li>
|
||
<li class=""><strong>Moderation burden and load</strong>: Implement AI enabled moderation with flags to alert human intervention to keep things moving and simplefy maintenence.</li>
|
||
<li class=""><strong>Content drift</strong>: quarterly doc reviews tied to releases.</li>
|
||
<li class=""><strong>Consent and tracking</strong>: default to privacy-preserving settings.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="phase-7-implementation-checklist">Phase 7 Implementation Checklist<a href="#phase-7-implementation-checklist" class="hash-link" aria-label="Direct link to Phase 7 Implementation Checklist" title="Direct link to Phase 7 Implementation Checklist" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="71-foundation--setup">7.1 Foundation & Setup<a href="#71-foundation--setup" class="hash-link" aria-label="Direct link to 7.1 Foundation & Setup" title="Direct link to 7.1 Foundation & Setup" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Set up Flask project structure with blueprints</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Configure Jinja2 templates with base layout</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Integrate Tailwind CSS (build pipeline)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Set up static asset handling (CSS, JS, images)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Configure development/production environments</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Set up database models for web-specific tables</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="72-core-templates--components">7.2 Core Templates & Components<a href="#72-core-templates--components" class="hash-link" aria-label="Direct link to 7.2 Core Templates & Components" title="Direct link to 7.2 Core Templates & Components" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Create base template with header/footer</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Implement navigation component (desktop + mobile)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Build reusable card components (tool, tutorial, contributor)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Create form components (inputs, buttons, dropdowns)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Implement callout/alert components</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Build code block component with copy functionality</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Create loading states (skeleton, spinner)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Implement responsive grid system</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="73-landing-page">7.3 Landing Page<a href="#73-landing-page" class="hash-link" aria-label="Direct link to 7.3 Landing Page" title="Direct link to 7.3 Landing Page" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Hero section with install snippet</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Three pillars section (Easy, Powerful, Community)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Featured tools grid (API integration)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Getting started tutorial cards</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Featured contributor spotlight</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Footer with links and optional ad zone</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="74-registry-pages-ad-free">7.4 Registry Pages (Ad-Free)<a href="#74-registry-pages-ad-free" class="hash-link" aria-label="Direct link to 7.4 Registry Pages (Ad-Free)" title="Direct link to 7.4 Registry Pages (Ad-Free)" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Tool browse page with search bar</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Category dropdown filter</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Sort options (popular, recent, name)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Pagination component</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Tool card grid layout</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Tool detail page with README rendering</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Version selector in sidebar</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Install command with copy</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Report abuse button/modal</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Category pages</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="75-documentation--tutorials">7.5 Documentation & Tutorials<a href="#75-documentation--tutorials" class="hash-link" aria-label="Direct link to 7.5 Documentation & Tutorials" title="Direct link to 7.5 Documentation & Tutorials" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Docs landing page with section links</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Tutorial listing page</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Content page template with TOC</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Scroll-spy for TOC highlighting</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Code syntax highlighting (Prism/Highlight.js)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Video embed component (YouTube)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Related articles section</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Sidebar ad placement (desktop only)</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="76-authentication--dashboard">7.6 Authentication & Dashboard<a href="#76-authentication--dashboard" class="hash-link" aria-label="Direct link to 7.6 Authentication & Dashboard" title="Direct link to 7.6 Authentication & Dashboard" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Registration page and flow</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Login page with error handling</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Password reset flow (if implementing)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Session management (cookies, CSRF)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Dashboard layout with sidebar</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->My Tools tab with tool list</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Connections tab with app pairing flow</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Settings tab with profile edit</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Logout functionality</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="77-privacy--consent">7.7 Privacy & Consent<a href="#77-privacy--consent" class="hash-link" aria-label="Direct link to 7.7 Privacy & Consent" title="Direct link to 7.7 Privacy & Consent" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Cookie consent banner</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Consent preferences modal</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Consent state storage</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Privacy policy page</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Terms of service page</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Honor consent in analytics/ad loading</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="78-ads--monetization">7.8 Ads & Monetization<a href="#78-ads--monetization" class="hash-link" aria-label="Direct link to 7.8 Ads & Monetization" title="Direct link to 7.8 Ads & Monetization" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->AdSense integration (account setup)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Ad container components</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Lazy loading for ad scripts</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Ad placement rules enforcement</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Sponsored content styling (if applicable)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Donate page with donation options</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="79-seo--performance">7.9 SEO & Performance<a href="#79-seo--performance" class="hash-link" aria-label="Direct link to 7.9 SEO & Performance" title="Direct link to 7.9 SEO & Performance" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Meta tags for all page types</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Open Graph tags</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Schema.org structured data</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Sitemap generation</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->robots.txt configuration</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Canonical URL implementation</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Image optimization pipeline</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->CSS/JS minification</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Critical CSS inlining</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Lazy loading for images</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="710-testing--qa">7.10 Testing & QA<a href="#710-testing--qa" class="hash-link" aria-label="Direct link to 7.10 Testing & QA" title="Direct link to 7.10 Testing & QA" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Responsive design testing (all breakpoints)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Accessibility testing (WCAG 2.1 AA)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Cross-browser testing (Chrome, Firefox, Safari, Edge)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Performance testing (Lighthouse scores)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Form validation testing</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Error state testing</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Mobile usability testing</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="711-launch-preparation">7.11 Launch Preparation<a href="#711-launch-preparation" class="hash-link" aria-label="Direct link to 7.11 Launch Preparation" title="Direct link to 7.11 Launch Preparation" translate="no"></a></h3>
|
||
<ul class="contains-task-list containsTaskList_mC6p">
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Content creation (initial docs, tutorials)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Seed featured tools selection</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Initial contributor spotlight</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Analytics setup (privacy-respecting)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Error monitoring (Sentry or similar)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->SSL certificate configuration</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->CDN setup (optional)</li>
|
||
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->Backup and recovery procedures</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="api-endpoints-for-web-ui">API Endpoints for Web UI<a href="#api-endpoints-for-web-ui" class="hash-link" aria-label="Direct link to API Endpoints for Web UI" title="Direct link to API Endpoints for Web UI" translate="no"></a></h2>
|
||
<p>The web UI consumes these existing API endpoints:</p>
|
||
<p><strong>Public (read-only):</strong></p>
|
||
<ul>
|
||
<li class=""><code>GET /api/v1/tools</code> - List tools with pagination/filters</li>
|
||
<li class=""><code>GET /api/v1/tools/search?q=...</code> - Search tools</li>
|
||
<li class=""><code>GET /api/v1/tools/{owner}/{name}</code> - Tool details</li>
|
||
<li class=""><code>GET /api/v1/tools/{owner}/{name}/versions</code> - Version list</li>
|
||
<li class=""><code>GET /api/v1/categories</code> - Category list</li>
|
||
<li class=""><code>GET /api/v1/stats/popular</code> - Popular tools</li>
|
||
</ul>
|
||
<p><strong>Authenticated (dashboard):</strong></p>
|
||
<ul>
|
||
<li class=""><code>POST /api/v1/login</code> - User login (returns session)</li>
|
||
<li class=""><code>POST /api/v1/register</code> - User registration</li>
|
||
<li class=""><code>GET /api/v1/me/tools</code> - User's published tools</li>
|
||
<li class=""><code>GET /api/v1/pairing/connected-apps</code> - List connected apps</li>
|
||
<li class=""><code>POST /api/v1/pairing/initiate</code> - Start app pairing flow</li>
|
||
<li class=""><code>GET /api/v1/pairing/status</code> - Get pending pairing requests</li>
|
||
<li class=""><code>POST /api/v1/pairing/claim/{pairing_id}</code> - Approve a pending connection</li>
|
||
<li class=""><code>DELETE /api/v1/tokens/{id}</code> - Disconnect/revoke an app</li>
|
||
<li class=""><code>PUT /api/v1/me/settings</code> - Update profile</li>
|
||
</ul>
|
||
<p><strong>New endpoints for web UI:</strong></p>
|
||
<ul>
|
||
<li class=""><code>GET /api/v1/featured/tools</code> - Curated featured tools</li>
|
||
<li class=""><code>GET /api/v1/featured/contributors</code> - Featured contributor</li>
|
||
<li class=""><code>GET /api/v1/content/announcements</code> - Site announcements</li>
|
||
<li class=""><code>POST /api/v1/reports</code> - Abuse report submission</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="diagram-references">Diagram References<a href="#diagram-references" class="hash-link" aria-label="Direct link to Diagram References" title="Direct link to Diagram References" translate="no"></a></h2>
|
||
<ul>
|
||
<li class="">Landing page mockup: <code>discussions/diagrams/cmdforge-registry_rob_6.svg</code></li>
|
||
<li class="">System overview: <code>discussions/diagrams/cmdforge-registry_rob_1.puml</code></li>
|
||
<li class="">Data flows: <code>discussions/diagrams/cmdforge-registry_rob_5.puml</code></li>
|
||
<li class="">Web UI strategy: <code>discussions/diagrams/cmdforge-web-ui-strategy.puml</code></li>
|
||
<li class="">UI visual strategy: <code>discussions/diagrams/cmdforge-web-ui-visual-strategy.puml</code></li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="deployment-guide">Deployment Guide<a href="#deployment-guide" class="hash-link" aria-label="Direct link to Deployment Guide" title="Direct link to Deployment Guide" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="requirements">Requirements<a href="#requirements" class="hash-link" aria-label="Direct link to Requirements" title="Direct link to Requirements" translate="no"></a></h3>
|
||
<ul>
|
||
<li class="">Python 3.11+</li>
|
||
<li class="">pip/virtualenv</li>
|
||
<li class="">SQLite 3 (included with Python)</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="quick-start-development">Quick Start (Development)<a href="#quick-start-development" class="hash-link" aria-label="Direct link to Quick Start (Development)" title="Direct link to Quick Start (Development)" translate="no"></a></h3>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Clone the repository</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">git clone https://gitea.brrd.tech/rob/CmdForge.git</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">cd CmdForge</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Create virtual environment</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">python3 -m venv venv</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">source venv/bin/activate</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Install with registry extras</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">pip install -e ".[registry]"</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Run the web server</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">python -m cmdforge.web.app</span><br></span></code></pre></div></div>
|
||
<p>The server will start on <code>http://localhost:5000</code>.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="production-deployment">Production Deployment<a href="#production-deployment" class="hash-link" aria-label="Direct link to Production Deployment" title="Direct link to Production Deployment" translate="no"></a></h3>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-environment-variables">1. Environment Variables<a href="#1-environment-variables" class="hash-link" aria-label="Direct link to 1. Environment Variables" title="Direct link to 1. Environment Variables" translate="no"></a></h4>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Required</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">export CMDFORGE_REGISTRY_DB=/path/to/registry.db</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">export PORT=5050</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Optional</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">export CMDFORGE_ENV=production # Enables secure cookies</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">export CMDFORGE_SHOW_ADS=true # Enable ad placeholders</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-database-location">2. Database Location<a href="#2-database-location" class="hash-link" aria-label="Direct link to 2. Database Location" title="Direct link to 2. Database Location" translate="no"></a></h4>
|
||
<p>By default, the registry uses <code>~/.cmdforge/registry.db</code>. For production:</p>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Create dedicated directory</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">mkdir -p /var/lib/cmdforge</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">export CMDFORGE_REGISTRY_DB=/var/lib/cmdforge/registry.db</span><br></span></code></pre></div></div>
|
||
<p><strong>Note</strong>: If using a merged filesystem (e.g., mergerfs), store the database on a single disk or in <code>/tmp</code> to avoid SQLite WAL mode issues:</p>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">export CMDFORGE_REGISTRY_DB=/tmp/cmdforge-registry/registry.db</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-running-with-systemd">3. Running with systemd<a href="#3-running-with-systemd" class="hash-link" aria-label="Direct link to 3. Running with systemd" title="Direct link to 3. Running with systemd" translate="no"></a></h4>
|
||
<p>Create <code>/etc/systemd/system/cmdforge-registry.service</code>:</p>
|
||
<div class="language-ini codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ini codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">[Unit]</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Description=CmdForge Registry Web Server</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">After=network.target</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">[Service]</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Type=simple</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">User=cmdforge</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">WorkingDirectory=/opt/cmdforge</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Environment=CMDFORGE_REGISTRY_DB=/var/lib/cmdforge/registry.db</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Environment=PORT=5050</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Environment=CMDFORGE_ENV=production</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">ExecStart=/opt/cmdforge/venv/bin/python -m cmdforge.web.app</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">Restart=always</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">RestartSec=5</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">[Install]</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">WantedBy=multi-user.target</span><br></span></code></pre></div></div>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">sudo systemctl daemon-reload</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">sudo systemctl enable cmdforge-registry</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">sudo systemctl start cmdforge-registry</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="4-reverse-proxy-nginx">4. Reverse Proxy (nginx)<a href="#4-reverse-proxy-nginx" class="hash-link" aria-label="Direct link to 4. Reverse Proxy (nginx)" title="Direct link to 4. Reverse Proxy (nginx)" translate="no"></a></h4>
|
||
<div class="language-nginx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-nginx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">server {</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> listen 80;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> server_name cmdforge.brrd.tech;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> location / {</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> proxy_pass http://127.0.0.1:5050;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> proxy_set_header Host $host;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> proxy_set_header X-Real-IP $remote_addr;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> proxy_set_header X-Forwarded-Proto $scheme;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> }</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> location /static {</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> alias /opt/cmdforge/src/cmdforge/web/static;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> expires 1y;</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> add_header Cache-Control "public, immutable";</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> }</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">}</span><br></span></code></pre></div></div>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="5-ssl-with-certbot">5. SSL with Certbot<a href="#5-ssl-with-certbot" class="hash-link" aria-label="Direct link to 5. SSL with Certbot" title="Direct link to 5. SSL with Certbot" translate="no"></a></h4>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">sudo certbot --nginx -d cmdforge.brrd.tech</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="tailwind-css-build">Tailwind CSS Build<a href="#tailwind-css-build" class="hash-link" aria-label="Direct link to Tailwind CSS Build" title="Direct link to Tailwind CSS Build" translate="no"></a></h3>
|
||
<p>The CSS is pre-built and committed. To rebuild after changes:</p>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Install dependencies</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">npm install</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Build for production</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">npx tailwindcss -i src/cmdforge/web/static/css/input.css \</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> -o src/cmdforge/web/static/css/main.css \</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> --minify</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="health-check">Health Check<a href="#health-check" class="hash-link" aria-label="Direct link to Health Check" title="Direct link to Health Check" translate="no"></a></h3>
|
||
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">curl http://localhost:5050/api/v1/tools</span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"># Returns: {"data":[],"meta":{"page":1,"per_page":20,"total":0,"total_pages":1}}</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no"></a></h3>
|
||
<table><thead><tr><th>Issue</th><th>Solution</th></tr></thead><tbody><tr><td><code>disk I/O error</code></td><td>Move database to non-merged filesystem</td></tr><tr><td>Port already in use</td><td>Change PORT environment variable</td></tr><tr><td>500 errors</td><td>Check <code>/tmp/cmdforge.log</code> for stack traces</td></tr><tr><td>Static files not loading</td><td>Verify static folder path in deployment</td></tr></tbody></table>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="future-considerations-phase-8">Future Considerations (Phase 8+)<a href="#future-considerations-phase-8" class="hash-link" aria-label="Direct link to Future Considerations (Phase 8+)" title="Direct link to Future Considerations (Phase 8+)" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><strong>Forum integration</strong>: External (Discourse) or built-in discussions</li>
|
||
<li class=""><strong>Newsletter signup</strong>: Email collection with double opt-in</li>
|
||
<li class=""><strong>A/B testing</strong>: Hero messaging, CTA variations</li>
|
||
<li class=""><strong>Analytics dashboard</strong>: Traffic insights for publishers</li>
|
||
<li class=""><strong>Premium features</strong>: Private registries, enhanced analytics</li>
|
||
<li class=""><strong>Internationalization</strong>: Multi-language support</li>
|
||
<li class=""><strong>Dark mode</strong>: Theme toggle with persistence</li>
|
||
<li class=""><strong>PWA features</strong>: Offline support, install prompt</li>
|
||
</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/rob/CmdForge/reference/design/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Design Philosophy</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/rob/CmdForge/todos/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">CmdForge TODOs</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#purpose" class="table-of-contents__link toc-highlight">Purpose</a></li><li><a href="#mission-alignment" class="table-of-contents__link toc-highlight">Mission Alignment</a></li><li><a href="#guiding-principles" class="table-of-contents__link toc-highlight">Guiding Principles</a></li><li><a href="#information-architecture" class="table-of-contents__link toc-highlight">Information Architecture</a></li><li><a href="#visual-design-system" class="table-of-contents__link toc-highlight">Visual Design System</a><ul><li><a href="#color-palette" class="table-of-contents__link toc-highlight">Color Palette</a></li><li><a href="#typography" class="table-of-contents__link toc-highlight">Typography</a></li><li><a href="#spacing-system" class="table-of-contents__link toc-highlight">Spacing System</a></li><li><a href="#border-radius" class="table-of-contents__link toc-highlight">Border Radius</a></li><li><a href="#shadow-system" class="table-of-contents__link toc-highlight">Shadow System</a></li></ul></li><li><a href="#page-requirements" class="table-of-contents__link toc-highlight">Page Requirements</a><ul><li><a href="#landing-page-" class="table-of-contents__link toc-highlight">Landing Page (<code>/</code>)</a></li><li><a href="#docstutorials-pages-docs-tutorials" class="table-of-contents__link toc-highlight">Docs/Tutorials Pages (<code>/docs/*</code>, <code>/tutorials/*</code>)</a></li><li><a href="#tool-detail-page-toolsownername" class="table-of-contents__link toc-highlight">Tool Detail Page (<code>/tools/{owner}/{name}</code>)</a></li><li><a href="#registry-browse-page-tools" class="table-of-contents__link toc-highlight">Registry Browse Page (<code>/tools</code>)</a></li><li><a href="#publisher-dashboard-dashboard" class="table-of-contents__link toc-highlight">Publisher Dashboard (<code>/dashboard</code>)</a></li><li><a href="#donate-page-donate" class="table-of-contents__link toc-highlight">Donate Page (<code>/donate</code>)</a></li></ul></li><li><a href="#component-library" class="table-of-contents__link toc-highlight">Component Library</a><ul><li><a href="#buttons" class="table-of-contents__link toc-highlight">Buttons</a></li><li><a href="#cards" class="table-of-contents__link toc-highlight">Cards</a></li><li><a href="#navigation" class="table-of-contents__link toc-highlight">Navigation</a></li><li><a href="#form-elements" class="table-of-contents__link toc-highlight">Form Elements</a></li><li><a href="#badges-and-tags" class="table-of-contents__link toc-highlight">Badges and Tags</a></li><li><a href="#code-blocks" class="table-of-contents__link toc-highlight">Code Blocks</a></li><li><a href="#callout-boxes" class="table-of-contents__link toc-highlight">Callout Boxes</a></li><li><a href="#loading-states" class="table-of-contents__link toc-highlight">Loading States</a></li></ul></li><li><a href="#responsive-design" class="table-of-contents__link toc-highlight">Responsive Design</a><ul><li><a href="#breakpoints" class="table-of-contents__link toc-highlight">Breakpoints</a></li><li><a href="#layout-adaptations" class="table-of-contents__link toc-highlight">Layout Adaptations</a></li><li><a href="#touch-targets" class="table-of-contents__link toc-highlight">Touch Targets</a></li><li><a href="#mobile-specific-considerations" class="table-of-contents__link toc-highlight">Mobile-Specific Considerations</a></li></ul></li><li><a href="#performance-budgets" class="table-of-contents__link toc-highlight">Performance Budgets</a><ul><li><a href="#core-web-vitals-targets" class="table-of-contents__link toc-highlight">Core Web Vitals Targets</a></li><li><a href="#resource-budgets" class="table-of-contents__link toc-highlight">Resource Budgets</a></li><li><a href="#loading-strategy" class="table-of-contents__link toc-highlight">Loading Strategy</a></li><li><a href="#caching-strategy" class="table-of-contents__link toc-highlight">Caching Strategy</a></li><li><a href="#performance-monitoring" class="table-of-contents__link toc-highlight">Performance Monitoring</a></li></ul></li><li><a href="#error-states-and-fallbacks" class="table-of-contents__link toc-highlight">Error States and Fallbacks</a><ul><li><a href="#network-errors" class="table-of-contents__link toc-highlight">Network Errors</a></li><li><a href="#tool-not-found-404" class="table-of-contents__link toc-highlight">Tool Not Found (404):</a></li><li><a href="#search-no-results" class="table-of-contents__link toc-highlight">Search No Results:</a></li><li><a href="#offline-mode" class="table-of-contents__link toc-highlight">Offline Mode</a></li><li><a href="#form-errors" class="table-of-contents__link toc-highlight">Form Errors</a></li></ul></li><li><a href="#ad-and-revenue-strategy" class="table-of-contents__link toc-highlight">Ad and Revenue Strategy</a></li><li><a href="#monetization-extensions-optional" class="table-of-contents__link toc-highlight">Monetization Extensions (Optional)</a></li><li><a href="#data-and-governance" class="table-of-contents__link toc-highlight">Data and Governance</a></li><li><a href="#privacy-and-consent" class="table-of-contents__link toc-highlight">Privacy and Consent</a></li><li><a href="#ux-and-accessibility" class="table-of-contents__link toc-highlight">UX and Accessibility</a></li><li><a href="#tech-stack-phase-7-target" class="table-of-contents__link toc-highlight">Tech Stack (Phase 7 Target)</a></li><li><a href="#auth-and-session-model" class="table-of-contents__link toc-highlight">Auth and Session Model</a></li><li><a href="#api-surfaces-for-web-ui" class="table-of-contents__link toc-highlight">API Surfaces for Web UI</a></li><li><a href="#payments-and-donations-optional" class="table-of-contents__link toc-highlight">Payments and Donations (Optional)</a></li><li><a href="#moderation-and-abuse-reporting" class="table-of-contents__link toc-highlight">Moderation and Abuse Reporting</a></li><li><a href="#media-and-asset-handling" class="table-of-contents__link toc-highlight">Media and Asset Handling</a></li><li><a href="#caching-and-seo-serving" class="table-of-contents__link toc-highlight">Caching and SEO Serving</a></li><li><a href="#seo-strategy" class="table-of-contents__link toc-highlight">SEO Strategy</a><ul><li><a href="#technical-seo" class="table-of-contents__link toc-highlight">Technical SEO</a></li><li><a href="#structured-data-schemaorg" class="table-of-contents__link toc-highlight">Structured Data (Schema.org)</a></li><li><a href="#open-graph--social-sharing" class="table-of-contents__link toc-highlight">Open Graph & Social Sharing</a></li><li><a href="#sitemap" class="table-of-contents__link toc-highlight">Sitemap</a></li><li><a href="#robotstxt" class="table-of-contents__link toc-highlight">robots.txt</a></li><li><a href="#canonical-urls" class="table-of-contents__link toc-highlight">Canonical URLs</a></li><li><a href="#performance-for-seo" class="table-of-contents__link toc-highlight">Performance for SEO</a></li></ul></li><li><a href="#content-strategy" class="table-of-contents__link toc-highlight">Content Strategy</a></li><li><a href="#risks-and-mitigations" class="table-of-contents__link toc-highlight">Risks and Mitigations</a></li><li><a href="#phase-7-implementation-checklist" class="table-of-contents__link toc-highlight">Phase 7 Implementation Checklist</a><ul><li><a href="#71-foundation--setup" class="table-of-contents__link toc-highlight">7.1 Foundation & Setup</a></li><li><a href="#72-core-templates--components" class="table-of-contents__link toc-highlight">7.2 Core Templates & Components</a></li><li><a href="#73-landing-page" class="table-of-contents__link toc-highlight">7.3 Landing Page</a></li><li><a href="#74-registry-pages-ad-free" class="table-of-contents__link toc-highlight">7.4 Registry Pages (Ad-Free)</a></li><li><a href="#75-documentation--tutorials" class="table-of-contents__link toc-highlight">7.5 Documentation & Tutorials</a></li><li><a href="#76-authentication--dashboard" class="table-of-contents__link toc-highlight">7.6 Authentication & Dashboard</a></li><li><a href="#77-privacy--consent" class="table-of-contents__link toc-highlight">7.7 Privacy & Consent</a></li><li><a href="#78-ads--monetization" class="table-of-contents__link toc-highlight">7.8 Ads & Monetization</a></li><li><a href="#79-seo--performance" class="table-of-contents__link toc-highlight">7.9 SEO & Performance</a></li><li><a href="#710-testing--qa" class="table-of-contents__link toc-highlight">7.10 Testing & QA</a></li><li><a href="#711-launch-preparation" class="table-of-contents__link toc-highlight">7.11 Launch Preparation</a></li></ul></li><li><a href="#api-endpoints-for-web-ui" class="table-of-contents__link toc-highlight">API Endpoints for Web UI</a></li><li><a href="#diagram-references" class="table-of-contents__link toc-highlight">Diagram References</a></li><li><a href="#deployment-guide" class="table-of-contents__link toc-highlight">Deployment Guide</a><ul><li><a href="#requirements" class="table-of-contents__link toc-highlight">Requirements</a></li><li><a href="#quick-start-development" class="table-of-contents__link toc-highlight">Quick Start (Development)</a></li><li><a href="#production-deployment" class="table-of-contents__link toc-highlight">Production Deployment</a></li><li><a href="#tailwind-css-build" class="table-of-contents__link toc-highlight">Tailwind CSS Build</a></li><li><a href="#health-check" class="table-of-contents__link toc-highlight">Health Check</a></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a></li></ul></li><li><a href="#future-considerations-phase-8" class="table-of-contents__link toc-highlight">Future Considerations (Phase 8+)</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/rob/CmdForge/">Overview</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://gitea.brrd.tech/rob/CmdForge" target="_blank" rel="noopener noreferrer" class="footer__link-item">Gitea<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">CmdForge Documentation</div></div></div></footer></div>
|
||
</body>
|
||
</html> |