### Install Astro Context

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

Install the Astro Context library using npm. This command should be run in your project's root directory.

```bash
npm install @astropub/context
```

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

### Nested Sections Example

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

Demonstrates how to use nested Section and Heading components to create a hierarchy where heading levels are dynamically determined by the context.

```astro
---
import Section from '../components/Section.astro'
import Heading from '../components/Heading.astro'
---

<Section>
  <Heading>Title</Heading>
  <p>This section uses a heading of level 1.</p>
 
  <Section>
    <Heading>Heading</Heading>
    <p>This section uses a heading of level 2.</p>

    <Section>
      <Heading>Sub-Heading</Heading>
      <p>This section uses a heading of level 3.</p>

      <Section>
        <Heading>Sub-Sub-Heading</Heading>
        <p>This section uses a heading of level 4.</p>
      </Section>
    </Section>
  </Section>
</Section>
```

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

### Prepare a Provider Component

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

Wrap a component with the `Provider` to set the context for its children. The context value is passed as a prop to the Provider.

```astro
---
/** @file ~/components/Section.astro */

import { Provider, getContext } from '../context/section.ts'

// set the current level to be 1 higher, or set it to 1
const level = (getContext()?.level + 1) || 1
---

<Provider level={level}>
  <section>
    <slot />
  </section>
</Provider>
```

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

### Create Context

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

Create a new context with a specific data type using the `createContext` function. This returns a Provider component and a `getContext` function.

```typescript
/** @file ~/context/sections.ts */

import { createContext } from '@astropub/context'

const [ Provider, getContext ] = createContext<{ level: number }>()
```

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

### Access Context in Components

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

Use the `getContext` function to retrieve the current context value within any component nested under a Provider. If no context is found, it defaults to a specified value.

```astro
---
/** @file ~/components/Heading.astro */

import { getContext } from '../context/section.ts'

const context = getContext()

// get the current level or 1
const level = getContext()?.level || 1
---

<h3 aria-level={level} {...Astro.props}>
  <slot />
</h3>
```

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

### Rendered HTML Output

Source: https://raw.githubusercontent.com/astro-community/context/refs/heads/main/packages/context/README.md

The resulting HTML structure generated from the nested Astro components, showing dynamically assigned `aria-level` attributes on `h3` elements.

```html
<section>
  <h3 aria-level="1">Title</h3>
  <p>This section uses a heading of level 1.</p>

  <section>
    <h3 aria-level="2">Heading</h3>
    <p>This section uses a heading of level 2.</p>

    <section>
      <h3 aria-level="3">Sub-Heading</h3>
      <p>This section uses a heading of level 3.</p>

      <section>
        <h3 aria-level="4">Sub-Sub-Heading</h3>
        <p>This section uses a heading of level 4.</p>
      </section>
    </section>
  </section>
</section>
```

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