Update template

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "@remotion"
+  "extends": "@remotion",
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "useTabs": false,
+  "bracketSpacing": true,
+  "tabWidth": 2
+}

package.json

@@ -1,27 +1,26 @@
 {
-	"name": "stargazer",
-	"version": "1.0.0",
-	"scripts": {
-		"start": "remotion studio",
-		"build": "remotion render main out/Main.mp4 --log verbose",
-		"test": "eslint src --ext ts,tsx,js,jsx && tsc"
-	},
-	"license": "UNLICENSED",
-	"dependencies": {
-		"@remotion/bundler": "^4.0.0",
-		"@remotion/cli": "^4.0.0",
-		"@remotion/renderer": "^4.0.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"remotion": "^4.0.0",
-		"zod": "3.22.3"
-	},
-	"devDependencies": {
-		"@remotion/eslint-config": "^4.0.0",
-		"@types/react": "^18.2.13",
-		"eslint": "^8.43.0",
-		"prettier": "^3.2.5",
-		"prettier-plugin-organize-imports": "^3.2.2",
-		"typescript": "5.4.5"
-	}
+  "name": "template-stargazer",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "remotion studio",
+    "build": "remotion render main out/Main.mp4 --log verbose",
+    "test": "eslint src --ext ts,tsx,js,jsx && tsc"
+  },
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@remotion/bundler": "^4.0.0",
+    "@remotion/cli": "^4.0.0",
+    "@remotion/renderer": "^4.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "remotion": "^4.0.0",
+    "zod": "3.22.3"
+  },
+  "devDependencies": {
+    "@remotion/eslint-config": "^4.0.0",
+    "@types/react": "18.3.1",
+    "eslint": "8.56.0",
+    "prettier": "3.3.3",
+    "typescript": "5.6.2"
+  }
 }

readme.md

@@ -4,12 +4,11 @@ Your repo reached a stars milestone? Celebrate with a video of your stargazers!
 
 https://user-images.githubusercontent.com/1911623/121809549-93342a80-cc33-11eb-88ff-e45f8b6dace4.mp4?width=200
 
-## There are 2 ways to make your Stargazer video. 
+## There are 2 ways to make your Stargazer video.
 
 1. Make your Video locally
 2. Make your Video using Github Actions (Easy)
 
-
 ## Make your own video (local)
 
 1. [Use this repo as a template](https://github.com/pomber/stargazer/generate)
@@ -37,31 +36,30 @@ npm start
 ## Make your own video (GitHub Actions)
 
 1. Fork this repo
-<img src="https://user-images.githubusercontent.com/1911623/121809008-75fe5c80-cc31-11eb-8f44-5df6183deca5.png" width="720"/>
+   <img src="https://user-images.githubusercontent.com/1911623/121809008-75fe5c80-cc31-11eb-8f44-5df6183deca5.png" width="720"/>
 
-2. Go to Actions of the forked repo. 
-<img src="https://user-images.githubusercontent.com/1911623/121809050-ae059f80-cc31-11eb-9af9-2aa05a24bc7f.png" width="720"/>
+2. Go to Actions of the forked repo.
+   <img src="https://user-images.githubusercontent.com/1911623/121809050-ae059f80-cc31-11eb-9af9-2aa05a24bc7f.png" width="720"/>
 
 3. Click on `I understand my workforce, go ahead and enable them `
-<img src="https://user-images.githubusercontent.com/1911623/121809098-e1482e80-cc31-11eb-9ffc-e4d34f419fb1.png" width="720"/>
+   <img src="https://user-images.githubusercontent.com/1911623/121809098-e1482e80-cc31-11eb-9ffc-e4d34f419fb1.png" width="720"/>
 
-4. Go to the render video option in the workforce. 
-<img src="https://user-images.githubusercontent.com/1911623/121809174-1e142580-cc32-11eb-84cc-c5aa19698fc1.png" width="720"/>
+4. Go to the render video option in the workforce.
+   <img src="https://user-images.githubusercontent.com/1911623/121809174-1e142580-cc32-11eb-84cc-c5aa19698fc1.png" width="720"/>
 
-5. Over here enter the details of the repo for which you want to make the Stargazer video. 
-<img src="https://user-images.githubusercontent.com/1911623/121809216-54ea3b80-cc32-11eb-8b22-7d74306adb9e.png" width="720"/>
+5. Over here enter the details of the repo for which you want to make the Stargazer video.
+   <img src="https://user-images.githubusercontent.com/1911623/121809216-54ea3b80-cc32-11eb-8b22-7d74306adb9e.png" width="720"/>
 
-6. Here you can see the progress of the rendering video. 
-<img src="https://user-images.githubusercontent.com/1911623/121809344-cf1ac000-cc32-11eb-93c3-cc6e58ff7988.png" width="720"/>
+6. Here you can see the progress of the rendering video.
+   <img src="https://user-images.githubusercontent.com/1911623/121809344-cf1ac000-cc32-11eb-93c3-cc6e58ff7988.png" width="720"/>
 
-7. By clicking on this you can get your Stargazer video. 
-<img src="https://user-images.githubusercontent.com/1911623/121809394-fb364100-cc32-11eb-8a82-e9a6d25f37cf.png" width="720"/>
+7. By clicking on this you can get your Stargazer video.
+   <img src="https://user-images.githubusercontent.com/1911623/121809394-fb364100-cc32-11eb-8a82-e9a6d25f37cf.png" width="720"/>
 
 ## Credits
 
 Made with [Remotion](https://www.remotion.dev/)
 
-
 ## License
 
 The code in this repository: Licensed under MIT.  

src/Root.tsx

@@ -1,12 +1,12 @@
 import { useCallback } from "react";
 import { CalculateMetadataFunction, Composition } from "remotion";
-import { fetchStargazers } from "./fetch/fetch-data";
 import { Main, MainProps, mainSchema } from "./Main";
+import { fetchStargazers } from "./fetch/fetch-data";
 import { waitForNoInput } from "./wait-for-no-input";
 
 const FPS = 30;
 
-export const RemotionRoot = () => {
+export function RemotionVideo() {
   const calculateMetadata: CalculateMetadataFunction<MainProps> = useCallback(
     async ({ props, abortSignal }) => {
       await waitForNoInput(abortSignal, 500);
@@ -48,4 +48,4 @@ export const RemotionRoot = () => {
       }}
     />
   );
-};
+}

src/fetch/fetch-data.ts

@@ -18,7 +18,7 @@ export async function fetchStargazers({
   console.log("Fetching stars...");
   if (!process.env.REMOTION_GITHUB_TOKEN) {
     console.error(
-      "No REMOTION_GITHUB_TOKEN environment variable found. Using the GitHub REST API instead of GraphQL, which has a lower rate-limit and does not have GitHub display names.",
+      "No REMOTION_GITHUB_TOKEN environment variable found. Using the GitHub REST API instead of GraphQL, which has a lower rate-limit and does not show the star dates.",
     );
 
     let page = 0;

src/index.ts

@@ -1,4 +1,4 @@
 import { registerRoot } from "remotion";
-import { RemotionRoot } from "./Root";
+import { RemotionVideo } from "./Root";
 
-registerRoot(RemotionRoot);
+registerRoot(RemotionVideo);