{title}
+ {description &&{description}
} + { + topics.length > 0 && ( +
+ {topics.map((topic) => {topic} )}
+
+ )
+ }
+ Supabase Presents
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index 1f45ce23f2e3d..8464a96d02ed3 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -81,7 +81,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => { return ( <> - {
style={{ transform: 'translate3d(0,0,999px)' }}
data-nav-transparent={isTransparent ? '' : undefined}
>
+ {isStateOfStartupsPage &&
Date: Thu, 3 Sep 2026 11:59:36 +0530
Subject: [PATCH 2/7] fix(ui-patterns): prevent duplicate horizontal scrollbar
in MultipleCodeBlock (#49940)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Bug fix
## What is the current behavior?
Fixes #49903
In `ConnectSheet` (e.g., Next.js -> Step 2 "Add files"), multi-file
instructions render using `MultipleCodeBlock`.
The `TabsContent` container in
`packages/ui-patterns/src/MultipleCodeBlock/index.tsx` was styled with
`className="... overflow-scroll ..."`.
The CSS property `overflow-scroll` forces both horizontal and vertical
scrollbar tracks to be rendered regardless of whether horizontal content
overflows.
Because the child `` already manages its own horizontal
overflow (`overflow-auto`) and fills the container width, `TabsContent`
displayed a frozen/disabled horizontal scrollbar at the top level. When
scrolling down vertically to the bottom of the code snippet,
``'s real horizontal scrollbar came into view, resulting in
inconsistent and duplicate scrollbars.
## What is the new behavior?
- Replaced `overflow-scroll` with `overflow-y-auto` on `TabsContent` in
`MultipleCodeBlock`.
- `TabsContent` cleanly scrolls vertically when content height exceeds
`max-h-72`.
- Eliminates the duplicate/disabled top-level horizontal scrollbar.
- Horizontal code scrolling is cleanly delegated to `` only
when lines exceed the available width.
- Added a unit test in
`packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx` verifying
`TabsContent` applies `overflow-y-auto` rather than `overflow-scroll`.
## Additional context
Verified locally:
- `vitest run src/MultipleCodeBlock/index.test.tsx` (all tests passing)
- `tsc --noEmit` in `packages/ui-patterns` (0 type errors)
- `prettier --check` against modified files (passed)
## Summary by CodeRabbit
* **Bug Fixes**
* Improved code block scrolling to use vertical scrolling only.
* Prevented unnecessary horizontal scrollbars in multi-file code
examples.
* Added coverage to verify the updated scrolling behavior.
---
.../src/MultipleCodeBlock/index.test.tsx | 18 ++++++++++++++++++
.../src/MultipleCodeBlock/index.tsx | 2 +-
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx b/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
index fa9025fa192d4..a4d272671d5c7 100644
--- a/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
+++ b/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
@@ -35,4 +35,22 @@ describe('MultipleCodeBlock', () => {
expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('.env')
expect(screen.getByText('VITE_SUPABASE_URL=https://react.example')).toBeVisible()
})
+
+ it('renders tab content with vertical auto-scrolling instead of forced overflow scrollbars', () => {
+ const { container } = render(
+
Date: Thu, 3 Sep 2026 10:53:37 +0200
Subject: [PATCH 3/7] feat: Add Guides layout support, schema, and sample page
(#49930)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
In this PR we cover the basics for a simple guide page:
- Set up _guides_ content collection, with schema definition.
- Specific guides layout to be applied to all `content/guides` files.
- Added support for multiple topics display on page.
- Small fix to prevent menu navigation flash on theme change.
_To test_
- Open the `kb` preview
- Go to `/kb/guides/sample-guide` ([link
here](https://kb-git-jeremiasmenichelli-docs-1350-build-guide-df55d1-supabase.vercel.app/kb/guides/sample-guide))
- Check the main content appears correctly
_Sample page_
## Summary by CodeRabbit
- **New Features**
- Added a documentation guides section with Markdown-based guide pages.
- Guides now support titles, descriptions, topic badges, GitHub
discussion links, images, code blocks, tables, lists, and other rich
Markdown content.
- Added page-specific titles and meta descriptions for improved
navigation and sharing.
- **Style**
- Updated navigation trigger styling for a transparent appearance.
- Improved spacing and presentation of code blocks within guide content.
---
apps/kb/package.json | 1 +
apps/kb/src/components/Nav.tsx | 2 +-
apps/kb/src/content.config.ts | 18 +++++
apps/kb/src/content/guides/sample-guide.md | 81 ++++++++++++++++++++++
apps/kb/src/layouts/GuideLayout.astro | 39 +++++++++++
apps/kb/src/layouts/Layout.astro | 10 ++-
apps/kb/src/pages/guides/[...slug].astro | 21 ++++++
apps/kb/src/pages/index.astro | 2 +-
apps/kb/src/styles/globals.css | 6 ++
pnpm-lock.yaml | 52 ++++++--------
10 files changed, 198 insertions(+), 34 deletions(-)
create mode 100644 apps/kb/src/content.config.ts
create mode 100644 apps/kb/src/content/guides/sample-guide.md
create mode 100644 apps/kb/src/layouts/GuideLayout.astro
create mode 100644 apps/kb/src/pages/guides/[...slug].astro
diff --git a/apps/kb/package.json b/apps/kb/package.json
index 109857da3d7f4..4e440f7e8bbe1 100644
--- a/apps/kb/package.json
+++ b/apps/kb/package.json
@@ -14,6 +14,7 @@
"dependencies": {
"@astrojs/react": "^6.0.4",
"astro": "^7.2.6",
+ "lucide-react": "*",
"react": "catalog:",
"react-dom": "catalog:",
"ui": "workspace:*"
diff --git a/apps/kb/src/components/Nav.tsx b/apps/kb/src/components/Nav.tsx
index 268a5953a1e87..d28f765a059c4 100644
--- a/apps/kb/src/components/Nav.tsx
+++ b/apps/kb/src/components/Nav.tsx
@@ -30,7 +30,7 @@ const menus = [
]
const triggerClass =
- 'h-(--header-height) p-2 border-transparent font-normal rounded-none text-foreground-light hover:text-foreground data-open:text-foreground! border-0 focus-ring focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none!'
+ 'h-(--header-height) p-2 bg-transparent border-transparent font-normal rounded-none text-foreground-light hover:text-foreground data-open:text-foreground! border-0 focus-ring focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none!'
// docs gates this at `md:absolute` (its own base component class) because its
// nav is hidden entirely below `lg` in favor of a separate mobile menu. kb
// doesn't have that split — the nav is always visible — so `absolute` is
diff --git a/apps/kb/src/content.config.ts b/apps/kb/src/content.config.ts
new file mode 100644
index 0000000000000..92612a16b7949
--- /dev/null
+++ b/apps/kb/src/content.config.ts
@@ -0,0 +1,18 @@
+import { defineCollection } from 'astro:content'
+import { glob } from 'astro/loaders'
+import { z } from 'astro/zod'
+
+// Every entry here is rendered through GuideLayout by
+// src/pages/guides/[...slug].astro — dropping a new file in
+// src/content/guides doesn't need any per-file layout wiring.
+const guides = defineCollection({
+ loader: glob({ pattern: '**/*.md', base: './src/content/guides' }),
+ schema: z.object({
+ title: z.string(),
+ description: z.string().optional(),
+ topics: z.array(z.string()).optional(),
+ github_url: z.string().optional(),
+ }),
+})
+
+export const collections = { guides }
diff --git a/apps/kb/src/content/guides/sample-guide.md b/apps/kb/src/content/guides/sample-guide.md
new file mode 100644
index 0000000000000..6a69b4987bc2c
--- /dev/null
+++ b/apps/kb/src/content/guides/sample-guide.md
@@ -0,0 +1,81 @@
+---
+title: 'Markdown elements sample'
+description: 'A lorem ipsum sample guide exercising every base Markdown element supported by the guide layout.'
+topics: ['example', 'markdown']
+github_url: 'https://github.com/supabase/supabase/discussions/0000000'
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+## Heading level 2
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+eu fugiat nulla pariatur. This paragraph mixes **bold text**, _italic text_,
+**_bold italic text_**, ~~strikethrough text~~, and `inline code`.
+
+### Heading level 3
+
+Here's a [link to the Astro docs](https://docs.astro.build/en/basics/layouts/),
+followed by an unordered list with a nested list:
+
+- Excepteur sint occaecat cupidatat non proident
+- Sunt in culpa qui officia deserunt mollit anim id est laborum
+ - Nested item one
+ - Nested item two
+- Curabitur blandit tempus porttitor
+
+#### Heading level 4
+
+And an ordered list with a nested list:
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+ 1. Nested step one
+ 2. Nested step two
+3. Sed do eiusmod tempor incididunt
+
+##### Heading level 5
+
+> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+> consectetur, adipisci velit.
+>
+> > Nested blockquote: at vero eos et accusamus et iusto odio dignissimos.
+
+###### Heading level 6
+
+A fenced code block with a language tag:
+
+```js
+function add(a, b) {
+ return a + b
+}
+
+console.log(add(2, 3))
+```
+
+And another in a different language:
+
+```bash
+npm install
+npm run dev
+```
+
+A table:
+
+| Element | Supported | Notes |
+| -------- | --------- | ---------------------------- |
+| Headings | Yes | h2 through h6 |
+| Tables | Yes | via GitHub-flavored Markdown |
+| Images | Yes | see below |
+
+An image:
+
+
+
+---
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+veritatis et quasi architecto beatae vitae dicta sunt explicabo.
diff --git a/apps/kb/src/layouts/GuideLayout.astro b/apps/kb/src/layouts/GuideLayout.astro
new file mode 100644
index 0000000000000..49b82d04b1cf3
--- /dev/null
+++ b/apps/kb/src/layouts/GuideLayout.astro
@@ -0,0 +1,39 @@
+---
+import { Github } from 'lucide-react'
+import { Badge } from 'ui'
+
+import Layout from './Layout.astro'
+
+interface Props {
+ title: string
+ description?: string
+ topics?: string[]
+ github_url?: string
+}
+
+const { title, description, topics = [], github_url } = Astro.props
+---
+
+
+
+
+
diff --git a/apps/kb/src/layouts/Layout.astro b/apps/kb/src/layouts/Layout.astro
index fc04f9e14e599..b49bd21652003 100644
--- a/apps/kb/src/layouts/Layout.astro
+++ b/apps/kb/src/layouts/Layout.astro
@@ -1,6 +1,13 @@
---
import { Header } from '../components/Header'
import '../styles/globals.css'
+
+interface Props {
+ title: string
+ description?: string
+}
+
+const { title, description } = Astro.props
---
@@ -9,6 +16,7 @@ import '../styles/globals.css'
+ {description && }