Enable Github Actions / PROD deployment to AWS

.github/workflows/github-actions-prod-deployment.yml

@@ -0,0 +1,23 @@
+name: GitHub Actions Prod Deployment
+on:
+  push:
+    branches:
+      - main
+      - sst
+
+jobs:
+  DeployToProd:
+    runs-on: ubuntu-latest
+    env: # Defined in the repository settings on github.com
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      CLOUDFLARE_DEFAULT_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_DEFAULT_ACCOUNT_ID }}
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: corepack enable
+      - run: pnpm i
+      - run: pnpm deploy:prod

.github/workflows/github-actions-test.yml

@@ -0,0 +1,17 @@
+name: GitHub Actions Test
+on:
+  - push
+
+jobs:
+  Test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: corepack enable
+      - run: pnpm i
+      - run: pnpm sst install
+      - run: pnpm test
+      - run: pnpm build

.gitignore

@@ -5,3 +5,4 @@ node_modules
 .env
 .vercel
 .DS_Store
+.sst

app/components/banner/Banner.css.ts

@@ -14,6 +14,9 @@ export const rootClass = style({
   backgroundRepeat: "repeat, no-repeat",
   color: "white",
   height: "35vw",
+
+  // TODO: how to remove @typescript-eslint/no-magic-numbers
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   filter: dropShadow[3]
 })
 

app/components/banner/Banner.tsx

@@ -3,6 +3,8 @@ import type { PropsWithChildren } from "react"
 import { contentClass, rootClass } from "./Banner.css"
 
 export interface BannerProps extends PropsWithChildren {
+  // TODO: how to remove react/no-unused-prop-types
+  // eslint-disable-next-line react/no-unused-prop-types
   readonly title: string
 }
 

app/components/button/Button.css.ts

@@ -1,7 +1,3 @@
-import { buildSpectrum } from "@effective/color"
 import { style } from "@vanilla-extract/css"
 
-const gold = buildSpectrum("C89F6B")
-const magenta = buildSpectrum("C50044")
-
 export const root = style({})

app/components/card/Card.css.ts

@@ -1,19 +1,22 @@
-import { buildShades, buildSpectrum } from "@effective/color"
 import { style } from "@vanilla-extract/css"
 
-import { elenaWebfont } from "../fonts/elena/Elena.css"
+import { darkViolet, goldShades, violetShades } from "~/styles/colors"
 
-const gold = buildSpectrum("C89F6B")
-const magenta = buildSpectrum("C50044")
-const goldShades = buildShades("#fff", "C89F6B")
-const darkViolet = buildSpectrum("3F2B3D")
-const violetShades = buildShades("#fff", "3F2B3D")
-const tealSpectrum = buildSpectrum("22404B")
+import { elenaWebfont } from "../fonts/elena/Elena.css"
 
 export const root = style({
   width: "40ch",
+  border: "1px solid",
+
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  background: `radial-gradient(at right bottom, ${goldShades[3]}, white)`,
+  borderColor: "white",
+  padding: "2rem",
   borderRadius: "0.5rem",
 
+  // TODO: how to remove @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-magic-numbers
   color: violetShades[4],
   position: "relative",
 

app/components/footer/Footer.css.ts

@@ -4,7 +4,11 @@ import { style } from "@vanilla-extract/css"
 const darkViolet = buildSpectrum("3F2B3D")
 
 export const root = style({
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   background: darkViolet["-2"],
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   color: darkViolet["+5"],
   paddingInline: "2vw",
   paddingBlock: "1rem",

app/components/header/Header.css.ts

@@ -6,7 +6,11 @@ const darkViolet = buildSpectrum("3F2B3D")
 
 export const root = style({
   // background: `linear-gradient(to bottom, ${vivaMagenta["0"]}, ${vivaMagenta["-2"]} )`,
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   background: darkViolet["-2"],
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   color: darkViolet["+5"],
   display: "flex",
   flexDirection: "row",
@@ -15,7 +19,13 @@ export const root = style({
   paddingBlock: "1rem",
   paddingInline: "2rem",
   borderBottom: "1px solid",
+
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   borderColor: darkViolet["+5"],
+
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   filter: dropShadow[5],
   zIndex: 1000,
   marginBottom: "0rem"

app/components/main/Main.css.ts

@@ -4,6 +4,8 @@ import { style } from "@vanilla-extract/css"
 const darkViolet = buildSpectrum("3F2B3D")
 
 export const root = style({
+  // TODO: how to remove no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   color: darkViolet["0"],
   flexGrow: 1
 })

app/styles/colors.ts

@@ -0,0 +1,8 @@
+import { buildShades, buildSpectrum } from "@effective/color"
+
+export const gold = buildSpectrum("C89F6B")
+export const magenta = buildSpectrum("C50044")
+export const darkViolet = buildSpectrum("3F2B3D")
+
+export const violetShades = buildShades("#fff", "3F2B3D")
+export const goldShades = buildShades("#fff", "C89F6B")

eslint.config.js

@@ -1,6 +1,9 @@
 import { main } from "@effective/eslint-config"
 
 export default [
+  {
+    ignores: [".*/**/*", "build/**/*", "sst-env.d.ts"]
+  },
   main,
   {
     files: ["**/*.css.ts"],

package.json

@@ -4,18 +4,20 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "check-types": "tsc",
-    "lint": "eslint .",
+    "test": "pnpm run --parallel /test:/",
+    "test:check-types": "tsc --noEmit",
+    "test:lint": "eslint .",
     "fix": "eslint --fix .; prettier --write .",
     "format": "prettier --write .",
-    "check-format": "prettier --check .",
+    "test:check-format": "prettier --check .",
     "build": "remix vite:build",
     "dev": "remix vite:dev",
     "start": "remix-serve ./build/server/index.js",
     "opt:svg": "svgo --folder app --recursive",
     "update:latest": "ncu --deep  --upgrade --interactive",
     "update:minor": "ncu --deep  --upgrade --interactive --target minor",
-    "update:pnpm": "corepack up"
+    "update:pnpm": "corepack up",
+    "deploy:prod": "sst deploy --stage production"
   },
   "dependencies": {
     "@effective/shadow": "^1.0.1",
@@ -41,12 +43,13 @@
     "eslint": "^8.57.0",
     "npm-check-updates": "^16.14.20",
     "prettier": "^3.3.3",
+    "sst": "ion",
     "svgo": "^3.3.2",
     "typescript": "^5.5.3",
     "vite": "^5.3.4",
     "vite-tsconfig-paths": "^4.3.2"
   },
-  "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903",
+  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e",
   "engines": {
     "node": ">=18.0.0"
   }