Initial version

uqbar-project · Nov 13, 2024 · 54aa8e2 · 54aa8e2
1 parent 10172c7
commit 54aa8e2
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 10 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,39 @@
+name: Build
+on:
+  push:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Run tests & linter
+        run: |
+          npm ci
+          npm run lint
+          npm run test
+      # - name: Upload coverage to Codecov
+      #   uses: codecov/codecov-action@v4
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.prettierrc b/.prettierrc
@@ -1,9 +1,13 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
+	"tabWidth": 2,
+	"semi": false,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": [
+		"prettier-plugin-svelte"
+	],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -12,4 +16,4 @@
 			}
 		}
 	]
-}
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+}
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export {};
+export { }
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&display=swap" rel="stylesheet">
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/demo.spec.ts b/src/demo.spec.ts
@@ -1,7 +1,7 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from 'vitest'
 
 describe('sum test', () => {
 	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
+		expect(1 + 2).toBe(3)
+	})
+})
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +1,26 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang='ts'>
+  import './styles.css';
+
+  const LONGITUD_MAXIMA = 140
+
+  const claseEspacioRestante = (restantes: number): string =>
+    restantes > 10 ? 'ok' : (restantes > 5 ? 'limite' : 'pasado')
+
+  let tweet = $state('')
+  let restantes = $derived(LONGITUD_MAXIMA - tweet.length)
+  let espacioRestanteClass = $derived(claseEspacioRestante(restantes))
+</script>
+
+<article class="container">
+  <h1>Twitter - Svelte</h1>
+  <form name="form" class="form">
+    <div>
+      <textarea id="texto" name="texto" data-testid="texto" placeholder="¿Qué estás pensando?" bind:value={tweet}></textarea>
+    </div>
+    <div>
+      <span data-testid="restantes" class="badge {espacioRestanteClass}">
+        {restantes}
+      </span>
+    </div>
+  </form>
+</article>
diff --git a/src/routes/styles.css b/src/routes/styles.css
@@ -0,0 +1,44 @@
+* {
+  font-family: "Geist Mono", sans-serif;
+  box-sizing: border-box;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+}
+
+h1 {
+  font-size: 1.7rem;
+}
+
+input,
+textarea {
+  width: 100%;
+  height: 10em;
+  font-size: 1em;
+  margin-bottom: 2em;
+  padding: 0.8em;
+  border: 1px solid darkslategray;
+}
+
+.badge {
+  font-size: 1.2em;
+  padding: 1em;
+  border-radius: 35%;
+}
+
+.pasado {
+  color: white;
+  background-color: rgb(201, 72, 72);
+}
+
+.limite {
+  background-color: rgb(203, 203, 31);
+}
+
+.ok {
+  color: white;
+  background-color: green;
+}
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ declare global { @@
     	}
     }
-    export {};
+    export { }