@pixelated-tech/components 3.2.9 → 3.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{README.COMPONENTS.MD → README.COMPONENTS.md} +16 -29
- package/dist/components/cms/gravatar.css +8 -0
- package/dist/components/cms/wordpress.components.js +3 -3
- package/dist/types/components/cms/wordpress.components.d.ts +4 -1
- package/dist/types/components/cms/wordpress.components.d.ts.map +1 -1
- package/dist/types/stories/cms/wordpress.stories.d.ts +5 -0
- package/dist/types/stories/cms/wordpress.stories.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -335,6 +335,7 @@ import { BlogPostList } from '@pixelated-tech/components';
|
|
|
335
335
|
| `site` | `string` | - | WordPress site identifier (e.g., 'your-blog.wordpress.com') |
|
|
336
336
|
| `count` | `number` | - | Number of posts to fetch (undefined = all) |
|
|
337
337
|
| `posts` | `BlogPostType[]` | - | Pre-fetched posts array |
|
|
338
|
+
| `showCategories` | `boolean` | `true` | Whether to display post categories |
|
|
338
339
|
|
|
339
340
|
#### BlogPostSummary
|
|
340
341
|
|
|
@@ -460,13 +461,12 @@ import { Gravatar } from '@pixelated-tech/components';
|
|
|
460
461
|
|
|
461
462
|
### HubSpot
|
|
462
463
|
|
|
463
|
-
CRM integration for HubSpot forms and tracking.
|
|
464
|
+
CRM integration for HubSpot forms and tracking.
|
|
464
465
|
|
|
465
466
|
```tsx
|
|
466
|
-
import {
|
|
467
|
+
import { HubSpot } from '@pixelated-tech/components';
|
|
467
468
|
|
|
468
|
-
<
|
|
469
|
-
region="na1"
|
|
469
|
+
<HubSpot
|
|
470
470
|
portalId="1234567"
|
|
471
471
|
formId="abcd-1234-5678-efgh"
|
|
472
472
|
/>
|
|
@@ -475,11 +475,9 @@ import { HubSpotForm } from '@pixelated-tech/components';
|
|
|
475
475
|
#### Props
|
|
476
476
|
| Prop | Type | Default | Description |
|
|
477
477
|
|------|------|---------|-------------|
|
|
478
|
-
| `
|
|
479
|
-
| `
|
|
480
|
-
| `
|
|
481
|
-
| `target` | `string` | `'#hubspot-form-container'` | Form target element selector |
|
|
482
|
-
| `containerId` | `string` | `'hubspot-form-container'` | Container element ID |
|
|
478
|
+
| `portalId` | `string` | - | HubSpot portal ID |
|
|
479
|
+
| `formId` | `string` | - | HubSpot form ID |
|
|
480
|
+
| `onFormSubmit` | `function` | - | Form submission callback |
|
|
483
481
|
|
|
484
482
|
### Instagram
|
|
485
483
|
|
|
@@ -996,32 +994,22 @@ import { NotFound } from '@pixelated-tech/components';
|
|
|
996
994
|
|
|
997
995
|
### GoogleAnalytics
|
|
998
996
|
|
|
999
|
-
Google Analytics tracking component.
|
|
997
|
+
Google Analytics tracking component.
|
|
1000
998
|
|
|
1001
999
|
```tsx
|
|
1002
1000
|
import { GoogleAnalytics } from '@pixelated-tech/components';
|
|
1003
1001
|
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
<GoogleAnalytics id="G-XXXXXXXXXX" />
|
|
1002
|
+
<GoogleAnalytics
|
|
1003
|
+
trackingId="GA_MEASUREMENT_ID"
|
|
1004
|
+
debug={false}
|
|
1005
|
+
/>
|
|
1009
1006
|
```
|
|
1010
1007
|
|
|
1011
1008
|
#### Props
|
|
1012
1009
|
| Prop | Type | Default | Description |
|
|
1013
1010
|
|------|------|---------|-------------|
|
|
1014
|
-
| `
|
|
1015
|
-
|
|
1016
|
-
#### Configuration
|
|
1017
|
-
```tsx
|
|
1018
|
-
const pixelatedConfig = {
|
|
1019
|
-
googleAnalytics: {
|
|
1020
|
-
id: 'G-XXXXXXXXXX', // Google Analytics measurement ID
|
|
1021
|
-
adId: 'AW-XXXXXXXXX', // Optional: Google Ads conversion tracking
|
|
1022
|
-
}
|
|
1023
|
-
};
|
|
1024
|
-
```
|
|
1011
|
+
| `trackingId` | `string` | - | Google Analytics tracking ID |
|
|
1012
|
+
| `debug` | `boolean` | `false` | Enable debug mode |
|
|
1025
1013
|
|
|
1026
1014
|
### GoogleMap
|
|
1027
1015
|
|
|
@@ -1369,8 +1357,8 @@ const cloudinaryConfig = {
|
|
|
1369
1357
|
|
|
1370
1358
|
```tsx
|
|
1371
1359
|
const wordpressConfig = {
|
|
1372
|
-
|
|
1373
|
-
|
|
1360
|
+
site: 'your-blog.wordpress.com', // WordPress site URL
|
|
1361
|
+
apiVersion: '1.1' // API version (optional)
|
|
1374
1362
|
};
|
|
1375
1363
|
```
|
|
1376
1364
|
|
|
@@ -1392,7 +1380,6 @@ const config = {
|
|
|
1392
1380
|
username: 'your-calendly-username'
|
|
1393
1381
|
},
|
|
1394
1382
|
hubspot: {
|
|
1395
|
-
region: 'na1',
|
|
1396
1383
|
portalId: 'your-portal-id',
|
|
1397
1384
|
formId: 'your-form-id'
|
|
1398
1385
|
},
|
|
@@ -107,4 +107,12 @@
|
|
|
107
107
|
|
|
108
108
|
.gravatar-card-compact .gravatar-about {
|
|
109
109
|
display: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Responsive: Stack horizontal layout vertically on small screens */
|
|
113
|
+
@media (max-width: 480px) {
|
|
114
|
+
.gravatar-card-horizontal {
|
|
115
|
+
flex-direction: column;
|
|
116
|
+
align-items: center;
|
|
117
|
+
}
|
|
110
118
|
}
|
|
@@ -13,7 +13,7 @@ function decodeString(str) {
|
|
|
13
13
|
return textarea.value;
|
|
14
14
|
}
|
|
15
15
|
export function BlogPostList(props) {
|
|
16
|
-
const { site: propSite, baseURL: propBaseURL, count, posts: cachedPosts } = props;
|
|
16
|
+
const { site: propSite, baseURL: propBaseURL, count, posts: cachedPosts, showCategories = true } = props;
|
|
17
17
|
const config = usePixelatedConfig();
|
|
18
18
|
const site = propSite ?? config?.wordpress?.site;
|
|
19
19
|
const baseURL = propBaseURL ?? config?.wordpress?.baseURL;
|
|
@@ -39,14 +39,14 @@ export function BlogPostList(props) {
|
|
|
39
39
|
ToggleLoading({ show: false });
|
|
40
40
|
})();
|
|
41
41
|
}, [site, baseURL, count, cachedPosts]);
|
|
42
|
-
return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { 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)))] }));
|
|
42
|
+
return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { 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, showCategories: showCategories }) }, post.ID)))] }));
|
|
43
43
|
}
|
|
44
44
|
export function BlogPostSummary(props) {
|
|
45
45
|
const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
|
|
46
46
|
const config = usePixelatedConfig();
|
|
47
47
|
const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
|
|
48
48
|
return (_jsx("div", { className: "blog-post-summary", 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 } }) })] })) :
|
|
49
|
-
_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));
|
|
49
|
+
_jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), props.showCategories !== false && (_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));
|
|
50
50
|
}
|
|
51
51
|
export function BlogPostCategories(props) {
|
|
52
52
|
if (!props.categories || props.categories.length === 0) {
|
|
@@ -5,8 +5,11 @@ export declare function BlogPostList(props: {
|
|
|
5
5
|
baseURL?: string;
|
|
6
6
|
count?: number;
|
|
7
7
|
posts?: BlogPostType[];
|
|
8
|
+
showCategories?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function BlogPostSummary(props: BlogPostType & {
|
|
11
|
+
showCategories?: boolean;
|
|
8
12
|
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare function BlogPostSummary(props: BlogPostType): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export declare function BlogPostCategories(props: {
|
|
11
14
|
categories: string[];
|
|
12
15
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wordpress.components.d.ts","sourceRoot":"","sources":["../../../../src/components/cms/wordpress.components.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,OAAO,iBAAiB,CAAC;AAWzB,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"wordpress.components.d.ts","sourceRoot":"","sources":["../../../../src/components/cms/wordpress.components.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAI1D,OAAO,iBAAiB,CAAC;AAWzB,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,2CAmDxI;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,2CAiDjF;AAID,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,kDA0BjE"}
|
|
@@ -3,6 +3,11 @@ export function WordpressBlogPostList(): import("react/jsx-runtime").JSX.Element
|
|
|
3
3
|
export namespace WordpressBlogPostList {
|
|
4
4
|
let storyName: string;
|
|
5
5
|
}
|
|
6
|
+
export function WordpressBlogPostListNoCategories(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export namespace WordpressBlogPostListNoCategories {
|
|
8
|
+
let storyName_1: string;
|
|
9
|
+
export { storyName_1 as storyName };
|
|
10
|
+
}
|
|
6
11
|
declare namespace _default {
|
|
7
12
|
export let title: string;
|
|
8
13
|
export { BlogPostSummary as component };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wordpress.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/cms/wordpress.stories.js"],"names":[],"mappings":"AA8BA,oFAsCC;AAED,iFAEC
|
|
1
|
+
{"version":3,"file":"wordpress.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/cms/wordpress.stories.js"],"names":[],"mappings":"AA8BA,oFAsCC;AAED,iFAEC;;;;AAID,6FAEC;;;;;;;;;;;gCA7E6C,uCAAuC"}
|