From 52666a8538a6100f8de10e24044765f3454aa7b9 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 4 Nov 2022 12:30:55 +0200 Subject: [PATCH] docs: general design fixes (#2545) * general fixes to the docs design * fix condition checking for auto color scheme --- .../troubleshooting/documentation-error.md | 18 +++++++- www/docs/src/css/_sidebar.css | 4 ++ www/docs/src/theme/CodeBlock/index.js | 4 +- www/docs/src/theme/ColorModeToggle/index.js | 9 +++- .../src/theme/DocSidebar/Desktop/index.js | 40 ++++++++++++++++-- www/docs/static/img/info-icon.png | Bin 1059 -> 1807 bytes www/docs/static/img/tip-icon.png | Bin 1057 -> 1742 bytes 7 files changed, 67 insertions(+), 8 deletions(-) diff --git a/docs/content/troubleshooting/documentation-error.md b/docs/content/troubleshooting/documentation-error.md index bef2bf02a6..ebd5d8b906 100644 --- a/docs/content/troubleshooting/documentation-error.md +++ b/docs/content/troubleshooting/documentation-error.md @@ -1,7 +1,23 @@ -# Documentation Error +# Troubleshooting Documentation Errors + +## React Hook Errors If you have installed the dependencies in the root of the Medusa repository (that is, if you have a `node_modules` directory at the root of the Medusa repository), this will cause an error when running the documentation website. This is because the content resides in `docs/content`. When that content is being imported from there, a mix up can happen between the dependencies in the root of the Medusa repository and the dependencies in `www/docs` which causes an `invalid hook call` error. For that reason, when the `start` and `build` scripts in `www/docs` are used, the `clean-node-modules` script is called. This script deleted the `node_modules` directory in the root of the Medusa repository. + +## Out of Memory Error + +If you receive the following error when you run the `build` command in `www/docs`: + +```bash +FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory +``` + +Then, run the `build` command with the `NODE_OPTIONS` environment variable set: + +```bash npm2yarn +NODE_OPTIONS="--max-old-space-size=8192" npm run build +``` diff --git a/www/docs/src/css/_sidebar.css b/www/docs/src/css/_sidebar.css index c8f6acc140..180e865e13 100644 --- a/www/docs/src/css/_sidebar.css +++ b/www/docs/src/css/_sidebar.css @@ -236,4 +236,8 @@ html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__l .navbar-github-link { overflow: visible; +} + +.sidebar-desktop:not(.scrolling) nav::-webkit-scrollbar { + --ifm-scrollbar-size: 0px; } \ No newline at end of file diff --git a/www/docs/src/theme/CodeBlock/index.js b/www/docs/src/theme/CodeBlock/index.js index 15fd4144ea..d1103e7031 100644 --- a/www/docs/src/theme/CodeBlock/index.js +++ b/www/docs/src/theme/CodeBlock/index.js @@ -1,4 +1,4 @@ -import React, {isValidElement} from 'react'; +import React, {isValidElement, useCallback, useEffect, useState} from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; import useBaseUrl from '@docusaurus/useBaseUrl'; import ElementContent from '@theme/CodeBlock/Content/Element'; @@ -36,7 +36,7 @@ export default function CodeBlock({children: rawChildren, ...props}) {
- + { if (isBrowser) { const previousSelected = window.localStorage.getItem('selected-color-mode') || window.localStorage.getItem('theme') if (previousSelected && allowedModes.includes(previousSelected)) { setStorageColorMode(previousSelected) + } else if (colorMode.respectPrefersColorScheme) { + setStorageColorMode('auto') + } else { + setStorageColorMode(colorMode.defaultMode || 'light') } } }, [isBrowser]) diff --git a/www/docs/src/theme/DocSidebar/Desktop/index.js b/www/docs/src/theme/DocSidebar/Desktop/index.js index 092618be7f..9d31feca76 100644 --- a/www/docs/src/theme/DocSidebar/Desktop/index.js +++ b/www/docs/src/theme/DocSidebar/Desktop/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import clsx from 'clsx'; import {useThemeConfig} from '@docusaurus/theme-common'; import Logo from '@theme/Logo'; @@ -6,7 +6,8 @@ import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton'; import Content from '@theme/DocSidebar/Desktop/Content'; import styles from './styles.module.css'; import DocSidebarItem from '@theme/DocSidebarItem'; -import SearchBar from '../../SearchBar' +import SearchBar from '../../SearchBar'; +import useIsBrowser from '@docusaurus/useIsBrowser'; function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) { const { @@ -16,14 +17,47 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) { }, sidebarFooter = [], } = useThemeConfig(); + const isBrowser = useIsBrowser() + const sidebarRef = useRef(null) + + useEffect(() => { + console.log("here1", isBrowser, sidebarRef.current) + if (isBrowser && sidebarRef.current) { + console.log("here2") + function handleScroll () { + console.log("handlescroll") + if (!sidebarRef.current.classList.contains('scrolling')) { + console.log("scrolling") + sidebarRef.current.classList.add('scrolling'); + const intervalId = setInterval(() => { + console.log("interval") + if (!sidebarRef.current.matches(':hover')) { + console.log("remove class") + sidebarRef.current.classList.remove('scrolling'); + clearInterval(intervalId); + } + }, 300) + } + } + + const navElement = sidebarRef.current.querySelector('nav'); + navElement.addEventListener('scroll', handleScroll); + + return () => { + navElement?.removeEventListener('scroll', handleScroll); + } + } + }, [isBrowser, sidebarRef.current]) return (
+ )} + ref={sidebarRef}> {hideOnScroll && }
diff --git a/www/docs/static/img/info-icon.png b/www/docs/static/img/info-icon.png index 35df919c57f6b7308787a5d45c20b5ef0d61d034..c82c19cf11cc3464187566c4f54ad5323df00d34 100644 GIT binary patch literal 1807 zcmY*Z2~<-@6rHd`1Qo3a1pGvUVKF}}QW8TTlpPWvhy+0;qkbdmonxckGJ8{_{yVIbd3)*ckzgtciI)Jd4yT)_Q0As7 z#4Vn`oh4<_BgkA~CV`V8{E$bGWr}nvK#`FVn8}lJAX(;afrKpc!MzEA+^d^sNqv!y;*tgg`VczaGM zKlNQDfn=#Iq(NA>1G^E3@Uk}|rRcKcNHL#>RMz=Z-6(IE|I01ap}@N0|2fRtPTypa zR;gwbc=_6>X4c80#>huh85%&_&N6+-iWb-gufWB*uv%w7t845sRn+41K2}KD{dPJ#kgnb z;@QBnH@{50^ML^w3nn@gm{&bPKhknsUw^YY>UQwiVwq<2T&$?w*+{|CR=hm=1f8-+ zuKpnnYtk_`Sdo#IS zPI@shoB#UjsuvKvw|VyQkt@E>=Xr_MDo1V1CyOq`Gm+Z5CdgvCs=zfRab3`tJz3nb zyp{*aH{jf3-#so)*94V(G(X0VPGpsiH?R)qFJ2T>Kl6^i{@_}K;_06z)b}UV{c(yp z+BYw&cyYRK(6IgLSsbhvhu>E};8W$8fzw1g8z;M<0!lDH-TztD zGm!}`kmy(IH1Y4xx37O3VK;l8>A|KN3pl$ER#rF^r~K%szapKG-xM_G)*Wnj`dBMB zp&?b^b#J6-kgoEpyE$Btv16{!itkzda95{Q1Rsr`y6nQ7N@@Bg z1!HUMJ+`+pG3^p)Pt8>f>HM@Lv?X{hG=8QWlkKlfWIU~!NhpGMl~y147=8QJj1ujc z=D@i?fV^W}IqrI?dLUw~EhO+vn}TVL9*2tA$Fw!=1;W#m^~th@?sQ*CSGTrQ zp0e%x>3X#$gw|C`Jo7Ybu|m2x2JROUoE~)zp)C`K`#wFnI3=LPnS^|dZjQZ?8#rVh z(1A1ANEk`3PF#yF+^=_Q_(@5{SAlGmVr*ch<~9!R^4#H8m~o7|lulzh^m(roUm6Iy zFdwTt)GEd_9IcEEj=tUNPyPBy{{4z)pZF%9WE?Jbo;+s|Vzq;9()RSXhphNS`1#TJ zw%|oIk?`7Lq@?zdX(fyw**zZKxj}K%-M?%7Y0T%fzO1Z#)$HHG@dDtrb8^3;v~^nd On-2|S1f26{7ySb-hRg#1 delta 1052 zcmV+%1mpXU4xkQaq^hI@MMoxeLHW$r-J^h-2% zE_2WQ=KLRk{{#q2;_Tg|Y}uk>e-V`hVoC1tdd%yQu&v=qcYTyaUM3=EjY%~psE#?< z1A_9xmkCA)IB@dNF(G9{`k#>_x8}9V>wH9!||2iyi01I%=W&{#Ve?UCY_X(_i z-kuyDb+^W;L=*|4dxoJo_A)ZZ^>tqEp`nMg)hNJMGFhfF}mDH?I8og14R@gh$} zp+^O%t~o32hCd)&gCV3)X=f7R?dR|7T`)(e6;6tK${`X?I&Srfe_QYmaNc-%0zU&Q zXU)5UQ*sbMk*d=W)*wz+oZgKKTm*TS@3itC5taiUY_A7XF<~JjX-;a|F3SNkCzlW) z9xeZ3+la?DR^PM(hxqE5Lmm35ptg75zXL^hw{G3nED%Z WVaj#QXYd680000wXqY-? z+3J|((u|$7PN~^Gok}aoOe;GoVOH}n$7cR_?tj1k{@?xXz3;s9b_P>d8yZ*{000aF z1ITpP&xg%^hAzB69{joCg-QuDntBIEJIGS=a*?sW4KQMO3dnvVW*!K5G4Y@e38Zwfpoi1 zuv%1N7(>jUtR->w6_5SK_p>ZJdsXbHI)vZywC|^aT*bimq;Wyi4#sBt~LB2AdcgDY$Fy&XuC%>Tuv>X7i7;{R#p=cJQS zcvNo#5`Ox%c^g==diCIsh!#j*5ysHJ8?jDk?KVrd;Yf0)nBMf{maV{8t@}uSLn$<- zf5v@t{X|S#1dZLNolXlLg}1IDrj?50`L5u7c)*C3e{FTbD0fRG7Ig&j?P1CwUqx2N z@A*CHs@x?`k2jrRvS^{y^_Z9Qx88}YyJYss97_7TNw{k^`@tQD;?}PA=*+9Lw&EZO z^X!Gx;`8+99#CEKy!kj}tT$>MRxnKa%)6OdE{Y|<3#_cEqXZ1;ENzu!fF;!Nf zG9im70w*v_UWK&oRlP-2v=~VsGg1V;T><%<{&?wR*zL)T6(O1 zN3ZfJMeofucKO`oyhVF$==E((y|ula$39nLjmig4I*G5jzmFNYp?rQ~s41Zw`M_Y< zs5LS3i*cudRqP*`9G3K|JYdUp(}%BOAnyJ(iNeoGeaG#vi?hblHQ!DvUz z@Jx=c)$5N(X=?YXtb*~|7u;PCIg!^weD_v%UwP%Ton2L{D6+qqxkpyivS+)JJ^q6H zovR!n?u)f`J$)*p;Lo=H2{&2tL&311BAPs2Eo$E;(8UhXY#Q_XXM`)tz7KiL#SAbh zLjg%b@9al8HcwAEHXBDTQ!S{>?s~TmnOXJNsEolV>0>F|*(pVx!B4(k%Jst9KjPWm z8(GL0JsMo2hFL9tx^4eU={jslCmTblFlR|B6+Md|W$z%yX~sWHioP zKH*{5c0}UZk%c15a~5K$gY$ZC$(^GQ=c7j!pd&IWH>n%cHltx?3upu7gNv1=ErABP z&L16$QL2wNhsIgHGH{c zsO(~hX@IMJS&jv>WzehTQ{D#ezTrnYb0Rs1?W(orgy%@VUl~eKxrFwW`1tV+yVtRF zF@;+b9NJuBW6pP1S@Tu=@w!nuZw*i5CEaA4V)b0^-qwT4Bk#_Nm(Nq6TplrebMeFK*h`p~Tn`c2|9+B>xS|LRE_ zl={T%@$+aItuL)DzB}e0pR(zSnW440J;j;uA*HmeXrz^>=SvN$Gwv{#uKI%6eeOOI zYP@h~_UH=uairu4Hfj2Rsn4 A?*IS* delta 1050 zcmV+#1m*kA4WS4jiBL{Q4GJ0x0000DNk~Le0000Q0000a2nGNE0GB!{6Oru~e*gh< zQb$4nuFf3k00004XF*Lt006O%3;baP000BFNklxRlMcF-z@P*s8! zn%M+TbaSxrh9KJsK@^x|A07x^TNfLtDXb-I+Y>3|_-3$5?JwfVIApEZ7!JUm%TdAy zfHZzj$EYhIgC!toY@Fx$e{vo%d(F?1kMDoOTJ<%5cSPvwAfJUEED2=sY?MgRvwR?E z_m@UgELa7PgvTW!gTL|tscu*jtU z!g;G!xx#I1l#bk>g^<6);3*4kbF#pTBH)PRbZ~KXrMN^gZW=FYf9ppV-QuEKtTYkn zEzg4@n+|4@Jh)yJr61{AB56<%XMY$B=$79J+0%(!Aw^IEo9UV-kuFg1#-MI_qRfN5 zz*z3>7iw00Gg~|U-L|NT%Iv!7z|i*E@ud&7gqT~++0Yy4i0zT%?G!s#U4pITI{04n zOcq$8u3td(?Mb1)f2CeGWUsy8xZf$WGoPsPT`qgZkgEbX>5B7Bpu6{#V=f|2Y@H2t29|cSBfc;BS^ao* zW{uvJIb-y_mzkM&Z^59kdC1k@%s%;^%_@Od<*-RXhcd|W^{!aB5A+DO3!kCrVV0ZF z8%o8v6e}