commit 180b261e408f44c2bdd1a6d48938e338ffc5675f Author: ian Date: Mon Nov 13 20:41:10 2023 +0000 initial commit 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/bun.lockb b/bun.lockb new file mode 100755 index 0000000..8f264b9 Binary files /dev/null and b/bun.lockb differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..c2e735b --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "notif", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/kit": "^1.20.4", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-svelte": "^2.30.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.10.1", + "svelte": "^4.0.5", + "svelte-check": "^3.4.3", + "tslib": "^2.4.1", + "typescript": "^5.0.0", + "vite": "^4.4.2", + "postcss": "8.4.31", + "autoprefixer": "10.4.16", + "tailwindcss": "3.3.5", + "@skeletonlabs/skeleton": "2.4.0", + "@skeletonlabs/tw-plugin": "0.2.3", + "vite-plugin-tailwind-purgecss": "0.1.3", + "@types/node": "20.8.10" + }, + "type": "module" +} \ No newline at end of file diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..16dce0b --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} \ No newline at end of file diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..8f4d638 --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,9 @@ +// 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 {} + // interface PageData {} + // interface Error {} + // interface Platform {} +} diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..941ef3d --- /dev/null +++ b/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +

%sveltekit.body%

+ + diff --git a/src/app.postcss b/src/app.postcss new file mode 100644 index 0000000..510ff1d --- /dev/null +++ b/src/app.postcss @@ -0,0 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind variants; diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000..856f2b6 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1 @@ +// place files you want to import through the `$lib` alias in this folder. diff --git a/src/lib/notif.ts b/src/lib/notif.ts new file mode 100644 index 0000000..61fe9e2 --- /dev/null +++ b/src/lib/notif.ts @@ -0,0 +1,6 @@ +export interface Notification { + id: number, + text: string, + date: Date, + status: { username: string, status: string }[], +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..35bc088 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..5dab7f5 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,29 @@ + + + + +

notification thing!

diff --git a/src/routes/notif/+server.ts b/src/routes/notif/+server.ts new file mode 100644 index 0000000..fbf8aee --- /dev/null +++ b/src/routes/notif/+server.ts @@ -0,0 +1,57 @@ +import { error } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; +import type { Notification } from '$lib/notif'; + +let notifications: Notification[] = [ + { id: 1, text: "This is a notification", date: new Date(), status: [{ username: "user1", status: "new" }, { username: "user2", status: "new" }] }, + { id: 2, text: "This is another notification", date: new Date(), status: [{ username: "user1", status: "new" }, { username: "user2", status: "new" }] }, + { id: 3, text: "This is a third notification", date: new Date(), status: [{ username: "user1", status: "new" }, { username: "user2", status: "new" }] }, +] + +// GET handler +// Returns JSON array of all notifications with "new" in the status dictionary for the current user +// Sets the status of all notifications to "old" + +export const GET: RequestHandler = ({ url }) => { + const { searchParams } = new URL(url); + const username = searchParams.get('username'); + if (!username) { + return error(400, 'username is required'); + } + const user_notifications = notifications.filter(notification => { + // return true; + const user_status = notification.status.find(status => status.username === username); + if (user_status?.status === "new") { + console.log("found one!") + user_status.status = "old"; + //@ts-ignore + // notifications.find(n => notification.id === n.id).status.find(status => status.username === username).status = "old"; + return true; + } + return false; + }); + return new Response(JSON.stringify(user_notifications), { headers: { 'content-type': 'application/json' } }); +}; + + + +// POST handler +// Creates a new notification +export const POST: RequestHandler = async ({ request }) => { + + const notification = await request.json(); + + notification.id = notifications.length + 1; + notification.date = new Date(); + notification.status = [{ username: "user1", status: "new" }, { username: "user2", status: "new" }]; + + notifications = [...notifications, notification]; + + return new Response(JSON.stringify(notification), { + status: 201, + headers: { + 'Content-Type': 'application/json' + } + }); + +}; diff --git a/src/sw.js b/src/sw.js new file mode 100644 index 0000000..106deed --- /dev/null +++ b/src/sw.js @@ -0,0 +1,53 @@ +// @ts-nocheck + + +// sw.js +// self.addEventListener('install', event => { +// event.waitUntil( +// caches.open('static-cache').then(cache => { +// // cache files +// }) +// ); +// }); + +self.addEventListener('activate', event => { + console.log('Service worker activating...'); + event.waitUntil(self.clients.claim()); +}); + +// self.addEventListener('fetch', event => { +// event.respondWith( +// caches.match(event.request).then(response => { +// return response || fetch(event.request); +// }) +// ); +// }); + +// Send notification after 5 seconds +function notif() { + console.log('Checking notifications...'); + fetch("/notif?username=user1").then((res) => { + res.json().then((data) => { + if (data.length) { + for (const d of data) { + console.log(d); + self.registration.showNotification('New Notification', { + body: d.text, + }); + console.log('Sent notification'); + } + } else { + console.log('No new notifications'); + } + }); + }); + // self.registration.showNotification('Test Notification', { + // body: 'This is a test notification sent by the service worker!', + // }); + setTimeout(() => { + notif(); + }, 5000); +} +setTimeout(() => { + notif(); +}, 5000); diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..c4e3735 Binary files /dev/null and b/static/favicon.png differ diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..1eac3be --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,19 @@ +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/kit/vite'; + + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + extensions: ['.svelte'], + // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // for more information about preprocessors + preprocess: [ vitePreprocess()], + + kit: { + // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. + // If your environment is not supported or you settled on a specific environment, switch out the adapter. + // See https://kit.svelte.dev/docs/adapters for more information about adapters. + adapter: adapter() + } +}; +export default config; \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..ecfb651 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,23 @@ +import { join } from 'path' +import type { Config } from 'tailwindcss' +import { skeleton } from '@skeletonlabs/tw-plugin' + +export default { + darkMode: 'class', + content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')], + theme: { + extend: {}, + }, + plugins: [ + skeleton({ + themes: { + preset: [ + { + name: 'wintry', + enhancements: true, + }, + ], + }, + }), + ], +} satisfies Config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6ae0c8c --- /dev/null +++ b/tsconfig.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 + // + // 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/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..eefe408 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { purgeCss } from 'vite-plugin-tailwind-purgecss'; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [sveltekit(), purgeCss()] +});