@happyvertical/smrt-content 0.30.0

package/dist/svelte/api.d.ts

@@ -0,0 +1,3 @@
+export declare function normalizeApiBaseUrl(apiBaseUrl: string): string;
+export declare function joinApiUrl(apiBaseUrl: string, path: string): string;
+//# sourceMappingURL=api.d.ts.map

package/dist/svelte/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/svelte/api.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMnE"}

package/dist/svelte/api.js

@@ -0,0 +1,10 @@
+export function normalizeApiBaseUrl(apiBaseUrl) {
+    return apiBaseUrl.endsWith('/') ? apiBaseUrl.slice(0, -1) : apiBaseUrl;
+}
+export function joinApiUrl(apiBaseUrl, path) {
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    const normalizedBaseUrl = normalizeApiBaseUrl(apiBaseUrl);
+    return normalizedBaseUrl
+        ? `${normalizedBaseUrl}${normalizedPath}`
+        : normalizedPath;
+}

package/dist/svelte/components/ArticleCard.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+/**
+ * ArticleCard - Displays an article preview card
+ *
+ * Shows article title, excerpt, metadata, and tags in a card format.
+ * Links to the full article page.
+ */
+import { Badge, Card } from '@happyvertical/smrt-ui/ui';
+import type { Article } from '../types.js';
+
+export interface Props {
+  /** Article data to display */
+  article: Article;
+  /** Show article excerpt/description */
+  showExcerpt?: boolean;
+  /** Show publication date */
+  showDate?: boolean;
+  /** Show author name */
+  showAuthor?: boolean;
+  /** Show tags */
+  showTags?: boolean;
+}
+
+const {
+  article,
+  showExcerpt = true,
+  showDate = true,
+  showAuthor = true,
+  showTags = false,
+}: Props = $props();
+
+const _formattedDate = $derived(
+  article.publish_date
+    ? new Date(article.publish_date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    : null,
+);
+
+const _tags = $derived.by(() => {
+  if (!article.tags) return [];
+  // Handle JSON array (as string or actual array)
+  if (Array.isArray(article.tags)) return article.tags.filter(Boolean);
+  if (typeof article.tags === 'string') {
+    // Try parsing as JSON first
+    if (article.tags.startsWith('[')) {
+      try {
+        const parsed = JSON.parse(article.tags);
+        return Array.isArray(parsed) ? parsed.filter(Boolean) : [];
+      } catch {
+        // Fall through to comma-separated
+      }
+    }
+    // Comma-separated string
+    return article.tags
+      .split(',')
+      .map((t: string) => t.trim())
+      .filter(Boolean);
+  }
+  return [];
+});
+</script>
+
+<a 
+  href="/articles/{article.slug}" 
+  class="article-link"
+>
+  <Card hoverable>
+    <article>
+      <h3 class="title">{article.title}</h3>
+
+      {#if showExcerpt && article.description}
+        <p class="excerpt">{article.description}</p>
+      {/if}
+
+      <div class="meta">
+        {#if showDate && _formattedDate}
+          <time datetime={article.publish_date}>{_formattedDate}</time>
+        {/if}
+
+        {#if showAuthor && article.author}
+          <span class="author">By {article.author}</span>
+        {/if}
+      </div>
+
+      {#if showTags && _tags.length > 0}
+        <div class="tags">
+          {#each _tags as tag}
+            <Badge size="sm">{tag}</Badge>
+          {/each}
+        </div>
+      {/if}
+    </article>
+  </Card>
+</a>
+
+<style>
+  .article-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .title {
+    margin: 0;
+    font: var(--smrt-typography-title-large-font, 600 1.375rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    transition: color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .article-link:hover .title {
+    color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .article-link:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+  }
+
+  .excerpt {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+    margin: 0;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-md, 1rem);
+    align-items: center;
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .author {
+    font-style: italic;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .title {
+      transition: none;
+    }
+  }
+</style>

package/dist/svelte/components/ArticleCard.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Article } from '../types.js';
+export interface Props {
+    /** Article data to display */
+    article: Article;
+    /** Show article excerpt/description */
+    showExcerpt?: boolean;
+    /** Show publication date */
+    showDate?: boolean;
+    /** Show author name */
+    showAuthor?: boolean;
+    /** Show tags */
+    showTags?: boolean;
+}
+declare const ArticleCard: import("svelte").Component<Props, {}, "">;
+type ArticleCard = ReturnType<typeof ArticleCard>;
+export default ArticleCard;
+//# sourceMappingURL=ArticleCard.svelte.d.ts.map

package/dist/svelte/components/ArticleCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ArticleCard.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmFD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ArticleList.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+/**
+ * ArticleList - Displays a grid of article cards
+ *
+ * Renders articles in a responsive grid layout with configurable columns.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Grid } from '@happyvertical/smrt-ui/layout';
+import { M } from '../i18n.contribution.js';
+import type { Article } from '../types.js';
+import ArticleCard from './ArticleCard.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Array of articles to display */
+  articles: Article[];
+  /** Number of columns in grid (or 'auto') */
+  columns?: number | 'auto';
+  /** Show article excerpts */
+  showExcerpt?: boolean;
+  /** Show publication dates */
+  showDate?: boolean;
+  /** Show author names */
+  showAuthor?: boolean;
+  /** Show tags */
+  showTags?: boolean;
+  /** Message when no articles */
+  emptyMessage?: string;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: Variables used in Svelte template
+const {
+  articles,
+  columns = 'auto',
+  showExcerpt = true,
+  showDate = true,
+  showAuthor = true,
+  showTags = false,
+  emptyMessage = 'No articles published yet. Check back soon for updates!',
+}: Props = $props();
+</script>
+
+{#if articles.length === 0}
+  <div class="empty-state" role="status" aria-live="polite">
+    <p>{emptyMessage}</p>
+  </div>
+{:else}
+  <Grid {columns} role="list" aria-label={t(M['content.article_list.aria_label'])}>
+    {#each articles as article (article.id)}
+      <div role="listitem">
+        <ArticleCard
+          {article}
+          {showExcerpt}
+          {showDate}
+          {showAuthor}
+          {showTags}
+        />
+      </div>
+    {/each}
+  </Grid>
+{/if}
+
+<style>
+  .empty-state {
+    text-align: center;
+    padding: var(--smrt-spacing-3xl, 3rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .empty-state p {
+    font: var(--smrt-typography-body-large-font, 1.125rem / 1.5 sans-serif);
+  }
+</style>

package/dist/svelte/components/ArticleList.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Article } from '../types.js';
+export interface Props {
+    /** Array of articles to display */
+    articles: Article[];
+    /** Number of columns in grid (or 'auto') */
+    columns?: number | 'auto';
+    /** Show article excerpts */
+    showExcerpt?: boolean;
+    /** Show publication dates */
+    showDate?: boolean;
+    /** Show author names */
+    showAuthor?: boolean;
+    /** Show tags */
+    showTags?: boolean;
+    /** Message when no articles */
+    emptyMessage?: string;
+}
+declare const ArticleList: import("svelte").Component<Props, {}, "">;
+type ArticleList = ReturnType<typeof ArticleList>;
+export default ArticleList;
+//# sourceMappingURL=ArticleList.svelte.d.ts.map

package/dist/svelte/components/ArticleList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ArticleList.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,WAAW,KAAK;IACpB,mCAAmC;IACnC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2CD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}