@thenewdynamic/astro-seo 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thenewdynamic/astro-seo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Astro integration for SEO meta tags and structured data",
   "author": "The New Dynamic",
@@ -23,7 +23,7 @@
   ],
   "files": [
     "dist",
-    "src/components"
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/core/getData.ts

@@ -0,0 +1,134 @@
+import type { SeoUserConfig, SeoEntry, SeoData } from '../types.js'
+import { escapeString, makeAbsUrl, isHome, getExcerpt } from '../utils.js'
+
+export const makeGetData = (config: SeoUserConfig) => (entry: SeoEntry): SeoData => {
+  const { site, resolveImage, transformEntry } = config
+  const { url: baseURL } = site
+  const absUrl = makeAbsUrl(baseURL)
+
+  const {
+    title: siteTitle,
+    description: siteDescription,
+    image: siteImage,
+    seo: { twitterHandle: siteTwitterHandle } = {},
+    prod,
+  } = site
+
+  let {
+    title = 'Missing',
+    type = 'website',
+    _type,
+    _updatedAt,
+    time_start,
+    time_end,
+    venue,
+    date,
+    url,
+    description,
+    descriptionText,
+    locale = 'en_US',
+    image,
+    authors = [],
+    bodyText,
+    translation,
+    twitterCard = 'summary_large_image',
+    twitterHandle = siteTwitterHandle,
+    twitterCreatorHandle = siteTwitterHandle,
+  } = entry
+
+  const seo = entry.seo || {}
+  const {
+    title: seoTitle,
+    description: seoDescription,
+    image: seoImage,
+    canonical: seoCanonical,
+    private: seoPrivate = false,
+  } = seo
+
+  type = _type === 'post' ? 'article' : 'website'
+  url = url ? absUrl(url) || undefined : undefined
+
+  const isPrivate = seoPrivate || !(prod?.() ?? true)
+  const canonical = seoCanonical || url
+
+  title = seoTitle
+    ? seoTitle
+    : title
+    ? escapeString(title as string)
+    : siteTitle ?? 'Missing'
+
+  description = seoDescription
+    ? seoDescription
+    : descriptionText
+    ? escapeString(descriptionText)
+    : description && typeof description === 'string'
+    ? escapeString(description)
+    : bodyText
+    ? getExcerpt(bodyText, 300)
+    : siteDescription
+
+  let ogTitle = title
+
+  if (siteTitle && !isHome(entry)) {
+    title = `${title} | ${siteTitle}`
+  } else if (isHome(entry)) {
+    title = site.title
+    ogTitle = site.title
+  }
+
+  const resolvedSiteImage = siteImage
+  image = seoImage || image || resolvedSiteImage
+
+  let imageAlt = ''
+
+  if (image && typeof image !== 'string') {
+    const img = image as Record<string, unknown>
+    imageAlt = img.altText as string ?? ''
+    image = resolveImage
+      ? resolveImage(img, { width: 1000 })
+      : (img.src ?? img.url ?? '') as string
+  } else if (image && typeof image === 'string') {
+    image = baseURL + image
+  }
+
+  const languageAlternates = translation
+    ? [{ href: translation.url, hrefLang: translation.lang }]
+    : undefined
+  const localeAlternate = translation ? [translation.lang] : undefined
+
+  let output: SeoData = {
+    _type,
+    title,
+    publishedTime: date,
+    modifiedTime: _updatedAt,
+    authors: authors?.length
+      ? authors.map((a) => ({ name: a.title ?? a.name ?? '', url: a.url ? absUrl(a.url) : false }))
+      : [],
+    description,
+    canonical,
+    noindex: isPrivate,
+    nofollow: isPrivate,
+    charset: 'UTF-8',
+    ogTitle,
+    type,
+    image: image as string | undefined,
+    imageAlt,
+    url,
+    locale: locale as string,
+    localeAlternate,
+    languageAlternates,
+    siteTitle: siteTitle ?? '',
+    twitterCard: twitterCard as string,
+    twitterHandle: twitterHandle as string | undefined,
+    twitterCreatorHandle: twitterCreatorHandle as string | undefined,
+    venue,
+    timeStart: time_start,
+    timeEnd: time_end,
+  }
+
+  if (transformEntry) {
+    output = { ...output, ...transformEntry(entry) }
+  }
+
+  return output
+}

package/src/core/getMetasData.ts

@@ -0,0 +1,70 @@
+import type { SeoEntry } from '../types.js'
+import type { makeGetData } from './getData.js'
+
+export const makeGetMetasData =
+  (getData: ReturnType<typeof makeGetData>) =>
+  (entry: SeoEntry): Record<string, unknown> => {
+    const {
+      title,
+      description,
+      canonical,
+      noindex,
+      nofollow,
+      charset,
+      ogTitle,
+      type,
+      authors,
+      publishedTime,
+      modifiedTime,
+      image,
+      imageAlt,
+      url,
+      locale,
+      localeAlternate,
+      languageAlternates,
+      siteTitle,
+      twitterCard,
+      twitterHandle,
+      twitterCreatorHandle,
+    } = getData(entry)
+
+    return {
+      title,
+      description,
+      canonical,
+      noindex,
+      nofollow,
+      charset,
+      languageAlternates,
+      openGraph: {
+        basic: {
+          title: ogTitle,
+          type,
+          image,
+          url,
+        },
+        optional: {
+          locale,
+          localeAlternate,
+          description,
+          siteName: siteTitle,
+        },
+        image: {
+          alt: imageAlt,
+        },
+        ...(type === 'article'
+          ? {
+              publishedTime,
+              modifiedTime,
+              authors: authors.map((a) => a.name),
+            }
+          : {}),
+      },
+      twitter: {
+        description,
+        card: twitterCard,
+        site: twitterHandle ? '@' + twitterHandle : undefined,
+        creator: twitterCreatorHandle ? '@' + twitterCreatorHandle : undefined,
+      },
+    }
+  }

package/src/core/getStructuredData.ts

@@ -0,0 +1,16 @@
+import type { SeoEntry } from '../types.js'
+import type { makeGetData } from './getData.js'
+import { parseBase, parseEvent } from './sd.js'
+
+export const makeGetStructuredData =
+  (getData: ReturnType<typeof makeGetData>) =>
+  (entry: SeoEntry): Record<string, unknown> => {
+    const data = getData(entry)
+    let output = parseBase(data)
+
+    if (data._type === 'event') {
+      output = { ...output, ...parseEvent(data) }
+    }
+
+    return output
+  }

package/src/core/index.ts

@@ -0,0 +1,11 @@
+import type { SeoUserConfig, SeoUtils } from '../types.js'
+import { makeGetData } from './getData.js'
+import { makeGetMetasData } from './getMetasData.js'
+import { makeGetStructuredData } from './getStructuredData.js'
+
+export const createSeoUtils = (config: SeoUserConfig): SeoUtils => {
+  const getData = makeGetData(config)
+  const getMetasData = makeGetMetasData(getData)
+  const getStructuredData = makeGetStructuredData(getData)
+  return { getData, getMetasData, getStructuredData }
+}

package/src/core/sd.ts

@@ -0,0 +1,51 @@
+import type { SeoData } from '../types.js'
+
+export const parseBase = (data: SeoData): Record<string, unknown> => {
+  const { description, ogTitle, type, publishedTime, modifiedTime, image, authors, url } = data
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': type,
+    headline: ogTitle,
+    url,
+    image: [image],
+    description,
+    ...(authors?.length ? {
+      author: authors.map(({ name, url }) => ({
+        '@type': 'Person',
+        name,
+        url,
+      }))
+    } : {}),
+    ...(type === 'article' ? {
+      datePublished: publishedTime,
+      dateModified: modifiedTime,
+    } : {}),
+  }
+}
+
+export const parseVenue = (data: Record<string, unknown>): Record<string, unknown> => {
+  const { title, address_1: address, city, country, state, zip } = data as Record<string, string>
+  return {
+    '@type': 'Place',
+    name: title,
+    address: {
+      '@type': 'PostalAddress',
+      streetAddress: address,
+      addressLocality: city,
+      postalCode: zip,
+      addressRegion: state,
+      addressCountry: country,
+    },
+  }
+}
+
+export const parseEvent = (data: SeoData): Record<string, unknown> => {
+  const { timeStart, timeEnd, venue } = data
+  return {
+    '@type': 'Event',
+    startDate: timeStart,
+    endDate: timeEnd,
+    ...(venue ? { location: parseVenue(venue as Record<string, unknown>) } : {}),
+  }
+}

package/src/index.ts

@@ -0,0 +1,57 @@
+import { fileURLToPath } from 'node:url'
+import { resolve } from 'node:path'
+import type { AstroIntegration } from 'astro'
+import type { Plugin } from 'vite'
+import type { TndSeoOptions } from './types.js'
+
+const VIRTUAL_MODULE_ID = 'virtual:tnd/seo'
+const RESOLVED_ID = '\0' + VIRTUAL_MODULE_ID
+
+const VIRTUAL_MODULE_TYPES = `
+declare module 'virtual:tnd/seo' {
+  import type { SeoEntry, SeoData } from '@thenewdynamic/astro-seo'
+  export const getData: (entry: SeoEntry) => SeoData
+  export const getMetasData: (entry: SeoEntry) => Record<string, unknown>
+  export const getStructuredData: (entry: SeoEntry) => Record<string, unknown>
+}
+`
+
+export default function tndSeo(options: TndSeoOptions = {}): AstroIntegration {
+  let configFilePath: string
+  let coreModulePath: string
+
+  return {
+    name: '@thenewdynamic/astro-seo',
+    hooks: {
+      'astro:config:setup': ({ config, updateConfig }) => {
+        const root = fileURLToPath(config.root)
+        const userConfigPath = options.configPath ?? './seo.config'
+        configFilePath = resolve(root, userConfigPath)
+        coreModulePath = fileURLToPath(new URL('./core/index.js', import.meta.url))
+
+        const plugin: Plugin = {
+          name: 'vite-plugin-tnd-seo',
+          resolveId(id) {
+            if (id === VIRTUAL_MODULE_ID) return RESOLVED_ID
+          },
+          load(id) {
+            if (id !== RESOLVED_ID) return
+            return [
+              `import userConfig from '${configFilePath}'`,
+              `import { createSeoUtils } from '${coreModulePath}'`,
+              `export const { getData, getMetasData, getStructuredData } = createSeoUtils(userConfig)`,
+            ].join('\n')
+          },
+        }
+
+        updateConfig({ vite: { plugins: [plugin] } })
+      },
+      'astro:config:done': ({ injectTypes }) => {
+        injectTypes({ filename: 'virtual-tnd-seo.d.ts', content: VIRTUAL_MODULE_TYPES })
+      },
+    },
+  }
+}
+
+export type { SeoUserConfig, SeoEntry, SeoData, SeoUtils, TndSeoOptions } from './types.js'
+export { flattenEntry } from './utils.js'

package/src/types.ts

@@ -0,0 +1,92 @@
+export interface SiteConfig {
+  url: string
+  title: string
+  description?: string
+  image?: string | Record<string, unknown>
+  seo?: {
+    title?: string
+    twitterHandle?: string
+  }
+  prod?: () => boolean
+}
+
+export interface ImageOptions {
+  width?: number
+  height?: number
+  [key: string]: unknown
+}
+
+export interface SeoEntry {
+  _type?: string
+  title?: string
+  type?: string
+  _updatedAt?: string
+  time_start?: string
+  time_end?: string
+  venue?: unknown
+  date?: string
+  url?: string
+  description?: string | unknown[]
+  descriptionText?: string
+  locale?: string
+  image?: string | Record<string, unknown>
+  authors?: Array<{ title?: string; name?: string; url?: string }>
+  bodyText?: string
+  translation?: { url: string; lang: string }
+  twitterCard?: string
+  twitterHandle?: string
+  twitterCreatorHandle?: string
+  home?: boolean
+  seo?: {
+    title?: string
+    description?: string
+    image?: Record<string, unknown>
+    canonical?: string
+    private?: boolean
+  }
+  [key: string]: unknown
+}
+
+export interface SeoData {
+  _type?: string
+  title: string
+  publishedTime?: string
+  modifiedTime?: string
+  authors: Array<{ name: string; url: string | false }>
+  description?: string
+  canonical?: string | false
+  noindex: boolean
+  nofollow: boolean
+  charset: string
+  ogTitle: string
+  type: string
+  image?: string | false
+  imageAlt: string
+  url?: string | false
+  locale: string
+  localeAlternate?: string[]
+  languageAlternates?: Array<{ href: string; hrefLang: string }>
+  siteTitle: string
+  twitterCard: string
+  twitterHandle?: string
+  twitterCreatorHandle?: string
+  venue?: unknown
+  timeStart?: string
+  timeEnd?: string
+}
+
+export interface SeoUserConfig {
+  site: SiteConfig
+  resolveImage?: (image: Record<string, unknown>, opts?: ImageOptions) => string
+  transformEntry?: (entry: SeoEntry) => Partial<SeoData>
+}
+
+export interface SeoUtils {
+  getData: (entry: SeoEntry) => SeoData
+  getMetasData: (entry: SeoEntry) => Record<string, unknown>
+  getStructuredData: (entry: SeoEntry) => Record<string, unknown>
+}
+
+export interface TndSeoOptions {
+  configPath?: string
+}

package/src/utils.ts

@@ -0,0 +1,30 @@
+export const escapeString = (string: string): string => {
+  if (/[*_"]/.test(string)) {
+    return string.replace('"', '"').replace(/[*_]/g, '')
+  }
+  return string
+}
+
+export const makeAbsUrl = (baseURL: string) => (url: string): string | false => {
+  if (typeof url === 'undefined') return false
+  const separator = url.charAt(0) !== '/' ? '/' : ''
+  return baseURL + separator + url
+}
+
+export const isHome = (entry: Record<string, unknown>): boolean => {
+  return typeof entry.home !== 'undefined' && !!entry.home
+}
+
+export const getExcerpt = (string: string, length = 300): string => {
+  if (string && string.length > length) {
+    return string.substring(0, length) + '...'
+  }
+  return string
+}
+
+export const flattenEntry = (
+  entry: Record<string, unknown> & { data?: Record<string, unknown> }
+): Record<string, unknown> => ({
+  ...entry,
+  ...entry.data,
+})