@getvitops/astro 0.1.1 → 0.3.0

package/src/components/NodeRenderer.astro

@@ -0,0 +1,27 @@
+---
+import { nodesToHtml } from '@getvitops/utils';
+import { t } from '@getvitops/utils';
+import type { ContentNode, Localizable, Attrs } from '@getvitops/utils';
+
+interface Props {
+  nodes: ContentNode[];
+  attrs?: Attrs;
+  locale?: string;
+  defaultLocale?: string;
+}
+
+const {
+  nodes,
+  attrs,
+  locale = 'en',
+  defaultLocale = 'en',
+} = Astro.props;
+
+const resolveText = (value: Localizable) => t(value, locale, defaultLocale);
+const htmlString = nodesToHtml(nodes, resolveText);
+---
+
+{attrs
+  ? <div {...attrs} set:html={htmlString} />
+  : <Fragment set:html={htmlString} />
+}

package/src/components/Popover.astro

@@ -0,0 +1,90 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  id: string;
+  trigger?: {
+    label: string;
+    icon?: string;
+    class?: string;
+    attrs?: Record<string, string | number | boolean>;
+  };
+  type?: 'auto' | 'manual';
+  as?: 'div' | 'dialog';
+  class?: string;
+  anchorName?: string;
+  positionArea?: string;
+  /** Resolve semantic icon names to fully-qualified astro-icon names.
+   *  Defaults to pass-through (expects already-qualified names like 'fa7-solid:bars'). */
+  iconResolver?: (name: string) => string;
+}
+
+const {
+  id,
+  trigger,
+  type = 'auto',
+  as: Element = 'div',
+  class: className,
+  anchorName,
+  positionArea = 'block-end center',
+  iconResolver = (name: string) => name,
+} = Astro.props;
+
+const styles = anchorName
+  ? `position-anchor: --${anchorName}; position-area: ${positionArea}`
+  : undefined;
+
+const anchorStyles = anchorName ? `anchor-name: --${anchorName}` : undefined;
+
+const { class: triggerAttrClass, ...triggerRestAttrs } = trigger?.attrs ?? {};
+---
+
+{/* Trigger button - slot with default fallback */}
+<slot name="trigger">
+  <button
+    popovertarget={id}
+    class:list={['popover-trigger', trigger?.class, triggerAttrClass]}
+    style={anchorStyles}
+    aria-label={trigger?.label || 'Open'}
+    {...triggerRestAttrs}
+  >
+  <span class={trigger?.icon ? 'sr-only' : ''}>{trigger?.label || 'Open'}</span>
+    {trigger?.icon && <Icon name={iconResolver(trigger.icon)} class="not-sr-only" />}
+  </button>
+</slot>
+
+
+<Element
+  id={id}
+  popover={type}
+  class:list={["popover", className]}
+  style={styles}
+>
+  <slot />
+</Element>
+
+<style>
+  .popover {
+    margin: 0;
+    inset: auto;
+    border: none;
+    padding: 0;
+  }
+
+  .popover[popover]::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .popover-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+  }
+</style>

package/src/components/Subgrid.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
+
+export interface Props extends HTMLAttributes<'ul'> {};
+
+const { class: className, style } = Astro.props;
+
+const nodes = parseRenderedSlots(await Astro.slots.render('default'));
+const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
+---
+
+<style>
+  ul {
+    grid-template-columns: repeat(var(--cols, var(--_cols, 1)), minmax(0, 1fr));
+  }
+
+  li {
+    --current-row: round(down, calc((sibling-index() - 1) / var(--cols)), 1);
+      
+      /* Apply the extra gap ONLY if the row index is > 0.
+         We use clamp to ensure the multiplier is either 0 or 1.
+      */
+      --row-gap-multiplier: clamp(0, var(--current-row), 1);
+      margin-block-start: calc(var(--row-gap-multiplier) * var(--row-margin));
+  }
+</style>
+<ul class:list={["grid", className]} style={styleList({'--num-items': slots.length}, style)}>
+  {slots.map((slot) => (
+    <li class:list={["grid grid-rows-subgrid row-span-(--row-span)", getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
+  ))}
+</ul>

package/src/components/WebComponentLoader.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * Generic loader for web components.
+ * Uses import.meta.glob to include all WC*.ts files in the dependency graph,
+ * then dynamically loads the requested one on the client.
+ *
+ * @example
+ * <WebComponentLoader src="WCColorSchemeToggle" />
+ * <color-scheme-toggle></color-scheme-toggle>
+ */
+interface Props {
+  src: string;
+}
+
+const { src } = Astro.props;
+---
+
+<wc-loader data-src={src}></wc-loader>
+
+<script>
+  // All web components matching this pattern are included in the build
+  const modules = import.meta.glob<{ default?: unknown }>(
+    '/src/components/web-components/WC*.ts'
+  );
+
+  // Load requested modules
+  document.querySelectorAll<HTMLElement>('wc-loader[data-src]').forEach(async (el) => {
+    const name = el.dataset.src;
+    if (!name) return;
+
+    // Build the full path from the component name
+    const path = `/src/components/web-components/${name}.ts`;
+    const loader = modules[path];
+
+    if (loader) {
+      await loader();
+      el.remove(); // Clean up the loader element
+    } else {
+      console.warn(`[WebComponentLoader] Module not found: ${path}`);
+    }
+  });
+</script>
+
+<style>
+  wc-loader {
+    display: none;
+  }
+</style>

package/src/schemas/Article.astro

@@ -0,0 +1,69 @@
+---
+export interface Props {
+  headline: string;
+  description?: string;
+  image?: string | string[];
+  datePublished: string;
+  dateModified?: string;
+  author: {
+    name: string;
+    url?: string;
+  } | {
+    name: string;
+    url?: string;
+  }[];
+  publisher?: {
+    name: string;
+    logo?: string;
+  };
+  mainEntityOfPage?: string;
+  articleSection?: string;
+  wordCount?: number;
+  keywords?: string[];
+}
+
+const {
+  headline,
+  description,
+  image,
+  datePublished,
+  dateModified,
+  author,
+  publisher,
+  mainEntityOfPage,
+  articleSection,
+  wordCount,
+  keywords,
+} = Astro.props;
+
+const authors = Array.isArray(author) ? author : [author];
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  headline,
+  ...(description && { description }),
+  ...(image && { image: Array.isArray(image) ? image : [image] }),
+  datePublished,
+  ...(dateModified && { dateModified }),
+  author: authors.map(a => ({
+    '@type': 'Person',
+    name: a.name,
+    ...(a.url && { url: a.url }),
+  })),
+  ...(publisher && {
+    publisher: {
+      '@type': 'Organization',
+      name: publisher.name,
+      ...(publisher.logo && { logo: { '@type': 'ImageObject', url: publisher.logo } }),
+    },
+  }),
+  ...(mainEntityOfPage && { mainEntityOfPage: { '@type': 'WebPage', '@id': mainEntityOfPage } }),
+  ...(articleSection && { articleSection }),
+  ...(wordCount && { wordCount }),
+  ...(keywords && { keywords: keywords.join(', ') }),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />

package/src/schemas/BookActions.astro

@@ -0,0 +1,81 @@
+---
+export interface Props {
+  name: string;
+  author: string | string[];
+  url: string;
+  workExample?: {
+    isbn?: string;
+    bookEdition?: string;
+    bookFormat?: 'AudiobookFormat' | 'EBook' | 'GraphicNovel' | 'Hardcover' | 'Paperback';
+    potentialAction?: {
+      type: 'ReadAction' | 'BorrowAction' | 'BuyAction';
+      target: string;
+      expectsAcceptanceOf?: {
+        availabilityStarts?: string;
+        availabilityEnds?: string;
+        category?: 'free' | 'subscription' | 'purchase' | 'rental';
+      };
+    };
+  }[];
+  sameAs?: string[];
+  image?: string;
+  description?: string;
+}
+
+const {
+  name,
+  author,
+  url,
+  workExample,
+  sameAs,
+  image,
+  description,
+} = Astro.props;
+
+const authors = Array.isArray(author) ? author : [author];
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Book',
+  name,
+  author: authors.map(a => ({
+    '@type': 'Person',
+    name: a,
+  })),
+  url,
+  ...(sameAs && { sameAs }),
+  ...(image && { image }),
+  ...(description && { description }),
+  ...(workExample && {
+    workExample: workExample.map(we => ({
+      '@type': 'Book',
+      ...(we.isbn && { isbn: we.isbn }),
+      ...(we.bookEdition && { bookEdition: we.bookEdition }),
+      ...(we.bookFormat && { bookFormat: `https://schema.org/${we.bookFormat}` }),
+      ...(we.potentialAction && {
+        potentialAction: {
+          '@type': we.potentialAction.type,
+          target: {
+            '@type': 'EntryPoint',
+            urlTemplate: we.potentialAction.target,
+            actionPlatform: [
+              'https://schema.org/DesktopWebPlatform',
+              'https://schema.org/AndroidPlatform',
+              'https://schema.org/IOSPlatform',
+            ],
+          },
+          ...(we.potentialAction.expectsAcceptanceOf && {
+            expectsAcceptanceOf: {
+              '@type': 'Offer',
+              ...we.potentialAction.expectsAcceptanceOf,
+            },
+          }),
+        },
+      }),
+    })),
+  }),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />

package/src/schemas/Breadcrumb.astro

@@ -0,0 +1,26 @@
+---
+export interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export interface Props {
+  items: BreadcrumbItem[];
+}
+
+const { items } = Astro.props;
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: items.map((item, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    name: item.name,
+    item: item.url,
+  })),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />

package/src/schemas/Carousel.astro

@@ -0,0 +1,34 @@
+---
+export interface CarouselItem {
+  type: 'Article' | 'Recipe' | 'Movie' | 'Course' | 'Restaurant' | 'Product';
+  name: string;
+  url: string;
+  image?: string;
+  description?: string;
+}
+
+export interface Props {
+  items: CarouselItem[];
+}
+
+const { items } = Astro.props;
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  itemListElement: items.map((item, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    item: {
+      '@type': item.type,
+      name: item.name,
+      url: item.url,
+      ...(item.image && { image: item.image }),
+      ...(item.description && { description: item.description }),
+    },
+  })),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />

package/src/schemas/CourseList.astro

@@ -0,0 +1,122 @@
+---
+export interface CourseInstance {
+  courseMode: 'online' | 'onsite' | 'blended';
+  startDate?: string;
+  endDate?: string;
+  location?: {
+    name: string;
+    address?: string;
+  };
+  instructor?: {
+    name: string;
+    url?: string;
+  };
+  courseSchedule?: {
+    repeatFrequency: string;
+    repeatCount?: number;
+  };
+}
+
+export interface Course {
+  name: string;
+  description: string;
+  provider: {
+    name: string;
+    url?: string;
+  };
+  url?: string;
+  image?: string;
+  offers?: {
+    price: number | string;
+    priceCurrency: string;
+    availability?: 'InStock' | 'SoldOut' | 'PreOrder';
+    validFrom?: string;
+  };
+  hasCourseInstance?: CourseInstance[];
+  educationalLevel?: string;
+  about?: string[];
+  teaches?: string[];
+  financialAidEligible?: boolean;
+  inLanguage?: string;
+  duration?: string;
+}
+
+export interface Props {
+  courses: Course[];
+}
+
+const { courses } = Astro.props;
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  itemListElement: courses.map((course, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    item: {
+      '@type': 'Course',
+      name: course.name,
+      description: course.description,
+      provider: {
+        '@type': 'Organization',
+        name: course.provider.name,
+        ...(course.provider.url && { sameAs: course.provider.url }),
+      },
+      ...(course.url && { url: course.url }),
+      ...(course.image && { image: course.image }),
+      ...(course.offers && {
+        offers: {
+          '@type': 'Offer',
+          price: course.offers.price,
+          priceCurrency: course.offers.priceCurrency,
+          ...(course.offers.availability && { availability: `https://schema.org/${course.offers.availability}` }),
+          ...(course.offers.validFrom && { validFrom: course.offers.validFrom }),
+        },
+      }),
+      ...(course.hasCourseInstance && {
+        hasCourseInstance: course.hasCourseInstance.map(instance => ({
+          '@type': 'CourseInstance',
+          courseMode: instance.courseMode,
+          ...(instance.startDate && { startDate: instance.startDate }),
+          ...(instance.endDate && { endDate: instance.endDate }),
+          ...(instance.location && {
+            location: {
+              '@type': 'Place',
+              name: instance.location.name,
+              ...(instance.location.address && {
+                address: {
+                  '@type': 'PostalAddress',
+                  streetAddress: instance.location.address,
+                },
+              }),
+            },
+          }),
+          ...(instance.instructor && {
+            instructor: {
+              '@type': 'Person',
+              name: instance.instructor.name,
+              ...(instance.instructor.url && { url: instance.instructor.url }),
+            },
+          }),
+          ...(instance.courseSchedule && {
+            courseSchedule: {
+              '@type': 'Schedule',
+              repeatFrequency: instance.courseSchedule.repeatFrequency,
+              ...(instance.courseSchedule.repeatCount && { repeatCount: instance.courseSchedule.repeatCount }),
+            },
+          }),
+        })),
+      }),
+      ...(course.educationalLevel && { educationalLevel: course.educationalLevel }),
+      ...(course.about && { about: course.about }),
+      ...(course.teaches && { teaches: course.teaches }),
+      ...(course.financialAidEligible && { financialAidEligible: 'true' }),
+      ...(course.inLanguage && { inLanguage: course.inLanguage }),
+      ...(course.duration && { timeRequired: course.duration }),
+    },
+  })),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />

package/src/schemas/Dataset.astro

@@ -0,0 +1,127 @@
+---
+export interface Props {
+  name: string;
+  description: string;
+  url?: string;
+  sameAs?: string;
+  identifier?: string | string[];
+  keywords?: string[];
+  license?: string;
+  isAccessibleForFree?: boolean;
+  creator?: {
+    type: 'Person' | 'Organization';
+    name: string;
+    url?: string;
+  };
+  funder?: {
+    type: 'Person' | 'Organization';
+    name: string;
+  };
+  includedInDataCatalog?: {
+    name: string;
+    url?: string;
+  };
+  distribution?: {
+    contentUrl: string;
+    encodingFormat: string;
+    contentSize?: string;
+  }[];
+  temporalCoverage?: string;
+  spatialCoverage?: {
+    type: 'Place';
+    geo?: {
+      latitude: number;
+      longitude: number;
+      box?: string;
+    };
+  };
+  variableMeasured?: string | string[];
+  measurementTechnique?: string;
+  datePublished?: string;
+  dateModified?: string;
+}
+
+const {
+  name,
+  description,
+  url,
+  sameAs,
+  identifier,
+  keywords,
+  license,
+  isAccessibleForFree,
+  creator,
+  funder,
+  includedInDataCatalog,
+  distribution,
+  temporalCoverage,
+  spatialCoverage,
+  variableMeasured,
+  measurementTechnique,
+  datePublished,
+  dateModified,
+} = Astro.props;
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Dataset',
+  name,
+  description,
+  ...(url && { url }),
+  ...(sameAs && { sameAs }),
+  ...(identifier && { identifier }),
+  ...(keywords && { keywords }),
+  ...(license && { license }),
+  ...(isAccessibleForFree !== undefined && { isAccessibleForFree }),
+  ...(creator && {
+    creator: {
+      '@type': creator.type,
+      name: creator.name,
+      ...(creator.url && { url: creator.url }),
+    },
+  }),
+  ...(funder && {
+    funder: {
+      '@type': funder.type,
+      name: funder.name,
+    },
+  }),
+  ...(includedInDataCatalog && {
+    includedInDataCatalog: {
+      '@type': 'DataCatalog',
+      name: includedInDataCatalog.name,
+      ...(includedInDataCatalog.url && { url: includedInDataCatalog.url }),
+    },
+  }),
+  ...(distribution && {
+    distribution: distribution.map(d => ({
+      '@type': 'DataDownload',
+      contentUrl: d.contentUrl,
+      encodingFormat: d.encodingFormat,
+      ...(d.contentSize && { contentSize: d.contentSize }),
+    })),
+  }),
+  ...(temporalCoverage && { temporalCoverage }),
+  ...(spatialCoverage && {
+    spatialCoverage: {
+      '@type': 'Place',
+      ...(spatialCoverage.geo && {
+        geo: spatialCoverage.geo.box
+          ? { '@type': 'GeoShape', box: spatialCoverage.geo.box }
+          : {
+              '@type': 'GeoCoordinates',
+              latitude: spatialCoverage.geo.latitude,
+              longitude: spatialCoverage.geo.longitude,
+            },
+      }),
+    },
+  }),
+  ...(variableMeasured && { variableMeasured }),
+  ...(measurementTechnique && { measurementTechnique }),
+  ...(datePublished && { datePublished }),
+  ...(dateModified && { dateModified }),
+};
+---
+
+<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+<slot />