mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
Joshen Lim
c3f7318dbc
## Context Just a couple of minor UI nudges as I came across on the edge functions page - Added TimestampInfo for hover card + used `text-sm` for font size + reduce width to match content size - Before: <img width="393" height="271" alt="image" src="https://github.com/user-attachments/assets/3db351fd-80e8-47a9-b4e9-dff8613163ad" /> - After: <img width="461" height="233" alt="image" src="https://github.com/user-attachments/assets/d4ac9edb-58fc-4820-b04f-c7753baf9ef5" /> - Use `text-code-inline` in here + avoid `text-brand` in text (use `text-foreground`) + added some spacing between the 2 sentences - Before: <img width="707" height="153" alt="image" src="https://github.com/user-attachments/assets/7d6b3acc-8bc6-454b-92ed-ab43227a9e07" /> - After: <img width="710" height="169" alt="image" src="https://github.com/user-attachments/assets/b00fbf07-a6a3-4476-b417-d02225f02ce9" /> - Invoke code snippet adjust copy button placement + opt to not wrap lines (was awkward esp when there's no line numbers) - Before: <img width="730" height="278" alt="image" src="https://github.com/user-attachments/assets/d3c646d9-c893-44cc-8c25-86fc0ddac050" /> - After: <img width="725" height="223" alt="image" src="https://github.com/user-attachments/assets/f75c0a28-04e3-48c5-903f-25e9bbe2d879" /> - Use `text-brand` consistently here instead of `text-brand-600` - Before: <img width="732" height="315" alt="image" src="https://github.com/user-attachments/assets/48cdf54f-43e1-44ef-b09b-66d6db351a5b" /> - After: <img width="736" height="322" alt="image" src="https://github.com/user-attachments/assets/3f176ccc-ec35-4abb-8491-d9a498933a26" />
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
interface InvocationTab {
|
|
id: string
|
|
label: string
|
|
language: 'bash' | 'js' | 'ts' | 'dart' | 'python'
|
|
hideLineNumbers?: boolean
|
|
code: (props: {
|
|
showKey: boolean
|
|
functionUrl: string
|
|
functionName: string
|
|
apiKey: string
|
|
}) => string
|
|
}
|
|
|
|
export const INVOCATION_TABS: InvocationTab[] = [
|
|
{
|
|
id: 'curl',
|
|
label: 'cURL',
|
|
language: 'bash',
|
|
code: ({ showKey, functionUrl, apiKey }) => {
|
|
const obfuscatedName = apiKey.includes('publishable')
|
|
? 'SUPABASE_PUBLISHABLE_DEFAULT_KEY'
|
|
: 'SUPABASE_ANON_KEY'
|
|
const keyValue = showKey ? apiKey : obfuscatedName
|
|
|
|
return `curl -L -X POST '${functionUrl}' \\
|
|
-H 'Authorization: Bearer ${keyValue}' \\${apiKey.includes('publishable') ? `\n -H 'apikey: ${keyValue}' \\` : ''}
|
|
-H 'Content-Type: application/json' \\
|
|
--data '{"name":"Functions"}'`
|
|
},
|
|
},
|
|
{
|
|
id: 'supabase-js',
|
|
label: 'JavaScript',
|
|
language: 'js',
|
|
hideLineNumbers: true,
|
|
code: ({ functionName }) => `import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)
|
|
const { data, error } = await supabase.functions.invoke('${functionName}', {
|
|
body: { name: 'Functions' },
|
|
})`,
|
|
},
|
|
{
|
|
id: 'swift',
|
|
label: 'Swift',
|
|
language: 'ts',
|
|
hideLineNumbers: true,
|
|
code: ({ functionName }) => `struct Response: Decodable {
|
|
// Expected response definition
|
|
}
|
|
|
|
let response: Response = try await supabase.functions
|
|
.invoke(
|
|
"${functionName}",
|
|
options: FunctionInvokeOptions(
|
|
body: ["name": "Functions"]
|
|
)
|
|
)`,
|
|
},
|
|
{
|
|
id: 'flutter',
|
|
label: 'Flutter',
|
|
language: 'dart',
|
|
hideLineNumbers: true,
|
|
code: ({
|
|
functionName,
|
|
}) => `final res = await supabase.functions.invoke('${functionName}', body: {'name': 'Functions'});
|
|
final data = res.data;`,
|
|
},
|
|
{
|
|
id: 'python',
|
|
label: 'Python',
|
|
language: 'python',
|
|
hideLineNumbers: true,
|
|
code: ({ functionName }) => `response = supabase.functions.invoke(
|
|
"${functionName}",
|
|
invoke_options={"body": {"name": "Functions"}}
|
|
)`,
|
|
},
|
|
]
|
|
|
|
export const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'] as const
|