mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Charis
c2fe11850d
Add the ability to embed code samples from GitHub into tutorials, so we can have a single source of truth for the source code. Introduces the <$CodeSample /> syntax, which is a special syntax and not a real React component (see the directives/README.md for why on earth I did it this way -- in this specific case, CodeHike adjusts the MDX syntax tree before it gets compiled, and we need to adjust it ourselves before CodeHike sees it, so we need to get down to the level of manipulating the AST in order to make this work with CodeHike). Adjusted one of the example tutorials to use this new feature as a test.
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState, type PropsWithChildren } from 'react'
|
|
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
|
|
|
|
export function CodeSampleWrapper({
|
|
children,
|
|
/**
|
|
* A GitHub URL to the source code file.
|
|
*/
|
|
source: _source,
|
|
}: PropsWithChildren<{ source: string | URL | (string | URL)[] }>) {
|
|
const source = Array.isArray(_source) ? _source : [_source]
|
|
|
|
if (source.length === 1) {
|
|
return <SingleSource source={source[0]}>{children}</SingleSource>
|
|
}
|
|
|
|
if (source.length > 1) {
|
|
return <MultipleSources sources={source}>{children}</MultipleSources>
|
|
}
|
|
|
|
return <>{children}</>
|
|
}
|
|
|
|
function MultipleSources({ children, sources }: PropsWithChildren<{ sources: (string | URL)[] }>) {
|
|
return (
|
|
<>
|
|
{children}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="block -mt-4 mb-4 ml-auto text-foreground-lighter text-sm focus-visible:outline-none focus-visible:underline">
|
|
View sources
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{sources.map((source) => (
|
|
<DropdownMenuItem
|
|
key={source.toString()}
|
|
onSelect={() => window.open(source.toString(), '_blank', 'noopener noreferrer')}
|
|
>
|
|
...{source.toString().split('/').slice(-2).join('/')}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function SingleSource({ children, source }: PropsWithChildren<{ source: string | URL }>) {
|
|
return (
|
|
<>
|
|
{children}
|
|
<Link
|
|
href={source.toString()}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block -mt-4 mb-4 text-right no-underline text-foreground-lighter text-sm"
|
|
>
|
|
View source
|
|
</Link>
|
|
</>
|
|
)
|
|
}
|