[
    {
        "summary": "What's SvelteKit?",
        "content": "<p>SvelteKit is a framework for building websites with Svelte. If Svelte is the tool that lets you build reactive components, SvelteKit adds the rest of what you need for a real website: routing between pages, server-side rendering (SSR) for faster load times and better SEO, and the ability to load data before a page displays.</p><p>Think of it like this: Svelte handles the <em>component</em> — the reusable pieces of your UI — and SvelteKit handles the <em>app</em> — the pages, navigation, and data flow. You write <code>.svelte</code> files that contain HTML, CSS, and JavaScript all in one place, just like a regular web page, and SvelteKit turns them into an optimized production site.</p>"
    },
    {
        "summary": "Installation & Setup",
        "content": "<p>Before you start, make sure you have <a href=\"https://nodejs.org/\"><b>Node.js</b></a> installed. Node.js gives you <code>npm</code>, the package manager you'll use to create and run your project.</p><br><p><strong>Step 1 — Create a new project:</strong></p><p>Open your terminal, navigate to the folder where you want your project to live, and run:</p><pre><code>npx sv create my-app</code></pre><p>This starts the Svelte CLI tool. It will ask you a few questions — choose the <strong>SvelteKit</strong> option, then pick a template (\"Demo\" gives you a sample app, \"Skeleton\" starts completely empty). It will install all dependencies automatically.</p><br><p><strong>Step 2 — Start the development server:</strong></p><pre><code>cd my-app\nnpm run dev</code></pre><p>This starts a local server at <code>http://localhost:5173</code>. Open that URL in your browser. Any change you make to your code will appear instantly without refreshing the page — that's hot module reloading (HMR).</p><br><p><strong>Step 3 — Build for production:</strong></p><p>When you're ready to share your site, run:</p><pre><code>npm run build</code></pre><p>SvelteKit compiles everything into static HTML, CSS, and JS inside a <code>build</code> folder that you can deploy anywhere.</p>"
    },
    {
        "summary": "Project Structure",
        "content": "<p>When you create a SvelteKit project, you'll see this basic folder layout that matters most:</p><br><pre><code>my-app/\n├── src/\n│   ├── routes/        # Each file here becomes a page on your site\n│   │   ├── +page.svelte       # The homepage (yourdomain.com/)\n│   │   ├── +layout.svelte     # Wraps every page (nav, footer, etc.)\n│   │   └── +error.svelte      # Shown when something goes wrong\n│   ├── lib/           # Reusable components and modules\n│   │   └── components/        # Your .svelte component files\n│   ├── app.html       # The HTML shell that every page loads into\n│   └── app.css        # Global styles\n├── static/            # Files served as-is (images, fonts, favicon)\n├── package.json\n├── svelte.config.js\n└── vite.config.js</code></pre><br><p><strong>The key convention — routing via files:</strong></p><p>SvelteKit uses <strong>file-based routing</strong>. A file at <code>src/routes/about/+page.svelte</code> automatically becomes <code>yourdomain.com/about</code>. Folders create URL segments, and special <code>+</code> prefix files define what each route does:</p><p><code>+page.svelte</code> — A page. One per route.</p><p><code>+layout.svelte</code> — A wrapper that surrounds all pages inside its folder and sub-folders. Great for shared navigation or sidebars.</p><p><code>+error.svelte</code> — An error boundary for that route and its children.</p><p>Everything inside <code>src/lib</code> is private to your app. You import from it using the <code>$lib</code> alias — for example, <code>import Button from '$lib/components/Button.svelte'</code>.</p>"
    },
    {
        "summary": "Your First Component",
        "content": "<p>A Svelte component is a single <code>.svelte</code> file that contains all three parts of a web piece in one place: the JavaScript (logic), the HTML (structure), and the CSS (style).</p><br><pre><code>&lt;script&gt;\n  let name = 'world';\n&lt;/script&gt;\n\n&lt;h1&gt;Hello {name}!&lt;/h1&gt;\n\n&lt;style&gt;\n  h1 {\n    color: purple;\n    font-family: sans-serif;\n  }\n&lt;/style&gt;</code></pre><br><p>Notice a few things:</p><p>🔹 The <code>&lt;script&gt;</code> tag holds your JavaScript. You declare variables, import other components, and write logic here.</p><p>🔹 In the HTML section, you use <code>{curly braces}</code> to output JavaScript values — <code>{name}</code> becomes <code>world</code>.</p><p>🔹 The <code>&lt;style&gt;</code> tag is <strong>scoped by default</strong>. The CSS inside only applies to this component — it won't leak out and affect other parts of the page. This is a huge benefit: no more class name conflicts.</p><p>🔹 To apply a global style (one that applies everywhere), wrap it in <code>:global(...)</code>: <br><code>:global(body) { margin: 0; }</code></p>"
    },
    {
        "summary": "Reactive State ($state)",
        "content": "<p>In a normal JavaScript variable, if you change the value, the HTML doesn't update — it stays whatever it was when the page first loaded. <strong>Reactive state</strong> fixes that: when the value changes, Svelte automatically updates the parts of the page that use it.</p><br><p>You declare reactive state with the <code>$state</code> rune:</p><pre><code>&lt;script&gt;\n  let count = $state(0);\n&lt;/script&gt;\n\n&lt;button onclick={() =&gt; count++}&gt;\n  Clicks: {count}\n&lt;/button&gt;</code></pre><br><p>Every time you click the button, <code>count</code> increases by one, and the displayed number updates automatically. You don't need to manually re-render anything.</p><br><p><strong>What can be reactive?</strong> Any JavaScript value: numbers, strings, booleans, arrays, and objects. Arrays and objects become <strong>deeply reactive</strong> — changing a nested property or pushing to an array also triggers updates:</p><pre><code>&lt;script&gt;\n  let todos = $state(['learn svelte', 'build something']);\n\n  function addTodo() {\n    todos.push('another task');  // This updates the UI\n    todos = todos;               // Trigger the reactivity\n  }\n&lt;/script&gt;</code></pre><br><p>Note: In Svelte 5, arrays and objects need to be reassigned after mutation (as shown above) to trigger updates. Using <code>todos = [...todos, 'new']</code> (creating a new array) also works.</p>"
    },
    {
        "summary": "Derived Values ($derived)",
        "content": "<p>Often you need a value that is <em>computed from</em> other reactive state. For example, a full name from a first and last name, or a total price from a list of items. That's what <code>$derived</code> is for.</p><br><pre><code>&lt;script&gt;\n  let firstName = $state('Jane');\n  let lastName = $state('Doe');\n  let fullName = $derived(firstName + ' ' + lastName);\n&lt;/script&gt;\n\n&lt;p&gt;Hello, {fullName}&lt;/p&gt;</code></pre><br><p><code>fullName</code> will automatically recompute whenever <code>firstName</code> or <code>lastName</code> changes. You never need to manually update it.</p><br><p>For more complex logic — like operations that need multiple lines or an array method — use <code>$derived.by</code> with a function:</p><pre><code>&lt;script&gt;\n  let cart = $state([2.99, 5.50, 1.25]);\n  let total = $derived.by(() => {\n    return cart.reduce((sum, price) => sum + price, 0);\n  });\n&lt;/script&gt;\n\n&lt;p&gt;Total: ${total.toFixed(2)}&lt;/p&gt;</code></pre><br><p>A derived value is read-only — you can't assign to it. It always follows from the state it depends on.</p>"
    },
    {
        "summary": "Props ($props)",
        "content": "<p>Props are how you pass data from a parent component down into a child component — just like HTML attributes.</p><br><p><strong>Receiving props in a child component:</strong></p><pre><code>&lt;!-- Greeting.svelte --&gt;\n&lt;script&gt;\n  let { name, age } = $props();\n&lt;/script&gt;\n\n&lt;p&gt;{name} is {age} years old.&lt;/p&gt;</code></pre><br><p><strong>Passing props from a parent:</strong></p><pre><code>&lt;!-- Parent.svelte --&gt;\n&lt;script&gt;\n  import Greeting from './Greeting.svelte';\n&lt;/script&gt;\n\n&lt;Greeting name=\"Alice\" age={30} /&gt;</code></pre><br><p>You can set default values so the component still works if a prop is omitted:</p><pre><code>let { name = 'Guest', age = 0 } = $props();</code></pre><br><p>You can also use a rest pattern to collect remaining props and spread them onto an element:</p><pre><code>&lt;script&gt;\n  let { class: className, ...others } = $props();\n&lt;/script&gt;\n\n&lt;button {...others}&gt;Click me&lt;/button&gt;</code></pre><br><p>This is useful when you want a component to pass through native HTML attributes like <code>id</code>, <code>disabled</code>, or event handlers.</p>"
    },
    {
        "summary": "Effects ($effect)",
        "content": "<p>Sometimes you need to run code <em>when</em> reactive state changes — like logging a value, saving to localStorage, or starting an animation. That's what <code>$effect</code> is for.</p><br><pre><code>&lt;script&gt;\n  let count = $state(0);\n\n  $effect(() => {\n    // This runs whenever 'count' changes\n    console.log('Count is now', count);\n  });\n&lt;/script&gt;\n\n&lt;button onclick={() =&gt; count++}&gt;\n  {count}\n&lt;/button&gt;</code></pre><br><p>The function inside <code>$effect</code> runs immediately when the component mounts, and then re-runs every time any reactive value it accesses changes. Svelte figures out the dependencies automatically just by looking at which <code>$state</code> or <code>$derived</code> values are used inside the function.</p><br><p><strong>Cleanup:</strong> If your effect sets up something that needs to be torn down (an interval, an event listener, a GSAP animation), return a cleanup function:</p><pre><code>&lt;script&gt;\n  let seconds = $state(0);\n\n  $effect(() => {\n    const interval = setInterval(() => {\n      seconds++;\n    }, 1000);\n\n    // Cleanup — runs when the component unmounts\n    // or before the effect runs again\n    return () => clearInterval(interval);\n  });\n&lt;/script&gt;\n\n&lt;p&gt;{seconds}s elapsed&lt;/p&gt;</code></pre><br><p><strong>$effect.pre</strong> — Runs <em>before</em> the DOM is updated. Use this when you need to read the old DOM state before Svelte applies changes (for example, measuring scroll position before adding new content).</p>"
    },
    {
        "summary": "Snippets",
        "content": "<p>Snippets let you reuse chunks of markup <strong>inside the same component</strong> without creating a separate file. Think of them like a function for HTML.</p><br><pre><code>&lt;script&gt;\n  let pets = ['dog', 'cat', 'bird'];\n&lt;/script&gt;\n\n{#snippet petEmoji(name)}\n  &lt;span&gt;\n    {#if name === 'dog'} 🐕\n    {:else if name === 'cat'} 🐈\n    {:else} 🐦\n    {/if}\n  &lt;/span&gt;\n{/snippet}\n\n&lt;ul&gt;\n  {#each pets as pet}\n    &lt;li&gt;\n      {@render petEmoji(pet)}\n      {pet}\n    &lt;/li&gt;\n  {/each}\n&lt;/ul&gt;</code></pre><br><p>You define a snippet with <code>{#snippet name(params)}...{/snippet}</code> and render it with <code>{@render name(args)}</code>.</p><br><p>Snippets can also be passed to other components as props. This is useful when you want a child component to control the structure but let the parent control the content:</p><pre><code>&lt;!-- Parent passes a snippet to Table --&gt;\n{#snippet header()}\n  &lt;th&gt;Name&lt;/th&gt;\n  &lt;th&gt;Price&lt;/th&gt;\n{/snippet}\n\n{#snippet row(item)}\n  &lt;td&gt;{item.name}&lt;/td&gt;\n  &lt;td&gt;\\${item.price}&lt;/td&gt;\n{/snippet}\n\n&lt;Table data={products} {header} {row} /&gt;</code></pre><br><p><strong>Children as snippets:</strong> Content placed between a component's opening and closing tags automatically becomes a <code>children</code> snippet:</p><pre><code>&lt;Card&gt;\n  &lt;p&gt;This is the card body.&lt;/p&gt;\n&lt;/Card&gt;\n\n&lt;!-- Card.svelte --&gt;\n&lt;script&gt;\n  let { children } = $props();\n&lt;/script&gt;\n\n&lt;div class=\"card\"&gt;\n  {@render children()}\n&lt;/div&gt;</code></pre>"
    },
    {
        "summary": "Routing",
        "content": "<p>Routing in SvelteKit is built around the file system. Every <>.svelte</<code> file or folder inside <code>src/routes</code> creates a URL on your site.</p><br><p><strong>Static routes:</strong></p><pre><code>src/routes/\n├── +page.svelte       →  /\n├── about/\n│   └── +page.svelte   →  /about\n├── contact/\n│   └── +page.svelte   →  /contact</code></pre><br><p><strong>Dynamic routes (with parameters):</strong></p><p>Wrap a folder name in square brackets to create a dynamic segment:</p><pre><code>src/routes/threejs-blog/\n├── +page.svelte        →  /threejs-blog\n├── [id]/\n│   └── +page.svelte    →  /threejs-blog/1, /threejs-blog/hello-world, etc.</code></pre><p>Inside the <code>[id]</code> page, you access the parameter via <code>$page.params.id</code> or from the <code>load</code> function.</p><br><p><strong>Layouts — shared UI for multiple pages:</strong></p><p>A <code>+layout.svelte</code> file wraps all pages inside its folder (and sub-folders). Use it for navigation bars, footers, or sidebars that should appear on every page:</p><pre><code>&lt;!-- src/routes/+layout.svelte --&gt;\n&lt;nav&gt;\n  &lt;a href=\"/\"&gt;Home&lt;/a&gt;\n  &lt;a href=\"/about\"&gt;About&lt;/a&gt;\n&lt;/nav&gt;\n\n&lt;main&gt;\n  {@render children()}\n&lt;/main&gt;\n\n&lt;footer&gt;© 2026&lt;/footer&gt;</code></pre><p>The layout receives a <code>children</code> snippet (the page content) and renders it where you place <code>{@render children()}</code>.</p><br><p><strong>Loading data before a page renders:</strong></p><p>Create a <code>+page.server.ts</code> (or <code>.js</code>) file alongside your <code>+page.svelte</code> to fetch data on the server before the page loads:</p><pre><code>// src/routes/threejs-blog/+page.server.ts\nexport function load() {\n  return {\n    posts: getPosts()  // fetch from a database or API\n  };\n}</code></pre><p>The returned data becomes the <code>data</code> prop in your page component:</p><pre><code>&lt;script&gt;\n  let { data } = $props();\n&lt;/script&gt;\n\n&lt;h1&gt;Blog&lt;/h1&gt;\n{#each data.posts as post}\n  &lt;article&gt;{post.title}&lt;/article&gt;\n{/each}</code></pre><br><p><strong>Error pages:</strong> A <code>+error.svelte</code> file in any route folder creates an error boundary that displays when something goes wrong in that section of the app. The root <code>+error.svelte</code> catches errors anywhere.</p>"
    }
]