Globe!

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 .cache/
 /public
 .DS_store
-./dist
+./dist
+.idea

.prettierignore

@@ -3,4 +3,7 @@ node_modules
 /public
 .env
 /src/public
-/src/static
+
+/**/static
+
+*.glsl

astro.config.ts

@@ -17,10 +17,12 @@ export default defineConfig({
 		name: "test",
 		hooks: {
 			"astro:build:done": async ({ routes }) => {
+				if (process.env.NODE_ENV !== "production") return;
+
 				const files = routes
 					.filter((route) => route.type === "page")
 					.map(({ distURL }) => distURL)
-					.filter((url): url is URL => typeof url !== 'undefined');
+					.filter((url): url is URL => typeof url !== "undefined");
 
 				for (const { pathname } of files) {
 					const htmlFile = readFileSync(pathname, "utf-8");

package.json

@@ -18,10 +18,12 @@
 		"node": "^20"
 	},
 	"dependencies": {
-		"clsx": "1.2.1"
+		"three": "0.160.0",
+		"tailwind-merge": "2.2.0"
 	},
 	"devDependencies": {
 		"@types/node": "20.11.0",
+		"@types/three": "0.160.0",
 		"astro": "4.1.2",
 		"autoprefixer": "10.4.16",
 		"htmlnano": "2.1.0",

src/components/earth/earth.astro

@@ -0,0 +1,27 @@
+---
+import { Picture } from 'astro:assets';
+import Earth from "./static/earth-alpha-map.png";
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+	className?: string;
+}
+
+const { className } = Astro.props;
+---
+
+<my-earth class={twMerge("block aspect-[4/3] w-[100%]", className)}>
+	<Picture
+		src={Earth}
+		class="invisible"
+		formats={["webp", "png"]}
+		aspectRatio="2:1"
+		alt=""
+		role="presentation"
+		aria-hidden="true"
+	/>
+</my-earth>
+<script>
+    import {MyEarth} from "./my-earth.wc.ts";
+		customElements.define("my-earth", MyEarth);
+</script>