astro-tractstack 2.0.0-rc.59 → 2.0.0-rc.60

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx +11 -1
  3. package/templates/src/utils/compositor/templateMarkdownStyles.ts +143 -143
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "astro-tractstack",
3
- "version": "2.0.0-rc.59",
3
+ "version": "2.0.0-rc.60",
4
4
  "description": "Astro integration for TractStack - redeeming the web from boring experiences",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx CHANGED
@@ -18,6 +18,16 @@ export interface PaneSnapshotGeneratorProps {
18
18
 
19
19
  const snapshotCache = new Map<string, SnapshotData>();
20
20
 
21
+ function hashString(str: string): string {
22
+ let hash = 0;
23
+ for (let i = 0; i < str.length; i++) {
24
+ const char = str.charCodeAt(i);
25
+ hash = (hash << 5) - hash + char;
26
+ hash = hash & hash; // Convert to 32bit integer
27
+ }
28
+ return hash.toString(36);
29
+ }
30
+
21
31
  export const PaneSnapshotGenerator = ({
22
32
  id,
23
33
  htmlString,
@@ -31,7 +41,7 @@ export const PaneSnapshotGenerator = ({
31
41
  useEffect(() => {
32
42
  if (!htmlString || isGenerating) return;
33
43
 
34
- const cacheKey = `${id}-${htmlString.length}-${outputWidth}`;
44
+ const cacheKey = `${id}-${hashString(htmlString)}-${outputWidth}`;
35
45
  if (snapshotCache.has(cacheKey)) {
36
46
  const cached = snapshotCache.get(cacheKey)!;
37
47
  onComplete(id, cached);
package/templates/src/utils/compositor/templateMarkdownStyles.ts CHANGED
@@ -361,18 +361,18 @@ export function getJustCopyDesign(
361
361
  if (bordered) {
362
362
  baseClasses[2].mobile.rounded = 'lg';
363
363
  baseClasses[2].mobile.shadow = 'md';
364
+ baseClasses[2].mobile.bgCOLOR = getColor(
365
+ {
366
+ light: useOdd ? 'brand-2' : 'white',
367
+ 'light-bw': useOdd ? 'white' : 'brand-2',
368
+ 'light-bold': useOdd ? 'brand-2' : 'white',
369
+ dark: useOdd ? 'black' : 'brand-1',
370
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
371
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
372
+ },
373
+ theme
374
+ );
364
375
  }
365
- baseClasses[2].mobile.bgCOLOR = getColor(
366
- {
367
- light: useOdd ? 'brand-2' : 'white',
368
- 'light-bw': useOdd ? 'white' : 'brand-2',
369
- 'light-bold': useOdd ? 'brand-2' : 'white',
370
- dark: useOdd ? 'black' : 'brand-1',
371
- 'dark-bw': useOdd ? 'black' : 'brand-1',
372
- 'dark-bold': useOdd ? 'brand-1' : 'black',
373
- },
374
- theme
375
- );
376
376
  break;
377
377
  }
378
378
 
@@ -386,18 +386,18 @@ export function getJustCopyDesign(
386
386
  if (bordered) {
387
387
  baseClasses[2].mobile.rounded = 'lg';
388
388
  baseClasses[2].mobile.shadow = 'md';
389
+ baseClasses[2].mobile.bgCOLOR = getColor(
390
+ {
391
+ light: useOdd ? 'brand-2' : 'white',
392
+ 'light-bw': useOdd ? 'white' : 'brand-2',
393
+ 'light-bold': useOdd ? 'brand-2' : 'white',
394
+ dark: useOdd ? 'black' : 'brand-1',
395
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
396
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
397
+ },
398
+ theme
399
+ );
389
400
  }
390
- baseClasses[2].mobile.bgCOLOR = getColor(
391
- {
392
- light: useOdd ? 'brand-2' : 'white',
393
- 'light-bw': useOdd ? 'white' : 'brand-2',
394
- 'light-bold': useOdd ? 'brand-2' : 'white',
395
- dark: useOdd ? 'black' : 'brand-1',
396
- 'dark-bw': useOdd ? 'black' : 'brand-1',
397
- 'dark-bold': useOdd ? 'brand-1' : 'black',
398
- },
399
- theme
400
- );
401
401
  break;
402
402
  }
403
403
 
@@ -409,18 +409,18 @@ export function getJustCopyDesign(
409
409
  if (bordered) {
410
410
  baseClasses[2].mobile.rounded = 'lg';
411
411
  baseClasses[2].mobile.shadow = 'md';
412
+ baseClasses[2].mobile.bgCOLOR = getColor(
413
+ {
414
+ light: useOdd ? 'brand-2' : 'white',
415
+ 'light-bw': useOdd ? 'white' : 'brand-2',
416
+ 'light-bold': useOdd ? 'brand-2' : 'white',
417
+ dark: useOdd ? 'black' : 'brand-1',
418
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
419
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
420
+ },
421
+ theme
422
+ );
412
423
  }
413
- baseClasses[2].mobile.bgCOLOR = getColor(
414
- {
415
- light: useOdd ? 'brand-2' : 'white',
416
- 'light-bw': useOdd ? 'white' : 'brand-2',
417
- 'light-bold': useOdd ? 'brand-2' : 'white',
418
- dark: useOdd ? 'black' : 'brand-1',
419
- 'dark-bw': useOdd ? 'black' : 'brand-1',
420
- 'dark-bold': useOdd ? 'brand-1' : 'black',
421
- },
422
- theme
423
- );
424
424
  }
425
425
  }
426
426
 
@@ -508,18 +508,18 @@ export function getSubTitleDesign(
508
508
  if (bordered) {
509
509
  baseClasses[2].mobile.rounded = 'lg';
510
510
  baseClasses[2].mobile.shadow = 'md';
511
+ baseClasses[2].mobile.bgCOLOR = getColor(
512
+ {
513
+ light: useOdd ? 'brand-2' : 'white',
514
+ 'light-bw': useOdd ? 'white' : 'brand-2',
515
+ 'light-bold': useOdd ? 'brand-2' : 'white',
516
+ dark: useOdd ? 'black' : 'brand-1',
517
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
518
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
519
+ },
520
+ theme
521
+ );
511
522
  }
512
- baseClasses[2].mobile.bgCOLOR = getColor(
513
- {
514
- light: useOdd ? 'brand-2' : 'white',
515
- 'light-bw': useOdd ? 'white' : 'brand-2',
516
- 'light-bold': useOdd ? 'brand-2' : 'white',
517
- dark: useOdd ? 'black' : 'brand-1',
518
- 'dark-bw': useOdd ? 'black' : 'brand-1',
519
- 'dark-bold': useOdd ? 'brand-1' : 'black',
520
- },
521
- theme
522
- );
523
523
  break;
524
524
  }
525
525
 
@@ -558,18 +558,18 @@ export function getSubTitleDesign(
558
558
  if (bordered) {
559
559
  baseClasses[2].mobile.rounded = 'lg';
560
560
  baseClasses[2].mobile.shadow = 'md';
561
+ baseClasses[2].mobile.bgCOLOR = getColor(
562
+ {
563
+ light: useOdd ? 'brand-2' : 'white',
564
+ 'light-bw': useOdd ? 'white' : 'brand-2',
565
+ 'light-bold': useOdd ? 'brand-2' : 'white',
566
+ dark: useOdd ? 'black' : 'brand-1',
567
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
568
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
569
+ },
570
+ theme
571
+ );
561
572
  }
562
- baseClasses[2].mobile.bgCOLOR = getColor(
563
- {
564
- light: useOdd ? 'brand-2' : 'white',
565
- 'light-bw': useOdd ? 'white' : 'brand-2',
566
- 'light-bold': useOdd ? 'brand-2' : 'white',
567
- dark: useOdd ? 'black' : 'brand-1',
568
- 'dark-bw': useOdd ? 'black' : 'brand-1',
569
- 'dark-bold': useOdd ? 'brand-1' : 'black',
570
- },
571
- theme
572
- );
573
573
  break;
574
574
  }
575
575
 
@@ -606,18 +606,18 @@ export function getSubTitleDesign(
606
606
  baseClasses[2].mobile.maxW = '3xl';
607
607
  if (bordered) {
608
608
  baseClasses[2].mobile.shadow = 'md';
609
+ baseClasses[2].mobile.bgCOLOR = getColor(
610
+ {
611
+ light: useOdd ? 'brand-2' : 'white',
612
+ 'light-bw': useOdd ? 'white' : 'brand-2',
613
+ 'light-bold': useOdd ? 'brand-2' : 'white',
614
+ dark: useOdd ? 'black' : 'brand-1',
615
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
616
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
617
+ },
618
+ theme
619
+ );
609
620
  }
610
- baseClasses[2].mobile.bgCOLOR = getColor(
611
- {
612
- light: useOdd ? 'brand-2' : 'white',
613
- 'light-bw': useOdd ? 'white' : 'brand-2',
614
- 'light-bold': useOdd ? 'brand-2' : 'white',
615
- dark: useOdd ? 'black' : 'brand-1',
616
- 'dark-bw': useOdd ? 'black' : 'brand-1',
617
- 'dark-bold': useOdd ? 'brand-1' : 'black',
618
- },
619
- theme
620
- );
621
621
  break;
622
622
  }
623
623
 
@@ -654,18 +654,18 @@ export function getSubTitleDesign(
654
654
  if (bordered) {
655
655
  baseClasses[2].mobile.rounded = 'lg';
656
656
  baseClasses[2].mobile.shadow = 'md';
657
+ baseClasses[2].mobile.bgCOLOR = getColor(
658
+ {
659
+ light: useOdd ? 'brand-2' : 'white',
660
+ 'light-bw': useOdd ? 'white' : 'brand-2',
661
+ 'light-bold': useOdd ? 'brand-2' : 'white',
662
+ dark: useOdd ? 'black' : 'brand-1',
663
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
664
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
665
+ },
666
+ theme
667
+ );
657
668
  }
658
- baseClasses[2].mobile.bgCOLOR = getColor(
659
- {
660
- light: useOdd ? 'brand-2' : 'white',
661
- 'light-bw': useOdd ? 'white' : 'brand-2',
662
- 'light-bold': useOdd ? 'brand-2' : 'white',
663
- dark: useOdd ? 'black' : 'brand-1',
664
- 'dark-bw': useOdd ? 'black' : 'brand-1',
665
- 'dark-bold': useOdd ? 'brand-1' : 'black',
666
- },
667
- theme
668
- );
669
669
  break;
670
670
  }
671
671
 
@@ -701,18 +701,18 @@ export function getSubTitleDesign(
701
701
  baseClasses[2].mobile.textWRAP = 'pretty';
702
702
  if (bordered) {
703
703
  baseClasses[2].mobile.shadow = 'md';
704
+ baseClasses[2].mobile.bgCOLOR = getColor(
705
+ {
706
+ light: useOdd ? 'brand-2' : 'white',
707
+ 'light-bw': useOdd ? 'white' : 'brand-2',
708
+ 'light-bold': useOdd ? 'brand-2' : 'white',
709
+ dark: useOdd ? 'black' : 'brand-1',
710
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
711
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
712
+ },
713
+ theme
714
+ );
704
715
  }
705
- baseClasses[2].mobile.bgCOLOR = getColor(
706
- {
707
- light: useOdd ? 'brand-2' : 'white',
708
- 'light-bw': useOdd ? 'white' : 'brand-2',
709
- 'light-bold': useOdd ? 'brand-2' : 'white',
710
- dark: useOdd ? 'black' : 'brand-1',
711
- 'dark-bw': useOdd ? 'black' : 'brand-1',
712
- 'dark-bold': useOdd ? 'brand-1' : 'black',
713
- },
714
- theme
715
- );
716
716
  break;
717
717
  }
718
718
 
@@ -749,18 +749,18 @@ export function getSubTitleDesign(
749
749
  if (bordered) {
750
750
  baseClasses[2].mobile.rounded = 'lg';
751
751
  baseClasses[2].mobile.shadow = 'md';
752
+ baseClasses[2].mobile.bgCOLOR = getColor(
753
+ {
754
+ light: useOdd ? 'brand-2' : 'white',
755
+ 'light-bw': useOdd ? 'white' : 'brand-2',
756
+ 'light-bold': useOdd ? 'brand-2' : 'white',
757
+ dark: useOdd ? 'black' : 'brand-1',
758
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
759
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
760
+ },
761
+ theme
762
+ );
752
763
  }
753
- baseClasses[2].mobile.bgCOLOR = getColor(
754
- {
755
- light: useOdd ? 'brand-2' : 'white',
756
- 'light-bw': useOdd ? 'white' : 'brand-2',
757
- 'light-bold': useOdd ? 'brand-2' : 'white',
758
- dark: useOdd ? 'black' : 'brand-1',
759
- 'dark-bw': useOdd ? 'black' : 'brand-1',
760
- 'dark-bold': useOdd ? 'brand-1' : 'black',
761
- },
762
- theme
763
- );
764
764
  }
765
765
  }
766
766
 
@@ -995,18 +995,18 @@ export const getIntroDesign = (
995
995
  if (bordered) {
996
996
  parentClasses[2].mobile.rounded = 'lg';
997
997
  parentClasses[2].mobile.shadow = 'lg';
998
+ parentClasses[2].mobile.bgCOLOR = getColor(
999
+ {
1000
+ light: useOdd ? 'brand-2' : 'white',
1001
+ 'light-bw': useOdd ? 'white' : 'brand-2',
1002
+ 'light-bold': useOdd ? 'brand-2' : 'white',
1003
+ dark: useOdd ? 'black' : 'brand-1',
1004
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
1005
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
1006
+ },
1007
+ theme
1008
+ );
998
1009
  }
999
- parentClasses[2].mobile.bgCOLOR = getColor(
1000
- {
1001
- light: useOdd ? 'brand-2' : 'white',
1002
- 'light-bw': useOdd ? 'white' : 'brand-2',
1003
- 'light-bold': useOdd ? 'brand-2' : 'white',
1004
- dark: useOdd ? 'black' : 'brand-1',
1005
- 'dark-bw': useOdd ? 'black' : 'brand-1',
1006
- 'dark-bold': useOdd ? 'brand-1' : 'black',
1007
- },
1008
- theme
1009
- );
1010
1010
  break;
1011
1011
  }
1012
1012
 
@@ -1020,18 +1020,18 @@ export const getIntroDesign = (
1020
1020
  parentClasses[2].mobile.maxW = '3xl';
1021
1021
  if (bordered) {
1022
1022
  parentClasses[2].mobile.shadow = 'lg';
1023
+ parentClasses[2].mobile.bgCOLOR = getColor(
1024
+ {
1025
+ light: useOdd ? 'brand-2' : 'white',
1026
+ 'light-bw': useOdd ? 'white' : 'brand-2',
1027
+ 'light-bold': useOdd ? 'brand-2' : 'white',
1028
+ dark: useOdd ? 'black' : 'brand-1',
1029
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
1030
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
1031
+ },
1032
+ theme
1033
+ );
1023
1034
  }
1024
- parentClasses[2].mobile.bgCOLOR = getColor(
1025
- {
1026
- light: useOdd ? 'brand-2' : 'white',
1027
- 'light-bw': useOdd ? 'white' : 'brand-2',
1028
- 'light-bold': useOdd ? 'brand-2' : 'white',
1029
- dark: useOdd ? 'black' : 'brand-1',
1030
- 'dark-bw': useOdd ? 'black' : 'brand-1',
1031
- 'dark-bold': useOdd ? 'brand-1' : 'black',
1032
- },
1033
- theme
1034
- );
1035
1035
  break;
1036
1036
  }
1037
1037
 
@@ -1042,18 +1042,18 @@ export const getIntroDesign = (
1042
1042
  parentClasses[2].mobile.textWRAP = 'pretty';
1043
1043
  if (bordered) {
1044
1044
  parentClasses[2].mobile.shadow = 'lg';
1045
+ parentClasses[2].mobile.bgCOLOR = getColor(
1046
+ {
1047
+ light: useOdd ? 'brand-2' : 'white',
1048
+ 'light-bw': useOdd ? 'white' : 'brand-2',
1049
+ 'light-bold': useOdd ? 'brand-2' : 'white',
1050
+ dark: useOdd ? 'black' : 'brand-1',
1051
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
1052
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
1053
+ },
1054
+ theme
1055
+ );
1045
1056
  }
1046
- parentClasses[2].mobile.bgCOLOR = getColor(
1047
- {
1048
- light: useOdd ? 'brand-2' : 'white',
1049
- 'light-bw': useOdd ? 'white' : 'brand-2',
1050
- 'light-bold': useOdd ? 'brand-2' : 'white',
1051
- dark: useOdd ? 'black' : 'brand-1',
1052
- 'dark-bw': useOdd ? 'black' : 'brand-1',
1053
- 'dark-bold': useOdd ? 'brand-1' : 'black',
1054
- },
1055
- theme
1056
- );
1057
1057
  }
1058
1058
  }
1059
1059
 
@@ -1102,18 +1102,18 @@ export const getImageHeroSectionDefault = (
1102
1102
  parentClasses[2].mobile.textWRAP = 'pretty';
1103
1103
  if (bordered) {
1104
1104
  parentClasses[2].mobile.shadow = 'lg';
1105
+ parentClasses[2].mobile.bgCOLOR = getColor(
1106
+ {
1107
+ light: useOdd ? 'brand-2' : 'white',
1108
+ 'light-bw': useOdd ? 'white' : 'brand-2',
1109
+ 'light-bold': useOdd ? 'brand-2' : 'white',
1110
+ dark: useOdd ? 'black' : 'brand-1',
1111
+ 'dark-bw': useOdd ? 'black' : 'brand-1',
1112
+ 'dark-bold': useOdd ? 'brand-1' : 'black',
1113
+ },
1114
+ theme
1115
+ );
1105
1116
  }
1106
- parentClasses[2].mobile.bgCOLOR = getColor(
1107
- {
1108
- light: useOdd ? 'brand-2' : 'white',
1109
- 'light-bw': useOdd ? 'white' : 'brand-2',
1110
- 'light-bold': useOdd ? 'brand-2' : 'white',
1111
- dark: useOdd ? 'black' : 'brand-1',
1112
- 'dark-bw': useOdd ? 'black' : 'brand-1',
1113
- 'dark-bold': useOdd ? 'brand-1' : 'black',
1114
- },
1115
- theme
1116
- );
1117
1117
 
1118
1118
  return {
1119
1119
  nodeType: 'Pane',