ash/printer-notifications
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Ashley Flanagan
2023-11-13 20:41:10 +00:00
commit 180b261e40
18 changed files with 324 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
README.md Normal file
View File

@@ -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.

BIN
bun.lockb Executable file
View File

Binary file not shown.

38
package.json Normal file
View File

@@ -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"
}

6
postcss.config.cjs Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

9
src/app.d.ts vendored Normal file
View File

@@ -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 {}
}

12
src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="wintry">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

4
src/app.postcss Normal file
View File

@@ -0,0 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

1
src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

6
src/lib/notif.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface Notification {
id: number,
text: string,
date: Date,
status: { username: string, status: string }[],
}

5
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script lang="ts">
import '../app.postcss';
</script>
<slot />

29
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts">
import { onMount } from 'svelte';
//OnMount
onMount(() => {
console.log('Hello World!');
//Request notification permission
if ('Notification' in window) {
Notification.requestPermission();
setTimeout(() => {
new Notification('Hello World!');
}, 5000);
// new Notification('Hello World!');
//Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('src/sw.js');
}
}
});
</script>
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
<div class="container h-full mx-auto flex justify-center items-center">
<div class="space-y-5">
<h1 class="h1">notification thing!</h1>
</div>
</div>

57
src/routes/notif/+server.ts Normal file
View File

@@ -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'
}
});
};

53
src/sw.js Normal file
View File

@@ -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);

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

19
svelte.config.js Normal file
View File

@@ -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;

23
tailwind.config.ts Normal file
View File

@@ -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;

17
tsconfig.json Normal file
View File

@@ -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
}

7
vite.config.ts Normal file
View File

@@ -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()]
});