From 97b970b553fc7c211fe58e25a38bd9b4d589dd19 Mon Sep 17 00:00:00 2001 From: granny Date: Tue, 29 Aug 2023 08:44:28 +0000 Subject: [PATCH 01/11] add button that expands/collapses all descriptions --- src/components/Config.tsx | 55 ++++++++++++++++++++++++--------------- src/css/custom.css | 10 +++++++ 2 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/Config.tsx b/src/components/Config.tsx index 8fca4f25f..87d9b0220 100644 --- a/src/components/Config.tsx +++ b/src/components/Config.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import ReactMarkdown from 'react-markdown'; import style from '@site/src/css/markdown-styles.module.css'; import yaml from 'js-yaml'; @@ -80,8 +80,9 @@ const parseItalics = (key) => { return key; } -const YamlNodeWithDescription = ({ name, node, parentKey, root, separator }) => { - const [showDescription, setShowDescription] = useState(false); +const YamlNodeWithDescription = ({ name, node, parentKey, root, separator, showAllDescriptions }) => { + const ignoreInitialRenderRef = useRef(false); + const [showDescription, setShowDescription] = useState(showAllDescriptions); node.default = node.default || 'N/A'; node.description = node.description || 'N/A'; @@ -93,9 +94,17 @@ const YamlNodeWithDescription = ({ name, node, parentKey, root, separator }) => } }, [name]); + useEffect(() => { + if (ignoreInitialRenderRef.current) { + setShowDescription(!showDescription); + } else { + ignoreInitialRenderRef.current = true; + } + }, [showAllDescriptions]); + const handleHashLinkClick = (event) => { event.preventDefault(); - history.pushState(null, null, event.currentTarget.hash); + history.pushState(null, "", event.currentTarget.hash); const fullURL = window.location.href.split('#')[0]; const hash = createUrlHash(parentKey, name); @@ -137,14 +146,14 @@ const YamlNodeWithDescription = ({ name, node, parentKey, root, separator }) => ); }; -const YamlTreeNode = ({ root, key, parentKey, value, separator }) => { +const YamlTreeNode = ({ root, name, parentKey, value, separator, showAllDescriptions }) => { const handleClick = (event) => { event.preventDefault(); - scrollIntoView(createUrlHash(parentKey, key)); - history.pushState(null, null, `#${createUrlHash(parentKey, key)}`); + scrollIntoView(createUrlHash(parentKey, name)); + history.pushState(null, "", `#${createUrlHash(parentKey, name)}`); const fullURL = window.location.href.split('#')[0]; - const hash = createUrlHash(parentKey, key); + const hash = createUrlHash(parentKey, name); navigator.clipboard.writeText(fullURL + '#' + hash); scrollIntoView(hash); @@ -159,32 +168,32 @@ const YamlTreeNode = ({ root, key, parentKey, value, separator }) => { } useEffect(() => { - const hash = createUrlHash(parentKey, key); + const hash = createUrlHash(parentKey, name); if (window.location.hash === `#${hash}`) { scrollIntoView(hash); } - }, [key]); + }, [name]); return ( -
+
- {parseItalics(key)}{removeTrailingSpaces(separator)} + {parseItalics(name)}{removeTrailingSpaces(separator)}
- - {renderYamlData(value, parentKey ? createUrlHash(parentKey, key) : parseUrlHash(key), false, separator)} + + {renderYamlData(value, parentKey ? createUrlHash(parentKey, name) : parseUrlHash(name), false, separator, showAllDescriptions)}
); }; -const renderYamlData = (data, parentKey, root = false, separator) => { - const renderedNodes = []; +const renderYamlData = (data, parentKey, root = false, separator, showAllDescriptions) => { + const renderedNodes: JSX.Element[] = []; for (const [key, value] of Object.entries(data)) { - if (typeof value === 'object') { + if (typeof value === 'object' && value !== null) { if ('default' in value || 'description' in value) { - renderedNodes.push(); + renderedNodes.push(); } else { - renderedNodes.push(YamlTreeNode({ root, key, parentKey, value, separator })); + renderedNodes.push(); } } } @@ -192,11 +201,15 @@ const renderYamlData = (data, parentKey, root = false, separator) => { return renderedNodes; }; -export default function Config({ data, separator = ': ' }) { +export default function Config({ data, separator = ': ', showDescriptions = false}) { + const [showAllDescriptions, setShowAllExpanded] = useState(showDescriptions); let ymlData = yaml.load(data); return (
- 
{renderYamlData(ymlData, '', true, separator)}
+ 
+                
+                {renderYamlData(ymlData, '', true, separator, showAllDescriptions)}
+
{data}
); diff --git a/src/css/custom.css b/src/css/custom.css index e477890c2..fb35d835a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -181,6 +181,16 @@ html[data-theme="dark"] { width: fit-content; } +.codeblock { + position: relative; +} + +.config-button { + position: absolute; + top: 10px; + right: 10px; +} + .config-anchor { text-decoration: none; } From 3836ea378bbe218b95ed92d2bfd94df3ef42348d Mon Sep 17 00:00:00 2001 From: granny Date: Tue, 29 Aug 2023 09:22:29 +0000 Subject: [PATCH 02/11] adjust button for light mode and fix button width --- src/css/custom.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index fb35d835a..2785dafd2 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,6 +1,8 @@ :root { --ifm-color-primary: #0240dc; --ifm-color-primary-dark: #033ed5; + --ifm-color-secondary: #868686; + --ifm-color-secondary-dark: #5f5f5f; --ifm-color-warning-contrast-background: #ffe39c; --ifm-code-font-size: 95%; @@ -16,6 +18,8 @@ html[data-theme="dark"] { --ifm-color-primary: #409efe; --ifm-color-primary-dark: #0175ec; + --ifm-color-secondary: #ebedf0; + --ifm-color-secondary-dark: #ededed; --ifm-menu-color: #dadada !important; --ifm-toc-link-color: #dadada !important; @@ -27,6 +31,14 @@ html[data-theme="dark"] { --config-node-highlight-text-color: white; } +.button.button--secondary { + color: #f6f7f8; +} + +[data-theme="dark"] .button.button--secondary { + color: #1c1e21; +} + .header-icon-link::before { content: ""; width: 24px; @@ -187,6 +199,7 @@ html[data-theme="dark"] { .config-button { position: absolute; + width: 130px; top: 10px; right: 10px; } From c27a03626ca20669f71ef459dfe1fa08bada0662 Mon Sep 17 00:00:00 2001 From: granny Date: Tue, 29 Aug 2023 10:01:32 +0000 Subject: [PATCH 03/11] make the color change on hover more obvious --- src/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.css b/src/css/custom.css index 2785dafd2..a4b1b8f55 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -19,7 +19,7 @@ html[data-theme="dark"] { --ifm-color-primary: #409efe; --ifm-color-primary-dark: #0175ec; --ifm-color-secondary: #ebedf0; - --ifm-color-secondary-dark: #ededed; + --ifm-color-secondary-dark: #b9b4b4; --ifm-menu-color: #dadada !important; --ifm-toc-link-color: #dadada !important; From eabee785544912d29f0cbc3fd4e44a7c508ee1e9 Mon Sep 17 00:00:00 2001 From: granny Date: Tue, 29 Aug 2023 11:50:07 +0000 Subject: [PATCH 04/11] rename class used for positioning config-button --- src/components/Config.tsx | 2 +- src/css/custom.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Config.tsx b/src/components/Config.tsx index 87d9b0220..604d202b3 100644 --- a/src/components/Config.tsx +++ b/src/components/Config.tsx @@ -206,7 +206,7 @@ export default function Config({ data, separator = ': ', showDescriptions = fals let ymlData = yaml.load(data); return (
- 
+            
                 
                 {renderYamlData(ymlData, '', true, separator, showAllDescriptions)}
             

diff --git a/src/css/custom.css b/src/css/custom.css
index a4b1b8f55..fbf2ac0df 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -193,7 +193,7 @@ html[data-theme="dark"] {
   width: fit-content;
 }
 
-.codeblock {
+.config-button-parent {
   position: relative;
 }
 

From 2b2228d5532fa0241c1f2c44ddbf10381a3844a1 Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 12:02:10 +0000
Subject: [PATCH 05/11] better name for position relative class

---
 src/css/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index fbf2ac0df..c8598b771 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -193,7 +193,7 @@ html[data-theme="dark"] {
   width: fit-content;
 }
 
-.config-button-parent {
+.relative-container {
   position: relative;
 }
 

From b9e017623b5b503422f203498b0e7d07bfb56572 Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 13:23:49 -0700
Subject: [PATCH 06/11] Update Config.tsx

---
 src/components/Config.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 604d202b3..25717d00b 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -206,7 +206,7 @@ export default function Config({ data, separator = ': ', showDescriptions = fals
     let ymlData = yaml.load(data);
     return (
         

-            
+            
                 
                 {renderYamlData(ymlData, '', true, separator, showAllDescriptions)}
             


From b60cc696225e922e59ddee2b552757612e073762 Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 16:15:33 -0700
Subject: [PATCH 07/11] fix issue with flipping of preselected descriptions

---
 src/components/Config.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 25717d00b..bbc9e0023 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -96,7 +96,7 @@ const YamlNodeWithDescription = ({ name, node, parentKey, root, separator, showA
 
     useEffect(() => {
         if (ignoreInitialRenderRef.current) {
-            setShowDescription(!showDescription);
+            setShowDescription(showAllDescriptions);
         } else {
             ignoreInitialRenderRef.current = true;
         }

From 637fe23d3acae94de623f98b006903f723c8dc5e Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 16:34:32 -0700
Subject: [PATCH 08/11] hide css styling instead of conditional rendering

removes the need for a duplicate div for SEO
---
 src/components/Config.tsx | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index bbc9e0023..46076c987 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -130,17 +130,11 @@ const YamlNodeWithDescription = ({ name, node, parentKey, root, separator, showA
                 >
                     {parseItalics(name)}{parseDefault(node.default.toString(), !showDescription, parentKey, name, handleHashLinkClick, separator)}
                 
-                {showDescription ? (
-                    <>
-                        

-                            

-                                {node.description.toString()}
-                            

-                        

-                    
-                ) : (
-                    <>
-                )}
+                

+                    

+                        {node.description.toString()}
+                    

+
); @@ -210,7 +204,6 @@ export default function Config({ data, separator = ': ', showDescriptions = fals {renderYamlData(ymlData, '', true, separator, showAllDescriptions)} -
{data}
); } From ec96caa986a9674e0dbdce36070d7ea491b797e8 Mon Sep 17 00:00:00 2001 From: granny Date: Tue, 29 Aug 2023 16:35:24 -0700 Subject: [PATCH 09/11] rename relative-container to config-container --- src/components/Config.tsx | 2 +- src/css/custom.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Config.tsx b/src/components/Config.tsx index 46076c987..39bb8474a 100644 --- a/src/components/Config.tsx +++ b/src/components/Config.tsx @@ -200,7 +200,7 @@ export default function Config({ data, separator = ': ', showDescriptions = fals let ymlData = yaml.load(data); return (
- 
+            
                 
                 {renderYamlData(ymlData, '', true, separator, showAllDescriptions)}
             

diff --git a/src/css/custom.css b/src/css/custom.css
index c8598b771..3df9b89e5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -193,7 +193,7 @@ html[data-theme="dark"] {
   width: fit-content;
 }
 
-.relative-container {
+.config-container {
   position: relative;
 }
 

From 4fd07e8478efa895bdae01a402795ea7bf3fc895 Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 16:39:49 -0700
Subject: [PATCH 10/11] make the button smaller in size

---
 src/css/custom.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 3df9b89e5..bb19930e8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -199,7 +199,8 @@ html[data-theme="dark"] {
 
 .config-button {
   position: absolute;
-  width: 130px;
+  padding: 0px;
+  width: 90px;
   top: 10px;
   right: 10px;
 }

From 9466cb1b54f169ea25c67f0f798cba45f4148ea6 Mon Sep 17 00:00:00 2001
From: granny 
Date: Tue, 29 Aug 2023 16:45:39 -0700
Subject: [PATCH 11/11] add no-contextual styling to config container

---
 src/css/custom.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index bb19930e8..a0d5abe15 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -194,6 +194,7 @@ html[data-theme="dark"] {
 }
 
 .config-container {
+  font-variant-ligatures: no-contextual;
   position: relative;
 }