feat: initial release

2026-02-03 20:41:44 +05:00
commit 021d9f3eda
30 changed files with 2021 additions and 0 deletions
@@ -0,0 +1,23 @@
 node_modules
 # Output
 .output
 .vercel
 .netlify
 .wrangler
 /.svelte-kit
 /build
 # OS
 .DS_Store
 Thumbs.db
 # Env
 .env
 .env.*
 !.env.example
 !.env.test
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
@@ -0,0 +1 @@
 engine-strict=true
@@ -0,0 +1,42 @@
 # sv
 Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 ## Creating a project
 If you're seeing this, you've probably already done this step. Congrats!
 ```sh
 # create a new project
 npx sv create my-app
 ```
 To recreate this project with the same configuration:
 ```sh
 # recreate this project
 npx sv create --template minimal --types ts --install npm twitch-panels
 ```
 ## Developing
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 ```sh
 npm run dev
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
 ## Building
 To create a production version of your app:
 ```sh
 npm run build
 ```
 You can preview the production build with `npm run preview`.
 > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
@@ -0,0 +1,28 @@
 {
 	"name": "twitch-panels",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@types/node": "^25.1.0",
 		"svelte": "^5.48.2",
 		"svelte-check": "^4.3.5",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"svelte-konva": "^1.0.1"
 	}
 }
@@ -0,0 +1,13 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}
 	}
 }
 export {};
@@ -0,0 +1,11 @@
 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
@@ -0,0 +1,33 @@
 import { building } from "$app/environment";
 import { readdirSync } from "node:fs";
 import { join } from "path";
 export function loadFonts() {
  try {
    const fontsDir = join(process.cwd(), "static", "fonts");
    console.log(fontsDir);
    const files = readdirSync(fontsDir);
    console.log(files);
    let fonts = files
      .filter((file) => /\.(woff2|woff|ttf|otf)$/i.test(file))
      .map((file) => ({
        name: file.replace(/\.[^/.]+$/, ""),
        file,
        url: `/fonts/${file}`,
        format: getFormat(file),
      }));
    return fonts;
  } catch (error) {
    console.log("err");
    return [];
  }
 }
 function getFormat(filename: string) {
  if (filename.endsWith(".woff2")) return "woff2";
  if (filename.endsWith(".woff")) return "woff";
  if (filename.endsWith(".ttf")) return "truetype";
  return "opentype";
 }
@@ -0,0 +1,16 @@
 import { building } from "$app/environment";
 import { readdirSync } from "node:fs";
 import { join } from "path";
 export function loadImages() {
  try {
    const imagesDir = join(process.cwd(), "static", "backgrounds");
    const files = readdirSync(imagesDir);
    let fonts = files.filter((file) => /\.(png|jpg)$/i.test(file));
    return fonts;
  } catch (error) {
    return [];
  }
 }
@@ -0,0 +1,2 @@
 export const ssr = true;
 export const prerender = true;
@@ -0,0 +1,15 @@
 import { loadFonts } from "$lib/fonts";
 import { loadImages } from "$lib/images";
 import type { PageLoad } from "./$types";
 export async function load(): Promise<PageLoad> {
  let images = loadImages();
  let fonts = loadFonts();
  return {
    images,
    fonts,
  };
 }
 export const prerender = true;
@@ -0,0 +1,126 @@
 <script lang="ts">
  //   import { Stage, Layer, Image, Text } from "svelte-konva";
  import type { PageProps } from "./$types";
  import { onMount } from "svelte";
  import { browser } from "$app/environment";
  let { data }: PageProps = $props();
  let Stage: any = $state(undefined);
  let Layer: any = $state(undefined);
  let Image: any = $state(undefined);
  let Text: any = $state(undefined);
  // svelte-ignore state_referenced_locally
  let images = data.images;
  // svelte-ignore state_referenced_locally
  let fonts = data.fonts;
  console.log(images);
  console.log(fonts);
  let fontsStyle = fonts
    .map(({ name, url, file, format }: { name: string; url: string; file: string; format: string }) => {
      const result = `
        @font-face {
          font-family: '${name}';
          src: url('${url}') format(${format});
        }
      `;
      return result;
    })
    .join("");
  let selectedImage = $state(0);
  let text = $state("текст");
  let selectedFont = $state("");
  let image: HTMLImageElement | undefined = $state(undefined);
  $effect(() => {
    const img = document.createElement("img");
    img.src = `./backgrounds/${images[selectedImage]}`;
    img.onload = () => (image = img);
  });
  onMount(async () => {
    if (!browser) return;
    const svelteKonva = await import("svelte-konva");
    Stage = svelteKonva.Stage;
    Layer = svelteKonva.Layer;
    Image = svelteKonva.Image;
    Text = svelteKonva.Text;
  });
  function download() {}
 </script>
 <svelte:head>
  {@html `
    <style>
      ${fontsStyle}
    </style>
  `}
 </svelte:head>
 <div class="preview">
  <h1>Preview</h1>
  <Stage width={320} height={100}>
    <Layer>
      <Image
        {image}
        width="320"
        height="100"
        crop={{
          x: 0,
          y: 0,
          width: 320,
          height: 100,
        }}
      />
      <Text
        {text}
        fontSize={18}
        fill="white"
        fontFamily={selectedFont}
        align="center"
        verticalAlign="middle"
        width="320"
        height="100"
      />
    </Layer>
  </Stage>
 </div>
 <label>
  Введите текст:
  <input type="text" bind:value={text} />
 </label>
 <label>
  Выберите шрифт:
  <select bind:value={selectedFont}>
    {#each fonts as font}
      <option value={font.name}>{font.name}</option>
    {/each}
  </select>
 </label>
 <button onclick={download}>Скачать</button>
 <div class="img-selection">
  {#each images as image, idx (image)}
    <button class="img-select-button" onclick={() => (selectedImage = idx)}>
      <img src={`./backgrounds/${image}`} alt="img selection" />
    </button>
  {/each}
 </div>
 <style>
  .img-select-button {
    border: none;
    padding: 0;
    margin: 8px;
  }
 </style>
@@ -0,0 +1,9 @@
 import type { PageLoad } from "./$types";
 export function load(): PageLoad {
  return {
    images: imageFiles,
  };
 }
 export const prerender = true;
@@ -0,0 +1,3 @@
 # allow crawling everything by default
 User-agent: *
 Disallow:
@@ -0,0 +1,24 @@
 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      pages: "build",
      assets: "build",
      fallback: undefined,
      precompress: false,
      strict: true,
    }),
    output: {
      bundleStrategy: "inline",
    },
    paths: {
      base: "",
    },
  },
 };
 export default config;
@@ -0,0 +1,20 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"rewriteRelativeImportExtensions": true,
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler"
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//
 	// To make changes to top-level options such as include and exclude, we recommend extending
 	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
 }
@@ -0,0 +1,6 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 export default defineConfig({
  plugins: [sveltekit()],
 });
		`@@ -0,0 +1,2 @@`
							`export const ssr = true;`
							`export const prerender = true;`