docs: storage cleanup

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -903,10 +903,20 @@ export const storage: NavMenuConstant = {
  items: [
  { name: 'Overview', url: '/guides/storage' },
  { name: 'Quickstart', url: '/guides/storage/quickstart' },
- { name: 'Uploads', url: '/guides/storage/uploads' },
- { name: 'Access Control', url: '/guides/storage/access-control' },
- { name: 'CDN', url: '/guides/storage/cdn' },
- { name: 'Image Transformations', url: '/guides/storage/image-transformations' },
+ {
+ name: 'Fundamentals',
+ url: undefined,
+ items: [
+ { name: 'Uploading files to Storage', url: '/guides/storage/uploads' },
+ { name: 'Image Transformations', url: '/guides/storage/image-transformations' },
+ { name: 'How caching works', url: '/guides/storage/cdn' },
+ ],
+ },
+ {
+ name: 'Access and security',
+ url: undefined,
+ items: [{ name: 'Access Control', url: '/guides/storage/access-control' }],
+ },
  ],
 }
 

apps/docs/layouts/guides/index.tsx

@@ -159,7 +159,6 @@ const Layout: FC<Props> = (props) => {
  <div className="border-l">
  {props.meta?.tocVideo && !!tocVideoPreview && (
  <div className="relative mb-6 pl-5">
- <h1>{props.meta.tocVideo}</h1>
  <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
  </div>
  )}

apps/docs/pages/guides/storage.mdx

@@ -4,8 +4,9 @@ export const meta = {
  id: 'storage',
  title: 'Storage',
  description: 'Use Supabase to store and serve files.',
+ subtitle: 'Use Supabase to store and serve files.',
  sidebar_label: 'Overview',
- video: 'https://www.youtube.com/v/J9mTPY8rIXE',
+ tocVideo: 'J9mTPY8rIXE',
 }
 
 Supabase Storage makes it simple to store and serve large files.
@@ -16,24 +17,11 @@ Files can be any sort of media file. This includes images, GIFs, and videos. It
 
 ## Folders
 
-Folders are a way to organize your files (just like on your computer).
-There is no right or wrong way to
-organize your files. You can store them in whichever folder structure suits your project.
+Folders are a way to organize your files (just like on your computer). There is no right or wrong way to organize your files. You can store them in whichever folder structure suits your project.
 
 ## Buckets
 
-Buckets are distinct containers for files and folders. You can think of them like "super folders".
-Generally you would create distinct buckets for different Security and Access Rules. For example, you might
-keep all video files in a "video" bucket, and profile pictures in an "avatar" bucket.
-
-<div className="video-container">
- <iframe
- src="https://www.youtube-nocookie.com/embed/J9mTPY8rIXE"
- frameBorder="1"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowFullScreen
- ></iframe>
-</div>
+Buckets are distinct containers for files and folders. You can think of them like "super folders". Generally you would create distinct buckets for different Security and Access Rules. For example, you might keep all video files in a "video" bucket, and profile pictures in an "avatar" bucket.
 
 ## See also
 

apps/docs/pages/guides/storage/access-control.mdx

@@ -4,41 +4,23 @@ export const meta = {
  id: 'storage-access-control',
  title: 'Access Control',
  description: 'Manage who can access your Supabase Storage files.',
- video: 'https://www.youtube.com/v/4ERX__Y908k',
+ subtitle: 'Manage who can access your Supabase Storage files.',
+ tocVideo: '4ERX__Y908k',
 }
 
-Supabase Storage is integrated with your [Postgres Database](/docs/guides/database).
-This means that you can use the same [Row Level Security Policies](/docs/guides/auth#policies)
-for managing access to your files. Supabase Storage stores metadata in the `objects` and `buckets` table in the storage schema.
+Supabase Storage is integrated with your [Postgres Database](/docs/guides/database). This means that you can use the same [Row Level Security Policies](/docs/guides/auth#policies) for managing access to your files. Supabase Storage stores metadata in the `objects` and `buckets` table in the storage schema.
 
 To allow read access to files, the RLS policy must allow users to `SELECT` the `objects` table and for uploading a new object, the RLS policy must grant users access to `INSERT` into the `objects` table and so on. The mapping between the different API calls and the database permissions required is documented in the [Reference docs](/docs/reference/javascript/storage-createbucket).
 
-<Admonition type="note">
-
-Access control for Storage is mapped to CRUD operations on the `buckets` and `objects` table via RLS policies.
-
-</Admonition>
-
-<div className="video-container">
- <iframe
- src="https://www.youtube-nocookie.com/embed/4ERX__Y908k"
- frameBorder="1"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowFullScreen
- ></iframe>
-</div>
-
 ## Public and private buckets
 
-Storage buckets are private by default. For private buckets, you can access objects via the [download](/docs/reference/javascript/storage-from-download) method. This corresponds to `/object/auth/` API endpoint.
-Alternatively, you can create a publicly shareable URL with an expiry date using the [createSignedUrl](/docs/reference/javascript/storage-from-createsignedurl) method
-which calls the `/object/sign/` API.
+Storage buckets are private by default. For private buckets, you can access objects via the [download](/docs/reference/javascript/storage-from-download) method. This corresponds to `/object/auth/` API endpoint. Alternatively, you can create a publicly shareable URL with an expiry date using the [createSignedUrl](/docs/reference/javascript/storage-from-createsignedurl) method which calls the `/object/sign/` API.
+
+For public buckets, you can access the assets directly without a token or an Authorisation header. The [getPublicUrl](/docs/reference/javascript/storage-from-getpublicurl) helper method returns the full public URL for an asset. This calls the `/object/public/` API endpoint internally. While no authorization is required for accessing objects in a public bucket, proper [access control](#access-control) is required for other operations like uploading, deleting objects from public buckets as well. Public buckets also tend to have [better performance](/docs/guides/storage-cdn#public-vs-private-buckets).
 
-For public buckets, you can access the assets directly without a token or an Authorisation header. The [getPublicUrl](/docs/reference/javascript/storage-from-getpublicurl)
-helper method returns the full public URL for an asset. This calls the `/object/public/` API endpoint internally. While no authorization is required for accessing objects in a public bucket, proper [access control](#access-control) is required for other operations like uploading, deleting objects from public buckets as well. Public buckets also tend to have [better performance](/docs/guides/storage-cdn#public-vs-private-buckets).
+<details className="cursor-default">
+<summary className="cursor-pointer">Advanced: reverse proxy</summary>
 
-<details>
-<summary>Advanced: reverse proxy</summary>
 The URLs returned are proxied through the API Proxy. They are prefixed by <code>/storage/v1</code>.
 
 For example, on the hosted Platform they will be
@@ -54,9 +36,7 @@ You can access the storage API directly with the same endpoint. See the <a href=
 Supabase Storage provides SQL helper functions which you can use in your database queries and
 policies.
 
----
-
-#### `storage.filename()`
+### `storage.filename()`
 
 Returns the name of a file.
 
@@ -69,9 +49,7 @@ For example, if your file is stored in `public/subfolder/avatar.png` it would re
 
 `'avatar.png'`
 
----
-
-#### `storage.foldername()`
+### `storage.foldername()`
 
 Returns an array path, with all of the subfolders that a file belongs to.
 
@@ -84,9 +62,7 @@ For example, if your file is stored in `public/subfolder/avatar.png` it would re
 
 `[ 'public', 'subfolder' ]`
 
----
-
-#### `storage.extension()`
+### `storage.extension()`
 
 Returns the extension of a file.
 

apps/docs/pages/guides/storage/cdn.mdx

@@ -15,7 +15,7 @@ Our basic CDN caches objects based on the cache time set when uploading objects.
 
 ### Example
 
-Let’s walk through an example of how a CDN helps with performance.
+Let's walk through an example of how a CDN helps with performance.
 
 A new bucket is created for a Supabase project launched in Singapore. All requests to the Supabase Storage API are routed to the CDN first.
 

apps/docs/pages/guides/storage/image-transformations.mdx

@@ -4,8 +4,9 @@ export const meta = {
  id: 'storage-image-transformations',
  title: 'Storage Image Transformations',
  description: 'Transform images with Storage',
+ subtitle: 'Transform images with Storage',
  sidebar_label: 'Image Transformations',
- video: 'https://www.youtube.com/v/dLqSmxX3r7I',
+ tocVideo: 'dLqSmxX3r7I',
 }
 
 Supabase Storage offers the functionality to transform and resize images dynamically. Any image stored in your buckets can be transformed and optimized for fast delivery.
@@ -14,15 +15,6 @@ Supabase Storage offers the functionality to transform and resize images dynamic
  Image Resizing is currently enabled for [Pro plan and above](https://supabase.com/pricing).
 </Admonition>
 
-<div className="video-container">
- <iframe
- src="https://www.youtube-nocookie.com/embed/dLqSmxX3r7I"
- frameBorder="1"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowFullScreen
- ></iframe>
-</div>
-
 ## Get a public URL for a transformed image
 
 You can pass a `transform` option to the functions you are currently using to interact with your objects. This returns the public URL that serves the resized image.
@@ -70,8 +62,7 @@ supabase.storage.from('bucket').download('image.jpg', {
 
 ## Automatic Image Optimisation (WebP)
 
-When using the image transformation API we will automatically find the best format supported by the browser and return that to the client, without any code change.
-For instance, if you use Chrome when viewing a jpeg image and using transformation options, you'll see that the content-type returned is `webp`.
+When using the image transformation API we will automatically find the best format supported by the browser and return that to the client, without any code change. For instance, if you use Chrome when viewing a jpeg image and using transformation options, you'll see that the content-type returned is `webp`.
 
 As a result, this will lower the bandwidth that you send to your users and your application will load much faster.
 
@@ -81,8 +72,7 @@ As a result, this will lower the bandwidth that you send to your users and your
 
 **Disabling automatic optimisation:**
 
-In case you'd like to return the original format of the image and **opt-out** from the automatic image optimization detection, you can pass the `format=origin` parameter when requesting a transformed image,
-this is also supported in the JavaScript SDK starting from v2.2.0
+In case you'd like to return the original format of the image and **opt-out** from the automatic image optimization detection, you can pass the `format=origin` parameter when requesting a transformed image, this is also supported in the JavaScript SDK starting from v2.2.0
 
 ```ts
 await storage.from('bucket').download('image.jpeg', {
@@ -186,8 +176,7 @@ supabase.storage.from('bucket').download('image.jpg', {
 
 ## Self Hosting
 
-Our solution to image resizing and optimisation can be self-hosted as with any other Supabase product.
-Under the hood we use the awesome [Imgproxy](https://imgproxy.net/)
+Our solution to image resizing and optimisation can be self-hosted as with any other Supabase product. Under the hood we use the awesome [Imgproxy](https://imgproxy.net/)
 
 #### Imgproxy Configuration:
 

apps/docs/pages/guides/storage/quickstart.mdx

@@ -17,8 +17,7 @@ File, Folder, and Bucket names **must follow** [AWS object key naming guidelines
 
 ## Create a bucket
 
-You can create a bucket using the Supabase Dashboard.
-Since the storage is interoperable with your Postgres database, you can also use SQL or our
+You can create a bucket using the Supabase Dashboard. Since the storage is interoperable with your Postgres database, you can also use SQL or our
 client libraries. Here we create a bucket called "avatars":
 
 <Tabs

apps/docs/pages/guides/storage/uploads.mdx

@@ -4,6 +4,7 @@ export const meta = {
  id: 'storage-uploads',
  title: 'Storage Uploads',
  description: 'Learn how to upload files to Supabase Storage.',
+ subtitle: 'Learn how to upload files to Supabase Storage.',
  sidebar_label: 'Uploads',
 }
 
@@ -51,8 +52,7 @@ async function uploadFile(file) {
 
 The Resumable upload method is recommended for uploading large files that may exceed 6MB in size or for scenarios where network stability is a concern or if you simply want to have a progress bar for your uploads.
 
-Supabase Storage implements the [TUS protocol](https://tus.io/) to enable resumable uploads. TUS stands for The Upload Server and is an open protocol for supporting resumable uploads. The protocol allows the upload process to be resumed from where it left off in case of interruptions.
-This method can be implemented using the tus-js-client library, or other client-side libraries like [Uppy-js](https://uppy.io/docs/tus/) that support the TUS protocol.
+Supabase Storage implements the [TUS protocol](https://tus.io/) to enable resumable uploads. TUS stands for The Upload Server and is an open protocol for supporting resumable uploads. The protocol allows the upload process to be resumed from where it left off in case of interruptions. This method can be implemented using the tus-js-client library, or other client-side libraries like [Uppy-js](https://uppy.io/docs/tus/) that support the TUS protocol.
 
 Here's an example of how to upload a file using `tus-js-client`: