Repository navigation
docs: graduate Edit and promote Highlights #1180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
apps/docs/app/(diffs)/_home/HighlightsBanner.module.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| .banner { | ||
| --highlights-banner-surface: var(--background); | ||
|
|
||
| display: grid; | ||
| min-width: 0; | ||
| padding: calc(var(--spacing) * 6); | ||
| padding-bottom: 0; | ||
| margin-bottom: calc(var(--spacing) * 16); | ||
| overflow: hidden; | ||
| color: var(--color-foreground); | ||
| border-radius: var(--radius-xl); | ||
| box-shadow: | ||
| var(--tw-inset-shadow), var(--tw-inset-ring-shadow), | ||
| var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--shadow-sm); | ||
| gap: calc(var(--spacing) * 8); | ||
| } | ||
|
|
||
| /* Match the shared card's translucent dark-page surface after compositing it. */ | ||
| /* stylelint-disable-next-line selector-pseudo-class-no-unknown */ | ||
| :global(:root.dark) .banner { | ||
| --highlights-banner-surface: color-mix( | ||
| in oklch, | ||
| var(--muted) 50%, | ||
| var(--background) | ||
| ); | ||
| } | ||
|
|
||
| @media (width >= 640px) { | ||
| .banner { | ||
| padding: calc(var(--spacing) * 8); | ||
| padding-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (width >= 768px) { | ||
| .banner { | ||
| grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); | ||
| align-items: center; | ||
| gap: calc(var(--spacing) * 6); | ||
| } | ||
| } | ||
|
|
||
| @media (width >= 1024px) { | ||
| .banner { | ||
| grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); | ||
| padding-top: calc(var(--spacing) * 12); | ||
| padding-inline: calc(var(--spacing) * 12); | ||
| gap: calc(var(--spacing) * 10); | ||
| } | ||
| } | ||
|
|
||
| .benchmarkStage { | ||
| position: relative; | ||
| min-width: 0; | ||
| padding: 0.5rem; | ||
| overflow: hidden; | ||
| border-radius: var(--radius); | ||
| } | ||
|
|
||
| .benchmarkCard { | ||
| position: relative; | ||
| z-index: 1; | ||
| inline-size: 100%; | ||
| max-inline-size: 33.75rem; | ||
| margin-inline: auto; | ||
| background-color: color-mix(in oklch, var(--background) 82%, transparent); | ||
| box-shadow: | ||
| 0 24px 48px -24px rgb(0 0 0 / 95%), | ||
| inset 0 1px 0 rgb(255 255 255 / 5%); | ||
| } | ||
|
|
||
| .benchmarkStage::after { | ||
| position: absolute; | ||
| z-index: 2; | ||
| inset-inline: 0.5rem; | ||
| bottom: 0; | ||
| block-size: 10rem; | ||
| pointer-events: none; | ||
| content: ''; | ||
| background: linear-gradient( | ||
| to bottom, | ||
| transparent, | ||
| color-mix(in oklch, var(--highlights-banner-surface) 55%, transparent) 58%, | ||
| var(--highlights-banner-surface) 90% | ||
| ); | ||
| -webkit-backdrop-filter: blur(0.375rem); | ||
| backdrop-filter: blur(0.375rem); | ||
| -webkit-mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent, | ||
| rgb(0 0 0 / 35%) 38%, | ||
| black 78% | ||
| ); | ||
| mask-image: linear-gradient( | ||
| to bottom, | ||
| transparent, | ||
| rgb(0 0 0 / 35%) 38%, | ||
| black 78% | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { IconArrowRight } from '@pierre/icons'; | ||
| import Link from 'next/link'; | ||
|
|
||
| import { BenchmarkBar } from '../highlights/BenchmarkBar'; | ||
| import cardStyles from '../highlights/HighlightsBenchmarkCard.module.css'; | ||
| import rainbowStyles from '../highlights/HighlightsRainbow.module.css'; | ||
| import { | ||
| HIGHLIGHTS_LARGE_FILE_RESULTS, | ||
| HIGHLIGHTS_THROUGHPUT_MAXIMUM, | ||
| } from '../highlights/performanceBenchmarkData'; | ||
| import styles from './HighlightsBanner.module.css'; | ||
| import { Button } from '@/components/ui/button'; | ||
|
|
||
| export function HighlightsBanner() { | ||
| return ( | ||
| <div className={`${cardStyles.card} ${styles.banner} dark`}> | ||
| <div className="min-w-0 md:pb-12"> | ||
| <p className="mb-1 text-xl leading-tight font-medium tracking-tight sm:text-2xl md:text-xl lg:text-2xl"> | ||
| Introducing | ||
| </p> | ||
| <h2 className="text-4xl leading-none font-semibold tracking-tight sm:text-5xl md:text-4xl lg:text-5xl"> | ||
| <span className="relative block w-fit"> | ||
| <span | ||
| aria-hidden="true" | ||
| className={`${rainbowStyles.heroRainbow} pointer-events-none absolute inset-0 bg-clip-text text-transparent opacity-20 blur-[16px] select-none dark:opacity-60`} | ||
| > | ||
| Highlights | ||
| </span> | ||
| <span | ||
| className={`${rainbowStyles.heroRainbow} relative bg-clip-text text-transparent`} | ||
| > | ||
| Highlights | ||
| </span> | ||
| </span> | ||
| </h2> | ||
| <p className="text-muted-foreground text-md mt-2 mb-0 max-w-3xl text-pretty lg:text-lg"> | ||
| Super-fast syntax highlighting for code and diffs, written from the | ||
| ground up to be nearly 300× faster than Shiki. Now in beta. | ||
| </p> | ||
| <Button | ||
| asChild | ||
| size="lg" | ||
| className="group text-md mt-5 h-10 px-4 md:h-12 md:px-6 lg:text-lg" | ||
| variant="inverse" | ||
| > | ||
| <Link href="/highlights"> | ||
| Get started | ||
| <IconArrowRight className="-mr-1 transition-transform duration-150 ease-out group-hover:translate-x-0.5 motion-reduce:transform-none motion-reduce:transition-none" /> | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <CompactPerformancePreview /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // Keeps the benchmark recognizable while hiding duplicate chart data from | ||
| // assistive technology; the promo copy and button carry the actionable content. | ||
| function CompactPerformancePreview() { | ||
| return ( | ||
| <div aria-hidden="true" className={styles.benchmarkStage}> | ||
| <figure | ||
| className={`${cardStyles.card} ${styles.benchmarkCard} dark text-foreground -mb-4 min-w-0 rounded-lg border border-white/10 p-4 sm:p-5 md:-mb-6`} | ||
| > | ||
| <figcaption className="mb-4"> | ||
| <h3 className="text-sm font-semibold tracking-tight sm:text-base"> | ||
| Super-fast HTML generation | ||
| </h3> | ||
| <p className="text-muted-foreground mt-1 mb-0 max-w-md text-xs leading-5 text-pretty"> | ||
| Highlights generates HTML at up to 294 times faster than Shiki’s | ||
| throughput across these fixtures. | ||
| </p> | ||
| </figcaption> | ||
| <dl className="space-y-3"> | ||
| {HIGHLIGHTS_LARGE_FILE_RESULTS.map(({ language, size, speedup }) => ( | ||
| <div | ||
| key={language} | ||
| className="grid grid-cols-[minmax(0,1fr)_3.5rem] items-center gap-x-3 gap-y-1" | ||
| > | ||
| <dt className="text-muted-foreground col-start-1 row-start-2 flex items-baseline gap-1.5 text-xs"> | ||
| <span className="text-foreground font-medium">{language}</span> | ||
| <span>{size}</span> | ||
| </dt> | ||
| <dd className="contents"> | ||
| <div className="col-start-1 row-start-1"> | ||
| <BenchmarkBar | ||
| value={speedup} | ||
| maximum={HIGHLIGHTS_THROUGHPUT_MAXIMUM} | ||
| highlighted | ||
| /> | ||
| </div> | ||
| <span className="tabular-num col-start-2 row-span-2 row-start-1 -mt-1.75 self-start text-right text-lg font-semibold"> | ||
| {speedup}× | ||
| </span> | ||
| </dd> | ||
| </div> | ||
| ))} | ||
| </dl> | ||
| </figure> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
apps/docs/app/(diffs)/highlights/performanceBenchmarkData.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| // Published string-I/O results from packages/highlights/benchmark/README.md, | ||
| // recorded September 25, 2026. Keep the reported ratios rather than deriving | ||
| // them from the table's independently rounded throughput values. | ||
| export const HIGHLIGHTS_LARGE_FILE_RESULTS = [ | ||
| { | ||
| language: 'TypeScript', | ||
| size: '517 KiB', | ||
| speedup: 294, | ||
| }, | ||
| { | ||
| language: 'HTML', | ||
| size: '474 KiB', | ||
| speedup: 237, | ||
| }, | ||
| { | ||
| language: 'CSS', | ||
| size: '379 KiB', | ||
| speedup: 248, | ||
| }, | ||
| { | ||
| language: 'JSONC', | ||
| size: '292 KiB', | ||
| speedup: 148, | ||
| }, | ||
| ] as const; | ||
|
|
||
| export const HIGHLIGHTS_THROUGHPUT_MAXIMUM = 300; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On
/docs, this heading is still matched byBETA_DOC_HEADING_IDSinapps/docs/lib/mdx.tsx, which continues to append a Beta badge to the heading;DocsSidebardetects that badge and mirrors it in navigation. As a result, removing this warning and the other badges does not actually graduate Edit across the docs UI, so removeedit-modefrom that set as part of this change.Useful? React with 👍 / 👎.