@datocms/astro 0.1.11 → 0.1.13

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@datocms/astro",
 	"description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
 	"type": "module",
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"sideEffects": false,
 	"repository": {
 		"type": "git",
@@ -24,7 +24,8 @@
 		"./useVideoPlayer": "./src/useVideoPlayer/index.ts",
 		"./VideoPlayer": "./src/VideoPlayer/index.ts",
 		"./Image": "./src/Image/index.ts",
-		"./StructuredText": "./src/StructuredText/index.ts"
+		"./StructuredText": "./src/StructuredText/index.ts",
+		"./Seo": "./src/Seo/index.ts"
 	},
 	"engines": {
 		"node": ">=18.0.0"

package/src/Seo/Seo.astro

@@ -0,0 +1,12 @@
+---
+import { renderMetaTagsToString } from "./renderMetaTagsToString";
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from "./types";
+
+interface Props {
+  data: TitleMetaLinkTag[] | SeoOrFaviconTag[];
+}
+
+const { data } = Astro.props;
+---
+
+<Fragment set:html={renderMetaTagsToString(data)} />

package/src/Seo/index.ts

@@ -0,0 +1,5 @@
+import Seo from "./Seo.astro";
+export * from "./renderMetaTagsToString.js";
+export * from "./types.js";
+
+export { Seo };

package/src/Seo/renderMetaTagsToString.tsx

@@ -0,0 +1,23 @@
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
+
+export function renderMetaTagsToString(
+  data: TitleMetaLinkTag[] | SeoOrFaviconTag[],
+): string {
+  return data
+    .map((tag) => {
+      if (tag.tag === 'title') {
+        return `<title>${tag.content}</title>`;
+      }
+
+      const serializedAttrs = [];
+
+      for (const key in tag.attributes) {
+        if (Object.prototype.hasOwnProperty.call(tag.attributes, key)) {
+          serializedAttrs.push(`${key}="${(tag.attributes as any)[key]}"`);
+        }
+      }
+
+      return `<${tag.tag} ${serializedAttrs.join(' ')} />`;
+    })
+    .join('\n');
+}

package/src/Seo/types.ts

@@ -0,0 +1,113 @@
+export interface TitleMetaLinkTag {
+  /** the tag for the meta information */
+  tag: string;
+  /** the inner content of the meta tag */
+  content?: string | null | undefined;
+  /** the HTML attributes to attach to the meta tag */
+  attributes?: Record<string, string> | null | undefined;
+}
+
+export interface SeoTitleTag {
+  tag: 'title';
+  content: string | null;
+  attributes?: null;
+}
+
+export interface RegularMetaAttributes {
+  name: string;
+  content: string;
+}
+
+export interface OgMetaAttributes {
+  property: string;
+  content: string;
+}
+
+export interface SeoMetaTag {
+  tag: 'meta';
+  content?: null;
+  attributes: RegularMetaAttributes | OgMetaAttributes;
+}
+
+export interface FaviconAttributes {
+  sizes: string;
+  type: string;
+  rel: string;
+  href: string;
+}
+
+export interface AppleTouchIconAttributes {
+  sizes: string;
+  rel: 'apple-touch-icon';
+  href: string;
+}
+
+export interface SeoLinkTag {
+  tag: 'link';
+  content?: null;
+  attributes: FaviconAttributes | AppleTouchIconAttributes;
+}
+
+export type SeoTag = SeoTitleTag | SeoMetaTag;
+export type FaviconTag = SeoMetaTag | SeoLinkTag;
+export type SeoOrFaviconTag = SeoTag | FaviconTag;
+
+export const isSeoTitleTag = (tag: any): tag is SeoTitleTag =>
+  'tag' in tag && tag.tag === 'title' && !tag.attributes;
+
+export const isSeoTag = (tag: any): tag is SeoTag =>
+  isSeoTitleTag(tag) || isSeoMetaTag(tag);
+
+export const isFaviconAttributes = (tag: any): tag is FaviconAttributes =>
+  'sizes' in tag &&
+  typeof tag.sizes === 'string' &&
+  'type' in tag &&
+  typeof tag.type === 'string' &&
+  'rel' in tag &&
+  typeof tag.rel === 'string' &&
+  'href' in tag &&
+  typeof tag.href === 'string';
+
+export const isAppleTouchIconAttributes = (
+  tag: any,
+): tag is AppleTouchIconAttributes =>
+  'sizes' in tag &&
+  typeof tag.sizes === 'string' &&
+  'rel' in tag &&
+  tag.rel === 'apple-touch-icon' &&
+  'href' in tag &&
+  typeof tag.href === 'string';
+
+export const isSeoLinkTag = (tag: any): tag is SeoLinkTag =>
+  'tag' in tag &&
+  tag.tag === 'link' &&
+  !tag.content &&
+  (isFaviconAttributes(tag.attributes) ||
+    isAppleTouchIconAttributes(tag.attributes));
+
+export const isFaviconTag = (tag: any): tag is FaviconTag =>
+  isSeoMetaTag(tag) || isSeoLinkTag(tag);
+
+export const isSeoOrFaviconTag = (
+  seoOrFaviconTag: TitleMetaLinkTag | SeoOrFaviconTag,
+): seoOrFaviconTag is SeoOrFaviconTag =>
+  isSeoTag(seoOrFaviconTag) || isFaviconTag(seoOrFaviconTag);
+
+export const isRegularMetaAttributes = (
+  attributes: RegularMetaAttributes | OgMetaAttributes,
+): attributes is RegularMetaAttributes =>
+  'name' in attributes && 'content' in attributes;
+
+export const isOgMetaAttributes = (
+  attributes: RegularMetaAttributes | OgMetaAttributes,
+): attributes is OgMetaAttributes =>
+  'property' in attributes && 'content' in attributes;
+
+export const isSeoMetaTag = (
+  seoMetaTag: SeoOrFaviconTag,
+): seoMetaTag is SeoMetaTag =>
+  'tag' in seoMetaTag &&
+  seoMetaTag.tag === 'meta' &&
+  !seoMetaTag.content &&
+  (isRegularMetaAttributes(seoMetaTag.attributes) ||
+    isOgMetaAttributes(seoMetaTag.attributes));

package/src/StructuredText/nodes/Code.astro

@@ -1,13 +1,13 @@
 ---
-import type { Code } from "datocms-structured-text-utils";
+import { Code as AstroCode } from "astro:components";
+import type { Code as CodeNode } from "datocms-structured-text-utils";
 
 interface Props {
-  node: Code;
+  // https://www.datocms.com/docs/structured-text/dast#code
+  node: CodeNode;
 }
 
 const { node } = Astro.props;
-
-const { code, language } = node;
 ---
 
-<pre class={language}>{code}</pre>
+<AstroCode code={node.code} lang={node.language as "js"} />