@mannisto/astro-metadata 1.0.1 → 1.0.2

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mannisto/astro-metadata",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/eremannisto/astro-metadata#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/eremannisto/astro-metadata"
+    "url": "git+https://github.com/eremannisto/astro-metadata.git"
   },
   "bugs": {
     "url": "https://github.com/eremannisto/astro-metadata/issues"
@@ -23,15 +23,24 @@
     "src",
     "index.ts"
   ],
+  "scripts": {
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "check": "eslint . && prettier --check .",
+    "test": "pnpm run test:unit && pnpm run test:e2e",
+    "test:unit": "vitest run",
+    "test:e2e": "pnpm test:fixtures && playwright test",
+    "test:fixtures": "pnpm --filter \"./tests/e2e/fixtures/**\" exec astro build"
+  },
   "peerDependencies": {
-    "astro": "^4.3.0 || ^5.0.0 || ^6.0.0"
+    "astro": "^4.3.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@playwright/test": "^1.58.2",
     "@types/node": "^22.19.15",
-    "astro": "^5.18.1",
+    "astro": "^6.4.8",
     "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.8.1",
@@ -40,12 +49,5 @@
     "typescript-eslint": "^8.57.0",
     "vitest": "^4.1.0"
   },
-  "scripts": {
-    "lint": "eslint . --fix",
-    "format": "prettier --write .",
-    "check": "eslint . && prettier --check .",
-    "test": "pnpm run test:unit && pnpm run test:e2e",
-    "test:unit": "vitest run",
-    "test:e2e": "playwright test"
-  }
-}
+  "packageManager": "pnpm@10.32.1"
+}

package/src/components/Favicon.astro

@@ -14,6 +14,19 @@ export type Props = {
 
 const { icons, manifest, sort = true } = Astro.props
 
+/**
+ * Returns the file extension of a favicon path in lowercase, without the
+ * query string or the hash. For example, "/icon.SVG?v=2" gives "svg".
+ *
+ * @param path - The path to the favicon file.
+ * @returns The file extension, or an empty string if the path has none.
+ */
+function getExtension(path: string): string {
+  const file = path.split(/[?#]/)[0].toLowerCase()
+  const dot = file.lastIndexOf(".")
+  return dot === -1 ? "" : file.slice(dot + 1)
+}
+
 /**
  * Detects the MIME type of a favicon file from its extension.
  *
@@ -21,11 +34,11 @@ const { icons, manifest, sort = true } = Astro.props
  * @returns The MIME type of the file.
  */
 function getMimeType(path: string): string {
-  if (path.endsWith(".svg")) return "image/svg+xml"
-  if (path.endsWith(".png")) return "image/png"
-  if (path.endsWith(".webp")) return "image/webp"
-  if (path.endsWith(".jpg") || path.endsWith(".jpeg")) return "image/jpeg"
-  if (path.endsWith(".ico")) return "image/x-icon"
+  const extension = getExtension(path)
+  if (extension === "svg") return "image/svg+xml"
+  if (extension === "png") return "image/png"
+  if (extension === "webp") return "image/webp"
+  if (extension === "jpg" || extension === "jpeg") return "image/jpeg"
   return "image/x-icon"
 }
 
@@ -50,15 +63,10 @@ function getMedia(theme?: "light" | "dark"): string | undefined {
 function getSortOrder(file: FaviconFile): number {
   if (file.apple) return 4
   if (file.theme) return 5
-  if (file.path.endsWith(".ico")) return 0
-  if (
-    file.path.endsWith(".png") ||
-    file.path.endsWith(".webp") ||
-    file.path.endsWith(".jpg") ||
-    file.path.endsWith(".jpeg")
-  )
-    return 1
-  if (file.path.endsWith(".svg")) return 2
+  const extension = getExtension(file.path)
+  if (extension === "ico") return 0
+  if (["png", "webp", "jpg", "jpeg"].includes(extension)) return 1
+  if (extension === "svg") return 2
   return 3
 }
 

package/src/components/Head.astro

@@ -68,16 +68,14 @@ const tw =
         title,
         description: enabled(description) ? description : undefined,
         image: enabled(image) ? image : undefined,
-        url: enabled(canonical) ? canonical : undefined,
         ...twitter,
       }
     : false
 ---
 
 <head>
-  <slot name="top" />
-
   <meta charset={charset} />
+  <slot name="top" />
   <meta name="viewport" content={viewport} />
 
   <Title value={title} template={titleTemplate} />

package/src/components/Schema.astro

@@ -4,6 +4,15 @@ export type Props = {
 }
 
 const { schema } = Astro.props
+
+// Escape the characters that can end the script tag or break the JavaScript parser.
+// A value such as "</script>" in the schema then stays inside the JSON.
+const json = JSON.stringify(schema)
+  .replace(/</g, "\\u003c")
+  .replace(/>/g, "\\u003e")
+  .replace(/&/g, "\\u0026")
+  .replace(/\u2028/g, "\\u2028")
+  .replace(/\u2029/g, "\\u2029")
 ---
 
-<script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />
+<script is:inline type="application/ld+json" set:html={json} />

package/src/components/Title.astro

@@ -5,6 +5,9 @@ export type Props = {
 }
 
 const { value, template = "%s" } = Astro.props
+
+// A replacer function keeps "$&" and other "$" patterns in the title as text
+const title = template.replace("%s", () => value)
 ---
 
-<title>{template.replace("%s", value)}</title>
+<title>{title}</title>

package/src/components/Twitter.astro

@@ -2,6 +2,9 @@
 export type Props = {
   title?: string
   description?: string
+  /**
+   * @deprecated X does not read `twitter:url`. The component ignores this value.
+   */
   url?: string
   card?: "summary" | "summary_large_image" | "player" | "app"
   site?: string
@@ -12,13 +15,12 @@ export type Props = {
   }
 }
 
-const { title, description, url, card = "summary_large_image", site, creator, image } = Astro.props
+const { title, description, card = "summary_large_image", site, creator, image } = Astro.props
 ---
 
 {card && <meta name="twitter:card" content={card} />}
 {title && <meta name="twitter:title" content={title} />}
 {description && <meta name="twitter:description" content={description} />}
-{url && <meta name="twitter:url" content={url} />}
 {image?.url && <meta name="twitter:image" content={image.url} />}
 {image?.alt && <meta name="twitter:image:alt" content={image.alt} />}
 {site && <meta name="twitter:site" content={site} />}