Add build step to twitter-large-card due to TSX "UNKNOWN FILE EXTENSION" error

We can remove this when https://github.com/esbuild-kit/tsx/issues/74 is merged

build-scripts/social-previews/.gitignore

@@ -0,0 +1 @@
+*.js

build-scripts/social-previews/shared-post-preview-png.ts

@@ -8,12 +8,22 @@ import { COLORS } from "constants/theme";
 
 import { unified } from "unified";
 import remarkParse from "remark-parse";
-import remarkTwoslash from "remark-shiki-twoslash";
+import { default as remarkTwoslashDefault } from "remark-shiki-twoslash";
 import remarkToRehype from "remark-rehype";
 import { findAllAfter } from "unist-util-find-all-after";
 import rehypeStringify from "rehype-stringify";
 import { fileURLToPath } from "url";
 
+const remarkTwoslash = (
+	remarkTwoslashDefault as never as { default: typeof remarkTwoslashDefault }
+).default
+	? (
+			remarkTwoslashDefault as never as {
+				default: typeof remarkTwoslashDefault;
+			}
+	  ).default
+	: remarkTwoslashDefault;
+
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const unifiedChain = () => {
@@ -87,7 +97,7 @@ export const renderPostPreviewToString = async (post: PostInfo) => {
 	// This needs to happen here, since otherwise the `import` is stale at runtime,
 	// thus breaking live refresh
 	const TwitterLargeCard = // We need `?update=""` to cache bust for live reload
-		(await import(`./twitter-large-card.tsx?update=${Date.now()}`)).default;
+		(await import(`./twitter-large-card.js?update=${Date.now()}`)).default;
 
 	const authorImagesStrs = post.authorsMeta.map((author) =>
 		readFileAsBase64(author.profileImgMeta.absoluteFSPath)

build-scripts/social-previews/twitter-large-card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'preact';
-import { PostInfo } from "types/PostInfo";
+import type { PostInfo } from "types/PostInfo";
 
 export function splitSentence(str: string): [string, string] {
   const splitStr = str.split(" ");

package.json

@@ -30,8 +30,9 @@
 		"format": "prettier -w . --cache --plugin-search-dir=.",
 		"lint": "eslint . --ext .js,.ts,.astro",
 		"search-index": "tsx build-scripts/search-index.ts",
-		"social-previews:build": "node node_modules/puppeteer-core/install.js && tsx --tsconfig tsconfig.script.json build-scripts/social-previews/index.ts",
-		"social-previews:dev": "tsx --tsconfig tsconfig.script.json build-scripts/social-previews/live-server.ts",
+		"social-previews:prebuild": "tsc -p  tsconfig.script.json",
+		"social-previews:build": "npm run social-previews:prebuild && node node_modules/puppeteer-core/install.js && tsx --tsconfig tsconfig.script.json build-scripts/social-previews/index.ts",
+		"social-previews:dev": "npm run social-previews:prebuild && tsx --tsconfig tsconfig.script.json build-scripts/social-previews/live-server.ts",
 		"epub": "tsx --tsconfig tsconfig.script.json build-scripts/generate-epubs.ts",
 		"tsc": "tsc --noEmit && astro check",
 		"test": "jest",

src/constants/.gitignore

@@ -0,0 +1 @@
+*.js

src/types/.gitignore

@@ -0,0 +1 @@
+*.js

tsconfig.script.json

@@ -1,7 +1,10 @@
 {
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
-		"module": "CommonJS",
-		"jsx": "react"
-	}
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact"
+	},
+	"files": [
+		"build-scripts/social-previews/twitter-large-card.tsx"
+	]
 }