Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/santiagodc8/tu_perfil.net/llms.txt

Use this file to discover all available pages before exploring further.

TuPerfil.net uses a single Supabase Storage bucket named article-images to store all media: article featured images and gallery images uploaded through the TipTap editor.

​
Bucket overview

SettingValue
Bucket namearticle-images
VisibilityPublic (anyone can read objects)
Created byMigration 001_initial_schema.sql
Access controlRow Level Security on storage.objects
The bucket is created automatically when you run the first migration. You do not need to create it manually in the Supabase dashboard.

​
Access policies

Four RLS policies on storage.objects govern access to the bucket. All were created in migration 001:

​
article_images_public_read

Allows both anonymous and authenticated users to read (download) any object in the bucket. 
CREATE POLICY "article_images_public_read"
  ON storage.objects FOR SELECT
  TO anon, authenticated
  USING (bucket_id = 'article-images');

​
article_images_auth_insert

Allows authenticated users only to upload new objects. 
CREATE POLICY "article_images_auth_insert"
  ON storage.objects FOR INSERT
  TO authenticated
  WITH CHECK (bucket_id = 'article-images');

​
article_images_auth_update

Allows authenticated users to overwrite existing objects. 
CREATE POLICY "article_images_auth_update"
  ON storage.objects FOR UPDATE
  TO authenticated
  USING (bucket_id = 'article-images');

​
article_images_auth_delete

Allows authenticated users to delete objects from the bucket. 
CREATE POLICY "article_images_auth_delete"
  ON storage.objects FOR DELETE
  TO authenticated
  USING (bucket_id = 'article-images');
Only authenticated admin or editor users can upload and delete images. The /admin routes are protected by the middleware in src/middleware.ts, which redirects unauthenticated requests to /admin/login.

​
CDN URL format

Every object in the bucket has a public CDN URL in the following format: 
https://<project-ref>.supabase.co/storage/v1/object/public/article-images/<filename>
For example, if your Supabase project URL is https://abcdefghijklmnop.supabase.co and the uploaded file is hero-imagen-politica.jpg, the public URL is: 
https://abcdefghijklmnop.supabase.co/storage/v1/object/public/article-images/hero-imagen-politica.jpg
This URL is stored in articles.image_url and returned directly in API responses. Next.js image optimization is configured in next.config.mjs to allow images from *.supabase.co:
next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*.supabase.co",
        pathname: "/storage/v1/object/public/**",
      },
    ],
  },
};

​
How images are uploaded

Images reach the bucket through two paths in the admin panel: Each article form has a dedicated featured image upload field. When you select a file, the admin panel uploads it to the article-images bucket using the authenticated Supabase client, then stores the resulting CDN URL in articles.image_url.

​
TipTap editor

The TipTap rich-text editor in the article form also supports in-body image insertion. Images embedded in article body content are uploaded to the same article-images bucket. The returned URL is embedded directly in the article’s HTML content stored in articles.content.

​
Image recommendations

Featured images

Use a 16:9 aspect ratio at a minimum of 1200 × 675 px. Featured images appear as the article hero and in article cards on the homepage and category pages.

Gallery images

Match the aspect ratio of your layout. 1200 × 800 px (3:2) works well for most editorial photography. Keep files under 2 MB to minimize load time.
Compress images before uploading. Tools like Squoosh can reduce JPEG file sizes by 60–80% with negligible visible quality loss, directly improving page load performance.

​
Viewing and managing objects

You can browse, upload, and delete objects directly in the Supabase dashboard:
  1. Go to Storage in the left sidebar.
  2. Click on the article-images bucket.
  3. Use the file browser to inspect, download, or delete individual objects.
Deleting an image from the bucket does not update any articles rows that reference it. The article will display a broken image. Always remove or replace the image_url in the affected articles before deleting objects from storage.

Build docs developers (and LLMs) love

Get started for freeTalk to us