Merge branch 'master' into or/index-advisor

.gitignore

@@ -125,9 +125,12 @@ apps/new-docs/*
 # UI tokens
 packages/ui/tokens/**/*.json
 
+# UI Storybook build
+packages/ui/storybook-static
+
 # For self-hosted logs: https://github.com/supabase/supabase/blob/86e3ab20abfdb9c3e666334d3d2f8efeef9ccf2c/docker/docker-compose-logging.yml#L101
 gcloud.json
 
 # sitemaps
 # apps/www/public/*.xml
-# apps/docs/public/*.xml
+# apps/docs/public/*.xml

DEVELOPERS.md

@@ -69,11 +69,11 @@ To contribute code to [Supabase](https://supabase.com), you must fork the [Supab
 
 Then visit, and edit, any of the following sites:
 
-| Site | Directory | Scope name | Description | Local development server |
-| ---------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
-| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http:https://localhost:3000 |
-| [app.supabase.com](https://app.supabase.com)  | `/studio` | studio | Studio dashboard | http:https://localhost:8082 |
-| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http:https://localhost:3001/docs |
+| Site  | Directory | Scope name | Description | Local development server |
+| -------------------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
+| [supabase.com](https://supabase.com)  | `/apps/www` | www | The main website | http:https://localhost:3000 |
+| [supabase.com/dashboard](https://supabase.com/dashboard) | `/studio` | studio | Studio dashboard | http:https://localhost:8082 |
+| [supabase.com/docs](https://supabase.com/docs)  | `/apps/docs` | docs | Guides and Reference (Next.js based) | http:https://localhost:3001/docs |
 
 #### Running sites individually
 
@@ -132,6 +132,26 @@ Create a new entry in the [`redirects.js`](https://github.com/supabase/supabase/
 
 ---
 
+### Federated docs
+
+We support "federating" docs, meaning doc content can come directly from external repos other than [`supabase/supabase`](https://github.com/supabase/supabase).
+
+- It's great for things like client libs who have their own set of docs that we don't want to duplicate on the official Supabase docs (eg. [`supabase/vecs`](https://github.com/supabase/vecs)).
+- No duplication or manual steps required - fetches and generates automatically as part of the docs build pipeline
+- It's flexible - you can "embed" external docs nearly anywhere at any level in Supabase docs, but they will feel native
+- If you are maintaining a repo containing docs that you think could also live in Supabase docs, feel free to create an issue and we can work together to integrate
+
+Federated docs work using Next.js's build pipeline. We use `getStaticProps()` to fetch remote documentation (ie. markdown) at build time which is processed and passed to the respective page within the docs.
+
+See the [Vecs Python source code](https://github.com/supabase/supabase/blob/master/apps/docs/pages/guides/ai/python/%5Bslug%5D.tsx) to see how we do this for [`supabase/vecs`](https://github.com/supabase/vecs). Use this as a starting point for federating other docs.
+
+Some things to consider:
+
+- Links will often need to be transformed. For example if you are bringing in external markdown content, they may contain relative links that may not translate 1-to-1 after rendering in the Supabase docs. Use the [Link Transform](https://github.com/supabase/supabase/blob/master/apps/docs/lib/mdx/plugins/rehypeLinkTransform.ts) rehype plugin to transform links.
+- External markdown may contain syntax extensions that Supabase docs don't understand by default (eg. [mkdocs-material extensions](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown)). We've built a few remark plugins to support these extensions (eg. [MkDocs Admonition](https://github.com/supabase/supabase/blob/master/apps/docs/lib/mdx/plugins/remarkAdmonition.ts)). If there is a markdown extension that you need that isn't built yet, feel free to open an issue and we can work together to create it.
+
+---
+
 ## Community channels
 
 If you are stuck somewhere or have any questions, join our [Discord Community Server](https://discord.supabase.com/) or the [Github Discussions](https://github.com/supabase/supabase/discussions). We are here to help!

README.md

@@ -40,7 +40,7 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
 ## Status
 
 - [x] Alpha: We are testing Supabase with a closed set of customers
-- [x] Public Alpha: Anyone can sign up over at [app.supabase.com](https://app.supabase.com). But go easy on us, there are a few kinks
+- [x] Public Alpha: Anyone can sign up over at [supabase.com/dashboard](https://supabase.com/dashboard). But go easy on us, there are a few kinks
 - [x] Public Beta: Stable enough for most non-enterprise use-cases
 - [ ] Public: General Availability [[status](https://supabase.com/docs/guides/getting-started/features#feature-status)]
 
@@ -56,7 +56,7 @@ Supabase is a combination of open source tools. We’re building the features of
 
 **Architecture**
 
-Supabase is a [hosted platform](https://app.supabase.com). You can sign up and start using Supabase without installing anything.
+Supabase is a [hosted platform](https://supabase.com/dashboard). You can sign up and start using Supabase without installing anything.
 You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and [develop locally](https://supabase.com/docs/guides/local-development).
 
 ![Architecture](https://github.com/supabase/supabase/blob/master/apps/docs/public/img/supabase-architecture.png)
@@ -67,7 +67,7 @@ You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and
 - [pg_graphql](http:https://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
 - [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
 - [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
-- [GoTrue](https://github.com/netlify/gotrue) is an SWT based API for managing users and issuing SWT tokens.
+- [GoTrue](https://github.com/supabase/gotrue) is an JWT based API for managing users and issuing JWT tokens.
 - [Kong](https://github.com/Kong/kong) is a cloud-native API gateway.
 
 #### Client libraries
@@ -235,7 +235,7 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
 - [Nepali / नेपाली](/i18n/README.ne.md)
 - [Indonesian / Bahasa Indonesia](/i18n/README.id.md)
 - [Italiano / Italian](/i18n/README.it.md)
-- [Japanese / 日本語](/i18n/README.ja.md)
+- [Japanese / 日本語](/i18n/README.jp.md)
 - [Korean / 한국어](/i18n/README.ko.md)
 - [Lithuanian / lietuvių](/i18n/README.lt.md)
 - [Latvian / latviski](/i18n/README.lv.md)

apps/docs/components/AppleSecretGenerator.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
-import { Input, Button } from 'ui'
-import Admonition from '~/components/Admonition'
+import { Admonition, Button, Input } from 'ui'
 
 function base64URL(value: string) {
  return globalThis.btoa(value).replace(/[=]/g, '').replace(/[+]/g, '-').replace(/[\/]/g, '_')

apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts

@@ -89,13 +89,13 @@ export const highlightSelectedNavItem = (id: string) => {
  const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
  // find any currently active items and remove them
- const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
- currentActiveItems.forEach((item) => item.classList.remove('text-brand-900'))
+ const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand')
+ currentActiveItems.forEach((item) => item.classList.remove('text-brand'))
 
  // Add active class to the current item
  navMenuItems.forEach((item) => {
  if (item.href.split('/').at(-1) === id) {
- item.classList.add('text-brand-900')
+ item.classList.add('text-brand')
  }
  })
 }

apps/docs/components/Extensions.tsx

@@ -3,14 +3,25 @@ import React, { useState } from 'react'
 import { GlassPanel, IconLink, IconX, Input } from 'ui'
 import extensions from '../data/extensions.json'
 
-type extension = {
+type Extension = {
  name: string
  comment: string
  tags: string[]
- link?: string
+ link: string
 }
 
-function getUniqueTags(json: extension[]) {
+type LinkTarget = React.ComponentProps<'a'>['target']
+
+function getLinkTarget(link: string): LinkTarget {
+ // Link is relative, open in the same tab
+ if (link.startsWith('/')) {
+ return '_self'
+ }
+ // Link is external, open in a new tab
+ return '_blank'
+}
+
+function getUniqueTags(json: Extension[]): string[] {
  const tags = []
  for (const item of json) {
  if (item.tags) {
@@ -21,12 +32,12 @@ function getUniqueTags(json: extension[]) {
 }
 
 export default function Extensions() {
- const [searchTerm, setSearchTerm] = useState('')
- const [filters, setFilters] = useState([])
+ const [searchTerm, setSearchTerm] = useState<string>('')
+ const [filters, setFilters] = useState<string[]>([])
 
  const tags = getUniqueTags(extensions)
 
- function handleChecked(tag) {
+ function handleChecked(tag: string) {
  if (filters.includes(tag)) {
  setFilters(filters.filter((x) => x !== tag))
  } else {
@@ -94,15 +105,8 @@ export default function Extensions() {
  filters.length === 0 ? x : x.tags.some((item) => filters.includes(item))
  )
  .map((extension) => (
- <Link
- passHref
- href={`${
- extension.link
- ? `/guides/database/extensions/${extension.name}`
- : '/guides/database/extensions#full-list-of-extensions'
- }`}
- >
- <a target={`${extension.link ? '_blank' : '_self'}`} className="no-underline">
+ <Link passHref href={extension.link}>
+ <a target={getLinkTarget(extension.link)} className="no-underline">
  <GlassPanel title={extension.name} background={false} key={extension.name}>
  <p className="mt-4">
  {extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}

apps/docs/components/Frameworks.tsx

@@ -37,6 +37,14 @@ const Frameworks = () => {
  },
  href: '/reference/javascript/installing#javascript',
  },
+ {
+ name: 'Kotlin',
+ logo: {
+ light: '/docs/img/icons/kotlin-icon.svg',
+ dark: '/docs/img/icons/kotlin-icon.svg',
+ },
+ href: '/guides/with-kotlin',
+ },
  {
  name: 'Next.js',
  logo: {
@@ -85,6 +93,14 @@ const Frameworks = () => {
  },
  href: '/guides/with-vue-3',
  },
+ {
+ name: 'refine',
+ logo: {
+ light: '/docs/img/icons/refine-icon.svg',
+ dark: '/docs/img/icons/refine-icon.svg',
+ },
+ href: '/guides/getting-started/tutorials/with-refine',
+ },
  ]
  return (
  <div className="grid md:grid-cols-12 gap-4 not-prose">

apps/docs/components/GuidesTableOfContents.tsx

@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
  <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
  <a
  href={`#${formatSlug(item.link)}`}
- className="text-scale-1000 hover:text-brand-900 transition-colors"
+ className="text-scale-1000 hover:text-brand transition-colors"
  dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
  />
  </li>

apps/docs/components/HomePageCover.tsx

@@ -28,6 +28,11 @@ const HomePageCover = (props) => {
  icon: '/docs/img/icons/flutter-icon',
  href: '/guides/getting-started/quickstarts/flutter',
  },
+ {
+ tooltip: 'Android Kotlin',
+ icon: '/docs/img/icons/kotlin-icon',
+ href: '/guides/getting-started/quickstarts/kotlin',
+ },
  {
  tooltip: 'SvelteKit',
  icon: '/docs/img/icons/svelte-icon',
@@ -48,6 +53,11 @@ const HomePageCover = (props) => {
  icon: '/docs/img/icons/nuxt-icon',
  href: '/guides/getting-started/quickstarts/nuxtjs',
  },
+ {
+ tooltip: 'refine',
+ icon: '/docs/img/icons/refine-icon',
+ href: '/guides/getting-started/quickstarts/refine',
+ },
  ]
 
  const GettingStarted = () => (
@@ -64,15 +74,15 @@ const HomePageCover = (props) => {
  <div className="md:max-w-xs xl:max-w-none">
  <div className="flex items-center gap-3 mb-3">
  <IconBackground>
- <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
+ <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
  </IconBackground>
  <h3 className="text-2xl m-0">Getting Started</h3>
  </div>
  <p className="text-scale-1100 text-sm">
  Discover how to set up a database to an app making queries in just a few minutes.
  </p>
  </div>
- <div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-7 gap-2 sm:gap-3">
+ <div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-8 gap-2 sm:gap-3">
  {frameworks.map((framework, i) => (
  <Link key={i} href={framework.href} passHref>
  <a className="no-underline">
@@ -93,7 +103,7 @@ const HomePageCover = (props) => {
  return (
  <div className="w-full bg-scale-100 border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
  <div className="max-w-7xl px-5 mx-auto py-8 sm:pb-16 sm:pt-12 xl:pt-16 flex flex-col xl:flex-row justify-between gap-12 xl:gap-12">
- <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl">
+ <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl xl:max-w-[33rem]">
  <DocsCoverLogo />
  <div className="flex flex-col">
  <h1 className="m-0 mb-3 text-2xl sm:text-3xl">{props.meta?.title}</h1>
@@ -103,7 +113,7 @@ const HomePageCover = (props) => {
  </p>
  </div>
  </div>
- <div className="w-full xl:max-w-[365px] 2xl:max-w-[608px] -mb-40">
+ <div className="w-full xl:max-w-[375px] 2xl:max-w-[620px] -mb-40">
  <GettingStarted />
  </div>
  </div>

apps/docs/components/JwtGenerator.js

@@ -8,19 +8,19 @@ const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
 const fiveYears = new Date(now.getFullYear() + 5, now.getMonth(), now.getDate())
 const anonToken = `
 {
-  "role": "anon",
-  "iss": "supabase",
-  "iat": ${Math.floor(today / 1000)},
-  "exp": ${Math.floor(fiveYears / 1000)}
+ "role": "anon",
+ "iss": "supabase",
+ "iat": ${Math.floor(today / 1000)},
+ "exp": ${Math.floor(fiveYears / 1000)}
 }
 `.trim()
 
 const serviceToken = `
 {
-  "role": "service_role",
-  "iss": "supabase",
-  "iat": ${Math.floor(today / 1000)},
-  "exp": ${Math.floor(fiveYears / 1000)}
+ "role": "service_role",
+ "iss": "supabase",
+ "iat": ${Math.floor(today / 1000)},
+ "exp": ${Math.floor(fiveYears / 1000)}
 }
 `.trim()
 
@@ -50,12 +50,13 @@ export default function JwtGenerator({}) {
  type="text"
  placeholder="JWT Secret (at least 32 characters)"
  value={jwtSecret}
+ style={{ fontFamily: 'monospace' }}
  onChange={(e) => setJwtSecret(e.target.value)}
  />
  </div>
  <div className="grid mb-8">
  <label for="service">Preconfigured Payload:</label>
- <Select id="service" onChange={handleKeySelection}>
+ <Select id="service" style={{ fontFamily: 'monospace' }} onChange={handleKeySelection}>
  <Select.Option value="anon">ANON_KEY</Select.Option>
  <Select.Option value="service">SERVICE_KEY</Select.Option>
  </Select>
@@ -66,9 +67,10 @@ export default function JwtGenerator({}) {
  <Input.TextArea
  id="token"
  type="text"
- rows="5"
+ rows="6"
  placeholder="A valid JWT Token"
  value={token}
+ style={{ fontFamily: 'monospace' }}
  onChange={(e) => setToken(e.target.value)}
  />
  </div>
@@ -80,7 +82,7 @@ export default function JwtGenerator({}) {
  {signedToken && (
  <div className="mt-8">
  <h4>Generated Token:</h4>
- <CodeBlock language="bash" className="relative">
+ <CodeBlock language="bash" className="relative" style={{ fontFamily: 'monospace' }}>
  {signedToken}
  </CodeBlock>
  </div>