@indaco/sveo 1.0.0 → 1.0.1

package/dist/components/metadata/README.md

@@ -0,0 +1,89 @@
+# PageMetaTags
+
+Easily add metadata (title, canonical url, description, keywords) to your pages as well as attach [OpenGraph] and [TwitterCard] to let pages become rich objects.
+
+## Usage
+
+### Article Example
+
+```html
+<script lang="ts">
+    import type { SEOWebPage } from '@indaco/sveo/types';
+    import { OpenGraphType, TwitterCardType } from '@indaco/sveo/types';
+    import { PageMetaTags } from '@indaco/sveo/metadata';
+
+    const samplePage: SEOWebPage = {
+        url: 'https://example.com/posts/getting-started',
+        title: 'Getting Started Article',
+        description: 'This is the description for the Getting Started Article',
+        author: 'Your Name',
+        keywords: ['sveltekit', 'components', 'tests', 'vitest'],
+        opengraph: {
+            type: OpenGraphType.Article,
+            article: {
+                published_time: '23-01-2022',
+                modified_time: '24-01-2022'
+            }
+        },
+        twitter: {
+            type: TwitterCardType.Large,
+            site: '@username'
+        }
+    };
+<script>
+
+<PageMetaTags data={samplePage} />
+```
+
+### Music Album Example
+
+```html
+<script>
+    import type { SEOWebPageMetadata } from '@indaco/sveo/types';
+    import { OpenGraphType } from '@indaco/sveo/types';
+    import { PageMetaTags } from '@indaco/sveo/metadata';
+
+    const sampleMusicAlbum: SEOWebPageMetadata = {
+        url: 'https://www.dgmlive.com/',
+        title: 'In the Court of the Crimson King',
+        description: 'Description for the album',
+        keywords: 'progressive rock, jazz rock, rock',
+        opengraph: {
+            type: OpenGraphType.MusicAlbum,
+            album: {
+                url: 'https://open.spotify.com/album/6tVg2Wl9hVKMpHYcAl2V2M?si=dJtzXM7ATvmLOn9NfdDnbg',
+                musicians: [
+                    {
+                        url: 'https://open.spotify.com/artist/7M1FPw29m5FbicYzS2xdpi?si=w9MGJ88-S3O7tiG5IheXAw'
+                    }
+                ],
+                songs: [
+                    {
+                        url: 'https://open.spotify.com/track/5L7VBYoosmkmiiDlzumdCe?si=aa49699b95604f8d'
+                    },
+                    {
+                        url: 'https://open.spotify.com/track/4QbpagjMCqSECj6IimTL2n?si=65e9458fe8454eea'
+                    }
+                ],
+                release_date: new Date('10-10-1969')
+            }
+        }
+    };
+<script>
+
+<PageMetaTags data={sampleMusicAlbum} />
+```
+
+## Properties
+
+### PageMetags
+
+| Prop   | Type         | Required | Description                                |
+| :----- | :----------: | :------: | :----------------------------------------- |
+| `data` | [SEOWebPage] | yes      | The SEO object containing Page metadata    |
+
+<!-- Resource Links -->
+
+[SEOWebPage]: https://github.com/indaco/sveo/blob/913f83920f7f76183fc7d6ea58eebbceeb82f452/src/lib/types.ts#L34-L43
+[OpenGraph]: https://ogp.me/
+[TwitterCard]: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

package/dist/components/metadata/opengraph/OpenGraph.svelte

@@ -21,6 +21,13 @@ let { data } = $props();
 		<meta property="og:description" content={data.description} />
 	{/if}
 
+	{#if data.opengraph.locale}
+		<meta property="og:locale" content={data.opengraph.locale} />
+	{/if}
+	{#if data.opengraph.site_name}
+		<meta property="og:site_name" content={data.opengraph.site_name} />
+	{/if}
+
 	{#if data.image?.url}
 		<meta property="og:image" content={data.image.url} />
 		{#if data.image.alt}

package/dist/components/metadata/opengraph/README.md

@@ -0,0 +1,58 @@
+# OpenGraph
+
+The `OpenGraph` component provides a comprehensive and type-safe way to generate Open Graph `<meta>` tags for your Svelte or SvelteKit application.
+
+It is the **only exported component** for Open Graph, and it **automatically handles conditional rendering** of all supported subtypes (e.g. article, book, video, music) internally.
+
+## Supported Open Graph Types
+
+The component supports official Open Graph object types, including:
+
+| Type                           | Description                               |
+| :----------------------------- | :---------------------------------------- |
+| `website`                      | Basic OG meta (title, description, image) |
+| `article`                      | Adds `article:*` tags like author, tags   |
+| `book`                         | ISBN, release date, and tags              |
+| `profile`                      | Personal metadata                         |
+| `business.business`            | Contact information                       |
+| `product`                      | Product-specific metadata                 |
+| `music.song`                   | Song metadata                             |
+| `music.album`                  | Album-level metadata                      |
+| `music.playlist`               | Playlist metadata                         |
+| `music.radio_station`          | Radio metadata                            |
+| `video.movie`                  | Movie metadata                            |
+| `video.episode`                | Episode metadata (also includes movie)    |
+| `video.tv_show`, `video.other` | Handled like movie                        |
+
+## Usage Example (Article)
+
+To use the `OpenGraph` component, pass a typed `SEOWebPage` object with an `opengraph` field and `type`.
+
+```svelte
+<script lang="ts">
+    import { OpenGraphType, TwitterCardType } from '@indaco/sveo/types';
+import type { SEOWebPage } from '@indaco/sveo/types';
+
+const sampleArticle: SEOWebPage = {
+    url: 'https://example.com/posts/getting-started',
+    title: 'Getting Started Article',
+    description: 'This is the description for the Getting Started Article',
+    author: 'Mirco Veltri',
+    keywords: ['sveltekit, components, tests, vitest'],
+    opengraph: {
+        type: OpenGraphType.Article,
+        article: {
+            tags: ['sveltekit'],
+            published_time: '23-01-2022',
+            modified_time: '24-01-2022'
+        }
+    },
+    twitter: {
+        type: TwitterCardType.Large,
+        site: '@indaco'
+    }
+};
+</script>
+
+<OpenGraph data={sampleArticle} />
+```

package/dist/components/metadata/opengraph/article.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { toISODateString } from '../../../utils.js';
 let { data } = $props();
-const times = [
+const times = $derived([
     ['published_time', data.opengraph?.article?.published_time],
     ['modified_time', data.opengraph?.article?.modified_time],
     ['expiration_time', data.opengraph?.article?.expiration_time]
-];
+]);
 </script>
 
 {#each times as [key, value] (key)}

package/dist/components/metadata/opengraph/business.svelte

@@ -20,7 +20,7 @@ export {};
 {#if data.opengraph?.business?.postal_code}
 	<meta
 		property="business:contact_data:postal_code"
-		content={data.opengraph.business.postal_code.toString()}
+		content={data.opengraph.business.postal_code}
 	/>
 {/if}
 

package/dist/components/metadata/opengraph/video-episode.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">import { toISODateString } from '../../../utils.js';
-import VideoMovie from './video-movie.svelte';
 let { data } = $props();
 </script>
 
@@ -42,6 +41,6 @@ let { data } = $props();
 	{/each}
 {/if}
 
-{#if data.opengraph?.episode?.series}
-	<VideoMovie {data} />
+{#if data.opengraph?.episode?.series?.url}
+	<meta property="video:series" content={data.opengraph.episode.series.url} />
 {/if}

package/dist/components/metadata/opengraph/video-movie.svelte

@@ -36,7 +36,7 @@ let { data } = $props();
 {/if}
 
 {#if Array.isArray(data.opengraph?.movie?.tags)}
-	{@const _tags = data.opengraph?.movie?.tags}
+	{@const _tags = data.opengraph.movie.tags}
 	{#each _tags as tag (tag)}
 		<meta property="video:tag" content={tag} />
 	{/each}

package/dist/components/metadata/twittercard/README.md

@@ -0,0 +1,81 @@
+# TwitterCard
+
+Generate [Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) meta tags using a single, type-safe Svelte component.
+
+It supports all official Twitter Card types:
+
+- `summary`
+- `summary_large_image`
+- `player`
+- `app`
+
+The component automatically renders conditional tags based on the selected card type and the fields present in `data.twitter`.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import TwitterCard from '@indaco/sveo/metadata/twittercard/TwitterCard.svelte';
+  import type { SEOWebPage } from '@indaco/sveo/types';
+
+  const seo: SEOWebPage = {
+    title: 'Your Page Title',
+    description: 'Page description for Twitter card.',
+    image: {
+      url: 'https://example.com/og-image.jpg',
+      alt: 'An image for Twitter'
+    },
+    twitter: {
+      type: 'summary_large_image',
+      site: '@yourhandle'
+    }
+  };
+</script>
+
+<TwitterCard data={seo} />
+```
+
+Renders the following tags (based on your data):
+
+```html
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:title" content="Your Page Title" />
+<meta property="twitter:site" content="@yourhandle" />
+<meta property="twitter:description" content="Page description for Twitter card." />
+<meta property="twitter:image" content="https://example.com/og-image.jpg" />
+<meta property="twitter:image:alt" content="An image for Twitter" />
+```
+
+### Example (Player Card)
+
+```svelte
+<TwitterCard
+    data={{
+        title: 'Watch this video!',
+        description: 'Best video ever.',
+        image: {
+            url: 'https://example.com/video-thumbnail.jpg',
+            alt: 'Video thumbnail'
+        },
+        twitter: {
+            type: 'player',
+            site: '@myapp',
+            player: {
+                url: 'https://example.com/embed/video',
+                width: 1280,
+                height: 720
+            }
+        }
+    }}
+    />
+```
+
+## Props
+
+| Prop   | Type         | Required | Description                                |
+| :----- | :----------: | :------: | :----------------------------------------- |
+| `data` | [SEOWebPage] | yes      | The SEO object containing Twitter metadata |
+
+<!-- Resource Links -->
+
+[SEOWebPage]: https://github.com/indaco/sveo/blob/913f83920f7f76183fc7d6ea58eebbceeb82f452/src/lib/types.ts#L34-L43

package/dist/components/metadata/twittercard/TwitterCard.svelte

@@ -4,34 +4,34 @@ let { data } = $props();
 
 {#if data.twitter}
 	{#if data.twitter.type}
-		<meta property="twitter:card" content={data.twitter.type} />
-		<meta property="twitter:title" content={data.title} />
+		<meta name="twitter:card" content={data.twitter.type} />
+		<meta name="twitter:title" content={data.title} />
 		{#if data.twitter.site}
-			<meta property="twitter:site" content={data.twitter.site} />
+			<meta name="twitter:site" content={data.twitter.site} />
 		{/if}
 		{#if data.description}
-			<meta property="twitter:description" content={data.description} />
+			<meta name="twitter:description" content={data.description} />
 		{/if}
 		{#if data.image?.url}
-			<meta property="twitter:image" content={data.image.url} />
+			<meta name="twitter:image" content={data.image.url} />
 			{#if data.image.alt}
-				<meta property="twitter:image:alt" content={data.image.alt} />
+				<meta name="twitter:image:alt" content={data.image.alt} />
 			{/if}
 		{/if}
 
 		{#if data.twitter.type === TwitterCardType.Player && data.twitter.player}
-			<meta property="twitter:player" content={data.twitter.player.url} />
-			<meta property="twitter:player:width" content={data.twitter.player.width.toString()} />
-			<meta property="twitter:player:height" content={data.twitter.player.height.toString()} />
+			<meta name="twitter:player" content={data.twitter.player.url} />
+			<meta name="twitter:player:width" content={data.twitter.player.width.toString()} />
+			<meta name="twitter:player:height" content={data.twitter.player.height.toString()} />
 		{/if}
 
 		{#if data.twitter.type === TwitterCardType.App && data.twitter.app}
 			{#if data.twitter.app.country}
-				<meta property="twitter:app:country" content={data.twitter.app.country} />
+				<meta name="twitter:app:country" content={data.twitter.app.country} />
 			{/if}
-			<meta property="twitter:app:id:iphone" content={data.twitter.app.idIPhone} />
-			<meta property="twitter:app:id:ipad" content={data.twitter.app.idIPad} />
-			<meta property="twitter:app:id:googleplay" content={data.twitter.app.idGooglePlay} />
+			<meta name="twitter:app:id:iphone" content={data.twitter.app.idIPhone} />
+			<meta name="twitter:app:id:ipad" content={data.twitter.app.idIPad} />
+			<meta name="twitter:app:id:googleplay" content={data.twitter.app.idGooglePlay} />
 		{/if}
 	{/if}
 {/if}

package/dist/components/schemaorg/breadcrumbs/JsonLdBreadcrumbs.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">import { serializeJSONLdSchema, pathSegments } from '../../../utils.js';
 let { url } = $props();
-const baseURL = new URL(url).origin;
-const segments = pathSegments(url);
-const itemListElement = [
-    {
-        '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        url: baseURL
-    },
-    ...segments.map((segment, index) => {
-        return {
+const schemaOrgBreadcrumbList = $derived.by(() => {
+    const baseURL = new URL(url).origin;
+    const segments = pathSegments(url);
+    const itemListElement = [
+        {
             '@type': 'ListItem',
-            position: index + 2,
-            name: segment,
-            url: `${baseURL}/${segments.slice(0, index + 1).join('/')}`
-        };
-    })
-];
-const schemaOrgBreadcrumbList = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement
-};
+            position: 1,
+            name: 'Home',
+            url: baseURL
+        },
+        ...segments.map((segment, index) => {
+            return {
+                '@type': 'ListItem',
+                position: index + 2,
+                name: segment,
+                url: `${baseURL}/${segments.slice(0, index + 1).join('/')}`
+            };
+        })
+    ];
+    return {
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement
+    };
+});
 </script>
 
 <svelte:head>

package/dist/components/schemaorg/breadcrumbs/README.md

@@ -0,0 +1,66 @@
+# JsonLdBreadcrumbs
+
+The `JsonLdBreadcrumbs` component adds a [BreadcrumbList] to the page header as [structured data]. This helps search engines understand the page's position within the site hierarchy and enhances rich results in search listings.
+
+A `BreadcrumbList` is an [ItemList] consisting of a chain of linked web pages, typically ending with the current page.
+
+## Usage
+
+```html
+<script>
+    import { JsonLdBreadcrumbs } from '@indaco/sveo/schemaorg';
+
+    <JsonLdBreadcrumbs url="https://example.com/blog/welcome" />
+</script>
+```
+
+### Output
+
+```html
+<script type="application/ld+json">{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "Home",
+      "url": "https://example.com"
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "name": "blog",
+      "url": "https://example.com/blog"
+    },
+    {
+      "@type": "ListItem",
+      "position": 3,
+      "name": "welcome",
+      "url": "https://example.com/blog/welcome"
+    }
+  ]
+}</script>
+
+```
+
+### With SvelteKit
+
+```html
+<script>
+    import { page } from '$app/stores';
+    import { JsonLdBreadcrumbs } from '@indaco/sveo/schemaorg';
+
+    <JsonLdBreadcrumbs url={$page.url.href} />
+</script>
+```
+
+## Properties
+
+| Property  | Type     | Required | Description                      |
+| :-------- | :------: | :------: | :------------------------------- |
+| url       | `string` |    yes   | Absolute URL of the current page |
+
+[structured data]: https://developers.google.com/search/docs/appearance/structured-data/breadcrumb
+[BreadcrumbList]: https://schema.org/BreadcrumbList
+[ItemList]: https://schema.org/ItemList

package/dist/components/schemaorg/sitenavigationelements/JsonLdSiteNavigationElements.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">import { serializeJSONLdSchema } from '../../../utils.js';
 let { baseURL, data } = $props();
-function makeSiteNavigationElementList(data) {
-    return Array.isArray(data)
-        ? data.map((elem) => ({
-            '@type': 'SiteNavigationElement',
-            position: elem.weight,
-            name: elem.name,
-            url: elem.external ? elem.url : `${baseURL}${elem.url}`
-        }))
-        : [];
-}
-const schemaOrgSiteNavigationElement = {
+const schemaOrgSiteNavigationElement = $derived.by(() => ({
     '@context': 'https://schema.org',
     '@type': 'ItemList',
-    itemListElement: makeSiteNavigationElementList(data)
-};
+    itemListElement: data.map((elem) => ({
+        '@type': 'SiteNavigationElement',
+        position: elem.weight,
+        name: elem.name,
+        url: elem.external ? elem.url : `${baseURL}${elem.url}`
+    }))
+}));
 </script>
 
 <svelte:head>

package/dist/components/schemaorg/sitenavigationelements/README.md

@@ -0,0 +1,64 @@
+# JsonLdSiteNavigationElement
+
+The `JsonLdSiteNavigationElement` component injects a [SiteNavigationElement] from Schema.org into the page as a `<script type="application/ld+json">` tag, describing the structure of the site's main navigation menu for search engines.
+
+## Usage
+
+```html
+<script lang="ts">
+    import type { SEOMenuItem } from '@indaco/sveo/types.js';
+    import { JsonLdSiteNavigationElement } from '@indaco/sveo/schemaorg';
+
+    const menu: Array<SEOMenuItem> = [
+    {
+        identifier: 'home',
+        name: 'Home',
+        url: '/',
+        weight: 1
+    },
+    {
+        identifier: 'about',
+        name: 'About',
+        url: '/about',
+        weight: 2
+    }
+];
+
+    <JsonLdSiteNavigationElement baseURL="https://example.com" data={menu} />
+</script>
+```
+
+### Output
+
+```html
+<script type="application/ld+json">{
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  "itemListElement": [
+    {
+      "@type": "SiteNavigationElement",
+      "position": 1,
+      "name": "home",
+      "url": "https://example.com/"
+    },
+    {
+      "@type": "SiteNavigationElement",
+      "position": 2,
+      "name": "about",
+      "url": "https://example.com/about"
+    }
+  ]
+}</script>
+```
+
+## Properties
+
+| Property | Type              | Required | Description                                  |
+| :------- | :---------------: | :------: | :------------------------------------------- |
+| baseURL  | `string`          | yes      | Base URL to prefix relative paths            |
+| data     | [SEOMenuItem]`[]` | yes      | Array of menu items to include in the schema |
+
+<!-- Resource Links -->
+
+[SEOMenuItem]: https://github.com/indaco/sveo/blob/06de4d7c79a27f0474981cce3ebc2cf922484b09/src/lib/types.ts#L20-L27
+[SiteNavigationElement]: https://schema.org/SiteNavigationElement

package/dist/components/schemaorg/webpage/JsonLdWebPage.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">import { serializeJSONLdSchema } from '../../../utils.js';
 let { data } = $props();
-const schemaOrgWebPage = $state({
-    '@context': 'https://schema.org',
-    '@type': 'WebPage',
-    name: data.title,
-    description: data.description || ''
+const schemaOrgWebPage = $derived.by(() => {
+    const page = {
+        '@context': 'https://schema.org',
+        '@type': 'WebPage',
+        name: data.title,
+        description: data.description || ''
+    };
+    if (data.author)
+        page.author = data.author;
+    if (data.keywords?.length)
+        page.keywords = data.keywords;
+    return page;
 });
-if (data.author)
-    schemaOrgWebPage.author = data.author;
-if (data.keywords?.length)
-    schemaOrgWebPage.keywords = data.keywords;
 </script>
 
 <svelte:head>

package/dist/components/schemaorg/webpage/README.md

@@ -0,0 +1,51 @@
+# JsonLdWebPage
+
+The `JsonLdWebPage` component adds a [WebPage] Schema.org type to the page as structured data via a `<script type="application/ld+json">` tag. This helps search engines understand the page's content and metadata such as title, description, and keywords.
+
+## Usage
+
+```html
+<script lang="ts">
+    import type { SEOWebPage } from '@indaco/sveo/types.js';
+    import { JsonLdWebPage } from '@indaco/sveo/schemaorg';
+
+    const pageData: SEOWebPage = {
+        url: website.baseURL,
+        title: 'Home Page',
+        description: 'This is the description for the Home Page',
+        keywords: 'sveltekit, components, tests, vitest',
+        opengraph: {
+            type: OpenGraphType.Website
+        },
+        twitter: {
+            type: TwitterCardType.Summary
+        }
+    }
+
+    <JsonLdWebPage data={pageData} />
+</script>
+```
+
+Output
+
+```html
+<script type="application/ld+json">{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Home Page",
+  "description": "This is the description for the Home Page",
+  "keywords": "sveltekit, components, tests, jest"
+}
+</script>
+```
+
+## Properties
+
+| Property | Type         | Required | Description                             |
+| :------- | :----------: | :------: | :-------------------------------------- |
+| data     | [SEOWebPage] | yes      | Web page metadata to convert to JSON-LD |
+
+<!-- Resource Links -->
+
+[SEOWebPage]: https://github.com/indaco/sveo/blob/913f83920f7f76183fc7d6ea58eebbceeb82f452/src/lib/types.ts#L34-L43
+[WebPage]: https://schema.org/WebPage