upgrade and use prettier defaults

pomber · Apr 27, 2024 · aeac403 · aeac403
1 parent b9ea9ca
commit aeac403
Show file tree

Hide file tree

Showing 17 changed files with 833 additions and 846 deletions.
diff --git a/.prettierrc b/.prettierrc
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-	"editor.tabSize": 2,
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"typescript.enablePromptUseWorkspaceTsdk": true
+  "editor.tabSize": 2,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"remotion": "^4.0.0",
-		"zod": "^3.21.4"
+		"zod": "3.22.3"
 	},
 	"devDependencies": {
 		"@remotion/eslint-config": "^4.0.0",

diff --git a/remotion.config.ts b/remotion.config.ts
@@ -1,9 +1,9 @@
-import {Config} from '@remotion/cli/config';
+import { Config } from "@remotion/cli/config";
 
 /**
  * Note: When using the Node.JS APIs, the config file
  * doesn't apply. Instead, pass options directly to the APIs
  */
 
-Config.setVideoImageFormat('jpeg');
+Config.setVideoImageFormat("jpeg");
 Config.setDelayRenderTimeoutInMilliseconds(1200000);
diff --git a/src/Content.tsx b/src/Content.tsx
@@ -1,162 +1,162 @@
-import {Img, useVideoConfig} from 'remotion';
-import {Stargazer} from './cache';
-import {RepoHeader} from './repo-header';
+import { Img, useVideoConfig } from "remotion";
+import { Stargazer } from "./cache";
+import { RepoHeader } from "./repo-header";
 
 const W = 1280 / 2.5;
 const H = 720 / 2.5;
 
 export function Content({
-	stargazers,
-	repoOrg,
-	repoName,
-	progress,
+  stargazers,
+  repoOrg,
+  repoName,
+  progress,
 }: {
-	stargazers: Stargazer[];
-	repoOrg: string;
-	repoName: string;
-	progress: number;
+  stargazers: Stargazer[];
+  repoOrg: string;
+  repoName: string;
+  progress: number;
 }) {
-	const gap = 102;
-	const startY = 76 - gap;
-	const dy = progress * gap;
-	const {width} = useVideoConfig();
+  const gap = 102;
+  const startY = 76 - gap;
+  const dy = progress * gap;
+  const { width } = useVideoConfig();
 
-	return (
-		<div
-			style={{
-				flex: 1,
-				backgroundColor: '#f6f8fa',
-				position: 'relative',
-				maxWidth: W,
-				maxHeight: H,
-				minHeight: H,
-				transformOrigin: 'top left',
-				transform: `scale(${width / W})`,
-			}}
-		>
-			{stargazers.map((stargazer, index) => {
-				const isHidden = Math.abs(index - progress) > 3;
-				const grow = 0;
-				const opacity = Math.min(0.1 + progress - index, 1);
-				return isHidden ? null : (
-					<StarBox
-						key={stargazer.login}
-						avatarUrl={stargazer.avatarUrl}
-						name={stargazer.name}
-						date={stargazer.date}
-						repoName={repoName}
-						y={startY - gap * index + dy}
-						grow={grow}
-						opacity={opacity}
-						starNumber={index + 1}
-					/>
-				);
-			})}
+  return (
+    <div
+      style={{
+        flex: 1,
+        backgroundColor: "#f6f8fa",
+        position: "relative",
+        maxWidth: W,
+        maxHeight: H,
+        minHeight: H,
+        transformOrigin: "top left",
+        transform: `scale(${width / W})`,
+      }}
+    >
+      {stargazers.map((stargazer, index) => {
+        const isHidden = Math.abs(index - progress) > 3;
+        const grow = 0;
+        const opacity = Math.min(0.1 + progress - index, 1);
+        return isHidden ? null : (
+          <StarBox
+            key={stargazer.login}
+            avatarUrl={stargazer.avatarUrl}
+            name={stargazer.name}
+            date={stargazer.date}
+            repoName={repoName}
+            y={startY - gap * index + dy}
+            grow={grow}
+            opacity={opacity}
+            starNumber={index + 1}
+          />
+        );
+      })}
 
-			<RepoHeader stars={Math.round(progress)} org={repoOrg} name={repoName} />
-		</div>
-	);
+      <RepoHeader stars={Math.round(progress)} org={repoOrg} name={repoName} />
+    </div>
+  );
 }
 
 function StarBox({
-	avatarUrl,
-	name,
-	date,
-	repoName,
-	y,
-	starNumber,
-	grow,
-	opacity,
+  avatarUrl,
+  name,
+  date,
+  repoName,
+  y,
+  starNumber,
+  grow,
+  opacity,
 }: {
-	avatarUrl: string;
-	name: string;
-	date: string;
-	repoName: string;
-	y: number;
-	starNumber: number;
-	grow: number;
-	opacity: number;
+  avatarUrl: string;
+  name: string;
+  date: string;
+  repoName: string;
+  y: number;
+  starNumber: number;
+  grow: number;
+  opacity: number;
 }) {
-	const d = new Date(date);
-	const dateString = d.toLocaleDateString('en-US', {
-		month: 'short',
-		day: '2-digit',
-		year: 'numeric',
-	});
+  const d = new Date(date);
+  const dateString = d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });
 
-	return (
-		<div
-			style={{
-				background: 'white',
-				border: '1px solid #e1e4e8',
-				borderRadius: 6,
-				padding: 12,
-				display: 'flex',
-				position: 'absolute',
-				opacity,
-				top: 0,
-				right: 24,
-				left: 24,
-				height: 88,
-				minHeight: 88,
-				maxHeight: 88,
-				transform: `translateY(${y}px) scale(${1 + grow * 0.07})`,
-			}}
-		>
-			<Img
-				width="64"
-				height="64"
-				src={avatarUrl}
-				style={{borderRadius: '50%'}}
-			/>
-			<div
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					marginLeft: '12px',
-					flex: 1,
-					maxWidth: 560,
-					minWidth: 0,
-				}}
-			>
-				<h3
-					style={{
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-						maxWidth: 360,
-						fontWeight: 400,
-					}}
-				>
-					{name}
-				</h3>
-				<div
-					style={{
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-					}}
-				>
-					starred <b>{repoName}</b>{' '}
-					<span style={{color: '#586069'}}>on {dateString}</span>
-				</div>
-			</div>
-			<div
-				style={{
-					width: 64,
-					height: 64,
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}}
-			>
-				<span style={{fontSize: '0.8em', color: '#586069'}}>Star</span>
-				<div style={{fontSize: '1.2em'}}>
-					<span style={{fontSize: '1em', color: '#586069'}}>#</span>
-					{starNumber}
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div
+      style={{
+        background: "white",
+        border: "1px solid #e1e4e8",
+        borderRadius: 6,
+        padding: 12,
+        display: "flex",
+        position: "absolute",
+        opacity,
+        top: 0,
+        right: 24,
+        left: 24,
+        height: 88,
+        minHeight: 88,
+        maxHeight: 88,
+        transform: `translateY(${y}px) scale(${1 + grow * 0.07})`,
+      }}
+    >
+      <Img
+        width="64"
+        height="64"
+        src={avatarUrl}
+        style={{ borderRadius: "50%" }}
+      />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          marginLeft: "12px",
+          flex: 1,
+          maxWidth: 560,
+          minWidth: 0,
+        }}
+      >
+        <h3
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            maxWidth: 360,
+            fontWeight: 400,
+          }}
+        >
+          {name}
+        </h3>
+        <div
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          starred <b>{repoName}</b>{" "}
+          <span style={{ color: "#586069" }}>on {dateString}</span>
+        </div>
+      </div>
+      <div
+        style={{
+          width: 64,
+          height: 64,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontSize: "0.8em", color: "#586069" }}>Star</span>
+        <div style={{ fontSize: "1.2em" }}>
+          <span style={{ fontSize: "1em", color: "#586069" }}>#</span>
+          {starNumber}
+        </div>
+      </div>
+    </div>
+  );
 }