feat: Modern styling, draw.io integration, and C4 architecture docs
Build and Deploy Documentation / build (push) Failing after 8s
Build and Deploy Documentation / build (push) Failing after 8s
Styling: - Dark-first design (Vercel/Linear inspired) with Geist font - Custom CSS with full --ifm- token overrides - Glassmorphic navbar, refined sidebar, modern tables - Gradient hero with animated glow, app cards, C4 section - Custom badge, tag, and callout components - Announcement bar, TOC config, dark scrollbar draw.io: - Added docusaurus-plugin-drawio + raw-loader - SMP full pipeline diagram (smp-pipeline.drawio) - Embedded in architecture overview Mermaid: - Added @docusaurus/theme-mermaid - C4Context, C4Container, C4Component diagrams - Sequence and graph diagrams in architecture C4 Architecture (Stock Market Professional): - L1 Context: system in the world, actors, external systems - L2 Containers: Data Ingestor, Analysis Engine, Signal Generator, TimescaleDB, Notifier - L3 Components: deep component breakdown with mermaid C4Component diagrams Other: - Sidebar restructured with C4 section and Modules section - Homepage rebuilt as modern dark landing page
This commit is contained in:
+354
-24
@@ -1,30 +1,360 @@
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
/* ============================================================
|
||||
SKIC Playground Docs — Modern Dark-First Technical Theme
|
||||
Inspired by Vercel / Linear design language
|
||||
Font: Geist (by Vercel) + Geist Mono
|
||||
============================================================ */
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
/* --- Google Fonts / Geist import --- */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* Geist via CDN */
|
||||
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');
|
||||
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css');
|
||||
|
||||
/* ── Design Tokens ───────────────────────────────────────── */
|
||||
:root {
|
||||
--ifm-color-primary: #2e8555;
|
||||
--ifm-color-primary-dark: #29784c;
|
||||
--ifm-color-primary-darker: #277148;
|
||||
--ifm-color-primary-darkest: #205d3b;
|
||||
--ifm-color-primary-light: #33925d;
|
||||
--ifm-color-primary-lighter: #359962;
|
||||
--ifm-color-primary-lightest: #3cad6e;
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
/* Brand */
|
||||
--skic-accent: #6366f1; /* indigo-500 */
|
||||
--skic-accent-light: #818cf8; /* indigo-400 */
|
||||
--skic-accent-dark: #4f46e5; /* indigo-600 */
|
||||
--skic-green: #10b981;
|
||||
--skic-amber: #f59e0b;
|
||||
--skic-red: #ef4444;
|
||||
|
||||
/* Docusaurus overrides — Light mode */
|
||||
--ifm-color-primary: #6366f1;
|
||||
--ifm-color-primary-dark: #4f46e5;
|
||||
--ifm-color-primary-darker: #4338ca;
|
||||
--ifm-color-primary-darkest: #3730a3;
|
||||
--ifm-color-primary-light: #818cf8;
|
||||
--ifm-color-primary-lighter: #a5b4fc;
|
||||
--ifm-color-primary-lightest: #c7d2fe;
|
||||
|
||||
--ifm-font-family-base: 'Geist', 'Inter', system-ui, sans-serif;
|
||||
--ifm-font-family-monospace: 'Geist Mono', 'Fira Code', monospace;
|
||||
--ifm-font-size-base: 15px;
|
||||
--ifm-line-height-base: 1.7;
|
||||
--ifm-font-weight-normal: 400;
|
||||
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-heading-letter-spacing: -0.02em;
|
||||
--ifm-h1-font-size: 2.25rem;
|
||||
--ifm-h2-font-size: 1.5rem;
|
||||
--ifm-h3-font-size: 1.2rem;
|
||||
|
||||
--ifm-navbar-height: 60px;
|
||||
--ifm-navbar-shadow: none;
|
||||
|
||||
--ifm-toc-border-color: var(--ifm-color-emphasis-200);
|
||||
--ifm-code-font-size: 0.85rem;
|
||||
--ifm-code-border-radius: 6px;
|
||||
--ifm-code-padding-horizontal: 0.4em;
|
||||
--ifm-code-padding-vertical: 0.15em;
|
||||
--ifm-pre-border-radius: 10px;
|
||||
--ifm-pre-padding: 1.25rem;
|
||||
|
||||
--ifm-global-radius: 8px;
|
||||
--ifm-global-shadow-lw: 0 1px 3px 0 rgba(0,0,0,.08);
|
||||
--ifm-global-shadow-md: 0 4px 12px 0 rgba(0,0,0,.1);
|
||||
|
||||
--docusaurus-highlighted-code-line-bg: rgba(99, 102, 241, 0.08);
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
/* ── Dark Mode ───────────────────────────────────────────── */
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: #21af90;
|
||||
--ifm-color-primary-darker: #1fa588;
|
||||
--ifm-color-primary-darkest: #1a8870;
|
||||
--ifm-color-primary-light: #29d5b0;
|
||||
--ifm-color-primary-lighter: #32d8b4;
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
--ifm-color-primary: #818cf8;
|
||||
--ifm-color-primary-dark: #6366f1;
|
||||
--ifm-color-primary-darker: #4f46e5;
|
||||
--ifm-color-primary-darkest: #4338ca;
|
||||
--ifm-color-primary-light: #a5b4fc;
|
||||
--ifm-color-primary-lighter: #c7d2fe;
|
||||
--ifm-color-primary-lightest: #e0e7ff;
|
||||
|
||||
--ifm-background-color: #0a0a0a;
|
||||
--ifm-background-surface-color: #111111;
|
||||
--ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
|
||||
--ifm-sidebar-background: #0a0a0a;
|
||||
--ifm-footer-background-color: #0a0a0a;
|
||||
|
||||
--ifm-color-content: #ededed;
|
||||
--ifm-color-content-secondary:#a1a1a1;
|
||||
--ifm-color-emphasis-100: #1a1a1a;
|
||||
--ifm-color-emphasis-200: #222222;
|
||||
--ifm-color-emphasis-300: #333333;
|
||||
--ifm-color-emphasis-400: #555555;
|
||||
--ifm-color-emphasis-600: #999999;
|
||||
--ifm-color-emphasis-700: #cccccc;
|
||||
--ifm-color-emphasis-900: #ffffff;
|
||||
|
||||
--ifm-toc-border-color: #222222;
|
||||
--ifm-hr-border-color: #1f1f1f;
|
||||
|
||||
--ifm-code-background: #161616;
|
||||
--ifm-pre-background: #111111;
|
||||
--ifm-blockquote-border-left-color: var(--skic-accent);
|
||||
|
||||
--docusaurus-highlighted-code-line-bg: rgba(129, 140, 248, 0.12);
|
||||
}
|
||||
|
||||
/* ── Typography ──────────────────────────────────────────── */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: -0.02em;
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
}
|
||||
|
||||
h1 { font-size: 2.25rem; font-weight: 700; }
|
||||
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.4rem; }
|
||||
h3 { font-size: 1.15rem; }
|
||||
|
||||
p { color: var(--ifm-color-content); }
|
||||
|
||||
/* ── Navbar ──────────────────────────────────────────────── */
|
||||
.navbar {
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .navbar {
|
||||
background: rgba(10, 10, 10, 0.85);
|
||||
}
|
||||
|
||||
.navbar__title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.navbar__link:hover,
|
||||
.navbar__link--active {
|
||||
color: var(--ifm-color-content) !important;
|
||||
}
|
||||
|
||||
/* ── Sidebar ─────────────────────────────────────────────── */
|
||||
.theme-doc-sidebar-container {
|
||||
border-right: 1px solid var(--ifm-color-emphasis-200) !important;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
font-size: 0.875rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.35rem 0.75rem;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
color: var(--ifm-color-content);
|
||||
}
|
||||
|
||||
.menu__link--active {
|
||||
background: var(--ifm-color-emphasis-100) !important;
|
||||
color: var(--ifm-color-primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu__caret::before {
|
||||
background: var(--ifm-color-content-secondary);
|
||||
}
|
||||
|
||||
/* ── Code Blocks ─────────────────────────────────────────── */
|
||||
code {
|
||||
font-size: 0.84em;
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
div[class*="codeBlockContainer"] {
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
div[class*="codeBlockTitle"] {
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
font-size: 0.78rem;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
color: var(--ifm-color-content-secondary);
|
||||
}
|
||||
|
||||
/* ── Tables ──────────────────────────────────────────────── */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.7rem 1rem;
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
tr:last-child td { border-bottom: none; }
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
/* ── Admonitions (callouts) ──────────────────────────────── */
|
||||
.admonition {
|
||||
border-radius: 8px;
|
||||
border: 1px solid;
|
||||
border-left-width: 3px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.admonition-note { border-color: var(--ifm-color-emphasis-300); background: var(--ifm-color-emphasis-100); }
|
||||
.admonition-tip { border-color: var(--skic-green); background: rgba(16, 185, 129, 0.06); }
|
||||
.admonition-info { border-color: var(--skic-accent); background: rgba(99, 102, 241, 0.06); }
|
||||
.admonition-warning { border-color: var(--skic-amber); background: rgba(245, 158, 11, 0.06); }
|
||||
.admonition-danger { border-color: var(--skic-red); background: rgba(239, 68, 68, 0.06); }
|
||||
|
||||
.admonition-heading h5 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
/* ── Breadcrumbs ─────────────────────────────────────────── */
|
||||
.breadcrumbs__link {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ── TOC ─────────────────────────────────────────────────── */
|
||||
.table-of-contents__link {
|
||||
font-size: 0.8rem;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
}
|
||||
.table-of-contents__link:hover,
|
||||
.table-of-contents__link--active {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────── */
|
||||
.pagination-nav__link {
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-radius: 8px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.pagination-nav__link:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────────────── */
|
||||
.footer {
|
||||
border-top: 1px solid var(--ifm-color-emphasis-200);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.footer__title {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 600;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
font-size: 0.875rem;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
}
|
||||
|
||||
/* ── Doc article ─────────────────────────────────────────── */
|
||||
.markdown {
|
||||
--ifm-heading-margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.markdown > h2:first-child { margin-top: 0; }
|
||||
|
||||
/* ── Hero (homepage) ─────────────────────────────────────── */
|
||||
.hero--primary {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0a0a0a 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero--primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 60% 40%, rgba(99,102,241,0.15) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
color: #a1a1a1;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Badge component ─────────────────────────────────────── */
|
||||
.badge--status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 100px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.badge--wip { color: var(--skic-amber); border-color: var(--skic-amber); background: rgba(245,158,11,0.08); }
|
||||
.badge--stable { color: var(--skic-green); border-color: var(--skic-green); background: rgba(16,185,129,0.08); }
|
||||
.badge--planned { color: var(--ifm-color-content-secondary); border-color: var(--ifm-color-emphasis-300); background: transparent; }
|
||||
|
||||
/* ── Scrollbar (webkit) ──────────────────────────────────── */
|
||||
[data-theme='dark'] ::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
[data-theme='dark'] ::-webkit-scrollbar-track { background: transparent; }
|
||||
[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
|
||||
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
|
||||
/* ── Selection ───────────────────────────────────────────── */
|
||||
::selection { background: rgba(99,102,241,0.25); }
|
||||
|
||||
+262
-18
@@ -1,23 +1,267 @@
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
/* ── Hero ────────────────────────────────────────────────── */
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 480px;
|
||||
padding: 5rem 1.5rem;
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroGlow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 50% 30%, rgba(99,102,241,0.18) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(16,185,129,0.06) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.heroPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #818cf8;
|
||||
background: rgba(99,102,241,0.1);
|
||||
border: 1px solid rgba(99,102,241,0.25);
|
||||
border-radius: 100px;
|
||||
padding: 0.3rem 0.9rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.04em !important;
|
||||
line-height: 1.1 !important;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 60%, #818cf8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1.25rem !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #a1a1a1;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heroCta {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btnPrimary {
|
||||
background: #6366f1 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
padding: 0.65rem 1.5rem !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.9rem !important;
|
||||
transition: background 0.15s ease, transform 0.15s ease !important;
|
||||
}
|
||||
.btnPrimary:hover {
|
||||
background: #4f46e5 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btnSecondary {
|
||||
background: transparent !important;
|
||||
color: #a1a1a1 !important;
|
||||
border: 1px solid #333 !important;
|
||||
padding: 0.65rem 1.5rem !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.9rem !important;
|
||||
transition: all 0.15s ease !important;
|
||||
}
|
||||
.btnSecondary:hover {
|
||||
border-color: #555 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ── Main ────────────────────────────────────────────────── */
|
||||
.main {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
.sectionDivider {
|
||||
border-top: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 1.6rem !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
color: #ededed !important;
|
||||
border-bottom: none !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.sectionSubtitle {
|
||||
color: #a1a1a1;
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── App Cards ───────────────────────────────────────────── */
|
||||
.appGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.appCard {
|
||||
display: block;
|
||||
background: #111111;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.appCard:hover {
|
||||
border-color: #6366f1;
|
||||
background: #161625;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(99,102,241,0.12);
|
||||
}
|
||||
|
||||
.appCardHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.appCardTitle {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #ededed !important;
|
||||
margin: 0 !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.appCardDesc {
|
||||
font-size: 0.875rem;
|
||||
color: #a1a1a1;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ── Badges ──────────────────────────────────────────────── */
|
||||
.badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 100px;
|
||||
border: 1px solid;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badgeStable { color: #10b981; border-color: #10b981; background: rgba(16,185,129,0.08); }
|
||||
.badgeWip { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,0.08); }
|
||||
.badgePlanned { color: #666; border-color: #333; background: transparent; }
|
||||
|
||||
/* ── Tags ────────────────────────────────────────────────── */
|
||||
.tagList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 5px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
}
|
||||
|
||||
/* ── C4 Grid ─────────────────────────────────────────────── */
|
||||
.c4Grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.c4Grid { grid-template-columns: 1fr; }
|
||||
.appGrid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.c4Card {
|
||||
background: #111111;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.c4Level {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #6366f1;
|
||||
background: rgba(99,102,241,0.1);
|
||||
border: 1px solid rgba(99,102,241,0.2);
|
||||
border-radius: 5px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
}
|
||||
|
||||
.c4Name {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #ededed !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.c4Desc {
|
||||
font-size: 0.85rem;
|
||||
color: #a1a1a1;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
+103
-27
@@ -1,43 +1,119 @@
|
||||
import type {ReactNode} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Heading from '@theme/Heading';
|
||||
|
||||
import styles from './index.module.css';
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
type AppStatus = 'stable' | 'wip' | 'planned';
|
||||
|
||||
type Application = {
|
||||
name: string;
|
||||
description: string;
|
||||
status: AppStatus;
|
||||
link: string;
|
||||
tags: string[];
|
||||
};
|
||||
|
||||
const applications: Application[] = [
|
||||
{
|
||||
name: 'Stock Market Professional',
|
||||
description: 'Monitors forex & stock markets, runs technical analysis to spot patterns, and emits daily trading signals with max 3 positions / 30-minute hold.',
|
||||
status: 'wip',
|
||||
link: '/docs/applications/stock-market-professional',
|
||||
tags: ['Python', 'Forex', 'TA', 'Signals'],
|
||||
},
|
||||
];
|
||||
|
||||
const statusLabels: Record<AppStatus, string> = {
|
||||
stable: '✦ Stable',
|
||||
wip: '◎ In Development',
|
||||
planned: '◇ Planned',
|
||||
};
|
||||
|
||||
const statusClass: Record<AppStatus, string> = {
|
||||
stable: styles.badgeStable,
|
||||
wip: styles.badgeWip,
|
||||
planned: styles.badgePlanned,
|
||||
};
|
||||
|
||||
function AppCard({ name, description, status, link, tags }: Application) {
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className="hero__title">
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
to="/docs/intro">
|
||||
Docusaurus Tutorial - 5min ⏱️
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={link} className={styles.appCard}>
|
||||
<div className={styles.appCardHeader}>
|
||||
<Heading as="h3" className={styles.appCardTitle}>{name}</Heading>
|
||||
<span className={clsx(styles.badge, statusClass[status])}>
|
||||
{statusLabels[status]}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<p className={styles.appCardDesc}>{description}</p>
|
||||
<div className={styles.tagList}>
|
||||
{tags.map(t => <span key={t} className={styles.tag}>{t}</span>)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home(): ReactNode {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
function Hero() {
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
<div className={styles.hero}>
|
||||
<div className={styles.heroGlow} />
|
||||
<div className={styles.heroContent}>
|
||||
<div className={styles.heroPill}>Autonomous · Self-Documenting</div>
|
||||
<Heading as="h1" className={styles.heroTitle}>
|
||||
SKIC Playground
|
||||
</Heading>
|
||||
<p className={styles.heroSubtitle}>
|
||||
Documentation for autonomous applications — designed, built, and operated by Jarvis.
|
||||
</p>
|
||||
<div className={styles.heroCta}>
|
||||
<Link className={clsx('button', styles.btnPrimary)} to="/docs/intro">
|
||||
Browse Docs
|
||||
</Link>
|
||||
<Link className={clsx('button', styles.btnSecondary)} href="https://gitea.lego-cloud.eu/skic-v1-playground">
|
||||
View Source ↗
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<Layout title={siteConfig.title} description={siteConfig.tagline}>
|
||||
<Hero />
|
||||
<main className={styles.main}>
|
||||
<section className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<Heading as="h2" className={styles.sectionTitle}>Applications</Heading>
|
||||
<p className={styles.sectionSubtitle}>Production-grade systems built and documented autonomously.</p>
|
||||
</div>
|
||||
<div className={styles.appGrid}>
|
||||
{applications.map(app => <AppCard key={app.name} {...app} />)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={clsx(styles.section, styles.sectionDivider)}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<Heading as="h2" className={styles.sectionTitle}>Architecture Approach</Heading>
|
||||
<p className={styles.sectionSubtitle}>Every application is documented using the C4 model.</p>
|
||||
</div>
|
||||
<div className={styles.c4Grid}>
|
||||
{[
|
||||
{ level: 'L1', name: 'Context', desc: 'System in the real world — users, external systems, and high-level relationships.' },
|
||||
{ level: 'L2', name: 'Containers', desc: 'Deployable units — applications, services, databases, and their interactions.' },
|
||||
{ level: 'L3', name: 'Components', desc: 'Internal structure of each container — modules, classes, and responsibilities.' },
|
||||
].map(({ level, name, desc }) => (
|
||||
<div key={level} className={styles.c4Card}>
|
||||
<span className={styles.c4Level}>{level}</span>
|
||||
<Heading as="h3" className={styles.c4Name}>{name}</Heading>
|
||||
<p className={styles.c4Desc}>{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user