docs: Make masking more granular

* Mask sensitive user input using components and magic comments
* Remove blocking entire compose block

Author: FoxxMD

docsite/docusaurus.config.ts

@@ -181,7 +181,14 @@ const config: Config = {
       prism: {
         theme: themes.themes.github,
         darkTheme: themes.themes.dracula,
-        additionalLanguages: ['json','json5','typescript', 'docker', 'bash', 'ini','yaml']
+        additionalLanguages: ['json','json5','typescript', 'docker', 'bash', 'ini','yaml'],
+        magicComments: [
+          {
+            line: 'mask',
+            className: 'rr-mask',
+            block: {start: 'mask-start', end: 'mask-end'}
+          }
+        ]
       },
       colorMode: {
         defaultMode: 'dark',

docsite/src/components/LocalStorage/Text.tsx

@@ -10,6 +10,7 @@ export interface LocalStorateTextProps {
     initialValue?: string
     placeholder?: string
     stylePreset?: 'inline' | 'bold'
+    sensitive?: boolean
 }
 
 export type FixedStorageProps = Omit<LocalStorateTextProps, 'storageKey'>;
@@ -21,7 +22,8 @@ const InternalLocalStorageText: FC<LocalStorateTextProps> = (props) => {
         stylePreset,
         placeholder,
         storageKey,
-        initialValue = ""
+        initialValue = "",
+        sensitive = false
     } = props
 
         const [storageVal, setStorageVal] = useTypedLocalStorage(storageKey, initialValue);
@@ -40,6 +42,8 @@ const InternalLocalStorageText: FC<LocalStorateTextProps> = (props) => {
             setInputValue(storageVal);
         }, [storageVal, setValue, setInputValue])
 
+        const sensitiveClass = sensitive ? 'rr-mask' : '';
+
         if(readOnly) {
             let roVal: string;
             if(storageVal !== undefined && storageVal !== null && storageVal.trim() !== '') {
@@ -49,17 +53,18 @@ const InternalLocalStorageText: FC<LocalStorateTextProps> = (props) => {
             } else if(placeholder !== undefined) {
                 roVal = placeholder;
             }
+
             switch(stylePreset) {
                 case 'inline':
-                    return <CodeInline>{roVal}</CodeInline>;
+                    return <CodeInline className={sensitiveClass}>{roVal}</CodeInline>;
                 case 'bold':
-                    return <strong>{roVal}</strong>;
+                    return <strong className={sensitiveClass}>{roVal}</strong>;
                 default:
-                    return <Fragment>{roVal}</Fragment>;
+                    return <span className={sensitiveClass}>{roVal}</span>;
             }
         }
 
-        return <input type="text" placeholder={placeholder} onChange={handleInputChange} value={inputValue}/>
+        return <input type="text" className={sensitiveClass} placeholder={placeholder} onChange={handleInputChange} value={inputValue}/>
 }
 
 export const LocalStorageText:  FC<LocalStorateTextProps> = (props) => {

docsite/src/components/LocalStorageComponents.tsx

@@ -8,7 +8,7 @@ export const ServerName: FC<FixedStorageProps> = (props) => {
         ...rest
     } = props
 
-        return <LocalStorageText storageKey="serverName" placeholder={placeholder} {...rest}/>;
+        return <LocalStorageText storageKey="serverName" placeholder={placeholder} sensitive {...rest}/>;
 }
 
 export const HostDirectory: FC<FixedStorageProps> = (props) => {
@@ -28,7 +28,7 @@ export const KomodoUrl: FC<FixedStorageProps> = (props) => {
         ...rest
     } = props
 
-        return <LocalStorageText storageKey="komodoUrl" placeholder={placeholder} {...rest}/>;
+        return <LocalStorageText storageKey="komodoUrl" sensitive placeholder={placeholder} {...rest}/>;
 }
 
 export const KomodoApiKey: FC<FixedStorageProps> = (props) => {
@@ -38,7 +38,7 @@ export const KomodoApiKey: FC<FixedStorageProps> = (props) => {
         ...rest
     } = props
 
-        return <LocalStorageText storageKey="komodoApiKey" placeholder={placeholder} {...rest}/>;
+        return <LocalStorageText storageKey="komodoApiKey" sensitive placeholder={placeholder} {...rest}/>;
 }
 
 export const KomodoApiSecret: FC<FixedStorageProps> = (props) => {
@@ -48,5 +48,5 @@ export const KomodoApiSecret: FC<FixedStorageProps> = (props) => {
         ...rest
     } = props
 
-        return <LocalStorageText storageKey="komodoApiSecret" placeholder={placeholder} {...rest}/>;
+        return <LocalStorageText storageKey="komodoApiSecret" sensitive placeholder={placeholder} {...rest}/>;
 }

docsite/src/components/QuickStart/QSCompose.tsx

@@ -76,17 +76,18 @@ const QSCompose = (props) => {
         seq.add(stacksFromS);
 
         const serverS = new Scalar(`SERVER_NAME=${serverValue !== undefined && serverValue.trim() !== '' ? serverValue : 'my-cool-server'}`);
-        serverS.commentBefore = '# Name of Server for this machine, in Komodo'
+        serverS.commentBefore = '# Name of Server for this machine, in Komodo\nmask'
         seq.add(serverS);
 
         if(storageSyncApiVal) {
             const urlS = new Scalar(`KOMODO_URL=${komodoUrlValue === '' ? 'http://192.168.KOMOMDO.IP:8120' : komodoUrlValue}`);
             urlS.spaceBefore = true;
-            urlS.commentBefore = '# Configuration for interacting with Komodo API';
+            urlS.commentBefore = '# Configuration for interacting with Komodo API\nmask-start';
             seq.add(urlS);
             seq.add(`API_KEY=${apiKeyValue === '' ? 'K-3A6btIPZYeBu_EXAMPLE_KEY' : apiKeyValue}`);
             seq.add(`API_SECRET=${komodoSec === '' ? 'S-qnaXD1frutYlfC2ZYl_EXAMPLE_SECRET' : komodoSec}`);
             const syncS = new Scalar('OUTPUT_API_SYNC=true');
+            syncS.commentBefore = 'mask-end';
             syncS.comment = 'Create Sync Resource in Komodo'
             seq.add(syncS);
         }
@@ -119,7 +120,7 @@ const QSCompose = (props) => {
 
         }, [storageSyncApiVal, storageStacksFromVal, storageHostVal, serverValue, apiKeyValue, komodoSec, komodoUrlValue, setUserDoc]);
 
-        return <CodeBlock className="rr-block .rr-block" title="compose.yaml" language="yaml">{userDoc.toString()}</CodeBlock>;
+        return <CodeBlock title="compose.yaml" language="yaml">{userDoc.toString()}</CodeBlock>;
 
 }
 

package.json

@@ -13,7 +13,7 @@
     "build:parallel": "concurrently --kill-others-on-fail --names backend,frontend,docs \"npm run -s build:backend\" \"npm run -s build:frontend\" \"npm run docs:build\"",
     "docs:install": "cd docsite && npm ci --no-audit",
     "docs:start": "cd docsite && npm start",
-    "docs:build": "npm run schema && cd docsite && npm run build",
+    "docs:build": "cd docsite && npm run build",
     "demo": "HOST_PARENT_PATH=/my/cool/path SERVER_NAME=my-cool-server FILES_ON_SERVER_DIR=tests/exampleDir tsx src/index.ts"
   },
   "engines": {