🔄 Project Flow

graph TB
    %% ============================================================
    %% 1. IDEA  →  2. PLANNING  →  3. TERMINAL
    %% ============================================================
    IDEA["💡 Idea"]

    subgraph PLANNING["📐 Planning"]
        direction LR
        ARCH_MD["ARCHITECTURE.md"]
        MERMAID_DIAG["mermaid-diagram.html"]
        IMPL_PLAN["implementation_plan.md"]
    end

    TERMINAL["💻 Terminal
100star-init.ps1
project scaffold"]

    IDEA --> PLANNING
    PLANNING --> TERMINAL

    %% ============================================================
    %% 3a. SITE-DECOR (between Planning and Front-end)
    %% ============================================================
    subgraph SITE_DECOR["🎨 Site-decor"]
        direction LR
        FAVICON["favicon.svg / .ico"]
        OG_IMAGE["og-image
1200×630"]
        COVER_DEVTO["cover Dev.to
1000×420"]
        COVER_GH["cover GitHub
repo"]
        LOGO["logo.png"]
    end

    TERMINAL --> SITE_DECOR
    SITE_DECOR --> FRONTEND

    %% ============================================================
    %% 4. FRONT-END
    %% ============================================================
    subgraph FRONTEND["🎨 Front-end"]
        direction TB

        subgraph AUTH["🔑 Authentication"]
            direction LR
            GOOGLE_AUTH["Google Auth
OAuth 2.0
Rainbow border"]
            GITHUB_AUTH["GitHub Auth
OAuth
github-24292f.svg"]
        end

        subgraph DESIGN_UI["🎨 Design & UI"]
            direction TB

            subgraph DESIGN_TOKENS["Tokens & Fonts"]
                direction LR
                SITE_DESIGN["site-design/
Lato 400/700 · Sora 700
CSS Variables
dark/light theme"]
                COLORS["Colors
Accent #6078ff
Text #33334f
Muted #999"]
                ANIMATIONS["Animations
0.2s buttons
0.25s modals
scale(1.2) icons"]
            end

            subgraph UI_ELEMENTS["UI Elements"]
                direction LR
                THEME_TOGGLE["🌙/☀️ Theme
site-design/icons/
moon.svg / sun.svg
data-theme attr"]
                SOCIAL_ICONS["Social Icons
site-design/icons/
25 SVG
gray #999 → brand hover"]
                EXTERNAL_ARROWS["External Links
SVG arrows
currentColor"]
                WELCOME_MODAL["Welcome Modal
first-visit popup"]
            end

            subgraph LAYOUT_BLK["Layout"]
                direction LR
                HEADER["Header
Logo + Nav + Theme
clamp(16px, 5vw, 24px)"]
                HERO["Hero Section
Text + Image
Badge pill shape"]
                FEATURES["Features
3 cards desktop
stack mobile"]
                FOOTER["Footer
Text + Social
gray #999"]
            end
        end

        subgraph LANDING_SEO["🔍 SEO & Optimization"]
            direction LR
            SEO["SEO
title · meta · OG
twitter:card · canonical
JSON-LD
sitemap · robots
Search Console"]
            PWA["PWA
manifest.json
Service Worker
favicon set"]
            PERF["Performance
Core Web Vitals
Mobile-first @768px
clamp() sizing"]
        end
    end

    %% ============================================================
    %% 5. GITHUB REPO — Public Face
    %% ============================================================
    subgraph REPO_PUBLIC["🐙 GitHub Repo — Public Face"]
        direction TB

        subgraph REPO_DOCS["📄 Documentation"]
            direction LR
            README["README.md
ARCHITECTURE.md
readme-guidelines"]
            ROADMAP["ROADMAP.md
CHANGELOG.md"]
            MANUAL["MANUAL.md"]
        end

        subgraph REPO_META["📎 Metadata"]
            direction LR
            LLMS["llms.txt
llms-full.txt"]
            LICENSE["LICENSE MIT
.gitignore
.npmignore"]
            BADGES["README badges
shields.io
badge-check.ps1"]
        end
    end

    %% ============================================================
    %% 6. BACK-END — Code + Infrastructure
    %% ============================================================
    subgraph BACKEND["⚙️ Back-end — Code & Infrastructure"]
        direction TB

        subgraph CODE_BLK["💻 Source Code"]
            direction LR
            SRC["src/ · lib/ · api/
package.json"]
            CLI["bin/cli.js
Commander.js"]
            TESTS["tests/
lint · audit"]
        end

        subgraph SECURITY_BLK["🔒 Security"]
            direction LR
            SEC_ENV[".env · safe-push
npm audit
.env.example"]
            SEC_PIN["pin versions
.npmignore"]
        end

        subgraph DEPLOY_BLK["🚀 Deploy"]
            direction LR
            VERCEL["Vercel
Hobby free
100GB bw/mo
10s timeout"]
            GH_PAGES["GitHub Pages
500MB · free"]
            ALIBABA["Alibaba ECS
Singapore
$1.6/mo stopped"]
            DOMAIN["*.osovsky.com
GoDaddy"]
        end

        subgraph CICD_BLK["⚙️ CI/CD"]
            direction LR
            CICD_ACTIONS["GitHub Actions
Auto-deploy"]
            CICD_LINT["Lint · test · badges"]
            README_LINT["readme-lint.yml"]
        end

        subgraph RELEASE_BLK["📦 Release"]
            direction LR
            NPM_PUBLISH["npm publish
npx project-name"]
            GH_RELEASE["GitHub Release
tag · changelog"]
        end

        subgraph SERVICES["🔌 Services"]
            direction LR
            CLOUDFLARE["Cloudflare
DNS + SSL
R2 10GB free"]
            RESEND["Resend
Email 100/day"]
            REDIS["Upstash Redis
10K cmd/day"]
        end

        subgraph API_BLK["📡 API"]
            direction LR
            GH_ACTIONS["GitHub Actions
CI/CD
∞ min public"]
            GA4["GA4
Analytics
14 mo retention"]
            GEMINI["Gemini 2.5 Flash
AI API"]
        end
    end

    %% ============================================================
    %% 8. AUTOPOSTING DASHBOARD
    %% ============================================================
    subgraph AUTOPOSTING["📡 Autoposting Dashboard
avtoposting/"]
        direction TB

        subgraph LAUNCH["🚀 Publishing"]
            direction LR

            subgraph DEVTO_BLK["📝 Dev.to"]
                direction TB
                DEVTO_ARTICLE["Dev.to Article
write-article-workflow
Hook → Research → Write
Cover 1000×420"]
                DEVTO_CHECKLIST["Checklist
no Russian text
no real IPs/keys
raw.githubusercontent images"]
            end

            PH["Product Hunt 🚀"]
            HN["Hacker News 🟠"]
        end

        subgraph CHANNELS["📢 Distribution Channels"]
            direction LR
            AP_MASTODON["Mastodon
mastodon.social"]
            AP_BLUESKY["Bluesky"]
            AP_THREADS["Threads"]
            REDDIT["Reddit"]
            LINKEDIN["LinkedIn + X"]
            TELEGRAM["Telegram"]
        end

        subgraph AP_ENGINE["⚙️ Engine"]
            direction LR
            AP_DEVTO["Dev.to API
articles.json"]
            AP_SYNC["sync-articles.ps1
Redis sync"]
            AP_MODAL["modal.js
Preview → Publish"]
            AP_RENDER["render.js
Calendar grid"]
        end
    end

    %% 9. MONITOR
    subgraph MONITOR_BLK["📊 Monitoring"]
        direction LR
        MORNING_RPT["morning-report.ps1"]
        GH_TRAFFIC["GitHub Traffic"]
        NPM_DOWNLOADS["npm downloads"]
        GA4_TG["GA4 → TG alerts"]
    end

    %% ============================================================
    %% CONNECTIONS
    %% ============================================================

    %% 3. Terminal → containers (Site-decor→Frontend is above)
    TERMINAL --> BACKEND
    TERMINAL --> REPO_PUBLIC

    %% 5. Repo ↔ Planning (same doc)
    REPO_PUBLIC -.- ARCH_MD

    %% 4. Front-end internal — vertical order
    AUTH --> DESIGN_UI
    DESIGN_UI --> LANDING_SEO

    %% 4. Design dependencies (dotted)
    SITE_DESIGN -.- HEADER
    SITE_DESIGN -.- FOOTER
    SITE_DESIGN -.- THEME_TOGGLE
    SOCIAL_ICONS -.- FOOTER

    %% 5→6. Repo → Back-end
    REPO_PUBLIC --> BACKEND
    README -.- SRC

    %% 6. Back-end internal — vertical flow
    CODE_BLK --> SECURITY_BLK
    SECURITY_BLK --> DEPLOY_BLK
    DEPLOY_BLK --> CICD_BLK
    CICD_BLK --> RELEASE_BLK
    RELEASE_BLK --> SERVICES
    SERVICES --> API_BLK
    GH_ACTIONS -.- VERCEL
    CICD_ACTIONS -.- VERCEL

    %% 7. Cross-connections (dotted)
    LANDING_SEO -. "deploy" .-> VERCEL
    LANDING_SEO -. "deploy" .-> GH_PAGES
    SEO -. "analytics" .-> GA4
    GOOGLE_AUTH -. "OAuth" .-> SERVICES

    %% 8. Into Autoposting
    FRONTEND --> AUTOPOSTING
    BACKEND --> AUTOPOSTING
    LAUNCH --> CHANNELS
    AP_ENGINE --> CHANNELS
    DEVTO_ARTICLE -.- AP_DEVTO

    %% 9. Autoposting → Monitor
    AUTOPOSTING --> MONITOR_BLK

    %% ============================================================
    %% STYLING — pastel palette (mermaid-guidelines)
    %% ============================================================
    classDef idea fill:#f5f3ff,stroke:#818cf8,stroke-width:3px,color:#000
    classDef terminal fill:#f0fdf4,stroke:#22c55e,stroke-width:3px,color:#000
    classDef clrAuth fill:#eff6ff,stroke:#3b82f6,color:#000
    classDef clrUI fill:#f5f3ff,stroke:#8b5cf6,color:#000
    classDef clrLayout fill:#f0fdfa,stroke:#14b8a6,color:#000
    classDef clrLanding fill:#f5f3ff,stroke:#6078ff,color:#000
    classDef clrSEO fill:#f5f3ff,stroke:#8b5cf6,color:#000
    classDef clrDeploy fill:#eff6ff,stroke:#3b82f6,color:#000
    classDef clrService fill:#fff,stroke:#999,color:#000,stroke-dasharray:5 5
    classDef clrAPI fill:#ecfeff,stroke:#06b6d4,color:#000
    classDef clrRepo fill:#f8fafc,stroke:#94a3b8,color:#000
    classDef clrDistrib fill:#fdf2f8,stroke:#ec4899,color:#000
    classDef clrMonitor fill:#ecfeff,stroke:#06b6d4,color:#000
    classDef clrSecurity fill:#fef2f2,stroke:#ef4444,color:#000
    classDef clrRelease fill:#f0fdf4,stroke:#22c55e,color:#000
    classDef codeBox fill:#6366f1,stroke:#818cf8,stroke-width:3px,color:#fff,font-size:16px

    %% Node assignments
    class IDEA idea
    class TERMINAL terminal
    class ARCH_MD,MERMAID_DIAG,IMPL_PLAN clrRepo
    class GOOGLE_AUTH,GITHUB_AUTH clrAuth
    class THEME_TOGGLE,SOCIAL_ICONS,EXTERNAL_ARROWS,WELCOME_MODAL clrUI
    class HEADER,HERO,FEATURES,FOOTER clrLayout
    class SITE_DESIGN,COLORS,ANIMATIONS clrLanding
    class SEO,PERF clrSEO
    class PWA clrLanding
    class README,ROADMAP,MANUAL clrRepo
    class LLMS,LICENSE,BADGES clrRepo
    class SRC codeBox
    class CLI,TESTS clrAPI
    class SEC_ENV,SEC_PIN clrSecurity
    class FAVICON,OG_IMAGE,COVER_DEVTO,COVER_GH,LOGO clrLanding
    class VERCEL,GH_PAGES,ALIBABA,DOMAIN clrDeploy
    class CICD_ACTIONS,CICD_LINT,README_LINT clrAPI
    class NPM_PUBLISH,GH_RELEASE clrRelease
    class CLOUDFLARE,RESEND,REDIS clrService
    class GH_ACTIONS,GA4,GEMINI clrAPI
    class DEVTO_ARTICLE,DEVTO_CHECKLIST clrDistrib
    class PH,HN,REDDIT,LINKEDIN,TELEGRAM clrDistrib
    class AP_DEVTO,AP_MASTODON,AP_BLUESKY,AP_THREADS clrAPI
    class AP_SYNC,AP_MODAL,AP_RENDER clrUI
    class MORNING_RPT,GH_TRAFFIC,NPM_DOWNLOADS,GA4_TG clrMonitor

    %% Outer subgraph — warm yellow containers
    style FRONTEND fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style REPO_PUBLIC fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style BACKEND fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style AUTOPOSTING fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style PLANNING fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style SITE_DECOR fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000
    style MONITOR_BLK fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#000