Merge pull request #513 from damien-schneider/upgrade-nextra-doc-to-v3.2

Upgrade nextra doc to v3.2

Author: psteinroe

docs/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+
+import nextra from 'nextra';
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx',
+});
+
+export default withNextra();

docs/next.config.mjs

@@ -12,18 +12,18 @@
   "dependencies": {
     "@vercel/analytics": "^1.0.0",
     "next": "14.2.0",
-    "nextra": "2.13.2",
-    "nextra-theme-docs": "2.13.2",
+    "nextra": "3.2.0",
+    "nextra-theme-docs": "3.2.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
-    "typescript": "5.5.3",
     "@types/node": "20.14.10",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "autoprefixer": "^10.4.13",
     "postcss": "^8.4.14",
-    "tailwindcss": "3.4.0"
+    "tailwindcss": "3.4.0",
+    "typescript": "5.6.3"
   }
 }

docs/package.json

@@ -0,0 +1,8 @@
+export default {
+  index: {
+    title: 'Introduction',
+  },
+  configuration: 'Configuration',
+  postgrest: 'PostgREST',
+  storage: 'Storage',
+};

docs/pages/_meta.json

@@ -1,12 +1,11 @@
-import { Callout, Tabs, Tab } from "nextra-theme-docs";
-import Link from "next/link";
+import { Callout, Tabs } from 'nextra/components';
 
 # Configuration
 
 Supabase Cache Helpers does a decent job at keeping your data up-to-date. This allows you to deviate from the standard configuration and reduce the number of requests to your backend while keeping your app fresh.
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     function Page() {
       return (
@@ -21,10 +20,10 @@ Supabase Cache Helpers does a decent job at keeping your data up-to-date. This a
       )
     }
     ```
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     // TODO
     ```
-  </Tab>
+  </Tabs.Tab>
 </Tabs>

docs/pages/_meta.ts

@@ -1,4 +1,4 @@
-import { Callout } from "nextra-theme-docs";
+import { Callout } from 'nextra/components'
 
 # Supabase Cache Helpers
 

docs/pages/configuration.mdx

@@ -0,0 +1,8 @@
+export default {
+  'getting-started': 'Getting Started',
+  queries: 'Queries',
+  mutations: 'Mutations',
+  subscriptions: 'Subscriptions',
+  'custom-cache-updates': 'Custom Cache Updates',
+  ssr: 'Server Side Rendering',
+};

docs/pages/index.mdx

@@ -1,5 +1,4 @@
-import { Callout, Tabs, Tab } from "nextra-theme-docs";
-import Link from "next/link";
+import { Callout, Tabs } from 'nextra/components';
 
 # Custom Cache Updates
 
@@ -10,7 +9,7 @@ Sometimes, you will find yourself writing custom cache updates. The library expo
 Delete a postgrest entity from the cache. Note that you have to pass a value for all primary keys in the input.
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     import { useDeleteItem } from "@supabase-cache-helpers/postgrest-swr";
 
@@ -26,8 +25,8 @@ Delete a postgrest entity from the cache. Note that you have to pass a value for
     }
     ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     import { useDeleteItem } from "@supabase-cache-helpers/postgrest-react-query";
 
@@ -43,15 +42,15 @@ Delete a postgrest entity from the cache. Note that you have to pass a value for
     }
     ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 ## `useUpsertItem`
 
 Upsert a postgrest entity into the cache. Note that you have to pass a value for all primary keys in the input.
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     import { useUpsertItem } from "@supabase-cache-helpers/postgrest-swr";
 
@@ -67,8 +66,8 @@ Upsert a postgrest entity into the cache. Note that you have to pass a value for
     }
     ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     import { useUpsertItem } from "@supabase-cache-helpers/postgrest-react-query";
 
@@ -84,5 +83,5 @@ Upsert a postgrest entity into the cache. Note that you have to pass a value for
     }
     ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>

docs/pages/postgrest/_meta.json

@@ -1,5 +1,4 @@
-import { Callout, Tabs, Tab } from "nextra-theme-docs";
-import Link from "next/link";
+import { Callout, Tabs } from 'nextra/components';
 
 # Getting Started
 
@@ -14,16 +13,16 @@ pnpm add @supabase-cache-helpers/postgrest-swr
 If your package manager does not install peer dependencies automatically, you will need to install them, too.
 
 <Tabs items={["SWR", "React Query"]}>
-  <Tab>`pnpm add swr react @supabase/postgrest-js`</Tab>
-  <Tab>`pnpm add @tanstack/react-query react @supabase/postgrest-js`</Tab>
+  <Tabs.Tab>`pnpm add swr react @supabase/postgrest-js`</Tabs.Tab>
+  <Tabs.Tab>`pnpm add @tanstack/react-query react @supabase/postgrest-js`</Tabs.Tab>
 </Tabs>
 
 ## Quick Start
 
 Import [`useQuery`](./queries#usequery) and define a simple query. The cache key is automatically created from the query. You can pass the SWR- and React Query-native options as a second argument. For pagination and infinite scroll queries, use [`useInfiniteOffsetPaginationQuery`](./queries#useinfiniteoffsetpaginationquery), [`useOffsetInfiniteScrollQuery`](./queries#useoffsetinfinitescrollquery) and [`useCursorInfiniteScrollQuery`](./queries#usecursorinfinitescrollquery).
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     import { useQuery } from "@supabase-cache-helpers/postgrest-swr";
 
@@ -49,8 +48,8 @@ Import [`useQuery`](./queries#usequery) and define a simple query. The cache key
     }
     ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 
@@ -75,13 +74,13 @@ Import [`useQuery`](./queries#usequery) and define a simple query. The cache key
     }
     ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 Somewhere in your app, import [`useInsertMutation`](./mutations#useinsertmutation) and define a mutation. For the automatic cache population to work, you need to pass the primary key(s) of the relation as a second argument. To return data from the mutation, pass a `.select('...')` string as the third argument. Pass `null` to skip. The fourth argument is the SWR- and React Query-native `options` object. The mutation will automatically update the query cache of the contact query defined above. Other operations are supported with [`useUpsertMutation`](./mutations#useupsertmutation), [`useUpdateMutation`](./mutations#useupdatemutation) and [`useDeleteMutation`](./mutations#usedeletemutation).
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     import { useInsertMutation } from "@supabase-cache-helpers/postgrest-swr";
 
@@ -103,8 +102,8 @@ Somewhere in your app, import [`useInsertMutation`](./mutations#useinsertmutatio
     }
     ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     import { useInsertMutation } from "@supabase-cache-helpers/postgrest-react-query";
 
@@ -126,15 +125,15 @@ Somewhere in your app, import [`useInsertMutation`](./mutations#useinsertmutatio
     }
     ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 To subscribe to changes, import [`useSubscription`](./subscriptions#usesubscription) and define a subscription. Use any channel name, and define the subscription as you know it from the Supabase client. For the automatic cache population to work, you need to pass the primary key(s) of the relation. You can pass the SWR and React Query-native mutation options.
 
 The query cache will automatically be updated when new data comes in. If you use [computed / virtual columns](https://postgrest.org/en/stable/api.html?highlight=computed%20columns#computed-virtual-columns) or relations, you can use [`useSubscriptionQuery`](./subscriptions#usesubscriptionquery) to fetch the entity from `PostgREST` before populating the cache with it.
 
 <Tabs items={['SWR', 'React Query']}>
-  <Tab>
+  <Tabs.Tab>
     ```tsx
     import { useSubscription } from "@supabase-cache-helpers/postgrest-swr";
 
@@ -159,8 +158,8 @@ The query cache will automatically be updated when new data comes in. If you use
     }
     ```
 
-  </Tab>
-  <Tab>
+  </Tabs.Tab>
+  <Tabs.Tab>
     ```tsx
     import { useSubscription } from "@supabase-cache-helpers/postgrest-react-query";
 
@@ -185,5 +184,5 @@ The query cache will automatically be updated when new data comes in. If you use
     }
     ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>