readysite / readysite.org / views / layouts / docs.html
13.2 KB
docs.html
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{block "title" .}}Docs{{end}} - ReadySite</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
    <link href="/static/styles/main.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-go.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-jsx.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-tsx.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-yaml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markdown.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-docker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-makefile.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-sql.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-rust.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-toml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-gitignore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-lua.min.js"></script>
    <script src="/static/scripts/main.js"></script>
</head>
<body class="min-h-screen bg-[#111] text-[#e5e5e5] flex flex-col">
    <!-- Nav -->
    <nav class="sticky top-0 z-50 bg-[#111]/80 backdrop-blur-xl border-b border-white/10">
        <div class="max-w-7xl mx-auto px-6 h-14 flex items-center justify-between">
            <div class="flex items-center gap-6">
                <a href="/" class="flex items-center gap-2 text-white font-semibold">
                    <img src="/static/logo.svg" alt="ReadySite" width="24" height="24">
                    <span>ReadySite</span>
                </a>
                <!-- Mobile sidebar toggle -->
                <button onclick="document.getElementById('docs-sidebar').classList.toggle('-translate-x-full')" class="lg:hidden text-[#888] hover:text-white transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
            </div>
            <div class="flex items-center gap-6 text-sm" hx-boost="true">
                <a href="/docs/quickstart" class="text-[#888] hover:text-white transition-colors hidden sm:block">Docs</a>
                <a href="/git" class="text-[#888] hover:text-white transition-colors hidden sm:block">Source</a>
                <a href="/pricing" class="text-[#888] hover:text-white transition-colors hidden sm:block">Pricing</a>
                <a href="/about" class="text-[#888] hover:text-white transition-colors hidden sm:block">About</a>
                {{if auth.IsAuthenticated}}
                <a href="/sites" class="px-4 py-1.5 bg-white text-black font-medium rounded-lg hover:bg-[#e5e5e5] transition-colors">Dashboard</a>
                {{else}}
                <button onclick="document.getElementById('signup-modal').showModal()" class="px-4 py-1.5 bg-white text-black font-medium rounded-lg hover:bg-[#e5e5e5] transition-colors cursor-pointer">Get Started</button>
                {{end}}
            </div>
        </div>
    </nav>

    <div class="flex-1 flex max-w-7xl mx-auto w-full">
        <!-- Sidebar -->
        <aside id="docs-sidebar" class="fixed lg:sticky top-14 left-0 z-40 w-64 h-[calc(100vh-3.5rem)] bg-[#111] lg:bg-transparent border-r border-white/10 lg:border-r-0 overflow-y-auto flex-shrink-0 -translate-x-full lg:translate-x-0 transition-transform duration-200">
            <nav class="p-6 space-y-8 text-sm" hx-boost="true">
                <!-- Learn section -->
                <div>
                    <div class="text-[#666] font-medium uppercase tracking-wider text-xs mb-3">Learn</div>
                    <ul class="space-y-1">
                        <li><a id="nav-quickstart" href="/docs/quickstart" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            Quickstart
                        </a></li>
                        <li><a id="nav-ai-assistant" href="/docs/ai-assistant" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                            AI Assistant
                        </a></li>
                        <li><a id="nav-pages" href="/docs/pages" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            Pages
                        </a></li>
                        <li><a id="nav-collections" href="/docs/collections" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/></svg>
                            Collections
                        </a></li>
                    </ul>
                </div>

                <!-- Build section -->
                <div>
                    <div class="text-[#666] font-medium uppercase tracking-wider text-xs mb-3">Build</div>
                    <ul class="space-y-1">
                        <li><a id="nav-self-hosting" href="/docs/docker" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
                            Self-Hosting
                        </a></li>
                        <li><a id="nav-api" href="/docs/api" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                            API Reference
                        </a></li>
                        <li><a id="nav-templates" href="/docs/templates" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
                            Templates
                        </a></li>
                        <li><a id="nav-endpoints" href="/docs/endpoints" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-pink-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/><circle cx="18" cy="5" r="3" stroke-width="1.5"/></svg>
                            Endpoints
                        </a></li>
                        <li><a id="nav-developers" href="/docs/developers" class="docs-nav-link flex items-center gap-2.5 px-3 py-2 rounded-lg transition-colors">
                            <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            Framework
                        </a></li>
                    </ul>
                </div>
            </nav>
        </aside>

        <!-- Sidebar overlay (mobile) -->
        <div id="docs-overlay" class="fixed inset-0 bg-black/50 z-30 hidden lg:hidden" onclick="document.getElementById('docs-sidebar').classList.add('-translate-x-full'); this.classList.add('hidden')"></div>

        <!-- Content -->
        <main class="flex-1 min-w-0">
            <div class="max-w-4xl px-6 lg:px-12 py-12">
                {{block "content" .}}{{end}}
            </div>
        </main>
    </div>

    {{template "footer.html" .}}
    {{template "signup-modal.html" .}}

    <script>
    function highlightDocsNav() {
        var path = window.location.pathname;
        document.querySelectorAll('.docs-nav-link').forEach(function(link) {
            link.classList.remove('bg-white/10', 'text-white', 'font-medium', 'text-[#888]', 'hover:text-white', 'hover:bg-white/5');
            if (link.getAttribute('href') === path) {
                link.classList.add('bg-white/10', 'text-white', 'font-medium');
            } else {
                link.classList.add('text-[#888]', 'hover:text-white', 'hover:bg-white/5');
            }
        });
    }

    // Run on load and after every HTMX swap
    highlightDocsNav();
    document.body.addEventListener('htmx:afterSettle', highlightDocsNav);

    // Mobile sidebar
    (function() {
        var sidebar = document.getElementById('docs-sidebar');
        var overlay = document.getElementById('docs-overlay');
        var observer = new MutationObserver(function() {
            if (sidebar.classList.contains('-translate-x-full')) {
                overlay.classList.add('hidden');
            } else {
                overlay.classList.remove('hidden');
            }
        });
        observer.observe(sidebar, { attributes: true, attributeFilter: ['class'] });

        document.querySelectorAll('.docs-nav-link').forEach(function(link) {
            link.addEventListener('click', function() {
                if (window.innerWidth < 1024) {
                    sidebar.classList.add('-translate-x-full');
                    overlay.classList.add('hidden');
                }
            });
        });
    })();
    </script>
</body>
</html>
← Back