use supabase to store the images

Author: bertuz

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.2",
+    "@supabase/supabase-js": "^2.45.4",
     "@types/express-useragent": "^1.0.2",
     "@types/jwk-to-pem": "^2.0.1",
     "@types/node-jose": "^1.1.10",

pages/index.tsx

@@ -35,6 +35,8 @@ import useScreenSize from '../utils/useScreenSize';
 import toBase64 from '../utils/toBase64';
 import { isRunningAcceptanceTest } from '../utils/testUtils';
 
+import { createClient } from '@supabase/supabase-js';
+
 import { Transition } from 'react-transition-group';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -1010,47 +1012,55 @@ export async function getServerSideProps() {
       };
     }
 
-    const response = await getImageData();
+    const supabaseUrl = process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL || ' ';
+    const supabaseAnonKey =
+      process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
 
-    if (!response) {
-      return [];
+    const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+      global: {
+        headers: {
+          Authorization: `Bearer ${process.env.SUPABASE_SUPABASE_SERVICE_ROLE_KEY}`,
+        },
+      },
+    });
+    const { data, error } = await supabase
+      .from('gallery-images')
+      .select('url, name, height, width')
+      .limit(30)
+      .order('created_at', { ascending: false });
+
+    if (data === null) {
+      throw new Error(error?.message);
     }
 
-    const images = response.map(
-      (photo: {
-        contentProperties: { image: { height: number; width: number } };
-        url: string;
-        name: string;
-      }) => {
-        const { height: originalHeight, width: originalWidth } =
-          photo.contentProperties.image;
-        const dimensionsRatio = originalHeight / originalWidth;
-        const thumbnailFitWidth =
-          originalHeight > 200
-            ? [200, 200 / dimensionsRatio]
-            : [originalHeight, originalWidth];
-        const thumbnailFit =
-          originalWidth > 150
-            ? [thumbnailFitWidth[0] * dimensionsRatio, 150]
-            : thumbnailFitWidth;
-
-        return {
-          src: photo.url,
-          name: photo.name,
-          dimensions: {
-            ratio: dimensionsRatio,
-            thumbnail: {
-              height: thumbnailFit[0],
-              width: thumbnailFit[1],
-            },
-            original: {
-              height: originalHeight,
-              width: originalWidth,
-            },
+    const images = data.map((photo) => {
+      const { height: originalHeight, width: originalWidth } = photo;
+      const dimensionsRatio = originalHeight / originalWidth;
+      const thumbnailFitWidth =
+        originalHeight > 200
+          ? [200, 200 / dimensionsRatio]
+          : [originalHeight, originalWidth];
+      const thumbnailFit =
+        originalWidth > 150
+          ? [thumbnailFitWidth[0] * dimensionsRatio, 150]
+          : thumbnailFitWidth;
+
+      return {
+        src: photo.url,
+        name: photo.name,
+        dimensions: {
+          ratio: dimensionsRatio,
+          thumbnail: {
+            height: thumbnailFit[0],
+            width: thumbnailFit[1],
           },
-        };
-      }
-    );
+          original: {
+            height: originalHeight,
+            width: originalWidth,
+          },
+        },
+      };
+    });
 
     return {
       props: {

supabase/.gitignore

@@ -0,0 +1,4 @@
+# Supabase
+.branches
+.temp
+.env

supabase/config.toml

@@ -0,0 +1,161 @@
+# A string used to distinguish different Supabase projects on the same host. Defaults to the
+# working directory name when running `supabase init`.
+project_id = "bertuz.github.io"
+
+[api]
+enabled = true
+# Port to use for the API URL.
+port = 54321
+# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
+# endpoints. public and storage are always included.
+schemas = ["public", "storage", "graphql_public"]
+# Extra schemas to add to the search_path of every request. public is always included.
+extra_search_path = ["public", "extensions"]
+# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
+# for accidental or malicious requests.
+max_rows = 1000
+
+[db]
+# Port to use for the local database URL.
+port = 54322
+# Port used by db diff command to initialize the shadow database.
+shadow_port = 54320
+# The database major version to use. This has to be the same as your remote database's. Run `SHOW
+# server_version;` on the remote database to check.
+major_version = 15
+
+[db.pooler]
+enabled = false
+# Port to use for the local connection pooler.
+port = 54329
+# Specifies when a server connection can be reused by other clients.
+# Configure one of the supported pooler modes: `transaction`, `session`.
+pool_mode = "transaction"
+# How many server connections to allow per user/database pair.
+default_pool_size = 20
+# Maximum number of client connections allowed.
+max_client_conn = 100
+
+[realtime]
+enabled = true
+# Bind realtime via either IPv4 or IPv6. (default: IPv6)
+# ip_version = "IPv6"
+# The maximum length in bytes of HTTP request headers. (default: 4096)
+# max_header_length = 4096
+
+[studio]
+enabled = true
+# Port to use for Supabase Studio.
+port = 54323
+# External URL of the API server that frontend connects to.
+api_url = "http://127.0.0.1"
+# OpenAI API Key to use for Supabase AI in the Supabase Studio.
+openai_api_key = "env(OPENAI_API_KEY)"
+
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+enabled = true
+# Port to use for the email testing server web interface.
+port = 54324
+# Uncomment to expose additional ports for testing user applications that send emails.
+# smtp_port = 54325
+# pop3_port = 54326
+
+[storage]
+enabled = true
+# The maximum file size allowed (e.g. "5MB", "500KB").
+file_size_limit = "50MiB"
+
+[auth]
+enabled = true
+# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
+# in emails.
+site_url = "http://127.0.0.1:3000"
+# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
+additional_redirect_urls = ["https://127.0.0.1:3000"]
+# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
+jwt_expiry = 3600
+# If disabled, the refresh token will never expire.
+enable_refresh_token_rotation = true
+# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
+# Requires enable_refresh_token_rotation = true.
+refresh_token_reuse_interval = 10
+# Allow/disallow new user signups to your project.
+enable_signup = true
+# Allow/disallow testing manual linking of accounts
+enable_manual_linking = false
+
+[auth.email]
+# Allow/disallow new user signups via email to your project.
+enable_signup = true
+# If enabled, a user will be required to confirm any email change on both the old, and new email
+# addresses. If disabled, only the new email is required to confirm.
+double_confirm_changes = true
+# If enabled, users need to confirm their email address before signing in.
+enable_confirmations = false
+
+# Uncomment to customize email template
+# [auth.email.template.invite]
+# subject = "You have been invited"
+# content_path = "./supabase/templates/invite.html"
+
+[auth.sms]
+# Allow/disallow new user signups via SMS to your project.
+enable_signup = true
+# If enabled, users need to confirm their phone number before signing in.
+enable_confirmations = false
+# Template for sending OTP to users
+template = "Your code is {{ .Code }} ."
+
+# Use pre-defined map of phone number to OTP for testing.
+[auth.sms.test_otp]
+# 4152127777 = "123456"
+
+# This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
+[auth.hook.custom_access_token]
+# enabled = true
+# uri = "pg-functions://<database>/<schema>/<hook_name>"
+
+
+# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
+[auth.sms.twilio]
+enabled = false
+account_sid = ""
+message_service_sid = ""
+# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
+auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
+
+# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
+# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
+# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
+[auth.external.apple]
+enabled = false
+client_id = ""
+# DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
+secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
+# Overrides the default auth redirectUrl.
+redirect_uri = ""
+# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
+# or any other third-party OIDC providers.
+url = ""
+
+[analytics]
+enabled = false
+port = 54327
+vector_port = 54328
+# Configure one of the supported backends: `postgres`, `bigquery`.
+backend = "postgres"
+
+# Experimental features may be deprecated any time
+[experimental]
+# Configures Postgres storage engine to use OrioleDB (S3)
+orioledb_version = ""
+# Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
+s3_host = "env(S3_HOST)"
+# Configures S3 bucket region, eg. us-east-1
+s3_region = "env(S3_REGION)"
+# Configures AWS_ACCESS_KEY_ID for S3 bucket
+s3_access_key = "env(S3_ACCESS_KEY)"
+# Configures AWS_SECRET_ACCESS_KEY for S3 bucket
+s3_secret_key = "env(S3_SECRET_KEY)"

supabase/functions/after_insert_image/index.ts

@@ -0,0 +1,49 @@
+import { createClient } from 'jsr:@supabase/supabase-js@2';
+import sizeOf from 'npm:buffer-image-size';
+
+import { Buffer } from 'node:buffer';
+
+const SUPABASE_DOMAIN = 'https://fpbswrebvsmjdwekyznx.supabase.co';
+const IMAGES_URL = `${SUPABASE_DOMAIN}/storage/v1/object/public/photos`;
+
+Deno.serve(async (req) => {
+  const { 'new-image': image } = await req.json();
+
+  const { name: nameWithExtension, id } = image;
+  const name = nameWithExtension.replace(/\.[a-zA-Z0-9]{1,3}$/, '');
+  const url = `${IMAGES_URL}/${nameWithExtension}`;
+  const contentImage = await fetch(url, {
+    method: 'GET',
+  });
+  const imageBuffer = Buffer.from(await contentImage.arrayBuffer());
+  const imageSize = sizeOf(imageBuffer);
+
+  const dataToSend = {
+    id,
+    url,
+    height: imageSize.height,
+    width: imageSize.width,
+    name,
+  };
+  console.log(dataToSend);
+  console.log(req.headers.get('Authorization'));
+
+  const supabaseClient = createClient(
+    Deno.env.get('SUPABASE_URL') ?? '',
+    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+    {
+      global: { headers: { Authorization: req.headers.get('Authorization')! } },
+    }
+  );
+
+  const { data, error } = await supabaseClient
+    .from('gallery-images')
+    .insert(dataToSend);
+  console.log(data);
+  console.log(error);
+  console.log(` inserted image data ${data}, error (if any): ${error}`);
+
+  return new Response(JSON.stringify('Gotcha'), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+});