@uptrademedia/site-kit 1.0.3 → 1.0.5

package/README.md

@@ -158,43 +158,114 @@ export default function CustomContactPage() {
 
 ### Blog (`@uptrade/site-kit/blog`)
 
-Blog components with built-in SEO and related post suggestions.
+Complete Portal-managed blog system with beautiful layouts, dynamic routing, categories, and SEO.
+
+**Create posts in Portal → Automatically appear on your site.**
 
 ```tsx
-import { BlogPost, BlogList, RelatedPosts, TableOfContents, AuthorCard } from '@uptrade/site-kit/blog'
+// app/blog/page.tsx - Blog Index
+import { BlogList, BlogLayout } from '@uptrade/site-kit/blog'
+import { generateBlogIndexMetadata } from '@uptrade/site-kit/blog/server'
+
+export const metadata = generateBlogIndexMetadata({
+  title: 'Blog',
+  siteName: 'My Company',
+  siteUrl: 'https://example.com',
+})
 
-// Blog listing page
-export default function BlogPage() {
+export default function BlogPage({ searchParams }) {
   return (
-    <BlogList 
-      projectId="..."
-      options={{ 
-        limit: 10, 
-        category: 'news',
-        orderBy: 'published_at',
-        order: 'desc'
-      }}
-    />
+    <BlogLayout
+      hero={{ title: 'Blog', subtitle: 'Latest insights and articles' }}
+      layout="sidebar-right"
+    >
+      <BlogList
+        category={searchParams.category}
+        page={parseInt(searchParams.page || '1')}
+        showCategoryFilter
+        showPagination
+      />
+    </BlogLayout>
   )
 }
+```
+
+```tsx
+// app/blog/[slug]/page.tsx - Individual Post
+import { BlogPost } from '@uptrade/site-kit/blog'
+import { 
+  generateBlogPostMetadata, 
+  generateBlogStaticParams,
+  getBlogPost,
+  generateBlogPostSchema 
+} from '@uptrade/site-kit/blog/server'
+
+// Pre-generate all post pages at build time
+export const generateStaticParams = generateBlogStaticParams
+
+// Dynamic metadata for SEO
+export async function generateMetadata({ params }) {
+  return generateBlogPostMetadata(params.slug, {
+    siteName: 'My Company',
+    siteUrl: 'https://example.com',
+  })
+}
 
-// Blog post page
-export default function BlogPostPage({ params }) {
+export default async function PostPage({ params }) {
+  const post = await getBlogPost(params.slug)
+  
   return (
-    <div className="flex">
-      <aside className="w-64">
-        <TableOfContents content={post.content_html} />
-      </aside>
-      <main>
-        <BlogPost projectId="..." slug={params.slug} />
-        <AuthorCard author={post.author} />
-        <RelatedPosts projectId="..." currentPostId={post.id} limit={3} />
-      </main>
-    </div>
+    <>
+      {/* JSON-LD Schema */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(generateBlogPostSchema(post, {
+            siteUrl: 'https://example.com',
+            siteName: 'My Company',
+          })),
+        }}
+      />
+      
+      {/* Blog Post with TOC and Related Posts */}
+      <BlogPost 
+        slug={params.slug} 
+        showToc 
+        showRelated 
+        showAuthor 
+      />
+    </>
   )
 }
 ```
 
+#### Available Components
+
+| Component | Purpose |
+|-----------|---------|
+| `BlogList` | Grid of posts with pagination & category filter |
+| `BlogPost` | Full post with TOC, author, related posts |
+| `BlogLayout` | Complete layout with sidebar |
+| `BlogSidebar` | Categories, recent posts, tags, search |
+| `TableOfContents` | Sticky TOC from headings |
+| `AuthorCard` | Author info with social links |
+| `RelatedPosts` | Related posts by category |
+
+#### Server Functions
+
+```tsx
+import {
+  getBlogPost,           // Fetch single post
+  getAllBlogSlugs,       // For generateStaticParams
+  getBlogCategories,     // All categories
+  generateBlogPostMetadata,    // Post page metadata
+  generateBlogIndexMetadata,   // Index page metadata
+  generateBlogStaticParams,    // SSG params
+  generateBlogSitemap,         // Sitemap entries
+  generateBlogPostSchema,      // JSON-LD
+} from '@uptrade/site-kit/blog/server'
+```
+
 ## Configuration
 
 ### Full Provider Options

package/dist/SetupWizard-Cki06kB0.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SetupWizardProps {
+    config?: {
+        url?: string;
+        anonKey?: string;
+        portalApiUrl?: string;
+    };
+}
+declare function SetupWizard({ config }?: SetupWizardProps): react_jsx_runtime.JSX.Element;
+
+export { SetupWizard as S };

package/dist/SetupWizard-Cki06kB0.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SetupWizardProps {
+    config?: {
+        url?: string;
+        anonKey?: string;
+        portalApiUrl?: string;
+    };
+}
+declare function SetupWizard({ config }?: SetupWizardProps): react_jsx_runtime.JSX.Element;
+
+export { SetupWizard as S };

package/dist/analytics/index.d.mts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { A as AnalyticsContextValue, T as TrackEventOptions, a as TrackConversionOptions } from '../types-DA_Kocle.mjs';
+export { c as AnalyticsConfig, b as AnalyticsEvent, C as Conversion, P as PageView, S as Session, W as WebVitalsData } from '../types-DA_Kocle.mjs';
+
+interface AnalyticsProviderProps {
+    children: React__default.ReactNode;
+    apiUrl?: string;
+    apiKey?: string;
+    trackPageViews?: boolean;
+    trackWebVitals?: boolean;
+    trackScrollDepth?: boolean;
+    trackClicks?: boolean;
+    trackJourneys?: boolean;
+    sessionTimeout?: number;
+    excludePaths?: string[];
+    validateAgainstSitemap?: boolean;
+    debug?: boolean;
+}
+declare function AnalyticsProvider({ children, apiUrl: propApiUrl, apiKey: propApiKey, trackPageViews, trackWebVitals, trackScrollDepth, trackClicks, trackJourneys, // NEW: Enable journey tracking by default
+sessionTimeout, excludePaths, validateAgainstSitemap, debug, }: AnalyticsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAnalytics(): AnalyticsContextValue;
+declare function useTrackEvent(): {
+    trackEvent: (options: TrackEventOptions) => void;
+    trackConversion: (options: TrackConversionOptions) => void;
+};
+
+/**
+ * @uptrade/site-kit/analytics - Web Vitals Component
+ *
+ * Automatically reports Core Web Vitals via Portal API
+ */
+interface WebVitalsProps {
+    apiUrl?: string;
+    apiKey?: string;
+    debug?: boolean;
+}
+declare function WebVitals({ apiUrl: propApiUrl, apiKey: propApiKey, debug }: WebVitalsProps): null;
+
+/**
+ * @uptrade/site-kit/analytics - Contact Tracking Hook
+ *
+ * Tracks phone calls and email clicks as conversions.
+ * Use this hook to automatically track tel: and mailto: links,
+ * or manually track contact interactions.
+ */
+interface UseContactTrackingOptions {
+    /** Automatically track all tel: and mailto: links (default: true) */
+    autoTrack?: boolean;
+    /** Debug mode - logs events to console */
+    debug?: boolean;
+}
+interface ContactTrackingReturn {
+    /** Manually track a phone call click */
+    trackPhoneClick: (phoneNumber: string, metadata?: Record<string, unknown>) => void;
+    /** Manually track an email click */
+    trackEmailClick: (email: string, metadata?: Record<string, unknown>) => void;
+}
+/**
+ * Hook for tracking phone and email contact interactions as conversions.
+ *
+ * @example
+ * ```tsx
+ * // Auto-track all tel: and mailto: links
+ * useContactTracking()
+ *
+ * // Manual tracking
+ * const { trackPhoneClick, trackEmailClick } = useContactTracking()
+ * trackPhoneClick('513-555-1234')
+ * trackEmailClick('hello@example.com')
+ * ```
+ */
+declare function useContactTracking(options?: UseContactTrackingOptions): ContactTrackingReturn;
+/**
+ * Component wrapper for contact tracking
+ * Simply include this component to auto-track all tel: and mailto: links
+ *
+ * @example
+ * ```tsx
+ * <ContactTracking />
+ * ```
+ */
+declare function ContactTracking({ debug }: {
+    debug?: boolean;
+}): null;
+
+export { AnalyticsContextValue, AnalyticsProvider, ContactTracking, TrackConversionOptions, TrackEventOptions, WebVitals, useAnalytics, useContactTracking, useTrackEvent };

package/dist/analytics/index.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { A as AnalyticsContextValue, T as TrackEventOptions, a as TrackConversionOptions } from '../types-DA_Kocle.js';
+export { c as AnalyticsConfig, b as AnalyticsEvent, C as Conversion, P as PageView, S as Session, W as WebVitalsData } from '../types-DA_Kocle.js';
+
+interface AnalyticsProviderProps {
+    children: React__default.ReactNode;
+    apiUrl?: string;
+    apiKey?: string;
+    trackPageViews?: boolean;
+    trackWebVitals?: boolean;
+    trackScrollDepth?: boolean;
+    trackClicks?: boolean;
+    trackJourneys?: boolean;
+    sessionTimeout?: number;
+    excludePaths?: string[];
+    validateAgainstSitemap?: boolean;
+    debug?: boolean;
+}
+declare function AnalyticsProvider({ children, apiUrl: propApiUrl, apiKey: propApiKey, trackPageViews, trackWebVitals, trackScrollDepth, trackClicks, trackJourneys, // NEW: Enable journey tracking by default
+sessionTimeout, excludePaths, validateAgainstSitemap, debug, }: AnalyticsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAnalytics(): AnalyticsContextValue;
+declare function useTrackEvent(): {
+    trackEvent: (options: TrackEventOptions) => void;
+    trackConversion: (options: TrackConversionOptions) => void;
+};
+
+/**
+ * @uptrade/site-kit/analytics - Web Vitals Component
+ *
+ * Automatically reports Core Web Vitals via Portal API
+ */
+interface WebVitalsProps {
+    apiUrl?: string;
+    apiKey?: string;
+    debug?: boolean;
+}
+declare function WebVitals({ apiUrl: propApiUrl, apiKey: propApiKey, debug }: WebVitalsProps): null;
+
+/**
+ * @uptrade/site-kit/analytics - Contact Tracking Hook
+ *
+ * Tracks phone calls and email clicks as conversions.
+ * Use this hook to automatically track tel: and mailto: links,
+ * or manually track contact interactions.
+ */
+interface UseContactTrackingOptions {
+    /** Automatically track all tel: and mailto: links (default: true) */
+    autoTrack?: boolean;
+    /** Debug mode - logs events to console */
+    debug?: boolean;
+}
+interface ContactTrackingReturn {
+    /** Manually track a phone call click */
+    trackPhoneClick: (phoneNumber: string, metadata?: Record<string, unknown>) => void;
+    /** Manually track an email click */
+    trackEmailClick: (email: string, metadata?: Record<string, unknown>) => void;
+}
+/**
+ * Hook for tracking phone and email contact interactions as conversions.
+ *
+ * @example
+ * ```tsx
+ * // Auto-track all tel: and mailto: links
+ * useContactTracking()
+ *
+ * // Manual tracking
+ * const { trackPhoneClick, trackEmailClick } = useContactTracking()
+ * trackPhoneClick('513-555-1234')
+ * trackEmailClick('hello@example.com')
+ * ```
+ */
+declare function useContactTracking(options?: UseContactTrackingOptions): ContactTrackingReturn;
+/**
+ * Component wrapper for contact tracking
+ * Simply include this component to auto-track all tel: and mailto: links
+ *
+ * @example
+ * ```tsx
+ * <ContactTracking />
+ * ```
+ */
+declare function ContactTracking({ debug }: {
+    debug?: boolean;
+}): null;
+
+export { AnalyticsContextValue, AnalyticsProvider, ContactTracking, TrackConversionOptions, TrackEventOptions, WebVitals, useAnalytics, useContactTracking, useTrackEvent };

package/dist/blog/index.d.mts

@@ -0,0 +1,179 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { B as BlogPost$1, T as TocItem, a as BlogListResult, b as BlogCategory, A as AuthorCardProps, c as TableOfContentsProps } from '../types-BN4OwtCO.mjs';
+export { k as BlogAnalytics, d as BlogAuthor, f as BlogListOptions, i as BlogListProps, j as BlogListRenderProps, g as BlogPostProps, h as BlogPostRenderProps, e as BlogTag, R as RelatedPostsProps } from '../types-BN4OwtCO.mjs';
+
+interface BlogPostServerProps {
+    /** Portal API URL */
+    apiUrl?: string;
+    /** Project API key */
+    apiKey?: string;
+    /** Blog post slug */
+    slug: string;
+    /** Show table of contents sidebar */
+    showToc?: boolean;
+    /** Show related posts */
+    showRelated?: boolean;
+    /** Number of related posts */
+    relatedCount?: number;
+    /** Show author card */
+    showAuthor?: boolean;
+    /** Base URL for blog links */
+    basePath?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom render function */
+    children?: (props: {
+        post: BlogPost$1;
+        tableOfContents: TocItem[];
+        relatedPosts: BlogPost$1[];
+    }) => React__default.ReactNode;
+}
+declare function BlogPost({ apiUrl, apiKey, slug, showToc, showRelated, relatedCount, showAuthor, basePath, className, children, }: BlogPostServerProps): Promise<string | number | bigint | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined>;
+
+interface BlogListServerProps {
+    /** Portal API URL */
+    apiUrl?: string;
+    /** Project API key */
+    apiKey?: string;
+    /** Filter by category slug */
+    category?: string;
+    /** Filter by tag */
+    tag?: string;
+    /** Filter by author */
+    author?: string;
+    /** Only featured posts */
+    featured?: boolean;
+    /** Search query */
+    search?: string;
+    /** Page number (1-indexed) */
+    page?: number;
+    /** Items per page */
+    perPage?: number;
+    /** Sort field */
+    orderBy?: 'published_at' | 'title' | 'view_count';
+    /** Sort direction */
+    order?: 'asc' | 'desc';
+    /** Show category filter UI */
+    showCategoryFilter?: boolean;
+    /** Show pagination */
+    showPagination?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Base URL for post links */
+    basePath?: string;
+    /** Custom render function for post card */
+    renderPost?: (post: BlogPost$1) => React__default.ReactNode;
+    /** Custom render function for entire grid */
+    children?: (props: {
+        posts: BlogPost$1[];
+        pagination: BlogListResult['pagination'];
+        categories: BlogCategory[];
+    }) => React__default.ReactNode;
+}
+declare function BlogList({ apiUrl, apiKey, category, tag, author, featured, search, page, perPage, orderBy, order, showCategoryFilter, showPagination, className, basePath, renderPost, children, }: BlogListServerProps): Promise<string | number | bigint | boolean | Iterable<React__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined>;
+
+interface BlogSidebarProps {
+    /** Portal API URL */
+    apiUrl?: string;
+    /** Project API key */
+    apiKey?: string;
+    /** Show categories widget */
+    showCategories?: boolean;
+    /** Show recent posts widget */
+    showRecentPosts?: boolean;
+    /** Number of recent posts to show */
+    recentPostsCount?: number;
+    /** Show tags widget */
+    showTags?: boolean;
+    /** Show search widget */
+    showSearch?: boolean;
+    /** Base URL for blog links */
+    basePath?: string;
+    /** Custom class name */
+    className?: string;
+    /** Current category filter (for highlighting) */
+    currentCategory?: string;
+    /** Additional widgets to render */
+    children?: React__default.ReactNode;
+}
+declare function BlogSidebar({ apiUrl, apiKey, showCategories, showRecentPosts, recentPostsCount, showTags, showSearch, basePath, className, currentCategory, children, }: BlogSidebarProps): Promise<react_jsx_runtime.JSX.Element | null>;
+interface NewsletterWidgetProps {
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onSubmit?: (email: string) => Promise<void>;
+}
+declare function NewsletterWidget({ title, description, buttonText, }: NewsletterWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface BlogLayoutProps {
+    /** Portal API URL */
+    apiUrl?: string;
+    /** Project API key */
+    apiKey?: string;
+    /** Layout style: 'sidebar-right', 'sidebar-left', 'full-width' */
+    layout?: 'sidebar-right' | 'sidebar-left' | 'full-width';
+    /** Show sidebar */
+    showSidebar?: boolean;
+    /** Sidebar props */
+    sidebarProps?: Partial<BlogSidebarProps>;
+    /** Hero section config */
+    hero?: {
+        title?: string;
+        subtitle?: string;
+        backgroundImage?: string;
+        backgroundColor?: string;
+    };
+    /** Max width for content */
+    maxWidth?: number;
+    /** Base URL for blog links */
+    basePath?: string;
+    /** Custom class name */
+    className?: string;
+    /** Current category (for sidebar highlighting) */
+    currentCategory?: string;
+    /** Main content */
+    children: React__default.ReactNode;
+}
+declare function BlogLayout({ apiUrl, apiKey, layout, showSidebar, sidebarProps, hero, maxWidth, basePath, className, currentCategory, children, }: BlogLayoutProps): Promise<react_jsx_runtime.JSX.Element>;
+/**
+ * Convenience wrapper for a complete blog index page
+ */
+interface BlogPageProps extends Omit<BlogLayoutProps, 'children'> {
+    /** List component to render */
+    listComponent: React__default.ReactNode;
+}
+declare function BlogPage({ listComponent, ...layoutProps }: BlogPageProps): Promise<react_jsx_runtime.JSX.Element>;
+/**
+ * Convenience wrapper for a single blog post page
+ */
+interface BlogPostPageProps extends Omit<BlogLayoutProps, 'children'> {
+    /** Post component to render */
+    postComponent: React__default.ReactNode;
+}
+declare function BlogPostPage({ postComponent, ...layoutProps }: BlogPostPageProps): Promise<react_jsx_runtime.JSX.Element>;
+interface CategoryPageProps extends BlogLayoutProps {
+    /** Category slug being viewed */
+    category: string;
+    /** Category display name */
+    categoryName?: string;
+    /** List component */
+    listComponent: React__default.ReactNode;
+}
+declare function CategoryPage({ category, categoryName, listComponent, hero, ...layoutProps }: CategoryPageProps): Promise<react_jsx_runtime.JSX.Element>;
+
+declare function AuthorCard({ author, showBio, showSocial, className }: AuthorCardProps): react_jsx_runtime.JSX.Element;
+
+interface RelatedPostsServerProps {
+    apiUrl?: string;
+    apiKey?: string;
+    currentPostId: string;
+    limit?: number;
+    className?: string;
+    renderItem?: (post: BlogPost$1) => React__default.ReactNode;
+}
+declare function RelatedPosts({ apiUrl, apiKey, currentPostId, limit, className, renderItem, }: RelatedPostsServerProps): Promise<react_jsx_runtime.JSX.Element | null>;
+
+declare function TableOfContents({ content, className, maxDepth, }: TableOfContentsProps): react_jsx_runtime.JSX.Element | null;
+
+export { AuthorCard, AuthorCardProps, BlogCategory, BlogLayout, type BlogLayoutProps, BlogList, BlogListResult, type BlogListServerProps, BlogPage, type BlogPageProps, BlogPost, BlogPostPage, type BlogPostPageProps, type BlogPostServerProps, BlogSidebar, type BlogSidebarProps, CategoryPage, type CategoryPageProps, NewsletterWidget, type NewsletterWidgetProps, RelatedPosts, TableOfContents, TableOfContentsProps, TocItem };