Initial simple todo app with sveltekit

2021-08-01 21:33:31 +02:00 · 2021-08-01 21:33:31 +02:00 · 82dc3948a5
commit 82dc3948a5
20 changed files with 3083 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,15 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'prettier'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+/.svelte-kit
+/package
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+.svelte-kit/**
+static/**
+build/**
+node_modules/**
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.js", "src/**/*.svelte"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,21 @@
+{
+  "name": "batracos-sveltekit",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+    "format": "prettier --write --plugin-search-dir=. ."
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "next",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-svelte3": "^3.2.0",
+    "prettier": "~2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
+    "svelte": "^3.34.0"
+  },
+  "type": "module"
+}
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@ -0,0 +1,102 @@
+<script>
+    import {todos} from "$lib/stores/todos.js"
+    let todo_text = ""
+    let addTodo = () => {
+        if (todo_text.length > 0) {
+            const todo = {
+                text: todo_text,
+                date: Date.now,
+                done: false
+            }
+            $todos = [todo, ...$todos];
+        }
+    }
+    let clearTodo = (todo) => {
+        if(todo.done)
+            $todos = $todos.filter(x => x != todo)
+        else
+            todo.done = true;
+            $todos = $todos;
+    }
+</script>
+
+<div class = "panel">
+    <h2 class= "title">
+    TODO
+    </h2>
+    <input bind:value="{todo_text}"/>
+    <button on:click="{addTodo}">Add</button>
+    <div class = "todo-list">
+        {#each $todos as todo}
+            <div class = "todo {todo.done ? 'done' : ''}">
+                <p>{todo.text}</p>
+                <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+
+input {
+    padding: 5px;
+    margin: 0px;
+    border: solid rgb(182, 182, 182) 1px;
+    border-radius: 5px;
+}
+
+button {
+    padding: 5px;
+    margin: 0px;
+    border: solid rgb(182, 182, 182) 1px;
+    border-radius: 5px;
+}
+
+.panel {
+    background-color: rgb(245, 253, 255);
+    padding: 10px;
+    border: solid rgb(182, 182, 182) 1px;
+    border-radius: 5px;
+}
+
+.title {
+    padding: 5px;
+    margin: 0px;
+    margin-left: 5px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-weight: 400;
+    font-size: 1.5rem;
+}
+
+/* .todo-list {
+    padding: 5px;
+    background-color: azure;
+    display: flex;
+    flex-direction: column;
+} */
+
+.todo {
+    padding: 10px;
+    margin: 5px 0px 5px 0px;
+    background-color: rgb(255, 255, 255);
+    border: solid rgb(182, 182, 182) 1px;
+    border-radius: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.done p {
+    text-decoration: line-through
+}
+
+.todo p {
+    padding: 0px;
+    margin: 0px 10px 0px 0px;
+}
+
+.todo button {
+    margin-left: auto;
+}
+
+</style>
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@ -0,0 +1,7 @@
+<footer>
+    <p>
+        made with ❤️
+        and 
+        <a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
+    </p>
+</footer>
--- a/src/lib/components/nav.svelte
+++ b/src/lib/components/nav.svelte
@ -0,0 +1,16 @@
+<nav class = "bg-gray-200 w-60 border-black border-2 rounded text-center">
+    <a class = "nav-button" href="/">Home</a>
+    <a class = "nav-button" href="/about">about</a>
+</nav>
+
+<style>
+    .nav-button {
+        margin: 5px;
+        padding: 5px;
+        background-color: rgb(235, 235, 235);
+    }
+
+    .nav-button:hover {
+        background-color: rgb(206, 206, 206);
+    }
+</style>
--- a/src/lib/stores/todos.js
+++ b/src/lib/stores/todos.js
@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const todos = writable([]);
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -0,0 +1,28 @@
+<script>
+    import Nav from "$lib/components/nav.svelte"
+    import Footer from "$lib/components/footer.svelte"
+</script>
+
+<div class="p-10 mx-auto flex flex-col items-center max-w-2xl site">
+<Nav/>
+<slot></slot>
+<Footer/>
+</div>
+
+<style>
+:global(a) {
+    text-decoration: none;
+    color : black
+}
+
+.site {
+    padding: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 50em;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@ -0,0 +1,2 @@
+<h1>About this</h1>
+<p>This is a test website using sveltekit</p>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -0,0 +1,5 @@
+<script>
+    import ToDo from "$lib/apps/todoApp.svelte"
+</script>
+<h1>APPS</h1>
+<ToDo/>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,9 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// hydrate the <div id="svelte"> element in src/app.html
+		target: '#svelte'
+	}
+};
+
+export default config;