Inital commit
This commit is contained in:
Leon Grünewald
commit
8a99aa5790
13 changed files with 3838 additions and 0 deletions
37
README.md
Normal file
37
README.md
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
# Farm + Svelte
|
||||||
|
|
||||||
|
This template should help you start developing using Svelte and TypeScript in Farm.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Get Started
|
||||||
|
|
||||||
|
Start the dev server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm start
|
||||||
|
```
|
||||||
|
|
||||||
|
Build the app for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
Preview the Production build product:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Clear persistent cache local files
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm clean
|
||||||
|
```
|
||||||
6
farm.config.ts
Normal file
6
farm.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineConfig } from '@farmfe/core';
|
||||||
|
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
vitePlugins: [svelte()]
|
||||||
|
});
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="./src/app.css" />
|
||||||
|
<title>Homo Streams</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="./src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "svelte-template",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "farm",
|
||||||
|
"start": "farm",
|
||||||
|
"build": "farm build",
|
||||||
|
"preview": "farm preview",
|
||||||
|
"clean": "farm clean",
|
||||||
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@farmfe/cli": "^1.0.2",
|
||||||
|
"@farmfe/core": "^1.3.0",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||||
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
|
"core-js": "^3.36.1",
|
||||||
|
"svelte": "^4.2.12",
|
||||||
|
"svelte-check": "^3.6.8",
|
||||||
|
"tslib": "^2.6.2",
|
||||||
|
"typescript": "^5.4.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
3638
pnpm-lock.yaml
Normal file
3638
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
69
src/App.svelte
Normal file
69
src/App.svelte
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
let streams = [];
|
||||||
|
let fracs = 0;
|
||||||
|
let containerElement;
|
||||||
|
let showButtons = false;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
streams = new URLSearchParams(window.location.search).getAll("streams");
|
||||||
|
console.log(streams.length);
|
||||||
|
fracs = Math.ceil(streams.length / 2);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="buttons">
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
showButtons = !showButtons;
|
||||||
|
}}>[{showButtons ? "x" : " "}]</button
|
||||||
|
>
|
||||||
|
{#if showButtons}
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
if (containerElement) {
|
||||||
|
containerElement.requestFullscreen();
|
||||||
|
}
|
||||||
|
}}>Fullscreen</button
|
||||||
|
>
|
||||||
|
<button>Placeholder</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
bind:this={containerElement}
|
||||||
|
class="streams"
|
||||||
|
style={"grid-template-rows: repeat(" +
|
||||||
|
fracs +
|
||||||
|
", 1fr); grid-template-columns: repeat(" +
|
||||||
|
fracs +
|
||||||
|
", 1fr)"}
|
||||||
|
>
|
||||||
|
{#if streams}
|
||||||
|
{#each streams as stream}
|
||||||
|
<iframe title={stream} src={"https://vdo.ninja/?view=" + stream}
|
||||||
|
></iframe>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.streams {
|
||||||
|
display: grid;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
4
src/app.css
Normal file
4
src/app.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
7
src/main.js
Normal file
7
src/main.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import App from "./App.svelte";
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.getElementById("app"),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
7
svelte.config.js
Normal file
7
svelte.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
}
|
||||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
/**
|
||||||
|
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||||
|
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||||
|
* Note that setting allowJs false does not prevent the use
|
||||||
|
* of JS in `.svelte` files.
|
||||||
|
*/
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
tsconfig.node.json
Normal file
11
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["farm.config.ts"]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue