
Security News
Node.js Moves Toward Stable TypeScript Support with Amaro 1.0
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
@astropub/context
Advanced tools
Astro Context is a library designed to simplify the creation and sharing of state and data across components in Astro.
npm install @astropub/context
Create a new context by importing createContext
from the Astro Context library.
// src/context/sections.ts
import { createContext } from '@astropub/context'
const [ Provider, getContext ] = createContext<{ level: number }>()
Wrap a component with a Provider
to set its context.
---
// src/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>
Use getContext
to access the current context in other components.
---
// src/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} {...props}>
<slot />
</h3>
Use these components together to create nested sections with headings that dynamically update their levels based on the context.
---
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>
This will produce the following 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>
Enjoy!
FAQs
Create and share context across Astro components
The npm package @astropub/context receives a total of 310 weekly downloads. As such, @astropub/context popularity was classified as not popular.
We found that @astropub/context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.