22import { render } from " ../utils/markdown" ;
33import type { Data } from " ../utils/config" ;
44
5+ type Language = " yaml" | " json" | " properties" ;
6+
57interface Props {
68 data: Data ;
7- separator ? : string ;
9+ lang ? : Language ; // defaults to "yaml"
810
11+ child? : boolean ;
912 path? : string [];
1013}
1114
12- let { data, separator , path } = Astro .props ;
15+ let { data, lang, child , path } = Astro .props ;
1316path = path ?? [];
1417
15- const root = path .length === 0 ;
18+ const json = lang === " json" ;
19+ const separator = lang === " properties" ? " =" : " : " ;
1620
1721interface Default {
1822 value: string ;
1923 inline: boolean ;
2024}
2125const formatDefault = (value ? : string ): Default => {
2226 if (! value ) value = " " ;
23- if (value .length > 2 && value .match (/ ^ \[ . + ]$ / )) {
27+ if (! json && value .length > 2 && value .match (/ ^ \[ . + ]$ / )) {
2428 return {
2529 value: value
2630 .substring (1 , value .length - 1 )
@@ -35,40 +39,45 @@ const formatDefault = (value?: string): Default => {
3539};
3640---
3741
38- <div class:list ={ [" not-content" , " node" , root && " node-root" ]} >
42+ <div class:list ={ [" not-content" , " node" , json && " node-json" , child || " node-root" ]} >
43+ { json && <p class = " muted" >{ " {" } </p >}
3944 {
40- Object .entries (data ).map (([key , value ]) => {
41- const displayKey = key .replace (/ _+ $ / , " " ); // remove trailing underscores, used for duplicating keys
45+ Object .entries (data ).map (([key , rawValue ], i , entries ) => {
46+ let displayKey = key .replace (/ _+ $ / , " " ); // remove trailing underscores, used for duplicating keys
47+ if (json ) displayKey = ` "${displayKey }" ` ;
48+
4249 const childPath = [... path , key .replace (/ -/ g , " _" )];
50+ const hasComma = json && i !== (entries .length - 1 );
4351
44- const def = formatDefault (value .default );
52+ const { value, inline } = formatDefault (rawValue .default );
4553 return (
4654 <div >
47- { " message" in value ? (
55+ { " message" in rawValue ? (
4856 <div
49- class = " block message"
50- style = { value .color ? ` border-color: ${value .color } ` : undefined }
51- set :html = { render (value .message )}
57+ class : list = { [ " block" , " message" , rawValue . inline && " message-inline " ] }
58+ style = { rawValue .color ? ` border-color: ${rawValue .color } ` : undefined }
59+ set :html = { render (rawValue .message )}
5260 />
53- ) : " description" in value ? (
61+ ) : " description" in rawValue ? (
5462 <details id = { childPath .join (" _" )} >
5563 <summary class = " line notranslate" translate = " no" >
56- <span class = " key" >{ displayKey } { separator ?? " : " } </span >{
57- def . inline
58- ? (<span class = " value" >{ def . value } </span ><a class = " link" href = { ` #${childPath .join (" _" )} ` } >#</a >)
59- : (<a class = " link" href = { ` #${childPath .join (" _" )} ` } >#</a ><p class = " value" >{ def . value } </p >)
64+ <span class = " key" >{ displayKey } { separator } </span >{
65+ inline
66+ ? (<span class = " value" >{ value } </span ><> { hasComma && < span class = " muted " >,</ span > } </ ><a class = " link" href = { ` #${childPath .join (" _" )} ` } >#</a >)
67+ : (<a class = " link" href = { ` #${childPath .join (" _" )} ` } >#</a ><p class = " value" >{ value } </p ><> { hasComma && < span class = " muted " >,</ span > } </ >)
6068 }
6169 </summary >
62- <div class = " block" set :html = { render (value .description )} />
70+ <div class = " block" set :html = { render (rawValue .description )} />
6371 </details >
6472 ) : (
65- <span class = " key notranslate" translate = " no" >{ displayKey } : </span >
66- <Astro.self data = { value } path = { childPath } { separator } />
73+ <span class = " key notranslate" translate = " no" >{ displayKey } { separator } </span >
74+ <Astro.self child data = { rawValue } path = { childPath } { lang } />
6775 )}
6876 </div >
6977 );
7078 })
7179 }
80+ { json && <p class = " muted" >{ " }" } </p >}
7281</div >
7382
7483<style >
@@ -78,6 +87,14 @@ const formatDefault = (value?: string): Default => {
7887 font-family: var(--__sl-font-mono);
7988 }
8089
90+ .node-json {
91+ padding-left: 0;
92+ }
93+
94+ .node-json > div {
95+ padding-left: 1.25rem;
96+ }
97+
8198 .node-root {
8299 padding: 1rem;
83100 background-color: var(--sl-color-gray-6);
@@ -90,14 +107,13 @@ const formatDefault = (value?: string): Default => {
90107 }
91108
92109 .key {
93- white-space: pre;
110+ white-space: pre-wrap ;
94111 color: var(--sl-color-text-accent);
95112 }
96113
97114 .value {
98115 white-space: pre-wrap;
99116 color: var(--sl-color-text);
100- padding-right: 0.5rem;
101117 }
102118
103119 .block {
@@ -109,14 +125,28 @@ const formatDefault = (value?: string): Default => {
109125 color: var(--sl-color-white);
110126 background-color: var(--sl-color-gray-5);
111127 border-left: 5px solid var(--sl-color-bg-accent);
128+ white-space: pre-wrap;
112129 }
113130
114131 .message {
115132 margin-left: 0;
116133 }
117134
135+ .message-inline {
136+ margin: 0;
137+ padding: 0;
138+ color: var(--sl-color-gray-3);
139+ background-color: unset;
140+ border-left: none;
141+ }
142+
143+ .muted {
144+ color: var(--sl-color-gray-3);
145+ }
146+
118147 .link {
119148 opacity: 0;
149+ padding-left: 0.5rem;
120150 transition: opacity 0.2s ease;
121151 }
122152
0 commit comments