@pixelated-tech/components 3.1.4

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

@@ -0,0 +1,49 @@
+// const wpSite = "pixelatedviews.wordpress.com";
+// const wpSite = "19824045";
+// const wpSite = "blog.pixelated.tech";
+const wpApiURL = "https://public-api.wordpress.com/rest/v1/sites/";
+const wpCategoriesPath = "/categories";
+export async function getWordPressItems(props) {
+    const requested = props.count; // undefined means fetch all available
+    const posts = [];
+    let page = 1;
+    while (true) {
+        const remaining = requested ? Math.max(requested - posts.length, 0) : 100;
+        const number = Math.min(remaining || 100, 100);
+        const wpPostsURL = `${wpApiURL}${props.site}/posts?number=${number}&page=${page}`;
+        try {
+            const response = await fetch(wpPostsURL);
+            const data = await response.json();
+            const batch = Array.isArray(data.posts) ? data.posts : [];
+            if (batch.length === 0) {
+                break; // no more posts
+            }
+            posts.push(...batch);
+            if (requested && posts.length >= requested) {
+                break; // collected enough
+            }
+            page++;
+        }
+        catch (error) {
+            console.error("Error fetching WP posts:", error);
+            return;
+        }
+    }
+    return posts;
+}
+export async function getWordPressCategories(props) {
+    const wpCategoriesURL = wpApiURL + props.site + wpCategoriesPath;
+    const categories = [];
+    try {
+        const response = await fetch(wpCategoriesURL);
+        const data = await response.json();
+        // Check for total pages on the first page
+        const myCategories = data.categories.map((category) => (category.name));
+        categories.push(...myCategories);
+    }
+    catch (error) {
+        console.error("Error fetching WP categories:", error);
+        return;
+    }
+    return categories; // Return the complete list of categories
+}

package/dist/components/config/config.client.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const PixelatedConfigContext = React.createContext(null);
+export const PixelatedClientConfigProvider = ({ config, children, }) => {
+    return _jsx(PixelatedConfigContext.Provider, { value: config, children: children });
+};
+/**
+ * Hook to get the Pixelated config. This throws in development when the provider is missing to
+ * make misconfiguration obvious. If you prefer a non-throwing variant use `useOptionalPixelatedConfig`.
+ */
+export const usePixelatedConfig = () => {
+    const ctx = React.useContext(PixelatedConfigContext);
+    if (!ctx) {
+        if (process.env.NODE_ENV !== 'production') {
+            throw new Error('PixelatedClientConfigProvider not found. Wrap your app with PixelatedClientConfigProvider.');
+        }
+        // In production return an empty object typed as PixelatedConfig to avoid runtime crashes
+        return {};
+    }
+    return ctx;
+};

package/dist/components/config/config.example.js

@@ -0,0 +1,70 @@
+// Example pixelated.config.ts for consumer apps.
+// Place this file in your app (for example: `src/pixelated.config.ts`) and import it where you mount the provider.
+const pixelatedConfig = {
+    cloudinary: {
+        product_env: 'your-cloud-name',
+        baseUrl: 'https://res.cloudinary.com',
+        secure: true,
+        transforms: 'f_auto,c_limit,q_auto,dpr_auto',
+    },
+    contentful: {
+        base_url: "https://cdn.contentful.com",
+        space_id: "soi9w77t7027",
+        environment: "master",
+        delivery_access_token: "muY9LfpCt4qoXosDsnRkkoH3DAVVuUFEuB0WRKRdBUM",
+        management_access_token: "muY9LfpCt4qoXosDsnRkkoH3DAVVuUFEuB0WRKRdBUM",
+        preview_access_token: "muY9LfpCt4qoXosDsnRkkoH3DAVVuUFEuB0WRKRdBUM",
+    },
+    featureFlags: {
+        enableNewGrid: true,
+    },
+    ebay: {
+        proxyURL: 'https://proxy.provier.com/proxy?url=',
+        appId: 'your-ebay-client-id',
+        appCertId: 'your-ebay-client-secret',
+        sbxAppId: 'your-ebay-sandbox-client-id',
+        sbxAppCertId: 'your-ebay-sandbox-client-secret',
+        globalId: 'EBAY_US',
+        environment: 'production',
+        tokenScope: 'https://api.ebay.com/oauth/api_scope',
+        baseTokenURL: 'https://api.ebay.com/identity/v1/oauth2/token',
+        baseSearchURL: 'https://api.ebay.com/buy/browse/v1/item_summary/search',
+        qsSearchURL: '?q=sunglasses&fieldgroups=full&category_ids=79720&aspect_filter=categoryId:79720&filter=sellers:{pixelatedtech}&sort=newlyListed&limit=200',
+        baseItemURL: 'https://api.ebay.com/buy/browse/v1/item',
+        qsItemURL: '/v1|295959752403|0?fieldgroups=PRODUCT,ADDITIONAL_SELLER_DETAILS',
+    },
+    flickr: {
+        baseURL: 'https://api.flickr.com/services/rest/?',
+        urlProps: {
+            method: 'flickr.photos.search',
+            api_key: 'your-flickr-api-key',
+            user_id: 'your-flickr-user-id',
+            tags: 'gallery-name',
+            extras: 'date_taken,description,owner_name',
+            sort: 'date-taken-desc',
+            per_page: 500,
+            format: 'json',
+            photoSize: 'Medium',
+            nojsoncallback: 'true'
+        }
+    },
+    googleAnalytics: {
+        id: 'G-XXXXXXX',
+        adId: 'AW-XXXXXXXXX',
+    },
+    googleSearchConsole: {
+        "id": "G-XXXXXXX"
+    },
+    hubspot: {
+        portalId: 'your-hubspot-portal-id',
+        formId: 'your-default-form-id',
+        trackingCode: 'UA-XXXXXXXXX-X',
+    },
+    paypal: {
+        sandboxPayPalApiKey: "your-sandbox-paypal-client-id",
+        sandboxPayPalSecret: "your-sandbox-paypal-client-secret",
+        payPalApiKey: "your-paypal-client-id",
+        payPalSecret: "your-paypal-client-secret"
+    },
+};
+export default pixelatedConfig;

package/dist/components/config/config.js

@@ -0,0 +1,53 @@
+const debug = false;
+/**
+ * Read the full master config blob from environment.
+ * This function is intended for server-side use only.
+ */
+export function getFullPixelatedConfig() {
+    const raw = process.env.PIXELATED_CONFIG_JSON || (process.env.PIXELATED_CONFIG_B64 && Buffer.from(process.env.PIXELATED_CONFIG_B64, 'base64').toString('utf8'));
+    if (!raw) {
+        console.error('PIXELATED_CONFIG not found: neither PIXELATED_CONFIG_JSON nor PIXELATED_CONFIG_B64 is set in the environment.');
+        return {};
+    }
+    const source = process.env.PIXELATED_CONFIG_JSON ? 'PIXELATED_CONFIG_JSON' : 'PIXELATED_CONFIG_B64';
+    try {
+        const parsed = JSON.parse(raw);
+        if (debug)
+            console.log(`PIXELATED_CONFIG loaded from ${source}; raw length=${raw.length}`);
+        return parsed;
+    }
+    catch (err) {
+        console.error('Failed to parse PIXELATED_CONFIG JSON; source=', source, 'rawLength=', raw.length, err);
+        return {};
+    }
+}
+/**
+ * Produce a client-safe copy of a full config by removing secret-like keys.
+ * This will walk the object and drop any fields that match a secret pattern.
+ */
+export function getClientOnlyPixelatedConfig(full) {
+    const src = full ?? getFullPixelatedConfig();
+    function isSecretKey(key) {
+        return /token|secret|key|password|management|access/i.test(key);
+    }
+    function strip(obj) {
+        if (!obj || typeof obj !== 'object')
+            return obj;
+        if (Array.isArray(obj))
+            return obj.map(strip);
+        const out = {};
+        for (const k of Object.keys(obj)) {
+            if (isSecretKey(k))
+                continue;
+            out[k] = strip(obj[k]);
+        }
+        return out;
+    }
+    try {
+        return strip(src);
+    }
+    catch (err) {
+        console.error('Failed to strip secrets from config', err);
+        return {};
+    }
+}

package/dist/components/config/config.server.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClientOnlyPixelatedConfig } from './config';
+// Server wrapper: reads server env blob and sanitizes it, then mounts the client provider.
+// Important: do NOT import client components at module scope — dynamically import
+// the client provider inside the function so this module remains server-safe.
+export async function PixelatedServerConfigProvider({ config, children, }) {
+    const cfg = config ?? getClientOnlyPixelatedConfig();
+    const mod = await import('./config.client');
+    const Provider = mod.PixelatedClientConfigProvider;
+    return _jsx(Provider, { config: cfg, children: children });
+}

package/dist/components/config/config.types.js

@@ -0,0 +1,2 @@
+// Types for Pixelated integration configuration
+export {};

package/dist/components/general/css.js

@@ -0,0 +1,60 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isPartialMatchInArray(searchString, array) {
+    // Convert both the search string and array items to lowercase for case-insensitive matching
+    const lowerCaseSearchString = searchString.toLowerCase();
+    return array.every(item => {
+        return item.toLowerCase().includes(lowerCaseSearchString);
+    });
+}
+export function preloadAllCSS() {
+    // console.log("Deferring all CSS loading...");
+    // Select all link tags with rel="stylesheet"
+    const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
+    stylesheets.forEach(function (stylesheet) {
+        // PRELOAD THE STYLESHEET WITH A LINK TAG
+        const link = document.createElement('link');
+        link.rel = 'preload';
+        link.as = 'style';
+        link.href = stylesheet.href;
+        link.fetchPriority = 'high';
+        document.head.appendChild(link);
+        stylesheet.setAttribute('fetchpriority', 'high');
+    });
+    // Provide a noscript fallback for browsers that don't execute JavaScript
+    const noscript = document.createElement('noscript');
+    stylesheets.forEach(function (link) {
+        const fallbackLink = document.createElement('link');
+        fallbackLink.rel = 'stylesheet';
+        fallbackLink.href = link.href;
+        fallbackLink.fetchPriority = 'high';
+        fallbackLink.type = 'text/css';
+        noscript.appendChild(fallbackLink);
+    });
+    document.head.appendChild(noscript);
+}
+export function deferAllCSS() {
+    // console.log("Deferring all CSS loading...");
+    // Select all link tags with rel="stylesheet"
+    const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
+    stylesheets.forEach(function (link) {
+        // Change rel to "preload" and as to "style" to asynchronously load the stylesheet
+        link.rel = 'preload';
+        link.as = 'style';
+        // Add an onload handler to apply the stylesheet once loaded
+        link.onload = function () {
+            link.rel = 'stylesheet'; // Apply the stylesheet
+            link.onload = null; // Remove the onload handler to prevent re-execution
+        };
+    });
+    // Provide a noscript fallback for browsers that don't execute JavaScript
+    const noscript = document.createElement('noscript');
+    stylesheets.forEach(function (link) {
+        const fallbackLink = document.createElement('link');
+        fallbackLink.rel = 'stylesheet';
+        fallbackLink.href = link.href;
+        noscript.appendChild(fallbackLink);
+    });
+    document.head.appendChild(noscript);
+}
+// Call the function when the DOM is ready
+// document.addEventListener('DOMContentLoaded', deferAllCSS);

package/dist/components/general/headers.css

@@ -0,0 +1,16 @@
+.pageHeader {
+    display: block;
+    font-size: var(--font-size1, 2em);
+    font-variant-caps: small-caps;
+    font-variant: small-caps;
+    text-align: center;
+    font-weight: 800;
+}
+
+.pageSectionHeader {
+    display: block;
+    font-size: var(--font-size2, 1.65em);
+    text-align: center;
+    font-weight: 700;
+    margin: 20px;
+}

package/dist/components/general/headers.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import "./headers.css";
+/* ========== CALLOUT HEADER ========== */
+PageHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string
+};
+export function PageHeader({ title, url }) {
+    const calloutTarget = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
+    return (_jsx(_Fragment, { children: url
+            ? _jsx("a", { href: url, target: calloutTarget, rel: "noopener noreferrer", children: _jsx("h1", { className: "pageHeader", children: title }) })
+            : _jsx("h1", { className: "pageHeader", children: title }) }));
+}
+;
+/* ========== CALLOUT HEADER ========== */
+PageSectionHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string
+};
+export function PageSectionHeader({ title, url }) {
+    const calloutTarget = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
+    return (_jsx(_Fragment, { children: url
+            ? _jsx("a", { href: url, target: calloutTarget, rel: "noopener noreferrer", children: _jsx("h2", { className: "pageSectionHeader", children: title }) })
+            : _jsx("h2", { className: "pageSectionHeader", children: title }) }));
+}
+;

package/dist/components/general/image.js

@@ -0,0 +1,81 @@
+/* export function lazyLoadImages() {
+    const lazyImages = document.querySelectorAll("img[data-src]");
+    const options = {
+        rootMargin: "0px 0px 100px 0px", // Preload images when they are 100px from entering the viewport
+        threshold: 0, // Trigger when any part of the element intersects
+    };
+    const imageObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                const image = entry.target as HTMLImageElement;
+                image.src = image.dataset.src!; // Set the actual image source
+                image.removeAttribute("data-src"); // Remove data-src to prevent re-observing
+                // Optional: Add a class for styling or animation
+                image.classList.add("loaded");
+                observer.unobserve(image); // Stop observing once loaded
+            }
+        });
+    }, options);
+    lazyImages.forEach((image) => {
+        imageObserver.observe(image);
+    });
+} */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+}
+function isPartiallyInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+        rect.bottom > 0 &&
+        rect.right > 0);
+}
+export function preloadImages() {
+    const images = document.querySelectorAll("img");
+    images.forEach(function (image) {
+        // PRELOAD THE IMAGE WITH A LINK TAG
+        const link = document.createElement('link');
+        link.rel = 'preload';
+        link.as = 'image';
+        link.href = image.src;
+        // link.type = 'image/' + image.src.split('.').pop();
+        if (isPartiallyInViewport(image))
+            link.fetchPriority = 'high';
+        document.head.appendChild(link);
+        preloadImage(image.src);
+        // SET FETCHPRIORITY = HIGH FOR ALL IMAGES IN VIEWPORT
+        if (isPartiallyInViewport(image)) {
+            image.setAttribute('fetchpriority', 'high');
+        }
+    });
+}
+export function preloadImages_v2() {
+    if (typeof document === "undefined")
+        return; // SSR guard
+    const images = document.querySelectorAll("img");
+    const preloaded = new Set();
+    images.forEach((image) => {
+        const src = image.src;
+        if (!src || preloaded.has(src))
+            return; // Skip if no src or already preloaded
+        // Create preload link
+        const link = document.createElement("link");
+        link.rel = "preload";
+        link.as = "image";
+        link.href = src;
+        document.head.appendChild(link);
+        // Preload via JS
+        const img = new window.Image();
+        img.src = src;
+        preloaded.add(src);
+    });
+}
+function preloadImage(url) {
+    const img = new Image();
+    img.src = url;
+}

package/dist/components/general/layout.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { SmartImage } from "../cms/cloudinary.image";
+import "../../css/pixelated.grid.scss";
+import "./layout.scss";
+import { usePixelatedConfig } from "../config/config.client";
+/* ==================== LAYOUT COMPONENTS ====================
+Reusable, scalable layout components for grid and flex layouts.
+These components can be used in the pagebuilder to create
+responsive, customizable page sections.
+==================== ==================== */
+// Define option arrays - used by both PropTypes and form generation
+export const layoutTypes = ['grid', 'flex', 'none'];
+export const autoFlowValues = ['row', 'column', 'dense', 'row dense', 'column dense'];
+export const justifyItemsValues = ['start', 'center', 'end', 'stretch'];
+export const flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
+export const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+export const justifyContentValues = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
+export const alignItemsValues = ['start', 'center', 'end', 'stretch', 'baseline'];
+// ========== PAGE SECTION ==========
+PageSection.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    layoutType: PropTypes.oneOf([...layoutTypes]),
+    // Common props
+    gap: PropTypes.string,
+    maxWidth: PropTypes.string,
+    padding: PropTypes.string,
+    background: PropTypes.string,
+    backgroundImage: PropTypes.string,
+    // Grid-specific props
+    columns: PropTypes.number,
+    autoFlow: PropTypes.oneOf([...autoFlowValues]),
+    justifyItems: PropTypes.oneOf([...justifyItemsValues]),
+    responsive: PropTypes.shape({
+        mobile: PropTypes.number,
+        tablet: PropTypes.number,
+        desktop: PropTypes.number,
+    }),
+    // Flex-specific props
+    direction: PropTypes.oneOf([...flexDirections]),
+    wrap: PropTypes.oneOf([...flexWraps]),
+    justifyContent: PropTypes.oneOf([...justifyContentValues]),
+    // Shared alignment
+    alignItems: PropTypes.oneOf([...alignItemsValues]),
+    children: PropTypes.node,
+};
+export function PageSection({ id, className, layoutType = 'grid', gap = '10px', maxWidth = '1024px', padding = '0 20px', /* 5px */ background, backgroundImage, 
+// Grid props
+columns = 12, autoFlow = 'row', justifyItems = 'stretch', 
+// responsive = { mobile: 1, tablet: 2, desktop: 3 },
+// Flex props
+direction = 'row', wrap = 'wrap', justifyContent = 'start', 
+// Shared
+alignItems = 'stretch', children, }) {
+    const sectionStyle = {
+        ...(background && { background }),
+    };
+    const contentStyle = {
+        ...(maxWidth && { maxWidth }),
+        margin: '0 auto',
+        ...(padding && { padding }),
+    };
+    // Add layout-specific styles
+    if (layoutType === 'grid') {
+        return (_jsxs("section", { id: id || undefined, className: "page-section" + (className ? ` ${className}` : ''), style: sectionStyle, children: [backgroundImage && _jsx(SectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content" + " row-" + columns + "col", style: {
+                        ...contentStyle,
+                        ...(gap && { gap }),
+                        ...(autoFlow && { gridAutoFlow: autoFlow }),
+                        ...(alignItems && { alignItems }),
+                        ...(justifyItems && { justifyItems }),
+                    }, children: children })] }));
+    }
+    if (layoutType === 'flex') {
+        return (_jsxs("section", { id: id || undefined, className: "page-section page-section-flex", style: sectionStyle, children: [backgroundImage && _jsx(SectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content", style: {
+                        ...contentStyle,
+                        display: 'flex',
+                        ...(direction && { flexDirection: direction }),
+                        ...(wrap && { flexWrap: wrap }),
+                        ...(gap && { gap }),
+                        ...(alignItems && { alignItems: alignItems }),
+                        ...(justifyContent && { justifyContent: justifyContent }),
+                    }, children: children })] }));
+    }
+    // layoutType === 'none'
+    return (_jsxs("section", { id: id || undefined, className: "page-section page-section-none", style: sectionStyle, children: [backgroundImage && _jsx(SectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content", style: contentStyle, children: children })] }));
+}
+// ========== GRID ITEM ==========
+GridItem.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    columnSpan: PropTypes.number,
+    rowSpan: PropTypes.number,
+    columnStart: PropTypes.number,
+    columnEnd: PropTypes.number,
+    rowStart: PropTypes.number,
+    rowEnd: PropTypes.number,
+    alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    justifySelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    children: PropTypes.node,
+};
+export function GridItem({ id, className, columnSpan, rowSpan, columnStart, columnEnd, rowStart, rowEnd, alignSelf, justifySelf, children, }) {
+    const itemStyle = {
+        ...(columnSpan && !columnStart && { gridColumn: ` span ${columnSpan}` }),
+        // columnStart && columnSpan = style grid-s##-w##
+        // columnStart && columnEnd = style grid-s##-e##
+        // ...(columnStart && columnEnd && { gridColumn: ` ${columnStart} / ${columnEnd}` }),
+        ...(rowSpan && { gridRow: ` span ${rowSpan}` }),
+        ...(rowStart && rowEnd && { gridRow: ` ${rowStart} / ${rowEnd}` }),
+        ...(alignSelf && { alignSelf }),
+        ...(justifySelf && { justifySelf }),
+    };
+    return (
+    /* THIS IS AN OLD STYLE */
+    /* <div className={"grid-item" + */
+    _jsx("div", { className: "gridItem" +
+            (className ? ` ${className}` : '') +
+            (columnStart && columnSpan && !columnEnd ? ` grid-s${columnStart}-w${columnSpan}` : '') +
+            (columnStart && columnEnd && !columnSpan ? ` grid-s${columnStart}-e${columnEnd}` : ''), id: (id) ? id : undefined, style: itemStyle, children: children }));
+}
+// ========== FLEX ITEM ==========
+FlexItem.propTypes = {
+    flex: PropTypes.string,
+    order: PropTypes.number,
+    alignSelf: PropTypes.oneOf(['auto', 'start', 'center', 'end', 'stretch', 'baseline']),
+    children: PropTypes.node,
+};
+export function FlexItem({ flex = '1', order, alignSelf, children, }) {
+    const itemStyle = {
+        ...(flex && { flex }),
+        ...(order !== undefined && order !== null && { order }),
+        ...(alignSelf && { alignSelf: alignSelf }),
+    };
+    return (_jsx("div", { className: "flex-item", style: itemStyle, children: children }));
+}
+// ========== SECTION BACKGROUND IMAGE ==========
+SectionBackgroundImage.propTypes = {
+    backgroundImage: PropTypes.string.isRequired,
+    id: PropTypes.string,
+};
+export function SectionBackgroundImage(props) {
+    const config = usePixelatedConfig();
+    return (_jsx(_Fragment, { children: _jsx(SmartImage, { src: props.backgroundImage, className: "section-background-image", id: props.id ? `${props.id}-background-image` : undefined, 
+            // name={props.id ? `${props.id} background image` : undefined}
+            title: props.id ? `${props.id} background image` : undefined, alt: props.id ? `${props.id} background image` : "", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }));
+}

package/dist/components/general/layout.scss

@@ -0,0 +1,47 @@
+/* ========================================
+=========     LAYOUT COMPONENTS    =========
+======================================== */
+
+section.page-section {
+    position: relative;
+    overflow: hidden;
+	/* margin-bottom: 50px; */
+	padding: 0 0 30px 0;
+}
+
+/* section:first-of-type .page-section {
+	padding: 30px 0;
+} */
+
+/* Base section styles (used by `PageSection` component) */
+.section-background-image {
+	width: 100%;
+	height: 100% !important;
+	object-fit: cover;
+	object-position: center top;
+	position: absolute;
+	opacity: 0.3;
+	z-index: -1;
+}
+
+.page-section-content {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+/* Grid item styles */
+/* ALL GRID STYLES ARE IN PIXELATED.GRID.SCSS */
+/* 
+.grid-item {
+	box-sizing: border-box;
+	display: grid ;
+	min-width: 0; // Prevents grid blowout
+	min-height: 0;
+}
+*/
+
+/* Flex item styles */
+.flex-item {
+	box-sizing: border-box;
+	min-width: 0; // Prevents flex blowout
+}

package/dist/components/general/loading.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./loading.scss";
+/*
+https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
+https://www.andreaverlicchi.eu/blog/css-3-only-spinning-loading-animation/
+*/
+/* ========== MARKDOWN ========== */
+export function Loading() {
+    return (_jsx(_Fragment, { children: _jsx("div", { id: "loadingSpinner", className: "loading", children: _jsxs("div", { className: "spinner", children: [_jsx("div", { className: "bar1" }), _jsx("div", { className: "bar2" }), _jsx("div", { className: "bar3" }), _jsx("div", { className: "bar4" }), _jsx("div", { className: "bar5" }), _jsx("div", { className: "bar6" }), _jsx("div", { className: "bar7" }), _jsx("div", { className: "bar8" }), _jsx("div", { className: "bar9" }), _jsx("div", { className: "bar10" }), _jsx("div", { className: "bar11" }), _jsx("div", { className: "bar12" })] }) }) }));
+}
+ToggleLoading.propTypes = {
+    show: PropTypes.bool,
+};
+export function ToggleLoading(props) {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+        const loadingElem = document.getElementById("loadingSpinner");
+        if (!loadingElem)
+            return;
+        if (props.show && props.show === true) {
+            loadingElem.style.display = "inline-block";
+            return;
+        } // Show content
+        if (props.show && props.show === false) {
+            loadingElem.style.display = "none";
+            return;
+        } // Hide content
+        if (loadingElem && loadingElem.style.display === "none") {
+            loadingElem.style.display = "inline-block"; // Show content
+        }
+        else {
+            if (loadingElem)
+                loadingElem.style.display = "none"; // Hide content
+        }
+    }
+}