From 1b78c3cc75cad0fbc291668db03f923c94a8a06d Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Fri, 16 Jan 2026 01:45:00 +0530 Subject: [PATCH] feat(cookbook.svelte): allow users to submit new guides --- src/Cookbook.svelte | 564 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 561 insertions(+), 3 deletions(-) diff --git a/src/Cookbook.svelte b/src/Cookbook.svelte index 57153d8..9c53fa1 100644 --- a/src/Cookbook.svelte +++ b/src/Cookbook.svelte @@ -13,8 +13,23 @@ let guides: Guide[] = []; let loading = true; let error: string | null = null; + let showSubmitModal = false; + let submitLoading = false; + let submitSuccess = false; + let submitError: string | null = null; const INDEX_URL = "https://raw.githubusercontent.com/BerriAI/litellm/refs/heads/main/cookbook/ai_coding_tool_guides/index.json"; + const WEBHOOK_URL = "https://hooks.zapier.com/hooks/catch/22699356/ugq2dbo/"; // Replace with actual webhook URL + + // Form state + let formData = { + title: "", + description: "", + url: "", + date: new Date().toISOString().split('T')[0], + version: "1.0.0", + tags: "" + }; async function fetchGuides() { try { @@ -28,10 +43,11 @@ const data = await response.json(); - // Handle both array and single object responses + // The API returns an array of guide objects if (Array.isArray(data)) { guides = data; } else { + // Fallback: wrap single object in array for backwards compatibility guides = [data]; } @@ -60,6 +76,86 @@ }); } + function openSubmitModal() { + showSubmitModal = true; + submitSuccess = false; + submitError = null; + } + + function closeSubmitModal() { + showSubmitModal = false; + resetForm(); + } + + function resetForm() { + formData = { + title: "", + description: "", + url: "", + date: new Date().toISOString().split('T')[0], + version: "1.0.0", + tags: "" + }; + submitLoading = false; + submitSuccess = false; + submitError = null; + } + + async function submitGuide() { + try { + submitLoading = true; + submitError = null; + + // Validate form + if (!formData.title || !formData.description || !formData.url) { + submitError = "Please fill in all required fields"; + submitLoading = false; + return; + } + + // Parse tags (comma-separated) + const tagsArray = formData.tags.split(",").map(tag => tag.trim()).filter(tag => tag); + + // Create guide object with timestamp + const guide = { + title: formData.title, + description: formData.description, + url: formData.url, + date: formData.date, + version: formData.version, + tags: tagsArray, + timestamp: new Date().toISOString() + }; + + console.log("Submitting guide to webhook:", guide); + + // Submit to webhook + const response = await fetch(WEBHOOK_URL, { + method: "POST", + mode: "no-cors", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(guide), + }); + + // With no-cors mode, we can't read the response, so we assume success + console.log("Webhook response:", response); + + submitSuccess = true; + submitLoading = false; + + // Close modal after 2 seconds + setTimeout(() => { + closeSubmitModal(); + }, 2000); + } catch (err) { + console.error("Error submitting guide:", err); + submitError = err instanceof Error ? err.message : "Failed to submit guide"; + submitLoading = false; + } + } + onMount(() => { fetchGuides(); }); @@ -80,10 +176,13 @@ {:else}
-

AI Coding Tool Guides

+

AI Tool Guides

- Learn how to integrate LiteLLM with popular AI coding tools + Learn how to integrate LiteLLM with popular AI tools

+
{#if guides.length === 0} @@ -112,6 +211,144 @@ {/if} {/if} + + + {#if showSubmitModal} + + +
e.target === e.currentTarget && closeSubmitModal()}> +
+
+
+

Submit Your Guide

+

Share your LiteLLM guide with the community!

+
+ +
+ + {#if submitSuccess} +
+ + + +

Guide Submitted!

+

Thank you for your contribution. We'll review it shortly.

+
+ {:else} +
+
+ + +
+ +
+ + + Keep it concise and informative +
+ +
+ + +
+ +
+ + + Separate multiple tags with commas +
+ +
+ + +
+ +
+ + +
+ + {#if submitError} +
+ {submitError} +
+ {/if} + +
+ + +
+
+ {/if} +
+
+ {/if}