From 514229256b81245a997f55799fd401146f17ff03 Mon Sep 17 00:00:00 2001 From: Tobias Berger Date: Sun, 26 Sep 2021 16:04:20 +0200 Subject: [PATCH] Initial commit --- .eslintrc.cjs | 23 + .gitignore | 4 + .prettierrc | 0 .vscode/extensions.json | 3 + README.md | 107 +++ package.json | 48 + public/favicon.ico | Bin 0 -> 1150 bytes public/index.html | 91 ++ rollup.config.mjs | 94 ++ src/App.svelte | 9 + src/components/Footer.svelte | 21 + src/components/Header.svelte | 1 + src/components/Wrapper.svelte | 1 + src/global.d.ts | 1 + src/main.ts | 10 + src/styles/global.scss | 38 + src/styles/noscript.scss | 6 + src/styles/themes.scss | 191 ++++ tsconfig.json | 8 + yarn.lock | 1673 +++++++++++++++++++++++++++++++++ 20 files changed, 2329 insertions(+) create mode 100644 .eslintrc.cjs create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 .vscode/extensions.json create mode 100644 README.md create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 rollup.config.mjs create mode 100644 src/App.svelte create mode 100644 src/components/Footer.svelte create mode 100644 src/components/Header.svelte create mode 100644 src/components/Wrapper.svelte create mode 100644 src/global.d.ts create mode 100644 src/main.ts create mode 100644 src/styles/global.scss create mode 100644 src/styles/noscript.scss create mode 100644 src/styles/themes.scss create mode 100644 tsconfig.json create mode 100644 yarn.lock diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..530ea2d --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,23 @@ +module.exports = { + root: true, + parser: "@typescript-eslint/parser", + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "prettier", + ], + plugins: ["svelte3", "@typescript-eslint"], + overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }], + settings: { + "svelte3/typescript": () => require("typescript"), + }, + parserOptions: { + sourceType: "module", + ecmaVersion: 2019, + }, + env: { + browser: true, + es2017: true, + node: true, + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..da93220 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/public/build/ + +.DS_Store diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e69de29 diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..bdef820 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..51f5e46 --- /dev/null +++ b/README.md @@ -0,0 +1,107 @@ +_Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing._ + +_Looking for a shareable component template instead? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_ + +--- + +# svelte app + +This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. + +To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): + +```bash +npx degit sveltejs/template svelte-app +cd svelte-app +``` + +_Note that you will need to have [Node.js](https://nodejs.org) installed._ + +## Get started + +Install the dependencies... + +```bash +cd svelte-app +npm install +``` + +...then start [Rollup](https://rollupjs.org): + +```bash +npm run dev +``` + +Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. + +By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. + +If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense. + +## Building and running in production mode + +To create an optimised version of the app: + +```bash +npm run build +``` + +You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). + +## Single-page app mode + +By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. + +If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json: + +```js +"start": "sirv public --single" +``` + +## Using TypeScript + +This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: + +```bash +node scripts/setupTypeScript.js +``` + +Or remove the script via: + +```bash +rm scripts/setupTypeScript.js +``` + +If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte). + +## Deploying to the web + +### With [Vercel](https://vercel.com) + +Install `vercel` if you haven't already: + +```bash +npm install -g vercel +``` + +Then, from within your project folder: + +```bash +cd public +vercel deploy --name my-project +``` + +### With [surge](https://surge.sh/) + +Install `surge` if you haven't already: + +```bash +npm install -g surge +``` + +Then, from within your project folder: + +```bash +npm run build +surge public my-project.surge.sh +``` diff --git a/package.json b/package.json new file mode 100644 index 0000000..08939a5 --- /dev/null +++ b/package.json @@ -0,0 +1,48 @@ +{ + "name": "svelte-shark-game", + "version": "0.0.1", + "private": true, + "main": "public/", + "homepage": "http://shark.tobot.dev/", + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "start": "sirv public --no-clear", + "check": "svelte-check --tsconfig ./tsconfig.json", + "lint": "yarn lint:prettier && yarn lint:eslint", + "lint:prettier": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . ", + "lint:eslint": "eslint --ignore-path .gitignore ./src/", + "fix": "yarn fix:prettier && yarn fix:eslint", + "fix:prettier": "prettier --ignore-path .gitignore --write --plugin-search-dir=. . ", + "fix:eslint": "eslint --fix --ignore-path .gitignore ./src/" + }, + "devDependencies": { + "@rollup/plugin-commonjs": "^17.0.0", + "@rollup/plugin-node-resolve": "^11.0.0", + "@rollup/plugin-typescript": "^8.0.0", + "@tsconfig/svelte": "^2.0.0", + "@typescript-eslint/eslint-plugin": "^4.31.2", + "@typescript-eslint/parser": "^4.31.2", + "autoprefixer": "^10.3.6", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-svelte3": "^3.2.1", + "postcss": "^8.3.8", + "prettier": "^2.4.1", + "prettier-plugin-svelte": "^2.4.0", + "rollup": "^2.3.4", + "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-scss": "^3.0.0", + "rollup-plugin-svelte": "^7.0.0", + "rollup-plugin-terser": "^7.0.0", + "sass": "^1.42.1", + "svelte": "^3.0.0", + "svelte-check": "^2.0.0", + "svelte-preprocess": "^4.0.0", + "tslib": "^2.0.0", + "typescript": "^4.0.0" + }, + "dependencies": { + "sirv-cli": "^1.0.0" + } +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a2c0b48df1050413dfa158a0aebb9330e994818e GIT binary patch literal 1150 zcmb`Hu}TAB5QH}%B4-l?LrP1ru(z_Xx62dQSlifITKOPaq!n!P9)jt7h6uuCzY8C1 zjtivl!ruHhJ2Sg?MIuJ|8;>LJ=kah5F^PzatfZ3J@CgywJ3Zc1_xumHx0k2(@%F0S zCkh>Uwbzrw_UrS#eZ9Zi%77m#bm;NZpIx4H=bFKcUDfy2z3KTbP1AHcG0%dldpkpp zUEt7jkyQ(>?pmxWF(@9%8q>ILESiEvi+qi3FeHTbwdIW_FzeDldr$63D~ z5l!`zV+M#$zcVV*C!@YY?dxTCcu|f1{tout+vg!PW2iU8k=f_Tkn8U#59$?bZ{PE- oe7?}lPsB9;8=j9M7SpVgJdd_(v5HuIMEw5c_xz4n&J&jrYyQwy%m4rY literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9f01335 --- /dev/null +++ b/public/index.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rollup.config.mjs b/rollup.config.mjs new file mode 100644 index 0000000..656190d --- /dev/null +++ b/rollup.config.mjs @@ -0,0 +1,94 @@ +import svelte from "rollup-plugin-svelte"; +import commonjs from "@rollup/plugin-commonjs"; +import resolve from "@rollup/plugin-node-resolve"; +import livereload from "rollup-plugin-livereload"; +import { terser } from "rollup-plugin-terser"; +import sveltePreprocess from "svelte-preprocess"; +import typescript from "@rollup/plugin-typescript"; +import scss from "rollup-plugin-scss"; +import sass from "sass"; +import postcss from "postcss"; +import autoprefixer from "autoprefixer"; +import child_process from "child_process"; + +const production = !process.env.ROLLUP_WATCH; + +function serve() { + let server; + + function toExit() { + if (server) server.kill(0); + } + + return { + writeBundle() { + if (server) return; + server = child_process.spawn("npm", ["run", "start", "--", "--dev"], { + stdio: ["ignore", "inherit", "inherit"], + shell: true, + }); + + process.on("SIGTERM", toExit); + process.on("exit", toExit); + }, + }; +} + +export default { + input: "src/main.ts", + output: { + sourcemap: true, + format: "iife", + name: "app", + file: "public/build/bundle.js", + }, + plugins: [ + svelte({ + preprocess: sveltePreprocess({ sourceMap: true }), + compilerOptions: { + // enable run-time checks when not in production + dev: !production, + }, + }), + // we'll extract any component CSS out into + // a separate file - better for performance + scss({ + output: "public/build/bundle.css", + outputStyle: production ? "compressed" : "expanded", + sass, + processor() { + return postcss([autoprefixer({})]); + }, + }), + + // If you have external dependencies installed from + // npm, you'll most likely need these plugins. In + // some cases you'll need additional configuration - + // consult the documentation for details: + // https://github.com/rollup/plugins/tree/master/packages/commonjs + resolve({ + browser: true, + dedupe: ["svelte"], + }), + commonjs(), + typescript({ + sourceMap: true, + inlineSources: !production, + }), + + // In dev mode, call `npm run start` once + // the bundle has been generated + !production && serve(), + + // Watch the `public` directory and refresh the + // browser on changes when not in production + !production && livereload("public"), + + // If we're building for production (npm run build + // instead of npm run dev), minify + production && terser(), + ], + watch: { + clearScreen: false, + }, +}; diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..6746229 --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,9 @@ + + +
+ +