mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Anthony Lio
45199443c8
## what is the current behavior? admonition icon <> text not optically aligned + rendered differently in docs and the design system _ docs showed admonition text at 15px/28px because the page's prose styles reached inside the component, while the same callout was 13px in the design system _ lists ## what is the new behavior? - the title offset is now conditional. a title and body copy have different line heights, so they need different nudges to sit level with the icon. - fixes list markers and the ordered-list chip alignment inside callouts. - removes `.admonition-content` css that nothing referenced - fixes 5 admonition titles that were not capitalized. | state | preview | | -------|------| | before | <img width="902" height="279" alt="image" src="https://github.com/user-attachments/assets/2fffb183-81e2-4eff-8f0d-8a07649390e8" /> | | after | <img width="902" height="279" alt="image" src="https://github.com/user-attachments/assets/22abe3ed-fd6d-49ac-aa37-4292bca5850a" /> | ## follow ups - better composition: title, description and actions are still props _ a compound api (`Admonition.Title`, `Admonition.Actions`) would remove the `childProps` escape hatch <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Improved capitalization of note and warning titles in the Metabase and Prisma guides for consistency. * Updated the contributing guide’s table of contents to exclude feedback headings. * Improved heading structure for the documentation feedback section. * **UI Improvements** * Refined admonition and alert typography, spacing, list formatting, and ordered-list alignment. * Improved content spacing when titles, descriptions, or icons are present. * Updated action links and buttons for more consistent sizing. * Adjusted alert content styling for a clearer presentation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
81 lines
2.2 KiB
Plaintext
81 lines
2.2 KiB
Plaintext
---
|
|
id: 'metabase'
|
|
title: 'Connecting to Metabase'
|
|
breadcrumb: 'GUI Quickstarts'
|
|
hideToc: true
|
|
---
|
|
|
|
[`Metabase`](https://www.metabase.com/) is an Open Source data visualization tool. You can use it to explore your data stored in Supabase.
|
|
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<StepHikeCompact.Details title="Register">
|
|
|
|
Create a [Metabase account](https://store.metabase.com/checkout) or deploy locally with [Docker](https://www.docker.com/products/docker-desktop/)
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
Deploying with Docker:
|
|
```sh
|
|
docker pull metabase/metabase:latest
|
|
```
|
|
|
|
Then run:
|
|
```sh
|
|
docker run -d -p 3000:3000 --name metabase metabase/metabase
|
|
```
|
|
|
|
The server should be available at [`http://localhost:3000/setup`](http://localhost:3000/setup)
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Connect to Postgres">
|
|
|
|
Connect your Postgres server to Metabase.
|
|
- On your project dashboard, click [Connect](/dashboard/project/_?showConnect=true)
|
|
- View parameters under "Session pooler"
|
|
|
|
<Admonition type="note" title="Connection notice">
|
|
|
|
If you're in an [IPv6 environment](/docs/guides/platform/ipv4-address#checking-your-network-ipv6-support) or have the [IPv4 Add-On](/docs/guides/platform/ipv4-address#understanding-ip-addresses), you can use the direct connection string instead of Supavisor in Session mode.
|
|
|
|
</Admonition>
|
|
|
|
- Enter your database credentials into Metabase
|
|
|
|
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
Example credentials:
|
|
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
<StepHikeCompact.Step step={3}>
|
|
|
|
<StepHikeCompact.Details title="Explore">
|
|
|
|
Explore your data in Metabase
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|