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