Astro

Name: Astro
Author: owlmeans

ASecurity

How to use @owlmeans/astro — the Astro-side wiring for the OwlMeans browser packages: the head/noscript strings a layout stamps before hydration, the legal-page test that suppresses tracking, and the locale conversion that keeps a default-locale page out of English. Auto-invoked when writing an Astro layout, stamping a tag-manager or consent snippet into a static site, or importing owlHeadScripts, isLegalPath or owlLocale.

3 stars

0 votes

0 copies

0 views

Added 9/22/2026

developmenttypescriptgo

Security Analysis

A100/100

Scanned 9/22/2026

Install to Claude Code

$npx -y skills add owlmeans/common --skill astro --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Astro?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/owlmeans-astro/badge)](https://www.skillsdirectory.com/skills/owlmeans-astro)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

---
name: astro
description: "How to use @owlmeans/astro — the Astro-side wiring for the OwlMeans browser packages: the head/noscript strings a layout stamps before hydration, the legal-page test that suppresses tracking, and the locale conversion that keeps a default-locale page out of English. Auto-invoked when writing an Astro layout, stamping a tag-manager or consent snippet into a static site, or importing owlHeadScripts, isLegalPath or owlLocale."
user-invocable: false
---

# @owlmeans/astro

**Layer:** Web (Astro)
**Install:** `"@owlmeans/astro": "^0.1.18-rc.23"` in `dependencies`

## Why it exists

Astro's model is HTML first and islands second — the opposite of every other consumer of the
OwlMeans browser packages. The parts that must run **before** hydration (the consent defaults, the
tag container) therefore cannot come from a component at all: by the time an island mounts, the
container has been running for hundreds of milliseconds and has already decided what each tag may
do. This package turns those parts into plain strings a layout stamps with `set:html`, plus the two
small conversions between Astro's vocabulary and this framework's.

**Nothing here imports Astro.** That is deliberate — an Astro import would make the package
unusable outside one, and everything it needs is a value the caller already holds.

## Key Exports

| Export | Description |
|--------|-------------|
| `owlHeadScripts(opts?)` | `{ head, noscript }` — everything a page puts in its head, in the one order that works |
| `HeadScripts` | That result shape: `head` is inline `<script>` content, `noscript` is `<body>` content |
| `isLegalPath(pathname, segment?)` | Whether this page must carry no tracking at all |
| `owlLocale(currentLocale, fallback?)` | `Astro.currentLocale` as this framework's locale |
| `GtmOptions` (re-export) | The container options from `@owlmeans/web-gtm` |
| `ConsentOptions` / `ConsentCategory` (re-exports) | The consent options from `@owlmeans/consent` |

## Stamping the head

`owlHeadScripts` composes the consent bootstrap and the tag-manager container in the one order that
makes Consent Mode mean anything — defaults first, container second:

```astro
---
import { owlHeadScripts, isLegalPath } from '@owlmeans/astro'

const isLegalPage = isLegalPath(Astro.url.pathname)
const tags = owlHeadScripts(isLegalPage ? {} : { gtm: { id: SITE.gtmId } })
---
<html lang={locale}>
  <head>
    <script is:inline set:html={tags.head} />
  </head>
  <body>
    {tags.noscript && <noscript set:html={tags.noscript} />}
    <slot />
  </body>
</html>
```

Two rules the shape enforces:

- **Stamp `head` above everything else in `<head>`.** It is generated rather than hand-written
  precisely because the ORDER is the whole point; moving it below another script re-opens the
  window this package exists to close.
- **Pass no `gtm` and it is still the consent defaults.** A site with no tag manager at all still
  wants them on the queue: a stored decision has to reach whatever the page loads later, and a page
  that declared nothing is a page where a later tag sees no state. `noscript` comes back empty in
  that case, so the `<noscript>` element renders only when there is a container to frame.

`consent` options are merged into the container snippet, so a site with its own category set or
storage key passes them here as well as to the dialog — otherwise the inline snippet and the
component disagree about what is being asked.

## Legal pages carry no tracking

A legal page is where a visitor goes to READ what is being collected; collecting there while they
read is the one thing it must not do.

```typescript
isLegalPath('/legal')            // true
isLegalPath('/pl/legal/terms')   // true — with or without a locale prefix
isLegalPath('/legalese')         // false — a page that merely starts with the word is not one
isLegalPath('/about/legal')      // false — the segment must be at the top level
isLegalPath('/policies/privacy', 'policies')   // true — the segment is configurable
```

Feed the result back into `owlHeadScripts`: drop the `gtm` option on a legal page and the page
still declares its consent defaults while loading no container.

## Locale

**`Astro.currentLocale` is `undefined` on a default-locale page, not the default locale.** Feeding
it straight to a component renders English for everyone landing on `/` — including the sites where
`/` is not English.

```typescript
const locale = owlLocale(Astro.currentLocale, 'pl')
```

An empty string is treated the same as `undefined`; a real locale passes through untouched.

## Depends On

- `@owlmeans/consent` — `consentBootstrapScript`, the category model and the storage contract
- `@owlmeans/web-gtm` — `gtmHeadScript`, `gtmNoscriptFrame`

Both are ordinary dependencies, so an Astro site installs this one package and gets the whole head
story. Rendering the dialog itself is separate — that is `@owlmeans/web-consent`, mounted as an
island, or the site's own component over the same store.

## Related

- `consent` — the categories, the storage record and its migration, and why the ordering rule exists
- `web-gtm` — what the container snippet actually emits and how an id is made inert
- `web-consent` — the dialog, the re-open button and the cookie-policy page

Attribution

owlmeans

View source More from owlmeans →

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

--- name: astro description: "How to use @owlmeans/astro — the Astro-side wiring for the OwlMeans browser packages: the head/noscript strings a layout stamps before hydration, the legal-page test that suppresses tracking, and the locale conversion that keeps a default-locale page out of English. Auto-invoked when writing an Astro layout, stamping a tag-manager or consent snippet into a static site, or importing owlHeadScripts, isLegalPath or owlLocale." user-invocable: false --- # @owlmeans/astro **Layer:** Web (Astro) **Install:** `"@owlmeans/astro": "^0.1.18-rc.23"` in `dependencies` ## Why it exists Astro's model is HTML first and islands second — the opposite of every other consumer of the OwlMeans browser packages. The parts that must run **before** hydration (the consent defaults, the tag container) therefore cannot come from a component at all: by the time an island mounts, the container has been running for hundreds of milliseconds and has already decided what each tag may do. This package turns those parts into plain strings a layout stamps with `set:html`, plus the two small conversions between Astro's vocabulary and this framework's. **Nothing here imports Astro.** That is deliberate — an Astro import would make the package unusable outside one, and everything it needs is a value the caller already holds. ## Key Exports | Export | Description | |--------|-------------| | `owlHeadScripts(opts?)` | `{ head, noscript }` — everything a page puts in its head, in the one order that works | | `HeadScripts` | That result shape: `head` is inline `<script>` content, `noscript` is `<body>` content | | `isLegalPath(pathname, segment?)` | Whether this page must carry no tracking at all | | `owlLocale(currentLocale, fallback?)` | `Astro.currentLocale` as this framework's locale | | `GtmOptions` (re-export) | The container options from `@owlmeans/web-gtm` | | `ConsentOptions` / `ConsentCategory` (re-exports) | The consent options from `@owlmeans/consent` | ## Stamping the head `owlHeadScripts` composes the consent bootstrap and the tag-manager container in the one order that makes Consent Mode mean anything — defaults first, container second: ```astro --- import { owlHeadScripts, isLegalPath } from '@owlmeans/astro' const isLegalPage = isLegalPath(Astro.url.pathname) const tags = owlHeadScripts(isLegalPage ? {} : { gtm: { id: SITE.gtmId } }) --- <html lang={locale}> <head> <script is:inline set:html={tags.head} /> </head> <body> {tags.noscript && <noscript set:html={tags.noscript} />} <slot /> </body> </html> ``` Two rules the shape enforces: - **Stamp `head` above everything else in `<head>`.** It is generated rather than hand-written precisely because the ORDER is the whole point; moving it below another script re-opens the window this package exists to close. - **Pass no `gtm` and it is still the consent defaults.** A site with no tag manager at all still wants them on the queue: a stored decision has to reach whatever the page loads later, and a page that declared nothing is a page where a later tag sees no state. `noscript` comes back empty in that case, so the `<noscript>` element renders only when there is a container to frame. `consent` options are merged into the container snippet, so a site with its own category set or storage key passes them here as well as to the dialog — otherwise the inline snippet and the component disagree about what is being asked. ## Legal pages carry no tracking A legal page is where a visitor goes to READ what is being collected; collecting there while they read is the one thing it must not do. ```typescript isLegalPath('/legal') // true isLegalPath('/pl/legal/terms') // true — with or without a locale prefix isLegalPath('/legalese') // false — a page that merely starts with the word is not one isLegalPath('/about/legal') // false — the segment must be at the top level isLegalPath('/policies/privacy', 'policies') // true — the segment is configurable ``` Feed the result back into `owlHeadScripts`: drop the `gtm` option on a legal page and the page still declares its consent defaults while loading no container. ## Locale **`Astro.currentLocale` is `undefined` on a default-locale page, not the default locale.** Feeding it straight to a component renders English for everyone landing on `/` — including the sites where `/` is not English. ```typescript const locale = owlLocale(Astro.currentLocale, 'pl') ``` An empty string is treated the same as `undefined`; a real locale passes through untouched. ## Depends On - `@owlmeans/consent` — `consentBootstrapScript`, the category model and the storage contract - `@owlmeans/web-gtm` — `gtmHeadScript`, `gtmNoscriptFrame` Both are ordinary dependencies, so an Astro site installs this one package and gets the whole head story. Rendering the dialog itself is separate — that is `@owlmeans/web-consent`, mounted as an island, or the site's own component over the same store. ## Related - `consent` — the categories, the storage record and its migration, and why the ordering rule exists - `web-gtm` — what the container snippet actually emits and how an id is made inert - `web-consent` — the dialog, the re-open button and the cookie-policy page