Switch to SolidBase callout syntax (solidjs#1131)

amirhhashemi · web-flow · commit 1376133f89ce · 2025-03-18T17:17:50.000-07:00
diff --git a/src/routes/concepts/context.mdx b/src/routes/concepts/context.mdx
@@ -60,9 +60,9 @@ const Provider = (props) => (
 );
 ```
 
-<Callout type="tip" title="Complex Types">
+:::tip[Complex Types]
 When passing multiple values (as an `array` or `object`), it is recommended to use a [store](/reference/component-apis/create-context#usage).
-</Callout>
+:::
 
 ## Consuming context
 
@@ -257,9 +257,9 @@ function Child() {
 
 If no default value is passed to `createContext`, it is possible for `useContext` to return `undefined`.
 
-<Callout type="info" title="More on default values">
+:::info[More on default values]
 Read more about default values in the [`createContext`](/reference/component-apis/create-context) entry.
-</Callout>
+:::
 
 Because of this, if an initial value was not passed to `createContext`, the TS type signature of `useContext` will indicate that
 the value returned might be `undefined` (as mentioned above). 
diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx
@@ -4,11 +4,9 @@ order: 5
 mainNavExclude: true
 ---
 
-<Callout type="info" title="Note">
-
+:::info[Note]
 This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3).
-
-</Callout>
+:::
 
 [Tailwind CSS](https://tailwindcss.com/) is an on-demand utility CSS library that integrates seamlessly with Solid as a built-in PostCSS plugin. 
 
diff --git a/src/routes/reference/component-apis/create-context.mdx b/src/routes/reference/component-apis/create-context.mdx
@@ -13,9 +13,10 @@ The default value is used when no Provider is found above in the hierarchy.
 
 To avoid reinstatiating a new context when Hot-Module Replacement (HMR) occurs, it is recommended to use `createContext` in its own module (file).
 
-<Callout type="danger" title="Hot-Module Replacement">
-When using HMR, the context is lost when the module is reloaded. Which will cause an error to be thrown as `useContext` will try to access it while it is still reloading.
-</Callout>
+:::danger[Hot-Module Replacement]
+When using HMR, the context is lost when the module is reloaded.
+Which will cause an error to be thrown as `useContext` will try to access it while it is still reloading.
+:::
 
 
 For example:
diff --git a/src/routes/reference/jsx-attributes/attr.mdx b/src/routes/reference/jsx-attributes/attr.mdx
@@ -9,7 +9,7 @@ Useful for Web Components where you want to set attributes.
 <my-element attr:status={props.status} />
 ```
 
-<Callout type="info" title="Strong-Typing Custom Attributes">
-	Type definitions are required when using TypeScript.
-	See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
-</Callout>
+:::info[Strong-Typing Custom Attributes]
+Type definitions are required when using TypeScript.
+See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+:::
diff --git a/src/routes/reference/jsx-attributes/bool.mdx b/src/routes/reference/jsx-attributes/bool.mdx
@@ -20,7 +20,7 @@ This attribute is most useful for Web Components.
 
 ```
 
-<Callout type="info" title="Strong-Typing Custom Boolean Attributes">
-	Type definitions are required when using TypeScript.
-	See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
-</Callout>
+:::info[Strong-Typing Custom Boolean Attributes]
+Type definitions are required when using TypeScript.
+See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+:::
diff --git a/src/routes/reference/jsx-attributes/prop.mdx b/src/routes/reference/jsx-attributes/prop.mdx
@@ -9,7 +9,7 @@ Forces the prop to be treated as a property instead of an attribute.
 <div prop:scrollTop={props.scrollPos + "px"} />
 ```
 
-<Callout type="info" title="Strong-Typing Custom Properties">
-	Type definitions are required when using TypeScript.
-	See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
-</Callout>
+:::info[Strong-Typing Custom Properties]
+Type definitions are required when using TypeScript.
+See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+:::
diff --git a/src/routes/reference/jsx-attributes/use.mdx b/src/routes/reference/jsx-attributes/use.mdx
@@ -35,7 +35,7 @@ declare module "solid-js" {
 }
 ```
 
-<Callout type="caution" title="Limitations">
+:::caution[Limitations]
 Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements).
 Directives are not forwarded and **won't work in user defined components**, such as `<MyComponent use:myinput={[..]}/>` [see also](https://github.com/solidjs/solid/discussions/722)
-</Callout>
+:::
diff --git a/src/routes/solid-router/concepts/actions.mdx b/src/routes/solid-router/concepts/actions.mdx
@@ -43,11 +43,9 @@ In this example, the `echo` action simulates a fetch call with a 1 second delay
 The `echo` action will act as a backend, however, it can be substituted for any API provided it can be run on the client.
 Typically, route actions are used with some sort of solution like fetch or GraphQL.
 
-<Callout type="tip">
-
+:::tip
 In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`](/solid-start/reference/server/use-server) directive to leverage server-side caching.
-
-</Callout>
+:::
 
 ### Using actions
 
diff --git a/src/routes/solid-router/reference/data-apis/action.mdx b/src/routes/solid-router/reference/data-apis/action.mdx
@@ -59,11 +59,9 @@ const deleteTodo = action(async (id: number) => {
 
 ```
 
-<Callout type="tip">
-
+:::tip
 In [SolidStart](/solid-start) apps, it's recommended to use the [`"use server"`](/solid-start/reference/server/use-server) directive to leverage server-side caching.
-
-</Callout>
+:::
 
 ## Notes of `<form>` implementation and SSR
 
diff --git a/src/routes/solid-router/reference/data-apis/use-action.mdx b/src/routes/solid-router/reference/data-apis/use-action.mdx
@@ -13,10 +13,9 @@ const updateName = useAction(updateNameAction);
 const result = updateName("John Wick");
 ```
 
-<Callout type="info" title="Note">
-	`useAction` requires client-side JavaScript and is not progressively
-	enhanceable.
-</Callout>
+:::info[Note]
+`useAction` requires client-side JavaScript and is not progressively enhanceable.
+:::
 
 ## Parameters
 
diff --git a/src/routes/solid-router/reference/data-apis/use-submission.mdx b/src/routes/solid-router/reference/data-apis/use-submission.mdx
@@ -24,11 +24,9 @@ function Component() {
 }
 ```
 
-<Callout type="info">
-
+:::info
 Learn more about actions in the [`action`](/solid-router/reference/data-apis/action) docs.
-
-</Callout>
+:::
 
 ## Filtering Submissions
 
diff --git a/src/routes/solid-router/reference/data-apis/use-submissions.mdx b/src/routes/solid-router/reference/data-apis/use-submissions.mdx
@@ -5,9 +5,9 @@ title: useSubmissions
 This helper is used to handle form submissions and can provide optimistic updates while actions are in flight as well as pending state feedback.
 This method will return an iterable of all submitted actions while its component is mounted. With an optional second parameter for a filter function.
 
-<Callout type="tip">
+:::tip
 If you only care for the latest submission, you can use the [`useSubmission`](/solid-router/reference/data-apis/use-submission) helper.
- </Callout>
+:::
 
 It's important to note that it requires the form method to be **post** otherwise it will trigger a browser navigation and will not work.
 
@@ -42,12 +42,9 @@ function Component() {
 }
 ```
 
-<Callout type="info">
-
+:::info
 To trigger a submission, [actions](https://docs.solidjs.com/) can be used.
-
-
-</Callout>
+:::
 
 ## Filtering Submissions
 
diff --git a/src/routes/solid-router/reference/response-helpers/redirect.mdx b/src/routes/solid-router/reference/response-helpers/redirect.mdx
@@ -14,9 +14,10 @@ Other useful redirect codes:
 | `307` | Temporary Redirect |
 | `308` | Permanent redirect |
 
-<Callout type="tip" name="Redirect Methods">
-307 and 308 won't allow the browser to change the method of the request. If you want to change the method, you should use 301 or 302.
-</Callout>
+:::tip[Redirect Methods]
+307 and 308 won't allow the browser to change the method of the request.
+If you want to change the method, you should use 301 or 302.
+:::
 
 A common use-case for throwing a redirect is when a user is not authenticated and needs to be sent to the login page or another public route.
 
diff --git a/src/routes/solid-router/reference/response-helpers/revalidate.mdx b/src/routes/solid-router/reference/response-helpers/revalidate.mdx
@@ -4,9 +4,9 @@ title: revalidate
 
 Revalidate will receive the either a cache key or an array of cache keys and invalidate those queries.
 
-<Callout type="tip" name="Firing Queries Again">
+:::tip[Firing Queries Again]
 If you intend to re-fire the queries immediately, check the [reload](/solid-router/reference/response-helpers/reload) helper.
-</Callout>
+:::
 
 The code below will revalidate the `getTodo` query with the cache key.
 
diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
@@ -8,11 +8,9 @@ Since SolidStart itself provides minimal data-fetching APIs, most functionality
 
 This guide provides practical examples of common data-fetching tasks using these primitives.
 
-<Callout type="info" title="Note">
-
+:::info[Note]
 For detailed API information, refer to the [Solid](/) and [Solid Router](/solid-router) documentation.
-
-</Callout>
+:::
 
 Here's a simple example:
 
@@ -438,8 +436,6 @@ export default function Page() {
 
 See the [`createResource`](/reference/basic-reactivity/create-resource) API reference for more information.
 
-<Callout type="info" title="Advanced Data Handling">
-
+:::info[Advanced Data Handling]
 For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview).
-
-</Callout>
+:::
diff --git a/src/routes/solid-start/guides/data-mutation.mdx b/src/routes/solid-start/guides/data-mutation.mdx
@@ -423,11 +423,9 @@ export default function Page() {
 </div>
 </TabsCodeBlocks>
 
-<Callout type="info" title="Multiple Submissions">
-
+:::info[Multiple Submissions]
 If you want to display optimistic UI for multiple concurrent submissions, you can use the [`useSubmissions`](/solid-router/reference/data-apis/use-submissions) primitive.
-
-</Callout>
+:::
 
 ## Redirecting
 
diff --git a/src/routes/solid-start/reference/server/create-middleware.mdx b/src/routes/solid-start/reference/server/create-middleware.mdx
@@ -9,12 +9,10 @@ There are two lifecycle events available: `onRequest` and `onBeforeResponse`.
 - The `onRequest` event is triggered at the beginning of the request lifecycle, before the request is handled by the route handler.
 - The `onBeforeResponse` event is triggered after a request has been processed by the route handler but before the response is sent to the client.
 
-<Callout type="info" title="Note">
-
+:::info[Note]
 SolidStart will only execute the middleware functions if the path to the middleware file is configured within `app.config.ts` using the `middleware` option.
 This file must export the configuration using `export default`.
-
-</Callout>
+:::
 
 Learn more about middleware in the [Middleware documentation](/solid-start/advanced/middleware).
 

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ declare module "solid-js" {`
`35`	`35`	`}`
`36`	`36`	```
`37`	`37`
`38`		`-<Callout type="caution" title="Limitations">`
	`38`	`+:::caution[Limitations]`
`39`	`39`	`Directives only work with native HTML elements (HTML/SVG/MathML/Custom Elements).`
`40`	`40`	Directives are not forwarded and won't work in user defined components, such as `<MyComponent use:myinput={[..]}/>` [see also](https://github.com/solidjs/solid/discussions/722)
`41`		`-</Callout>`
	`41`	`+:::`