commit d65e56cdc9649b66d52f52b355ba13045a91c902 Author: Borja Robert Date: Fri Sep 23 13:23:57 2022 +0200 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..64007bd --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +.vercel +.output diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a77fdde --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..5c91169 --- /dev/null +++ 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 create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app +``` + +## 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 + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..fe45e13 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..328d432 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "carteles", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", + "lint": "prettier --plugin-search-dir . --check .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "next", + "@sveltejs/kit": "next", + "@types/cookie": "^0.5.1", + "prettier": "^2.6.2", + "prettier-plugin-svelte": "^2.7.0", + "svelte": "^3.46.0", + "svelte-check": "^2.7.1", + "typescript": "^4.7.4", + "vite": "^3.1.0" + }, + "type": "module", + "dependencies": { + "@fontsource/fira-mono": "^4.5.0" + } +} diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..77bf6af --- /dev/null +++ b/src/app.css @@ -0,0 +1,107 @@ +@import '@fontsource/fira-mono'; + +:root { + font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'Fira Mono', monospace; + --pure-white: #ffffff; + --primary-color: #b9c6d2; + --secondary-color: #d0dde9; + --tertiary-color: #edf0f8; + --accent-color: #ff3e00; + --heading-color: rgba(0, 0, 0, 0.7); + --text-color: #444444; + --background-without-opacity: rgba(255, 255, 255, 0.7); + --column-width: 42rem; + --column-margin-top: 4rem; +} + +body { + min-height: 100vh; + margin: 0; + background-color: var(--primary-color); + background: linear-gradient( + 180deg, + var(--primary-color) 0%, + var(--secondary-color) 10.45%, + var(--tertiary-color) 41.35% + ); +} + +body::before { + content: ''; + width: 80vw; + height: 100vh; + position: absolute; + top: 0; + left: 10vw; + z-index: -1; + background: radial-gradient( + 50% 50% at 50% 50%, + var(--pure-white) 0%, + rgba(255, 255, 255, 0) 100% + ); + opacity: 0.05; +} + +#svelte { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +h1, +h2, +p { + font-weight: 400; + color: var(--heading-color); +} + +p { + line-height: 1.5; +} + +a { + color: var(--accent-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1 { + font-size: 2rem; + text-align: center; +} + +h2 { + font-size: 1rem; +} + +pre { + font-size: 16px; + font-family: var(--font-mono); + background-color: rgba(255, 255, 255, 0.45); + border-radius: 3px; + box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); + padding: 0.5em; + overflow-x: auto; + color: var(--text-color); +} + +input, +button { + font-size: inherit; + font-family: inherit; +} + +button:focus:not(:focus-visible) { + outline: none; +} + +@media (min-width: 720px) { + h1 { + font-size: 2.4rem; + } +} diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..f567535 --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,14 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +// and what to do when importing types +declare namespace App { + interface Locals { + userid: string; + } + + // interface PageData {} + + // interface Error {} + + // interface Platform {} +} diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..5b53ef7 --- /dev/null +++ b/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/src/hooks.server.js b/src/hooks.server.js new file mode 100644 index 0000000..d30c399 --- /dev/null +++ b/src/hooks.server.js @@ -0,0 +1,15 @@ +/** @type {import('@sveltejs/kit').Handle} */ +export const handle = async ({ event, resolve }) => { + let userid = event.cookies.get('userid'); + + if (!userid) { + // if this is the first time the user has visited this app, + // set a cookie so that we recognise them when they return + userid = crypto.randomUUID(); + event.cookies.set('userid', userid, { path: '/' }); + } + + event.locals.userid = userid; + + return resolve(event); +}; diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte new file mode 100644 index 0000000..dd7aa09 --- /dev/null +++ b/src/lib/Counter.svelte @@ -0,0 +1,107 @@ + + +
+ + +
+
+ + {Math.floor($displayed_count)} +
+
+ + +
+ + diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte new file mode 100644 index 0000000..b769f44 --- /dev/null +++ b/src/lib/header/Header.svelte @@ -0,0 +1,126 @@ + + +
+
+ + SvelteKit + +
+ + + +
+ +
+
+ + diff --git a/src/lib/header/svelte-logo.svg b/src/lib/header/svelte-logo.svg new file mode 100644 index 0000000..49492a8 --- /dev/null +++ b/src/lib/header/svelte-logo.svg @@ -0,0 +1 @@ +svelte-logo \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..51316ff --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,45 @@ + + +
+ +
+ +
+ + + + diff --git a/src/routes/+page.js b/src/routes/+page.js new file mode 100644 index 0000000..189f71e --- /dev/null +++ b/src/routes/+page.js @@ -0,0 +1 @@ +export const prerender = true; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..1382a3e --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,57 @@ + + + + Home + + + +
+

+ + + + Welcome + + + + to your new
SvelteKit app +

+ +

+ try editing src/routes/+page.svelte +

+ + +
+ + diff --git a/src/routes/about/+page.js b/src/routes/about/+page.js new file mode 100644 index 0000000..3e13462 --- /dev/null +++ b/src/routes/about/+page.js @@ -0,0 +1,9 @@ +import { dev } from '$app/environment'; + +// we don't need any JS on this page, though we'll load +// it in dev so that we get hot module replacement... +export const csr = dev; + +// since there's no dynamic data here, we can prerender +// it so that it gets served as a static asset in prod +export const prerender = true; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..b034478 --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,34 @@ + + About + + + +
+

About this app

+ +

+ This is a SvelteKit app. You can make your own by typing the + following into your command line and following the prompts: +

+ + 
npm create svelte@latest
+ +

+ The page you're looking at is purely static HTML, with no client-side interactivity needed. + Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening + the devtools network panel and reloading. +

+ +

+ The TODOs page illustrates SvelteKit's data loading and form handling. Try using + it with JavaScript disabled! +

+
+ + diff --git a/src/routes/todos/+page.server.js b/src/routes/todos/+page.server.js new file mode 100644 index 0000000..a3ce2ba --- /dev/null +++ b/src/routes/todos/+page.server.js @@ -0,0 +1,66 @@ +import { error } from '@sveltejs/kit'; +import { api } from './api'; + +/** + * @typedef {{ + * uid: string; + * created_at: Date; + * text: string; + * done: boolean; + * pending_delete: boolean; + * }} Todo + */ + +/** @type {import('./$types').PageServerLoad} */ +export const load = async ({ locals }) => { + // locals.userid comes from src/hooks.js + const response = await api('GET', `todos/${locals.userid}`); + + if (response.status === 404) { + // user hasn't created a todo list. + // start with an empty array + return { + /** @type {Todo[]} */ + todos: [] + }; + } + + if (response.status === 200) { + return { + /** @type {Todo[]} */ + todos: await response.json() + }; + } + + throw error(response.status); +}; + +/** @type {import('./$types').Actions} */ +export const actions = { + add: async ({ request, locals }) => { + const form = await request.formData(); + + await api('POST', `todos/${locals.userid}`, { + text: form.get('text') + }); + }, + edit: async ({ request, locals }) => { + const form = await request.formData(); + + await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, { + text: form.get('text') + }); + }, + toggle: async ({ request, locals }) => { + const form = await request.formData(); + + await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, { + done: !!form.get('done') + }); + }, + delete: async ({ request, locals }) => { + const form = await request.formData(); + + await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`); + } +}; diff --git a/src/routes/todos/+page.svelte b/src/routes/todos/+page.svelte new file mode 100644 index 0000000..adcbe22 --- /dev/null +++ b/src/routes/todos/+page.svelte @@ -0,0 +1,183 @@ + + + + Todos + + + +
+

Todos

+ +
{ + return ({ form, result }) => { + if (result.type === 'success') { + form.reset(); + invalidateAll(); + } + }; + }} + > + +
+ + {#each todos as todo (todo.uid)} +
+
{ + todo.done = !!data.get('done'); + }} + > + + +
+ {/each} +
+ + diff --git a/src/routes/todos/api.js b/src/routes/todos/api.js new file mode 100644 index 0000000..497db29 --- /dev/null +++ b/src/routes/todos/api.js @@ -0,0 +1,25 @@ +/* + This module is used by the /todos endpoint to + make calls to api.svelte.dev, which stores todos + for each user. + + (The data on the todo app will expire periodically; no + guarantees are made. Don't use it to organise your life.) +*/ + +const base = 'https://api.svelte.dev'; + +/** + * @param {string} method + * @param {string} resource + * @param {Record} [data] + */ +export function api(method, resource, data) { + return fetch(`${base}/${resource}`, { + method, + headers: { + 'content-type': 'application/json' + }, + body: data && JSON.stringify(data) + }); +} diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..825b9e6 Binary files /dev/null and b/static/favicon.png differ diff --git a/static/robots.txt b/static/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/static/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/static/svelte-welcome.png b/static/svelte-welcome.png new file mode 100644 index 0000000..fe7d2d6 Binary files /dev/null and b/static/svelte-welcome.png differ diff --git a/static/svelte-welcome.webp b/static/svelte-welcome.webp new file mode 100644 index 0000000..6ec1a28 Binary files /dev/null and b/static/svelte-welcome.webp differ diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..301e785 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,10 @@ +import adapter from '@sveltejs/adapter-auto'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + kit: { + adapter: adapter() + } +}; + +export default config; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..8747050 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,8 @@ +import { sveltekit } from '@sveltejs/kit/vite'; + +/** @type {import('vite').UserConfig} */ +const config = { + plugins: [sveltekit()] +}; + +export default config;