svelte-meta-tags 3.1.0 → 3.1.2

package/README.md

@@ -125,50 +125,80 @@ pnpm add -D svelte-meta-tags
 
 **Overwriting default values with a child page:**
 
+[Example](https://github.com/oekazuma/svelte-meta-tags/tree/main/example)
+
 `+layout.svelte`
 
 ```svelte
 <script>
-  import { MetaTags } from 'svelte-meta-tags'; // Import the MetaTags component.
-  import { page } from '$app/stores'; // Import the page store to access route-specific data.
+  import { MetaTags } from 'svelte-meta-tags';
+  import { page } from '$app/stores';
+  import extend from 'just-extend'; // Please provide functions that allow deep merging of objects, such as lodash.merge, deepmerge, just-extend.
 
-  export let data; // Exported so that child components/pages can provide data.
+  export let data;
 
-  // Create a reactive statement to compute meta tags.
-  $: metaTags = {
-    titleTemplate: '%s | Svelte Meta Tags', // Default title template.
-    description: 'Default Description for the Website', // Default description.
-    ...$page.data.metaTagsChild // Override with child page meta tags if they exist.
-  };
+  $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
 </script>
 
 <MetaTags {...metaTags} />
 
-<!-- The rest of your layout content and the slot for child content would go here. -->
+<slot />
 ```
 
-`+page.ts`
+`+layout.ts`
 
 ```ts
-import type { MetaTagsProps } from 'svelte-meta-tags'; // Import type for meta tags properties.
-
-export const load = async ({ url }) => {
-  // Define meta tags for this specific child page.
-  const metaTags: MetaTagsProps = Object.freeze({
-    title: 'page title', // Page-specific title.
-    description: 'Description for Child Page', // This description will override the default.
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export const load = ({ url }) => {
+  const baseMetaTags = Object.freeze({
+    title: 'Default',
+    titleTemplate: '%s | Svelte Meta Tags',
+    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
+    canonical: new URL(url.pathname, url.origin).href,
     openGraph: {
-      // OpenGraph meta tags specific to this page.
       type: 'website',
       url: new URL(url.pathname, url.origin).href,
       locale: 'en_IE',
       title: 'Open Graph Title',
-      description: 'Open Graph Description'
+      description: 'Open Graph Description',
+      siteName: 'SiteName',
+      images: [
+        {
+          url: 'https://www.example.ie/og-image.jpg',
+          alt: 'Og Image Alt',
+          width: 800,
+          height: 600,
+          secureUrl: 'https://www.example.ie/og-image.jpg',
+          type: 'image/jpeg'
+        }
+      ]
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    baseMetaTags
+  };
+};
+```
+
+`+page.ts`
+
+```ts
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export const load = () => {
+  const pageMetaTags = Object.freeze({
+    title: 'TOP',
+    description: 'Description TOP',
+    openGraph: {
+      title: 'Open Graph Title TOP',
+      description: 'Open Graph Description TOP'
     }
-  });
+  }) satisfies MetaTagsProps;
 
   return {
-    metaTagsChild: metaTags // Return meta tags so they can be consumed by layout.svelte.
+    pageMetaTags
   };
 };
 ```

package/dist/JsonLd.svelte.d.ts

@@ -14,5 +14,5 @@ type JsonLdProps_ = typeof __propDef.props;
 export { JsonLdProps_ as JsonLdProps };
 export type JsonLdEvents = typeof __propDef.events;
 export type JsonLdSlots = typeof __propDef.slots;
-export default class JsonLd extends SvelteComponentTyped<JsonLdProps, JsonLdEvents, JsonLdSlots> {
+export default class JsonLd extends SvelteComponentTyped<JsonLdProps_, JsonLdEvents, JsonLdSlots> {
 }

package/dist/MetaTags.svelte

@@ -35,7 +35,11 @@ $:
 </script>
 
 <svelte:head>
-  <title>{updatedTitle}</title>
+  {#key updatedTitle}
+    {#if updatedTitle}
+      <title>{updatedTitle}</title>
+    {/if}
+  {/key}
 
   {#if robots !== false}
     <meta name="robots" content="{robots}{robotsParams}" />

package/dist/MetaTags.svelte.d.ts

@@ -26,5 +26,5 @@ type MetaTagsProps_ = typeof __propDef.props;
 export { MetaTagsProps_ as MetaTagsProps };
 export type MetaTagsEvents = typeof __propDef.events;
 export type MetaTagsSlots = typeof __propDef.slots;
-export default class MetaTags extends SvelteComponentTyped<MetaTagsProps, MetaTagsEvents, MetaTagsSlots> {
+export default class MetaTags extends SvelteComponentTyped<MetaTagsProps_, MetaTagsEvents, MetaTagsSlots> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-meta-tags",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects",
   "license": "MIT",
   "type": "module",
@@ -21,15 +21,16 @@
     "schema-dts": "^1.1.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.4",
-    "@sveltejs/package": "^2.2.2",
-    "publint": "^0.2.5",
-    "svelte": "^4.2.2",
-    "svelte-check": "^3.5.2",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "publint": "^0.2.7",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.9",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
   },
   "peerDependencies": {
     "svelte": "^3.55.0 || ^4.0.0"