Merge pull request #43 from khaykingleb/use-supabase-storage

Use supabase storage

Author: khaykingleb

.github/workflows/release.yaml

@@ -56,5 +56,5 @@ jobs:
       - name: Link Supabase to Project
         run: supabase link --project-ref $PROJECT_ID
 
-      - name: Run Migrations and Seeds
-        run: supabase db push --include-seed
+      - name: Run Migrations
+        run: supabase db push

app/components/atoms/Avatar.tsx

@@ -5,7 +5,7 @@
  */
 export const Avatar = () => {
   return (
-    <div className="h-48 w-48 overflow-hidden rounded-full sm:h-64 sm:w-64">
+    <div className="h-48 w-48 overflow-hidden rounded-full sm:h-80 sm:w-80">
       <img
         src="/avatar.webp"
         alt="Avatar"

app/root.tsx

@@ -68,7 +68,6 @@ export const links: LinksFunction = () => {
     },
 
     // Images
-    // TODO: move to webp
     {
       rel: "preload",
       as: "image",
@@ -126,8 +125,8 @@ export function ErrorBoundary() {
           </Link>
         </main>
         <Footer />
-        <Scripts />
         <ScrollRestoration />
+        <Scripts />
       </body>
     </html>
   );

app/routes/_index.tsx

@@ -1,6 +1,7 @@
 import { SEOHandle } from "@nasa-gcn/remix-seo";
 import { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
+import { GoArrowUpRight } from "react-icons/go";
 
 import { AsciiDonut } from "~/components/molecules/AsciiDonut";
 import { Footer } from "~/components/organisms/Footer";
@@ -71,15 +72,21 @@ export default function IndexRoute() {
               to="/Gleb_Khaykin.pdf"
               prefetch="intent"
               target="_blank"
-              className="text-xl sm:text-2xl"
+              className="inline-flex items-center gap-1 text-xl sm:text-2xl"
             >
-              ↗ CV
+              <GoArrowUpRight className="h-6 w-6" /> CV
             </Link>
-            <Link to="/blog" className="text-xl sm:text-2xl">
-              ↗ Blog
+            <Link
+              to="/blog"
+              className="inline-flex items-center gap-1 text-xl sm:text-2xl"
+            >
+              <GoArrowUpRight className="h-6 w-6" /> Blog
             </Link>
-            <Link to="/contact" className="text-xl sm:text-2xl">
-              ↗ Contact
+            <Link
+              to="/contact"
+              className="inline-flex items-center gap-1 text-xl sm:text-2xl"
+            >
+              <GoArrowUpRight className="h-6 w-6" /> Contact
             </Link>
           </div>
         </div>

app/routes/blog.$slug.tsx

@@ -27,6 +27,7 @@ import { NotionRenderer } from "vendor/react-notion-x/packages/react-notion-x";
 
 import { Footer } from "~/components/organisms/Footer";
 import { Tables } from "~/integrations/supabase/database.types";
+import { getPostImageUrl } from "~/utils/supabase";
 import { useTheme } from "~/utils/theme";
 
 const Equation = React.lazy(() =>
@@ -111,11 +112,11 @@ const NotionPage = ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
 export const loader: LoaderFunction = async ({
   params,
 }: LoaderFunctionArgs) => {
-  const supabase = createClient(
+  const supabaseClient = createClient(
     process.env.SUPABASE_URL!,
     process.env.SUPABASE_SERVICE_ROLE_KEY!,
   );
-  const { data, error } = await supabase
+  const { data, error } = await supabaseClient
     .from("posts")
     .select("*")
     .eq("slug", params.slug)
@@ -124,6 +125,7 @@ export const loader: LoaderFunction = async ({
 
   if (error) throw new Response("Failed to load post", { status: 500 });
   if (!data) throw new Response("Post not found", { status: 404 });
+  data.image_url = getPostImageUrl(supabaseClient, data.image_url);
 
   const notion = new NotionAPI();
   const recordMapPromise = notion.getPage(data.notion_page_id);
@@ -186,11 +188,11 @@ export const handle: SEOHandle = {
    * @returns The sitemap.xml entries for the route
    */
   getSitemapEntries: async () => {
-    const supabase = createClient(
+    const supabaseClient = createClient(
       process.env.SUPABASE_URL!,
       process.env.SUPABASE_SERVICE_ROLE_KEY!,
     );
-    const { data: posts } = await supabase
+    const { data: posts } = await supabaseClient
       .from("posts")
       .select("slug")
       .returns<Tables<"posts">[]>();
@@ -268,7 +270,7 @@ export default function BlogPostRoute() {
   const { post, recordMap } = useLoaderData<typeof loader>();
 
   return (
-    <div className="mx-auto flex min-h-screen w-full max-w-[800px] flex-col px-4 sm:px-6 lg:px-8">
+    <div className="mx-auto flex min-h-screen w-full max-w-[850px] flex-col px-4 sm:px-6 lg:px-8">
       <header className="mt-4">
         <div className="flex items-center gap-2 text-3xl font-semibold sm:text-4xl">
           <Link to="/blog">&lt;</Link>

app/routes/blog._index.tsx

@@ -15,6 +15,7 @@ import { Footer } from "~/components/organisms/Footer";
 import { Header } from "~/components/organisms/Header";
 import { Pagination } from "~/components/organisms/Pagination";
 import { Tables } from "~/integrations/supabase/database.types";
+import { getPostImageUrl } from "~/utils/supabase";
 
 export const handle: SEOHandle = {
   /**
@@ -60,18 +61,21 @@ export const meta: MetaFunction = () => {
 };
 
 export const loader = async () => {
-  const supabase = createClient(
+  const supabaseClient = createClient(
     process.env.SUPABASE_URL!,
     process.env.SUPABASE_SERVICE_ROLE_KEY!,
   );
 
-  const postsPromise = supabase
+  const postsPromise = supabaseClient
     .from("posts")
     .select("*")
     .returns<Tables<"posts">[]>()
     .then(async ({ data, error }) => {
       if (error) throw new Response("Failed to load posts", { status: 500 });
-      return data.reverse();
+      return data.reverse().map((post) => ({
+        ...post,
+        image_url: getPostImageUrl(supabaseClient, post.image_url),
+      }));
     });
 
   return defer({ posts: postsPromise as Promise<Tables<"posts">[]> });
@@ -204,7 +208,7 @@ export default function BlogRoute() {
   const { posts } = useLoaderData<typeof loader>();
 
   return (
-    <div className="mx-auto flex min-h-screen w-full max-w-[800px] flex-grow flex-col px-4 sm:px-6 lg:px-8">
+    <div className="mx-auto flex min-h-screen w-full max-w-[850px] flex-grow flex-col px-4 sm:px-6 lg:px-8">
       <div className="flex flex-grow flex-col">
         <Suspense fallback={<LoadingFallback />}>
           <Await resolve={posts}>

app/routes/contact.tsx

@@ -56,7 +56,7 @@ export const meta: MetaFunction = () => {
  */
 export default function ContactRoute() {
   return (
-    <div className="mx-auto flex min-h-screen w-full max-w-[800px] flex-grow flex-col px-4 sm:px-6 lg:px-8">
+    <div className="mx-auto flex min-h-screen w-full max-w-[850px] flex-grow flex-col px-4 sm:px-6 lg:px-8">
       <div className="flex flex-grow flex-col">
         <Header headerName="Contact" />
         <main className="flex flex-grow flex-col">

app/styles/notion.css

@@ -96,8 +96,8 @@
 .notion-code,
 .notion-code pre,
 .notion-code code {
-  color: #24292e !important;
-  background-color: #f7f6f3 !important;
+  color: hsl(var(--bc)) !important;
+  background: hsl(var(--b1)) !important;
 }
 
 .katex {

app/utils/supabase.ts

@@ -0,0 +1,16 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+/**
+ * Get a public URL for an image stored in Supabase Storage
+ *
+ * @param supabaseClient - Supabase client instance
+ * @param path - Path to the image in storage
+ * @returns Public URL for the image
+ */
+export function getPostImageUrl(
+  supabaseClient: SupabaseClient,
+  path: string,
+): string {
+  const { data } = supabaseClient.storage.from("posts").getPublicUrl(path);
+  return data.publicUrl;
+}

cspell.config.js

@@ -32,5 +32,7 @@ export default {
     "changefreq",
     "doesn",
     "supabase",
+    "jsonencode",
+    "signup",
   ],
 };

infra/.terraform.lock.hcl

@@ -0,0 +1,16 @@
+output "supabase_url" {
+  value       = "https://${supabase_project.this.id}.supabase.co"
+  description = "The URL of the Supabase project"
+}
+
+output "supabase_anon_key" {
+  value       = data.supabase_apikeys.this.anon_key
+  description = "The anon key of the Supabase project"
+  sensitive   = true
+}
+
+output "supabase_service_role_key" {
+  value       = data.supabase_apikeys.this.service_role_key
+  description = "The service role key of the Supabase project"
+  sensitive   = true
+}

infra/outputs.tf

@@ -1,3 +1,7 @@
 provider "vercel" {
   api_token = var.vercel_api_token
 }
+
+provider "supabase" {
+  access_token = var.supabase_access_token
+}

infra/provider.tf

@@ -0,0 +1,34 @@
+resource "supabase_project" "this" {
+  name            = "supabase-db"
+  organization_id = var.supabase_organization_id
+
+  region            = "eu-west-2"
+  database_password = var.supabase_database_password
+  instance_size     = "nano"
+
+  lifecycle {
+    ignore_changes = [
+      database_password,
+      instance_size,
+    ]
+  }
+}
+
+resource "supabase_settings" "this" {
+  project_ref = supabase_project.this.id
+
+  api = jsonencode({
+    db_extra_search_path = "public, extensions"
+    db_schema            = "public,graphql_public"
+    max_rows             = 1000
+  })
+
+  auth = jsonencode({
+    disable_signup = false
+    jwt_exp        = 3600
+  })
+}
+
+data "supabase_apikeys" "this" {
+  project_ref = supabase_project.this.id
+}

infra/supabase.tf

@@ -4,6 +4,10 @@ terraform {
       source  = "vercel/vercel"
       version = "~> 2.8.0"
     }
+    supabase = {
+      source  = "supabase/supabase"
+      version = "~> 1.5.1"
+    }
   }
 
   required_version = "~> 1.5.4"

infra/terraform.tf

@@ -4,20 +4,20 @@ variable "vercel_api_token" {
   sensitive   = true
 }
 
-variable "supabase_url" {
-  description = "The Supabase URL"
+variable "supabase_organization_id" {
+  description = "The ID of the Supabase organization"
   type        = string
   sensitive   = true
 }
 
-variable "supabase_service_role_key" {
-  description = "The Supabase service role key"
+variable "supabase_access_token" {
+  description = "The personal access token for the Supabase"
   type        = string
   sensitive   = true
 }
 
-variable "supabase_anon_key" {
-  description = "The Supabase anon key"
+variable "supabase_database_password" {
+  description = "The password for the Supabase database"
   type        = string
   sensitive   = true
 }

infra/variables.tf

@@ -15,23 +15,23 @@ resource "vercel_project" "khaykingleb_com" {
 resource "vercel_project_environment_variable" "supabase_url" {
   project_id = vercel_project.khaykingleb_com.id
   key        = "SUPABASE_URL"
-  value      = var.supabase_url
+  value      = "https://${supabase_project.this.id}.supabase.co"
   target     = ["production", "preview", "development"]
   comment    = "Supabase URL"
 }
 
 resource "vercel_project_environment_variable" "supabase_anon_key" {
   project_id = vercel_project.khaykingleb_com.id
   key        = "SUPABASE_ANON_KEY"
-  value      = var.supabase_anon_key
+  value      = data.supabase_apikeys.this.anon_key
   target     = ["production", "preview", "development"]
   comment    = "Supabase anon key for client-side code"
 }
 
 resource "vercel_project_environment_variable" "supabase_service_role_key" {
   project_id = vercel_project.khaykingleb_com.id
   key        = "SUPABASE_SERVICE_ROLE_KEY"
-  value      = var.supabase_service_role_key
+  value      = data.supabase_apikeys.this.service_role_key
   target     = ["production", "preview"]
   sensitive  = true
   comment    = "Supabase service role key for server-side code"

infra/vercel.tf

@@ -87,11 +87,11 @@ file_size_limit = "50MiB"
 # enabled = true
 
 # Uncomment to configure local storage buckets
-# [storage.buckets.images]
-# public = false
-# file_size_limit = "50MiB"
-# allowed_mime_types = ["image/png", "image/jpeg"]
-# objects_path = "./images"
+[storage.buckets.posts]
+public = true
+file_size_limit = "50MiB"
+allowed_mime_types = ["image/png", "image/jpeg", "image/webp"]
+objects_path = "./seeds/storage/posts"
 
 [auth]
 enabled = true

supabase/config.toml

@@ -4,5 +4,5 @@ values (
     'introduction-to-digital-signal-processing',
     '5987cc697c874323920215fbaad8cbbd',  -- pragma: allowlist secret
     array['notes', 'speech'],
-    '/img/posts/introduction-to-digital-signal-processing.webp'
+    '/5987cc697c874323920215fbaad8cbbd/img.webp'
 );