fragment-headless-sdk 2.1.2 → 2.1.3

package/dist/utils/fetch-resource.d.ts

@@ -1,7 +1,4 @@
-export declare enum ResourceType {
-    HeroBanners = "hero-banners",
-    Announcements = "announcements"
-}
+export declare const ENABLE_REQUEST_DEDUPLICATION = true;
 export type ListParams = {
     status?: "enabled" | "disabled";
     page?: number;
@@ -9,10 +6,14 @@ export type ListParams = {
     search?: string;
     pageFilter?: string;
 };
+export declare enum ResourceType {
+    HeroBanners = "hero-banners",
+    Announcements = "announcements"
+}
 export type CacheOptions = {
-    /** Request cache mode (default: 'no-store' for fresh data) */
+    /** Request cache mode (default: 'force-cache' with 60s revalidation) */
     cache?: RequestCache;
-    /** Next.js revalidation time in seconds (default: 0 for always fresh) */
+    /** Next.js revalidation time in seconds (default: 60) */
     revalidate?: number | false;
     /** Next.js cache tags for selective invalidation */
     tags?: string[];
@@ -23,7 +24,7 @@ type FetchResourceParams = {
     type: ResourceType;
     params?: ListParams;
     fetchImpl?: typeof fetch;
-    /** Cache configuration (defaults to no caching for fresh data) */
+    /** Cache configuration (defaults to force-cache with 60s revalidation) */
     cacheOptions?: CacheOptions;
 };
 /** Lists resources with optional filters (parity with client.list) */

package/dist/utils/fetch-resource.js

@@ -1,8 +1,30 @@
+// Simple anti-spam: prevent identical concurrent requests
+export const ENABLE_REQUEST_DEDUPLICATION = true;
 export var ResourceType;
 (function (ResourceType) {
     ResourceType["HeroBanners"] = "hero-banners";
     ResourceType["Announcements"] = "announcements";
 })(ResourceType || (ResourceType = {}));
+// Simple request deduplication to prevent identical concurrent requests
+const pendingRequests = new Map();
+/**
+ * Generates a cache key for request deduplication
+ * Normalizes params to include default status for consistent key generation
+ */
+function generateRequestKey(baseUrl, type, params) {
+    // Normalize params with defaults (same as performRequest does)
+    const normalizedParams = {
+        ...params,
+        status: params.status ?? "enabled", // Include default status
+    };
+    const sortedParams = Object.keys(normalizedParams)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = normalizedParams[key];
+        return acc;
+    }, {});
+    return `${baseUrl}:${type}:${JSON.stringify(sortedParams)}`;
+}
 /**
  * Detects if running in Next.js environment
  */
@@ -20,10 +42,10 @@ function getDefaultCacheConfig(type) {
     const isNextJS = isNextJSEnvironment();
     const isDev = process?.env?.NODE_ENV === "development";
     if (isNextJS && !isDev) {
-        // In Next.js production, default to no caching for fresh data
+        // In Next.js production, default to caching with 60 second revalidation
         return {
-            cache: "no-store",
-            revalidate: 0,
+            cache: "force-cache",
+            revalidate: 60,
             tags: [`fragment-${type}`],
         };
     }
@@ -38,6 +60,50 @@ export async function fetchResource({ baseUrl, apiKey, type, params = {}, fetchI
         console.warn("❌ Missing EXTERNAL_API_URL or FRAGMENT_API_KEY");
         return [];
     }
+    // Generate key for request deduplication
+    const requestKey = generateRequestKey(baseUrl, type, params);
+    // Request deduplication - check if identical request is already in flight
+    if (ENABLE_REQUEST_DEDUPLICATION) {
+        const existingRequest = pendingRequests.get(requestKey);
+        if (existingRequest) {
+            console.log(`🔄 Deduplicating request for ${type}`);
+            try {
+                return await existingRequest;
+            }
+            catch (err) {
+                // If the existing request failed, we'll try again below
+                pendingRequests.delete(requestKey);
+            }
+        }
+    }
+    // Create the actual request promise
+    const requestPromise = performRequest({
+        baseUrl,
+        apiKey,
+        type,
+        params,
+        fetchImpl,
+        cacheOptions,
+    });
+    // Store the promise for deduplication
+    if (ENABLE_REQUEST_DEDUPLICATION) {
+        pendingRequests.set(requestKey, requestPromise);
+    }
+    try {
+        const result = await requestPromise;
+        return result;
+    }
+    finally {
+        // Clean up the pending request
+        if (ENABLE_REQUEST_DEDUPLICATION) {
+            pendingRequests.delete(requestKey);
+        }
+    }
+}
+/**
+ * Performs the actual HTTP request (separated for cleaner code organization)
+ */
+async function performRequest({ baseUrl, apiKey, type, params = {}, fetchImpl, cacheOptions, }) {
     try {
         const f = fetchImpl ?? fetch;
         const base = baseUrl.replace(/\/+$/, "");
@@ -47,8 +113,8 @@ export async function fetchResource({ baseUrl, apiKey, type, params = {}, fetchI
         const limit = Math.min(100, Math.max(1, params.limit ?? 25));
         url.searchParams.set("pageNum", String(page));
         url.searchParams.set("limit", String(limit));
-        if (params.status)
-            url.searchParams.set("status", params.status);
+        // Default to "enabled" status if not specified
+        url.searchParams.set("status", params.status ?? "enabled");
         if (params.pageFilter)
             url.searchParams.set("page", params.pageFilter);
         if (params.search)
@@ -64,9 +130,6 @@ export async function fetchResource({ baseUrl, apiKey, type, params = {}, fetchI
             headers: {
                 Authorization: `Bearer ${apiKey}`,
                 "Content-Type": "application/json",
-                // Add cache-busting headers for better cache control
-                "Cache-Control": "no-cache, no-store, must-revalidate",
-                Pragma: "no-cache",
             },
             cache: finalCacheOptions.cache,
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -2,7 +2,14 @@
 
 The official SDK for integrating with Fragment-Shopify CMS. Provides React components, TypeScript types, and utilities for rendering published sections in headless Shopify storefronts.
 
-## ✨ What's New in v2.1.2
+## ✨ What's New in v2.1.3
+
+⚡ **Request Deduplication** - Intelligent request deduplication prevents identical concurrent API calls  
+🚀 **Enhanced Caching** - Improved caching strategy with 60-second revalidation for better performance  
+🔧 **Optimized Fetching** - Consistent parameter handling and smarter cache key generation  
+🛡️ **Anti-Spam Protection** - Built-in protection against redundant API requests
+
+### Previous Release (v2.1.2)
 
 📚 **Enhanced Documentation** - Comprehensive documentation updates highlighting new click tracking features  
 📖 **Better Examples** - Improved usage examples and feature descriptions  
@@ -76,6 +83,15 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - 📝 **Type Safety**: Enhanced TypeScript interfaces for all styling options
 - 🔄 **Backward Compatible**: Works seamlessly with existing Hero implementations
 
+### Request Deduplication & Performance System (v2.1.3+)
+
+- ⚡ **Smart Deduplication**: Prevents identical concurrent API requests automatically
+- 🚀 **Optimized Caching**: 60-second cache revalidation for optimal performance vs freshness
+- 🔧 **Consistent Parameters**: Normalized parameter handling ensures reliable cache keys
+- 🛡️ **Anti-Spam Protection**: Built-in protection against redundant API calls
+- 📊 **Performance Monitoring**: Console logging for deduplication events and debugging
+- 🔄 **Graceful Fallback**: Failed requests retry automatically without affecting user experience
+
 ### Enhanced Click Tracking System (v2.1.1+)
 
 - 🎯 **Separated Concerns**: Button destinations and click tracking handled independently
@@ -183,11 +199,20 @@ const heroBanners = await fetchResource({
   type: ResourceType.HeroBanners,
 });
 
-// Fetch announcements
+// Fetch announcements with optional parameters
 const announcements = await fetchResource({
   baseUrl: process.env.EXTERNAL_API_URL,
   apiKey: process.env.FRAGMENT_API_KEY,
   type: ResourceType.Announcements,
+  params: {
+    status: "enabled", // Only fetch enabled announcements
+    limit: 10, // Limit to 10 items
+    search: "sale", // Search for announcements containing "sale"
+  },
+  cacheOptions: {
+    revalidate: 30, // Custom 30-second cache revalidation
+    tags: ["announcements"], // Custom cache tags
+  },
 });
 ```
 
@@ -650,13 +675,30 @@ const advancedHeroContent = {
 
 ### `fetchResource<T>(params)`
 
-Fetches sections from your Fragment-Shopify app.
+Fetches sections from your Fragment-Shopify app with intelligent request deduplication and caching.
 
 **Parameters:**
 
 - `baseUrl: string` - URL of your Fragment-Shopify app
 - `apiKey: string` - Fragment API key (format: `keyId:secret`)
 - `type: ResourceType` - Type of resource to fetch
+- `params?: ListParams` - Optional filtering and pagination parameters
+- `fetchImpl?: typeof fetch` - Optional custom fetch implementation
+- `cacheOptions?: CacheOptions` - Optional cache configuration
+
+**ListParams Options:**
+
+- `status?: "enabled" | "disabled"` - Filter by status (defaults to "enabled")
+- `page?: number` - Page number for pagination (defaults to 1)
+- `limit?: number` - Items per page (defaults to 25, max 100)
+- `search?: string` - Search query for filtering
+- `pageFilter?: string` - Filter by page path (e.g., "/collections/sale")
+
+**CacheOptions:**
+
+- `cache?: RequestCache` - Request cache mode (defaults to "force-cache")
+- `revalidate?: number | false` - Next.js revalidation time in seconds (defaults to 60)
+- `tags?: string[]` - Next.js cache tags for selective invalidation
 
 **ResourceType Options:**
 
@@ -665,6 +707,13 @@ Fetches sections from your Fragment-Shopify app.
 
 **Returns:** `Promise<T[]>` - Array of fetched resources
 
+**Performance Features:**
+
+- **Request Deduplication**: Identical concurrent requests are automatically deduplicated
+- **Smart Caching**: 60-second cache revalidation balances performance and freshness
+- **Parameter Normalization**: Consistent cache key generation for reliable deduplication
+- **Error Handling**: Graceful fallbacks with automatic retry on failed requests
+
 ---
 
 ## 🧩 Components

package/CHANGELOG.md

@@ -1,436 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [2.1.2] - 2025-10-30
-
-### 📚 Documentation Updates
-
-- **Enhanced README** – Updated documentation to highlight new click tracking features
-- **Feature Highlights** – Added comprehensive documentation for the enhanced click tracking system
-- **Usage Examples** – Improved examples showing the separation of button destinations and tracking
-
-## [2.1.1] - 2025-10-30
-
-### 🎯 Enhanced Click Tracking System
-
-- **Improved Click Tracking Architecture** – Separated button destinations from click tracking for better user experience
-  - `buttonHref` now contains the actual destination URL (no redirect)
-  - `clickHref` contains the tracking URL for metrics collection
-  - Users go directly to intended destinations instead of through redirects
-- **New `fireClickMetric()` Function** – Advanced click tracking without relying on redirects
-  - Uses `fetch()` with `no-cors` mode and `keepalive` for reliable tracking
-  - Falls back to Image pixel tracking for maximum compatibility
-  - Handles server-side rendering gracefully
-- **Removed Automatic New Tab Behavior** – Links no longer force `target="_blank"`
-  - Provides more natural user experience
-  - Allows developers to control link behavior explicitly
-  - Maintains accessibility with proper ARIA labels
-
-### 🛠 Technical Improvements
-
-- **Enhanced Component Props** – Both Hero and Announcement components now accept separate tracking parameters
-  - `buttonHref` for the actual destination
-  - `clickHref` for tracking metrics
-- **Better Error Handling** – Click tracking fails gracefully without affecting user experience
-- **Performance Optimized** – Non-blocking click tracking that doesn't delay navigation
-- **Cross-Browser Compatible** – Works across all modern browsers with appropriate fallbacks
-
-### 📝 Usage Examples
-
-```typescript
-// The SDK automatically handles the separation of concerns
-const heroContent = {
-  title: "Shop Now",
-  buttonText: "Get Started",
-  buttonLink: "https://example.com/products", // Direct destination
-  clickUrlBase: "https://tracking.example.com/click", // Tracking base
-  // SDK automatically creates:
-  // - buttonHref: "https://example.com/products" (direct link)
-  // - clickHref: "https://tracking.example.com/click?u=..." (tracking)
-};
-
-<Hero content={heroContent} />;
-```
-
-### ⚡ Performance Benefits
-
-- **Faster Navigation** – Users go directly to destinations without redirect delays
-- **Reliable Tracking** – Click metrics are captured even if users navigate away quickly
-- **Better SEO** – Direct links improve search engine crawling and indexing
-- **Enhanced UX** – More predictable link behavior for better user experience
-
-### 🔄 Backward Compatibility
-
-- **No Breaking Changes** – All existing implementations continue to work
-- **Automatic Upgrade** – New tracking system activates automatically when `clickUrlBase` is present
-- **Legacy Support** – Existing tracking URLs continue to function as before
-
-## [2.1.0] - 2025-10-27
-
-### 🎨 Enhanced Hero Styling System
-
-- **New Hero Resolvers Utility** – Comprehensive utility system for advanced Hero component customization
-  - `resolveHeroColors()` – Intelligent color resolution with fallback handling
-  - `resolveHeroTypography()` – Typography settings with font family, size, and line height control
-  - `resolveContentWidthClass()` – Dynamic content width management
-  - `resolvePosition()` – Content positioning (left, center, right alignment)
-  - `resolveHeight()` – Flexible height configuration
-  - `renderText()` – Unified text rendering with typography and styling support
-
-### ✨ Advanced Typography Features
-
-- **Font Family Support** – Built-in support for popular font families:
-  - Roboto, Open Sans, Lato, Montserrat, Poppins, Inter, Nunito Sans, Source Sans Pro
-  - Custom font family support through `FontKey` type system
-- **Responsive Typography** – Granular control over font sizes and line heights
-  - Separate title and description typography settings
-  - Tailwind CSS class integration for responsive design
-- **Typography Tokens** – New styling tokens for enhanced typography control:
-  - `titleFontSize`, `titleLineHeight`, `titleFont`
-  - `descriptionFontSize`, `descriptionLineHeight`, `descriptionFont`
-
-### 🏗️ Layout & Positioning Enhancements
-
-- **Content Positioning** – New positioning system for Hero content alignment
-  - Left, center, and right alignment options
-  - Responsive positioning with proper text alignment
-- **Content Width Control** – Dynamic content width management
-  - Configurable content container widths
-  - Responsive design integration
-- **Height Management** – Flexible height configuration system
-  - Custom height classes support
-  - Default height fallbacks
-
-### 🎯 Developer Experience Improvements
-
-- **Type Safety** – Enhanced TypeScript interfaces for all new features
-  - `HeroResolvedColors` interface for color resolution
-  - `HeroTypographySettings` interface for typography configuration
-  - `FontKey` type for font family validation
-- **Utility Functions** – New helper functions for common operations
-  - `joinClassNames()` – Safe CSS class concatenation
-  - `fallbackColor()` – Color value validation with fallbacks
-- **Better Defaults** – Comprehensive default values for all styling options
-  - `DEFAULT_COLORS` for color fallbacks
-  - `DEFAULT_TYPOGRAPHY` for typography defaults
-  - `FONT_FAMILY_MAP` for font family mappings
-
-### 🔄 Backward Compatibility
-
-- **Seamless Migration** – All existing Hero components continue to work without changes
-- **Progressive Enhancement** – New features are opt-in and don't affect existing implementations
-- **Legacy Support** – Existing styling approaches remain fully supported
-
-### 📝 Usage Examples
-
-```typescript
-// Enhanced Hero with new typography and positioning
-const heroContent = {
-  title: "Welcome to Our Store",
-  description: "Discover amazing products",
-  buttonText: "Shop Now",
-  buttonLink: "/products",
-  imageUrl: "https://example.com/hero.jpg",
-
-  styling: {
-    tokens: {
-      colors: {
-        title: "#ffffff",
-        text: "#f0f0f0",
-        button: "#007bff",
-        buttonText: "#ffffff",
-        background: "#1a1a1a",
-      },
-      typography: {
-        titleFont: "montserrat",
-        titleFontSize: "text-6xl",
-        titleLineHeight: "leading-tight",
-        descriptionFont: "inter",
-        descriptionFontSize: "text-xl",
-        descriptionLineHeight: "leading-relaxed",
-      },
-      layout: {
-        contentWidth: "max-w-4xl",
-        position: "center",
-        height: "min-h-screen",
-      },
-    },
-  },
-};
-```
-
-### 🛠 Technical Improvements
-
-- **Performance Optimized** – Efficient color and typography resolution
-- **Memory Efficient** – Optimized utility functions with minimal overhead
-- **Tree Shakeable** – Individual utility functions can be imported separately
-- **CSS-in-JS Ready** – Full compatibility with styled-components and emotion
-
-## [1.0.6] - 2025-10-16
-
-### 🚀 Next.js Caching Fix
-
-- **Fixed Vercel/Next.js Caching Issues** – Resolved aggressive caching that prevented fresh data from appearing in production deployments
-  - Added `cache: 'no-store'` by default for all `fetchResource()` calls
-  - Added Next.js-specific `revalidate: 0` configuration
-  - Added cache-busting headers (`Cache-Control`, `Pragma`) to prevent CDN caching
-  - Smart environment detection for Next.js vs other frameworks
-
-### ✨ New Cache Management Features
-
-- **Cache Configuration Options** – Added optional `cacheOptions` parameter to `fetchResource()`
-  - `cache`: Control request cache mode (default: 'no-store' for fresh data)
-  - `revalidate`: Next.js revalidation time in seconds (default: 0)
-  - `tags`: Next.js cache tags for selective invalidation
-- **Cache Invalidation Utilities** – New helper functions for cache management
-  - `revalidateFragmentCache()` – Invalidate all or specific Fragment caches
-  - `revalidateResourceType()` – Invalidate cache for specific resource type
-  - `revalidateAllFragmentCaches()` – Clear all Fragment-related caches
-  - `createCacheTag()` / `createCacheTags()` – Generate cache tags
-
-### 🛠 Technical Improvements
-
-- **Environment Detection** – Automatic Next.js environment detection for optimal cache settings
-- **Backward Compatibility** – All existing code continues to work without changes
-- **TypeScript Support** – Full type definitions for new cache options
-
-### 📝 Usage Examples
-
-```typescript
-// Default behavior - always fresh data (recommended)
-const announcements = await fetchResource({
-  baseUrl: process.env.FRAGMENT_BASE_URL,
-  apiKey: process.env.FRAGMENT_API_KEY,
-  type: ResourceType.Announcements,
-});
-
-// Optional: Enable caching for performance
-const cachedHeroes = await fetchResource({
-  baseUrl: process.env.FRAGMENT_BASE_URL,
-  apiKey: process.env.FRAGMENT_API_KEY,
-  type: ResourceType.HeroBanners,
-  cacheOptions: {
-    cache: "default",
-    revalidate: 300, // 5 minutes
-  },
-});
-
-// Cache invalidation (server-side only)
-import { revalidateResourceType } from "fragment-headless-sdk";
-await revalidateResourceType(ResourceType.Announcements);
-```
-
-### ⚠️ Migration Notes
-
-- **No breaking changes** – Existing code works without modification
-- **Fresh data by default** – Your database updates will now appear immediately in production
-- **Opt-in caching** – Use `cacheOptions` if you want to enable caching for performance
-
-## [1.0.5] - 2025-09-28
-
-### ✨ New Features
-
-- **Metrics Tracking** – Added built-in view and click tracking for both **Hero** and **Announcement** sections.
-  - Each resource’s `content` object now includes two server-generated fields:
-    - `impressionUrl` – 1×1 pixel URL automatically fired when the component enters the viewport.
-    - `clickUrlBase` – base redirect URL used to record button clicks before sending the user to the final destination.
-  - The SDK’s `<Hero>` and `<Announcement>` components now automatically:
-    - trigger a view pixel when visible, and
-    - wrap their CTA buttons with a signed click-tracking redirect.
-
-### 🛠 Technical Notes
-
-- The `makeSignedMetricUrls` helper was refactored to attach `impressionUrl` and `clickUrlBase` **inside the `content` object** for each item returned by the API.
-- New client-side utilities exported from `utils`:
-  - `buildClickUrl()` – safely appends the final destination (`&u=...`) to a signed `clickUrlBase`.
-  - `fireImpressionWhenVisible()` – fires a pixel only once when an element is at least 30 % visible.
-
-### ⚠️ Migration Notes
-
-- **No breaking changes.**  
-  Existing components continue to work; the new tracking is automatic when you upgrade to v1.0.5.
-- If you build custom CTAs outside the provided components, use the new helpers to track clicks and views manually.
-
-## [1.0.4] - 2025-09-27
-
-- **Types:** `IHero` now includes `views_count: number` and `clicks_count: number`.
-
-### 📝 Notes
-
-- No breaking changes..
-
-## [1.0.3] - 2025-09-21
-
-### 🎨 UI/UX Improvements
-
-- **Announcement Type Rename** - Changed `AnnouncementType.Announcement` to `AnnouncementType.Static` for better clarity
-- **Countdown Timer Styling** - Removed white background from countdown timer for cleaner appearance
-- **Layout Optimization** - Improved announcement banner layout with:
-  - Removed top/bottom padding (`py-3`) for more compact design
-  - Added 50px minimum height for consistent banner sizing
-  - Enhanced vertical centering of all content elements
-- **Timer Digit Sizing** - Made countdown timer digits smaller and more compact:
-  - Reduced digit size from 24×28px to 20×24px
-  - Changed font size from `text-xl` to `text-base`
-
-### 🔧 Technical Changes
-
-- Updated `announcementTypes` array to reflect new "Static" label
-- Improved flexbox layout for better vertical alignment
-- Maintained responsive design across all screen sizes
-
-## [1.0.2] - 2025-09-20
-
-### 🔄 Breaking Changes
-
-- **Component Naming** - Renamed `Banner` component and all related types to `Announcement`
-
-  - `Banner` → `Announcement`
-  - `IBannerContent` → `IAnnouncementContent`
-  - `IBanner` → `IAnnouncement`
-  - `BannerType` → `AnnouncementType`
-  - `BannerStatus` → `AnnouncementStatus`
-  - `BannerButton` → `AnnouncementButton`
-  - `BannerStyles` → `AnnouncementStyles`
-  - `bannerHtml` property → `announcementHtml`
-
-- **Resource Type Updates** - Updated resource type enums for consistency
-  - `ResourceType.HeroSections` → `ResourceType.HeroBanners`
-  - `ResourceType.Banners` → `ResourceType.Announcements`
-
-### 🔗 API Endpoint Changes
-
-- Updated API endpoints to match new naming:
-  - `/api/v1/hero-sections` → `/api/v1/hero-banners`
-  - `/api/v1/banners` → `/api/v1/announcements`
-
-### 📚 Documentation
-
-- Updated all documentation to reflect new component and type names
-- Updated README.md examples with new ResourceType values
-- Updated code examples throughout
-
-### 🛠️ Migration Guide
-
-To update your existing code:
-
-```typescript
-// Before (v1.0.1)
-import {
-  Banner,
-  BannerType,
-  IBannerContent,
-  ResourceType,
-} from "fragment-headless-sdk";
-
-const banners = await fetchResource({
-  type: ResourceType.Banners,
-});
-
-<Banner content={bannerContent} type={BannerType.Standard} />;
-
-// After (v1.0.2)
-import {
-  Announcement,
-  AnnouncementType,
-  IAnnouncementContent,
-  ResourceType,
-} from "fragment-headless-sdk";
-
-const announcements = await fetchResource({
-  type: ResourceType.Announcements,
-});
-
-<Announcement
-  content={announcementContent}
-  type={AnnouncementType.Announcement}
-/>;
-```
-
-## [1.0.1] - 2025-09-07
-
-### 🎉 Initial Release
-
-The official SDK for integrating with fragment-shopify CMS. Production-ready with full API key authentication support.
-
-### Features
-
-- **Complete TypeScript Support** - Full type definitions for all components and API responses
-- **React Components** - Pre-built Hero and Announcement components with responsive design
-- **API Integration** - Built-in utilities for fetching sections from fragment-shopify app
-- **Production Ready** - Full API key authentication with v1 endpoints
-- **Tailwind CSS** - Styled components with customizable design system
-
-### Components
-
-- **Hero Component** - Responsive hero sections with desktop/mobile variants
-  - Support for images, videos, and call-to-action buttons
-  - Customizable content and styling
-- **Announcement Component** - Flexible announcement bars with multiple display types
-  - Standard, marquee, and countdown announcement variants
-  - `AnnouncementButton` and `CountdownTimer` sub-components
-
-### API Integration
-
-- **`fetchResource()` Function** - Simple API for fetching sections
-- **API Key Authentication** - Secure authentication using `keyId:secret` format
-- **v1 Endpoints** - Production endpoints (`/api/v1/announcements`, `/api/v1/hero-banners`)
-- **Error Handling** - Comprehensive error handling and logging
-- **Type Safety** - Full TypeScript support for all API responses
-
-### Usage
-
-```tsx
-import {
-  fetchResource,
-  ResourceType,
-  Hero,
-  Announcement,
-} from "fragment-headless-sdk";
-
-// Fetch data
-const heroes = await fetchResource({
-  baseUrl: process.env.EXTERNAL_API_URL,
-  apiKey: process.env.FRAGMENT_API_KEY,
-  type: ResourceType.HeroBanners,
-});
-
-// Render components
-<Hero content={heroes[0]?.content} />;
-```
-
-### Environment Variables
-
-```bash
-EXTERNAL_API_URL=https://your-fragment-app.vercel.app
-FRAGMENT_API_KEY=bh_a1b2c3d4e5f6:your-64-char-secret
-```
-
----
-
-## Upcoming Changes
-
-### v1.1.0 (Planned)
-
-- Enhanced error handling with specific error types
-- Support for additional section types
-- Caching and performance optimizations
-
-### v1.2.0 (Planned)
-
-- Real-time updates via webhooks
-- Advanced filtering and sorting options
-- Batch operations support
-- TypeScript strict mode compatibility
-
----
-
-## Support
-
-- **Documentation**: [README.md](./README.md)
-- **NPM Package**: https://www.npmjs.com/package/fragment-shopify-sdk
-- **Issues**: Please report issues in the GitHub repository