From 3997808debc585063746f9a74ae07f9ca8888fa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Du=C5=A1an?= Date: Tue, 18 Jun 2024 17:26:59 +0200 Subject: [PATCH 1/2] Update react-compiler.md (#6965) Added missing comma to the codesample. --- src/content/learn/react-compiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 5655611a8..3fef7d5cc 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -341,7 +341,7 @@ function reactCompilerLoader(sourceCode, sourceMap) { this.callback( null, - result.code + result.code, result.map === null ? undefined : result.map ); } From 169d5c1820cd1514429bfac2a923e51dd782d37e Mon Sep 17 00:00:00 2001 From: Ricky Date: Thu, 20 Jun 2024 10:56:59 -0400 Subject: [PATCH 2/2] Add branding context menu (#6986) --- package.json | 1 + public/images/brand/logo_dark.svg | 12 + public/images/brand/logo_light.svg | 10 + public/images/brand/wordmark_dark.svg | 15 + public/images/brand/wordmark_light.svg | 11 + src/components/Layout/TopNav/BrandMenu.tsx | 145 +++++++++ src/components/Layout/TopNav/TopNav.tsx | 65 ++-- yarn.lock | 354 ++++++++++++++++++++- 8 files changed, 581 insertions(+), 32 deletions(-) create mode 100644 public/images/brand/logo_dark.svg create mode 100644 public/images/brand/logo_light.svg create mode 100644 public/images/brand/wordmark_dark.svg create mode 100644 public/images/brand/wordmark_light.svg create mode 100644 src/components/Layout/TopNav/BrandMenu.tsx diff --git a/package.json b/package.json index 26bb39657..1f63eb121 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", + "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", "date-fns": "^2.16.1", diff --git a/public/images/brand/logo_dark.svg b/public/images/brand/logo_dark.svg new file mode 100644 index 000000000..265777fa3 --- /dev/null +++ b/public/images/brand/logo_dark.svg @@ -0,0 +1,12 @@ + + + React-Logo-Filled (1) + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/logo_light.svg b/public/images/brand/logo_light.svg new file mode 100644 index 000000000..bbe5a8994 --- /dev/null +++ b/public/images/brand/logo_light.svg @@ -0,0 +1,10 @@ + + + React-Logo-Filled (1) + + + + + + + \ No newline at end of file diff --git a/public/images/brand/wordmark_dark.svg b/public/images/brand/wordmark_dark.svg new file mode 100644 index 000000000..ec028ae21 --- /dev/null +++ b/public/images/brand/wordmark_dark.svg @@ -0,0 +1,15 @@ + + + Group + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/wordmark_light.svg b/public/images/brand/wordmark_light.svg new file mode 100644 index 000000000..2de8f3cc7 --- /dev/null +++ b/public/images/brand/wordmark_light.svg @@ -0,0 +1,11 @@ + + + Group + + + + + + + + \ No newline at end of file diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx new file mode 100644 index 000000000..3bd8776f2 --- /dev/null +++ b/src/components/Layout/TopNav/BrandMenu.tsx @@ -0,0 +1,145 @@ +import * as ContextMenu from '@radix-ui/react-context-menu'; +import {IconCopy} from 'components/Icon/IconCopy'; +import {IconDownload} from 'components/Icon/IconDownload'; +import {IconNewPage} from 'components/Icon/IconNewPage'; +import {ExternalLink} from 'components/ExternalLink'; +import {IconClose} from '../../Icon/IconClose'; + +function MenuItem({ + children, + onSelect, +}: { + children: React.ReactNode; + onSelect?: () => void; +}) { + return ( + + {children} + + ); +} + +function DownloadMenuItem({ + fileName, + href, + children, +}: { + fileName: string; + href: string; + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} + +export default function BrandMenu({children}: {children: React.ReactNode}) { + return ( + + + {children} + + + + + Dark Mode + + + + + + Logo SVG + + + + + + Wordmark SVG + + { + await navigator.clipboard.writeText('#58C4DC'); + }}> + + + + Copy dark mode color + + + Light Mode + + + + + + Logo SVG + + + + + + Wordmark SVG + + { + await navigator.clipboard.writeText('#087EA4'); + }}> + + + + Copy light mode color + +
+ + + uwu + + { + // @ts-ignore + window.__setUwu(false); + }}> + + + + Turn off + + + + + + Logo PNG + + + + + + + + Logo by @sawaratsuki1004 + + +
+
+
+
+ ); +} diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index 921d2102c..cc5c654e3 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -26,6 +26,7 @@ import {Feedback} from '../Feedback'; import {SidebarRouteTree} from '../Sidebar'; import type {RouteItem} from '../getRouteMeta'; import {siteConfig} from 'siteConfig'; +import BrandMenu from './BrandMenu'; declare global { interface Window { @@ -241,15 +242,15 @@ export default function TopNav({ className={cn( isMenuOpen ? 'h-screen sticky top-0 lg:bottom-0 lg:h-screen flex flex-col shadow-nav dark:shadow-nav-dark z-20' - : 'z-50 sticky top-0' + : 'z-40 sticky top-0' )}>