From 134732428b3374d16165284389bdf41905c59120 Mon Sep 17 00:00:00 2001 From: Jon Harrell <4829245+jharrell@users.noreply.github.com> Date: Thu, 6 Jun 2024 07:57:51 -0500 Subject: [PATCH 1/5] ran prettier format --- lostpixel.config.ts | 2 +- package.json | 3 +- src/components/GettingStarted/index.tsx | 23 +-- src/components/dropdown/index.tsx | 48 +++--- src/components/dropdown/styles.module.scss | 141 +++++++++--------- src/components/shortcodes/index.tsx | 33 ++-- src/css/all.css | 2 +- src/css/custom.css | 3 +- src/css/gettingStarted.module.scss | 4 +- src/theme/Footer/Layout/index.tsx | 6 +- src/theme/Footer/LinkItem/index.tsx | 4 +- src/theme/Footer/Links/MultiColumn/index.tsx | 54 ++++--- .../Links/MultiColumn/styles.module.scss | 18 +-- src/utils/useComponentVisible.tsx | 3 +- 14 files changed, 179 insertions(+), 165 deletions(-) diff --git a/lostpixel.config.ts b/lostpixel.config.ts index 7c8f8d8a8f..e1d1426c56 100644 --- a/lostpixel.config.ts +++ b/lostpixel.config.ts @@ -17,7 +17,7 @@ export const config: CustomProjectConfig = { display: none; } `, - }) + }); }, lostPixelProjectId: "clb5ek3mm1772001qqg7yban38", apiKey: process.env.LOST_PIXEL_API_KEY, diff --git a/package.json b/package.json index 89e7f44e46..2d1d62158f 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", - "write-heading-ids": "docusaurus write-heading-ids" + "write-heading-ids": "docusaurus write-heading-ids", + "format": "prettier --write ." }, "dependencies": { "@docusaurus/core": "^3.3.2", diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index f99c8c85c4..e2235cdaa0 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -48,7 +48,7 @@ export const SignalStream = ({ color, height, width }: any) => ( fill={color ? color : "currentColor"} d="M108.2 71c13.8 11.1 16 31.2 5 45C82.4 154.4 64 203 64 256s18.4 101.6 49.1 140c11.1 13.8 8.8 33.9-5 45s-33.9 8.8-45-5C23.7 386.7 0 324.1 0 256S23.7 125.3 63.2 76c11.1-13.8 31.2-16 45-5zm359.7 0c13.8-11.1 33.9-8.8 45 5C552.3 125.3 576 187.9 576 256s-23.7 130.7-63.2 180c-11.1 13.8-31.2 16-45 5s-16-31.2-5-45c30.7-38.4 49.1-87 49.1-140s-18.4-101.6-49.1-140c-11.1-13.8-8.8-33.9 5-45zM232 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm-27.5-74.7c-17.8 19.8-28.5 46-28.5 74.7s10.8 54.8 28.5 74.7c11.8 13.2 10.7 33.4-2.5 45.2s-33.4 10.7-45.2-2.5C129 342.2 112 301.1 112 256s17-86.2 44.8-117.3c11.8-13.2 32-14.3 45.2-2.5s14.3 32 2.5 45.2zm214.7-42.7C447 169.8 464 210.9 464 256s-17 86.2-44.8 117.3c-11.8 13.2-32 14.3-45.2 2.5s-14.3-32-2.5-45.2c17.8-19.8 28.5-46 28.5-74.7s-10.8-54.8-28.5-74.7c-11.8-13.2-10.7-33.4 2.5-45.2s33.4-10.7 45.2 2.5z" /> - + ); export const BorderBoxWrapper = ({ children, ...props }) => ( @@ -63,9 +63,7 @@ export const BoxTitle = ({ children, ...props }) => ( ); -export const Separator = () => ( -
-) +export const Separator = () =>
; export const BorderBox = ({ border, ...props }: any) => ( {props.children} @@ -80,7 +78,11 @@ export const Grid = ({ children, ...props }) => ( export const LinkCard = ({ icon, title, desc, link, highlight }: any) => { const linkCardRef = useRef(null); return ( - +
{title}
@@ -110,8 +112,8 @@ export const SquareLogo = ({ image, tech, url, imageDark }: any) => { onMouseMove={() => setVisibleTooltip(true)} onMouseLeave={() => setVisibleTooltip(false)} > - - {imageDark && } + + {imageDark && } {visibleTooltip && ( @@ -123,7 +125,10 @@ export const SquareLogo = ({ image, tech, url, imageDark }: any) => { }; export const List = ({ children, framed, split, ...props }) => ( -
+
{children}
-); \ No newline at end of file +); diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx index fe51f5945f..02b688e8a5 100644 --- a/src/components/dropdown/index.tsx +++ b/src/components/dropdown/index.tsx @@ -19,21 +19,20 @@ const SimpleDropdown = ({ pos = "bottom", }: SimpleDropType) => { const [isOpen, openDrop] = useState(false); - const { ref, isComponentVisible, setIsComponentVisible } = - useComponentVisible(true); + const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(true); useEffect(() => { if (!isComponentVisible) openDrop(false); }, [isComponentVisible]); const escEvent = (e: KeyboardEvent) => { - if (e.key === "Escape") openDrop(false) - } + if (e.key === "Escape") openDrop(false); + }; useEffect(() => { - window.addEventListener("keydown", escEvent) - return () => window.removeEventListener("keydown", escEvent) - }, []) + window.addEventListener("keydown", escEvent); + return () => window.removeEventListener("keydown", escEvent); + }, []); return (
{anchor}
-
{ - e.stopPropagation(); - openDrop(false); - }} - > -
- {items.map((item: any, idx: number) => ( -
- {item} -
- ))} -
+
{ + e.stopPropagation(); + openDrop(false); + }} + > +
+ {items.map((item: any, idx: number) => ( +
+ {item} +
+ ))}
+
); }; -export default SimpleDropdown; \ No newline at end of file +export default SimpleDropdown; diff --git a/src/components/dropdown/styles.module.scss b/src/components/dropdown/styles.module.scss index bf521cf7c4..5af15c8ddd 100644 --- a/src/components/dropdown/styles.module.scss +++ b/src/components/dropdown/styles.module.scss @@ -1,94 +1,95 @@ - -$border-color: #2D3748; -$surface: #090A15; +$border-color: #2d3748; +$surface: #090a15; $hover: #2d3748; - .root { - position: relative; + position: relative; } .anchor { - padding-bottom: 32px; - margin-bottom: -32px; + padding-bottom: 32px; + margin-bottom: -32px; } .overlayWrapper { - opacity: 0; - pointer-events: none; - @media (max-width: 599px) { - position: fixed; - height: 100vh; - z-index: 102; - width: 100vw; - background: rgb(9, 10, 21, 0.75); - top: 0; - left: 0; - } + opacity: 0; + pointer-events: none; + @media (max-width: 599px) { + position: fixed; + height: 100vh; + z-index: 102; + width: 100vw; + background: rgb(9, 10, 21, 0.75); + top: 0; + left: 0; + } + .container { + transform: translateY(100%); + } + &.showOverlay { .container { - transform: translateY(100%); - } - &.showOverlay { - .container { - transform: translateY(0); - } + transform: translateY(0); } + } } .showOverlay { - opacity: 1; - pointer-events: auto; + opacity: 1; + pointer-events: auto; } .container { - background: $surface; - border: 1px solid $border-color; - box-shadow: 0px 0px 46px 0px rgba(23, 43, 77, 0.01), 0px 4px 26px 0px rgba(23, 43, 77, 0.05), 0px 18px 42px 0px rgba(23, 43, 77, 0.08); - padding: 8px; - border-radius: 8px; - bottom: 0; - position: absolute; - width: 100%; - left: 0; - transition: transform 300ms ease; - display: flex; - flex-direction: column; - gap: 8px; - @media (min-width: 600px) { - top: 100%; - margin-top: 16px; - bottom: unset; - width: auto; - } + background: $surface; + border: 1px solid $border-color; + box-shadow: + 0px 0px 46px 0px rgba(23, 43, 77, 0.01), + 0px 4px 26px 0px rgba(23, 43, 77, 0.05), + 0px 18px 42px 0px rgba(23, 43, 77, 0.08); + padding: 8px; + border-radius: 8px; + bottom: 0; + position: absolute; + width: 100%; + left: 0; + transition: transform 300ms ease; + display: flex; + flex-direction: column; + gap: 8px; + @media (min-width: 600px) { + top: 100%; + margin-top: 16px; + bottom: unset; + width: auto; + } } .item { - border-radius: 8px; - color: #A0AEC0; - width: max-content; - min-width: 100%; - cursor: pointer; - padding: 8px 12px; - background: $surface; - transition: background 300ms ease-out; - &:hover { - background: $hover; - } + border-radius: 8px; + color: #a0aec0; + width: max-content; + min-width: 100%; + cursor: pointer; + padding: 8px 12px; + background: $surface; + transition: background 300ms ease-out; + &:hover { + background: $hover; + } } .topPos { - @media (min-width: 600px) { - top: unset !important; - left: 0 !important; - transform: unset !important; - bottom: 100% !important; - } - & > * { - width: 100%; - display: inline-block; - } + @media (min-width: 600px) { + top: unset !important; + left: 0 !important; + transform: unset !important; + bottom: 100% !important; + } + & > * { + width: 100%; + display: inline-block; + } - a { - color: inherit - } -} \ No newline at end of file + a { + color: inherit; + } +} diff --git a/src/components/shortcodes/index.tsx b/src/components/shortcodes/index.tsx index b30fe0808b..c16e1ebe7e 100644 --- a/src/components/shortcodes/index.tsx +++ b/src/components/shortcodes/index.tsx @@ -1,16 +1,25 @@ -import { Icon } from "../Icon" +import { Icon } from "../Icon"; const Headline = ({ component, children }) => { - const Component = component; - return {children}; + const Component = component; + return {children}; }; -export const IconTitle = ({ heading, icon, iconColor, children}: { heading: string, icon: string, iconColor: string, children: any}) => { - return ( - - - {children} - - ) -} - +export const IconTitle = ({ + heading, + icon, + iconColor, + children, +}: { + heading: string; + icon: string; + iconColor: string; + children: any; +}) => { + return ( + + + {children} + + ); +}; diff --git a/src/css/all.css b/src/css/all.css index 293ad9f1e9..a552f676da 100644 --- a/src/css/all.css +++ b/src/css/all.css @@ -972,7 +972,7 @@ font-weight: 400; } -:root, +:root, :host { --fa-style-family-brands: "Font Awesome 6 Brands"; --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; diff --git a/src/css/custom.css b/src/css/custom.css index d3242d363f..b5f5023820 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -705,7 +705,8 @@ hr { font-family: Barlow, sans-serif; } -.footer__item a, .footer__item.anchor { +.footer__item a, +.footer__item.anchor { color: #a0aec0; font-size: 1rem; display: flex; diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index ecf3660b99..ba2664aa97 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -84,13 +84,13 @@ border-color: var(--ifm-btn-border-color-active); background: transparent; color: inherit; - } + } &.linkCardHighlight { background: rgba(22, 163, 148, 0.12); border-color: rgb(22, 163, 148); &:hover { // background: #B7F4EE; - border-color: #154F47; + border-color: #154f47; } } .title { diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 16c56eb4fb..394b2c549b 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -8,7 +8,11 @@ export default function FooterLayout({ style, links, logo, copyright }) {