@mannisto/astro-metadata 1.0.0-alpha.2 → 1.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +79 -36
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Astro Metadata
2
2
 
3
- ![banner](./assets/default/banner.png)
3
+ ![banner](./assets/default/banner.jpg)
4
4
 
5
5
  ![npm version](https://img.shields.io/npm/v/@mannisto/astro-metadata)
6
6
  ![license](https://img.shields.io/badge/license-MIT-green)
@@ -8,15 +8,14 @@
8
8
 
9
9
  Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
10
10
 
11
- ---
12
11
 
13
12
  ## Table of contents
14
13
 
15
14
  - [Installation](#installation)
16
- - [Patterns](#patterns)
17
- - [1. Head component](#1-head-component)
18
- - [2. Individual components](#2-individual-components)
19
- - [3. Metadata utility](#3-metadata-utility)
15
+ - [Usage](#usage)
16
+ - [Head component](#1-head-component)
17
+ - [Individual components](#2-individual-components)
18
+ - [Metadata utility](#3-metadata-utility)
20
19
  - [Components](#components)
21
20
  - [Canonical](#canonical)
22
21
  - [Description](#description)
@@ -31,16 +30,20 @@ Astro components for managing your page head — metadata, social sharing, favic
31
30
  - [Twitter](#twitter)
32
31
  - [License](#license)
33
32
 
34
- ---
35
33
 
36
34
  ## Installation
37
35
  ```bash
36
+ # pnpm
38
37
  pnpm add @mannisto/astro-metadata
39
- ```
40
38
 
41
- ---
39
+ # npm
40
+ npm install @mannisto/astro-metadata
42
41
 
43
- ## Patterns
42
+ # yarn
43
+ yarn add @mannisto/astro-metadata
44
+ ```
45
+
46
+ ## Usage
44
47
 
45
48
  There are three ways to use this package. Pick what suits your project, or combine them freely.
46
49
 
@@ -49,6 +52,7 @@ There are three ways to use this package. Pick what suits your project, or combi
49
52
  The simplest approach. Use `Head` in your layout and pass props down from your pages. Charset and viewport are included automatically.
50
53
  ```astro
51
54
  ---
55
+
52
56
  // layouts/Layout.astro
53
57
  import { Head } from "@mannisto/astro-metadata"
54
58
  import type { HeadProps } from "@mannisto/astro-metadata"
@@ -56,6 +60,7 @@ import type { HeadProps } from "@mannisto/astro-metadata"
56
60
  interface Props extends HeadProps {}
57
61
 
58
62
  const { title, description, ...rest } = Astro.props
63
+
59
64
  ---
60
65
 
61
66
  <html>
@@ -70,10 +75,13 @@ const { title, description, ...rest } = Astro.props
70
75
  </body>
71
76
  </html>
72
77
  ```
78
+
73
79
  ```astro
74
80
  ---
81
+
75
82
  // pages/index.astro
76
83
  import Layout from "../layouts/Layout.astro"
84
+
77
85
  ---
78
86
 
79
87
  <Layout title="Home" description="Welcome to my site">
@@ -83,14 +91,16 @@ import Layout from "../layouts/Layout.astro"
83
91
 
84
92
  Best for simple sites where pages pass metadata as props to their layout.
85
93
 
86
- ---
87
94
 
88
95
  ### 2. Individual components
89
96
 
90
97
  Use components directly inside your own `<head>`. Useful when you only need specific pieces, or want full control over the structure.
98
+
91
99
  ```astro
92
100
  ---
101
+
93
102
  import { Title, Description, OpenGraph, Favicon } from "@mannisto/astro-metadata"
103
+
94
104
  ---
95
105
 
96
106
  <html>
@@ -126,13 +136,14 @@ import { Title, Description, OpenGraph, Favicon } from "@mannisto/astro-metadata
126
136
 
127
137
  Best for when you want to compose only what you need, or when `Head` is too opinionated for your setup.
128
138
 
129
- ---
130
139
 
131
140
  ### 3. Metadata utility
132
141
 
133
142
  Set metadata in your page, resolve it in your layout. Eliminates prop drilling through nested layout layers.
143
+
134
144
  ```astro
135
145
  ---
146
+
136
147
  // pages/about.astro
137
148
  import { Metadata } from "@mannisto/astro-metadata"
138
149
  import Layout from "../layouts/Layout.astro"
@@ -147,14 +158,17 @@ Metadata.set({
147
158
  },
148
159
  },
149
160
  })
161
+
150
162
  ---
151
163
 
152
164
  <Layout>
153
165
  <h1>About</h1>
154
166
  </Layout>
155
167
  ```
168
+
156
169
  ```astro
157
170
  ---
171
+
158
172
  // layouts/Layout.astro
159
173
  import { Head, Metadata } from "@mannisto/astro-metadata"
160
174
 
@@ -163,6 +177,7 @@ const meta = Metadata.resolve({
163
177
  description: "Default description",
164
178
  titleTemplate: "%s | My Site",
165
179
  })
180
+
166
181
  ---
167
182
 
168
183
  <html>
@@ -177,13 +192,14 @@ const meta = Metadata.resolve({
177
192
 
178
193
  Best for sites with deeply nested layouts, or when you want to keep metadata co-located with page content.
179
194
 
180
- ---
181
195
 
182
196
  ## Components
183
197
 
184
- ### Canonical
198
+ <details>
199
+ <summary><strong>Canonical</strong></summary>
185
200
 
186
201
  Renders a canonical link tag. Falls back to `Astro.url.href` when no value is provided, so every page gets a canonical tag with zero configuration.
202
+
187
203
  ```astro
188
204
  <Canonical value="https://example.com/page" />
189
205
  ```
@@ -192,9 +208,12 @@ Renders a canonical link tag. Falls back to `Astro.url.href` when no value is pr
192
208
  |------|------|-------------|
193
209
  | `value` | `string` | Canonical URL. Defaults to `Astro.url.href`. |
194
210
 
195
- ---
211
+ </details>
212
+
213
+
214
+ <details>
215
+ <summary><strong>Description</strong></summary>
196
216
 
197
- ### Description
198
217
  ```astro
199
218
  <Description value="Welcome to my site" />
200
219
  ```
@@ -203,11 +222,14 @@ Renders a canonical link tag. Falls back to `Astro.url.href` when no value is pr
203
222
  |------|------|-------------|
204
223
  | `value` | `string` | Page description |
205
224
 
206
- ---
225
+ </details>
226
+
207
227
 
208
- ### Favicon
228
+ <details>
229
+ <summary><strong>Favicon</strong></summary>
209
230
 
210
231
  Favicon support with dark and light mode variants, multiple formats, and optional cache busting.
232
+
211
233
  ```astro
212
234
  <Favicon
213
235
  icons={{
@@ -253,11 +275,14 @@ Favicon support with dark and light mode variants, multiple formats, and optiona
253
275
  | `path` | `string` | Path to the file |
254
276
  | `size` | `number` | Size in pixels. Rendered as `NxN` in the `sizes` attribute. |
255
277
 
256
- ---
278
+ </details>
257
279
 
258
- ### Head
280
+
281
+ <details>
282
+ <summary><strong>Head</strong></summary>
259
283
 
260
284
  Wraps the entire page head and composes all sub-components internally. Charset and viewport are always included and can be overridden if needed.
285
+
261
286
  ```astro
262
287
  <Head
263
288
  title="Home"
@@ -298,6 +323,7 @@ Wraps the entire page head and composes all sub-components internally. Charset a
298
323
  | `languageAlternates` | `LanguageAlternate[]` | — | Hreflang alternate links |
299
324
 
300
325
  #### Slots
326
+
301
327
  ```astro
302
328
  <Head title="My Site">
303
329
  <!-- Renders before charset and viewport -->
@@ -308,9 +334,12 @@ Wraps the entire page head and composes all sub-components internally. Charset a
308
334
  </Head>
309
335
  ```
310
336
 
311
- ---
337
+ </details>
338
+
339
+
340
+ <details>
341
+ <summary><strong>Keywords</strong></summary>
312
342
 
313
- ### Keywords
314
343
  ```astro
315
344
  <Keywords value={["astro", "seo", "metadata"]} />
316
345
  ```
@@ -319,11 +348,14 @@ Wraps the entire page head and composes all sub-components internally. Charset a
319
348
  |------|------|-------------|
320
349
  | `value` | `string[]` | List of keywords |
321
350
 
322
- ---
351
+ </details>
352
+
323
353
 
324
- ### LanguageAlternates
354
+ <details>
355
+ <summary><strong>LanguageAlternates</strong></summary>
325
356
 
326
357
  Renders `<link rel="alternate" hreflang>` tags for multilingual sites. Tells search engines which language version to serve for a given region.
358
+
327
359
  ```astro
328
360
  <LanguageAlternates
329
361
  alternates={[
@@ -340,9 +372,11 @@ Renders `<link rel="alternate" hreflang>` tags for multilingual sites. Tells sea
340
372
  | `alternates[].href` | `string` | Full URL of the alternate page |
341
373
  | `alternates[].hreflang` | `string` | Language or region code, e.g. `en`, `fi`, `en-US`, `x-default` |
342
374
 
343
- ---
375
+ </details>
376
+
344
377
 
345
- ### OpenGraph
378
+ <details>
379
+ <summary><strong>OpenGraph</strong></summary>
346
380
 
347
381
  Renders Open Graph meta tags for rich previews when your pages are shared on social platforms. When used inside `Head`, `title`, `description` and `url` fall back to the page values automatically.
348
382
  ```astro
@@ -374,9 +408,11 @@ Renders Open Graph meta tags for rich previews when your pages are shared on soc
374
408
  | `siteName` | `string` | — | Name of the site |
375
409
  | `locale` | `string` | — | Locale, e.g. `en_US` |
376
410
 
377
- ---
411
+ </details>
412
+
378
413
 
379
- ### Robots
414
+ <details>
415
+ <summary><strong>Robots</strong></summary>
380
416
 
381
417
  Controls how search engines crawl and index your page. Defaults to `index, follow`.
382
418
  ```astro
@@ -394,9 +430,11 @@ Controls how search engines crawl and index your page. Defaults to `index, follo
394
430
  | `noSnippet` | `boolean` | — | Prevent text snippets in search results |
395
431
  | `extra` | `string` | — | Additional directives, e.g. `"max-snippet:-1, max-image-preview:large"` |
396
432
 
397
- ---
433
+ </details>
434
+
398
435
 
399
- ### Schema
436
+ <details>
437
+ <summary><strong>Schema</strong></summary>
400
438
 
401
439
  Outputs a `<script type="application/ld+json">` tag for structured data. Use it to help search engines understand your content and qualify for rich results.
402
440
  ```astro
@@ -414,14 +452,16 @@ Outputs a `<script type="application/ld+json">` tag for structured data. Use it
414
452
  |------|------|-------------|
415
453
  | `schema` | `Record<string, unknown>` | JSON-LD object |
416
454
 
417
- ---
455
+ </details>
418
456
 
419
- ### Title
457
+
458
+ <details>
459
+ <summary><strong>Title</strong></summary>
420
460
 
421
461
  Renders the `<title>` tag. The template must contain `%s`, which is replaced with the page title — TypeScript enforces this at the type level.
462
+
422
463
  ```astro
423
464
  <Title value="My Page" template="%s | My Site" />
424
- <!-- <title>My Page | My Site</title> -->
425
465
  ```
426
466
 
427
467
  | Prop | Type | Description |
@@ -429,11 +469,14 @@ Renders the `<title>` tag. The template must contain `%s`, which is replaced wit
429
469
  | `value` | `string` | Page title. Required. |
430
470
  | `template` | `` `${string}%s${string}` `` | Template string. Must contain `%s`. |
431
471
 
432
- ---
472
+ </details>
433
473
 
434
- ### Twitter
474
+
475
+ <details>
476
+ <summary><strong>Twitter</strong></summary>
435
477
 
436
478
  Renders Twitter card meta tags for rich previews on X. When used inside `Head`, `title` and `description` fall back to the page values automatically.
479
+
437
480
  ```astro
438
481
  <Twitter
439
482
  card="summary_large_image"
@@ -456,7 +499,7 @@ Renders Twitter card meta tags for rich previews on X. When used inside `Head`,
456
499
  | `site` | `string` | — | Twitter handle of the site, e.g. `@mysite` |
457
500
  | `creator` | `string` | — | Twitter handle of the content author |
458
501
 
459
- ---
502
+ </details>
460
503
 
461
504
  ## License
462
505
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mannisto/astro-metadata",
3
- "version": "1.0.0-alpha.2",
3
+ "version": "1.0.0-alpha.3",
4
4
  "type": "module",
5
5
  "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
6
6
  "license": "MIT",