Nico1190/claude-code-master-2026

┌────────────────────────────────────────────────────────────┐
│  Canal 1: NotebookLM "Claude Code Master 2026" (publico)   │
│  - 10 sources via API                                       │
│  - Audio Overview (ES Latam, ~27 min)                       │
│  - Mind Map / FAQ / Briefing Doc                            │
└────────────────────────────────────────────────────────────┘
                             ↑ link
┌────────────────────────────────────────────────────────────┐
│  Canal 2: claude_code_chatbot.html (single-file)            │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Hero       audio nativo + cover art                  │   │
│  │ Invite     6 topic cards entry points               │   │
│  │ Chat       sidebar + streaming + citaciones         │   │
│  │ Resources  4 links a artifacts NotebookLM           │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                              │
│  Llama a generativelanguage.googleapis.com                   │
│  con la API key del visitante (sessionStorage, jamas         │
│  enviada a otro lado).                                       │
│                                                              │
│  System prompt: rol + 10 articulos completos en markdown.    │
└────────────────────────────────────────────────────────────┘
                             ↑ embebido en build-time
┌────────────────────────────────────────────────────────────┐
│  claude_code_articles.json                                  │
│  Generado por download_articles.py a partir de las 10 URLs  │
└────────────────────────────────────────────────────────────┘

function buildSystemInstruction() {
  const role = `Eres "Claude Code Master", un experto que responde preguntas
sobre Claude Code basandote estrictamente en los 10 articulos curados de mayo
2026 que vienen abajo en la seccion <articles>.

REGLAS:
1. Responde SIEMPRE en espanol, claro y directo.
2. Cuando uses informacion de un articulo, citalo asi: [#N: titulo](URL)
3. Si la pregunta no esta cubierta, decilo y marca "(inferencia, no esta en
   los articulos)".
...`;

  let articlesBlock = '<articles>\n';
  for (const a of ARTICLES_DATA.articles) {
    articlesBlock += `\n<article id="${a.id}" title=${JSON.stringify(a.title)}
      url="${a.url}" official="${a.official}">\n`;
    articlesBlock += a.content_markdown;
    articlesBlock += '\n</article>\n';
  }
  articlesBlock += '</articles>';

  return { parts: [{ text: role + '\n\n' + articlesBlock }] };
}

const url = `https://generativelanguage.googleapis.com/v1beta/models/${state.model}:streamGenerateContent?alt=sse`;

const resp = await fetch(url, {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    'x-goog-api-key': state.apiKey,  // del usuario, sessionStorage
  },
  body: JSON.stringify({
    systemInstruction: buildSystemInstruction(),
    contents,
    generationConfig: { maxOutputTokens: 4096, temperature: 0.7 },
  }),
});

const reader = resp.body.getReader();
let assistantText = '';
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // parsear SSE, acumular texto y re-renderizar markdown
  const parts = evt.candidates?.[0]?.content?.parts || [];
  for (const p of parts) assistantText += p.text;
  bubble.innerHTML = marked.parse(assistantText);
}

import trafilatura, requests, json

def html_to_markdown(html: str, url: str) -> str:
    return trafilatura.extract(
        html,
        url=url,
        output_format="markdown",
        include_links=True,
        include_tables=True,
        favor_recall=True,
    )

for source in sources:
    html = requests.get(source["url"], headers=HEADERS, timeout=30).text
    source["content_markdown"] = html_to_markdown(html, source["url"])

template = TEMPLATE.read_text(encoding="utf-8")
articles = json.load(open(ARTICLES))
js_literal = json.dumps(articles, ensure_ascii=False)
output = template.replace("__ARTICLES_JSON__", js_literal)
OUTPUT.write_text(output, encoding="utf-8")

# clonar (incluyendo el audio via LFS)
git clone https://github.com/nico1190/claude-code-master-2026.git
cd claude-code-master-2026
git lfs pull

# servir el HTML (necesario porque <audio> con file:// tiene restricciones)
python -m http.server 8765

# abrir http://localhost:8765/index.html

pip install -r requirements.txt
# (opcional para screenshots) python -m playwright install chromium

# 1. editar claude_code_sources.json (las 10 URLs + metadata)
# 2. re-bajar contenido
python download_articles.py
# 3. reconstruir el HTML embebido
python build_chatbot.py
# 4. regenerar screenshots (opcional)
python take_screenshots.py