Docs Updates

src/routes/concepts/effects.mdx → old pages/concepts/effects.mdx

@@ -28,7 +28,7 @@ When the value of `count` changes, the effect is triggered, causing it to run ag
 
 Effects can be set to observe any number of dependencies.
 Dependencies are what allow an effect to track changes and respond accordingly.
-These can include signals, variables, props, context, or any other reactive values.
+These can include signals, props, context, or any other reactive values.
 When any of these change, the effect is notified and will run again to update its state.
 
 Upon initialization, an effect will run _once_, regardless of whether it has any dependencies.

src/routes/concepts/stores.mdx → old pages/concepts/stores.mdx

@@ -3,9 +3,9 @@ title: Stores
 order: 6
 ---
 
-Similar to [signals](/concepts/signals), stores are a state management primitive.
-However, while signals manage a single piece of state, stores create a centralized location to reduce code redundancy.
-Within Solid, these stores can spawn a collection of reactive signals, each corresponding to a particular property which can be useful when working with complex state.
+Stores are a state management primitive that provide a centralized way to handle shared data and reduce redundancy.
+Unlike [signals](/concepts/signals), which track a single value and trigger a full re-render when updated, stores maintain fine-grained reactivity by updating only the properties that change.
+They can produce a collection of reactive signals, each linked to an individual property, making them well-suited for managing complex state efficiently.
 
 ## Creating a store
 
@@ -253,8 +253,10 @@ Instead of relying on discovering individual indices, path syntax introduces sev
 
 ### Appending new values
 
-To append new values to an array in a store, use the setter function with the spread operator (`...`) to create a new array that includes the existing items and the new ones.
-For appending a single element, you can instead leverage the "path syntax" by specifying the array’s length as the index to set.
+To append values to an array in a store, use the setter function with the spread operator (`...`) or the path syntax. Both methods add an element to the array but differ in how they modify it and their reactivity behavior.
+
+The spread operator creates a new array by copying the existing elements and adding the new one, effectively replacing the entire `store.users` array.
+This replacement triggers reactivity for all effects that depend on the array or its properties.
 
 ```jsx
 setStore("users", (otherUsers) => [
@@ -266,9 +268,12 @@ setStore("users", (otherUsers) => [
 		loggedIn: false,
 	},
 ])
+```
 
-// can become
+The path syntax adds the new element by assigning it to the index equal to `store.users.length`, directly modifying the existing array.
+This triggers reactivity only for effects that depend on the new index or properties like `store.users.length`, making updates more efficient and targeted.
 
+```jsx
 setStore("users", store.users.length, {
 	id: 3,
 	username: "michael584",

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

@@ -11,15 +11,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" }
 
@@ -42,7 +42,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.
@@ -59,7 +59,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" />
 ```
 
@@ -81,23 +81,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)
@@ -120,10 +122,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"
+	]
+}

src/routes/guides/routing-and-navigation.mdx → old pages/guides/routing-and-navigation.mdx

@@ -275,8 +275,7 @@ Instead of checking for the presence of a parameter, this allows for more comple
 ```jsx
 import { lazy } from "solid-js";
 import { render } from "solid-js/web";
-import { Router, Route } from "@solidjs/router";
-import type { SegmentValidators } from "./types";
+import { Router, Route, type MatchFilters } from "@solidjs/router";
 
 const User = lazy(() => import("./pages/User"));
 

package.json

@@ -1,35 +1,32 @@
 {
 	"name": "solid-docs-next",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"private": true,
 	"description": "Docs for Solid",
 	"type": "module",
 	"scripts": {
 		"sync": "node scripts/collections/index.mjs",
 		"sync:orama": "pnpm build && node scripts/sync-orama.mjs",
 		"dev": "pnpm sync && vinxi dev",
-		"build": "pnpm sync && pnpm build:sitemap && pnpm build:lunaria && NODE_OPTIONS=\"--max-old-space-size=8192\" vinxi build",
+		"build": "pnpm sync && pnpm build:sitemap && NODE_OPTIONS=\"--max-old-space-size=8192\" vinxi build",
 		"build:sitemap": "node scripts/generateSitemap.js",
 		"start": "vinxi start",
 		"e2e": "npx playwright test",
-		"build:lunaria": "lunaria build",
-		"preview:lunaria": "lunaria preview",
 		"check:lint": "eslint .",
 		"check:types": "tsc --noEmit"
 	},
 	"dependencies": {
 		"@kobalte/core": "^0.13.11",
 		"@kobalte/solidbase": "^0.2.17",
-		"@lunariajs/core": "^0.1.1",
 		"@oramacloud/client": "^2.1.4",
 		"@solid-primitives/event-listener": "^2.4.3",
 		"@solid-primitives/marker": "^0.2.2",
 		"@solid-primitives/media": "^2.3.3",
 		"@solid-primitives/platform": "^0.2.1",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
-		"@solidjs/start": "^1.1.7",
-		"dotenv": "^17.2.1",
+		"@solidjs/start": "^1.2.0",
+		"dotenv": "^17.2.2",
 		"glob": "^11.0.3",
 		"gray-matter": "^4.0.3",
 		"postcss": "^8.5.6",
@@ -39,25 +36,25 @@
 		"solid-js": "^1.9.9",
 		"solid-list": "^0.3.0",
 		"vinxi": "^0.5.7",
-		"zod": "^4.1.5"
+		"zod": "^4.1.8"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.34.0",
+		"@eslint/js": "^9.35.0",
 		"@kobalte/tailwindcss": "^0.9.0",
 		"@orama/crawly": "^0.0.6",
 		"@tailwindcss/typography": "^0.5.16",
-		"@types/node": "^24.3.0",
+		"@types/node": "^24.5.1",
 		"@typescript-eslint/eslint-plugin": "^8.41.0",
-		"@typescript-eslint/parser": "^8.41.0",
+		"@typescript-eslint/parser": "^8.43.0",
 		"autoprefixer": "^10.4.21",
-		"eslint": "^9.34.0",
+		"eslint": "^9.35.0",
 		"eslint-plugin-solid": "^0.14.5",
-		"globals": "^16.3.0",
+		"globals": "^16.4.0",
 		"prettier": "3.6.2",
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.41.0",
+		"typescript-eslint": "^8.43.0",
 		"vite": "^6.3.5"
 	},
 	"engines": {