// pages-docs.jsx // Editorial/Brutalist API Documentation Page // Uses React (window.React) and global t(), navigate() /** * PURE HELPERS * Exposed via window.__docsInternals */ const buildCurlExample = (endpointPath, body) => { const baseUrl = "https://ruuapi.com"; const jsonBody = JSON.stringify(body); return `curl -X POST ${baseUrl}${endpointPath} \\ -H "Content-Type: application/json" \\ -d '${jsonBody}'`; }; const parseEndpointMeta = (slug) => { const map = { 'schema-build': { path: '/api/agent/schema-build', method: 'POST', tier: 'free', rate: 1000 }, 'schema-validate': { path: '/api/agent/schema-validate', method: 'POST', tier: 'free', rate: 1000 }, 'llms-txt-build': { path: '/api/agent/llms-txt-build', method: 'POST', tier: 'free', rate: 1000 }, 'llms-txt-validate': { path: '/api/agent/llms-txt-validate', method: 'POST', tier: 'free', rate: 1000 }, 'schema-autofill': { path: '/api/tools/schema/autofill', method: 'POST', tier: 'gated', rate: 100 } }; return map[slug] || null; }; /** * SYNTAX HIGHLIGHTING * Simple regex-based highlighter for the brutalist UI */ const highlightCode = (code, lang) => { if (!code) return ''; let escaped = code .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); // Keywords const keywords = /\b(function|return|import|const|let|var|async|await|if|else|from|interface|export|try|catch|new|class|throw|print|interface|await|fetch|method|headers|body)\b/g; escaped = escaped.replace(keywords, '$1'); // Strings const strings = /(".*?"|'.*?')/g; escaped = escaped.replace(strings, '$1'); // Comments const comments = /(#.*|\/\/.*)/g; escaped = escaped.replace(comments, '$1'); // Numbers const numbers = /\b(\d+)\b/g; escaped = escaped.replace(numbers, '$1'); // URLs const urls = /(https?:\/\/[^\s&]+)/g; escaped = escaped.replace(urls, '$1'); return escaped; }; /** * COMPONENTS */ const CodeBlock = ({ code, lang, style = {} }) => { return (


  );
};

const EndpointCard = ({ slug, meta, description, exampleRequest, exampleResponse }) => {
  
  const { t } = useT();
  const [activeTab, setActiveTab] = React.useState('curl');
  const [tryItLoading, setTryItLoading] = React.useState(false);
  const [tryItResponse, setTryItResponse] = React.useState(null);
  const [isCopied, setIsCopied] = React.useState(false);

  const pythonSnippet = `import httpx

resp = httpx.post(
    "https://ruuapi.com${meta.path}",
    json=${JSON.stringify(exampleRequest, null, 4)},
    timeout=10
)
print(resp.json())`;

  const jsSnippet = `const resp = await fetch("https://ruuapi.com${meta.path}", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(${JSON.stringify(exampleRequest)})
});
const data = await resp.json();`;

  const tsSnippet = `interface APIResponse { 
  ok: boolean; 
  [key: string]: any; 
}

const resp = await fetch("https://ruuapi.com${meta.path}", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(${JSON.stringify(exampleRequest)})
});
const data: APIResponse = await resp.json();`;

  const curlSnippet = buildCurlExample(meta.path, exampleRequest);

  const snippets = {
    curl: curlSnippet,
    python: pythonSnippet,
    js: jsSnippet,
    ts: tsSnippet
  };

  const handleTryIt = async () => {
    setTryItLoading(true);
    setTryItResponse(null);
    try {
      const res = await fetch(`https://ruuapi.com${meta.path}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(exampleRequest)
      });
      const data = await res.json();
      setTryItResponse(JSON.stringify(data, null, 2));
    } catch (err) {
      setTryItResponse(`Error: ${err.message}`);
    } finally {
      setTryItLoading(false);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(curlSnippet);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2000);
  };

  return (
    
      {/* Header Row */}
      
        {meta.method}
        
        {meta.path}

        

        {meta.tier === 'free' ? (
          
            {t('docs.endpoint.free')} · {meta.rate}/h · NO AUTH
          
        ) : (
          
            {t('docs.endpoint.gated')} · {meta.rate}/h · BEARER AUTH
          
        )}
      

      
        
          {description}
        
      

      {/* Panels Grid */}
      
        {/* Request Panel */}
        
          REQUEST BODY
          
        

        {/* Response Panel */}
        
          EXAMPLE RESPONSE
          
        

        {/* Try-It Panel */}
        
          {t('docs.tryit.response')}
          
            
              
              
            
            
            
              {tryItResponse || (meta.tier === 'gated' ? '> Auth required for this endpoint.' : '> Click Run to test the API...')}
            
          
        
      

      {/* Tabs Section */}
      
        
          {['curl', 'python', 'js', 'ts'].map(tab => (
            
          ))}
        
        
      
    
  );
};

/**
 * MAIN PAGE COMPONENT
 */
const DocsPage = () => {
  
  const { t } = useT();
  const [activeNavSection, setActiveNavSection] = React.useState('quick-start');
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);

  React.useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setActiveNavSection(entry.target.id);
        }
      });
    }, { threshold: 0.2, rootMargin: '-10% 0px -70% 0px' });

    const sections = ['quick-start', 'endpoints', 'ep-schema-build', 'ep-schema-validate', 'ep-llms-txt-build', 'ep-llms-txt-validate', 'ep-autofill', 'sdks', 'rate-limits', 'errors', 'wordpress', 'agent-guide'];
    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });

    return () => observer.disconnect();
  }, []);

  const navLinks = [
    { id: 'quick-start', label: t('docs.nav.quickstart') },
    { id: 'endpoints', label: t('docs.nav.endpoints'), children: [
      { id: 'ep-schema-build', label: 'Schema Build' },
      { id: 'ep-schema-validate', label: 'Schema Validate' },
      { id: 'ep-llms-txt-build', label: 'llms.txt Build' },
      { id: 'ep-llms-txt-validate', label: 'llms.txt Validate' },
      { id: 'ep-autofill', label: 'Schema Autofill (token-gated)' },
    ]},
    { id: 'sdks', label: t('docs.nav.sdks') },
    { id: 'rate-limits', label: t('docs.nav.rate') },
    { id: 'errors', label: t('docs.nav.errors') },
    { id: 'wordpress', label: t('docs.nav.wordpress') },
    { id: 'agent-guide', label: t('docs.nav.agents') },
  ];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const offset = 20;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = el.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }
  };

  return (
    
      {/* HERO BLOCK */}
      
        
          
            {t('docs.hero.stamp')}
          
          
          
            {t('docs.hero.title.a')} {t('docs.hero.title.hl')}
          
          
          
            {t('docs.hero.sub')}
          

          
            
            {t('docs.hero.trust')}
          
        
      

      {/* LAYOUT GRID */}
      
        {/* SIDEBAR */}
        {!isMobile && (
          
            
              {navLinks.map(link => (
                
                  
                  {link.children && (
                    
                      {link.children.map(child => (
                        
                      ))}
                    
                  )}
                
              ))}
            
          
        )}

        {/* MAIN CONTENT */}
        
          {/* QUICK START */}
          
            Quick start
            
              No signup. No API key. Make your first request in 30 seconds.
            
            
              
                
                
                
                terminal — bash
              
              
            
          

          {/* ENDPOINT REFERENCE */}
          
            {t('docs.nav.endpoints')}
            
              Base URL: https://ruuapi.com
            

            

            

             AI-native content platform\n\n## Features\n- Schema markup\n- llms.txt generation"
              }}
            />

             Description\n## About\nContent here."
              }}
              exampleResponse={{
                ok: true,
                valid: true,
                score: 85,
                recommendations: ["Add a 'Tools' section"]
              }}
            />

            
          

          {/* SDKs */}
          
            {t('docs.nav.sdks')}
            
              Use any HTTP client. No SDK required. Examples in curl, Python (httpx), and JS (fetch).
            
            
          

          {/* RATE LIMITS */}
          
            {t('docs.nav.rate')}
            
              CORS is open (*). Requests over the limit return HTTP 429.
            
            
              
                
                  
                    ENDPOINT
                    LIMIT
                    AUTH
                  
                
                
                  
                    /api/agent/*
                    1000/hour/IP
                    None
                  
                  
                    /api/tools/*
                    100/hour
                    Bearer Token
                  
                
              
            
          

          {/* ERRORS */}
          
            {t('docs.nav.errors')}
            
              
                
                  
                    CODE
                    MEANING
                  
                
                
                  
                    200
                    Success
                  
                  
                    422
                    Validation error (check your JSON body)
                  
                  
                    429
                    Rate limit exceeded
                  
                  
                    500
                    Server error
                  
                
              
            
            
          

          {/* WORDPRESS INTEGRATION */}
          
            {t('docs.nav.wordpress')}
            
              {t('docs.wordpress.intro')}
            

            
              {[
                { num: '1', title: t('docs.wordpress.step1title'), body: t('docs.wordpress.step1body') },
                { num: '2', title: t('docs.wordpress.step2title'), body: t('docs.wordpress.step2body') },
                { num: '3', title: t('docs.wordpress.step3title'), body: t('docs.wordpress.step3body') },
              ].map(step => (
                
                  {step.num}
                  {step.title}
                  {step.body}
                
              ))}
            

            
              
                {t('docs.wordpress.download')}
              
              
                {t('docs.wordpress.license')}
              
            

            
              {t('docs.wordpress.featurestitle')}
              
                {t('docs.wordpress.feature1')}
                {t('docs.wordpress.feature2')}
                {t('docs.wordpress.feature3')}
                {t('docs.wordpress.feature4')}
              
            
          

          {/* AGENT GUIDE */}
          
            
              {t('docs.agents.title')}
            
            
              {t('docs.agents.body')}
            
            
            /example 
# returns canned request bodies for few-shot prompting.`}
            />

            
              {t('docs.agents.cite')}
            
          
        
      

      {/* FOOTER STRIP */}
      
        © 2026 RUUAPI.COM · OPEN API
        
          GITHUB
          STATUS
          TOS
        
      
    
  );
};

// EXPORTS
window.__docsInternals = { buildCurlExample, parseEndpointMeta };
Object.assign(window, { DocsPage });