@pixelated-tech/components 3.1.4

package/dist/components/cms/flickr.js

@@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import { generateURL } from '../utilities/api';
+import { mergeDeep } from '../utilities/functions';
+const defaultFlickr = {
+    flickr: {
+        baseURL: 'https://api.flickr.com/services/rest/?',
+        urlProps: {
+            method: 'flickr.photos.search',
+            api_key: '882cab5548d53c9e6b5fb24d59cc321d',
+            user_id: '15473210@N04',
+            tags: 'pixelatedviewsgallery',
+            extras: 'date_taken,description,owner_name',
+            sort: 'date-taken-desc',
+            per_page: 500,
+            format: 'json',
+            photoSize: 'Medium',
+            nojsoncallback: 'true' /*,
+            startPos: 0 */
+        }
+    },
+};
+function getFlickrSize(size) {
+    // https://www.flickr.com/services/api/misc.urls.html
+    switch (size) {
+        case 'Square': return '_s'; // 75
+        case 'Large Square': return '_q'; // 150
+        case 'Thumbnail': return '_t'; // 100
+        case 'Small': return '_m'; // 240
+        case 'Small 320': return '_n'; // 320
+        case 'Medium': return ''; // 500
+        case 'Medium 640': return '_z'; // 640
+        case 'Medium 800': return '_c'; // 800
+        case 'Large': return '_b'; // 1024
+        // case "Large2" : return "_h"; // 1600 + secret
+        // case "Large3" : return "_k"; // 2048 + secret
+        // case "XL3K" : return "_3k"; // 3072 + secret
+        // case "XL4K" : return "_4k"; // 4096 + secret
+        // case "XLF" : return "_f"; // 4096 + secret - only 2:1 aspect ratio
+        // case "XL5K" : return "_5k"; // 5120 + secret
+        // case "XL6K" : return "_6k"; // 6144 + secret
+        // case "Original" : return "_o"; // secret + EXIF data; not rotated, ? ext
+        default: return '';
+    }
+}
+GetFlickrData.PropTypes = {
+    flickr: PropTypes.object.isRequired,
+};
+export function GetFlickrData(props) {
+    const debug = false;
+    const flickr = mergeDeep(defaultFlickr.flickr, props.flickr);
+    const myURL = generateURL(flickr.baseURL, flickr.urlProps);
+    const fetchFlickrData = async () => {
+        try {
+            const response = await fetch(myURL);
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const jsonData = await response.json();
+            let myFlickrImages = [];
+            if (jsonData.photos) {
+                // photos for tags - flickr.photos.search
+                myFlickrImages = jsonData.photos.photo;
+            }
+            else if (jsonData.photoset) {
+                // photoset for albums - flickr.photosets.getPhotos
+                myFlickrImages = jsonData.photoset.photo;
+            }
+            else {
+                console.log('Error fetching Flickr images');
+            }
+            myFlickrImages.sort((a, b) => {
+                return new Date(b.datetaken).getTime() - new Date(a.datetaken).getTime();
+            }); // b - a for reverse sort
+            if (debug)
+                console.log('Flickr Cards:', myFlickrImages);
+            return myFlickrImages;
+            // const myFlickrCards = GenerateFlickrCards(myFlickrImages);
+            // console.log('Flickr Cards:', myFlickrCards);
+            // return myFlickrCards;
+        }
+        catch (err) {
+            console.log('Error fetching Flickr data:', err);
+        }
+        finally {
+            if (debug)
+                console.log('Flickr data fetch completed');
+        }
+    };
+    return fetchFlickrData();
+}
+GenerateFlickrCards.propTypes = {
+    flickrImages: PropTypes.array.isRequired,
+    photoSize: PropTypes.string.isRequired,
+};
+export function GenerateFlickrCards(props) {
+    if (props.flickrImages?.length > 0) {
+        const photoSize = getFlickrSize(props.photoSize);
+        const flickrCards = props.flickrImages.map((image, i) => ({
+            link: 'https://farm' + image.farm + '.static.flickr.com/' + image.server + '/' + image.id + '_' + image.secret + photoSize + '.jpg',
+            image: 'https://farm' + image.farm + '.static.flickr.com/' + image.server + '/' + image.id + '_' + image.secret + photoSize + '.jpg',
+            imageAlt: image.title,
+            headerText: image.title,
+            subHeaderText: (i + 1) + " of " + props.flickrImages.length + " by " + image.ownername + " on " + image.datetaken,
+            bodyText: image.description._content,
+        }));
+        return flickrCards;
+    }
+}
+FlickrWrapper.propTypes = {
+    method: PropTypes.string,
+    api_key: PropTypes.string.isRequired,
+    user_id: PropTypes.string.isRequired,
+    tags: PropTypes.string,
+    photoset_id: PropTypes.string,
+    photoSize: PropTypes.string,
+    callback: PropTypes.func.isRequired,
+    /* 	callback: (arg0: CarouselCardType[]) => void; */
+};
+export function FlickrWrapper(props) {
+    const flickr = {
+        flickr: {
+            baseURL: 'https://api.flickr.com/services/rest/?',
+            urlProps: {
+                method: props.method || 'flickr.photos.search',
+                api_key: props.api_key /* || '882cab5548d53c9e6b5fb24d59cc321d' */,
+                user_id: props.user_id /* || '15473210@N04' */,
+                tags: props.tags || '' /* || 'btw-customsunglasses' */,
+                photoset_id: props.photoset_id || '',
+                photoSize: props.photoSize || 'Large',
+                extras: 'date_taken,description,owner_name',
+                sort: 'date-taken-desc',
+                per_page: 500,
+                format: 'json',
+                nojsoncallback: 'true'
+            }
+        }
+    };
+    async function getFlickrCards() {
+        const myPromise = GetFlickrData(flickr);
+        const myFlickrImages = await myPromise;
+        const myPhotoSize = flickr.flickr.urlProps.photoSize;
+        const myFlickrCards = GenerateFlickrCards({ flickrImages: myFlickrImages, photoSize: myPhotoSize });
+        // REMOVE LINKS
+        if (myFlickrCards) {
+            const myScrubbedFlickrCards = myFlickrCards.map((obj, index) => {
+                return {
+                    index: index,
+                    cardIndex: index,
+                    cardLength: myFlickrCards.length,
+                    image: obj.image,
+                    imageAlt: obj.imageAlt,
+                    subHeaderText: obj.subHeaderText
+                };
+            });
+            props.callback(myScrubbedFlickrCards);
+            return myScrubbedFlickrCards;
+        }
+    }
+    return getFlickrCards();
+}

package/dist/components/cms/google.reviews.components.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { getGoogleReviewsByPlaceId } from './google.reviews.functions';
+export function GoogleReviewsCard(props) {
+    const [place, setPlace] = useState();
+    const [reviews, setReviews] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        (async () => {
+            try {
+                const result = await getGoogleReviewsByPlaceId({
+                    placeId: props.placeId,
+                    language: props.language,
+                    maxReviews: props.maxReviews,
+                    proxyBase: props.proxyBase,
+                });
+                setPlace(result.place);
+                setReviews(result.reviews);
+                setLoading(false);
+            }
+            catch (e) {
+                setError(e?.message || 'Failed to fetch reviews');
+                setLoading(false);
+            }
+        })();
+    }, [props.placeId, props.language, props.maxReviews, props.proxyBase]);
+    if (loading) {
+        return (_jsx("div", { style: { padding: 16 }, children: _jsx("p", { children: "Loading reviews..." }) }));
+    }
+    if (error) {
+        return (_jsx("div", { style: { padding: 16 }, children: _jsxs("p", { style: { color: 'tomato' }, children: ["Error: ", error] }) }));
+    }
+    return (_jsxs("div", { style: { padding: 16 }, children: [_jsx("h3", { children: place?.name || 'Reviews' }), place?.formatted_address && (_jsx("p", { style: { fontSize: '0.9em', color: '#666', marginBottom: 16 }, children: place.formatted_address })), reviews.length === 0 ? (_jsx("p", { children: "No reviews found." })) : (_jsx("ul", { style: { listStyle: 'none', padding: 0 }, children: reviews.map((r, i) => (_jsxs("li", { style: { marginBottom: 16, borderBottom: '1px solid #eee', paddingBottom: 12 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginBottom: 8 }, children: [r.profile_photo_url && (_jsx("img", { src: r.profile_photo_url, alt: r.author_name, style: { width: 40, height: 40, borderRadius: '50%', marginRight: 12 } })), _jsxs("div", { children: [_jsx("strong", { children: r.author_name }), _jsxs("div", { style: { fontSize: '0.9em', color: '#666' }, children: ['★'.repeat(r.rating), '☆'.repeat(5 - r.rating), " ", r.rating, "/5", r.relative_time_description && _jsxs("span", { children: [" \u00B7 ", r.relative_time_description] })] })] })] }), r.text && _jsx("div", { style: { marginTop: 8, lineHeight: 1.5 }, children: r.text })] }, i))) })), place && (_jsx("a", { href: `https://search.google.com/local/writereview?placeid=${place.place_id}`, target: "_blank", rel: "noopener noreferrer", style: { display: 'inline-block', marginTop: 16, color: '#1a73e8', textDecoration: 'none' }, children: "Write a review on Google \u2192" }))] }));
+}

package/dist/components/cms/google.reviews.functions.js

@@ -0,0 +1,26 @@
+// Server-side: Fetch Google reviews by place_id
+// Requires: GOOGLE_MAPS_API_KEY or hard-coded key
+// Flow: Place Details (reviews)
+export async function getGoogleReviewsByPlaceId(params) {
+    const apiKey = 'AIzaSyBtknq7LHzN0xb0lIN3K0CXXf0swVp6ReA';
+    if (!apiKey) {
+        throw new Error('GOOGLE_MAPS_API_KEY is required');
+    }
+    const { placeId, language, maxReviews, proxyBase } = params;
+    const detailsBase = 'https://maps.googleapis.com/maps/api/place/details/json';
+    const fields = encodeURIComponent('reviews,name,place_id,formatted_address');
+    const detailsUrl = `${detailsBase}?place_id=${encodeURIComponent(placeId)}&fields=${fields}${language ? `&language=${encodeURIComponent(language)}` : ''}&key=${apiKey}`;
+    const detResp = await fetch(proxyBase ? `${proxyBase}${encodeURIComponent(detailsUrl)}` : detailsUrl, { cache: 'no-store' });
+    const detData = await detResp.json();
+    if (detData.status !== 'OK' || !detData.result) {
+        return { reviews: [] };
+    }
+    const place = {
+        name: detData.result.name,
+        place_id: detData.result.place_id,
+        formatted_address: detData.result.formatted_address,
+    };
+    const reviews = Array.isArray(detData.result.reviews) ? detData.result.reviews : [];
+    const limited = typeof maxReviews === 'number' ? reviews.slice(0, maxReviews) : reviews;
+    return { place, reviews: limited };
+}

package/dist/components/cms/gravatar.components.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SmartImage } from './cloudinary.image';
+import { usePixelatedConfig } from '../config/config.client';
+export function GravatarCard(props) {
+    const { profile, layout = 'horizontal', direction = 'left', avatarSize = 120, compact = false, } = props;
+    // Merge: prop overrides take precedence over Gravatar data
+    const displayName = props.displayName ?? profile?.displayName ?? 'Unknown';
+    const avatarUrl = props.thumbnailUrl ?? profile?.thumbnailUrl ?? `https://www.gravatar.com/avatar/00000000000000000000000000000000?s=${avatarSize}&d=mp`;
+    const aboutMe = props.aboutMe ?? profile?.aboutMe;
+    const jobTitle = props.job_title ?? props.customRole ?? profile?.job_title;
+    const company = props.company ?? profile?.company;
+    const location = props.currentLocation ?? profile?.currentLocation;
+    const pronouns = props.pronouns ?? profile?.pronouns;
+    const profileLink = props.profileUrl ?? profile?.profileUrl;
+    // Social links: props override, fallback to Gravatar accounts
+    const githubUrl = props.socialLinks?.github ?? profile?.accounts?.find((a) => a.shortname === 'github')?.url;
+    const linkedinUrl = props.socialLinks?.linkedin ?? profile?.accounts?.find((a) => a.shortname === 'linkedin')?.url;
+    const twitterUrl = props.socialLinks?.twitter ?? profile?.accounts?.find((a) => a.shortname === 'twitter')?.url;
+    const instagramUrl = props.socialLinks?.instagram ?? profile?.accounts?.find((a) => a.shortname === 'instagram')?.url;
+    const websiteUrl = props.socialLinks?.website;
+    const isHorizontal = layout === 'horizontal';
+    const photoOnRight = direction === 'right';
+    const config = usePixelatedConfig();
+    const avatarElement = (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(SmartImage, { src: avatarUrl, alt: displayName, title: displayName, width: avatarSize, height: avatarSize, style: {
+                borderRadius: '50%',
+                objectFit: 'cover',
+                display: 'block',
+            }, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }) }));
+    const contentElement = (_jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("h3", { style: { margin: 0, fontSize: compact ? '1.1em' : '1.4em' }, children: profileLink ? (_jsx("a", { href: profileLink, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none', color: 'inherit' }, children: displayName })) : (displayName) }), pronouns && _jsxs("span", { style: { fontSize: '0.9em', color: '#666', marginLeft: 8 }, children: ["(", pronouns, ")"] })] }), (jobTitle || company) && (_jsxs("div", { style: { fontSize: '0.95em', color: '#555', marginBottom: 8 }, children: [jobTitle && _jsx("strong", { children: jobTitle }), jobTitle && company && _jsx("span", { children: " at " }), company && _jsx("span", { children: company })] })), location && (_jsxs("div", { style: { fontSize: '0.9em', color: '#777', marginBottom: 8 }, children: ["\uD83D\uDCCD ", location] })), aboutMe && !compact && (_jsx("p", { style: { margin: '12px 0', fontSize: '0.95em', lineHeight: 1.5, color: '#333' }, children: aboutMe })), (githubUrl || linkedinUrl || twitterUrl || instagramUrl || websiteUrl) && (_jsxs("div", { style: { display: 'flex', gap: 12, marginTop: 12, flexWrap: 'wrap' }, children: [githubUrl && (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#333', textDecoration: 'none', fontSize: '1.2em' }, children: "GitHub" })), linkedinUrl && (_jsx("a", { href: linkedinUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#0077b5', textDecoration: 'none', fontSize: '1.2em' }, children: "LinkedIn" })), twitterUrl && (_jsx("a", { href: twitterUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#1da1f2', textDecoration: 'none', fontSize: '1.2em' }, children: "X" })), instagramUrl && (_jsx("a", { href: instagramUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#e4405f', textDecoration: 'none', fontSize: '1.2em' }, children: "Instagram" })), websiteUrl && (_jsx("a", { href: websiteUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#666', textDecoration: 'none', fontSize: '1.2em' }, children: "Website" }))] }))] }));
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isHorizontal ? 'row' : 'column',
+            alignItems: isHorizontal ? 'flex-start' : 'center',
+            gap: 16,
+            padding: 16,
+            border: '1px solid #e0e0e0',
+            borderRadius: 8,
+            maxWidth: isHorizontal ? 600 : 400,
+        }, children: isHorizontal && photoOnRight ? (_jsxs(_Fragment, { children: [contentElement, avatarElement] })) : (_jsxs(_Fragment, { children: [avatarElement, contentElement] })) }));
+}

package/dist/components/cms/gravatar.functions.js

@@ -0,0 +1,52 @@
+// Gravatar integration functions
+// Fetch avatar and profile data from Gravatar API
+import md5 from 'md5';
+/**
+ * Generate MD5 hash of email for Gravatar lookups (works in browser and Node.js)
+ * @param email - Email address
+ * @returns MD5 hash (lowercase, trimmed)
+ */
+function getGravatarHash(email) {
+    return md5(email.trim().toLowerCase());
+}
+/**
+ * Get Gravatar avatar URL from email
+ * @param email - Email address
+ * @param size - Image size in pixels (default 200)
+ * @param defaultImage - Default image type: 404, mp (mystery person), identicon, monsterid, wavatar, retro, blank
+ * @returns Gravatar avatar URL
+ */
+export function getGravatarAvatarUrl(email, size = 200, defaultImage = 'mp') {
+    const hash = getGravatarHash(email);
+    return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultImage}`;
+}
+/**
+ * Fetch full Gravatar profile data
+ * @param email - Email address
+ * @returns Promise of Gravatar profile or null if not found
+ */
+export async function getGravatarProfile(email) {
+    const hash = getGravatarHash(email);
+    const url = `https://en.gravatar.com/${hash}.json`;
+    try {
+        const response = await fetch(url, { cache: 'no-store' });
+        if (!response.ok)
+            return null;
+        const data = await response.json();
+        if (!data.entry || data.entry.length === 0)
+            return null;
+        return data.entry[0];
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Extract social account URL by shortname
+ * @param profile - Gravatar profile
+ * @param shortname - Account shortname (e.g., 'github', 'linkedin', 'twitter')
+ * @returns URL or undefined if not found
+ */
+export function getGravatarAccountUrl(profile, shortname) {
+    return profile.accounts?.find((acc) => acc.shortname === shortname)?.url;
+}

package/dist/components/cms/hubspot.components.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+export function initializeHubSpotScript(region, portalId) {
+    if (typeof document === 'undefined')
+        return;
+    const scriptId = `hubspot-script-${region}-${portalId}`;
+    if (document.getElementById(scriptId))
+        return;
+    const script = document.createElement('script');
+    script.id = scriptId;
+    script.src = `https://js-${region}.hsforms.net/forms/embed/${portalId}.js`;
+    // script.async = true;
+    script.defer = true;
+    document.head.appendChild(script);
+}
+HubSpotForm.propTypes = {
+    region: PropTypes.string.isRequired,
+    portalId: PropTypes.string.isRequired,
+    formId: PropTypes.string.isRequired,
+    target: PropTypes.string,
+    containerId: PropTypes.string,
+};
+export function HubSpotForm({ region, portalId, formId, target, containerId = 'hubspot-form-container' }) {
+    const formTarget = target || `#${containerId}`;
+    useEffect(() => {
+        const createHubspotForm = () => {
+            const win = window;
+            if (win.hbspt && win.hbspt.forms) {
+                win.hbspt.forms.create({
+                    region,
+                    portalId,
+                    formId,
+                    target: formTarget
+                });
+            }
+            else {
+                // no window object yet; this will rerun again
+            }
+        };
+        createHubspotForm();
+    }, [region, portalId, formId, formTarget]);
+    return _jsx("div", { className: "hs-form-frame", "data-region": region, "data-form-id": formId, "data-portal-id": portalId });
+}

package/dist/components/cms/hubspot.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+HubspotTrackingCode.propTypes = {
+    hubID: PropTypes.string.isRequired,
+};
+export function HubspotTrackingCode(props) {
+    return (_jsx(_Fragment, { children: _jsx("script", { type: "text/javascript", id: "hs-script-loader", async: true, defer: true, src: `//js-na2.hs-scripts.com/${props.hubID}.js` }) }));
+}
+getHubspotFormSubmissions.propTypes = {
+    proxyURL: PropTypes.string.isRequired,
+    formGUID: PropTypes.string.isRequired,
+    apiToken: PropTypes.string.isRequired,
+};
+export async function getHubspotFormSubmissions(props) {
+    const url = `${props.proxyURL}https://api.hubapi.com/form-integrations/v1/submissions/forms/${props.formGUID}`;
+    const headers = {
+        Authorization: "Bearer " + props.apiToken,
+    };
+    try {
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: headers,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (error) {
+        console.error('Error fetching HubSpot form submissions:', error);
+        return null;
+    }
+}

package/dist/components/cms/instagram.components.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { getInstagramTiles } from './instagram.functions';
+import { Tiles } from '../tiles/tiles';
+export function InstagramTiles(props) {
+    const [tiles, setTiles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        (async () => {
+            try {
+                const result = await getInstagramTiles({
+                    accessToken: props.accessToken,
+                    userId: props.userId,
+                    limit: props.limit ?? 12,
+                    useThumbnails: props.useThumbnails,
+                    includeVideos: props.includeVideos,
+                    includeCaptions: props.includeCaptions,
+                });
+                setTiles(result);
+                setLoading(false);
+            }
+            catch (e) {
+                setError(e?.message || 'Failed to fetch Instagram media');
+                setLoading(false);
+            }
+        })();
+    }, [props.accessToken, props.userId, props.limit, props.useThumbnails, props.includeVideos, props.includeCaptions]);
+    if (loading) {
+        return (_jsx("div", { style: { padding: 16 }, children: _jsx("p", { children: "Loading Instagram posts..." }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { style: { padding: 16 }, children: [_jsxs("p", { style: { color: 'tomato' }, children: ["Error: ", error] }), _jsx("p", { style: { fontSize: '0.9em', marginTop: 8 }, children: "Make sure you have a valid Instagram user access token with instagram_basic permissions." })] }));
+    }
+    if (tiles.length === 0) {
+        return (_jsx("div", { style: { padding: 16 }, children: _jsx("p", { children: "No Instagram posts found." }) }));
+    }
+    return _jsx(Tiles, { cards: tiles, rowCount: props.rowCount });
+}

package/dist/components/cms/instagram.functions.js

@@ -0,0 +1,67 @@
+// Server-side: Fetch Instagram media from Instagram Graph API
+// Requires: Instagram Business/Creator account, Facebook Page, OAuth access token
+// Returns: Array compatible with Tiles/Carousel components
+/**
+ * Fetch Instagram media for a user/page using Graph API
+ * @param accessToken - Long-lived user access token (refresh every 60 days)
+ * @param userId - Instagram Business Account ID (get via /me/accounts endpoint)
+ * @param limit - Number of posts to fetch (default 25, max 100)
+ * @param fields - Comma-separated fields to retrieve
+ * @returns Promise of media items
+ */
+export async function getInstagramMedia(params) {
+    // TEMP: Hard-coded token for testing
+    const accessToken = params.accessToken || 'EAAtmg2zNJnABQCcGOWOUt7tR03RAF3dBZC2HFk9T0XZCvRaTddrUos8qV0UGSswVdc5d2N0o3ZAir5sEjyiglCkoffzvTwn068WTJUgSAdaRzfqRhE6Pb8D9u9wgjJuqIpDqQRIdFTlgsIVbKZBLBP2qPx72yjO3k6IuK2ksQZB4SqkyCr7ZBy7NaVXh9x2AZDZD';
+    const { userId = 'me', limit = 25, fields = 'id,media_type,media_url,thumbnail_url,permalink,caption,timestamp,username' } = params;
+    const url = `https://graph.instagram.com/${userId}/media?fields=${encodeURIComponent(fields)}&limit=${limit}&access_token=${accessToken}`;
+    const response = await fetch(url, { cache: 'no-store' });
+    const data = await response.json();
+    if (!response.ok || !data.data) {
+        throw new Error(`Instagram API error: ${JSON.stringify(data)}`);
+    }
+    return data.data;
+}
+/**
+ * Convert Instagram media to Tiles/Carousel compatible format
+ * @param media - Array of Instagram media items
+ * @param options - Transformation options
+ * @returns Array of CarouselCardType for use in Tiles or Carousel
+ */
+export function instagramMediaToTiles(media, options) {
+    const { useThumbnails = true, includeVideos = true, includeCaptions = true } = options ?? {};
+    return media
+        .filter((item) => {
+        if (!includeVideos && item.media_type === 'VIDEO')
+            return false;
+        return true;
+    })
+        .map((item, index) => {
+        let imageUrl = item.media_url;
+        if (item.media_type === 'VIDEO' && useThumbnails && item.thumbnail_url) {
+            imageUrl = item.thumbnail_url;
+        }
+        return {
+            index,
+            cardIndex: index,
+            cardLength: media.length,
+            link: item.permalink,
+            linkTarget: '_blank',
+            image: imageUrl,
+            imageAlt: item.username ? `@${item.username} on Instagram` : 'Instagram post',
+            bodyText: includeCaptions ? item.caption : undefined,
+        };
+    });
+}
+/**
+ * Convenience: Fetch Instagram media and convert to Tiles format in one call
+ * @param accessToken - Instagram Graph API access token
+ * @param userId - Instagram Business Account ID
+ * @param limit - Number of posts (default 12)
+ * @param options - Transformation options
+ * @returns Promise of CarouselCardType array ready for Tiles/Carousel
+ */
+export async function getInstagramTiles(params) {
+    const { accessToken, userId, limit = 12, useThumbnails, includeVideos, includeCaptions } = params ?? {};
+    const media = await getInstagramMedia({ accessToken, userId, limit });
+    return instagramMediaToTiles(media, { useThumbnails, includeVideos, includeCaptions });
+}

package/dist/components/cms/wordpress.components.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { usePixelatedConfig } from "../config/config.client";
+import { SmartImage } from './cloudinary.image';
+import { GridItem } from '../general/layout';
+import { getWordPressItems } from './wordpress.functions';
+import { Loading, ToggleLoading } from '../general/loading';
+import "./wordpress.css";
+// https://microformats.org/wiki/h-entry
+function decodeString(s) {
+    let temp = document.createElement('p');
+    temp.innerHTML = s;
+    const str = temp.textContent || temp.innerText;
+    temp = null;
+    return str;
+}
+export function BlogPostList(props) {
+    const { site, count } = props;
+    const [posts, setPosts] = useState([]);
+    useEffect(() => {
+        ToggleLoading({ show: true });
+        (async () => {
+            const data = (await getWordPressItems({ site, count })) ?? [];
+            const sorted = data.sort((a, b) => ((a.date ?? '') < (b.date ?? '')) ? 1 : -1);
+            setPosts(sorted);
+            ToggleLoading({ show: false });
+        })();
+    }, [site, count]);
+    return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(GridItem, { children: _jsx(BlogPostSummary, { ID: post.ID, title: post.title, date: post.date, excerpt: post.excerpt, URL: post.URL, categories: post.categories, featured_image: post.featured_image }) }, post.ID)))] }));
+}
+export function BlogPostSummary(props) {
+    const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
+    const config = usePixelatedConfig();
+    const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
+    return (_jsx("div", { className: "blogPostSummary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL, target: "_blank", rel: "noopener noreferrer", children: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", new Date(props.date).toLocaleDateString()] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: decodeString(props.title), title: decodeString(props.title), style: { borderRadius: '20px' }, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
+                    _jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), _jsxs("div", { children: ["Categories:", myCategoryImages.map(([categoryImg, index]) => (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)))] })] }) }, props.ID));
+}
+export function BlogPostCategories(props) {
+    if (!props.categories || props.categories.length === 0) {
+        return null;
+    }
+    const myCategoryImages = props.categories.map((category) => (category !== "Uncategorized")
+        ? category.trim().toLowerCase().replace(/[ /]+/g, '-')
+        : undefined).sort();
+    const config = usePixelatedConfig();
+    return (_jsxs("div", { className: "blogPostCategories", children: [_jsx("div", { children: "Categories: " }), myCategoryImages.map((categoryImg, index) => categoryImg ? (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { className: "u-photo", src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)) : null)] }));
+}

package/dist/components/cms/wordpress.css

@@ -0,0 +1,55 @@
+
+/* https://microformats.org/wiki/h-entry */
+
+
+.blogPostSummary { 
+    border: 1px solid #ccc;
+    margin: 10px; 
+    padding: 20px; 
+    border-radius: 25px;
+}
+
+.blogPostCategories { 
+    /* border: 1px solid #ccc; */
+    margin: 10px; 
+    padding: 20px; 
+    border-radius: 25px;
+}
+
+.blogPostSummary { 
+
+    article {
+        .p-name { --do-nothing: true; }
+        .p-summary { padding-bottom: 20px; }
+        .e-content { --do-nothing: true }
+        .dt-published { padding-bottom: 20px; }
+        .dt-updated { --do-nothing: true }
+        .p-author { --do-nothing: true }
+        .p-category { --do-nothing: true }
+        .u-url { --do-nothing: true }
+        .u-uid { --do-nothing: true }
+        .p-location { --do-nothing: true }
+        .u-syndication { --do-nothing: true }
+        .u-in-reply-to { --do-nothing: true } 
+        .p-rsvp { --do-nothing: true }
+        .u-like-of { --do-nothing: true }
+        .u-repost-of { --do-nothing: true }
+    }
+
+    article * {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        hyphens: auto;
+    }
+
+}
+
+    .blogPostSummary .p-category img,
+    .blogPostCategories .p-category img { 
+        width: 30px;
+        height: 30px;
+        margin: 0 5px;
+        vertical-align: middle;
+    }