Merge pull request #39 from khaykingleb/supabase-integration

Supabase integration

Author: khaykingleb

.env.example

@@ -0,0 +1,3 @@
+SUPABASE_URL=http://127.0.0.1:54321
+SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_ROLE_KEY=

.envrc

@@ -0,0 +1,8 @@
+# This file is used by direnv to automatically load environment variables
+# from the .env file whenever you enter this directory.
+
+# To ensure security, direnv requires you to explicitly allow the execution
+# of this file by running 'direnv allow' after any changes.
+# This prevents unauthorized scripts from being executed automatically.
+
+dotenv

.github/workflows/release.yaml

@@ -34,3 +34,22 @@ jobs:
         run: npx semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.PAT_GITHUB }}
+
+  deploy:
+    needs: release
+    runs-on: ubuntu-latest
+    env:
+      SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
+      PROJECT_ID: ${{ secrets.PROJECT_ID }}
+    steps:
+      - name: Checkout code so that it is available to use in the executing runner
+        uses: actions/[email protected]
+        with:
+          fetch-depth: 0
+
+      - uses: supabase/setup-cli@v1
+        with:
+          version: latest
+
+      - name: Deploy
+        run: supabase functions deploy --project-ref ${{ env.PROJECT_ID }}

.gitignore

@@ -1,11 +1,17 @@
+# Node
 node_modules
-/.cache
 /build
-.env
 
+# Terraform
 terraform.tfstate
 terraform.tfstate.backup
 terraform.tfvars
 .terraform
 
+# Supabase
+supabase/volumes/db/data
+
+# Misc
+.env
 .DS_Store
+.vscode/

.pre-commit-config.yaml

@@ -59,6 +59,16 @@ repos:
     hooks:
       - id: cspell
 
+  - repo: https://github.com/sqlfluff/sqlfluff
+    rev: 3.3.0
+    hooks:
+      - id: sqlfluff-lint
+        args:
+          - "--dialect=postgres"
+      - id: sqlfluff-fix
+        args:
+          - "--dialect=postgres"
+
   - repo: https://github.com/antonbabenko/pre-commit-terraform
     rev: v1.94.1
     hooks:

.secrets.baseline

@@ -109,7 +109,8 @@
     {
       "path": "detect_secrets.filters.regex.should_exclude_file",
       "pattern": [
-        "pnpm-lock.yaml"
+        "pnpm-lock.yaml",
+        "supabase/config.toml"
       ]
     }
   ],

.tool-versions

@@ -1,5 +1,7 @@
+direnv 2.35.0
+pre-commit 3.7.0
 nodejs 21.7.3
 pnpm 9.9.0
 yarn 1.22.22
+supabase-cli 2.1.1
 terraform 1.5.4
-pre-commit 3.7.0

Makefile

@@ -1,121 +1,192 @@
-SHELL := /bin/bash
 .DEFAULT_GOAL = help
+SHELL := /bin/bash
+VENDOR_DIR := vendor/react-notion-x
 
-##@ Repo Initialization
+# Load environment variables from .env
+ifneq (,$(wildcard ./.env))
+    include .env
+    export
+endif
 
-prerequisite: ## Install prerequisite tools
+##=============================================================================
+##@ Repo Initialization
+##=============================================================================
+
+PLUGINS := \
+	direnv https://github.com/asdf-community/asdf-direnv.git \
+	pre-commit https://github.com/jonathanmorley/asdf-pre-commit.git \
+	nodejs https://github.com/asdf-vm/asdf-nodejs.git \
+	pnpm https://github.com/jonathanmorley/asdf-pnpm.git \
+	yarn https://github.com/twuni/asdf-yarn.git \
+	supabase-cli https://github.com/gavinying/asdf-supabase-cli.git \
+	terraform https://github.com/asdf-community/asdf-hashicorp.git
+
+prerequisites: ## Install prerequisite tools
 	@echo "Checking and installing required plugins."
-	@plugins=( \
-		"terraform https://github.com/asdf-community/asdf-hashicorp.git" \
-		"pnpm https://github.com/jonathanmorley/asdf-pnpm.git" \
-		"yarn https://github.com/twuni/asdf-yarn.git" \
-		"nodejs https://github.com/asdf-vm/asdf-nodejs.git" \
-		"pre-commit https://github.com/jonathanmorley/asdf-pre-commit.git" \
-	); \
-	for info in "$${plugins[@]}"; do \
-		read plugin url <<< "$$info"; \
+	@echo "${PLUGINS}" | tr ' ' '\n' | paste - - | while read -r plugin url; do \
 		if asdf plugin-list | grep -q $$plugin; then \
 			echo "Plugin '$$plugin' is already installed."; \
 		else \
 			echo "Adding plugin '$$plugin'."; \
 			asdf plugin-add $$plugin $$url; \
 		fi; \
-	done;
+	done
 	@echo  "Installing specified versions."
 	asdf install
 	@echo  "Currently installed versions:"
 	asdf current
-.PHONY: prerequisite
+.PHONY: prerequisites
+
+env: ## Create .env file if it doesn't exist
+	@if ! [ -e .env ]; then \
+		cp .env.example .env; \
+		echo "Created .env file. Please edit it according to your setup."; \
+	fi
+.PHONY: env
 
 deps-notion: ## Install dependencies for react-notion-x
 	@echo "Installing dependencies for react-notion-x."
-	git submodule update --init --recursive
-	cd vendor/react-notion-x && yarn install --frozen-lockfile
-.PHONY: notion-deps
+	@git submodule update --init --recursive
+	@cd ${VENDOR_DIR} && yarn install --frozen-lockfile
+.PHONY: deps-notion
 
 deps: deps-notion ## Install repo dependencies
 	@echo "Installing dependencies."
-	pnpm install
+	@pnpm install
 .PHONY: deps
 
 deps-prod: deps-notion ## Install production dependencies
 	@echo "Installing production dependencies."
-	pnpm install --frozen-lockfile
+	@pnpm install --frozen-lockfile
 .PHONY: deps-prod
 
 pre-commit: ## Install pre-commit hooks
 	@echo "Installing pre-commit hooks."
-	pre-commit install -t pre-commit -t commit-msg
+	@pre-commit install -t pre-commit -t commit-msg
+.PHONY: pre-commit
 
-init: prerequisite deps pre-commit ## Initialize local environment for development
+init: prerequisites env deps pre-commit ## Initialize local environment for development
 .PHONY: init
 
+##=============================================================================
 ##@ Scripts
+##=============================================================================
 
 build-notion: ## Build react-notion-x
 	@echo "Building react-notion-x."
-	cd vendor/react-notion-x && yarn build
+	@cd ${VENDOR_DIR} && yarn build
 .PHONY: build-notion
 
 build: build-notion ## Build project
 	@echo "Building project."
-	pnpm run build
+	@pnpm run build
 .PHONY: build
 
 run-dev: ## Run development server
 	@echo "Running development server."
-	pnpm run dev
+	@pnpm run dev
 .PHONY: run-dev
 
 run-prod: build ## Run production server
 	@echo "Starting server."
-	pnpm run start
+	@pnpm run start
 .PHONY: run-prod
 
 lint: ## Lint project
 	@echo "Linting project."
-	pnpm run lint && pnpm run stylelint && pnpm run typecheck
+	@pnpm run lint && pnpm run stylelint && pnpm run typecheck
 .PHONY: lint
 
 format: ## Format project
 	@echo "Formatting project."
-	pnpm run format
+	@pnpm run format
 .PHONY: format
 
+##=============================================================================
+##@ Supabase
+##=============================================================================
+
+supabase-start: ## Start supabase containers
+	@echo "Starting supabase."
+	@supabase start
+.PHONY: supabase-start
+
+supabase-status: ## Check supabase status
+	@echo "Checking supabase status."
+	@supabase status
+.PHONY: supabase-status
+
+supabase-reset: ## Reset supabase database (runs migrations and seeds)
+	@echo "Resetting supabase database."
+	@supabase db reset
+.PHONY: supabase-reset
+
+supabase-migration-%: ## Create supabase migration
+	@echo "Creating custom migration: supabase/migrations/some_timestamp_$*.sql"
+	@supabase db diff --use-migra -f $*
+.PHONY: supabase-migration-%
+
+supabase-generate-types: ## Generate supabase types
+	@echo "Generating supabase types."
+	@supabase gen types typescript --local > app/integrations/supabase/database.types.ts
+.PHONY: supabase-generate-types
+
+supabase-stop: ## Stop supabase containers
+	@echo "Stopping supabase."
+	@supabase stop
+.PHONY: supabase-stop
+
+#==============================================================================
+##@ Ngrok
+##==============================================================================
+
 ngrok-dev: ## Run ngrok for development server
 	@echo "Running ngrok."
-	ngrok http 5173
+	@ngrok http 5173
 .PHONY: ngrok-dev
 
 ngrok-prod: ## Run ngrok for production server
 	@echo "Running ngrok."
-	ngrok http 3000
+	@ngrok http 55203
 .PHONY: ngrok-prod
 
-##@ Miscullaneous
+#==============================================================================
+##@ Security
+##==============================================================================
 
-create-secrets-baseline:  ## Create secrets baseline file
-	detect-secrets scan > .secrets.baseline
+create-secrets-baseline: ## Create secrets baseline file
+	@detect-secrets scan > .secrets.baseline
 .PHONY: create-secrets-baseline
 
-audit-secrets-baseline:  ## Check updated .secrets.baseline file
-	detect-secrets audit .secrets.baseline
-	git commit .secrets.baseline --no-verify -m "build(security): update secrets.baseline"
+audit-secrets-baseline: ## Check updated .secrets.baseline file
+	@detect-secrets audit .secrets.baseline
 .PHONY: audit-secrets-baseline
 
-update-pre-commit-hooks:  ## Update pre-commit hooks
-	pre-commit autoupdate
+detect-secrets: ## Scan for secrets
+	@detect-secrets scan --baseline .secrets.baseline
+.PHONY: detect-secrets
+
+##=============================================================================
+##@ Miscellaneous
+##=============================================================================
+
+update-pre-commit-hooks: ## Update pre-commit hooks
+	@pre-commit autoupdate
 .PHONY: update-pre-commit-hooks
 
 clean: ## Clean project
 	@echo "Cleaning project."
-	rm -rf node_modules build
-	find vendor/react-notion-x -type d -name 'build' -exec rm -rf {} +
-	find vendor/react-notion-x -type d -name 'node_modules' -exec rm -rf {} +
+	@rm -rf node_modules build
+	@find ${VENDOR_DIR} -type d -name 'build' -exec rm -rf {} +
+	@find ${VENDOR_DIR} -type d -name 'node_modules' -exec rm -rf {} +
 .PHONY: clean
 
+##=============================================================================
 ##@ Helper
+##=============================================================================
 
-help:  ## Display help
-	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage: \033[36m\033[0m\n"} /^[a-zA-Z\.\%-]+:.*?##/ { printf "  \033[36m%-24s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+help: ## Display help
+	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} \
+	/^[a-zA-Z_-]+%?:.*?##/ { printf "  \033[36m%-24s\033[0m %s\n", $$1, $$2 } \
+	/^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
 .PHONY: help

app/components/organisms/Carousel.tsx

@@ -1,34 +1,39 @@
 import { Link } from "@remix-run/react";
 
-import { Post } from "~/data/posts";
+import { Tables } from "~/integrations/supabase/database.types";
 
 /**
  * Carousel component to display a list of posts
  *
- * @param items - Array of post items to display
+ * @param posts - Array of post items to display
  * @returns Carousel component
  */
-export const Carousel = ({ items }: { items: Post[] }) => {
+export const Carousel = ({ posts }: { posts: Tables<"posts">[] }) => {
   return (
     <div className="mb-2 mt-2">
-      {items.length > 0 ? (
+      {posts.length > 0 ? (
         <div className="carousel carousel-vertical h-full w-full">
-          {items.map((item) => (
+          {posts.map((post) => (
             <Link
-              to={`/blog/${item.slug}`}
-              key={item.id}
+              to={`/blog/${post.slug}`}
+              key={post.id}
               className="carousel-item block w-full cursor-pointer transition-all duration-300 hover:bg-gray-100"
             >
               <div className="flex w-full items-center p-3">
                 <div className="flex-grow">
                   <h2 className="font-gill-sans mb-1 text-base font-semibold sm:text-base">
-                    {item.title}
+                    {post.title}
                   </h2>
                   <p className="font-gill-sans mb-1 text-sm">
-                    Created at {item.publishDate.replace(/-/g, "/")}
+                    Created at{" "}
+                    {new Date(post.created_at).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "numeric",
+                      day: "numeric",
+                    })}
                   </p>
                   <div className="font-gill-sans">
-                    {item.tags.map((tag) => (
+                    {post.tags.map((tag) => (
                       <span
                         key={tag}
                         className="badge badge-ghost ml-[-0.2rem] mr-1 bg-blue-100 bg-opacity-50 px-1.5 py-0.5 text-xs"
@@ -39,8 +44,8 @@ export const Carousel = ({ items }: { items: Post[] }) => {
                   </div>
                 </div>
                 <img
-                  src={item.imageUrl}
-                  alt={item.title}
+                  src={post.image_url}
+                  alt={post.title}
                   className="h-28 w-auto"
                 />
               </div>