Docs Updates

app.config.ts

@@ -51,7 +51,9 @@ function docsData() {
 
 const theme = defineTheme({
 	componentsPath: import.meta.resolve("./src/solidbase-theme"),
+	extends: defaultTheme,
 });
+
 export default defineConfig(
 	createWithSolidBase(theme)(
 		{
@@ -87,6 +89,7 @@ export default defineConfig(
 							cursorColor: "var(--twoslash-cursor)",
 						},
 					},
+					languageSwitcher: true,
 				},
 				toc: {
 					minDepth: 2,
@@ -147,6 +150,7 @@ export default defineConfig(
 
 import { readFile } from "node:fs/promises";
 import { codeToHtml } from "shiki";
+import defaultTheme from "@kobalte/solidbase/default-theme";
 
 function heroCodeSnippet() {
 	const virtualModuleId = "solid:hero-code-snippet";

old pages/concepts/signals.mdx

@@ -0,0 +1,104 @@
+---
+title: Signals
+order: 2
+use_cases: 'always, any solid project, state management, reactive data, core functionality'
+tags:
+  - always
+  - state-management
+  - reactivity
+  - fundamentals
+  - core
+version: '1.0'
+---
+
+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)

src/routes/concepts/understanding-jsx.mdx → old pages/concepts/understanding-jsx.mdx

@@ -23,15 +23,15 @@ This provides a concise and readable way to create and represent components.
 
 Solid was designed to align closely with HTML standards.
 
-```jsx
+```tsx
 const element = <h1>I'm JSX!!</h1>
 ```
 
 It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools.
 Solid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements.
 This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`):
 
-```jsx
+```tsx
 const Component = () => {
 	const animal = { breed: "cat", name: "Midnight" }
 
@@ -54,7 +54,7 @@ This updates only the necessary parts of the DOM when changes occur in the under
 
 Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element.
 
-:::advanced
+:::note
 When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file.
 Static elements are processed differently from dynamic ones, which might change based on data or user actions.
 For dynamic elements, special markers are added for better handling during rendering.
@@ -71,7 +71,7 @@ Self-closing tags are a must in JSX.
 Unlike in HTML, where elements like `<input>`, `<img>`, or `<br>` don't require explicit closure, JSX requires consistent self-closing tags.
 This helps to avoid potential rendering issues.
 
-```jsx
+```tsx
 <img src="./image-here.png" />
 ```
 
@@ -93,23 +93,25 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
   (**Note:** When using ESLint, you will get a warning if you use lowercase.)
 - In cases where you can dynamically specify a value, you can replace the `"` and `"` with curly braces (`{ }`):
 
-```jsx
+```tsx
 <button class="myClass" onClick={handleClick}>
 	Click me!
 </button>
 ```
 
-    	:::note
-    	  If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
+:::note
+
+If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).
 
-```jsx
+```tsx
 <button style={{
 	color: 'red',
 	font-size: '2rem',
 	}}>
   Click me!
 </button>
 ```
+
 :::
 
 ### JSX properties (props)
@@ -132,10 +134,12 @@ They connect the component with the data it requires, for seamless data flows an
   This results in components that react in real-time to data changes.
 
 :::note
+
 Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
 This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
 
 When order influences an element's behavior, users must define the expressions in the order that the element is expected.
+
 :::
 
 For how to use props effectively in Solid, explore the [props page](/concepts/components/props).

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",
@@ -24,6 +24,7 @@
 		"@solid-primitives/marker": "^0.2.2",
 		"@solid-primitives/media": "^2.3.3",
 		"@solid-primitives/platform": "^0.2.1",
+		"@solid-primitives/storage": "^4.3.3",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
 		"@solidjs/start": "^1.2.0",

src/middleware/legacy-routes-redirect.ts

@@ -165,7 +165,7 @@ const LEGACY_ROUTES = {
 	"/guides/how-to-guides/routing-in-solid/solid-router":
 		"/routing/installation-and-setup",
 	"/guides/tutorials/getting-started-with-solid/installing-solid":
-		"/quick-start",
+		"/getting-started/quick-start",
 	"/references/concepts/reactivity": "/concepts/intro-to-reactivity",
 	"/references/concepts/reactivity/tracking":
 		"/concepts/intro-to-reactivity#subscribers",
@@ -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/basics.mdx

@@ -0,0 +1,110 @@
+---
+title: "Basics of Components"
+order: 1
+---
+
+Components are the **fundamental building blocks** of Solid applications.  
+A component is a **JavaScript function that returns JSX**.
+This allows you to create encapsulated pieces of UI that can manage their own state and behavior.
+
+## Your First Component
+
+A component starts as a plain JavaScript function, defined by either a function declaration or an arrow function:
+
+```tsx
+// Greeting.jsx
+export function Greeting() {
+  return <div>Hello, Solid!</div>;
+}
+
+export const Greeting = () => {
+  return <div>Hello, Solid!</div>;
+};
+```
+
+These functions can be used in other components by importing them and using their names like HTML tags:
+
+```tsx
+// App.tsx
+import { Greeting } from './Greeting';
+
+function App() {
+  return (
+    <div>
+      <Greeting />
+    </div>
+  );
+}
+```
+
+### Passing Props
+
+Props, short for properties, let you pass data from a parent component to a child component.
+They are passed as attributes on the component tag and received as an object in the component function.
+
+```tsx
+//Greeting.tsx
+export function Greeting(props) {
+  return <div>Hello, {props.name}!</div>;
+}
+
+// App.tsx
+import { Greeting } from './Greeting';
+
+function App() {
+  return (
+    <div>
+      <Greeting name="Solid" />
+    </div>
+  );
+}
+```
+
+To learn more about props, see the next section: [Passing Data with Props](/components/props).
+
+### Composing Components
+
+Components can be composed together to build more complex UIs. 
+You can use one component inside another, passing props as needed.
+
+```tsx
+// App.tsx
+import { Greeting } from './Greeting';
+
+function App() {
+  return (
+    <div>
+      <Greeting name="Solid" />
+      <Greeting name="World" />
+    </div>
+  );
+}
+```
+
+## Component lifecycles
+
+Components in Solid have a lifecycle that includes mounting, updating, and unmounting phases.
+
+1. **Mounting**: When the component is being created and inserted into the DOM. 
+It occurs once in the component's lifecycle.
+2. **Updating**: The component's state or props change, causing it to re-render. Solid optimizes updates to ensure minimal re-rendering.
+3. **Unmounting**: The component is removed from the DOM. 
+Cleanup tasks, such as cancelling network requests or removing event listeners, should be performed here.
+
+There are certain lifecycle helpers available in Solid to manage these phases more easily, such as `onMount`, `onCleanup`, and `createEffect`.
+
+```tsx
+import { onMount, onCleanup } from "solid-js";
+
+function Timer() {
+  let interval;
+
+  onMount(() => {
+    interval = setInterval(() => console.log("tick"), 1000);
+  });
+
+  onCleanup(() => clearInterval(interval));
+
+  return <p>Timer running...</p>;
+}
+```

src/routes/components/data.json

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

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"
+---
+