@brillout/docpress 0.16.49 → 0.16.50

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.
@@ -22,7 +22,9 @@
22
22
 
23
23
  .choice-select__list {
24
24
  position: relative;
25
- font-size: 13.3333px;
25
+ display: flex;
26
+ flex-wrap: nowrap;
27
+ flex-direction: column;
26
28
  background: transparent;
27
29
  height: calc(var(--choice-count) * var(--option-height));
28
30
  top: 0;
@@ -33,7 +35,7 @@
33
35
  user-select: none; /* Standard */
34
36
 
35
37
  border-radius: var(--border-radius);
36
- width: 100%;
38
+ min-width: max-content;
37
39
  transition: var(--transition-select-list);
38
40
  }
39
41
 
@@ -55,32 +57,47 @@
55
57
  }
56
58
 
57
59
  .choice-select__option {
58
- display: flex;
59
- height: var(--option-height);
60
- white-space: nowrap;
61
- align-items: center;
60
+ display: inline-flex;
62
61
  flex-wrap: nowrap;
62
+ flex-shrink: 0;
63
+ height: var(--option-height);
64
+
63
65
  background: #fff;
64
- padding: 0 6px;
66
+ padding: 6px;
65
67
  cursor: pointer;
68
+
66
69
  transition: var(--transition-select-option);
67
70
  }
68
71
 
69
72
  .choice-select__option-content {
70
73
  display: inline-flex;
74
+ flex-wrap: nowrap;
75
+ flex-shrink: 0;
76
+ justify-content: center;
71
77
  align-items: center;
72
- gap: 2px;
78
+ gap: 3px;
79
+ line-height: 1;
73
80
  }
74
81
 
75
- .choice-select__option img {
76
- width: 14px;
77
- height: 14px;
82
+ .choice-select__option-icon {
83
+ display: inline-flex;
84
+ width: 16px;
85
+ justify-content: flex-start;
86
+ }
87
+
88
+ .choice-select__option-content img {
89
+ width: 13px;
90
+ height: 12px;
78
91
 
79
92
  filter: grayscale(100%);
80
93
  opacity: 0.8;
81
94
  transition: var(--transition-select-icon);
82
95
  }
83
96
 
97
+ .choice-select__option-label {
98
+ font-size: 13.3333px;
99
+ }
100
+
84
101
  .choice-select__list:hover .choice-select__option img,
85
102
  .choice-select__list[aria-expanded='true'] .choice-select__option img {
86
103
  filter: grayscale(0%);
@@ -97,7 +97,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
97
97
  data-choice-group={groupName}
98
98
  >
99
99
  <div className="choice-select__border" />
100
- {filteredChoices.map(({ name: choice, icon, iconStyle }) => (
100
+ {filteredChoices.map(({ name: choice, icon, iconStyle, iconStyleDropdown }) => (
101
101
  <label
102
102
  id={`choice-${choice}`}
103
103
  key={choice}
@@ -113,8 +113,10 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
113
113
  readOnly
114
114
  />
115
115
  <span className="choice-select__option-content">
116
- {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
117
- {choice}
116
+ <span className="choice-select__option-icon">
117
+ {icon && <img src={icon} alt="" aria-hidden="true" style={{ ...iconStyle, ...iconStyleDropdown }} />}
118
+ </span>
119
+ <span className="choice-select__option-label">{choice}</span>
118
120
  </span>
119
121
  </label>
120
122
  ))}
@@ -3,38 +3,64 @@
3
3
 
4
4
  /* tablist style logic */
5
5
  .choice-tabs__tab:has(.choice-tabs__radio:checked) {
6
- border-bottom: 2px solid #aaa;
6
+ border-color: #aaa;
7
7
  color: var(--dp-color-text);
8
8
  }
9
9
  }
10
10
 
11
11
  .choice-tabs__tab-list {
12
12
  border-bottom: 1px solid #eaeaea;
13
+ display: flex;
14
+ flex-wrap: wrap;
15
+ flex-direction: row;
13
16
  margin: 0 0 10px;
14
- padding: 0;
17
+ gap: 6px;
15
18
  }
16
19
 
17
20
  .choice-tabs__tab {
18
- display: inline-block;
19
- bottom: -1px;
20
21
  position: relative;
21
- list-style: none;
22
- padding: 6px 12px;
22
+ bottom: -1px;
23
23
  cursor: pointer;
24
+ text-align: center;
25
+ vertical-align: middle;
26
+
27
+ -webkit-user-select: none;
28
+ -moz-user-select: none;
29
+ -ms-user-select: none;
30
+ user-select: none;
31
+
32
+ padding: 8px;
24
33
  font-weight: 500;
34
+ height: 36px;
35
+
36
+ display: inline-flex;
37
+ flex-wrap: nowrap;
38
+ flex-shrink: 0;
39
+ justify-content: center;
40
+ align-items: center;
41
+
42
+ border-bottom: 2px solid transparent;
25
43
  /* lighten --dp-color-text by 20% */
26
44
  color: color-mix(in srgb, var(--dp-color-text) 80%, white 20%);
27
45
  }
28
46
 
29
47
  .choice-tabs__tab-content {
30
48
  display: inline-flex;
49
+ flex-wrap: nowrap;
50
+ flex-shrink: 0;
51
+ justify-content: center;
31
52
  align-items: center;
32
53
  gap: 6px;
54
+ line-height: 1;
55
+ padding-inline: 2px;
33
56
  }
34
57
 
35
- .choice-tabs__tab img {
36
- width: 14px;
37
- height: 14px;
58
+ .choice-tabs__tab-label {
59
+ font-size: 16px;
60
+ }
61
+
62
+ .choice-tabs__tab-content img {
63
+ height: 13px;
38
64
  }
39
65
 
40
66
  @media screen and (max-width: 400px) {
@@ -55,4 +81,4 @@
55
81
 
56
82
  .choice-tabs__tab:focus {
57
83
  outline: none;
58
- }
84
+ }
@@ -29,7 +29,7 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
29
29
  role="radiogroup"
30
30
  data-choice-group={groupName}
31
31
  >
32
- {choices.map(({ name: choice, icon, iconStyle }) => (
32
+ {choices.map(({ name: choice, icon, iconStyle, iconStyleTab }) => (
33
33
  <label key={choice} className="choice-tabs__tab" style={{ display: isHidden(choice) ? 'none' : undefined }}>
34
34
  <input
35
35
  className="choice-tabs__radio sr-only"
@@ -43,8 +43,8 @@ function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
43
43
  }}
44
44
  />
45
45
  <span className="choice-tabs__tab-content">
46
- {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
47
- {choice}
46
+ {icon && <img src={icon} alt="" aria-hidden="true" style={{ ...iconStyle, ...iconStyleTab }} />}
47
+ <span className="choice-tabs__tab-label">{choice}</span>
48
48
  </span>
49
49
  </label>
50
50
  ))}
@@ -0,0 +1,17 @@
1
+ export { JAVASCRIPT_ICON, TYPESCRIPT_ICON, NPM_ICON, PNPM_ICON, BUN_ICON, YARN_ICON }
2
+
3
+ // Code Lang
4
+ const JAVASCRIPT_ICON =
5
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E"
6
+ const TYPESCRIPT_ICON =
7
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E"
8
+
9
+ // Package Managers
10
+ const NPM_ICON =
11
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23cb3837' d='m0 7.0624c0-3.8376 3.2248-7.0624 7.0624-7.0624h113.88c3.8376 0 7.0624 3.2248 7.0624 7.0624v113.88c0 3.8376-3.2248 7.0624-7.0624 7.0624h-113.88c-3.8376 0-7.0624-3.2248-7.0624-7.0624zm23.69 97.518h40.395l0.04975-58.532h19.494l-0.04975 58.581h19.543l0.0508-78.075-78.076-0.0995-0.0995 78.125z'/%3E%3Cpath fill='%23fff' d='m25.105 65.52v-39.008h15.855c8.7201 0 26.274 0.03373 39.008 0.07496l23.153 0.07496v77.866h-19.476v-58.54h-19.588v58.54h-38.952z'/%3E%3C/svg%3E"
12
+ const PNPM_ICON =
13
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23f8ab00' d='M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z'/%3E%3Cpath fill='%234c4c4c' d='M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z'/%3E%3C/svg%3E"
14
+ const BUN_ICON =
15
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 128 108' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z'/%3E%3Cpath fill='%23fbf0df' d='M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z'/%3E%3Cpath fill='%23f6dece' d='M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z'/%3E%3Cpath fill='%23fffefc' d='M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z'/%3E%3Cpath fill='%23ccbea7' d='M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z'/%3E%3Cpath d='M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z'/%3E%3Cpath fill='%23b71422' d='M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z'/%3E%3Cpath fill='%23ff6164' d='M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z'/%3E%3Cpath d='M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z'/%3E%3Cpath d='M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z'/%3E%3Cpath fill='%23febbd0' d='M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z'/%3E%3Cpath d='M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z'/%3E%3Cpath fill='%23fff' d='M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z'/%3E%3C/svg%3E"
16
+ const YARN_ICON =
17
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%232c8ebb' d='M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0Zm4.685 21.948a5.037 5.037 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.841 4.841 0 0 1 2.942-.103 3.933 3.933 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.89 34.89 0 0 1-6.028 13.74 26.56 26.56 0 0 1 5.957 9.733 26.24 26.24 0 0 1 1.456 10.746 29.626 29.626 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885 6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.161 69.161 0 0 1-16.062 7.412 8.991 8.991 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621-3.51 1.755-8.052 1.03-11.355-.714a5.729 5.729 0 0 1-3.097-4.024 6.194 6.194 0 0 1 0-2.127 6.875 6.875 0 0 1-.816-1.032 16.908 16.908 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.481 29.481 0 0 1 35.726 64a27.685 27.685 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789 1.208-3.21 2.199-4.996 4.377-5.76a7.06 7.06 0 0 0 2.59-1.383 18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508 1.652-3.51 3.406-5.48 5.46-6.193a5.037 5.037 0 0 1 2.332-.286zm-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.452 14.452 0 0 0-12.089 4.645 9.951 9.951 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.58 25.58 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.285 13.285 0 0 0 1.826 8.083 2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196 1.652-1.651 1.982-5.335 2.591-6.842.144-.351.64.588 1.115 1.032a10.323 10.323 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125 1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505 65.032 65.032 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998 3.262-.774 3.045-5.83-1.28-5.758-4.48.052-8.402 2.363-11.716 4.427-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287-2.91-8.082-7.534-10.033-7.163-10.653 1.58-2.673 5.534-6.917 7.113-14.824.94-4.79.691-12.676-1.435-16.805-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.442 1.442 0 0 0-.839-.244z'/%3E%3C/svg%3E"
@@ -9,6 +9,7 @@ import { getVikeConfig } from 'vike/plugin'
9
9
  import { assertUsage } from '../../utils/assert.js'
10
10
  import { valueToEstree } from 'estree-util-value-to-estree'
11
11
  import { resolveChoices } from './resolveChoices.js'
12
+ import { JAVASCRIPT_ICON, TYPESCRIPT_ICON, NPM_ICON, PNPM_ICON, BUN_ICON, YARN_ICON } from './constant.js'
12
13
 
13
14
  type ChoiceNode = {
14
15
  choiceValue: string
@@ -22,31 +23,28 @@ const CHOICES_BUILT_IN: NonNullable<Config['choices']> = {
22
23
  choices: [
23
24
  {
24
25
  name: 'JavaScript',
25
- icon: 'https://www.svgrepo.com/show/452045/js.svg',
26
- iconStyle: { position: 'relative', top: -0.5 },
26
+ icon: JAVASCRIPT_ICON,
27
+ iconStyle: { marginBottom: '0.5px', height: '11.5px' },
27
28
  },
28
29
  {
29
30
  name: 'TypeScript',
30
- icon: 'https://www.svgrepo.com/show/349540/typescript.svg',
31
- iconStyle: { position: 'relative', top: -0.5 },
31
+ icon: TYPESCRIPT_ICON,
32
+ iconStyle: { marginBottom: '0.5px', height: '11.5px' },
32
33
  },
33
34
  ],
34
35
  default: 'JavaScript',
35
36
  },
36
37
  pkgManager: {
37
38
  choices: [
39
+ { name: 'npm', icon: NPM_ICON },
40
+ { name: 'pnpm', icon: PNPM_ICON },
38
41
  {
39
- name: 'npm',
40
- icon: 'https://www.svgrepo.com/show/452077/npm.svg',
41
- iconStyle: { position: 'relative', top: 1.5 },
42
- },
43
- { name: 'pnpm', icon: 'https://www.svgrepo.com/show/373778/light-pnpm.svg' },
44
- { name: 'Bun', icon: 'https://bun.com/logo.svg' },
45
- {
46
- name: 'Yarn',
47
- icon: 'https://www.svgrepo.com/show/354588/yarn.svg',
48
- iconStyle: { position: 'relative', top: -0.5 },
42
+ name: 'Bun',
43
+ icon: BUN_ICON,
44
+ iconStyle: { marginBottom: '1px' },
45
+ iconStyleDropdown: { height: '11px' },
49
46
  },
47
+ { name: 'Yarn', icon: YARN_ICON, iconStyle: { height: '12px' } },
50
48
  ],
51
49
  default: 'npm',
52
50
  },
@@ -19,12 +19,12 @@ function Tabs({ choice, hide = [] }) {
19
19
  const setPrevPosition = useRestoreScroll([selectedChoice]);
20
20
  const isHidden = (choice) => hide.includes(choice);
21
21
  return (React.createElement("div", { className: "choice-tabs" },
22
- React.createElement("div", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "radiogroup", "data-choice-group": groupName }, choices.map(({ name: choice, icon, iconStyle }) => (React.createElement("label", { key: choice, className: "choice-tabs__tab", style: { display: isHidden(choice) ? 'none' : undefined } },
22
+ React.createElement("div", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "radiogroup", "data-choice-group": groupName }, choices.map(({ name: choice, icon, iconStyle, iconStyleTab }) => (React.createElement("label", { key: choice, className: "choice-tabs__tab", style: { display: isHidden(choice) ? 'none' : undefined } },
23
23
  React.createElement("input", { className: "choice-tabs__radio sr-only", type: "radio", name: `radio-${radioId}`, value: choice, checked: selectedChoice === choice, onChange: (e) => {
24
24
  setPrevPosition(e.currentTarget);
25
25
  setSelectedChoice(choice);
26
26
  } }),
27
27
  React.createElement("span", { className: "choice-tabs__tab-content" },
28
- icon && React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
29
- choice)))))));
28
+ icon && React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: { ...iconStyle, ...iconStyleTab } }),
29
+ React.createElement("span", { className: "choice-tabs__tab-label" }, choice))))))));
30
30
  }
@@ -0,0 +1,7 @@
1
+ export { JAVASCRIPT_ICON, TYPESCRIPT_ICON, NPM_ICON, PNPM_ICON, BUN_ICON, YARN_ICON };
2
+ declare const JAVASCRIPT_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E";
3
+ declare const TYPESCRIPT_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E";
4
+ declare const NPM_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23cb3837' d='m0 7.0624c0-3.8376 3.2248-7.0624 7.0624-7.0624h113.88c3.8376 0 7.0624 3.2248 7.0624 7.0624v113.88c0 3.8376-3.2248 7.0624-7.0624 7.0624h-113.88c-3.8376 0-7.0624-3.2248-7.0624-7.0624zm23.69 97.518h40.395l0.04975-58.532h19.494l-0.04975 58.581h19.543l0.0508-78.075-78.076-0.0995-0.0995 78.125z'/%3E%3Cpath fill='%23fff' d='m25.105 65.52v-39.008h15.855c8.7201 0 26.274 0.03373 39.008 0.07496l23.153 0.07496v77.866h-19.476v-58.54h-19.588v58.54h-38.952z'/%3E%3C/svg%3E";
5
+ declare const PNPM_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23f8ab00' d='M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z'/%3E%3Cpath fill='%234c4c4c' d='M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z'/%3E%3C/svg%3E";
6
+ declare const BUN_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 128 108' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z'/%3E%3Cpath fill='%23fbf0df' d='M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z'/%3E%3Cpath fill='%23f6dece' d='M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z'/%3E%3Cpath fill='%23fffefc' d='M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z'/%3E%3Cpath fill='%23ccbea7' d='M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z'/%3E%3Cpath d='M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z'/%3E%3Cpath fill='%23b71422' d='M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z'/%3E%3Cpath fill='%23ff6164' d='M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z'/%3E%3Cpath d='M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z'/%3E%3Cpath d='M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z'/%3E%3Cpath fill='%23febbd0' d='M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z'/%3E%3Cpath d='M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z'/%3E%3Cpath fill='%23fff' d='M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z'/%3E%3C/svg%3E";
7
+ declare const YARN_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%232c8ebb' d='M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0Zm4.685 21.948a5.037 5.037 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.841 4.841 0 0 1 2.942-.103 3.933 3.933 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.89 34.89 0 0 1-6.028 13.74 26.56 26.56 0 0 1 5.957 9.733 26.24 26.24 0 0 1 1.456 10.746 29.626 29.626 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885 6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.161 69.161 0 0 1-16.062 7.412 8.991 8.991 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621-3.51 1.755-8.052 1.03-11.355-.714a5.729 5.729 0 0 1-3.097-4.024 6.194 6.194 0 0 1 0-2.127 6.875 6.875 0 0 1-.816-1.032 16.908 16.908 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.481 29.481 0 0 1 35.726 64a27.685 27.685 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789 1.208-3.21 2.199-4.996 4.377-5.76a7.06 7.06 0 0 0 2.59-1.383 18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508 1.652-3.51 3.406-5.48 5.46-6.193a5.037 5.037 0 0 1 2.332-.286zm-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.452 14.452 0 0 0-12.089 4.645 9.951 9.951 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.58 25.58 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.285 13.285 0 0 0 1.826 8.083 2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196 1.652-1.651 1.982-5.335 2.591-6.842.144-.351.64.588 1.115 1.032a10.323 10.323 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125 1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505 65.032 65.032 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998 3.262-.774 3.045-5.83-1.28-5.758-4.48.052-8.402 2.363-11.716 4.427-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287-2.91-8.082-7.534-10.033-7.163-10.653 1.58-2.673 5.534-6.917 7.113-14.824.94-4.79.691-12.676-1.435-16.805-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.442 1.442 0 0 0-.839-.244z'/%3E%3C/svg%3E";
@@ -0,0 +1,9 @@
1
+ export { JAVASCRIPT_ICON, TYPESCRIPT_ICON, NPM_ICON, PNPM_ICON, BUN_ICON, YARN_ICON };
2
+ // Code Lang
3
+ const JAVASCRIPT_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23F0DB4F' d='M1.408 1.408h125.184v125.185H1.408z'/%3E%3Cpath fill='%23323330' d='M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z'/%3E%3C/svg%3E";
4
+ const TYPESCRIPT_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23fff' d='M22.67 47h99.67v73.67H22.67z'/%3E%3Cpath data-name='original' fill='%23007acc' d='M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z'/%3E%3C/svg%3E";
5
+ // Package Managers
6
+ const NPM_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23cb3837' d='m0 7.0624c0-3.8376 3.2248-7.0624 7.0624-7.0624h113.88c3.8376 0 7.0624 3.2248 7.0624 7.0624v113.88c0 3.8376-3.2248 7.0624-7.0624 7.0624h-113.88c-3.8376 0-7.0624-3.2248-7.0624-7.0624zm23.69 97.518h40.395l0.04975-58.532h19.494l-0.04975 58.581h19.543l0.0508-78.075-78.076-0.0995-0.0995 78.125z'/%3E%3Cpath fill='%23fff' d='m25.105 65.52v-39.008h15.855c8.7201 0 26.274 0.03373 39.008 0.07496l23.153 0.07496v77.866h-19.476v-58.54h-19.588v58.54h-38.952z'/%3E%3C/svg%3E";
7
+ const PNPM_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%23f8ab00' d='M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z'/%3E%3Cpath fill='%234c4c4c' d='M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z'/%3E%3C/svg%3E";
8
+ const BUN_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 128 108' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z'/%3E%3Cpath fill='%23fbf0df' d='M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z'/%3E%3Cpath fill='%23f6dece' d='M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z'/%3E%3Cpath fill='%23fffefc' d='M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z'/%3E%3Cpath fill='%23ccbea7' d='M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z'/%3E%3Cpath d='M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z'/%3E%3Cpath fill='%23b71422' d='M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z'/%3E%3Cpath fill='%23ff6164' d='M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z'/%3E%3Cpath d='M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z'/%3E%3Cpath d='M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z'/%3E%3Cpath fill='%23febbd0' d='M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z'/%3E%3Cpath d='M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z'/%3E%3Cpath fill='%23fff' d='M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z'/%3E%3C/svg%3E";
9
+ const YARN_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 130 130' preserveAspectRatio='xMidYMid meet'%3E%3Cpath fill='%232c8ebb' d='M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0Zm4.685 21.948a5.037 5.037 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.841 4.841 0 0 1 2.942-.103 3.933 3.933 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.89 34.89 0 0 1-6.028 13.74 26.56 26.56 0 0 1 5.957 9.733 26.24 26.24 0 0 1 1.456 10.746 29.626 29.626 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885 6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.161 69.161 0 0 1-16.062 7.412 8.991 8.991 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621-3.51 1.755-8.052 1.03-11.355-.714a5.729 5.729 0 0 1-3.097-4.024 6.194 6.194 0 0 1 0-2.127 6.875 6.875 0 0 1-.816-1.032 16.908 16.908 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.481 29.481 0 0 1 35.726 64a27.685 27.685 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789 1.208-3.21 2.199-4.996 4.377-5.76a7.06 7.06 0 0 0 2.59-1.383 18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508 1.652-3.51 3.406-5.48 5.46-6.193a5.037 5.037 0 0 1 2.332-.286zm-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.452 14.452 0 0 0-12.089 4.645 9.951 9.951 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.58 25.58 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.285 13.285 0 0 0 1.826 8.083 2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196 1.652-1.651 1.982-5.335 2.591-6.842.144-.351.64.588 1.115 1.032a10.323 10.323 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125 1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505 65.032 65.032 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998 3.262-.774 3.045-5.83-1.28-5.758-4.48.052-8.402 2.363-11.716 4.427-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287-2.91-8.082-7.534-10.033-7.163-10.653 1.58-2.673 5.534-6.917 7.113-14.824.94-4.79.691-12.676-1.435-16.805-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.442 1.442 0 0 0-.839-.244z'/%3E%3C/svg%3E";
@@ -3,6 +3,7 @@ import { getVikeConfig } from 'vike/plugin';
3
3
  import { assertUsage } from '../../utils/assert.js';
4
4
  import { valueToEstree } from 'estree-util-value-to-estree';
5
5
  import { resolveChoices } from './resolveChoices.js';
6
+ import { JAVASCRIPT_ICON, TYPESCRIPT_ICON, NPM_ICON, PNPM_ICON, BUN_ICON, YARN_ICON } from './constant.js';
6
7
  // TODO: determine icon representation for CHOICES_BUILT_IN given lack of SVG/file import support
7
8
  // use SVG URLs for now
8
9
  const CHOICES_BUILT_IN = {
@@ -10,31 +11,28 @@ const CHOICES_BUILT_IN = {
10
11
  choices: [
11
12
  {
12
13
  name: 'JavaScript',
13
- icon: 'https://www.svgrepo.com/show/452045/js.svg',
14
- iconStyle: { position: 'relative', top: -0.5 },
14
+ icon: JAVASCRIPT_ICON,
15
+ iconStyle: { marginBottom: '0.5px', height: '11.5px' },
15
16
  },
16
17
  {
17
18
  name: 'TypeScript',
18
- icon: 'https://www.svgrepo.com/show/349540/typescript.svg',
19
- iconStyle: { position: 'relative', top: -0.5 },
19
+ icon: TYPESCRIPT_ICON,
20
+ iconStyle: { marginBottom: '0.5px', height: '11.5px' },
20
21
  },
21
22
  ],
22
23
  default: 'JavaScript',
23
24
  },
24
25
  pkgManager: {
25
26
  choices: [
27
+ { name: 'npm', icon: NPM_ICON },
28
+ { name: 'pnpm', icon: PNPM_ICON },
26
29
  {
27
- name: 'npm',
28
- icon: 'https://www.svgrepo.com/show/452077/npm.svg',
29
- iconStyle: { position: 'relative', top: 1.5 },
30
- },
31
- { name: 'pnpm', icon: 'https://www.svgrepo.com/show/373778/light-pnpm.svg' },
32
- { name: 'Bun', icon: 'https://bun.com/logo.svg' },
33
- {
34
- name: 'Yarn',
35
- icon: 'https://www.svgrepo.com/show/354588/yarn.svg',
36
- iconStyle: { position: 'relative', top: -0.5 },
30
+ name: 'Bun',
31
+ icon: BUN_ICON,
32
+ iconStyle: { marginBottom: '1px' },
33
+ iconStyleDropdown: { height: '11px' },
37
34
  },
35
+ { name: 'Yarn', icon: YARN_ICON, iconStyle: { height: '12px' } },
38
36
  ],
39
37
  default: 'npm',
40
38
  },
@@ -63,6 +63,8 @@ type ChoiceItem = {
63
63
  name: string;
64
64
  icon?: string;
65
65
  iconStyle?: React.CSSProperties;
66
+ iconStyleDropdown?: React.CSSProperties;
67
+ iconStyleTab?: React.CSSProperties;
66
68
  };
67
69
  type Choice = {
68
70
  choices: (string | ChoiceItem)[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brillout/docpress",
3
- "version": "0.16.49",
3
+ "version": "0.16.50",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "@brillout/picocolors": "^1.0.10",
@@ -66,10 +66,7 @@
66
66
  "vike": "^0.4.255",
67
67
  "vite": "^8.0.8"
68
68
  },
69
- "repository": {
70
- "type": "git",
71
- "url": "https://github.com/brillout/docpress"
72
- },
69
+ "repository": "https://github.com/brillout/docpress",
73
70
  "license": "MIT",
74
71
  "publishConfig": {
75
72
  "access": "public"
package/types/Config.ts CHANGED
@@ -75,7 +75,13 @@ type Category =
75
75
  }
76
76
 
77
77
  /** A choice. A plain `string` is shorthand for `{ name: string }` (no icon). */
78
- type ChoiceItem = { name: string; icon?: string; iconStyle?: React.CSSProperties }
78
+ type ChoiceItem = {
79
+ name: string
80
+ icon?: string
81
+ iconStyle?: React.CSSProperties
82
+ iconStyleDropdown?: React.CSSProperties
83
+ iconStyleTab?: React.CSSProperties
84
+ }
79
85
  type Choice = {
80
86
  choices: (string | ChoiceItem)[]
81
87
  default: string