Docs Updates

old pages/concepts/signals.mdx

@@ -0,0 +1,96 @@
+---
+title: Signals
+order: 2
+---
+
+Signals are the **core primitive for state** in Solid.
+They provide a way to store a value, read it, and update it.
+When a signal changes, anything that depends on it will update automatically.
+
+Signals can represent any kind of state in your application:  
+- simple values like numbers or strings  
+- complex values like objects or arrays  
+- application state such as the current user, theme, or page
+
+For an overview of how signals fit into Solid’s reactive model, see [Reactivity Basics](/reactivity/basics).
+
+## Creating a signal
+
+Use [`createSignal`](/reference/basic-reactivity/create-signal) from `solid-js` to create a signal.  
+It returns a pair of functions:  
+- a **getter** to read the value  
+- a **setter** to update the value  
+
+```jsx
+import { createSignal } from "solid-js";
+
+const [count, setCount] = createSignal(0);
+//       ^ getter   ^ setter
+```
+
+:::note
+The syntax using `[` and `]` is called [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
+
+This lets you extract values from the array.
+In the context of `createSignal`, the first value is the getter function, and the second value is the setter function.
+:::
+
+## Accessing values
+
+The getter function returned by `createSignal` is used to access the value of the signal.
+Call the getter function with no arguments to read the current value:
+
+```jsx
+console.log(count()); // 0
+```
+
+## Updating values
+
+The setter function returned by `createSignal` is used to update the value of the signal.
+This function takes an argument that represents the new value of the signal:
+
+```jsx
+setCount(count() + 1);
+
+console.log(count()); // 1
+```
+
+The setter function can also take a function that passes the previous value.
+
+```jsx
+setCount((prevCount) => prevCount + 1);
+
+console.log(count()); // 1
+```
+
+## Reactivity
+
+Signals are **reactive**, which means that they automatically update when their value changes.
+For example, using a signal inside JSX automatically makes the DOM update when the signal changes:
+
+```jsx
+function Counter() {
+	const [count, setCount] = createSignal(0);
+	const increment = () => setCount((prev) => prev + 1);
+
+	return (
+		<div>
+			<span>Count: {count()}</span> {/* Updates when `count` changes */}
+			<button type="button" onClick={increment}>
+				Increment
+			</button>
+		</div>
+	);
+}
+```
+
+To learn how signals connect to effects and tracking scopes, see:
+- [Reactive Side Effects](/reactivity/effects)
+- [Memoized Computations](/reactivity/memo)
+
+## Related Pages
+
+- [Reactivity Basics](/reactivity/basics)
+- [Reactive Side Effects](/reactivity/effects)
+- [Memoized Computations](/reactivity/memo)
+- [Introduction to Components](/components/intro)

old pages/guides/data.json

@@ -0,0 +1,14 @@
+{
+	"title": "Guides",
+	"pages": [
+		"styling-your-components.mdx",
+		"styling-components",
+		"state-management.mdx",
+		"routing-and-navigation.mdx",
+		"complex-state-management.mdx",
+		"fetching-data.mdx",
+    "testing.mdx",
+		"deploying-your-app.mdx",
+		"deployment-options"
+	]
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-docs-next",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"private": true,
 	"description": "Docs for Solid",
 	"type": "module",

src/middleware/legacy-routes-redirect.ts

@@ -180,6 +180,8 @@ const LEGACY_ROUTES = {
 
 	"/solid-router/reference/response-helpers/revalidate":
 		"/solid-router/reference/data-apis/revalidate",
+
+	"/solid-start/guides/data-loading": "/solid-start/guides/data-fetching",
 } as const;
 
 function isLegacyRoute(path: string): path is keyof typeof LEGACY_ROUTES {

src/routes/advanced/data.json

@@ -0,0 +1,4 @@
+{
+	"title": "Advanced Concepts",
+	"pages": []
+}

src/routes/components/data.json

@@ -0,0 +1,4 @@
+{
+	"title": "Components",
+	"pages": ["intro.md", "how-to"]
+}

src/routes/components/how-to/data.json

@@ -0,0 +1,4 @@
+{
+	"title": "How-to",
+	"pages": ["event-listeners.mdx", "styling.mdx"]
+}

src/routes/components/how-to/event-listeners.mdx

@@ -0,0 +1,4 @@
+---
+title: "Using Event Listeners"
+---
+

src/routes/components/how-to/styling.mdx

@@ -0,0 +1,4 @@
+---
+title: "Styling Components"
+---
+

src/routes/components/intro.mdx

@@ -0,0 +1,10 @@
+---
+title: "Intro to Components"
+order: 1
+---
+
+[TODO]
+
+## Component lifecycle
+
+[TODO]

src/routes/control-flow/data.json

@@ -0,0 +1,4 @@
+{
+	"title": "Control Flow",
+	"pages": []
+}

src/routes/data.json

@@ -2,10 +2,13 @@
 	"title": "root",
 	"pages": [
 		"index.mdx",
-		"quick-start.mdx",
-		"concepts",
-		"advanced-concepts",
-		"guides",
-		"configuration"
+		"intro.mdx",
+		"getting-started",
+		"reactivity",
+		"components",
+		"control-flow",
+		"rendering",
+		"advanced",
+		"guides"
 	]
 }

src/routes/getting-started/data.json

@@ -0,0 +1,4 @@
+{
+	"title": "Getting Started",
+	"pages": ["quick-start.mdx", "counter.mdx", "todo.mdx"]
+}

src/routes/getting-started/quick-start.mdx

@@ -0,0 +1,83 @@
+---
+title: Quick Start
+order: 1
+---
+
+The fastest way to try Solid is to create a new project and run it locally.
+In just a few minutes, you’ll have a working Solid app running in your browser.
+
+## Solid in your Browser
+
+If you're looking to experiment with Solid without setting up a local environment, open the [Solid Playground](https://playground.solidjs.com/) in your browser.
+
+If you prefer a more complete development setup, you can use the StackBlitz [Javascript](https://stackblitz.com/github/solidjs/templates/tree/master/js) or [TypeScript](https://stackblitz.com/github/solidjs/templates/tree/master/ts) templates.
+
+## Create a New Project
+
+:::note[Before You Begin]
+Make sure you have a recent version of your preferred JavaScript runtime installed, such as [Node.js](https://nodejs.org/en), [Bun](https://bun.sh/), or [Deno](https://deno.com/).
+:::
+
+To create a new Solid project, follow these steps:
+
+1. **Open your terminal and navigate to the directory** where you want to create your project.
+
+2. **Run the following command:**
+
+```package-create
+solid
+```
+
+3. **Follow the CLI prompts** to select your project name, template (JavaScript or TypeScript), and other options.
+
+```sh
+◆ Project Name
+|  <solid-project>
+
+◆ Is this a SolidStart project?
+|  ● Yes / ○ No
+
+◆ Which template would you like to use?
+│  ● ts
+│  ○ ts-vitest
+│  ○ ts-uvu
+│  ○ ts-unocss
+│  ○ ts-tailwindcss
+
+◆ Use TypeScript?
+│  ● Yes / ○ No
+```
+
+4. **Follow the instructions to install the dependencies and start the development server:**
+
+```sh title="npm" tab="package-manager"
+cd solid-project
+npm install
+npm run dev
+```
+
+```sh title="pnpm" tab="package-manager"
+cd solid-project
+pnpm install
+pnpm dev
+```
+
+```sh title="yarn" tab="package-manager"
+cd solid-project
+yarn install
+yarn dev
+```
+
+```sh title="bun" tab="package-manager"
+cd solid-project
+bun install
+bun run dev
+```
+
+```sh title="deno" tab="package-manager"
+cd solid-project
+deno install
+deno run dev
+```
+
+6. **Open your browser and go to the local URL** provided in the terminal to see your new Solid app in action!

src/routes/getting-started/todo.mdx

@@ -0,0 +1,15 @@
+---
+title: Todo Tutorial
+order: 3
+---
+
+[TODO]
+
+1. Open your newly scaffolded project in your code editor of choice.
+
+- Signal to track all tasks
+- Function to add a new task
+- Function to remove a task
+- Function to toggle task completion
+- Show number of completed tasks
+- Show number of tasks