@mannisto/astro-metadata 1.0.0-beta.4 → 1.0.0-beta.5

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 (4) hide show
  1. package/README.md +24 -32
  2. package/package.json +1 -1
  3. package/src/components/Head.astro +47 -55
  4. package/src/lib/metadata.ts +3 -0
package/README.md CHANGED
@@ -8,30 +8,7 @@
8
8
 
9
9
  Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
10
10
 
11
- ## Table of contents
12
-
13
- - [Installation](#installation)
14
- - [Usage](#usage)
15
- - [Head component](docs/usage/head.md)
16
- - [Metadata API](docs/usage/metadata.md)
17
- - [Individual components](docs/usage/components.md)
18
- - Components
19
- - [Canonical](docs/components/canonical.md)
20
- - [Description](docs/components/description.md)
21
- - [Favicon](docs/components/favicon.md)
22
- - [Head](docs/components/head.md)
23
- - [Keywords](docs/components/keywords.md)
24
- - [LanguageAlternates](docs/components/language-alternates.md)
25
- - [OpenGraph](docs/components/open-graph.md)
26
- - [Robots](docs/components/robots.md)
27
- - [Schema](docs/components/schema.md)
28
- - [Title](docs/components/title.md)
29
- - [Twitter](docs/components/twitter.md)
30
- - [Contributing](CONTRIBUTING.md)
31
- - [License](#license)
32
-
33
11
  ## Installation
34
-
35
12
  ```bash
36
13
  # pnpm
37
14
  pnpm add @mannisto/astro-metadata
@@ -49,8 +26,7 @@ There are three ways to use this package. Pick what suits your project, or combi
49
26
 
50
27
  ### Head component
51
28
 
52
- The simplest approach — use `Head` in your layout and pass props down from pages.
53
-
29
+ The simplest approach — use `Head` in your layout and pass props down from pages. Title, description and image flow into Open Graph and Twitter automatically.
54
30
  ```astro
55
31
  ---
56
32
  import { Head } from "@mannisto/astro-metadata"
@@ -61,6 +37,7 @@ import { Head } from "@mannisto/astro-metadata"
61
37
  title="Home"
62
38
  titleTemplate="%s | My Site"
63
39
  description="Welcome to my site"
40
+ image={{ url: "/og.jpg", alt: "My Site", width: 1200, height: 630 }}
64
41
  />
65
42
  <body>
66
43
  <slot />
@@ -68,12 +45,11 @@ import { Head } from "@mannisto/astro-metadata"
68
45
  </html>
69
46
  ```
70
47
 
71
- [Full guide →](docs/usage/head.md)
48
+ [Read more →](docs/usage/head.md)
72
49
 
73
50
  ### Metadata API
74
51
 
75
52
  Set metadata in pages, resolve in layouts — no prop drilling.
76
-
77
53
  ```astro
78
54
  ---
79
55
  // pages/about.astro
@@ -85,7 +61,6 @@ Metadata.set({
85
61
  })
86
62
  ---
87
63
  ```
88
-
89
64
  ```astro
90
65
  ---
91
66
  // layouts/Layout.astro
@@ -105,12 +80,11 @@ const meta = Metadata.resolve({
105
80
  </html>
106
81
  ```
107
82
 
108
- [Full guide →](docs/usage/metadata.md)
83
+ [Read more →](docs/usage/metadata.md)
109
84
 
110
85
  ### Individual components
111
86
 
112
87
  Use components directly in your `<head>` for full control.
113
-
114
88
  ```astro
115
89
  ---
116
90
  import { Title, Description, OpenGraph } from "@mannisto/astro-metadata"
@@ -133,8 +107,26 @@ import { Title, Description, OpenGraph } from "@mannisto/astro-metadata"
133
107
  </html>
134
108
  ```
135
109
 
136
- [Full guide →](docs/usage/components.md)
110
+ [Read more →](docs/usage/components.md)
111
+
112
+ ## Components
113
+
114
+ - [Canonical](docs/components/canonical.md)
115
+ - [Description](docs/components/description.md)
116
+ - [Favicon](docs/components/favicon.md)
117
+ - [Head](docs/components/head.md)
118
+ - [Keywords](docs/components/keywords.md)
119
+ - [LanguageAlternates](docs/components/language-alternates.md)
120
+ - [OpenGraph](docs/components/open-graph.md)
121
+ - [Robots](docs/components/robots.md)
122
+ - [Schema](docs/components/schema.md)
123
+ - [Title](docs/components/title.md)
124
+ - [Twitter](docs/components/twitter.md)
125
+
126
+ ## Contributing
127
+
128
+ See [CONTRIBUTING.md](CONTRIBUTING.md) for setup and contribution guidelines.
137
129
 
138
130
  ## License
139
131
 
140
- MIT © [Ere Männistö](https://github.com/eremannisto)
132
+ MIT © [Ere Männistö](https://github.com/eremannisto)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mannisto/astro-metadata",
3
- "version": "1.0.0-beta.4",
3
+ "version": "1.0.0-beta.5",
4
4
  "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/components/Head.astro CHANGED
@@ -10,21 +10,23 @@ import Twitter from "./Twitter.astro"
10
10
  import Favicon from "./Favicon.astro"
11
11
  import Schema from "./Schema.astro"
12
12
  import LanguageAlternates from "./LanguageAlternates.astro"
13
+ import type { OpenGraphImage } from "./OpenGraph.astro"
13
14
 
14
15
  export type Props = {
15
16
  title: string
16
17
  titleTemplate?: `${string}%s${string}`
17
- description?: string
18
- canonical?: string
19
- keywords?: string[]
18
+ description?: string | false
19
+ canonical?: string | false
20
+ keywords?: string[] | false
20
21
  charset?: string
21
22
  viewport?: string
22
- robots?: ComponentProps<typeof Robots>
23
- openGraph?: ComponentProps<typeof OpenGraph>
24
- twitter?: ComponentProps<typeof Twitter>
25
- favicon?: ComponentProps<typeof Favicon>
26
- schema?: ComponentProps<typeof Schema>
27
- languageAlternates?: ComponentProps<typeof LanguageAlternates>["alternates"]
23
+ image?: OpenGraphImage | false
24
+ robots?: ComponentProps<typeof Robots> | false
25
+ openGraph?: ComponentProps<typeof OpenGraph> | false
26
+ twitter?: ComponentProps<typeof Twitter> | false
27
+ favicon?: ComponentProps<typeof Favicon> | false
28
+ schema?: ComponentProps<typeof Schema> | false
29
+ languageAlternates?: ComponentProps<typeof LanguageAlternates>["alternates"] | false
28
30
  }
29
31
 
30
32
  const {
@@ -35,6 +37,7 @@ const {
35
37
  keywords,
36
38
  charset = "UTF-8",
37
39
  viewport = "width=device-width, initial-scale=1.0",
40
+ image,
38
41
  robots,
39
42
  openGraph,
40
43
  twitter,
@@ -42,6 +45,32 @@ const {
42
45
  schema,
43
46
  languageAlternates,
44
47
  } = Astro.props
48
+
49
+ const enabled = <T,>(value: T | false | undefined): value is T => {
50
+ return value !== false && value !== undefined
51
+ }
52
+
53
+ const og =
54
+ openGraph !== false
55
+ ? {
56
+ title,
57
+ description: enabled(description) ? description : undefined,
58
+ image: enabled(image) ? image : undefined,
59
+ url: enabled(canonical) ? canonical : undefined,
60
+ ...openGraph,
61
+ }
62
+ : false
63
+
64
+ const tw =
65
+ twitter !== false
66
+ ? {
67
+ title,
68
+ description: enabled(description) ? description : undefined,
69
+ image: enabled(image) ? image : undefined,
70
+ url: enabled(canonical) ? canonical : undefined,
71
+ ...twitter,
72
+ }
73
+ : false
45
74
  ---
46
75
 
47
76
  <head>
@@ -51,53 +80,16 @@ const {
51
80
  <meta name="viewport" content={viewport} />
52
81
 
53
82
  <Title value={title} template={titleTemplate} />
54
- <Description value={description} />
55
- <Canonical value={canonical} />
56
- <Keywords value={keywords} />
57
- <Robots
58
- index={robots?.index}
59
- follow={robots?.follow}
60
- archive={robots?.archive}
61
- snippet={robots?.snippet}
62
- extra={robots?.extra}
63
- />
64
-
65
- {languageAlternates && <LanguageAlternates alternates={languageAlternates} />}
66
-
67
- {
68
- openGraph && (
69
- <OpenGraph
70
- title={openGraph.title ?? title}
71
- description={openGraph.description ?? description}
72
- url={openGraph.url ?? canonical}
73
- type={openGraph.type}
74
- siteName={openGraph.siteName}
75
- locale={openGraph.locale}
76
- localeAlternate={openGraph.localeAlternate}
77
- image={openGraph.image}
78
- video={openGraph.video}
79
- audio={openGraph.audio}
80
- />
81
- )
82
- }
83
-
84
- {
85
- twitter && (
86
- <Twitter
87
- title={twitter.title ?? title}
88
- description={twitter.description ?? description}
89
- image={twitter.image}
90
- card={twitter.card}
91
- site={twitter.site}
92
- creator={twitter.creator}
93
- url={twitter.url ?? canonical}
94
- />
95
- )
96
- }
97
-
98
- {favicon && <Favicon icons={favicon.icons} manifest={favicon.manifest} sort={favicon.sort} />}
99
83
 
100
- {schema && <Schema schema={schema.schema} />}
84
+ {enabled(description) && <Description value={description} />}
85
+ {enabled(canonical) && <Canonical value={canonical} />}
86
+ {enabled(keywords) && <Keywords value={keywords} />}
87
+ {enabled(robots) && <Robots {...robots} />}
88
+ {enabled(og) && <OpenGraph {...og} />}
89
+ {enabled(tw) && <Twitter {...tw} />}
90
+ {enabled(favicon) && <Favicon {...favicon} />}
91
+ {enabled(schema) && <Schema {...schema} />}
92
+ {enabled(languageAlternates) && <LanguageAlternates alternates={languageAlternates} />}
101
93
 
102
94
  <slot />
103
95
  </head>
package/src/lib/metadata.ts CHANGED
@@ -52,6 +52,9 @@ export const Metadata = {
52
52
  get keywords() {
53
53
  return store.keywords
54
54
  },
55
+ get image() {
56
+ return store.image
57
+ },
55
58
  get robots() {
56
59
  return store.robots
57
60
  },