Release 202506091000
This commit is contained in:
pluja
@@ -10,7 +10,11 @@ services:
|
||||
env_file:
|
||||
- .env
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot}"]
|
||||
test:
|
||||
[
|
||||
'CMD-SHELL',
|
||||
'pg_isready -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot}',
|
||||
]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
@@ -26,7 +30,7 @@ services:
|
||||
crawl4ai:
|
||||
image: unclecode/crawl4ai:basic-amd64
|
||||
expose:
|
||||
- "11235"
|
||||
- '11235'
|
||||
env_file:
|
||||
- .env
|
||||
volumes:
|
||||
@@ -42,7 +46,7 @@ services:
|
||||
image: redis:latest
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test: ["CMD", "redis-cli", "ping"]
|
||||
test: ['CMD', 'redis-cli', 'ping']
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
@@ -62,7 +66,15 @@ services:
|
||||
expose:
|
||||
- 4321
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-k", "--silent", "--fail", "http://localhost:4321/health"]
|
||||
test:
|
||||
[
|
||||
'CMD',
|
||||
'curl',
|
||||
'-k',
|
||||
'--silent',
|
||||
'--fail',
|
||||
'http://localhost:4321/internal-api/healthcheck',
|
||||
]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
@@ -16,7 +16,7 @@ ARG ASTRO_BUILD_MODE=production
|
||||
RUN npx prisma generate
|
||||
|
||||
# Build the application
|
||||
RUN npm run build -- --mode ${ASTRO_BUILD_MODE}
|
||||
RUN npm run build:astro -- --mode ${ASTRO_BUILD_MODE} && npm run build:server-init
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
ENV PORT=4321
|
||||
@@ -26,4 +26,4 @@ EXPOSE 4321
|
||||
COPY web/migrate.sh /usr/local/bin/knm-migrate
|
||||
RUN chmod +x /usr/local/bin/knm-migrate
|
||||
|
||||
CMD ["node", "./dist/server/entry.mjs"]
|
||||
CMD ["sh", "-c", "node ./dist/server/server-init.js & node ./dist/server/entry.mjs"]
|
||||
|
||||
@@ -4,8 +4,11 @@ import mdx from '@astrojs/mdx'
|
||||
import node from '@astrojs/node'
|
||||
import sitemap from '@astrojs/sitemap'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { minimal2023Preset } from '@vite-pwa/assets-generator/config'
|
||||
import AstroPWA from '@vite-pwa/astro'
|
||||
import { defineConfig, envField } from 'astro/config'
|
||||
import icon from 'astro-icon'
|
||||
import devtoolsJson from 'vite-plugin-devtools-json'
|
||||
|
||||
import { postgresListener } from './src/lib/postgresListenerIntegration'
|
||||
import { getServerEnvVariable } from './src/lib/serverEnvVariables'
|
||||
@@ -16,15 +19,63 @@ export default defineConfig({
|
||||
site: SITE_URL,
|
||||
vite: {
|
||||
build: {
|
||||
sourcemap: true,
|
||||
sourcemap: true, // Enable sourcemaps on production, so users can inspect the code
|
||||
},
|
||||
|
||||
plugins: [tailwindcss()],
|
||||
plugins: [devtoolsJson(), tailwindcss()],
|
||||
},
|
||||
integrations: [
|
||||
postgresListener(),
|
||||
icon(),
|
||||
mdx(),
|
||||
AstroPWA({
|
||||
mode: 'development',
|
||||
base: '/',
|
||||
scope: '/',
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: 'KYCnot.me',
|
||||
description: 'Find services that respect your privacy',
|
||||
theme_color: '#040505',
|
||||
background_color: '#171c1b',
|
||||
},
|
||||
pwaAssets: {
|
||||
image: './public/favicon.svg',
|
||||
preset: {
|
||||
...minimal2023Preset,
|
||||
maskable: {
|
||||
...minimal2023Preset.maskable,
|
||||
padding: 0.1,
|
||||
resizeOptions: {
|
||||
...minimal2023Preset.maskable.resizeOptions,
|
||||
background: '#3bdb78',
|
||||
},
|
||||
},
|
||||
apple: {
|
||||
...minimal2023Preset.apple,
|
||||
padding: 0.1,
|
||||
resizeOptions: {
|
||||
...minimal2023Preset.apple.resizeOptions,
|
||||
background: '#3bdb78',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
workbox: {
|
||||
navigateFallback: '/404',
|
||||
globPatterns: ['**/*.{js,css,html,ico,jpg,jpeg,png,svg,webp,avif}'],
|
||||
},
|
||||
strategies: 'injectManifest',
|
||||
srcDir: 'src',
|
||||
filename: 'sw.ts',
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
type: 'module',
|
||||
},
|
||||
experimental: {
|
||||
directoryAndTrailingSlashHandler: true,
|
||||
},
|
||||
}),
|
||||
sitemap({
|
||||
filter: (page) => {
|
||||
const url = new URL(page)
|
||||
@@ -95,35 +146,6 @@ export default defineConfig({
|
||||
startsWith: 'redis://',
|
||||
default: 'redis://redis:6379',
|
||||
}),
|
||||
REDIS_USER_SESSION_EXPIRY_SECONDS: envField.number({
|
||||
context: 'server',
|
||||
access: 'secret',
|
||||
int: true,
|
||||
gt: 0,
|
||||
default: 60 * 60 * 24, // 24 hours in seconds
|
||||
}),
|
||||
REDIS_IMPERSONATION_SESSION_EXPIRY_SECONDS: envField.number({
|
||||
context: 'server',
|
||||
access: 'secret',
|
||||
int: true,
|
||||
gt: 0,
|
||||
default: 60 * 60 * 24, // 24 hours in seconds
|
||||
}),
|
||||
REDIS_PREGENERATED_TOKEN_EXPIRY_SECONDS: envField.number({
|
||||
context: 'server',
|
||||
access: 'secret',
|
||||
int: true,
|
||||
gt: 0,
|
||||
default: 60 * 5, // 5 minutes in seconds
|
||||
}),
|
||||
|
||||
REDIS_ACTIONS_SESSION_EXPIRY_SECONDS: envField.number({
|
||||
context: 'server',
|
||||
access: 'secret',
|
||||
int: true,
|
||||
gt: 0,
|
||||
default: 60 * 5, // 5 minutes in seconds
|
||||
}),
|
||||
|
||||
// Development tokens
|
||||
DEV_ADMIN_USER_SECRET_TOKEN: envField.string({
|
||||
|
||||
@@ -121,7 +121,7 @@ export default tseslint.config(
|
||||
'import/first': 'error',
|
||||
'import/newline-after-import': 'error',
|
||||
'import/no-duplicates': 'error',
|
||||
'import/no-unresolved': ['error', { ignore: ['^astro:'] }],
|
||||
'import/no-unresolved': ['error', { ignore: ['^astro:', '^virtual:'] }],
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
'no-console': ['warn', { allow: without(Object.keys(console), 'log') }],
|
||||
'import/namespace': 'off',
|
||||
|
||||
3892
web/package-lock.json
generated
3892
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,8 +4,10 @@
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build --remote",
|
||||
"preview": "astro preview",
|
||||
"build": "npm run build:astro && npm run build:server-init",
|
||||
"build:astro": "astro build --remote",
|
||||
"build:server-init": "esbuild src/server-init.ts --bundle --platform=node --format=esm --packages=external --outfile=dist/server/server-init.js",
|
||||
"preview": "node dist/server/server-init.js & astro preview",
|
||||
"astro": "astro",
|
||||
"db-admin": "prisma studio --browser=none",
|
||||
"db-gen": "prisma generate",
|
||||
@@ -79,8 +81,11 @@
|
||||
"@types/seedrandom": "3.0.8",
|
||||
"@types/web-push": "3.6.4",
|
||||
"@typescript-eslint/parser": "8.33.1",
|
||||
"@vite-pwa/assets-generator": "1.0.0",
|
||||
"@vite-pwa/astro": "1.1.0",
|
||||
"astro-icon": "1.1.5",
|
||||
"date-fns": "4.1.0",
|
||||
"esbuild": "0.25.5",
|
||||
"eslint": "9.28.0",
|
||||
"eslint-import-resolver-typescript": "4.4.3",
|
||||
"eslint-plugin-astro": "1.3.1",
|
||||
@@ -96,6 +101,9 @@
|
||||
"ts-essentials": "10.0.4",
|
||||
"ts-toolbelt": "9.6.0",
|
||||
"tsx": "4.19.4",
|
||||
"typescript-eslint": "8.33.1"
|
||||
"typescript-eslint": "8.33.1",
|
||||
"vite-plugin-devtools-json": "0.1.1",
|
||||
"workbox-core": "7.3.0",
|
||||
"workbox-precaching": "7.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
8
web/public/favicon-badge.svg
Normal file
8
web/public/favicon-badge.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<title>KYCnot.me logo with badge</title>
|
||||
<path fill="#0080FF" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
|
||||
<path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
|
||||
<path fill="#3BDB78" fill-rule="evenodd"
|
||||
d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 619 B |
8
web/public/favicon-dev-badge.svg
Normal file
8
web/public/favicon-dev-badge.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<title>KYCnot.me logo with badge</title>
|
||||
<path fill="#0080FF" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
|
||||
<path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
|
||||
<path fill="#FF0040" fill-rule="evenodd"
|
||||
d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 619 B |
@@ -1,5 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#FF0000" viewBox="0 0 32 32" height="32" width="32">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ff0040" viewBox="0 0 32 32" height="32" width="32">
|
||||
<title>KYCnot.me logo</title>
|
||||
<path fill="#040505" d="M4 4h24v24H4z" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
|
||||
clip-rule="evenodd" />
|
||||
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 610 B |
8
web/public/favicon-lightmode-badge.svg
Normal file
8
web/public/favicon-lightmode-badge.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<title>KYCnot.me logo with badge</title>
|
||||
<path fill="#0080FF" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
|
||||
<path fill="#fff" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
|
||||
<path fill="#33BE00" fill-rule="evenodd"
|
||||
d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 616 B |
@@ -1,5 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#33BE00" viewBox="0 0 32 32" height="32" width="32">
|
||||
<title>KYCnot.me logo</title>
|
||||
<path fill="#fff" d="M4 4h24v24H4z" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
|
||||
clip-rule="evenodd" />
|
||||
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 607 B |
15
web/public/favicon-stage-badge.svg
Normal file
15
web/public/favicon-stage-badge.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
|
||||
<title>KYCnot.me logo with badge</title>
|
||||
<style>
|
||||
@media (prefers-color-scheme: light) {
|
||||
.a {
|
||||
fill: #0080ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path fill="#ff0040" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
|
||||
<path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
|
||||
<path fill="#00ffff" class="a" fill-rule="evenodd"
|
||||
d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 741 B |
@@ -2,12 +2,17 @@
|
||||
<title>KYCnot.me logo</title>
|
||||
<style>
|
||||
@media (prefers-color-scheme: light) {
|
||||
path {
|
||||
.a {
|
||||
fill: #0080ff;
|
||||
}
|
||||
|
||||
.b {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path fill="#00ffff" fill-rule="evenodd"
|
||||
<path fill="#040505" class="b" d="M4 4h24v24H4z" />
|
||||
<path fill="#00ffff" class="" fill-rule="evenodd"
|
||||
d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 793 B |
@@ -1,5 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#3BDB78" viewBox="0 0 32 32" height="32" width="32">
|
||||
<title>KYCnot.me logo</title>
|
||||
<path fill="#040505" d="M4 4h24v24H4z" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
|
||||
clip-rule="evenodd" />
|
||||
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 610 B |
114
web/public/sw.js
114
web/public/sw.js
@@ -1,114 +0,0 @@
|
||||
// @ts-check
|
||||
|
||||
/// <reference lib="webworker" />
|
||||
|
||||
/** @type {ServiceWorkerGlobalScope} */
|
||||
// @ts-expect-error
|
||||
const typedSelf = self
|
||||
|
||||
const CACHE_NAME = 'kycnot-sw-push-notifications-v2'
|
||||
|
||||
/** @typedef {import('../src/lib/webPush').NotificationPayload} NotificationPayload */
|
||||
/** @typedef {{defaultActionUrl: string, payload: NotificationPayload | null}} NotificationData */
|
||||
/** @typedef {NotificationOptions & { actions: { action: string; title: string; icon?: string }[], timestamp: number, data: NotificationData } } CustomNotificationOptions */
|
||||
|
||||
typedSelf.addEventListener('install', (event) => {
|
||||
console.log('Service Worker installing')
|
||||
typedSelf.skipWaiting()
|
||||
})
|
||||
|
||||
typedSelf.addEventListener('activate', (event) => {
|
||||
console.log('Service Worker activating')
|
||||
event.waitUntil(typedSelf.clients.claim())
|
||||
})
|
||||
|
||||
typedSelf.addEventListener('push', (event) => {
|
||||
console.log('Push event received:', event)
|
||||
|
||||
if (!event.data) {
|
||||
console.error('Push event but no data')
|
||||
return
|
||||
}
|
||||
|
||||
let title = 'New Notification'
|
||||
/** @type {CustomNotificationOptions} */
|
||||
let options = {
|
||||
body: 'You have a new notification',
|
||||
lang: 'en-US',
|
||||
icon: '/favicon.svg',
|
||||
badge: '/favicon.svg',
|
||||
requireInteraction: false,
|
||||
silent: false,
|
||||
actions: [
|
||||
{
|
||||
action: 'view',
|
||||
title: 'View',
|
||||
icon: 'https://api.iconify.design/ri/arrow-right-line.svg',
|
||||
},
|
||||
],
|
||||
timestamp: Date.now(),
|
||||
data: {
|
||||
defaultActionUrl: '/notifications',
|
||||
payload: null,
|
||||
},
|
||||
}
|
||||
|
||||
try {
|
||||
/** @type {NotificationPayload} */
|
||||
const rawData = event.data.json()
|
||||
if (typeof rawData !== 'object' || rawData === null) throw new Error('Invalid push data, not an object')
|
||||
if (!('title' in rawData) || typeof rawData.title !== 'string')
|
||||
throw new Error('Invalid push data, no title')
|
||||
title = rawData.title
|
||||
|
||||
options = {
|
||||
...options,
|
||||
body: rawData.body || undefined,
|
||||
actions: rawData.actions.map((action) => ({
|
||||
action: action.action,
|
||||
title: action.title,
|
||||
icon: action.icon,
|
||||
})),
|
||||
data: {
|
||||
...options.data,
|
||||
payload: rawData,
|
||||
},
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing push data:', error)
|
||||
}
|
||||
|
||||
event.waitUntil(typedSelf.registration.showNotification(title, options))
|
||||
})
|
||||
|
||||
typedSelf.addEventListener('notificationclick', (event) => {
|
||||
console.log('Notification clicked:', event)
|
||||
|
||||
event.notification.close()
|
||||
|
||||
/** @type {NotificationData} */
|
||||
const data = event.notification.data
|
||||
|
||||
// @ts-expect-error I already use optional chaining
|
||||
const url = data.payload?.[event.action]?.url || data.defaultActionUrl
|
||||
|
||||
event.waitUntil(
|
||||
typedSelf.clients.matchAll({ type: 'window' }).then((clientList) => {
|
||||
// If a window is already open, focus it
|
||||
for (const client of clientList) {
|
||||
if (client.url === url && 'focus' in client) {
|
||||
return client.focus()
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise, open a new window
|
||||
if (typedSelf.clients.openWindow) {
|
||||
return typedSelf.clients.openWindow(url)
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
typedSelf.addEventListener('notificationclose', (event) => {
|
||||
console.log('Notification closed:', event)
|
||||
})
|
||||
@@ -458,7 +458,6 @@ export const adminServiceActions = {
|
||||
permissions: 'admin',
|
||||
input: evidenceImageDeleteSchema,
|
||||
handler: async (input) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
await deleteFileLocally(input.fileUrl)
|
||||
return { success: true }
|
||||
},
|
||||
|
||||
@@ -165,6 +165,11 @@ export const serviceSuggestionActions = {
|
||||
categories: z.array(z.coerce.number().int().positive()).min(1),
|
||||
acceptedCurrencies: z.array(z.nativeEnum(Currency)).min(1),
|
||||
imageFile: imageFileSchemaRequired,
|
||||
rulesConfirm: z.literal('on', {
|
||||
errorMap: () => ({
|
||||
message: 'You must accept the suggestion rules and process to continue',
|
||||
}),
|
||||
}),
|
||||
/** @deprecated Honey pot field, do not use */
|
||||
message: z.unknown().optional(),
|
||||
skipDuplicateCheck: z
|
||||
@@ -197,6 +202,7 @@ export const serviceSuggestionActions = {
|
||||
'imageFile',
|
||||
'captcha-value',
|
||||
'captcha-solution-hash',
|
||||
'rulesConfirm',
|
||||
]),
|
||||
serviceSuggestion: undefined,
|
||||
service: undefined,
|
||||
|
||||
@@ -2,12 +2,17 @@
|
||||
import LoadingIndicator from 'astro-loading-indicator/component'
|
||||
import { Schema } from 'astro-seo-schema'
|
||||
import { ClientRouter } from 'astro:transitions'
|
||||
import { pwaAssetsHead } from 'virtual:pwa-assets/head'
|
||||
import { pwaInfo } from 'virtual:pwa-info'
|
||||
|
||||
import { isNotArray } from '../lib/arrays'
|
||||
import { DEPLOYMENT_MODE } from '../lib/envVariables'
|
||||
|
||||
import DynamicFavicon from './DynamicFavicon.astro'
|
||||
import HtmxScript from './HtmxScript.astro'
|
||||
import NotificationEventsScript from './NotificationEventsScript.astro'
|
||||
import { makeOgImageUrl } from './OgImage'
|
||||
import ServerEventsScript from './ServerEventsScript.astro'
|
||||
import TailwindJsPluggin from './TailwindJsPluggin.astro'
|
||||
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
@@ -70,12 +75,6 @@ const fullTitle = `${pageTitle} | KYCnot.me ${modeName}`
|
||||
const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
|
||||
---
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon-lightmode.svg" media="(prefers-color-scheme: light)" />
|
||||
{DEPLOYMENT_MODE === 'development' && <link rel="icon" type="image/svg+xml" href="/favicon-dev.svg" />}
|
||||
{DEPLOYMENT_MODE === 'staging' && <link rel="icon" type="image/svg+xml" href="/favicon-stage.svg" />}
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="description" content={description} />
|
||||
@@ -98,7 +97,13 @@ const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
|
||||
|
||||
<!-- Other -->
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<meta name="theme-color" content="#040505" />
|
||||
|
||||
<!-- PWA -->
|
||||
{pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} />}
|
||||
{pwaAssetsHead.links.map((link) => <link {...link} />)}
|
||||
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
|
||||
|
||||
<DynamicFavicon />
|
||||
|
||||
<!-- Components -->
|
||||
<ClientRouter />
|
||||
@@ -131,3 +136,11 @@ const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
<!-- Server events -->
|
||||
<ServerEventsScript />
|
||||
|
||||
<!-- Push Notifications -->
|
||||
|
||||
<script src="/src/pwa.ts"></script>
|
||||
<NotificationEventsScript />
|
||||
|
||||
60
web/src/components/DynamicFavicon.astro
Normal file
60
web/src/components/DynamicFavicon.astro
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
import { DEPLOYMENT_MODE } from '../lib/envVariables'
|
||||
import { prisma } from '../lib/prisma'
|
||||
|
||||
const user = Astro.locals.user
|
||||
|
||||
const hasUnreadNotifications = await Astro.locals.banners.try(
|
||||
'Error getting unread notification count',
|
||||
async () =>
|
||||
user
|
||||
? !!(await prisma.notification.findFirst({
|
||||
where: { userId: user.id, read: false },
|
||||
select: { id: true },
|
||||
}))
|
||||
: false,
|
||||
false
|
||||
)
|
||||
|
||||
function addBadgeIfUnread(href: string) {
|
||||
if (hasUnreadNotifications) return href.replace('.svg', '-badge.svg')
|
||||
return href
|
||||
}
|
||||
---
|
||||
|
||||
{
|
||||
DEPLOYMENT_MODE === 'production' && (
|
||||
<>
|
||||
<link rel="icon" type="image/svg+xml" href={addBadgeIfUnread('/favicon.svg')} />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
href={addBadgeIfUnread('/favicon-lightmode.svg')}
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
DEPLOYMENT_MODE === 'development' && (
|
||||
<link rel="icon" type="image/svg+xml" href={addBadgeIfUnread('/favicon-dev.svg')} />
|
||||
)
|
||||
}
|
||||
{
|
||||
DEPLOYMENT_MODE === 'staging' && (
|
||||
<link rel="icon" type="image/svg+xml" href={addBadgeIfUnread('/favicon-stage.svg')} />
|
||||
)
|
||||
}
|
||||
|
||||
<script>
|
||||
document.addEventListener('sse-new-notification', () => {
|
||||
const links = document.querySelectorAll('link[rel="icon"]')
|
||||
links.forEach((link) => {
|
||||
const href = link.getAttribute('href')
|
||||
if (href && href.includes('favicon') && !href.endsWith('-badge.svg')) {
|
||||
const newHref = href.replace('.svg', '-badge.svg')
|
||||
link.setAttribute('href', newHref)
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -27,6 +27,8 @@ const count =
|
||||
user && (
|
||||
<a
|
||||
href="/notifications"
|
||||
data-notification-count-link
|
||||
data-current-count={count}
|
||||
class={cn(
|
||||
'group relative flex cursor-pointer items-center justify-center text-gray-400 transition-colors duration-100 hover:text-white',
|
||||
className
|
||||
@@ -35,11 +37,32 @@ const count =
|
||||
{...htmlProps}
|
||||
>
|
||||
<Icon name="material-symbols:notifications-outline" class="size-5" />
|
||||
{count > 0 && (
|
||||
<span class="absolute top-[calc(50%-var(--spacing)*3.5)] right-[calc(50%-var(--spacing)*3.5)] flex size-3.5 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold tracking-tighter text-white group-hover:bg-blue-500">
|
||||
{count > 99 ? '★' : count.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
data-notification-count-badge
|
||||
class="absolute top-[calc(50%-var(--spacing)*3.5)] right-[calc(50%-var(--spacing)*3.5)] flex size-3.5 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold tracking-tighter text-white group-hover:bg-blue-500 empty:hidden"
|
||||
>
|
||||
{count > 0 ? (count > 99 ? '★' : count.toLocaleString()) : ''}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
<script>
|
||||
document.addEventListener('sse-new-notification', () => {
|
||||
document.querySelectorAll<HTMLElement>('[data-notification-count-link]').forEach((link) => {
|
||||
const currentCount = Number(link.getAttribute('data-current-count') || 0)
|
||||
const newCount = currentCount + 1
|
||||
|
||||
link.querySelectorAll<HTMLElement>('[data-notification-count-badge]').forEach((badge) => {
|
||||
badge.textContent = newCount > 0 ? (newCount > 99 ? '★' : newCount.toLocaleString()) : ''
|
||||
})
|
||||
|
||||
link.setAttribute(
|
||||
'aria-label',
|
||||
`Go to notifications${newCount > 0 ? ` (${newCount.toLocaleString()} unread)` : ''}`
|
||||
)
|
||||
|
||||
link.setAttribute('data-current-count', String(newCount))
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
29
web/src/components/NotificationEventsScript.astro
Normal file
29
web/src/components/NotificationEventsScript.astro
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<script>
|
||||
import { isBrowserNotificationsEnabled, showBrowserNotification } from '../lib/client/browserNotifications'
|
||||
import { makeNotificationOptions } from '../lib/notificationOptions'
|
||||
|
||||
document.addEventListener('sse-new-notification', (event) => {
|
||||
if (isBrowserNotificationsEnabled()) {
|
||||
const payload = event.detail
|
||||
const notification = showBrowserNotification(
|
||||
payload.title,
|
||||
makeNotificationOptions(payload, { removeActions: true })
|
||||
)
|
||||
|
||||
// Handle notification click
|
||||
if (notification) {
|
||||
notification.onclick = () => {
|
||||
const defaultAction = payload.actions.find((a) => a.url) ?? payload.actions[0]
|
||||
if (defaultAction?.url) {
|
||||
window.open(defaultAction.url, '_blank')
|
||||
}
|
||||
notification.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { VAPID_PUBLIC_KEY } from 'astro:env/server'
|
||||
|
||||
import { SUPPORT_EMAIL } from '../constants/project'
|
||||
import { cn } from '../lib/cn'
|
||||
|
||||
import Button from './Button.astro'
|
||||
@@ -21,24 +22,24 @@ type Props = HTMLAttributes<'div'> & {
|
||||
}
|
||||
|
||||
const { class: className, dismissable = false, pushSubscriptions, hideIfEnabled, ...props } = Astro.props
|
||||
|
||||
// TODO: Feature flag, enabled only for admins
|
||||
if (!Astro.locals.user?.admin) {
|
||||
return null
|
||||
}
|
||||
---
|
||||
|
||||
<div
|
||||
data-push-notification-banner
|
||||
data-dismissed={undefined /* Updated by client script */}
|
||||
data-supports-push-notifications={undefined /* Updated by client script */}
|
||||
data-dismissed={undefined as true | undefined /* Updated by client script */}
|
||||
data-notification-supported={undefined as true | undefined /* Updated by client script */}
|
||||
data-push-subscriptions={JSON.stringify(pushSubscriptions)}
|
||||
data-is-enabled={undefined /* Updated by client script */}
|
||||
data-is-enabled={undefined as true | undefined /* Updated by client script */}
|
||||
data-loaded={undefined as true | undefined /* Updated by client script */}
|
||||
data-notification-permissions={undefined as
|
||||
| NotificationPermission
|
||||
| undefined /* Updated by client script */}
|
||||
data-vapid-public-key={VAPID_PUBLIC_KEY}
|
||||
class={cn(
|
||||
'no-js:hidden relative isolate flex items-center justify-between gap-x-4 overflow-hidden rounded-xl bg-gradient-to-r from-blue-950/80 to-blue-900/60 p-4',
|
||||
'no-js:hidden xs:grid-cols-[auto_auto] xs:justify-between relative isolate grid items-center justify-stretch gap-4 overflow-hidden rounded-xl bg-gradient-to-r from-blue-950/80 to-blue-900/60 p-4 not-data-loaded:hidden',
|
||||
'data-dismissed:hidden',
|
||||
hideIfEnabled && 'data-is-enabled:hidden',
|
||||
'not-data-supports-push-notifications:hidden',
|
||||
'not-data-notification-supported:hidden',
|
||||
'data-is-enabled:**:data-show-if-disabled:hidden not-data-is-enabled:**:data-show-if-enabled:hidden',
|
||||
className
|
||||
)}
|
||||
@@ -60,25 +61,18 @@ if (!Astro.locals.user?.admin) {
|
||||
<Icon name="ri:notification-4-line" class="size-5 text-blue-300" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-blue-100">
|
||||
<span data-show-if-enabled>Push notifications enabled</span>
|
||||
<span data-show-if-disabled>Turn on push notifications?</span>
|
||||
</h3>
|
||||
<p class="text-sm text-blue-200/80">
|
||||
<span data-show-if-enabled>Turn notifications off for this device?</span>
|
||||
<span data-show-if-disabled>Get notifications on this device.</span>
|
||||
</p>
|
||||
<h3 class="font-medium text-blue-100" data-banner-title>Turn on push notifications?</h3>
|
||||
<p class="text-sm text-blue-200/80" data-banner-description>Get notifications on this device.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="xs:justify-end flex shrink flex-wrap items-center justify-center gap-2">
|
||||
{dismissable && <Button as="span" label="Skip" variant="faded" data-dismiss-button />}
|
||||
<Button
|
||||
as="span"
|
||||
label="Yes, notify me"
|
||||
color="white"
|
||||
data-push-action="subscribe"
|
||||
data-vapid-public-key={VAPID_PUBLIC_KEY}
|
||||
data-show-if-disabled
|
||||
/>
|
||||
<Button
|
||||
@@ -87,10 +81,21 @@ if (!Astro.locals.user?.admin) {
|
||||
color="white"
|
||||
variant="faded"
|
||||
data-push-action="unsubscribe"
|
||||
data-vapid-public-key={VAPID_PUBLIC_KEY}
|
||||
data-show-if-enabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-span-full flex items-center justify-center gap-2 leading-tight text-red-500 has-[[data-error-message]:empty]:hidden"
|
||||
>
|
||||
<Icon name="ri:error-warning-line" class="size-5 shrink-0" />
|
||||
<span>
|
||||
<span data-error-message></span>
|
||||
<a href={`mailto:${SUPPORT_EMAIL}`} class="text-red-300 underline hover:text-red-200">
|
||||
Contact support
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -134,240 +139,128 @@ if (!Astro.locals.user?.admin) {
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/////////////////////////////////////////////////////////
|
||||
// Script to style when notifications enabled. //
|
||||
////////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////
|
||||
// Script to handle push notifications. //
|
||||
///////////////////////////////////////////
|
||||
|
||||
type ServerSubscription = {
|
||||
endpoint: string
|
||||
userAgent: string | null
|
||||
}
|
||||
import {
|
||||
subscribeToPushNotifications,
|
||||
unsubscribeFromPushNotifications,
|
||||
parsePushSubscriptions,
|
||||
isCurrentDeviceSubscribed,
|
||||
supportsPushNotifications,
|
||||
type SafeResult,
|
||||
} from '../lib/client/clientPushNotifications'
|
||||
|
||||
/** Parse push subscriptions from string */
|
||||
function parsePushSubscriptions(subscriptionsAsString: string | undefined) {
|
||||
try {
|
||||
if (typeof subscriptionsAsString !== 'string') throw new Error('Push subscriptions must be a string')
|
||||
import {
|
||||
enableBrowserNotifications,
|
||||
disableBrowserNotifications,
|
||||
isBrowserNotificationsEnabled,
|
||||
supportsBrowserNotifications,
|
||||
} from '../lib/client/browserNotifications'
|
||||
|
||||
const subscriptions = JSON.parse(subscriptionsAsString)
|
||||
|
||||
if (!Array.isArray(subscriptions)) throw new Error('Push subscriptions must be an array')
|
||||
if (!subscriptions.every((s) => typeof s === 'object' && s !== null)) {
|
||||
throw new Error('Push subscriptions must be an array of objects')
|
||||
}
|
||||
if (!subscriptions.every((s) => typeof s.endpoint === 'string')) {
|
||||
throw new Error('Push subscriptions must be an array of objects with endpoint property')
|
||||
}
|
||||
if (!subscriptions.every((s) => typeof s.userAgent === 'string' || s.userAgent === null)) {
|
||||
throw new Error('Push subscriptions must be an array of objects with userAgent property')
|
||||
}
|
||||
|
||||
return subscriptions as ServerSubscription[]
|
||||
} catch (error) {
|
||||
console.error('Failed to parse push subscriptions:', error)
|
||||
return []
|
||||
async function setDataAttributes(banner: HTMLElement) {
|
||||
if (!supportsPushNotifications() && !supportsBrowserNotifications()) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/** Check if current device has an active push subscription */
|
||||
async function getCurrentPushSubscription() {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.getRegistration()
|
||||
if (!registration) return null
|
||||
banner.dataset.notificationSupported = ''
|
||||
banner.dataset.notificationPermissions = Notification.permission
|
||||
|
||||
return await registration.pushManager.getSubscription()
|
||||
} catch (error) {
|
||||
console.error('Error getting current push subscription:', error)
|
||||
return null
|
||||
const serverSubscriptions = parsePushSubscriptions(banner.dataset.pushSubscriptions)
|
||||
const titleElement = banner.querySelector<HTMLElement>('[data-banner-title]')
|
||||
const descriptionElement = banner.querySelector<HTMLElement>('[data-banner-description]')
|
||||
|
||||
if (await isCurrentDeviceSubscribed(serverSubscriptions)) {
|
||||
if (titleElement) titleElement.textContent = 'Push notifications enabled'
|
||||
if (descriptionElement) descriptionElement.textContent = 'Turn push notifications off for this device?'
|
||||
banner.dataset.isEnabled = ''
|
||||
banner.dataset.loaded = ''
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/** Check if current subscription matches any server subscription */
|
||||
function isCurrentDeviceSubscribed(
|
||||
currentSubscription: PushSubscription | null,
|
||||
serverSubscriptions: ServerSubscription[]
|
||||
) {
|
||||
if (!currentSubscription || serverSubscriptions.length === 0) return false
|
||||
if (isBrowserNotificationsEnabled()) {
|
||||
if (titleElement) titleElement.textContent = 'Browser notifications enabled'
|
||||
if (descriptionElement)
|
||||
descriptionElement.textContent = 'Turn off notifications? (They only work while the tab is open.)'
|
||||
banner.dataset.isEnabled = ''
|
||||
banner.dataset.loaded = ''
|
||||
return
|
||||
}
|
||||
|
||||
const currentEndpoint = currentSubscription.endpoint
|
||||
const currentUserAgent = navigator.userAgent
|
||||
|
||||
return serverSubscriptions.some(
|
||||
(sub) =>
|
||||
sub.endpoint === currentEndpoint && (sub.userAgent === currentUserAgent || sub.userAgent === null)
|
||||
)
|
||||
// Default state (disabled)
|
||||
if (titleElement) titleElement.textContent = 'Turn on push notifications?'
|
||||
if (descriptionElement) descriptionElement.textContent = 'Get notifications on this device.'
|
||||
banner.dataset.loaded = ''
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', async () => {
|
||||
document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach(async (banner) => {
|
||||
const serverSubscriptions = parsePushSubscriptions(banner.dataset.pushSubscriptions)
|
||||
const currentSubscription = await getCurrentPushSubscription()
|
||||
const isSubscribed = isCurrentDeviceSubscribed(currentSubscription, serverSubscriptions)
|
||||
await setDataAttributes(banner)
|
||||
|
||||
if (isSubscribed) banner.dataset.isEnabled = ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
const vapidPublicKey = banner.dataset.vapidPublicKey
|
||||
|
||||
<script>
|
||||
/////////////////////////////////////////////////////////////
|
||||
// Script to handle push notification subscription. //
|
||||
/////////////////////////////////////////////////////////////
|
||||
banner.querySelectorAll<HTMLElement>('[data-push-action]').forEach((button) => {
|
||||
button.addEventListener('click', async (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
import type { actions } from 'astro:actions'
|
||||
import type { ActionInput } from '../lib/astroActions'
|
||||
const action = button.dataset.pushAction
|
||||
if (action !== 'subscribe' && action !== 'unsubscribe') {
|
||||
console.error('Invalid push action:', action)
|
||||
return
|
||||
}
|
||||
|
||||
/** Utility function to convert VAPID key */
|
||||
function urlB64ToUint8Array(base64String: string) {
|
||||
const cleaned = base64String.trim().replace(/\s+/g, '').replace(/\-/g, '+').replace(/_/g, '/')
|
||||
const padding = '='.repeat((4 - (cleaned.length % 4)) % 4)
|
||||
const base64 = cleaned + padding
|
||||
let result: SafeResult
|
||||
|
||||
const rawData = window.atob(base64)
|
||||
const outputArray = new Uint8Array(rawData.length)
|
||||
if (action === 'subscribe') {
|
||||
const pushResult = vapidPublicKey
|
||||
? await subscribeToPushNotifications(vapidPublicKey)
|
||||
: { success: false as const, error: 'VAPID public key not found' }
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i)
|
||||
}
|
||||
return outputArray
|
||||
}
|
||||
if (pushResult.success) {
|
||||
result = pushResult
|
||||
} else {
|
||||
console.error(
|
||||
"Can't enable push notifications, trying browser notifications.",
|
||||
pushResult.error
|
||||
)
|
||||
const browserResult = await enableBrowserNotifications()
|
||||
|
||||
/** Check for browser support */
|
||||
function checkSupport() {
|
||||
const isSecure =
|
||||
window.isSecureContext ||
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1'
|
||||
return isSecure && 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window
|
||||
}
|
||||
if (browserResult.success) {
|
||||
result = browserResult
|
||||
} else {
|
||||
console.error("Can't enable browser notifications:", browserResult.error)
|
||||
result = {
|
||||
success: false,
|
||||
error: `Can't enable either push or browser notifications. Push: ${pushResult.error}. Browser: ${browserResult.error}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const pushResult = await unsubscribeFromPushNotifications()
|
||||
const browserResult = disableBrowserNotifications()
|
||||
|
||||
async function registerServiceWorker() {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.register('/sw.js')
|
||||
console.log('Service Worker registered:', registration)
|
||||
const success = pushResult.success || browserResult.success
|
||||
|
||||
const readyRegistration = await navigator.serviceWorker.ready
|
||||
console.log('Service Worker is active and ready:', readyRegistration)
|
||||
result = success
|
||||
? { success: true }
|
||||
: { success: false, error: `${pushResult.error} | ${browserResult.error}` }
|
||||
}
|
||||
|
||||
return readyRegistration
|
||||
} catch (error) {
|
||||
console.error('Service Worker registration failed:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
if (!result.success) {
|
||||
console.error(result.error)
|
||||
|
||||
async function subscribeToPush(vapidPublicKey: string) {
|
||||
try {
|
||||
if (!checkSupport()) return
|
||||
const errorMessageElement = banner.querySelector<HTMLElement>('[data-error-message]')
|
||||
if (errorMessageElement) {
|
||||
errorMessageElement.textContent = `Failed to ${action === 'subscribe' ? 'enable' : 'disable'} notifications.`
|
||||
}
|
||||
|
||||
// Request notification permission
|
||||
const permission = await Notification.requestPermission()
|
||||
if (permission !== 'granted') {
|
||||
alert('Push notifications permission denied')
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const registration = await registerServiceWorker()
|
||||
|
||||
// Subscribe to push manager
|
||||
const subscription = await registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlB64ToUint8Array(vapidPublicKey),
|
||||
})
|
||||
|
||||
const p256dh = subscription.getKey('p256dh')
|
||||
const auth = subscription.getKey('auth')
|
||||
|
||||
// Send subscription to server
|
||||
const response = await fetch('/internal-api/notifications/subscribe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
endpoint: subscription.endpoint,
|
||||
userAgent: navigator.userAgent,
|
||||
p256dhKey: p256dh ? btoa(String.fromCharCode(...new Uint8Array(p256dh))) : '',
|
||||
authKey: auth ? btoa(String.fromCharCode(...new Uint8Array(auth))) : '',
|
||||
} satisfies ActionInput<typeof actions.notification.webPush.subscribe>),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
console.log('Push subscription successful')
|
||||
|
||||
// Reload page to update UI
|
||||
window.location.reload()
|
||||
} catch (error) {
|
||||
console.error('Push subscription failed:', error)
|
||||
alert('Error enabling push notifications. This may be due to browser settings or other restrictions.')
|
||||
}
|
||||
}
|
||||
|
||||
async function unsubscribeFromPush() {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.getRegistration()
|
||||
if (!registration) {
|
||||
console.log('No service worker registration found')
|
||||
return
|
||||
}
|
||||
|
||||
const subscription = await registration.pushManager.getSubscription()
|
||||
if (!subscription) {
|
||||
console.log('No push subscription found')
|
||||
return
|
||||
}
|
||||
|
||||
// Unsubscribe from browser
|
||||
await subscription.unsubscribe()
|
||||
|
||||
// Remove from server
|
||||
const response = await fetch('/internal-api/notifications/unsubscribe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
endpoint: subscription.endpoint,
|
||||
} satisfies ActionInput<typeof actions.notification.webPush.unsubscribe>),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
console.log('Push unsubscription successful')
|
||||
|
||||
// Reload page to update UI
|
||||
window.location.reload()
|
||||
} catch (error) {
|
||||
console.error('Push unsubscription failed:', error)
|
||||
alert('Failed to unsubscribe from push notifications')
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const supportsPushNotifications = checkSupport()
|
||||
if (supportsPushNotifications) {
|
||||
document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach((element) => {
|
||||
element.dataset.supportsPushNotifications = ''
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelectorAll<HTMLElement>('[data-push-action]').forEach((button) => {
|
||||
const vapidPublicKey = button.dataset.vapidPublicKey
|
||||
if (!vapidPublicKey) {
|
||||
console.error('Environment variable VAPID_PUBLIC_KEY is not set')
|
||||
return
|
||||
}
|
||||
|
||||
button.addEventListener('click', async (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
const action = button.dataset.pushAction
|
||||
if (action === 'subscribe') {
|
||||
await subscribeToPush(vapidPublicKey)
|
||||
} else if (action === 'unsubscribe') {
|
||||
await unsubscribeFromPush()
|
||||
}
|
||||
window.location.reload()
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
108
web/src/components/ServerEventsScript.astro
Normal file
108
web/src/components/ServerEventsScript.astro
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
if (!Astro.locals.user) return
|
||||
---
|
||||
|
||||
<script>
|
||||
import type { ServerEventsEvent, SSEEventMap } from '../lib/serverEventsTypes'
|
||||
|
||||
const MAX_RECONNECT_ATTEMPTS = 5
|
||||
const RECONNECT_DELAY = 2_000
|
||||
|
||||
let eventSource: EventSource | null = null
|
||||
let reconnectTimeout: number | null = null
|
||||
let reconnectAttempts = 0
|
||||
|
||||
startServerEventsListener()
|
||||
|
||||
// ------------------------------------------------------------
|
||||
|
||||
export function startServerEventsListener() {
|
||||
stopServerEventsListener()
|
||||
|
||||
try {
|
||||
eventSource = new EventSource('/internal-api/server-events')
|
||||
|
||||
eventSource.onopen = () => {
|
||||
reconnectAttempts = 0
|
||||
}
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data as string)
|
||||
|
||||
if (isServerEventsEvent(data)) {
|
||||
const eventType = `sse-${data.type}` as const
|
||||
document.dispatchEvent(
|
||||
new CustomEvent(eventType, { detail: data.data }) as SSEEventMap[typeof eventType]
|
||||
)
|
||||
} else {
|
||||
console.error('Invalid server events event:', data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing server events data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('Server events error:', error)
|
||||
|
||||
if (eventSource?.readyState === EventSource.CLOSED) {
|
||||
scheduleReconnect()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to start server events listener:', error)
|
||||
scheduleReconnect()
|
||||
}
|
||||
}
|
||||
|
||||
export function stopServerEventsListener() {
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout)
|
||||
reconnectTimeout = null
|
||||
}
|
||||
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
console.info('Disconnected from server events listener')
|
||||
}
|
||||
|
||||
reconnectAttempts = 0
|
||||
}
|
||||
|
||||
function scheduleReconnect() {
|
||||
if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
|
||||
console.error('Max reconnection attempts reached, giving up')
|
||||
return
|
||||
}
|
||||
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout)
|
||||
}
|
||||
|
||||
const delay = RECONNECT_DELAY * Math.pow(2, reconnectAttempts)
|
||||
reconnectAttempts++
|
||||
|
||||
const delayStr = String(delay)
|
||||
const attemptsStr = String(reconnectAttempts)
|
||||
const maxAttemptsStr = String(MAX_RECONNECT_ATTEMPTS)
|
||||
console.info(`Attempting to reconnect in ${delayStr}ms (attempt ${attemptsStr}/${maxAttemptsStr})`)
|
||||
|
||||
reconnectTimeout = window.setTimeout(() => {
|
||||
startServerEventsListener()
|
||||
}, delay)
|
||||
}
|
||||
|
||||
function isServerEventsEvent(event: unknown): event is ServerEventsEvent {
|
||||
if (typeof event !== 'object' || event === null) return false
|
||||
const e = event as Record<string, unknown>
|
||||
return (
|
||||
'type' in e &&
|
||||
typeof e.type === 'string' &&
|
||||
'data' in e &&
|
||||
typeof e.data === 'object' &&
|
||||
e.data !== null
|
||||
)
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +1,14 @@
|
||||
import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { CommentStatus } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type CommentStatusInfo<T extends string | null | undefined = string> = {
|
||||
id: T
|
||||
icon: string
|
||||
label: string
|
||||
color: ComponentProps<typeof BadgeSmall>['color']
|
||||
color: TailwindColor
|
||||
creativeWorkStatus: string | undefined
|
||||
}
|
||||
|
||||
|
||||
@@ -3,14 +3,13 @@ import { transformCase } from '../lib/strings'
|
||||
|
||||
import { commentStatusById } from './commentStatus'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { Prisma } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type CommentStatusFilterInfo<T extends string | null | undefined = string> = {
|
||||
value: T
|
||||
label: string
|
||||
color: ComponentProps<typeof BadgeSmall>['color']
|
||||
color: TailwindColor
|
||||
icon: string
|
||||
whereClause: Prisma.CommentWhereInput
|
||||
classNames: {
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { EventType } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type EventTypeInfo<T extends string | null | undefined = string> = {
|
||||
id: T
|
||||
@@ -14,7 +13,7 @@ type EventTypeInfo<T extends string | null | undefined = string> = {
|
||||
dot: string
|
||||
}
|
||||
icon: string
|
||||
color: ComponentProps<typeof BadgeSmall>['color']
|
||||
color: TailwindColor
|
||||
isSolved: boolean
|
||||
showBanner: boolean
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { ServiceSuggestionType } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type ServiceSuggestionTypeInfo<T extends string | null | undefined = string> = {
|
||||
value: T
|
||||
@@ -12,7 +11,7 @@ type ServiceSuggestionTypeInfo<T extends string | null | undefined = string> = {
|
||||
icon: string
|
||||
order: number
|
||||
default: boolean
|
||||
color: ComponentProps<typeof BadgeSmall>['color']
|
||||
color: TailwindColor
|
||||
}
|
||||
|
||||
export const {
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { ServiceUserRole } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type ServiceUserRoleInfo<T extends string | null | undefined = string> = {
|
||||
value: T
|
||||
@@ -11,7 +10,7 @@ type ServiceUserRoleInfo<T extends string | null | undefined = string> = {
|
||||
label: string
|
||||
icon: string
|
||||
order: number
|
||||
color: NonNullable<ComponentProps<typeof BadgeSmall>['color']>
|
||||
color: NonNullable<TailwindColor>
|
||||
}
|
||||
|
||||
export const {
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
|
||||
import { transformCase } from '../lib/strings'
|
||||
|
||||
import type BadgeSmall from '../components/BadgeSmall.astro'
|
||||
import type { TailwindColor } from '../lib/colors'
|
||||
import type { VerificationStepStatus } from '@prisma/client'
|
||||
import type { ComponentProps } from 'astro/types'
|
||||
|
||||
type VerificationStepStatusInfo<T extends string | null | undefined = string> = {
|
||||
value: T
|
||||
label: string
|
||||
icon: string
|
||||
color: ComponentProps<typeof BadgeSmall>['color']
|
||||
color: TailwindColor
|
||||
}
|
||||
|
||||
export const {
|
||||
|
||||
3
web/src/env.d.ts
vendored
3
web/src/env.d.ts
vendored
@@ -1,6 +1,7 @@
|
||||
/* eslint-disable @typescript-eslint/consistent-type-definitions */
|
||||
|
||||
import type { ErrorBanners } from './lib/errorBanners'
|
||||
import type { KarmaUnlocks } from './lib/karmaUnlocks'
|
||||
/* eslint-disable @typescript-eslint/consistent-type-definitions */
|
||||
import type { Prisma } from '@prisma/client'
|
||||
import type * as htmx from 'htmx.org'
|
||||
|
||||
|
||||
60
web/src/lib/client/browserNotifications.ts
Normal file
60
web/src/lib/client/browserNotifications.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { typedLocalStorage } from '../localstorage'
|
||||
|
||||
type SafeResult = { success: false; error: string } | { success: true; error?: undefined }
|
||||
|
||||
export function supportsBrowserNotifications() {
|
||||
return 'Notification' in window
|
||||
}
|
||||
|
||||
export function isBrowserNotificationsEnabled() {
|
||||
return (
|
||||
supportsBrowserNotifications() &&
|
||||
Notification.permission === 'granted' &&
|
||||
typedLocalStorage.browserNotificationsEnabled.get()
|
||||
)
|
||||
}
|
||||
|
||||
export async function enableBrowserNotifications(): Promise<SafeResult> {
|
||||
try {
|
||||
if (!supportsBrowserNotifications()) {
|
||||
return { success: false, error: 'Browser notifications are not supported' }
|
||||
}
|
||||
|
||||
const permission = await Notification.requestPermission()
|
||||
if (permission !== 'granted') {
|
||||
return { success: false, error: 'Notification permission denied' }
|
||||
}
|
||||
|
||||
typedLocalStorage.browserNotificationsEnabled.set(true)
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
console.error('Browser notification setup failed:', error)
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
return { success: false, error: `Browser notification setup failed: ${errorMessage}` }
|
||||
}
|
||||
}
|
||||
|
||||
export function disableBrowserNotifications(): SafeResult {
|
||||
try {
|
||||
typedLocalStorage.browserNotificationsEnabled.set(false)
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
console.error('Browser notification disable failed:', error)
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
return { success: false, error: `Browser notification disable failed: ${errorMessage}` }
|
||||
}
|
||||
}
|
||||
|
||||
export function showBrowserNotification(title: string, options?: NotificationOptions) {
|
||||
if (!isBrowserNotificationsEnabled()) {
|
||||
console.warn('Browser notifications are not enabled')
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
return new Notification(title, options)
|
||||
} catch (error) {
|
||||
console.error('Failed to show browser notification:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
187
web/src/lib/client/clientPushNotifications.ts
Normal file
187
web/src/lib/client/clientPushNotifications.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
import type { ActionInput } from '../astroActions'
|
||||
import type { actions } from 'astro:actions'
|
||||
|
||||
type ServerSubscription = {
|
||||
endpoint: string
|
||||
userAgent: string | null
|
||||
}
|
||||
|
||||
export type SafeResult =
|
||||
| {
|
||||
success: false
|
||||
error: string
|
||||
}
|
||||
| {
|
||||
success: true
|
||||
error?: undefined
|
||||
}
|
||||
|
||||
export async function subscribeToPushNotifications(vapidPublicKey: string): Promise<SafeResult> {
|
||||
try {
|
||||
if (!supportsPushNotifications()) {
|
||||
return { success: false, error: 'Push notifications are not supported in this browser' }
|
||||
}
|
||||
|
||||
const registration = await getServiceWorkerRegistration()
|
||||
if (!registration) return { success: false, error: 'Service worker not available' }
|
||||
|
||||
const permission = await Notification.requestPermission()
|
||||
if (permission !== 'granted') {
|
||||
return { success: false, error: 'Notification permission denied' }
|
||||
}
|
||||
|
||||
const subscription = await registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlB64ToUint8Array(vapidPublicKey),
|
||||
})
|
||||
|
||||
const p256dh = subscription.getKey('p256dh')
|
||||
const auth = subscription.getKey('auth')
|
||||
|
||||
const response = await fetch('/internal-api/notifications/subscribe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
endpoint: subscription.endpoint,
|
||||
userAgent: navigator.userAgent,
|
||||
p256dhKey: p256dh ? btoa(String.fromCharCode(...new Uint8Array(p256dh))) : '',
|
||||
authKey: auth ? btoa(String.fromCharCode(...new Uint8Array(auth))) : '',
|
||||
} satisfies ActionInput<typeof actions.notification.webPush.subscribe>),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
return { success: false, error: `Server error: ${response.statusText} ${errorText}` }
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
console.error('Push subscription failed:', error)
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
return { success: false, error: `Subscription failed: ${errorMessage}` }
|
||||
}
|
||||
}
|
||||
|
||||
export async function unsubscribeFromPushNotifications(): Promise<SafeResult> {
|
||||
try {
|
||||
const registration = await getServiceWorkerRegistration()
|
||||
if (!registration) return { success: false, error: 'Service worker not available' }
|
||||
|
||||
const subscription = await registration.pushManager.getSubscription()
|
||||
if (!subscription) return { success: false, error: 'No push subscription found' }
|
||||
|
||||
const unsubscribed = await subscription.unsubscribe()
|
||||
if (!unsubscribed) return { success: false, error: 'Failed to unsubscribe from browser' }
|
||||
|
||||
const response = await fetch('/internal-api/notifications/unsubscribe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
endpoint: subscription.endpoint,
|
||||
} satisfies ActionInput<typeof actions.notification.webPush.unsubscribe>),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
return { success: false, error: `Server error: ${response.statusText} ${errorText}` }
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
} catch (error) {
|
||||
console.error('Push unsubscription failed:', error)
|
||||
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||
return { success: false, error: `Unsubscription failed: ${errorMessage}` }
|
||||
}
|
||||
}
|
||||
|
||||
export function supportsPushNotifications() {
|
||||
const isSecure =
|
||||
window.isSecureContext ||
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1'
|
||||
|
||||
return isSecure && 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window
|
||||
}
|
||||
|
||||
async function getServiceWorkerRegistration() {
|
||||
try {
|
||||
if (window.__SW_REGISTRATION__) return window.__SW_REGISTRATION__
|
||||
return (await navigator.serviceWorker.getRegistration()) ?? null
|
||||
} catch (error) {
|
||||
console.error('Error getting service worker registration:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function getCurrentSubscription() {
|
||||
try {
|
||||
const registration = await getServiceWorkerRegistration()
|
||||
if (!registration) return null
|
||||
|
||||
return await registration.pushManager.getSubscription()
|
||||
} catch (error) {
|
||||
console.error('Error getting current push subscription:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function isCurrentDeviceSubscribed(serverSubscriptions: ServerSubscription[]) {
|
||||
const currentSubscription = await getCurrentSubscription()
|
||||
if (!currentSubscription || serverSubscriptions.length === 0) return false
|
||||
|
||||
const currentEndpoint = currentSubscription.endpoint
|
||||
const currentUserAgent = navigator.userAgent
|
||||
|
||||
return serverSubscriptions.some(
|
||||
(sub) =>
|
||||
sub.endpoint === currentEndpoint && (sub.userAgent === currentUserAgent || sub.userAgent === null)
|
||||
)
|
||||
}
|
||||
|
||||
function urlB64ToUint8Array(base64String: string) {
|
||||
const cleaned = base64String.trim().replace(/\s+/g, '').replace(/-/g, '+').replace(/_/g, '/')
|
||||
const padding = '='.repeat((4 - (cleaned.length % 4)) % 4)
|
||||
const base64 = cleaned + padding
|
||||
|
||||
const rawData = window.atob(base64)
|
||||
const outputArray = new Uint8Array(rawData.length)
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i)
|
||||
}
|
||||
return outputArray
|
||||
}
|
||||
|
||||
export function parsePushSubscriptions(subscriptionsAsString: string | undefined) {
|
||||
try {
|
||||
if (typeof subscriptionsAsString !== 'string') {
|
||||
console.error('Push subscriptions are not a string')
|
||||
return []
|
||||
}
|
||||
|
||||
const subscriptions = JSON.parse(subscriptionsAsString)
|
||||
|
||||
if (!Array.isArray(subscriptions)) {
|
||||
console.error('Push subscriptions are not an array')
|
||||
return []
|
||||
}
|
||||
|
||||
if (!subscriptions.every(isServerSubscription)) {
|
||||
console.error('Push subscriptions are not valid')
|
||||
return subscriptions.filter(isServerSubscription)
|
||||
}
|
||||
|
||||
return subscriptions
|
||||
} catch (error) {
|
||||
console.error('Failed to parse push subscriptions:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function isServerSubscription(subscription: unknown): subscription is ServerSubscription {
|
||||
if (typeof subscription !== 'object' || subscription === null) return false
|
||||
const s = subscription as Record<string, unknown>
|
||||
return typeof s.endpoint === 'string' && (typeof s.userAgent === 'string' || s.userAgent === null)
|
||||
}
|
||||
25
web/src/lib/colors.ts
Normal file
25
web/src/lib/colors.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
export type TailwindColor =
|
||||
| 'amber'
|
||||
| 'black'
|
||||
| 'blue'
|
||||
| 'cyan'
|
||||
| 'emerald'
|
||||
| 'fuchsia'
|
||||
| 'gray'
|
||||
| 'green'
|
||||
| 'indigo'
|
||||
| 'lime'
|
||||
| 'neutral'
|
||||
| 'orange'
|
||||
| 'pink'
|
||||
| 'purple'
|
||||
| 'red'
|
||||
| 'rose'
|
||||
| 'sky'
|
||||
| 'slate'
|
||||
| 'stone'
|
||||
| 'teal'
|
||||
| 'violet'
|
||||
| 'white'
|
||||
| 'yellow'
|
||||
| 'zinc'
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { z } from 'astro:content'
|
||||
import type { z } from 'astro/zod'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
|
||||
interface JSONObject {
|
||||
|
||||
@@ -50,4 +50,8 @@ export const typedLocalStorage = makeTypedLocalStorage({
|
||||
pushNotificationsBannerDismissedAt: {
|
||||
schema: z.coerce.date(),
|
||||
},
|
||||
browserNotificationsEnabled: {
|
||||
schema: z.boolean(),
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
56
web/src/lib/notificationOptions.ts
Normal file
56
web/src/lib/notificationOptions.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import type { NotificationData, NotificationPayload } from './serverEventsTypes'
|
||||
|
||||
export type CustomNotificationOptions = NotificationOptions & {
|
||||
actions?: { action: string; title: string; icon?: string }[]
|
||||
timestamp: number
|
||||
data: NotificationData
|
||||
}
|
||||
|
||||
export function makeNotificationOptions(
|
||||
payload: NotificationPayload | null,
|
||||
options: { removeActions?: boolean } = {}
|
||||
) {
|
||||
const defaultOptions: CustomNotificationOptions = {
|
||||
body: 'You have a new notification',
|
||||
lang: 'en-US',
|
||||
icon: '/favicon.svg',
|
||||
badge: '/favicon.svg',
|
||||
requireInteraction: false,
|
||||
silent: false,
|
||||
actions: options.removeActions
|
||||
? undefined
|
||||
: [
|
||||
{
|
||||
action: 'view',
|
||||
title: 'View',
|
||||
icon: 'https://api.iconify.design/ri/arrow-right-line.svg',
|
||||
},
|
||||
],
|
||||
timestamp: Date.now(),
|
||||
data: {
|
||||
defaultActionUrl: '/notifications',
|
||||
payload: null,
|
||||
},
|
||||
}
|
||||
|
||||
if (!payload) {
|
||||
return defaultOptions
|
||||
}
|
||||
|
||||
return {
|
||||
...defaultOptions,
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
body: payload.body || undefined,
|
||||
actions: options.removeActions
|
||||
? undefined
|
||||
: payload.actions.map((action) => ({
|
||||
action: action.action,
|
||||
title: action.title,
|
||||
icon: action.icon,
|
||||
})),
|
||||
data: {
|
||||
...defaultOptions.data,
|
||||
payload,
|
||||
},
|
||||
} as CustomNotificationOptions
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import { serviceSuggestionStatusChangesById } from '../constants/suggestionStatu
|
||||
|
||||
import { makeCommentUrl } from './commentsWithReplies'
|
||||
|
||||
import type { NotificationAction } from './webPush'
|
||||
import type { NotificationAction } from './serverEventsTypes'
|
||||
import type { Prisma } from '@prisma/client'
|
||||
|
||||
export function makeNotificationTitle(
|
||||
|
||||
@@ -1,100 +1,21 @@
|
||||
import { z } from 'astro/zod'
|
||||
import { Client } from 'pg'
|
||||
import { startListener, stopListener } from './postgresListeners'
|
||||
|
||||
import { zodParseJSON } from './json'
|
||||
import { sendNotification } from './sendNotifications'
|
||||
import { getServerEnvVariable } from './serverEnvVariables'
|
||||
|
||||
import type { AstroIntegration, HookParameters } from 'astro'
|
||||
|
||||
const DATABASE_URL = getServerEnvVariable('DATABASE_URL')
|
||||
|
||||
let pgClient: Client | null = null
|
||||
import type { AstroIntegration } from 'astro'
|
||||
|
||||
const INTEGRATION_NAME = 'postgres-listener'
|
||||
|
||||
async function handleNotificationCreated(
|
||||
notificationId: number,
|
||||
options: HookParameters<'astro:server:start'>
|
||||
) {
|
||||
const logger = options.logger.fork(INTEGRATION_NAME)
|
||||
try {
|
||||
logger.info(`Processing notification with ID: ${String(notificationId)}`)
|
||||
|
||||
const results = await sendNotification(notificationId, logger)
|
||||
|
||||
logger.info(
|
||||
`Sent push notifications for notification ${String(notificationId)} to ${String(results.success)} devices, ${String(results.failure)} failed`
|
||||
)
|
||||
} catch (error) {
|
||||
logger.error(`Error processing notification ${String(notificationId)}: ${getErrorMessage(error)}`)
|
||||
}
|
||||
}
|
||||
|
||||
export function postgresListener(): AstroIntegration {
|
||||
return {
|
||||
name: 'postgres-listener',
|
||||
hooks: {
|
||||
'astro:server:start': async (options) => {
|
||||
'astro:server:start': (options) => {
|
||||
const logger = options.logger.fork(INTEGRATION_NAME)
|
||||
|
||||
try {
|
||||
logger.info('Starting PostgreSQL notification listener...')
|
||||
|
||||
pgClient = new Client({ connectionString: DATABASE_URL })
|
||||
|
||||
await pgClient.connect()
|
||||
logger.info('Connected to PostgreSQL for notifications')
|
||||
|
||||
await pgClient.query('LISTEN notification_created')
|
||||
logger.info('Listening for notification_created events')
|
||||
|
||||
pgClient.on('notification', (msg) => {
|
||||
if (msg.channel === 'notification_created') {
|
||||
const payload = zodParseJSON(z.object({ id: z.number().int().positive() }), msg.payload)
|
||||
if (!payload) {
|
||||
logger.warn(`Invalid notification ID in payload: ${String(msg.payload)}`)
|
||||
return
|
||||
}
|
||||
|
||||
// NOTE: Don't await to avoid blocking
|
||||
void handleNotificationCreated(payload.id, options)
|
||||
}
|
||||
})
|
||||
|
||||
pgClient.on('error', (error) => {
|
||||
logger.error(`PostgreSQL client error: ${getErrorMessage(error)}`)
|
||||
})
|
||||
|
||||
pgClient.on('end', () => {
|
||||
logger.info('PostgreSQL client connection ended')
|
||||
})
|
||||
} catch (error) {
|
||||
logger.error(`Failed to start PostgreSQL listener: ${getErrorMessage(error)}`)
|
||||
}
|
||||
void startListener(logger)
|
||||
},
|
||||
|
||||
'astro:server:done': async ({ logger: originalLogger }) => {
|
||||
const logger = originalLogger.fork(INTEGRATION_NAME)
|
||||
|
||||
if (pgClient) {
|
||||
try {
|
||||
logger.info('Stopping PostgreSQL notification listener...')
|
||||
await pgClient.end()
|
||||
pgClient = null
|
||||
logger.info('PostgreSQL listener stopped')
|
||||
} catch (error) {
|
||||
logger.error(`Error stopping PostgreSQL listener: ${getErrorMessage(error)}`)
|
||||
}
|
||||
}
|
||||
'astro:server:done': (options) => {
|
||||
const logger = options.logger.fork(INTEGRATION_NAME)
|
||||
void stopListener(logger)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
return error.message
|
||||
}
|
||||
return String(error)
|
||||
}
|
||||
|
||||
112
web/src/lib/postgresListeners.ts
Normal file
112
web/src/lib/postgresListeners.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { Client } from 'pg'
|
||||
|
||||
import { getRedisServerEvents, type RedisServerEvents } from './redis/redisServerEvents'
|
||||
import { sendNotification } from './sendNotifications'
|
||||
import { getServerEnvVariable } from './serverEnvVariables'
|
||||
|
||||
import type { AstroIntegrationLogger } from 'astro'
|
||||
|
||||
const DATABASE_URL = getServerEnvVariable('DATABASE_URL')
|
||||
|
||||
let pgClient: Client | null = null
|
||||
|
||||
export async function startListener(
|
||||
logger: Pick<AstroIntegrationLogger, 'debug' | 'error' | 'info' | 'warn'>
|
||||
) {
|
||||
try {
|
||||
logger.info('Starting PostgreSQL notification listener...')
|
||||
|
||||
pgClient = new Client({ connectionString: DATABASE_URL })
|
||||
|
||||
await pgClient.connect()
|
||||
logger.info('Connected to PostgreSQL for notifications')
|
||||
|
||||
await pgClient.query('LISTEN notification_created')
|
||||
logger.info('Listening for notification_created events')
|
||||
|
||||
const redisServerEvents = await getRedisServerEvents()
|
||||
|
||||
pgClient.on('notification', (msg) => {
|
||||
if (msg.channel === 'notification_created') {
|
||||
const payload = parseJSON(msg.payload)
|
||||
if (
|
||||
!payload ||
|
||||
typeof payload !== 'object' ||
|
||||
!('id' in payload) ||
|
||||
typeof payload.id !== 'number' ||
|
||||
payload.id <= 0 ||
|
||||
!Number.isFinite(payload.id) ||
|
||||
!Number.isInteger(payload.id)
|
||||
) {
|
||||
logger.warn(`Invalid notification ID in payload: ${String(msg.payload)}`)
|
||||
return
|
||||
}
|
||||
|
||||
// NOTE: Don't await to avoid blocking
|
||||
void handleNotificationCreated(payload.id, logger, redisServerEvents)
|
||||
}
|
||||
})
|
||||
|
||||
pgClient.on('error', (error) => {
|
||||
logger.error(`PostgreSQL client error: ${getErrorMessage(error)}`)
|
||||
})
|
||||
|
||||
pgClient.on('end', () => {
|
||||
logger.info('PostgreSQL client connection ended')
|
||||
})
|
||||
} catch (error) {
|
||||
logger.error(`Failed to start PostgreSQL listener: ${getErrorMessage(error)}`)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNotificationCreated(
|
||||
notificationId: number,
|
||||
logger: Pick<AstroIntegrationLogger, 'debug' | 'error' | 'info' | 'warn'>,
|
||||
redisServerEvents: RedisServerEvents
|
||||
) {
|
||||
try {
|
||||
logger.info(`Processing notification with ID: ${String(notificationId)}`)
|
||||
|
||||
const results = await sendNotification(notificationId, logger, redisServerEvents)
|
||||
|
||||
logger.info(
|
||||
`Sent push notifications for notification ${String(notificationId)} to ${String(results.success)} devices, ${String(results.failure)} failed`
|
||||
)
|
||||
} catch (error) {
|
||||
logger.error(`Error processing notification ${String(notificationId)}: ${getErrorMessage(error)}`)
|
||||
}
|
||||
}
|
||||
|
||||
export async function stopListener(logger: AstroIntegrationLogger) {
|
||||
if (pgClient) {
|
||||
try {
|
||||
logger.info('Stopping PostgreSQL notification listener...')
|
||||
await pgClient.end()
|
||||
pgClient = null
|
||||
logger.info('PostgreSQL listener stopped')
|
||||
} catch (error) {
|
||||
logger.error(`Error stopping PostgreSQL listener: ${getErrorMessage(error)}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseJSON<T = unknown, D extends T | undefined = undefined>(
|
||||
stringValue: string | null | undefined,
|
||||
defaultValue?: D
|
||||
): D | T {
|
||||
if (!stringValue) return defaultValue as D
|
||||
|
||||
try {
|
||||
return JSON.parse(stringValue) as T
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return defaultValue as D
|
||||
}
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
return error.message
|
||||
}
|
||||
return String(error)
|
||||
}
|
||||
@@ -2,7 +2,6 @@ import { randomUUID } from 'node:crypto'
|
||||
|
||||
import { deserializeActionResult } from 'astro:actions'
|
||||
import { z } from 'astro:content'
|
||||
import { REDIS_ACTIONS_SESSION_EXPIRY_SECONDS } from 'astro:env/server'
|
||||
|
||||
import { RedisGenericManager } from './redisGenericManager'
|
||||
|
||||
@@ -29,11 +28,13 @@ const dataSchema = z.object({
|
||||
})
|
||||
|
||||
class RedisActionsSessions extends RedisGenericManager {
|
||||
private readonly prefix = 'actions_session:'
|
||||
|
||||
async store(data: z.input<typeof dataSchema>) {
|
||||
const sessionId = randomUUID()
|
||||
|
||||
const parsedData = dataSchema.parse(data)
|
||||
await this.redisClient.set(`actions-session:${sessionId}`, JSON.stringify(parsedData), {
|
||||
await this.redisClient.set(`${this.prefix}${sessionId}`, JSON.stringify(parsedData), {
|
||||
EX: this.expirationTime,
|
||||
})
|
||||
|
||||
@@ -43,7 +44,7 @@ class RedisActionsSessions extends RedisGenericManager {
|
||||
async get(sessionId: string | null | undefined) {
|
||||
if (!sessionId) return null
|
||||
|
||||
const key = `actions-session:${sessionId}`
|
||||
const key = `${this.prefix}${sessionId}`
|
||||
|
||||
const rawData = await this.redisClient.get(key)
|
||||
if (!rawData) return null
|
||||
@@ -60,10 +61,10 @@ class RedisActionsSessions extends RedisGenericManager {
|
||||
async delete(sessionId: string | null | undefined) {
|
||||
if (!sessionId) return
|
||||
|
||||
await this.redisClient.del(`actions-session:${sessionId}`)
|
||||
await this.redisClient.del(`${this.prefix}${sessionId}`)
|
||||
}
|
||||
}
|
||||
|
||||
export const redisActionsSessions = await RedisActionsSessions.createAndConnect({
|
||||
expirationTime: REDIS_ACTIONS_SESSION_EXPIRY_SECONDS,
|
||||
expirationTime: 60 * 5, // 5 minutes in seconds
|
||||
})
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { REDIS_URL } from 'astro:env/server'
|
||||
import { createClient } from 'redis'
|
||||
|
||||
import { getServerEnvVariable } from '../serverEnvVariables'
|
||||
|
||||
const REDIS_URL = getServerEnvVariable('REDIS_URL')
|
||||
|
||||
type RedisGenericManagerOptions = {
|
||||
expirationTime: number
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { randomUUID } from 'node:crypto'
|
||||
|
||||
import { z } from 'astro:content'
|
||||
import { REDIS_IMPERSONATION_SESSION_EXPIRY_SECONDS } from 'astro:env/server'
|
||||
|
||||
import { RedisGenericManager } from './redisGenericManager'
|
||||
|
||||
@@ -11,11 +10,13 @@ const dataSchema = z.object({
|
||||
})
|
||||
|
||||
class RedisImpersonationSessions extends RedisGenericManager {
|
||||
private readonly prefix = 'impersonation_session:'
|
||||
|
||||
async store(data: z.input<typeof dataSchema>) {
|
||||
const sessionId = randomUUID()
|
||||
|
||||
const parsedData = dataSchema.parse(data)
|
||||
await this.redisClient.set(`impersonation-session:${sessionId}`, JSON.stringify(parsedData), {
|
||||
await this.redisClient.set(`${this.prefix}${sessionId}`, JSON.stringify(parsedData), {
|
||||
EX: this.expirationTime,
|
||||
})
|
||||
|
||||
@@ -25,7 +26,7 @@ class RedisImpersonationSessions extends RedisGenericManager {
|
||||
async get(sessionId: string | null | undefined) {
|
||||
if (!sessionId) return null
|
||||
|
||||
const key = `impersonation-session:${sessionId}`
|
||||
const key = `${this.prefix}${sessionId}`
|
||||
|
||||
const rawData = await this.redisClient.get(key)
|
||||
if (!rawData) return null
|
||||
@@ -36,10 +37,10 @@ class RedisImpersonationSessions extends RedisGenericManager {
|
||||
async delete(sessionId: string | null | undefined) {
|
||||
if (!sessionId) return
|
||||
|
||||
await this.redisClient.del(`impersonation-session:${sessionId}`)
|
||||
await this.redisClient.del(`${this.prefix}${sessionId}`)
|
||||
}
|
||||
}
|
||||
|
||||
export const redisImpersonationSessions = await RedisImpersonationSessions.createAndConnect({
|
||||
expirationTime: REDIS_IMPERSONATION_SESSION_EXPIRY_SECONDS,
|
||||
expirationTime: 60 * 60 * 24, // 24 hours in seconds
|
||||
})
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { REDIS_PREGENERATED_TOKEN_EXPIRY_SECONDS } from 'astro:env/server'
|
||||
|
||||
import { RedisGenericManager } from './redisGenericManager'
|
||||
|
||||
class RedisPreGeneratedSecretTokens extends RedisGenericManager {
|
||||
private readonly prefix = 'pregenerated_user_secret_token:'
|
||||
|
||||
/**
|
||||
* Stores a pre-generated token with expiration
|
||||
* @param token The pre-generated token
|
||||
*/
|
||||
async storePreGeneratedToken(token: string): Promise<void> {
|
||||
await this.redisClient.set(`pregenerated-user-secret-token:${token}`, '1', {
|
||||
await this.redisClient.set(`${this.prefix}${token}`, '1', {
|
||||
EX: this.expirationTime,
|
||||
})
|
||||
}
|
||||
@@ -19,7 +19,7 @@ class RedisPreGeneratedSecretTokens extends RedisGenericManager {
|
||||
* @returns true if token was valid and consumed, false otherwise
|
||||
*/
|
||||
async validateAndConsumePreGeneratedToken(token: string): Promise<boolean> {
|
||||
const key = `pregenerated-user-secret-token:${token}`
|
||||
const key = `${this.prefix}${token}`
|
||||
const exists = await this.redisClient.exists(key)
|
||||
if (exists) {
|
||||
await this.redisClient.del(key)
|
||||
@@ -30,5 +30,5 @@ class RedisPreGeneratedSecretTokens extends RedisGenericManager {
|
||||
}
|
||||
|
||||
export const redisPreGeneratedSecretTokens = await RedisPreGeneratedSecretTokens.createAndConnect({
|
||||
expirationTime: REDIS_PREGENERATED_TOKEN_EXPIRY_SECONDS,
|
||||
expirationTime: 60 * 5, // 5 minutes in seconds
|
||||
})
|
||||
|
||||
72
web/src/lib/redis/redisServerEvents.ts
Normal file
72
web/src/lib/redis/redisServerEvents.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { allServerEventsData, type ServerEventsData, type ServerEventsEvent } from '../serverEventsTypes'
|
||||
|
||||
import { RedisGenericManager } from './redisGenericManager'
|
||||
|
||||
export class RedisServerEvents extends RedisGenericManager {
|
||||
private readonly prefix = 'server_events:'
|
||||
|
||||
/**
|
||||
* Broadcast an event to a user's server events listener.
|
||||
*
|
||||
* @param eventName - The event name to broadcast.
|
||||
* @param userId - The user ID to broadcast to.
|
||||
* @param data - The event to broadcast.
|
||||
*/
|
||||
async send<T extends keyof ServerEventsData>(
|
||||
userId: number,
|
||||
eventName: T,
|
||||
data: ServerEventsData[T]
|
||||
): Promise<void> {
|
||||
const channel = `${this.prefix}${String(userId)}:${eventName}` as const
|
||||
await this.redisClient.publish(channel, JSON.stringify(data))
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to server events for a user.
|
||||
*
|
||||
* @param eventName - The event name to subscribe to.
|
||||
* @param userId - The user ID to subscribe to.
|
||||
* @param callback - The callback to call when the event is received.
|
||||
* @returns A cleanup function to unsubscribe.
|
||||
*/
|
||||
async addListener<T extends keyof ServerEventsData | 'all'>(
|
||||
eventName: T,
|
||||
userId: number,
|
||||
callback: (event: T extends 'all' ? ServerEventsEvent : Extract<ServerEventsEvent, { type: T }>) => void
|
||||
): Promise<() => Promise<void>> {
|
||||
const subscriber = this.redisClient.duplicate()
|
||||
await subscriber.connect()
|
||||
|
||||
const channel =
|
||||
eventName === 'all'
|
||||
? allServerEventsData.map((eventName) => `${this.prefix}${String(userId)}:${eventName}` as const)
|
||||
: (`${this.prefix}${String(userId)}:${eventName}` as const)
|
||||
|
||||
await subscriber.subscribe(channel, (message, channelKey) => {
|
||||
try {
|
||||
const data = JSON.parse(message) as ServerEventsData[T extends 'all' ? keyof ServerEventsData : T]
|
||||
const type = channelKey.split(':')[2] as T extends 'all' ? keyof ServerEventsData : T
|
||||
const event = { type, data } as T extends 'all'
|
||||
? ServerEventsEvent
|
||||
: Extract<ServerEventsEvent, { type: T }>
|
||||
callback(event)
|
||||
} catch (error) {
|
||||
console.error('Failed to parse notification stream event:', error)
|
||||
}
|
||||
})
|
||||
|
||||
return async () => {
|
||||
await subscriber.unsubscribe(channel)
|
||||
subscriber.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let redisServerEvents: RedisServerEvents | null = null
|
||||
|
||||
export async function getRedisServerEvents() {
|
||||
redisServerEvents ??= await RedisServerEvents.createAndConnect({
|
||||
expirationTime: 60 * 60 * 24, // 24 hours in seconds
|
||||
})
|
||||
return redisServerEvents
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import { randomBytes } from 'crypto'
|
||||
|
||||
import { REDIS_USER_SESSION_EXPIRY_SECONDS } from 'astro:env/server'
|
||||
|
||||
import { RedisGenericManager } from './redisGenericManager'
|
||||
|
||||
class RedisSessions extends RedisGenericManager {
|
||||
@@ -74,5 +72,5 @@ class RedisSessions extends RedisGenericManager {
|
||||
}
|
||||
|
||||
export const redisSessions = await RedisSessions.createAndConnect({
|
||||
expirationTime: REDIS_USER_SESSION_EXPIRY_SECONDS,
|
||||
expirationTime: 60 * 60 * 24, // 24 hours in seconds
|
||||
})
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import { makeNotificationActions, makeNotificationContent, makeNotificationTitle } from './notifications'
|
||||
import { prisma } from './prisma'
|
||||
import { getServerEnvVariable } from './serverEnvVariables'
|
||||
import { type NotificationPayload, sendPushNotification } from './webPush'
|
||||
import { sendPushNotification } from './webPush'
|
||||
|
||||
import type { RedisServerEvents } from './redis/redisServerEvents'
|
||||
import type { NotificationPayload } from './serverEventsTypes'
|
||||
import type { AstroIntegrationLogger } from 'astro'
|
||||
|
||||
const SITE_URL = getServerEnvVariable('SITE_URL')
|
||||
|
||||
export async function sendNotification(
|
||||
notificationId: number,
|
||||
logger: AstroIntegrationLogger | Console = console
|
||||
logger: Pick<AstroIntegrationLogger, 'debug' | 'error' | 'info' | 'warn'>,
|
||||
redisServerEvents: RedisServerEvents
|
||||
) {
|
||||
const notification = await prisma.notification.findUnique({
|
||||
where: { id: notificationId },
|
||||
@@ -123,17 +126,14 @@ export async function sendNotification(
|
||||
},
|
||||
})
|
||||
|
||||
if (subscriptions.length === 0) {
|
||||
logger.info(`No push subscriptions found for user ${notification.user.name}`)
|
||||
return { success: 0, failure: 0, total: 0 }
|
||||
}
|
||||
|
||||
const notificationPayload = {
|
||||
title: makeNotificationTitle(notification, notification.user),
|
||||
body: makeNotificationContent(notification),
|
||||
actions: makeNotificationActions(notification, SITE_URL),
|
||||
} satisfies NotificationPayload
|
||||
|
||||
await redisServerEvents.send(notification.userId, 'new-notification', notificationPayload)
|
||||
|
||||
const subscriptionResults = await Promise.allSettled(
|
||||
subscriptions.map(async (subscription) => {
|
||||
const result = await sendPushNotification(
|
||||
|
||||
60
web/src/lib/serverEventsTypes.ts
Normal file
60
web/src/lib/serverEventsTypes.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import type { Assert } from './assert'
|
||||
import type { Equals } from 'ts-toolbelt/out/Any/Equals'
|
||||
|
||||
export type NotificationAction = {
|
||||
action: string
|
||||
title: string
|
||||
icon?: string
|
||||
|
||||
url: string | null
|
||||
iconName?: string
|
||||
}
|
||||
|
||||
export type NotificationPayload = {
|
||||
title: string
|
||||
body: string | null
|
||||
actions: NotificationAction[]
|
||||
}
|
||||
|
||||
export type NotificationData = {
|
||||
defaultActionUrl: string
|
||||
payload: NotificationPayload | null
|
||||
}
|
||||
|
||||
export type ServerEventsData = {
|
||||
'new-notification': NotificationPayload
|
||||
'new-connection': {
|
||||
timestamp: string
|
||||
}
|
||||
}
|
||||
|
||||
export const allServerEventsData = [
|
||||
'new-notification',
|
||||
'new-connection',
|
||||
] as const satisfies (keyof ServerEventsData)[]
|
||||
|
||||
type _ExpectServerEventsDataToHaveAllValues = Assert<
|
||||
Equals<(typeof allServerEventsData)[number], keyof ServerEventsData>
|
||||
>
|
||||
|
||||
export type ServerEventsEvent = {
|
||||
[K in keyof ServerEventsData]: {
|
||||
type: K
|
||||
data: ServerEventsData[K]
|
||||
}
|
||||
}[keyof ServerEventsData]
|
||||
|
||||
export type SSEEventMap = {
|
||||
[K in keyof ServerEventsData as `sse-${K}`]: CustomEvent<ServerEventsData[K]>
|
||||
}
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
|
||||
interface Document {
|
||||
addEventListener<K extends keyof SSEEventMap>(
|
||||
type: K,
|
||||
listener: (this: Document, ev: SSEEventMap[K]) => void
|
||||
): void
|
||||
dispatchEvent<K extends keyof SSEEventMap>(ev: SSEEventMap[K]): void
|
||||
}
|
||||
}
|
||||
@@ -3,30 +3,17 @@ import webpush, { WebPushError } from 'web-push'
|
||||
|
||||
import { getServerEnvVariable } from './serverEnvVariables'
|
||||
|
||||
import type { NotificationPayload } from './serverEventsTypes'
|
||||
|
||||
const VAPID_SUBJECT = getServerEnvVariable('VAPID_SUBJECT')
|
||||
const VAPID_PUBLIC_KEY = getServerEnvVariable('VAPID_PUBLIC_KEY')
|
||||
const VAPID_PRIVATE_KEY = getServerEnvVariable('VAPID_PRIVATE_KEY')
|
||||
const VAPID_SUBJECT = getServerEnvVariable('VAPID_SUBJECT')
|
||||
|
||||
// Configure VAPID keys
|
||||
webpush.setVapidDetails(VAPID_SUBJECT, VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY)
|
||||
|
||||
export { webpush }
|
||||
|
||||
export type NotificationAction = {
|
||||
action: string
|
||||
title: string
|
||||
icon?: string
|
||||
|
||||
url: string | null
|
||||
iconName?: string
|
||||
}
|
||||
|
||||
export type NotificationPayload = {
|
||||
title: string
|
||||
body: string | null
|
||||
actions: NotificationAction[]
|
||||
}
|
||||
|
||||
export async function sendPushNotification(
|
||||
subscription: {
|
||||
endpoint: string
|
||||
|
||||
@@ -57,62 +57,77 @@ Some users are **verified**, this means that the moderators have confirmed that
|
||||
|
||||
Users can also be **affiliated** with a service if they're related to it, such as being an owner or part of the team. If you own a service and want to get verified, just reach out to us.
|
||||
|
||||
|
||||
## Listings
|
||||
|
||||
### Suggesting a new listing
|
||||
|
||||
To suggest a new listing, visit the [service suggestion form](/service-suggestion/new) and provide the most accurate information possible for higher chances to get approved.
|
||||
Suggest a new listing by visiting the [service suggestion form](/service-suggestion/new). Provide the most accurate information for higher chances of getting approved.
|
||||
|
||||
Once submitted, you get a unique tracking page where you can monitor its status and communicate directly with moderators.
|
||||
Once submitted, you will get a **unique tracking page** where you can monitor the suggestion status and communicate directly with moderators.
|
||||
|
||||
All new listings begin as **unlisted** — they're only accessible via direct link and won't appear in search results. After a brief admin review to confirm the request isn't spam or inappropriate, the listing will be marked as **Community Contributed**.
|
||||
|
||||
#### Requirements
|
||||
#### Listing Requirements
|
||||
|
||||
To list a new service, it must fulfill these requirements:
|
||||
|
||||
- Offer a service.
|
||||
- Offer a service
|
||||
- Publicly available website explaining what the service is about
|
||||
- Terms of service or FAQ document
|
||||
|
||||
For examples:
|
||||
Examples of non-valid services:
|
||||
|
||||
- Just a Telegram link or a criptocurrency itself is not a valid service.
|
||||
- Just a Telegram link
|
||||
- A cryptocurrency project
|
||||
- A cryptocurrency wallet
|
||||
|
||||
### Suggestion Review Process
|
||||
#### Suggestion Review Process
|
||||
|
||||
#### First Review
|
||||
When you submit a new service, it gets the `COMMUNITY_CONTRIBUTED` status and the `unlisted` visibility level. The service **will not appear in search results**, but it can be viewed with a direct link.
|
||||
|
||||
##### First Review (Unlisted -> Public)
|
||||
|
||||
- A member of the **KYCnot.me team** reviews the submission to ensure it isn't spam or inappropriate.
|
||||
- If the listing passes this initial check, it becomes **publicly visible** to all users.
|
||||
- At this stage, the listing is **Community Contributed** and will show a disclaimer.
|
||||
|
||||
#### Second Review (APPROVED)
|
||||
> Allow up to a week for the initial review. As a small team of two volunteers, we have to handle a large number of suggestions alongside our other life commitments.
|
||||
|
||||
- The service is tested and investigated again.
|
||||
- If it proves to be reliable, it is granted the `APPROVED` status, which means:
|
||||
- The information is accurate.
|
||||
- The service works as described (at the time of the testing).
|
||||
- Basic functionality has been tested.
|
||||
- Communication with the service's support was successful.
|
||||
- A brief investigation found no obvious red flags.
|
||||
##### Second Review (Community Contributed -> Approved)
|
||||
|
||||
#### Final Review (VERIFIED)
|
||||
The service will be tested and investigated more in depth. If:
|
||||
|
||||
- After a period of no reported issues, the service will undergo a **third, comprehensive review**.
|
||||
- The service is tested across different dates and under various conditions.
|
||||
- The service administrators and support teams will be contacted for additional verification.
|
||||
- If the service meets all requirements, it is granted the **`VERIFIED`** status.
|
||||
- Service information is accurate.
|
||||
- Works as described (at the time of the testing).
|
||||
- Basic functionality is tested successfully.
|
||||
- Communication with service's support was successful.
|
||||
- No obvious red flags.
|
||||
- Platform user reviews will be taken into account.
|
||||
- Terms of Service and other documents are briefly reviewed.
|
||||
- Other platforms are checked for the service reputation (Trustpilot, Reddit, Bitcointalk, etc.)
|
||||
|
||||
#### Failed Verifications
|
||||
The service will be granted the `APPROVED` status.
|
||||
|
||||
##### Final Review (Approved -> Verified)
|
||||
|
||||
After a period of no reported issues, we will do a **third review**.
|
||||
|
||||
- The service is tested across different dates and under various conditions.
|
||||
- The service administrators and support teams will be contacted for additional verification.
|
||||
- User reviews will be checked for any issues and taken into account.
|
||||
- Terms of Service and other documents will be reviewed again.
|
||||
- Other platforms are checked for the service reputation (Trustpilot, Reddit, Bitcointalk, etc.)
|
||||
|
||||
If the service meets all requirements, it is granted the **`VERIFIED`** status.
|
||||
|
||||
##### Failed Verifications (Scams)
|
||||
|
||||
If the data is not accurate, the service is a scam, or any other checks fail, the service will be rejected and will appear with a disclaimer.
|
||||
|
||||
### Verification Steps
|
||||
#### Verification Steps
|
||||
|
||||
Services will usually show the verification steps that the admins took to reach the verified (or not) status. Each step will have a description and some evidence attached.
|
||||
|
||||
### Service Attributes
|
||||
#### Service Attributes
|
||||
|
||||
An attribute is a feature of a service, categorized as:
|
||||
|
||||
@@ -130,11 +145,11 @@ Attributes are classified into two main types:
|
||||
|
||||
These categories **directly influence** a service's Privacy and Trust scores, which contribute to its **overall rating**.
|
||||
|
||||
### Service Scores
|
||||
#### Service Scores
|
||||
|
||||
Scores are calculated **automatically** using clear, fixed rules. We do not change or adjust scores by hand. The scoring system is **open-source** and anyone can review or suggest improvements.
|
||||
|
||||
#### Privacy Score
|
||||
##### Privacy Score
|
||||
|
||||
The privacy score measures how well a service protects user privacy, using a transparent, rules-based approach:
|
||||
|
||||
@@ -151,7 +166,7 @@ The privacy score measures how well a service protects user privacy, using a tra
|
||||
6. **Privacy Attributes:** The sum of all privacy points from attributes categorized as 'PRIVACY' is added to the score. [See all attributes](/attributes).
|
||||
7. **Final Score Range:** The final score is always kept between 0 and 100.
|
||||
|
||||
#### Trust Score
|
||||
##### Trust Score
|
||||
|
||||
The trust score represents how reliable and trustworthy a service is, based on objective, transparent criteria.
|
||||
|
||||
@@ -165,11 +180,11 @@ The trust score represents how reliable and trustworthy a service is, based on o
|
||||
4. **Recently Listed Penalty & Flag:** If a service was listed within the last 15 days and its status is `APPROVED`, a penalty of -10 points is applied to the trust score, and the service is flagged as recently listed.
|
||||
5. **Final Score Range:** The final score is always kept between 0 and 100.
|
||||
|
||||
#### Overall Score
|
||||
##### Overall Score
|
||||
|
||||
The overall score is calculated as `(privacy * 0.6) + (trust * 0.4)` and provides a combined measure of privacy and trust.
|
||||
|
||||
### Terms of Service Reviews
|
||||
#### Terms of Service Reviews
|
||||
|
||||
KYCnot.me automatically reviews and summarizes the Terms of Service (ToS) for every service monthly using AI. You get simple, clear summaries that highlight the most important points, so you can quickly see what matters.
|
||||
|
||||
@@ -177,7 +192,7 @@ We hash each ToS document and only review it again if it changes. Some services
|
||||
|
||||
We aim for accuracy, but the AI may sometimes miss details or highlight less relevant information. If you see any error, contact us.
|
||||
|
||||
### Events
|
||||
#### Events
|
||||
|
||||
There are two types of events:
|
||||
|
||||
@@ -186,7 +201,7 @@ There are two types of events:
|
||||
|
||||
You can also take a look at the [global timeline](/events) where you will find all the service's events sorted by date.
|
||||
|
||||
### Reviews and Comments
|
||||
## Reviews and Comments
|
||||
|
||||
Reviews are comments with a one to five star rating for the service. Each user can leave only one review per service; new reviews replace the old one.
|
||||
|
||||
@@ -196,7 +211,7 @@ If you've used the service, you can add an **order ID** or proof—this is only
|
||||
|
||||
Some reviews may be spam or fake. Read comments carefully and **always do your own research before making decisions**.
|
||||
|
||||
#### Note on moderation
|
||||
### Note on moderation
|
||||
|
||||
**All comments are moderated.** First, an AI checks each comment. If nothing is flagged, the comment is published right away. If something seems off, the comment is held for a human to review. We only remove comments that are spam, nonsense, unsupported accusations, doxxing, or clear rule violations.
|
||||
|
||||
|
||||
@@ -46,8 +46,6 @@ const createInputErrors = isInputError(createResult?.error) ? createResult.error
|
||||
const updateResult = Astro.getActionResult(actions.admin.attribute.update)
|
||||
Astro.locals.banners.addIfSuccess(updateResult, 'Attribute updated successfully')
|
||||
|
||||
const updatedAttributeId = updateResult?.data?.attribute.id ?? null
|
||||
|
||||
const sortBy = filters['sort-by']
|
||||
const sortOrder = filters['sort-order']
|
||||
|
||||
@@ -724,8 +722,6 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<script define:vars={{ updatedAttributeId }}></script>
|
||||
|
||||
<style>
|
||||
@keyframes highlight {
|
||||
0% {
|
||||
|
||||
@@ -14,12 +14,10 @@ import {
|
||||
} from '../../../constants/serviceSuggestionStatus'
|
||||
import { getServiceSuggestionTypeInfo } from '../../../constants/serviceSuggestionType'
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro'
|
||||
import { cn } from '../../../lib/cn'
|
||||
import { parseIntWithFallback } from '../../../lib/numbers'
|
||||
import { prisma } from '../../../lib/prisma'
|
||||
import { makeLoginUrl } from '../../../lib/redirectUrls'
|
||||
import { formatDateShort } from '../../../lib/timeAgo'
|
||||
import BadgeStandard from '../../../components/BadgeStandard.astro'
|
||||
|
||||
const user = Astro.locals.user
|
||||
if (!user?.admin) {
|
||||
|
||||
@@ -37,12 +37,8 @@ if (!user?.admin) {
|
||||
const { data: filters } = zodParseQueryParamsStoringErrors(
|
||||
{
|
||||
search: z.string().optional(),
|
||||
status: serviceSuggestionStatusesZodEnumBySlug
|
||||
.transform((slug) => serviceSuggestionStatusSlugToId(slug))
|
||||
.optional(),
|
||||
type: serviceSuggestionTypesZodEnumBySlug
|
||||
.transform((slug) => serviceSuggestionTypeSlugToId(slug))
|
||||
.optional(),
|
||||
status: serviceSuggestionStatusesZodEnumBySlug.or(z.literal('all')).default('pending'),
|
||||
type: serviceSuggestionTypesZodEnumBySlug.or(z.literal('all')).optional(),
|
||||
'sort-by': z
|
||||
.enum(['service', 'status', 'type', 'user', 'createdAt', 'messageCount'])
|
||||
.default('createdAt'),
|
||||
@@ -51,6 +47,11 @@ const { data: filters } = zodParseQueryParamsStoringErrors(
|
||||
Astro
|
||||
)
|
||||
|
||||
const statusFilter = filters.status === 'all' ? undefined : serviceSuggestionStatusSlugToId(filters.status)
|
||||
|
||||
const typeFilter =
|
||||
!filters.type || filters.type === 'all' ? undefined : serviceSuggestionTypeSlugToId(filters.type)
|
||||
|
||||
let prismaOrderBy: Prisma.ServiceSuggestionOrderByWithRelationInput = { createdAt: 'desc' }
|
||||
if (filters['sort-by'] === 'createdAt') {
|
||||
prismaOrderBy = { createdAt: filters['sort-order'] }
|
||||
@@ -67,8 +68,8 @@ let suggestions = await prisma.serviceSuggestion.findMany({
|
||||
],
|
||||
}
|
||||
: {}),
|
||||
status: filters.status,
|
||||
type: filters.type,
|
||||
status: statusFilter,
|
||||
type: typeFilter,
|
||||
},
|
||||
orderBy: prismaOrderBy,
|
||||
select: {
|
||||
@@ -198,10 +199,10 @@ const makeSortUrl = (slug: string) => {
|
||||
id="status-filter"
|
||||
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
<option value="all" selected={filters.status === 'all'}>All Statuses</option>
|
||||
{
|
||||
serviceSuggestionStatuses.map((status) => (
|
||||
<option value={status.slug} selected={filters.status === status.value}>
|
||||
<option value={status.slug} selected={filters.status === status.slug}>
|
||||
{status.label}
|
||||
</option>
|
||||
))
|
||||
@@ -215,10 +216,10 @@ const makeSortUrl = (slug: string) => {
|
||||
id="type-filter"
|
||||
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="all" selected={!filters.type || filters.type === 'all'}>All Types</option>
|
||||
{
|
||||
serviceSuggestionTypes.map((type) => (
|
||||
<option value={type.slug} selected={filters.type === type.value}>
|
||||
<option value={type.slug} selected={filters.type === type.slug}>
|
||||
{type.label}
|
||||
</option>
|
||||
))
|
||||
|
||||
@@ -9,6 +9,7 @@ export const GET: APIRoute = () => {
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
74
web/src/pages/internal-api/server-events.ts
Normal file
74
web/src/pages/internal-api/server-events.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { SITE_URL } from 'astro:env/client'
|
||||
|
||||
import { getRedisServerEvents } from '../../lib/redis/redisServerEvents'
|
||||
|
||||
import type { ServerEventsEvent } from '../../lib/serverEventsTypes'
|
||||
import type { APIRoute } from 'astro'
|
||||
|
||||
const redisServerEvents = await getRedisServerEvents()
|
||||
|
||||
export const GET: APIRoute = ({ request, locals }) => {
|
||||
const user = locals.user
|
||||
|
||||
let cleanup: (() => Promise<void>) | null = null
|
||||
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
function sendEvent(event: ServerEventsEvent) {
|
||||
try {
|
||||
controller.enqueue(encodeSSE(event))
|
||||
} catch (error) {
|
||||
console.error('Failed to send SSE event:', event.type, error)
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
sendEvent({ type: 'new-connection', data: { timestamp: new Date().toISOString() } })
|
||||
|
||||
cleanup = user
|
||||
? await redisServerEvents.addListener('all', user.id, (event) => {
|
||||
sendEvent(event)
|
||||
})
|
||||
: null
|
||||
|
||||
async function abort() {
|
||||
try {
|
||||
await cleanup?.()
|
||||
controller.close()
|
||||
} catch (error) {
|
||||
console.error('Failed to cleanup SSE connection:', error)
|
||||
}
|
||||
}
|
||||
|
||||
request.signal.addEventListener('abort', () => {
|
||||
void abort()
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to start SSE stream:', error)
|
||||
controller.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
async cancel() {
|
||||
try {
|
||||
await cleanup?.()
|
||||
} catch (error) {
|
||||
console.error('Failed to cleanup on cancel:', error)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache',
|
||||
Connection: 'keep-alive',
|
||||
'Access-Control-Allow-Origin': new URL(SITE_URL).origin,
|
||||
'Access-Control-Allow-Headers': 'Cache-Control',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function encodeSSE(event: ServerEventsEvent) {
|
||||
return new TextEncoder().encode(`data: ${JSON.stringify(event)}\n\n`)
|
||||
}
|
||||
@@ -245,6 +245,22 @@ const notifications = dbNotifications.map((notification) => ({
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 flex items-center gap-2 rounded-lg border border-blue-500/20 bg-blue-500/10 p-3 text-blue-200"
|
||||
data-new-notification-banner
|
||||
style={{ display: 'none' }}
|
||||
>
|
||||
<span>You received a new notification</span>
|
||||
<Button
|
||||
type="button"
|
||||
label="Reload"
|
||||
icon="ri:refresh-line"
|
||||
color="white"
|
||||
class="ml-auto"
|
||||
onclick="window.location.reload()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
notifications.length === 0 ? (
|
||||
<div class="flex flex-col items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900 p-10 text-center shadow-sm">
|
||||
@@ -390,3 +406,11 @@ const notifications = dbNotifications.map((notification) => ({
|
||||
</form>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
document.addEventListener('sse-new-notification', () => {
|
||||
document.querySelectorAll<HTMLElement>('[data-new-notification-banner]').forEach((banner) => {
|
||||
banner.style.display = ''
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,6 @@ import ServiceCard from '../../components/ServiceCard.astro'
|
||||
import { getServiceSuggestionStatusInfo } from '../../constants/serviceSuggestionStatus'
|
||||
import { getServiceSuggestionTypeInfo } from '../../constants/serviceSuggestionType'
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
import { cn } from '../../lib/cn'
|
||||
import { parseIntWithFallback } from '../../lib/numbers'
|
||||
import { prisma } from '../../lib/prisma'
|
||||
import { makeLoginUrl } from '../../lib/redirectUrls'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { actions, isInputError } from 'astro:actions'
|
||||
import { actions } from 'astro:actions'
|
||||
import { orderBy } from 'lodash-es'
|
||||
|
||||
import {
|
||||
@@ -36,7 +36,7 @@ const result = Astro.getActionResult(actions.serviceSuggestion.createService)
|
||||
if (result && !result.error && !result.data.hasDuplicates) {
|
||||
return Astro.redirect(`/service-suggestion/${result.data.serviceSuggestion.id}`)
|
||||
}
|
||||
const inputErrors = isInputError(result?.error) ? result.error.fields : {}
|
||||
const inputErrors = result?.error?.code === 'VALIDATION_ERROR' ? result.error.fields : {}
|
||||
|
||||
const [categories, attributes] = await Astro.locals.banners.tryMany([
|
||||
[
|
||||
@@ -89,7 +89,11 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
|
||||
},
|
||||
]}
|
||||
>
|
||||
<h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Service suggestion</h1>
|
||||
<h1 class="font-title mt-12 text-center text-3xl font-bold">Service suggestion</h1>
|
||||
|
||||
<p class="text-day-400 mb-6 text-center text-sm">
|
||||
Suggestions are reviewed by moderators before being public.
|
||||
</p>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
@@ -345,6 +349,17 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
|
||||
|
||||
<Captcha action={actions.serviceSuggestion.createService} />
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-lg">
|
||||
<input type="checkbox" name="rulesConfirm" id="rules-confirm" required />
|
||||
<label for="rules-confirm">
|
||||
I understand the
|
||||
<a class="underline" target="_blank" href="/about#listings">suggestion rules and process</a>
|
||||
</label>
|
||||
</div>
|
||||
{inputErrors.rulesConfirm && <p class="mt-1 text-sm text-red-500">{inputErrors.rulesConfirm?.[0]}</p>}
|
||||
</div>
|
||||
|
||||
<InputHoneypotTrap name="message" />
|
||||
|
||||
<InputSubmitButton label={result?.data?.hasDuplicates ? 'Submit anyway' : 'Submit'} />
|
||||
|
||||
21
web/src/pwa.ts
Normal file
21
web/src/pwa.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { registerSW } from 'virtual:pwa-register'
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
|
||||
interface Window {
|
||||
__SW_REGISTRATION__?: ServiceWorkerRegistration
|
||||
}
|
||||
}
|
||||
|
||||
export const updateSW = registerSW({
|
||||
immediate: true,
|
||||
onRegisteredSW: (_swScriptUrl, registration) => {
|
||||
if (registration) window.__SW_REGISTRATION__ = registration
|
||||
},
|
||||
onNeedRefresh: () => {
|
||||
void updateSW(true)
|
||||
},
|
||||
onRegisterError: (error) => {
|
||||
console.error('Service Worker registration error', error)
|
||||
},
|
||||
})
|
||||
9
web/src/server-init.ts
Normal file
9
web/src/server-init.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
/* eslint-disable @typescript-eslint/no-empty-function */
|
||||
import { startListener } from './lib/postgresListeners'
|
||||
|
||||
await startListener({
|
||||
error: console.error,
|
||||
warn: console.warn,
|
||||
info: () => {},
|
||||
debug: () => {},
|
||||
})
|
||||
95
web/src/sw.ts
Normal file
95
web/src/sw.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference lib="webworker" />
|
||||
|
||||
import { clientsClaim } from 'workbox-core'
|
||||
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
|
||||
|
||||
import { makeNotificationOptions } from './lib/notificationOptions'
|
||||
|
||||
import type { NotificationData, NotificationPayload } from './lib/serverEventsTypes'
|
||||
|
||||
declare const self: ServiceWorkerGlobalScope
|
||||
|
||||
void self.skipWaiting()
|
||||
clientsClaim()
|
||||
cleanupOutdatedCaches()
|
||||
precacheAndRoute(self.__WB_MANIFEST)
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (event.data?.type === 'SKIP_WAITING') {
|
||||
void self.skipWaiting()
|
||||
}
|
||||
})
|
||||
|
||||
self.addEventListener('push', (event) => {
|
||||
if (!event.data) {
|
||||
console.error('Push event received but no data')
|
||||
return
|
||||
}
|
||||
|
||||
const payload = parseNotificationPayload(event.data)
|
||||
event.waitUntil(showPushNotification(payload))
|
||||
})
|
||||
|
||||
self.addEventListener('notificationclick', (event) => {
|
||||
event.notification.close()
|
||||
|
||||
const data: NotificationData = event.notification.data
|
||||
|
||||
const url =
|
||||
data.payload?.actions.find((action) => action.action === event.action)?.url || data.defaultActionUrl
|
||||
|
||||
event.waitUntil(handleNotificationClick(url))
|
||||
})
|
||||
|
||||
async function handleNotificationClick(url: string) {
|
||||
const clients = await self.clients.matchAll({ type: 'window' })
|
||||
|
||||
for (const client of clients) {
|
||||
if (client.url === url && 'focus' in client) {
|
||||
await client.focus()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
await self.clients.openWindow(url)
|
||||
}
|
||||
|
||||
async function showPushNotification(payload: NotificationPayload | null) {
|
||||
await self.registration.showNotification(
|
||||
payload?.title ?? 'New Notification',
|
||||
makeNotificationOptions(payload)
|
||||
)
|
||||
}
|
||||
|
||||
function parseNotificationPayload(data: PushMessageData) {
|
||||
try {
|
||||
const payload = data.json()
|
||||
if (isValidNotificationPayload(payload)) return payload
|
||||
|
||||
console.error('Invalid push notification payload:', payload)
|
||||
return null
|
||||
} catch (error) {
|
||||
console.error('Error parsing push notification data:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function isValidNotificationPayload(payload: unknown): payload is NotificationPayload {
|
||||
if (typeof payload !== 'object' || payload === null) return false
|
||||
|
||||
const p = payload as Record<string, unknown>
|
||||
|
||||
return (
|
||||
typeof p.title === 'string' &&
|
||||
(typeof p.body === 'string' || p.body === null) &&
|
||||
Array.isArray(p.actions) &&
|
||||
p.actions.every((action) => {
|
||||
if (typeof action !== 'object' || action === null) return false
|
||||
const a = action as Record<string, unknown>
|
||||
return typeof a.action === 'string' && typeof a.title === 'string'
|
||||
})
|
||||
)
|
||||
}
|
||||
@@ -5,6 +5,12 @@
|
||||
"compilerOptions": {
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
"jsxImportSource": "react",
|
||||
"types": [
|
||||
"astro/client",
|
||||
"vite-plugin-pwa/vanillajs",
|
||||
"vite-plugin-pwa/info",
|
||||
"vite-plugin-pwa/pwa-assets"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user