From c5dae69a89eea515596fc1a1e54c143345a0914f Mon Sep 17 00:00:00 2001 From: maxnorm Date: Wed, 3 Jun 2026 18:38:48 -0400 Subject: [PATCH] add packageImport component --- .../library/diamond/DiamondInspectFacet.mdx | 3 + website/docs/library/diamond/DiamondMod.mdx | 3 + .../library/diamond/DiamondUpgradeFacet.mdx | 3 + .../library/diamond/DiamondUpgradeMod.mdx | 3 + website/docusaurus.config.js | 11 +- .../components/docs/PackageImport/index.js | 44 +++++++ .../docs/PackageImport/styles.module.css | 101 +++++++++++++++ .../navigation/GithubStarsNavbarItem/index.js | 80 ------------ .../GithubStarsNavbarItem/styles.module.css | 115 ------------------ .../navigation/IconNavbarItem/index.js | 44 +++++++ .../IconNavbarItem/styles.module.css | 35 ++++++ .../src/theme/NavbarItem/ComponentTypes.js | 4 +- website/src/theme/Root.js | 2 - website/static/icons/discord-white.svg | 3 + website/static/icons/github-white.svg | 3 + 15 files changed, 252 insertions(+), 202 deletions(-) create mode 100644 website/src/components/docs/PackageImport/index.js create mode 100644 website/src/components/docs/PackageImport/styles.module.css delete mode 100644 website/src/components/navigation/GithubStarsNavbarItem/index.js delete mode 100644 website/src/components/navigation/GithubStarsNavbarItem/styles.module.css create mode 100644 website/src/components/navigation/IconNavbarItem/index.js create mode 100644 website/src/components/navigation/IconNavbarItem/styles.module.css create mode 100644 website/static/icons/discord-white.svg create mode 100644 website/static/icons/github-white.svg diff --git a/website/docs/library/diamond/DiamondInspectFacet.mdx b/website/docs/library/diamond/DiamondInspectFacet.mdx index 716c2006..2a6a0b96 100644 --- a/website/docs/library/diamond/DiamondInspectFacet.mdx +++ b/website/docs/library/diamond/DiamondInspectFacet.mdx @@ -11,6 +11,9 @@ import Callout from '@site/src/components/ui/Callout'; import PropertyTable from '@site/src/components/api/PropertyTable'; import ExpandableCode from '@site/src/components/code/ExpandableCode'; import LastUpdated from '@site/src/components/docs/LastUpdated'; +import PackageImport from '@site/src/components/docs/PackageImport'; + + It lets you inspect the diamond’s routing table and retrieve the registered facet list. diff --git a/website/docs/library/diamond/DiamondMod.mdx b/website/docs/library/diamond/DiamondMod.mdx index 91c69ee3..6ec977d2 100644 --- a/website/docs/library/diamond/DiamondMod.mdx +++ b/website/docs/library/diamond/DiamondMod.mdx @@ -17,6 +17,9 @@ import RelatedDocs from '@site/src/components/docs/RelatedDocs'; import WasThisHelpful from '@site/src/components/docs/WasThisHelpful'; import LastUpdated from '@site/src/components/docs/LastUpdated'; import ReadingTime from '@site/src/components/docs/ReadingTime'; +import PackageImport from '@site/src/components/docs/PackageImport'; + + This module provides core internal functions and storage management for diamond proxies. diff --git a/website/docs/library/diamond/DiamondUpgradeFacet.mdx b/website/docs/library/diamond/DiamondUpgradeFacet.mdx index 8fdae2b5..f41d5f5b 100644 --- a/website/docs/library/diamond/DiamondUpgradeFacet.mdx +++ b/website/docs/library/diamond/DiamondUpgradeFacet.mdx @@ -13,6 +13,9 @@ import PropertyTable from '@site/src/components/api/PropertyTable'; import ExpandableCode from '@site/src/components/code/ExpandableCode'; import LastUpdated from '@site/src/components/docs/LastUpdated'; import StepIndicator from '@site/src/components/docs/StepIndicator'; +import PackageImport from '@site/src/components/docs/PackageImport'; + + Orchestrates upgrade functionality, enabling the addition, replacement, and removal of facets. diff --git a/website/docs/library/diamond/DiamondUpgradeMod.mdx b/website/docs/library/diamond/DiamondUpgradeMod.mdx index 2c6b6fe2..2f32fcbf 100644 --- a/website/docs/library/diamond/DiamondUpgradeMod.mdx +++ b/website/docs/library/diamond/DiamondUpgradeMod.mdx @@ -15,6 +15,9 @@ import ExpandableCode from '@site/src/components/code/ExpandableCode'; import WasThisHelpful from '@site/src/components/docs/WasThisHelpful'; import LastUpdated from '@site/src/components/docs/LastUpdated'; import StepIndicator from '@site/src/components/docs/StepIndicator'; +import PackageImport from '@site/src/components/docs/PackageImport'; + + Module providing the internal functions to extend the diamond's upgrade functionality by adding, replacing, or removing facets. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 16d12212..eb246476 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -206,13 +206,18 @@ const config = { // ], // }, { - type: 'custom-githubStars', + type: 'custom-icon', position: 'right', + href: 'https://github.com/Perfect-Abstractions/Compose', + iconSrc: '/icons/github-white.svg', + label: 'GitHub', }, { + type: 'custom-icon', + position: 'right', href: 'https://discord.gg/DCBD2UKbxc', + iconSrc: '/icons/discord-white.svg', label: 'Discord', - position: 'right', }, ], }, @@ -345,7 +350,7 @@ const config = { enableInDevelopment: false, capturePageLeave: true, defaults: '2026-01-30', - cookieless_mode: 'on_reject', + cookieless_mode: 'always', }, ], ] diff --git a/website/src/components/docs/PackageImport/index.js b/website/src/components/docs/PackageImport/index.js new file mode 100644 index 00000000..b1eca8e0 --- /dev/null +++ b/website/src/components/docs/PackageImport/index.js @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; +import styles from './styles.module.css'; + +function getRelativePath(gitSource) { + const marker = '/tree/main/src/'; + const idx = gitSource.indexOf(marker); + if (idx === -1) return ''; + const after = gitSource.slice(idx + marker.length); + return after; +} + +export default function PackageImport({ gitSource }) { + const [copied, setCopied] = useState(false); + + if (!gitSource) return null; + + const relPath = getRelativePath(gitSource); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(`@perfect-abstractions/compose/${relPath}`); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // silent + } + }; + + return ( +
+ + {`@perfect-abstractions/compose/${relPath}`} + + +
+ ); +} diff --git a/website/src/components/docs/PackageImport/styles.module.css b/website/src/components/docs/PackageImport/styles.module.css new file mode 100644 index 00000000..f67a4ae0 --- /dev/null +++ b/website/src/components/docs/PackageImport/styles.module.css @@ -0,0 +1,101 @@ +.packageImport { + display: flex; + align-items: center; + gap: 0.75rem; + overflow-x: auto; + padding-bottom: 1rem; +} + +.label { + flex-shrink: 0; + font-size: 0.8125rem; + font-weight: 600; + color: var(--ifm-color-emphasis-500); + user-select: none; +} + +.code { + font-family: var(--ifm-font-family-monospace); + font-size: 0.875rem; + line-height: 1.6; + white-space: pre; + color: var(--ifm-color-primary-dark); + background-color: var(--ifm-background-surface-color); +} + +.copyButton { + flex-shrink: 0; + padding: 0.25rem 0.625rem; + background: transparent; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 0.25rem; + color: var(--ifm-color-emphasis-600); + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + transition: all 0.15s ease; +} + +.copyButton:hover { + background: var(--ifm-color-emphasis-200); + color: var(--ifm-color-emphasis-800); +} + +.keyword { + color: #d946ef; +} + +.brace { + color: var(--ifm-color-emphasis-700); +} + +.name { + color: #06b6d4; +} + +.string { + color: #10b981; +} + +.semicolon { + color: var(--ifm-color-emphasis-600); +} + +[data-theme='dark'] .packageImport { + border-color: #1e293b; + background: #0f172a; +} + +[data-theme='dark'] .label { + color: #64748b; +} + +[data-theme='dark'] .copyButton { + border-color: #334155; + color: #94a3b8; +} + +[data-theme='dark'] .copyButton:hover { + background: #334155; + color: #ffffff; +} + +@media (max-width: 768px) { + .packageImport { + border-radius: 0.375rem; + flex-wrap: wrap; + } + + .label { + width: 100%; + margin-bottom: -0.25rem; + } + + .code { + width: 100%; + } + + .copyButton { + margin-left: auto; + } +} diff --git a/website/src/components/navigation/GithubStarsNavbarItem/index.js b/website/src/components/navigation/GithubStarsNavbarItem/index.js deleted file mode 100644 index f10a0f5d..00000000 --- a/website/src/components/navigation/GithubStarsNavbarItem/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; -import {useGithubStarsCount} from '@site/src/hooks/useGithubStarsCount'; -import styles from './styles.module.css'; - -function formatStarCount(n) { - if (typeof n !== 'number' || !Number.isFinite(n)) return null; - if (n < 10000) return n.toLocaleString(); - if (n < 1_000_000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k`; - return `${(n / 1_000_000).toFixed(1)}M`; -} - -function StarGlyph({className}) { - return ( - - ); -} - -/** - * Navbar item: GitHub repo link with live star count (GitHub REST API). - * Use in docusaurus.config.js: { type: 'custom-githubStars', position: 'right' }. - */ -export default function GithubStarsNavbarItem({ - mobile = false, - position: _position, - owner = 'Perfect-Abstractions', - repo = 'Compose', - className, -}) { - const href = `https://github.com/${owner}/${repo}`; - const {count, isLoading} = useGithubStarsCount({owner, repo}); - - const label = ( - <> - - - - {isLoading ? '…' : formatStarCount(count) ?? '—'} - - - GitHub - - ); - - const link = ( - - ); - - if (mobile) { - return
  • {link}
    • ; - } - - return link; -} diff --git a/website/src/components/navigation/GithubStarsNavbarItem/styles.module.css b/website/src/components/navigation/GithubStarsNavbarItem/styles.module.css deleted file mode 100644 index b30eab31..00000000 --- a/website/src/components/navigation/GithubStarsNavbarItem/styles.module.css +++ /dev/null @@ -1,115 +0,0 @@ -.link { - display: inline-flex; - align-items: center; - gap: 0.4rem; - transition: - transform 160ms cubic-bezier(0.23, 1, 0.32, 1), - color 160ms ease; -} - -.link:active { - transform: scale(0.97); -} - -@media (prefers-reduced-motion: reduce) { - .link { - transition: color 160ms ease; - } - - .link:active { - transform: none; - } - - .badge, - .star { - transition: none; - } -} - -.badge { - display: inline-flex; - align-items: center; - gap: 0.3rem; - margin-right: 0.5rem; - padding: 0.12rem 0.45rem 0.12rem 0.38rem; - border-radius: 9999px; - font-size: 0.8rem; - font-weight: 600; - font-variant-numeric: tabular-nums; - line-height: 1.2; - color: #a16207; - background: linear-gradient( - 165deg, - rgba(253, 224, 71, 0.35) 0%, - rgba(251, 191, 36, 0.18) 45%, - rgba(245, 158, 11, 0.12) 100% - ); - border: 1px solid rgba(217, 119, 6, 0.35); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; - transition: - border-color 180ms cubic-bezier(0.23, 1, 0.32, 1), - background 180ms cubic-bezier(0.23, 1, 0.32, 1), - box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1); -} - -[data-theme='dark'] .badge { - color: #fde047; - background: linear-gradient( - 165deg, - rgba(253, 224, 71, 0.14) 0%, - rgba(245, 158, 11, 0.08) 50%, - rgba(180, 83, 9, 0.12) 100% - ); - border-color: rgba(250, 204, 21, 0.35); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; -} - -.star { - flex-shrink: 0; - width: 14px; - height: 14px; - color: #ca8a04; - filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.35)); - transition: color 180ms ease, filter 180ms ease; -} - -[data-theme='dark'] .star { - color: #facc15; - filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.25)); -} - -.count { - min-width: 1ch; -} - -@media (hover: hover) and (pointer: fine) { - .link:hover .badge { - border-color: rgba(217, 119, 6, 0.55); - background: linear-gradient( - 165deg, - rgba(253, 224, 71, 0.45) 0%, - rgba(251, 191, 36, 0.26) 45%, - rgba(245, 158, 11, 0.18) 100% - ); - } - - .link:hover .star { - color: #b45309; - filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.5)); - } - - [data-theme='dark'] .link:hover .badge { - border-color: rgba(253, 224, 71, 0.5); - background: linear-gradient( - 165deg, - rgba(253, 224, 71, 0.22) 0%, - rgba(245, 158, 11, 0.12) 50%, - rgba(180, 83, 9, 0.18) 100% - ); - } - - [data-theme='dark'] .link:hover .star { - color: #fef08a; - filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.35)); - } -} diff --git a/website/src/components/navigation/IconNavbarItem/index.js b/website/src/components/navigation/IconNavbarItem/index.js new file mode 100644 index 00000000..d9b15bed --- /dev/null +++ b/website/src/components/navigation/IconNavbarItem/index.js @@ -0,0 +1,44 @@ +import React from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; + +export default function IconNavbarItem({ + mobile = false, + position: _position, + href, + iconSrc, + label, + className, +}) { + const icon = ( + + ); + + const link = ( + + {icon} + + ); + + if (mobile) { + return
  • {link}
    • ; + } + + return link; +} diff --git a/website/src/components/navigation/IconNavbarItem/styles.module.css b/website/src/components/navigation/IconNavbarItem/styles.module.css new file mode 100644 index 00000000..ad950938 --- /dev/null +++ b/website/src/components/navigation/IconNavbarItem/styles.module.css @@ -0,0 +1,35 @@ +.link { + display: inline-flex; + align-items: center; + transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); +} + +.link:active { + transform: scale(0.97); +} + +@media (prefers-reduced-motion: reduce) { + .link { + transition: none; + } + + .link:active { + transform: none; + } +} + +.icon { + filter: brightness(0); + opacity: 0.65; + transition: opacity 160ms ease; +} + +[data-theme='dark'] .icon { + filter: brightness(0) invert(1); +} + +@media (hover: hover) and (pointer: fine) { + .link:hover .icon { + opacity: 1; + } +} diff --git a/website/src/theme/NavbarItem/ComponentTypes.js b/website/src/theme/NavbarItem/ComponentTypes.js index 5592fe9f..ba3615ee 100644 --- a/website/src/theme/NavbarItem/ComponentTypes.js +++ b/website/src/theme/NavbarItem/ComponentTypes.js @@ -1,7 +1,7 @@ import baseComponentTypes from '@docusaurus/theme-classic/lib/theme/NavbarItem/ComponentTypes'; -import GithubStarsNavbarItem from '@site/src/components/navigation/GithubStarsNavbarItem'; +import IconNavbarItem from '@site/src/components/navigation/IconNavbarItem'; export default { ...baseComponentTypes, - 'custom-githubStars': GithubStarsNavbarItem, + 'custom-icon': IconNavbarItem, }; diff --git a/website/src/theme/Root.js b/website/src/theme/Root.js index 111a8ce9..2111760e 100644 --- a/website/src/theme/Root.js +++ b/website/src/theme/Root.js @@ -5,7 +5,6 @@ import React from 'react'; import { Toaster } from 'react-hot-toast'; import NavbarEnhancements from '@site/src/components/navigation/NavbarEnhancements'; -import CookieConsentBanner from '@site/src/components/consent/CookieConsentBanner'; export default function Root({children}) { return ( @@ -79,7 +78,6 @@ export default function Root({children}) { }, }} /> - {children} ); diff --git a/website/static/icons/discord-white.svg b/website/static/icons/discord-white.svg new file mode 100644 index 00000000..7f4360c2 --- /dev/null +++ b/website/static/icons/discord-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/icons/github-white.svg b/website/static/icons/github-white.svg new file mode 100644 index 00000000..83841fa0 --- /dev/null +++ b/website/static/icons/github-white.svg @@ -0,0 +1,3 @@ + + +