| title | Available Providers | ||||
|---|---|---|---|---|---|
| hide_table_of_contents | true | ||||
| keywords |
|
||||
| description | The StackQL provider catalog: every cloud and SaaS provider you can query and manage with SQL, grouped by category, each linking to its own reference site. | ||||
| image | /img/stackql-featured-image.png |
import DocCardList from '@theme/DocCardList'; import Heading from '@theme/Heading'; import React from 'react';
{/* Provider catalog: src/configs/providers.json is the single source of truth for the tiles below, the navbar Providers dropdown and the /providers/ and /registry/ redirects. Add providers there, not here. */} import { PROVIDER_CATEGORIES } from '@site/src/lib/providers';
{/* Custom TOC Component - Now generated from data */} export const CustomTOC = () => { return (
-
{PROVIDER_CATEGORIES.map(category => (
-
<a href={
#${category.id}}>{category.name}-
{category.providers.map(provider => (
- {provider.name} ))}
))}
{/* Main content component using the data map */} export const ProviderContent = () => { return ( <>
don't see yours here? reach out
{PROVIDER_CATEGORIES.map(category => (
<div key={category.id}>
{/* theme Heading, not a bare h2: it registers the id with the
broken-anchor checker (the navbar Providers menu links to
/providers#<category id> from every page) and offsets the
anchor below the sticky navbar */}
<Heading as="h2" id={category.id}>{category.name}</Heading>
<DocCardList
items={category.providers.map(provider => ({
type: 'link',
label: provider.name,
href: provider.path,
customProps: { icon: provider.icon, invertOnDark: provider.invertOnDark }
}))}
/>
</div>
))}
</>
); };