diff --git a/apps/temp-docs/docs/guides/storage.mdx b/apps/temp-docs/docs/guides/storage.mdx
index 9e262fcb15d..2362d463d52 100644
--- a/apps/temp-docs/docs/guides/storage.mdx
+++ b/apps/temp-docs/docs/guides/storage.mdx
@@ -54,22 +54,19 @@ Since the storage is interoperable with your Postgres database, you can also use
client libraries. Here we create a bucket called "avatars":
-
+ scrollable
+ size="small"
+ type="underlined"
+ defaultActiveId="dashboard"
+>
+
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
2. Click **New Bucket** and enter a name for the bucket.
3. Click **Create Bucket**.
-
-
+
+
```sql
-- Use Postgres to create a bucket.
@@ -78,8 +75,8 @@ insert into storage.buckets (id, name)
values ('avatars', 'avatars');
```
-
-
+
+
```js
// Use the JS library to create a bucket.
@@ -89,8 +86,8 @@ const { data, error } = await supabase.storage.createBucket('avatars')
[Reference.](/docs/reference/javascript/storage-createbucket)
-
-
+
+
```dart
void main() async {
@@ -104,7 +101,7 @@ void main() async {
[Reference.](https://pub.dev/documentation/storage_client/latest/storage_client/SupabaseStorageClient/createBucket.html)
-
+
### Upload a file
@@ -112,22 +109,20 @@ void main() async {
You can upload a file from the Dashboard, or within a browser using our JS libraries.
-
+ scrollable
+ size="small"
+ type="underlined"
+ defaultActiveId="dashboard"
+>
+
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
2. Select the bucket you want to upload the file to.
3. Click **Upload File**.
4. Select the file you want to upload.
-
-
+
+
```js
const avatarFile = event.target.files[0]
@@ -138,8 +133,8 @@ const { data, error } = await supabase.storage
[Reference.](/docs/reference/javascript/storage-from-upload)
-
-
+
+
```dart
void main() async {
@@ -155,7 +150,9 @@ void main() async {
}
```
-
+[Reference.](https://pub.dev/documentation/storage_client/latest/storage_client/SupabaseStorageClient/createBucket.html)
+
+
### Download a file
@@ -163,35 +160,31 @@ void main() async {
You can download a file from the Dashboard, or within a browser using our JS libraries.
-
+ scrollable
+ size="small"
+ type="underlined"
+ defaultActiveId="dashboard"
+>
+
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
2. Select the bucket that contains the file.
3. Select the file that you want to download.
4. Click **Download**.
-
-
+
+
```js
// Use the JS library to download a file.
-const { data, error } = await supabase.storage
- .from('avatars')
- .download('public/avatar1.png')
+const { data, error } = await supabase.storage.from('avatars').download('public/avatar1.png')
```
[Reference.](/docs/reference/javascript/storage-from-download)
-
-
+
+
```dart
void main() async {
@@ -204,7 +197,9 @@ void main() async {
}
```
-
+[Reference.](/docs/reference/dart/storage-from-download)
+
+
### Add security rules
@@ -212,13 +207,12 @@ void main() async {
To restrict access to your files you can use either the Dashboard or SQL.
-
+ scrollable
+ size="small"
+ type="underlined"
+ defaultActiveId="dashboard"
+>
+
1. Go to the [Storage](https://app.supabase.com/project/_/storage/buckets) page in the Dashboard.
2. Click **Policies** in the sidebar.
@@ -227,8 +221,8 @@ To restrict access to your files you can use either the Dashboard or SQL.
5. Give your policy a unique name.
6. Write the policy using SQL.
-
-
+
+
```sql
-- Use SQL to create a policy.
@@ -238,7 +232,7 @@ create policy "Public Access"
using ( bucket_id = 'public' );
```
-
+
## Public and Private Buckets
diff --git a/apps/temp-docs/styles/main.scss b/apps/temp-docs/styles/main.scss
index f934cb363ae..7018c21b9f6 100644
--- a/apps/temp-docs/styles/main.scss
+++ b/apps/temp-docs/styles/main.scss
@@ -156,4 +156,19 @@ pre[class*='language-'] {
svg {
transform: rotate(90deg);
}
+}
+
+.video-container {
+ position: relative;
+ width: 100%;
+ padding-bottom: 56.25%;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
}
\ No newline at end of file