@pixelated-tech/components 3.1.5 → 3.2.0

package/dist/components/seo/sitemap.js

@@ -1,9 +1,129 @@
 import PropTypes from "prop-types";
-import { getAllRoutes, getAllImages } from "./metadata";
+import { getAllRoutes } from "./metadata";
 import { getWordPressItems } from "../cms/wordpress.functions";
-import { getContentfulFieldValues } from "../cms/contentful.delivery";
+import { getContentfulFieldValues, getContentfulAssetURLs } from "../cms/contentful.delivery";
 import { getEbayAppToken, getEbayItemsSearch } from "../shoppingcart/ebay.functions";
 import { getFullPixelatedConfig } from '../config/config';
+/**
+ * Helper to construct an origin string from a Next-like headers() object or plain values.
+ * Accepts an object with `get(key)` method, or `undefined` and falls back to localhost origin.
+ */
+export function getOriginFromHeaders(headersLike, fallbackOrigin = 'http://localhost:3000') {
+    try {
+        if (!headersLike)
+            return fallbackOrigin;
+        const proto = headersLike.get('x-forwarded-proto') || 'http';
+        const host = headersLike.get('host') || 'localhost:3000';
+        return `${proto}://${host}`;
+    }
+    catch (e) {
+        console.log("Error getting origin from headers:", e);
+        return fallbackOrigin;
+    }
+}
+/**
+ * Next-specific async helper: getOriginFromNextHeaders
+ * - Convenience wrapper that dynamically imports `next/headers` and calls our `getOriginFromHeaders` function
+ * - Falls back to `fallbackOrigin` if `next/headers` not available or on error
+ */
+export async function getOriginFromNextHeaders(fallbackOrigin = 'http://localhost:3000') {
+    try {
+        // dynamic import ensures we don't require 'next/headers' in non-Next environments
+        const mod = await import('next/headers');
+        if (mod && typeof mod.headers === 'function') {
+            const hdrs = await mod.headers();
+            return getOriginFromHeaders(hdrs, fallbackOrigin);
+        }
+    }
+    catch (e) {
+        console.log("Error getting origin from Next headers:", e);
+        // Not in a Next environment or module not found; return fallback
+    }
+    return fallbackOrigin;
+}
+export function flattenRoutes(routes) {
+    // Convenience wrapper for the project-level getAllRoutes helper
+    return getAllRoutes(routes, 'routes');
+}
+export function jsonToSitemapEntries(entries) {
+    return entries.map((entry) => `<url>
+				<loc>${entry.url}</loc>
+				<lastmod>${entry.lastModified}</lastmod>
+				<changefreq>${entry.changeFrequency}</changefreq>
+				<priority>${entry.priority}</priority>
+			</url>`).join('');
+}
+/**
+ * generateSitemap: compose the individual create* functions based on toggles in SitemapConfig.
+ * - Keep this minimal for the MVP: no retries/caching here. Add TODOs for later.
+ */
+export async function generateSitemap(cfg = {}, originInput) {
+    const origin = originInput ?? 'http://localhost:3000';
+    const sitemapEntries = [];
+    // Defaults: pages true, image json true, others false
+    const usePages = cfg.createPageURLs ?? true;
+    const useWP = cfg.createWordPressURLs ?? false;
+    const useImageJSON = cfg.createImageURLsFromJSON ?? true;
+    const useContentful = cfg.createContentfulURLs ?? false;
+    const useContentfulImages = cfg.createContentfulImageURLs ?? false;
+    const usePageBuilder = cfg.createPageBuilderURLs ?? false;
+    const useEbay = cfg.createEbayItemURLs ?? false;
+    // Pages
+    if (usePages) {
+        if (cfg.routes) {
+            const flat = flattenRoutes(cfg.routes);
+            sitemapEntries.push(...(await createPageURLs(flat, origin)));
+        }
+    }
+    // Image JSON
+    if (useImageJSON) {
+        sitemapEntries.push(...(await createImageURLsFromJSON(origin, cfg.imageJson?.path ?? 'public/site-images.json')));
+    }
+    // WordPress
+    if (useWP && cfg.wordpress?.site) {
+        sitemapEntries.push(...(await createWordPressURLs({ site: cfg.wordpress.site })));
+    }
+    // Contentful (pages)
+    if (useContentful && cfg.contentful) {
+        sitemapEntries.push(...(await createContentfulURLs({ apiProps: cfg.contentful, origin })));
+    }
+    // Contentful images
+    if (useContentfulImages && cfg.contentful) {
+        sitemapEntries.push(...(await createContentfulImageURLs({ apiProps: cfg.contentful, origin })));
+    }
+    // Page Builder (existing helper in package not always present)
+    if (usePageBuilder && cfg.contentful) {
+        // TODO: wire createContentfulPageBuilderURLs if needed; skipping for MVP
+    }
+    // Ebay items
+    if (useEbay) {
+        sitemapEntries.push(...(await createEbayItemURLs(origin)));
+    }
+    // Deduplicate by URL and properly merge images arrays if present
+    const map = new Map();
+    for (const entry of sitemapEntries.flat()) {
+        if (!entry || !entry.url)
+            continue;
+        const key = entry.url.toLowerCase();
+        const existing = map.get(key);
+        if (!existing) {
+            map.set(key, { ...entry });
+        }
+        else {
+            // Merge images
+            if (entry.images && entry.images.length) {
+                existing.images = Array.from(new Set([...(existing.images || []), ...entry.images]));
+            }
+            // Keep the earliest lastModified? Use whichever is present (prefer existing)
+            existing.lastModified = existing.lastModified || entry.lastModified;
+            existing.priority = existing.priority || entry.priority;
+            existing.changeFrequency = existing.changeFrequency || entry.changeFrequency;
+            map.set(key, existing);
+        }
+    }
+    const entries = Array.from(map.values());
+    return entries;
+}
 export async function createPageURLs(myRoutes, origin) {
     const sitemap = [];
     // const origin = await getOrigin();
@@ -12,7 +132,7 @@ export async function createPageURLs(myRoutes, origin) {
         if (route.path.substring(0, 4).toLowerCase() !== 'http') {
             sitemap.push({
                 url: `${origin}${route.path}`,
-                lastModified: (new Date()).toISOString(),
+                lastModified: new Date(),
                 changeFrequency: "hourly",
                 priority: 1.0,
             });
@@ -20,15 +140,34 @@ export async function createPageURLs(myRoutes, origin) {
     }
     return sitemap;
 }
-export async function createImageURLs(origin) {
+export async function createImageURLsFromJSON(origin, jsonPath = 'public/site-images.json') {
     const sitemap = [];
-    // const origin = await getOrigin();
-    const images = getAllImages();
-    const newImages = images.map((image) => { return (`${origin}${image}`); });
-    sitemap.push({
-        url: `${origin}/images`, // Provide a valid URL for the images
-        images: newImages,
-    });
+    try {
+        let urlPath = jsonPath;
+        if (urlPath.startsWith('public/'))
+            urlPath = urlPath.slice('public/'.length);
+        if (!urlPath.startsWith('/'))
+            urlPath = `/${urlPath}`;
+        const resp = await fetch(`${origin}${urlPath}`);
+        if (!resp.ok)
+            return sitemap;
+        const imgs = await resp.json();
+        if (!Array.isArray(imgs))
+            return sitemap;
+        // Use an array of URL strings so the sitemap serializer writes the URL text
+        const newImages = imgs.map(i => {
+            const rel = i.startsWith('/') ? i : `/${i}`;
+            return `${origin}${rel}`;
+        });
+        sitemap.push({
+            url: `${origin}/images`,
+            images: newImages,
+        });
+    }
+    catch (e) {
+        if (typeof console !== 'undefined')
+            console.warn('createImageURLsFromJSON failed', e);
+    }
     return sitemap;
 }
 export async function createWordPressURLs(props) {
@@ -37,7 +176,7 @@ export async function createWordPressURLs(props) {
     for await (const post of blogPosts ?? []) {
         sitemap.push({
             url: post.URL,
-            lastModified: post.modified ?? new Date().toISOString(),
+            lastModified: post.modified ? new Date(post.modified) : new Date(),
             changeFrequency: "hourly",
             priority: 1.0,
         });
@@ -66,7 +205,7 @@ export async function createContentfulURLs(props) {
     for (const title of contentfulTitles) {
         sitemap.push({
             url: `${props.origin}/projects/${encodeURIComponent(title)}`,
-            lastModified: (new Date()).toISOString(),
+            lastModified: new Date(),
             changeFrequency: "hourly",
             priority: 1.0,
         });
@@ -92,13 +231,51 @@ export async function createContentfulPageBuilderURLs(props) {
     for (const pageName of pageNames) {
         sitemap.push({
             url: `${props.origin}/${encodeURIComponent(pageName)}`,
-            lastModified: (new Date()).toISOString(),
+            lastModified: new Date(),
             changeFrequency: "hourly",
             priority: 1.0,
         });
     }
     return sitemap;
 }
+createContentfulImageURLs.propTypes = {
+    apiProps: PropTypes.shape({
+        proxyURL: PropTypes.string,
+        base_url: PropTypes.string.isRequired,
+        space_id: PropTypes.string.isRequired,
+        environment: PropTypes.string.isRequired,
+        access_token: PropTypes.string.isRequired,
+    }).isRequired,
+    origin: PropTypes.string.isRequired,
+};
+export async function createContentfulImageURLs(props) {
+    const sitemap = [];
+    const providerContentfulApiProps = getFullPixelatedConfig()?.contentful;
+    const mergedApiProps = { ...providerContentfulApiProps, ...props.apiProps };
+    try {
+        const assets = await getContentfulAssetURLs({ apiProps: mergedApiProps });
+        if (!Array.isArray(assets) || assets.length === 0)
+            return sitemap;
+        const newImages = assets.map((a) => {
+            let i = a.image || '';
+            if (i.startsWith('//'))
+                i = `https:${i}`;
+            else if (i.startsWith('/'))
+                i = `${props.origin}${i}`;
+            return i;
+        }).filter(Boolean);
+        sitemap.push({
+            url: `${props.origin}/images`,
+            images: newImages,
+            lastModified: new Date(),
+        });
+    }
+    catch (e) {
+        if (typeof console !== 'undefined')
+            console.warn('createContentfulImageURLs failed', e);
+    }
+    return sitemap;
+}
 const defaultEbayProps = {
     proxyURL: "https://proxy.pixelated.tech/prod/proxy?url=",
     baseTokenURL: 'https://api.ebay.com/identity/v1/oauth2/token',
@@ -122,7 +299,7 @@ export async function createEbayItemURLs(origin) {
             for (const item of items.itemSummaries) {
                 sitemap.push({
                     url: `${origin}/store/${item.legacyItemId}`,
-                    lastModified: item.itemCreationDate,
+                    lastModified: item.itemCreationDate ? new Date(item.itemCreationDate) : new Date(),
                     changeFrequency: "hourly",
                     priority: 1.0,
                 });
@@ -131,41 +308,3 @@ export async function createEbayItemURLs(origin) {
     });
     return sitemap;
 }
-export function jsonToSitemapEntries(entries) {
-    return entries.map((entry) => `<url>
-				<loc>${entry.url}</loc>
-				<lastmod>${entry.lastModified}</lastmod>
-				<changefreq>${entry.changeFrequency}</changefreq>
-				<priority>${entry.priority}</priority>
-			</url>`).join('');
-}
-export async function createImageURLsFromJSON(origin, jsonPath = 'public/site-images.json') {
-    const sitemap = [];
-    try {
-        let urlPath = jsonPath;
-        if (urlPath.startsWith('public/'))
-            urlPath = urlPath.slice('public/'.length);
-        if (!urlPath.startsWith('/'))
-            urlPath = `/${urlPath}`;
-        const resp = await fetch(`${origin}${urlPath}`);
-        if (!resp.ok)
-            return sitemap;
-        const imgs = await resp.json();
-        if (!Array.isArray(imgs))
-            return sitemap;
-        // Use an array of URL strings so the sitemap serializer writes the URL text
-        const newImages = imgs.map(i => {
-            const rel = i.startsWith('/') ? i : `/${i}`;
-            return `${origin}${rel}`;
-        });
-        sitemap.push({
-            url: `${origin}/images`,
-            images: newImages,
-        });
-    }
-    catch (e) {
-        if (typeof console !== 'undefined')
-            console.warn('createImageURLsFromJSON failed', e);
-    }
-    return sitemap;
-}

package/dist/components/shoppingcart/ebay.css

@@ -66,18 +66,18 @@
 
 .ebayItemPhotoCarousel { 
 
-    .carouselContainer {
+    .carousel-container {
         background: none;
         border: none;
         height: 400px;
     }
 
-    .carouselCardsContainer {
+    .carousel-cards-container {
         height: 100%;
     }
 
-    .carouselButtons,
-    .carouselButton {
+    .carousel-buttons,
+    .carousel-button {
         display: inline-block;
     }
 
@@ -87,7 +87,7 @@
 	.ebayItemPhotoCarousel {
         height: 350px;
     }
-    .ebayItemPhotoCarousel .carouselContainer {
+    .ebayItemPhotoCarousel .carousel-container {
         height: 300px;
     }
 }

package/dist/components/shoppingcart/shoppingcart.css

@@ -6,7 +6,7 @@
     --do-nothing: true
 }
 
-.pixCart .calloutHeader {
+.pixCart .callout-header {
     text-align: left
 }
 

package/dist/components/{resume → structured}/resume.css

@@ -3,6 +3,10 @@
 ==========      RESUME       ==============
 ======================================== */
 
+[class*="grid"] {
+	padding: 10px;
+}
+
 .p-resume {
 	word-break: break-word;
 	line-height: 1.4;

package/dist/components/{resume → structured}/resume.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { format } from "date-fns";
-import "./resume.css";
-import "../../css/pixelated.grid.scss";
 import { usePixelatedConfig } from "../config/config.client";
 import { SmartImage } from "../cms/cloudinary.image";
+import "../../css/pixelated.grid.scss";
+import "./resume.css";
 /*
 Resume Microformat - https://microformats.org/wiki/h-resume
 Details Summary Expand Collapse - https://www.w3schools.com/tags/tag_details.asp
@@ -33,7 +33,7 @@ Resume.propTypes = {
     data: PropTypes.any.isRequired,
 };
 export function Resume(props) {
-    return (_jsx("section", { className: "p-resume", id: "resume-section", children: _jsx("div", { className: "section-container", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "p-name grid-s1-e13", children: _jsx(ResumeName, { data: props.data.items[0].properties.name }) }), _jsxs("div", { className: "bigpad divider grid-s1-e4", children: [_jsx("div", { className: "p-contact", children: _jsx(ResumeContact, { title: "Contact Information", data: props.data.items[0].properties.contact }) }), _jsx("div", { className: "p-education", children: _jsx(ResumeEvents, { title: "Education", data: props.data.items[0].properties.education, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-skills", children: _jsx(ResumeSkills, { title: "Skills", data: props.data.items[0].properties.skills }) })] }), _jsxs("div", { className: "bigpad grid-s4-e13", children: [_jsx("div", { className: "p-summary", children: _jsx(ResumeSummary, { title: "Professional Summary", data: props.data.items[0].properties.summary }) }), _jsx("div", { className: "p-qualifications", children: _jsx(ResumeQualifications, { title: "Professional Qualifications", data: props.data.items[0].properties.qualifications }) }), _jsx("div", { className: "p-experience", children: _jsx(ResumeEvents, { title: "Work History", data: props.data.items[0].properties.experience, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-projects", children: _jsx(ResumeProjects, { title: "Projects", data: props.data.items[0].properties.experience, collapsible: true }) }), _jsx("div", { className: "p-volunteer", children: _jsx(ResumeEvents, { title: "Volunteer Work", data: props.data.items[0].properties.volunteer, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-certifications", children: _jsx(ResumeEvents, { title: "Certifications", data: props.data.items[0].properties.certifications, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-awards", children: _jsx(ResumeEvents, { title: "Honors & Awards", data: props.data.items[0].properties.awards, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-training", children: _jsx(ResumeEvents, { title: "Training & Conferences", data: props.data.items[0].properties.training, dateFormat: "MM/dd/yyyy", collapsible: true }) }), _jsx("div", { className: "p-references", children: _jsx(ResumeReferences, { title: "References", data: props.data.items[0].properties.references, collapsible: true }) })] })] }) }) }));
+    return (_jsx("section", { className: "p-resume", id: "resume-section", children: _jsx("div", { className: "section-container", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "p-name grid-s1-e13", children: _jsx(ResumeName, { data: props.data.items[0].properties.name }) }), _jsxs("div", { className: "divider grid-s1-e4", children: [_jsx("div", { className: "p-contact", children: _jsx(ResumeContact, { title: "Contact Information", data: props.data.items[0].properties.contact }) }), _jsx("div", { className: "p-education", children: _jsx(ResumeEvents, { title: "Education", data: props.data.items[0].properties.education, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-skills", children: _jsx(ResumeSkills, { title: "Skills", data: props.data.items[0].properties.skills }) })] }), _jsxs("div", { className: "grid-s4-e13", children: [_jsx("div", { className: "p-summary", children: _jsx(ResumeSummary, { title: "Professional Summary", data: props.data.items[0].properties.summary }) }), _jsx("div", { className: "p-qualifications", children: _jsx(ResumeQualifications, { title: "Professional Qualifications", data: props.data.items[0].properties.qualifications }) }), _jsx("div", { className: "p-experience", children: _jsx(ResumeEvents, { title: "Work History", data: props.data.items[0].properties.experience, dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-projects", children: _jsx(ResumeProjects, { title: "Projects", data: props.data.items[0].properties.experience, collapsible: true }) }), _jsx("div", { className: "p-volunteer", children: _jsx(ResumeEvents, { title: "Volunteer Work", data: props.data.items[0].properties.volunteer, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-certifications", children: _jsx(ResumeEvents, { title: "Certifications", data: props.data.items[0].properties.certifications, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-awards", children: _jsx(ResumeEvents, { title: "Honors & Awards", data: props.data.items[0].properties.awards, dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-training", children: _jsx(ResumeEvents, { title: "Training & Conferences", data: props.data.items[0].properties.training, dateFormat: "MM/dd/yyyy", collapsible: true }) }), _jsx("div", { className: "p-references", children: _jsx(ResumeReferences, { title: "References", data: props.data.items[0].properties.references, collapsible: true }) })] })] }) }) }));
 }
 ResumeName.propTypes = {
     data: PropTypes.any.isRequired,

package/dist/components/{timeline → structured}/timeline.css

@@ -25,7 +25,7 @@
 }
 
 /* Container around content */
-.timelineContainer {
+.timeline-container {
   padding: 10px 40px;
   position: relative;
   background-color: inherit;
@@ -33,7 +33,7 @@
 }
 
 /* The circles on the timeline */
-.timelineContainer::after {
+.timeline-container::after {
   content: '';
   position: absolute;
   width: 25px;
@@ -47,25 +47,25 @@
 }
 
 @media screen and (max-width: 768px) {
-  .timelineContainer div[class*='grid-'] {
+  .timeline-container div[class*='grid-'] {
     grid-column: 1 / -1;
   }
 }
 
 /* Place the container to the left */
-.timelineleft {
+.timeline-left {
   left: 0;
   padding-left: 10px;
 }
 
 /* Place the container to the right */
-.timelineright {
+.timeline-right {
   left: 50%;
   padding-right: 10px;
 }
 
 /* Add arrows to the left container (pointing right) */
-.timelineleft::before {
+.timeline-left::before {
   content: " ";
   height: 0;
   position: absolute;
@@ -79,7 +79,7 @@
 }
 
 /* Add arrows to the right container (pointing left) */
-.timelineright::before {
+.timeline-right::before {
   content: " ";
   height: 0;
   position: absolute;
@@ -93,12 +93,12 @@
 }
 
 /* Fix the circle for containers on the right side */
-.timelineright::after {
+.timeline-right::after {
   left: -16px;
 }
 
 /* The actual content */
-.timelineContent {
+.timeline-content {
   padding: 10px;
   background-color: #EEE;
   position: relative;
@@ -113,14 +113,14 @@
   }
   
   /* Full-width containers */
-  .timelineContainer {
+  .timeline-container {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
   }
   
   /* Make sure that all arrows are pointing leftwards */
-  .timelineContainer::before {
+  .timeline-container::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
@@ -128,12 +128,12 @@
   }
 
   /* Make sure all circles are at the same spot */
-  .timelineleft::after, .timelineright::after {
+  .timeline-left::after, .timeline-right::after {
   left: 15px;
   }
   
   /* Make all right containers behave like the left ones */
-  .timelineright {
+  .timeline-right {
   left: 0%;
   }
-}
+}

package/dist/components/{timeline → structured}/timeline.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import "./timeline.css";
-import "../../css/pixelated.grid.scss";
 import { usePixelatedConfig } from '../config/config.client';
 import { SmartImage } from '../cms/cloudinary.image';
+import "../../css/pixelated.grid.scss";
+import "./timeline.css";
 // https://www.w3schools.com/howto/howto_css_timeline.asp
 Timeline.propTypes = {
     timelineData: PropTypes.arrayOf(PropTypes.shape({
@@ -24,5 +24,5 @@ TimelineItem.propTypes = {
 };
 export default function TimelineItem(props) {
     const config = usePixelatedConfig();
-    return (_jsx("div", { className: "timelineContainer timeline" + props.direction, children: _jsx("div", { className: "timelineContent", children: _jsxs("div", { className: "row-3col", children: [_jsx("div", { className: "grid-s1-e2", children: _jsx(SmartImage, { src: props.image || "", title: props.title, alt: props.title, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }) }), _jsxs("div", { className: "grid-s2-e4", children: [_jsx("h2", { children: props.title }), _jsx("p", { children: props.content })] })] }) }) }));
+    return (_jsx("div", { className: "timeline-container timeline-" + props.direction, children: _jsx("div", { className: "timeline-content", children: _jsxs("div", { className: "row-3col", children: [_jsx("div", { className: "grid-s1-e2", children: _jsx(SmartImage, { src: props.image || "", title: props.title, alt: props.title, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }) }), _jsxs("div", { className: "grid-s2-e4", children: [_jsx("h2", { children: props.title }), _jsx("p", { children: props.content })] })] }) }) }));
 }