mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Anthony Lio
5918a69398
## What kind of change does this PR introduce? docs ui polish for the prompt panel on the docs homepage and in the quickstarts ## What is the current behavior? agent prompt renders as one run on paragraph steps read as "1. ... 2. ... 3. ..." inline making it hard to read ## What is the new behavior? - sets prompt bodies as markdown for easier readability - adds long prompts collapse - removes panel tab icons - uses panel code block ui - makes active tab has an underline on first paint `home` | state | preview | | -------|------| | before | <img width="709" height="344" alt="image" src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9" /> | | after | <img width="709" height="344" alt="image" src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9" /> | `quickstart` | state | preview | | -------|------| | before | <img width="862" height="344" alt="image" src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de" /> | | after | <img width="862" height="344" alt="image" src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Prompts now support Markdown formatting, inline code chips, expandable content, and improved hover-reveal behavior. * Code-copy controls support customizable labels and clearer screen-reader announcements. * Prompt tabs and panels have updated styling, spacing, and active-content handling. * **UI Improvements** * Setup and agent prompts now use consistent Markdown-rendered presentation. * Prompt headings now display “Agent Prompt.” * Home page setup code blocks use a more compact layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Prompt,
|
|
PromptContent,
|
|
PromptCopy,
|
|
PromptMarkdown,
|
|
PromptPanel,
|
|
PromptTitle,
|
|
} from '~/features/ui/PromptPanel'
|
|
import { isFeatureEnabled } from 'common'
|
|
import { type ReactNode } from 'react'
|
|
|
|
import { getCustomContent } from '../lib/custom-content/getCustomContent'
|
|
import DocsCoverLogo from './DocsCoverLogo'
|
|
import { setupCommands, setupPrompt } from './HomePageCover.constants'
|
|
|
|
const fullGettingStartedEnabled = isFeatureEnabled('docs:full_getting_started')
|
|
|
|
function SetupPrompt({ cliCode }: { cliCode: ReactNode }) {
|
|
return (
|
|
<PromptPanel>
|
|
<Prompt value="prompt" expandable>
|
|
<PromptTitle>Agent Prompt</PromptTitle>
|
|
<PromptCopy>{setupPrompt}</PromptCopy>
|
|
<PromptContent>
|
|
<PromptMarkdown>{setupPrompt}</PromptMarkdown>
|
|
</PromptContent>
|
|
</Prompt>
|
|
<Prompt value="cli">
|
|
<PromptTitle>CLI</PromptTitle>
|
|
<PromptCopy>{setupCommands}</PromptCopy>
|
|
<PromptContent shimmer={false}>{cliCode}</PromptContent>
|
|
</Prompt>
|
|
</PromptPanel>
|
|
)
|
|
}
|
|
|
|
const HomePageCover = ({ title, cliCode }: { title: string; cliCode: ReactNode }) => {
|
|
const { homepageHeading } = getCustomContent(['homepage:heading'])
|
|
|
|
return (
|
|
<div className="w-full border-b bg-muted/10">
|
|
<div className="mx-auto max-w-7xl px-6 py-16">
|
|
<div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:gap-12 xl:gap-16">
|
|
<div className="flex w-full min-w-0 flex-1 items-center gap-4 sm:gap-8 mt-10">
|
|
<DocsCoverLogo aria-hidden="true" className="w-12 shrink-0 sm:w-[60px] md:w-[100px]" />
|
|
<div className="flex min-w-0 flex-col">
|
|
<h1 className="m-0 text-3xl text-foreground sm:text-4xl">
|
|
{homepageHeading || title}
|
|
</h1>
|
|
<p className="m-0 mt-2 text-base leading-7 text-foreground-light sm:mt-3 sm:text-xl">
|
|
Learn how to get up and running with Supabase through tutorials, APIs and platform
|
|
resources.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{fullGettingStartedEnabled && (
|
|
<div className="w-full lg:max-w-[478px] lg:shrink-0">
|
|
<SetupPrompt cliCode={cliCode} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HomePageCover
|