### Markdown Page Frontmatter

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

Example of frontmatter in a Markdown file for an Astro page. It shows how to set the page title, description, and layout for SEO and structure.

```markdown
---
title: Example title
description: Really cool docs example that uses Astro
layout: ../../layouts/MainLayout.astro
---

# Page content...
```

--------------------------------

### Install zustand-rx

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/src/md-docs/introduction.md

Installs the zustand-rx package along with its dependencies, Zustand and RxJS, using either npm or yarn.

```bash
npm install zustand-rx zustand rxjs
```

```bash
yarn add zustand-rx zustand rxjs
```

--------------------------------

### Install zustand-rx

Source: https://github.com/patdx/zustand-rx/blob/main/libs/zustand-rx/README.md

Installs the zustand-rx package along with its peer dependencies, zustand and rxjs, using npm, yarn, or pnpm.

```bash
npm install zustand-rx zustand rxjs
yarn add zustand-rx zustand rxjs
pnpm add zustand-rx zustand rxjs
```

--------------------------------

### Customize Accent Color in CSS

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

Example of how to change the theme's accent color in the `theme.css` file. It demonstrates using CSS variables and provides an alternative direct hex color value.

```css
/* src/styles/theme.css */
:root {
  color-scheme: light;
-  --theme-accent: hsla(var(--color-blue), 1);
+  --theme-accent: hsla(var(--color-red), 1);   /* or: hsla(#FF0000, 1); */
```

--------------------------------

### Create Astro Docs Site

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

Command to create a new Astro project using the 'docs' template. This sets up a basic documentation site structure.

```bash
npm create astro@latest -- --template docs
```

--------------------------------

### Configure Sidebar Navigation

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

TypeScript configuration for the sidebar navigation in `src/config.ts`. It shows how to define navigation links and headers, including support for multiple languages.

```typescript
export const SIDEBAR = {
  en: [
    { text: 'Section Header', header: true },
    { text: 'Introduction', link: 'en/introduction' },
    { text: 'Page 2', link: 'en/page-2' },
    { text: 'Page 3', link: 'en/page-3' },

    { text: 'Another Section', header: true },
    { text: 'Page 4', link: 'en/page-4' },
  ],
};
```

--------------------------------

### Modify Default Redirect for Spanish

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

This code snippet shows how to change the default redirect path in `src/pages/index.astro` to point to the Spanish introduction page (`/es/introduction`) instead of the English one. This is done within a `<script>` tag to handle client-side redirection when the site is first loaded.

```html
<script>
- window.location.pathname = `/en/introduction`;
+ window.location.pathname = `/es/introduction`;
</script>
```

--------------------------------

### Add Spanish Language Directory Structure

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

This snippet shows how to extend the Astro project's directory layout to include support for a new language, specifically Spanish ('es'), by adding a new language folder within the `src/pages` directory. This is a foundational step for multi-language content management.

```diff
 📂 src/pages
 ┣ 📂 en
 ┃ ┣ 📜 page-1.md
 ┃ ┣ 📜 page-2.md
 ┃ ┣ 📜 page-3.astro
+ ┣ 📂 es
+ ┃ ┣ 📜 page-1.md
+ ┃ ┣ 📜 page-2.md
+ ┃ ┣ 📜 page-3.astro
```

--------------------------------

### Add Spanish Language Sidebar Configuration

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

This snippet illustrates how to update the `SIDEBAR` configuration in `src/config.ts` to include entries for the Spanish language ('es'). It shows how to define section headers and links for the table of contents, ensuring that content is correctly organized and accessible for each supported language.

```typescript
// src/config.ts
export const SIDEBAR = {
  en: [
    { text: 'Section Header', header: true, },
    { text: 'Introduction', link: 'en/introduction' },
    // ...
  ],
+  es: [
+    { text: 'Encabezado de sección', header: true, },
+    { text: 'Introducción', link: 'es/introduction' },
+    // ...
+  ],
};

// ...
```

--------------------------------

### Tagging New Versions with Nx

Source: https://github.com/patdx/zustand-rx/blob/main/README.md

Commands to tag new versions for the workspace using Nx. These commands allow for major, premajor, and prerelease versioning with optional pre-release identifiers.

```bash
nx run workspace:version --release-as=premajor --preid=beta --dry-run
nx run workspace:version --release-as=major --dry-run
nx run workspace:version --release-as=prerelease --preid=beta --dry-run
```

--------------------------------

### Subscribe to Zustand Store with RxJS

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/src/md-docs/introduction.md

Demonstrates how to use the `toStream` function from `zustand-rx` to convert a Zustand store into an RxJS observable. It shows setting up a Zustand store with middleware and subscribing to a specific state property, with an option to fire immediately.

```typescript
import { toStream } from 'zustand-rx';
import { combine } from 'zustand/middleware';
import create from 'zustand/vanilla';

// NOTE: alternatively, the React version also seems to work:
// import create from 'zustand';

const store = create(
  combine({ bears: 0 }, (set) => ({
    increase: (by: number) => set((state) => ({ bears: state.bears + by }))
  }))
);

// type is Observable<number>
const bears$ = toStream(store, (state) => state.bears, {
  fireImmediately: true,
});
```

--------------------------------

### Configure Known Languages in Astro

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/README.md

This code demonstrates how to add a new language, Spanish ('es'), to the `KNOWN_LANGUAGES` map in the `src/config.ts` file. This configuration is essential for enabling the language switcher in the site header and for the Astro build process to recognize the new language.

```typescript
// src/config.ts
export const KNOWN_LANGUAGES = {
  English: 'en',
+  Spanish: 'es',
};
```

--------------------------------

### Subscribe to Zustand Store with RxJS

Source: https://github.com/patdx/zustand-rx/blob/main/libs/zustand-rx/README.md

Demonstrates how to use the `toStream` function from `zustand-rx` to convert a Zustand store's state slice into an RxJS observable. It shows how to initialize a store, select a state property, and configure the observable with `fireImmediately` for immediate emission.

```typescript
import { toStream } from 'zustand-rx';
import { combine } from 'zustand/middleware';
import create from 'zustand/vanilla';

// NOTE: alternatively, the React version also seems to work:
// import create from 'zustand';

const store = create(
  combine({ bears: 0 }, (set) => ({
    increase: (by: number) => set((state) => ({ bears: state.bears + by })),
  })),
);

// type is Observable<number>
const bears$ = toStream(store, (state) => state.bears, {
  fireImmediately: true,
});
```

--------------------------------

### toStream Function in TypeScript

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/src/md-docs/modules.md

The toStream function creates an RxJS observable from a Zustand selector. It is inspired by the MobX toStream API and allows for reactive state management. It accepts the store, an optional selector function, and an optional configuration object with equalityFn and fireImmediately options.

```TypeScript
function toStream<TStore, TState, TSlice>(store: TStore, selector?: (value: TState) => TSlice, { equalityFn, fireImmediately }?: { equalityFn?: (previous: TSlice, current: TSlice) => boolean; fireImmediately?: boolean; }): Observable<TSlice>;
```

--------------------------------

### StateValueOf Type Alias in TypeScript

Source: https://github.com/patdx/zustand-rx/blob/main/apps/zustand-rx-web/src/md-docs/modules.md

The StateValueOf type alias extracts the state type from a Zustand StoreApi. It is defined in the zustand-rx library.

```TypeScript
type StateValueOf<TStore> = TStore extends StoreApi<infer TState> ? TState : never;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.