From b49b3d1976863543f6a871d0818cd38fb29a728e Mon Sep 17 00:00:00 2001 From: "joshcs.eth" <46639943+jcstein@users.noreply.github.com> Date: Fri, 6 Oct 2023 19:08:19 -0400 Subject: [PATCH 1/3] feat: add janky method link --- src/pages/index.tsx | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fc84976..ca1a828 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -507,12 +507,33 @@ export default function Example() { {filteredMethods.map((method) => ( - + id={`${pkg}.${method.name}`} + > + + setShowHash(`${pkg}.${method.name}`) + } + onMouseLeave={() => setShowHash('')} + > + {showHash === `${pkg}.${method.name}` && ( + + + # + + + )} + + + ))} ); From 13eeb91fb6bfe0f3b90ffc591b9ba58f89a9d141 Mon Sep 17 00:00:00 2001 From: "joshcs.eth" <46639943+jcstein@users.noreply.github.com> Date: Fri, 6 Oct 2023 19:59:39 -0400 Subject: [PATCH 2/3] feat: improve but lose link in url bar --- src/pages/index.tsx | 102 +++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 49 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ca1a828..95231be 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,6 +7,7 @@ import { Bars3BottomLeftIcon, XMarkIcon } from '@heroicons/react/24/outline'; import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/solid'; import axios from 'axios'; import { Fragment, useEffect, useState } from 'react'; +import { useRef } from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { FiClipboard } from 'react-icons/fi'; import SyntaxHighlighter from 'react-syntax-highlighter'; @@ -507,33 +508,13 @@ export default function Example() { {filteredMethods.map((method) => ( -
- - setShowHash(`${pkg}.${method.name}`) - } - onMouseLeave={() => setShowHash('')} - > - {showHash === `${pkg}.${method.name}` && ( - - - # - - - )} - - -
+ pkg={pkg} + method={method} + activateSidebar={activateSidebar} + selectedVersion={selectedVersion} // pass selectedVersion here + /> ))} ); @@ -634,43 +615,66 @@ const RPCMethod = ({ pkg, method, activateSidebar, + selectedVersion, }: { pkg: string; method: Method; activateSidebar: (param: Param) => void; + selectedVersion: string; }) => { const [showRequest, setShowRequest] = useState(false); const [showResponse, setShowResponse] = useState(false); + const methodRef = useRef(null); // create a ref + + const handleCopyClick = () => { + methodRef.current?.scrollIntoView({ + behavior: 'auto', + block: 'start', + inline: 'nearest', + }); + const offset = window.innerWidth >= 768 ? -5 : -70; + window.scrollBy(0, offset); + }; return ( -
-

- {method.name}( - {method.params.map((param, i, { length }) => ( - - {param.name}{' '} +

+
+

+ {method.name}( + {method.params.map((param, i, { length }) => ( + + {param.name}{' '} + activateSidebar(param)} + > + {param.description} + {length - 1 != i && ', '} + + + ))} + ) + {method.result.description != 'Null' && ( activateSidebar(param)} + className='ml-2 text-sm text-blue-500 hover:cursor-pointer hover:font-bold' + onClick={() => activateSidebar(method.result)} > - {param.description} - {length - 1 != i && ', '} + {method.result.description} + )} + + perms: {method.auth} - ))} - ) - {method.result.description != 'Null' && ( - activateSidebar(method.result)} - > - {method.result.description} +

+ + + # - )} - - perms: {method.auth} - -

+ +

{method.description}

Date: Fri, 6 Oct 2023 21:02:43 -0400 Subject: [PATCH 3/3] feat: add url hash and scroll to method --- src/pages/index.tsx | 74 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 57 insertions(+), 17 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 95231be..7e50af6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -111,7 +111,8 @@ export default function Example() { try { const response = await axios.get(`/specs/openrpc-${version}.json`); setSpec(response.data); - window.history.replaceState({}, '', `?version=${version}`); + const hash = window.location.hash; + window.history.replaceState({}, '', `?version=${version}${hash}`); } catch (error) { // eslint-disable-next-line no-console console.error('Error fetching JSON data:', error); @@ -137,6 +138,23 @@ export default function Example() { } }, []); + useEffect(() => { + if (spec) { + setTimeout(() => { + const hash = window.location.hash.substring(1); + const element = document.getElementById(hash); + + if (element) { + element.scrollIntoView({ + behavior: 'smooth', + block: 'start', + inline: 'nearest', + }); + } + }, 1000); + } + }, [spec]); + const activateSidebar = (param: any) => { setOpen(true); setCurrentParam(param); @@ -508,13 +526,17 @@ export default function Example() { {filteredMethods.map((method) => ( - + id={`${pkg}.${method.name}`} + > + +
))}
); @@ -626,18 +648,31 @@ const RPCMethod = ({ const [showResponse, setShowResponse] = useState(false); const methodRef = useRef(null); // create a ref + // const handleCopyClick = () => { + // methodRef.current?.scrollIntoView({ + // behavior: 'auto', + // block: 'start', + // inline: 'nearest', + // }); + // const newUrl = `${window.location.origin}/?version=${selectedVersion}#${pkg}.${method.name}`; + // window.history.pushState({}, '', newUrl); + // const offset = window.innerWidth >= 768 ? -5 : -70; + // window.scrollBy(0, offset); + // }; + const handleCopyClick = () => { - methodRef.current?.scrollIntoView({ - behavior: 'auto', - block: 'start', - inline: 'nearest', - }); - const offset = window.innerWidth >= 768 ? -5 : -70; - window.scrollBy(0, offset); + const hash = window.location.hash.substring(1); + const element = document.getElementById(hash); + element?.scrollIntoView(); }; return ( -
+

{method.name}( @@ -653,7 +688,7 @@ const RPCMethod = ({ ))} - ) + n ) {method.result.description != 'Null' && ( - + { + window.location.hash = `${pkg}.${method.name}`; + }} + > #