fix broken jsx

Author: LadyBluenotes

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).

src/routes/getting-started/counter.mdx

@@ -35,7 +35,7 @@ const component = () => {
 
 ## Solid's JSX Rules
 
-### 1. Return a Single Root Element
+### Return a Single Root Element
 
 Each component must return a single root element.
 Since JSX maintains the familiar tree-like structure of HTML, having a single root element helps keep the hierarchy clear.
@@ -52,14 +52,13 @@ function App() {
 }
 ```
 
-```advanced
+:::note
 JSX in Solid compiles into structured HTML.
 Static elements are optimized once, while dynamic ones get special markers so Solid can update them efficiently.
 Requiring a single root element keeps the hierarchy consistent and easier to update.
-```
-
+:::
 
-### 2. Close All Tags
+### Close All Tags
 
 All tags must be properly closed.
 This includes self-closing tags like `<img />`, `<input />`, and `<br />`.
@@ -72,7 +71,7 @@ This includes self-closing tags like `<img />`, `<input />`, and `<br />`.
 <img src="image.jpg" alt="Description">
 ```
 
-### 3. Properties vs Attributes
+### Properties vs Attributes
 
 In Solid's JSX, you can use both HTML attributes and JSX properties (props) to define element behavior and appearance.
 

src/routes/getting-started/understanding-jsx.mdx

@@ -15,7 +15,7 @@ This makes applications efficient and responsive, even as they grow.
 Solid’s reactivity is built on three key ideas: **signals, subscribers, and tracking scopes**.  
 Together, these create a system where updates are precise, automatic, and efficient.
 
-### Signals: Reactive values
+### Signals
 
 A **signal** is a reactive value container.
 They consist of 2 parts:
@@ -38,7 +38,7 @@ Signals can hold any type of value:
 
 Learn more in the [Signals page](/reactivity/signals).
 
-### Subscribers: Reactive consumers
+### Subscribers
 
 If signals are the **source of truth**, subscribers are the **reactive consumers**.
 
@@ -51,7 +51,7 @@ How subscribers work:
 2. **Dependency tracking** → those signals register the subscriber.
 3. **Response** → when a signal changes, the subscriber re-runs.
 
-### Tracking Scopes: Connecting signals & subscribers
+### Tracking Scopes
 
 A **tracking scope** is the environment where Solid records which signals are being used.
 When a signal is read within a tracking scope, it registers the current subscriber as a dependency.

src/routes/reactivity/basics.mdx

@@ -8,7 +8,6 @@
 		"nesting.mdx",
 		"layouts.mdx",
 		"alternative-routers.mdx",
-		"queries.mdx",
 		"actions.mdx"
 	]
 }