diff --git a/README.md b/README.md index 362036c..45d6854 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@
-**[🌐 specfact.com](https://specfact.com)** • **[📚 specfact.io](https://specfact.io)** • **[👨‍💻 specfact.dev](https://specfact.dev)** • **[📖 GitHub Pages Docs](https://nold-ai.github.io/specfact-cli/)** • **[💬 Support](mailto:hello@noldai.com)** +**[🌐 specfact.com](https://specfact.com)** • **[📚 specfact.io](https://specfact.io)** • **[👨‍💻 specfact.dev](https://specfact.dev)** • **[📖 Documentation](https://docs.specfact.io/)** • **[💬 Support](mailto:hello@noldai.com)**
@@ -21,7 +21,7 @@ - **[specfact.com](https://specfact.com)** - Commercial landing page (marketing, pricing, enterprise) - **[specfact.io](https://specfact.io)** - Product ecosystem hub (CLI reference, integrations, changelog, product docs) - **[specfact.dev](https://specfact.dev)** - Developer community (tutorials, guides, blog, community content) ⭐ **For developers** -- **[GitHub Pages Docs](https://nold-ai.github.io/specfact-cli/)** - Complete online documentation +- **[docs.specfact.io](https://docs.specfact.io/)** - Complete online documentation --- @@ -233,7 +233,7 @@ specfact import from-code my-project --repo . - **[DevOps Adapter Integration](docs/guides/devops-adapter-integration.md)** - GitHub Issues, Linear, Jira 👉 **[Full Documentation Index](docs/README.md)** - Browse all documentation -👉 **[GitHub Pages Documentation](https://nold-ai.github.io/specfact-cli/)** - Online documentation site +👉 **[Online Documentation](https://docs.specfact.io/)** - Complete documentation site --- diff --git a/docs/_config.yml b/docs/_config.yml index d4aed04..3802b04 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -4,8 +4,8 @@ title: SpecFact CLI Documentation description: >- Complete documentation for SpecFact CLI - Brownfield-first CLI: Reverse engineer legacy Python → specs → enforced contracts. -baseurl: "/specfact-cli" # Project pages require baseurl -url: "https://nold-ai.github.io" # GitHub Pages domain +baseurl: "" # Custom domain at root, no baseurl needed +url: "https://docs.specfact.io" # Custom domain # Build settings markdown: kramdown @@ -36,7 +36,6 @@ exclude: - scripts - specs - resources - - "*.css.map" # Exclude source map files # Source and destination (Jekyll will look for files in docs/) # Note: For GitHub Pages, Jekyll typically expects source in root or docs/ @@ -46,13 +45,21 @@ destination: _site # Defaults defaults: - # Apply permalink pattern only to markdown pages - # Note: Assets (SCSS files) are not pages, so they won't be affected by this + # Default layout for all pages - scope: path: "" type: pages values: layout: default + # Apply permalink pattern only to markdown files (exclude assets) + # Note: SCSS files with front matter are treated as pages and inherit this pattern + # We exclude assets/ directory to prevent CSS from being output at main/index.css + - scope: + path: "" + type: pages + exclude: + - "assets/**" + values: permalink: /:basename/ - scope: path: "getting-started" @@ -89,7 +96,7 @@ minima: # sass_dir is only needed for custom SASS partials directory sass: style: compressed - sourcemap: never # Disable source maps to avoid conflicts + sourcemap: never # Disable source maps to prevent JSON output # Footer footer: diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index f787bf4..19268f2 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -5,6 +5,10 @@ {% seo %} + + + + {% if jekyll.environment == 'production' and site.google_analytics %} @@ -34,12 +38,61 @@ } }); - // Initialize Mermaid after converting all blocks + // Initialize Mermaid with dark theme matching specfact.io colors mermaid.initialize({ startOnLoad: true, - theme: 'default', + theme: 'dark', securityLevel: 'loose', - flowchart: { useMaxWidth: true } + flowchart: { + useMaxWidth: true, + htmlLabels: true, + curve: 'basis' + }, + themeVariables: { + darkMode: true, + primaryColor: '#64ffda', + primaryTextColor: '#ccd6f6', + primaryBorderColor: '#64ffda', + lineColor: '#64ffda', + secondaryColor: '#112240', + tertiaryColor: '#1d2d50', + background: '#0a192f', + mainBkgColor: '#112240', + secondBkgColor: '#1d2d50', + textColor: '#ccd6f6', + border1: '#64ffda', + border2: '#8892b0', + noteBkgColor: '#1d2d50', + noteTextColor: '#ccd6f6', + noteBorderColor: '#64ffda', + actorBorder: '#64ffda', + actorBkg: '#112240', + actorTextColor: '#ccd6f6', + actorLineColor: '#64ffda', + labelBoxBkgColor: '#112240', + labelBoxBorderColor: '#64ffda', + labelTextColor: '#ccd6f6', + loopTextColor: '#ccd6f6', + activationBorderColor: '#64ffda', + activationBkgColor: '#1d2d50', + sequenceNumberColor: '#0a192f', + sectionBkgColor: '#1d2d50', + altBkgColor: '#112240', + critBkgColor: '#1d2d50', + doneBkgColor: '#64ffda', + doneBorderColor: '#64ffda', + taskBorderColor: '#64ffda', + taskBkgColor: '#112240', + taskTextLightColor: '#ccd6f6', + taskTextColor: '#ccd6f6', + taskTextDarkColor: '#0a192f', + taskTextOutsideColor: '#ccd6f6', + taskTextClickableColor: '#64ffda', + activeTaskBorderColor: '#64ffda', + activeTaskBkgColor: '#1d2d50', + gridColor: '#8892b0', + critBorderColor: '#64ffda' + } }); }); diff --git a/docs/assets/main.scss b/docs/assets/main.scss index 764fc5d..e6f0ade 100644 --- a/docs/assets/main.scss +++ b/docs/assets/main.scss @@ -10,36 +10,29 @@ permalink: /assets/main.css // These styles override minima theme defaults :root { - --primary-color: #2563eb; - --primary-hover: #1d4ed8; - --text-color: #1f2937; - --text-light: #6b7280; - --bg-color: #ffffff; - --bg-light: #f9fafb; - --border-color: #e5e7eb; - --code-bg: #f3f4f6; - --link-color: #2563eb; - --link-hover: #1d4ed8; -} - -// Dark mode support -@media (prefers-color-scheme: dark) { - :root { - --text-color: #f9fafb; - --text-light: #9ca3af; - --bg-color: #111827; - --bg-light: #1f2937; - --border-color: #374151; - --code-bg: #1f2937; - } + /* SpecFact.io color scheme - Documentation theme */ + --primary-color: #64ffda; + --primary-hover: #7affeb; + --text-color: #ccd6f6; + --text-light: #8892b0; + --text-muted: #495670; + --bg-color: #0a192f; + --bg-light: #112240; + --bg-alt: #1d2d50; + --border-color: rgba(100, 255, 218, 0.1); + --border-hover: rgba(100, 255, 218, 0.3); + --code-bg: #1d2d50; + --link-color: #64ffda; + --link-hover: #7affeb; } // Override body styles with !important to ensure they apply body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; line-height: 1.7 !important; color: var(--text-color) !important; background-color: var(--bg-color) !important; + -webkit-font-smoothing: antialiased; } // Header styling @@ -203,6 +196,7 @@ body { border: 1px solid var(--border-color); border-radius: 0.5rem; margin-bottom: 1rem; + font-family: 'JetBrains Mono', 'Fira Code', monospace !important; .highlight { background-color: var(--code-bg) !important; @@ -221,6 +215,7 @@ body { padding: 0; border: none; color: var(--text-color) !important; + font-family: 'JetBrains Mono', 'Fira Code', monospace !important; } } } @@ -235,12 +230,14 @@ body { overflow-x: auto; margin-bottom: 1rem; color: var(--text-color) !important; + font-family: 'JetBrains Mono', 'Fira Code', monospace !important; code { background-color: transparent !important; padding: 0; border: none; color: var(--text-color) !important; + font-family: 'JetBrains Mono', 'Fira Code', monospace !important; } } @@ -252,81 +249,82 @@ body { font-size: 0.9em; border: 1px solid var(--border-color); color: var(--text-color) !important; + font-family: 'JetBrains Mono', 'Fira Code', monospace !important; } - // Rouge syntax highlighting spans - ensure no dark backgrounds + // Rouge syntax highlighting spans - dark theme colors for readability .highlight { span { background-color: transparent !important; color: var(--text-color) !important; } - // Syntax highlighting colors (light theme) - .c { color: #6a737d !important; } // Comments - .k { color: #d73a49 !important; } // Keywords - .l { color: #005cc5 !important; } // Literals + // Syntax highlighting colors (dark theme optimized) + .c { color: #8892b0 !important; } // Comments - muted gray-blue + .k { color: #ff6b9d !important; } // Keywords - pink/red + .l { color: #64ffda !important; } // Literals - cyan .n { color: var(--text-color) !important; } // Names - .o { color: #d73a49 !important; } // Operators - .p { color: var(--text-color) !important; } // Punctuation - .cm { color: #6a737d !important; } // Comment multiline - .cp { color: #6a737d !important; } // Comment preproc - .c1 { color: #6a737d !important; } // Comment single - .cs { color: #6a737d !important; } // Comment special - .gd { color: #d73a49 !important; } // Generic deleted + .o { color: #ff6b9d !important; } // Operators - pink + .p { color: #ccd6f6 !important; } // Punctuation - light text + .cm { color: #8892b0 !important; } // Comment multiline + .cp { color: #8892b0 !important; } // Comment preproc + .c1 { color: #8892b0 !important; } // Comment single + .cs { color: #8892b0 !important; } // Comment special + .gd { color: #ff6b9d !important; } // Generic deleted .ge { font-style: italic !important; } // Generic emph - .gr { color: #d73a49 !important; } // Generic error + .gr { color: #ff6b9d !important; } // Generic error .gh { color: var(--text-color) !important; font-weight: bold !important; } // Generic heading - .gi { color: #28a745 !important; } // Generic inserted - .go { color: #6a737d !important; } // Generic output - .gp { color: #6a737d !important; } // Generic prompt + .gi { color: #64ffda !important; } // Generic inserted - cyan + .go { color: #8892b0 !important; } // Generic output + .gp { color: #8892b0 !important; } // Generic prompt .gs { font-weight: bold !important; } // Generic strong .gu { color: var(--text-color) !important; font-weight: bold !important; } // Generic subheading - .gt { color: #d73a49 !important; } // Generic traceback - .kc { color: #005cc5 !important; } // Keyword constant - .kd { color: #d73a49 !important; } // Keyword declaration - .kn { color: #d73a49 !important; } // Keyword namespace - .kp { color: #d73a49 !important; } // Keyword pseudo - .kr { color: #d73a49 !important; } // Keyword reserved - .kt { color: #d73a49 !important; } // Keyword type - .ld { color: #032f62 !important; } // Literal date - .m { color: #005cc5 !important; } // Literal number - .s { color: #032f62 !important; } // Literal string - .na { color: #005cc5 !important; } // Name attribute - .nb { color: #005cc5 !important; } // Name builtin - .nc { color: #6f42c1 !important; } // Name class - .no { color: #005cc5 !important; } // Name constant - .nd { color: #6f42c1 !important; } // Name decorator - .ni { color: #800080 !important; } // Name entity - .ne { color: #990000 !important; font-weight: bold !important; } // Name exception - .nf { color: #6f42c1 !important; } // Name function - .nl { color: #005cc5 !important; } // Name label + .gt { color: #ff6b9d !important; } // Generic traceback + .kc { color: #64ffda !important; } // Keyword constant - cyan + .kd { color: #ff6b9d !important; } // Keyword declaration - pink + .kn { color: #ff6b9d !important; } // Keyword namespace + .kp { color: #ff6b9d !important; } // Keyword pseudo + .kr { color: #ff6b9d !important; } // Keyword reserved + .kt { color: #ff6b9d !important; } // Keyword type + .ld { color: #64ffda !important; } // Literal date - cyan + .m { color: #64ffda !important; } // Literal number - cyan + .s { color: #a8e6cf !important; } // Literal string - light green + .na { color: #64ffda !important; } // Name attribute - cyan + .nb { color: #64ffda !important; } // Name builtin - cyan + .nc { color: #c792ea !important; } // Name class - purple + .no { color: #64ffda !important; } // Name constant - cyan + .nd { color: #c792ea !important; } // Name decorator - purple + .ni { color: #c792ea !important; } // Name entity - purple + .ne { color: #ff6b9d !important; font-weight: bold !important; } // Name exception + .nf { color: #c792ea !important; } // Name function - purple + .nl { color: #64ffda !important; } // Name label - cyan .nn { color: var(--text-color) !important; } // Name namespace .nx { color: var(--text-color) !important; } // Name other .py { color: var(--text-color) !important; } // Name property - .nt { color: #22863a !important; } // Name tag - .nv { color: #e36209 !important; } // Name variable - .ow { color: #d73a49 !important; } // Operator word - .w { color: #bbbbbb !important; } // Text whitespace - .mf { color: #005cc5 !important; } // Literal number float - .mh { color: #005cc5 !important; } // Literal number hex - .mi { color: #005cc5 !important; } // Literal number integer - .mo { color: #005cc5 !important; } // Literal number oct - .sb { color: #032f62 !important; } // Literal string backtick - .sc { color: #032f62 !important; } // Literal string char - .sd { color: #6a737d !important; } // Literal string doc - .s2 { color: #032f62 !important; } // Literal string double - .se { color: #032f62 !important; } // Literal string escape - .sh { color: #032f62 !important; } // Literal string heredoc - .si { color: #032f62 !important; } // Literal string interpol - .sx { color: #032f62 !important; } // Literal string other - .sr { color: #032f62 !important; } // Literal string regex - .s1 { color: #032f62 !important; } // Literal string single - .ss { color: #032f62 !important; } // Literal string symbol + .nt { color: #64ffda !important; } // Name tag - cyan (YAML keys) + .nv { color: #ffd93d !important; } // Name variable - yellow + .ow { color: #ff6b9d !important; } // Operator word + .w { color: #8892b0 !important; } // Text whitespace + .mf { color: #64ffda !important; } // Literal number float + .mh { color: #64ffda !important; } // Literal number hex + .mi { color: #64ffda !important; } // Literal number integer + .mo { color: #64ffda !important; } // Literal number oct + .sb { color: #a8e6cf !important; } // Literal string backtick + .sc { color: #a8e6cf !important; } // Literal string char + .sd { color: #8892b0 !important; } // Literal string doc + .s2 { color: #a8e6cf !important; } // Literal string double + .se { color: #a8e6cf !important; } // Literal string escape + .sh { color: #a8e6cf !important; } // Literal string heredoc + .si { color: #a8e6cf !important; } // Literal string interpol + .sx { color: #a8e6cf !important; } // Literal string other + .sr { color: #a8e6cf !important; } // Literal string regex + .s1 { color: #a8e6cf !important; } // Literal string single + .ss { color: #a8e6cf !important; } // Literal string symbol .bp { color: var(--text-color) !important; } // Name builtin pseudo - .vc { color: #e36209 !important; } // Name variable class - .vg { color: #e36209 !important; } // Name variable global - .vi { color: #e36209 !important; } // Name variable instance - .il { color: #005cc5 !important; } // Literal number integer long + .vc { color: #ffd93d !important; } // Name variable class - yellow + .vg { color: #ffd93d !important; } // Name variable global - yellow + .vi { color: #ffd93d !important; } // Name variable instance - yellow + .il { color: #64ffda !important; } // Literal number integer long } // Blockquotes @@ -517,6 +515,54 @@ body { } } +// Mermaid diagram styling +.mermaid { + background-color: var(--bg-light) !important; + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--border-color); + margin: 1.5rem 0; + overflow-x: auto; + + svg { + background-color: transparent !important; + } + + // Ensure text is visible + text { + fill: var(--text-color) !important; + } + + // Node styling + .node rect, + .node circle, + .node ellipse, + .node polygon { + fill: var(--bg-alt) !important; + stroke: var(--primary-color) !important; + } + + // Edge/arrow styling + .edgePath path, + .flowchart-link { + stroke: var(--primary-color) !important; + } + + .arrowheadPath { + fill: var(--primary-color) !important; + } + + // Label styling + .edgeLabel { + background-color: var(--bg-light) !important; + color: var(--text-color) !important; + } + + .edgeLabel text { + fill: var(--text-color) !important; + } +} + // Print styles @media print { .site-header,