initial commit

templates/base/src/App.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { asset } from "./lib/assets";
+  import type { EZPPLauncherThemeAPI } from "./types";
+
+  const props: { api: EZPPLauncherThemeAPI } = $props();
+</script>
+
+<div class="w-full h-full flex flex-col items-center justify-center">
+  <audio src={asset(props.api, "audio.mp3")} loop autoplay></audio>
+  <img src={asset(props.api, "dance.gif")} alt="Dance" />
+</div>

templates/base/src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

templates/base/src/app.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.webp';
+declare module '*.svg';

templates/base/src/lib/assets.ts

@@ -0,0 +1,9 @@
+import type { EZPPLauncherThemeAPI } from "../types";
+
+export function asset(api: EZPPLauncherThemeAPI, path: string) {
+  const isDev = import.meta.env.DEV;
+
+  return isDev
+    ? `/assets/${path}`
+    : `${api.assets}/${path}`;
+}

templates/base/src/main.ts

@@ -0,0 +1,14 @@
+// @ts-ignore: side-effect CSS import declaration not available in this context
+import "./app.css";
+import App from "./App.svelte";
+import { mount } from "svelte";
+import type { EZPPLauncherThemeAPI } from "./types";
+
+export function mountTheme(target: HTMLElement, api: EZPPLauncherThemeAPI) {
+  mount(App, {
+    target,
+    props: {
+      api,
+    },
+  });
+}

templates/base/src/types.ts

@@ -0,0 +1,3 @@
+export type EZPPLauncherThemeAPI = {
+  assets: string;
+}