snapshot of https://github.com/ThreeDotsLabs/watermill.git (master, 2026-09-15; blobs > 131072B omitted)

docs/assets/js/custom.js

@@ -0,0 +1,36 @@
+// Put your custom JS code here
+
+// a bit hacky way to force dark mode by default
+// it sets local storage item used by docs/node_modules/@thulite/doks-core/assets/js/color-mode.js
+if (!localStorage.getItem('theme')) {
+  localStorage.setItem('theme', 'dark');
+}
+
+import { render } from 'github-buttons';
+
+let renderGitHubButton= () => {
+  let oldButton = document.getElementById("github-button");
+  if (oldButton) {
+    oldButton.remove();
+  }
+
+  let options = {
+    "href": "https://github.com/ThreeDotsLabs/watermill",
+    "data-show-count": true,
+    "data-size": "large",
+    "data-color-scheme": localStorage.getItem('theme'),
+  }
+
+  render(options, function (el) {
+    let menu = document.getElementById("offcanvasNavMain").querySelector(".offcanvas-body");
+    let searchToggle = document.getElementById("searchToggleDesktop");
+
+    el.setAttribute("id", "github-button");
+    el.classList.add("nav-link", "px-2", "mx-auto");
+    el.setAttribute("style", "margin-top: 12px;");
+
+
+    menu.insertBefore(el, searchToggle);
+  })
+}
+renderGitHubButton()

docs/assets/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*", "..\\node_modules\\@thulite\\doks-core\\assets\\*"]
+    }
+  }
+}

docs/assets/mask-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#E1E8ED" d="M32.415 9.586l-9-9C23.054.225 22.553 0 22 0c-1.104 0-1.999.896-2 2 0 .552.224 1.053.586 1.415l-3.859 3.859 9 9 3.859-3.859c.362.361.862.585 1.414.585 1.104 0 2.001-.896 2-2 0-.552-.224-1.052-.585-1.414z"/><path fill="#CCD6DD" d="M22 0H7C4.791 0 3 1.791 3 4v28c0 2.209 1.791 4 4 4h22c2.209 0 4-1.791 4-4V11h-9c-1 0-2-1-2-2V0z"/><path fill="#99AAB5" d="M22 0h-2v9c0 2.209 1.791 4 4 4h9v-2h-9c-1 0-2-1-2-2V0zm-5 8c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm0 4c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1zm12 4c0 .552-.447 1-1 1H8c-.552 0-1-.448-1-1s.448-1 1-1h20c.553 0 1 .448 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H8c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1z"/></svg>

docs/assets/scss/common/_custom.scss

@@ -0,0 +1,582 @@
+// Put your custom SCSS code here
+* {
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, .navbar-brand {
+  font-family: Quicksand, sans-serif;
+  font-weight: 700;
+}
+
+[data-bs-theme="dark"] .only-light {
+    display: none;
+}
+
+[data-bs-theme="light"] .only-dark {
+    display: none;
+}
+
+
+.homepage-features {
+    .row {
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+}
+
+// Improved text alignment and spacing
+.text-center.text-lg-start {
+    @media (min-width: 992px) {
+        padding-right: 2rem;
+    }
+}
+
+
+// Learn page styling
+.learn-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 3rem 1rem;
+}
+
+.learn-header {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.learn-main-title {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--bs-body-color);
+}
+
+.learn-subtitle {
+    font-size: 1.25rem;
+    color: var(--bs-body-color-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.learn-section {
+    margin-bottom: 4rem;
+}
+
+.learn-section:last-child {
+    margin-bottom: 0;
+}
+
+.learn-section-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 3rem;
+    color: var(--bs-body-color);
+}
+
+.learn-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    justify-items: center;
+}
+
+.learn-card {
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    background: var(--bs-body-bg);
+    border: 1px solid var(--bs-border-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    min-height: 280px;
+    width: 100%;
+    max-width: 350px;
+    text-align: center;
+    color: inherit;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.learn-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+    color: inherit;
+    border-color: var(--bs-primary);
+}
+
+.learn-card:focus {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+}
+
+.learn-card-icon {
+    margin: 0 auto 0;
+    color: var(--bs-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+}
+
+.learn-card h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--bs-body-color);
+    margin-top: 0;
+}
+
+.learn-card-secondary {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--bs-gray-600);
+    margin-bottom: 1rem;
+}
+
+
+
+.learn-card p {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+    flex-grow: 1;
+    color: var(--bs-body-color-secondary);
+}
+
+
+// Dark theme support for learn cards
+[data-bs-theme="dark"] .learn-card {
+    background: var(--bs-body-bg);
+    border-color: var(--bs-border-color);
+}
+
+[data-bs-theme="dark"] .learn-card:hover {
+    border-color: var(--bs-primary);
+}
+
+
+// Responsive grid for learn page
+@media (max-width: 767.98px) {
+    .learn-container {
+        padding: 2rem 1rem;
+    }
+
+    .learn-header {
+        margin-bottom: 3rem;
+    }
+
+    .learn-main-title {
+        font-size: 2.5rem;
+    }
+
+    .learn-subtitle {
+        font-size: 1.1rem;
+    }
+
+    .learn-section-title {
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    .learn-row {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .learn-card {
+        padding: 1.5rem;
+        min-height: 240px;
+        max-width: none;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1199.98px) {
+    .learn-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .learn-section:first-child .learn-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .learn-section:first-child .learn-row .learn-card:nth-child(3) {
+        grid-column: 1 / -1;
+        justify-self: center;
+    }
+}
+
+// Quickstart page styling
+.quickstart-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 3rem 1rem;
+}
+
+.quickstart-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.quickstart-main-title {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--bs-body-color);
+}
+
+.quickstart-subtitle {
+    font-size: 1.25rem;
+    color: var(--bs-body-color-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.quickstart-content {
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+// Hide footer banner on quickstart page too
+body.quickstart .event-driven-banner {
+    display: none;
+}
+
+// Responsive styling for quickstart
+@media (max-width: 767.98px) {
+    .quickstart-container {
+        padding: 2rem 1rem;
+    }
+
+    .quickstart-header {
+        margin-bottom: 2rem;
+    }
+
+    .quickstart-main-title {
+        font-size: 2.5rem;
+    }
+
+    .quickstart-subtitle {
+        font-size: 1.1rem;
+    }
+}
+
+// Responsive improvements
+@media (max-width: 991.98px) {
+    .display-5 {
+        font-size: 2rem;
+    }
+
+    .text-center.text-lg-start {
+        text-align: center !important;
+        padding-right: 0;
+    }
+}
+
+// Pub/Sub Logos Collage Styling
+.pubsub-logos-container {
+    padding: 2rem 0;
+}
+
+.pubsub-logos-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+    align-items: center;
+    justify-content: center;
+}
+
+.pubsub-logo-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    transition: all 0.3s ease;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    flex: 0 0 120px;
+
+    img {
+        width: 60px;
+        height: 60px;
+        margin-bottom: 0.75rem;
+        transition: all 0.3s ease;
+    }
+
+    span {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--bs-body-color-secondary);
+        transition: all 0.3s ease;
+    }
+
+    &:hover {
+        background: rgba(var(--bs-primary-rgb), 0.05);
+        text-decoration: none;
+        color: inherit;
+
+        img {
+        }
+
+        span {
+            color: var(--bs-primary);
+        }
+    }
+
+    &:focus {
+        outline: 2px solid var(--bs-primary);
+        outline-offset: 2px;
+        text-decoration: none;
+        color: inherit;
+    }
+}
+
+// Dark theme support for pub/sub logos
+[data-bs-theme="dark"] .pubsub-logo-item {
+    &:hover {
+        background: rgba(var(--bs-primary-rgb), 0.1);
+    }
+}
+
+// Responsive adjustments for pub/sub logos
+@media (max-width: 767.98px) {
+    .pubsub-logos-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.5rem;
+        max-width: 100%;
+    }
+
+    .pubsub-logo-item {
+        padding: 0.75rem;
+
+        img {
+            width: 50px;
+            height: 50px;
+            margin-bottom: 0.5rem;
+        }
+
+        span {
+            font-size: 0.8rem;
+        }
+    }
+}
+
+@media (max-width: 575.98px) {
+    .pubsub-logos-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+
+    .pubsub-logo-item {
+        img {
+            width: 45px;
+            height: 45px;
+        }
+
+        span {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+// Homepage code blocks styling
+.homepage-code-block {
+    .frame {
+        border-radius: 12px !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
+        border: 1px solid var(--bs-border-color) !important;
+        overflow: hidden;
+        overflow-x: auto; // Allow horizontal scrolling when needed
+
+        // Ensure child elements respect the border radius
+        * {
+            border-radius: inherit !important;
+        }
+
+        // Target the actual code container
+        pre, code, .expressive-code-block {
+            border-radius: 12px !important;
+            border: none !important;
+        }
+
+        // Target any highlighted code elements
+        .highlight {
+            border-radius: 12px !important;
+            border: none !important;
+        }
+    }
+}
+
+[data-bs-theme="light"] {
+    .homepage-code-block .frame pre,
+    .homepage-code-block .frame code,
+    .homepage-code-block .frame .expressive-code-block {
+        background: white !important;
+    }
+}
+
+// Responsive design for homepage code blocks
+@media (max-width: 767.98px) {
+    .homepage-code-block {
+      margin-left: -45px;
+      margin-right: -45px;
+    }
+}
+
+// Dark theme support for homepage code blocks
+[data-bs-theme="dark"] .homepage-code-block {
+    .frame {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+        border: 1px solid var(--bs-border-color) !important;
+    }
+}
+
+// Modern gradient text styles
+.gradient-text-1 {
+    background: linear-gradient(to right, #6366f1, #8b5cf6, #3b82f6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+}
+
+// Homepage gradient section backgrounds
+.homepage-section-gradient {
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100vw;
+        height: 100%;
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
+        pointer-events: none;
+        z-index: -1;
+    }
+}
+
+// Single gradient class for all sections
+.homepage-section-gradient {
+    &::before {
+        background: linear-gradient(180deg, 
+            rgba(79, 70, 229, 0.03) 0%, 
+            transparent 100%
+        );
+    }
+}
+
+// Dark theme adjustments for gradients
+[data-bs-theme="dark"] {
+    .homepage-section-gradient::before {
+        background: linear-gradient(180deg, 
+            rgba(79, 70, 229, 0.06) 0%, 
+            transparent 100%
+        );
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+}
+
+[data-bs-theme="dark"], [data-bs-theme="light"] {
+  /* Background */ .bg { color: #c9c9c9; background-color: #282c34; }
+  /* PreWrapper */ .chroma { color: #c9c9c9; background-color: #282c34; }
+  /* Other */ .chroma .x {  }
+  /* Error */ .chroma .err { color: #cf5967 }
+  /* CodeLine */ .chroma .cl {  }
+  /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+  /* LineHighlight */ .chroma .hl { background-color: #3d4148 }
+  /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* Line */ .chroma .line { display: flex; }
+  /* Keyword */ .chroma .k { color: #7fbaf5 }
+  /* KeywordConstant */ .chroma .kc { color: #cf5967; }
+  /* KeywordDeclaration */ .chroma .kd { color: #7fbaf5 }
+  /* KeywordNamespace */ .chroma .kn { color: #bc74c4 }
+  /* KeywordPseudo */ .chroma .kp { color: #bc74c4 }
+  /* KeywordReserved */ .chroma .kr { color: #7fbaf5 }
+  /* KeywordType */ .chroma .kt { color: #57c7ff; font-weight: bold }
+  /* Name */ .chroma .n {  }
+  /* NameAttribute */ .chroma .na { color: #bc74c4 }
+  /* NameBuiltin */ .chroma .nb { color: #7fbaf5 }
+  /* NameBuiltinPseudo */ .chroma .bp { color: #7fbaf5 }
+  /* NameClass */ .chroma .nc { color: #ecbe7b }
+  /* NameConstant */ .chroma .no { color: #ecbe7b }
+  /* NameDecorator */ .chroma .nd { color: #ecbe7b }
+  /* NameEntity */ .chroma .ni {  }
+  /* NameException */ .chroma .ne { color: #cf5967 }
+  /* NameFunction */ .chroma .nf { color: #57c7ff }
+  /* NameFunctionMagic */ .chroma .fm {  }
+  /* NameLabel */ .chroma .nl { color: #cf5967 }
+  /* NameNamespace */ .chroma .nn {  }
+  /* NameOther */ .chroma .nx {  }
+  /* NameProperty */ .chroma .py {  }
+  /* NameTag */ .chroma .nt { color: #bc74c4 }
+  /* NameVariable */ .chroma .nv { color: #bc74c4; font-style: italic }
+  /* NameVariableClass */ .chroma .vc { color: #57c7ff; font-weight: bold }
+  /* NameVariableGlobal */ .chroma .vg { color: #ecbe7b }
+  /* NameVariableInstance */ .chroma .vi { color: #57c7ff }
+  /* NameVariableMagic */ .chroma .vm {  }
+  /* Literal */ .chroma .l {  }
+  /* LiteralDate */ .chroma .ld { color: #57c7ff }
+  /* LiteralString */ .chroma .s { color: #82cc6a }
+  /* LiteralStringAffix */ .chroma .sa { color: #82cc6a }
+  /* LiteralStringBacktick */ .chroma .sb { color: #57c7ff }
+  /* LiteralStringChar */ .chroma .sc { color: #57c7ff }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #82cc6a }
+  /* LiteralStringDoc */ .chroma .sd { color: #82cc6a }
+  /* LiteralStringDouble */ .chroma .s2 { color: #82cc6a }
+  /* LiteralStringEscape */ .chroma .se { color: #56b6c2 }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #56b6c2 }
+  /* LiteralStringInterpol */ .chroma .si { color: #82cc6a }
+  /* LiteralStringOther */ .chroma .sx { color: #82cc6a }
+  /* LiteralStringRegex */ .chroma .sr { color: #57c7ff }
+  /* LiteralStringSingle */ .chroma .s1 { color: #82cc6a }
+  /* LiteralStringSymbol */ .chroma .ss { color: #82cc6a }
+  /* LiteralNumber */ .chroma .m { color: #56b6c2 }
+  /* LiteralNumberBin */ .chroma .mb { color: #57c7ff }
+  /* LiteralNumberFloat */ .chroma .mf { color: #56b6c2 }
+  /* LiteralNumberHex */ .chroma .mh { color: #57c7ff }
+  /* LiteralNumberInteger */ .chroma .mi { color: #56b6c2 }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #56b6c2 }
+  /* LiteralNumberOct */ .chroma .mo { color: #57c7ff }
+  /* Operator */ .chroma .o { color: #bc74c4 }
+  /* OperatorWord */ .chroma .ow { color: #bc74c4 }
+  /* Punctuation */ .chroma .p { color: #56b6c2 }
+  /* Comment */ .chroma .c { color: #3e4460 }
+  /* CommentHashbang */ .chroma .ch { color: #3e4460; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #3e4460 }
+  /* CommentSingle */ .chroma .c1 { color: #515a84 }
+  /* CommentSpecial */ .chroma .cs { color: #bc74c4; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #7fbaf5 }
+  /* CommentPreprocFile */ .chroma .cpf { color: #7fbaf5 }
+  /* Generic */ .chroma .g {  }
+  /* GenericDeleted */ .chroma .gd { color: #cf5967 }
+  /* GenericEmph */ .chroma .ge { text-decoration: underline }
+  /* GenericError */ .chroma .gr { color: #cf5967; font-weight: bold }
+  /* GenericHeading */ .chroma .gh { color: #ecbe7b; font-weight: bold }
+  /* GenericInserted */ .chroma .gi { color: #ecbe7b }
+  /* GenericOutput */ .chroma .go { color: #43454f }
+  /* GenericPrompt */ .chroma .gp {  }
+  /* GenericStrong */ .chroma .gs { color: #cf5967; font-weight: bold }
+  /* GenericSubheading */ .chroma .gu { color: #cf5967; font-style: italic }
+  /* GenericTraceback */ .chroma .gt {  }
+  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+  /* TextWhitespace */ .chroma .w {  }
+
+}

docs/assets/scss/common/_variables-custom.scss

@@ -0,0 +1,28 @@
+// Put your custom SCSS variables here
+$font-family-sans-serif:
+  "Heebo",
+  "sans-serif",
+  system-ui,
+  -apple-system,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  "Noto Sans",
+  "Liberation Sans",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji";
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1240px,
+    xxl: 1820px
+);
+
+
+$primary: #4f46e5;