Merge branch 'main' into improve-show-2

Author: kodiakhq[bot]

src/routes/concepts/stores.mdx

@@ -347,15 +347,21 @@ setStore("users", 3, "loggedIn" , (loggedIn) => !loggedIn)
 
 ### Filtering values
 
-In scenarios where you want to update elements in an array based on a specific condition, you can pass a function as an argument.
-This function will act as a filter, allowing you to select elements that satisfy the condition.
-It receives the old value and index as arguments, providing the flexibility to make conditional updates.
+To update elements in an array based on specific conditions, you can pass a function as an argument.
+This function acts as a filter, receiving the old value and index, and gives you the flexibility to apply logic that targets specific cases.
+This might include using methods like `.startsWith()`, `includes()`, or other comparison techniques to determine which elements should be updated.
 
 ```jsx
+// update users with username that starts with "t"
 setStore("users", (user) => user.username.startsWith("t"), "loggedIn", false)
-```
 
-In addition to [`.startsWith`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith), you can use other array methods like [`.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) to filter for the values that you need.
+// update users with location "Canada"
+setStore("users", (user) => user.location == "Canada" , "loggedIn", false)
+
+// update users with id 1, 2 or 3 
+let ids = [1,2,3] 
+setStore("users", (user) => ids.includes(user.id) , "loggedIn", false)
+```
 
 ## Modifying objects
 

src/routes/reference/reactive-utilities/untrack.mdx

@@ -20,7 +20,7 @@ export function Component(props) {
 It is not necessary to manually untrack values that are suppose to serve as a default or initial value to a signal. Even with the linter configured to enforce tracking, the linter will accept it when a `prop` is prefixed with `default` or `initial` as it is a common pattern to use them as such.
 
 
-```tsx tab title="initialValue" {4}
+```tsx tab title="initialValue" {5}
 // component.tsx
 import { createSignal } from "solid-js"
 
@@ -32,7 +32,7 @@ export function Component(props) {
 }
 ```
 
-```tsx tab title="defaultValue" {4}
+```tsx tab title="defaultValue" {5}
 // component.tsx
 import { createSignal } from "solid-js"
 

src/routes/solid-router/reference/data-apis/use-submissions.mdx

@@ -91,7 +91,7 @@ When the form is submitted, the `submission` object will be updated with the new
 This allows you to provide feedback to the user that the action is in progress.
 Once the action is complete, the `pending` property will be set to `false` and the `result` property will be updated with final value.
 
-```tsx tab title="TypeScript" {5,12-19}
+```tsx tab title="TypeScript" {6,13-20}
 // component.tsx
 import { Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
@@ -122,7 +122,7 @@ function Component() {
 }
 ```
 
-```tsx tab title="JavaScript" {5,12-19}
+```tsx tab title="JavaScript" {6,13-20}
 // component.jsx
 import { Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";

src/routes/solid-start/guides/data-fetching.mdx

@@ -64,7 +64,7 @@ To show a loading UI during data-fetching:
 1. Import [`Suspense`](/reference/components/suspense) from `solid-js`.
 2. Wrap your data rendering in `<Suspense>`, and use the `fallback` prop to show a component during data fetching.
 
-```tsx tab title="TypeScript" {13} {15}
+```tsx tab title="TypeScript" {14} {16}
 // src/routes/index.tsx
 import { Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -86,7 +86,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {13} {15}
+```jsx tab title="JavaScript" {14} {16}
 // src/routes/index.jsx
 import { Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -115,7 +115,7 @@ To show a fallback UI if the data-fetching fails:
 1. Import [`ErrorBoundary`](/reference/components/error-boundary) from `solid-js`.
 2. Wrap the data rendering in `<ErrorBoundary>`, and use the `fallback` prop to show a component if an error occurs.
 
-```tsx tab title="TypeScript" {13} {17}
+```tsx tab title="TypeScript" {14} {18}
 // src/routes/index.tsx
 import { ErrorBoundary, Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -139,7 +139,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {13} {17}
+```jsx tab title="JavaScript" {14} {18}
 // src/routes/index.jsx
 import { ErrorBoundary, Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -171,7 +171,7 @@ Data fetching can be optimized during user navigation by preloading the data:
 2. Run your query inside the `preload` function.
 3. Use the query as usual in your component.
 
-```tsx tab title="TypeScript" {9-11}
+```tsx tab title="TypeScript" {10-12}
 // src/routes/index.tsx
 import { ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
@@ -197,7 +197,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {9-11}
+```jsx tab title="JavaScript" {10-12}
 // src/routes/index.jsx
 import { ErrorBoundary } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -227,7 +227,7 @@ export default function Page() {
 
 When creating a query that accepts parameters, define your query function to take any number of arguments:
 
-```tsx tab title="TypeScript" {4} {10} {15}
+```tsx tab title="TypeScript" {5} {11} {16}
 // src/routes/posts/[id]/index.tsx
 import { ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
@@ -254,7 +254,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {4} {10} {15}
+```jsx tab title="JavaScript" {5} {11} {16}
 // src/routes/posts/[id]/index.jsx
 import { ErrorBoundary } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -285,7 +285,7 @@ export default function Page() {
 
 To safely interact with your database or ORM in a query, ensure it's server-only by adding [`"use server"`](/solid-start/reference/server/use-server) as the first line of your query:
 
-```tsx tab title="TypeScript" {6-7}
+```tsx tab title="TypeScript" {7-8}
 // src/routes/index.tsx
 import { For, ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
@@ -312,7 +312,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {6-7}
+```jsx tab title="JavaScript" {7-8}
 // src/routes/index.jsx
 import { For, ErrorBoundary } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
@@ -343,7 +343,7 @@ export default function Page() {
 
 To fetch data only on the client, use the [`createResource`](/reference/basic-reactivity/create-resource) primitive:
 
-```tsx tab title="TypeScript" {4-7}
+```tsx tab title="TypeScript" {5-8} {13}
 // src/routes/index.tsx
 import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
 
@@ -364,7 +364,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {4-7}
+```jsx tab title="JavaScript" {5-8} {13}
 // src/routes/index.jsx
 import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
 

src/routes/solid-start/guides/data-mutation.mdx

@@ -62,7 +62,7 @@ export default function Page() {
 
 To pass additional arguments to your action, use the `with` method:
 
-```tsx tab title="TypeScript" {15}
+```tsx tab title="TypeScript" {4} {15}
 // src/routes/index.tsx
 import { action } from "@solidjs/router";
 
@@ -85,7 +85,7 @@ export default function Page() {
 }
 ```
 
-```jsx tab title="JavaScript" {15}
+```jsx tab title="JavaScript" {4} {15}
 // src/routes/index.jsx
 import { action } from "@solidjs/router";
 

src/routes/solid-start/guides/security.mdx

@@ -56,7 +56,7 @@ export default createMiddleware({
 });
 ```
 
-```tsx tab title="entry-server.tsx" {6}
+```tsx tab title="entry-server.tsx" {7}
 // src/entry-server.tsx
 // @refresh reload
 import { createHandler, StartServer } from "@solidjs/start/server";

src/solidbase-theme/Layout.tsx

@@ -7,14 +7,17 @@ import { I18nProvider } from "~/i18n/i18n-context";
 import { Title } from "@solidjs/meta";
 import { useThemeListener } from "@kobalte/solidbase/client";
 import { usePace } from "@kobalte/solidbase/default-theme/pace.js";
+import { useProjectTitle } from "~/ui/use-project-title";
 
 export default function (props: RouteSectionProps) {
 	useThemeListener();
 	usePace();
 
+	const projectTitle = useProjectTitle();
+
 	return (
 		<I18nProvider>
-			<Title>Solid Docs</Title>
+			<Title>{projectTitle()}</Title>
 			<ErrorBoundary fallback={() => <NotFound />}>
 				<Layout>{props.children}</Layout>
 			</ErrorBoundary>

src/styles/expressive-code.css

@@ -50,7 +50,7 @@ html .expressive-code-overrides .expressive-code .copy button div {
 	--tmLineBrdCol: hsl(222.77deg 38.21% 51.76% / 55.57%);
 }
 
-html[data-theme="dark"].dark
+html[data-theme="dark"]
 	.expressive-code-overrides
 	.expressive-code
 	.ec-line.mark {

src/ui/docs-layout.tsx

@@ -5,6 +5,7 @@ import { coreEntries } from "solid:collection";
 import { Pagination } from "~/ui/pagination";
 import { EditPageLink } from "./edit-page-link";
 import { PageIssueLink } from "./page-issue-link";
+import { useProjectTitle } from "./use-project-title";
 
 interface DocsLayoutProps {
 	entries: typeof coreEntries;
@@ -13,6 +14,7 @@ interface DocsLayoutProps {
 
 export const DocsLayout = (props: DocsLayoutProps) => {
 	const location = useLocation();
+	const projectTitle = useProjectTitle();
 
 	const collection = () =>
 		location.pathname.includes("/reference/")
@@ -40,7 +42,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 		<Show when={props.entries} keyed>
 			<>
 				<Show when={titles()?.title} fallback={<Title>SolidDocs</Title>}>
-					{(title) => <Title>{`${title()} - SolidDocs`}</Title>}
+					{(title) => <Title>{`${title()} - ${projectTitle()}`}</Title>}
 				</Show>
 				<div id="rr" class="flex relative justify-center">
 					<article class="w-fit overflow-hidden pb-16 lg:px-5 expressive-code-overrides lg:max-w-none">

src/ui/not-found.tsx

@@ -2,11 +2,14 @@ import { Title } from "@solidjs/meta";
 import { Layout } from "./layout";
 import { HttpStatusCode } from "@solidjs/start";
 import { A } from "~/ui/i18n-anchor";
+import { useProjectTitle } from "./use-project-title";
 
 export function NotFound() {
+	const projectTitle = useProjectTitle();
+
 	return (
 		<>
-			<Title>404 - SolidDocs</Title>
+			<Title>Not Found - {projectTitle()}</Title>
 			<Layout isError>
 				<HttpStatusCode code={404} />
 				<div class="flex flex-col items-center">

src/ui/use-project-title.ts

@@ -0,0 +1,35 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+import { useMatch } from "@solidjs/router";
+
+const SOLID_START_TITLE = "SolidStart Docs";
+const SOLID_ROUTER_TITLE = "Solid Router Docs";
+const SOLID_META_TITLE = "Solid Meta Docs";
+const SOLID_TITLE = "Solid Docs";
+
+type ProjectTitle =
+	| typeof SOLID_START_TITLE
+	| typeof SOLID_ROUTER_TITLE
+	| typeof SOLID_META_TITLE
+	| typeof SOLID_TITLE;
+
+export function useProjectTitle(): Accessor<ProjectTitle> {
+	const [title, setTitle] = createSignal<ProjectTitle>(SOLID_TITLE);
+
+	const isStart = useMatch(() => "/solid-start/*");
+	const isRouter = useMatch(() => "/solid-router/*");
+	const isMeta = useMatch(() => "/solid-meta/*");
+
+	createEffect(() => {
+		if (isStart()) {
+			setTitle(SOLID_START_TITLE);
+		} else if (isRouter()) {
+			setTitle(SOLID_ROUTER_TITLE);
+		} else if (isMeta()) {
+			setTitle(SOLID_META_TITLE);
+		} else {
+			setTitle(SOLID_TITLE);
+		}
+	});
+
+	return title;
+}