ci(editor): deploy editor workflow setup (#1148)

.github/workflows/deploy-editor.yml

@@ -0,0 +1,52 @@
+name: 🚀 Deploy Editor
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "main"
+
+env:
+  DOCKER_IMAGE: shortvid-editor:latest
+
+jobs:
+  build:
+    name: 🐋 Build docker image and push
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.SCW_REGISTRY_ENDPOINT }}
+          username: nologin
+          password: ${{ secrets.SCW_SECRET_KEY }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          tags: ${{ secrets.SCW_REGISTRY_ENDPOINT }}/${{ env.DOCKER_IMAGE }}
+          file: ./Dockerfile.editor
+  deploy:
+    needs:
+      - build
+    name: Deploy serverless container
+    runs-on: ubuntu-latest
+    steps:
+      - name: Scaleway Container Deploy action
+        uses: philibea/[email protected]
+        with:
+          type: deploy
+          scw_access_key: ${{ secrets.SCW_ACCESS_KEY }}
+          scw_secret_key: ${{ secrets.SCW_SECRET_KEY }}
+          scw_containers_namespace_id: ${{ secrets.CONTAINERS_NAMESPACE_ID }}
+          scw_registry: ${{ secrets.SCW_REGISTRY_ENDPOINT }}/${{ env.DOCKER_IMAGE }}
+          scw_memory_limit: 6144
+          scw_cpu_limit: 4000
+          scw_min_scale: 0
+          scw_max_scale: 1
+          scw_container_port: 3000
+          scw_max_concurrency: 80
+          scw_sandbox: v2

Dockerfile.editor

@@ -0,0 +1,29 @@
+# syntax=docker/dockerfile:1.4
+FROM node:20-bookworm
+RUN apt-get update
+RUN apt install -y \
+  libnss3 \
+  libdbus-1-3 \
+  libatk1.0-0 \
+  libgbm-dev \
+  libasound2 \
+  libxrandr2 \
+  libxkbcommon-dev \
+  libxfixes3 \
+  libxcomposite1 \
+  libxdamage1 \
+  libatk-bridge2.0-0 \
+  libcups2
+RUN corepack enable
+# Copy everything from your project to the Docker image. Adjust if needed.
+COPY --link package.json package*.json yarn.lock* pnpm-lock.yaml* bun.lockb* tsconfig.json* remotion.config.* .prettierrc* ./
+COPY --link remotion ./remotion
+# If you have a public folder:
+COPY --link public ./public
+COPY --link src ./src
+# Install the right package manager and dependencies. Adjust if needed.
+RUN git init
+# Install Chrome
+RUN pnpm install
+RUN pnpm browser
+CMD ["pnpm", "run:studio"]

package.json

@@ -10,6 +10,8 @@
 	},
 	"scripts": {
 		"start": "remotion preview remotion/index.tsx",
+		"run:studio": "remotion studio remotion/index.tsx",
+		"browser": "remotion browser ensure",
 		"upgrade": "remotion upgrade",
 		"lint": "eslint remotion app src __test__ --ext ts,tsx,js,jsx",
 		"test": "jest",

remotion/compositions/templates/event/Event.tsx

@@ -1,6 +1,6 @@
+import * as Bangers from '@remotion/google-fonts/Bangers';
 import {AbsoluteFill, Sequence} from 'remotion';
 
-import {loadGoogleFont} from '../../../../src/app/utils/loadFont';
 import {LottieAsset} from '../../../design/atoms/LottieAsset';
 import {Paillettes} from '../../../design/atoms/Paillettes';
 
@@ -12,23 +12,21 @@ export type EventProps = {
 	title: string;
 	lottieAsset?: string;
 	paillettesAsset?: string;
-	fontFamily?: string;
 };
 
+Bangers.loadFont();
+
 export const Event: React.FC<EventProps> = ({
 	backgroundImg = 'https://i.pinimg.com/originals/de/0d/19/de0d19d835dd1224c5208701d78bd6e7.jpg',
 	title,
 	lottieAsset = 'lf20_UDstUT',
 	paillettesAsset = 'lf20_tiviyc3p',
-	fontFamily = 'Bangers',
 }) => {
-	loadGoogleFont(fontFamily);
-
 	return (
 		<AbsoluteFill
 			style={{
 				overflow: 'hidden',
-				fontFamily,
+				fontFamily: Bangers.fontFamily,
 			}}
 		>
 			<Sequence name="Background">

remotion/design/atoms/Text.tsx

@@ -1,17 +1,13 @@
 import React, {ReactNode} from 'react';
 
-import {useSelectedFont} from '../../../src/app/hooks/useSelectedFont';
-
 export const Text: React.FC<{
 	children: ReactNode;
 	style?: React.CSSProperties;
 }> = ({children, style}) => {
-	const {selectedFont} = useSelectedFont();
-
 	return (
 		<span
 			style={{
-				fontFamily: selectedFont,
+				fontFamily: 'inherit',
 				height: 'max-content',
 				margin: 0,
 				padding: '0 20px',