TODO

Metadata

The metadata utility is a simple utility that allows you to add metadata to the pages. It simplifies the process of adding metadata to Svelte Kit pages.

API

Name Type Default

title The title of the page. The value will be rendered in a <title> tag.

string

description The description of the page. The value will be rendered in a <meta name="description"> tag.

string

locale The locale of the page. The value will be rendered in a <meta property="language"> tag.

string

og Open Graph metadata

object

title The title of the page. The value will be rendered in a <meta property="og:title"> tag.

string

description The description of the page. The value will be rendered in a <meta property="og:description"> tag.

string

url The URL of the page. The value will be rendered in a <meta property="og:url"> tag.

string

siteName The site name. The value will be rendered in a <meta property="og:site_name"> tag.

string

image The image URL. The value will be rendered in a <meta property="og:image"> tag.

string

type The type of the page. The value will be rendered in a <meta property="og:type"> tag.

string

twitter Twitter metadata. If undefined, will use og data.

object

title The title of the page. The value will be rendered in a <meta property="twitter:title"> tag.

string

description The description of the page. The value will be rendered in a <meta property="twitter:description"> tag.

string

card The card type. The value will be rendered in a <meta property="twitter:card"> tag.

string

image The image URL. The value will be rendered in a <meta property="twitter:image"> tag.

string

canonical The canonical URL of the page. The value will be rendered in a <link rel="canonical"> tag.

string

alternates Alternate URLs

object

[lang] Record of langs to URL for each language.

string

Usage

A common approach for using this component, is that you load your metadata in your +layout[.server].ts or +page[.server].ts files and you use them in the respective svelte files.

+layout.server.ts

  
        import type { Metadata } from '@mikededo/aero-ui';
 
import type { LayoutServerLoad } from './$types';
 
// For a route like /products/:id
export const load: LayoutServrLoad = async ({ params, url }) => {
  const { id } = params;
 
  // Fetch your product
  const { name, description, image_url } = await fetch(`/api/products/${id}`);
 
  return {
    metadata: {
      title: '{name} - SvelteShop',
      description,
      og: {
        title: '{name} - SvelteShop',
        description,
        image: image_url,
        siteName: url.pathname,
        type: 'website'
      }
    } satisfies Metadata
  };
};

Then, in your +layout.svelte file:

+layout.svelte

  
        <script lang="ts">
  import { Metadata, Meta } from '@mikededo/aero-ui';
  import type { Snippte } from 'svelte';
 
  type Props = { data: { metadata: Metadata }, children: Snippet };
  let { data, children }: Props = $props();
</script>
 
<Meta {data.metadata} />
{@render children()}

Templating

To be defined :)

Js indicator

Tailwind indicator