├── .dockerignore ├── .npmrc ├── src ├── routes │ ├── [username] │ │ └── [slug] │ │ │ ├── +page.svelte │ │ │ ├── +layout.server.ts │ │ │ ├── +layout.svelte │ │ │ └── watch │ │ │ └── [videoid] │ │ │ └── +page.svelte │ ├── +layout.ts │ ├── (protected) │ │ ├── onboarding │ │ │ ├── +page.server.ts │ │ │ └── +page.svelte │ │ ├── create │ │ │ ├── +page.svelte │ │ │ └── +page.server.ts │ │ ├── list │ │ │ └── [id] │ │ │ │ └── edit │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.server.ts │ │ └── components │ │ │ ├── ChannelCardActions.svelte │ │ │ ├── ChannelSearch.svelte │ │ │ └── ListForm.svelte │ ├── +layout.server.ts │ ├── +page.server.ts │ ├── SEO.svelte │ ├── NavTrail.svelte │ ├── +layout.svelte │ └── +page.svelte ├── lib │ ├── db.server.ts │ ├── stores │ │ ├── SeoStore.ts │ │ ├── UserStore.ts │ │ └── VideoPlayerStore.ts │ ├── i18n │ │ ├── de │ │ │ └── index.ts │ │ ├── es │ │ │ └── index.ts │ │ ├── it │ │ │ └── index.ts │ │ ├── ru │ │ │ └── index.ts │ │ ├── ar │ │ │ └── index.ts │ │ ├── uk │ │ │ └── index.ts │ │ ├── formatters.ts │ │ ├── i18n-svelte.ts │ │ ├── i18n-node.ts │ │ ├── i18n-util.sync.ts │ │ ├── i18n-util.async.ts │ │ ├── i18n-util.ts │ │ ├── en │ │ │ └── index.ts │ │ └── i18n-types.ts │ ├── components │ │ ├── ViewCount.svelte │ │ ├── YouTubeVideoEmbed.svelte │ │ ├── YouTubeThumbnailEmbed.svelte │ │ ├── ChannelCard.svelte │ │ ├── AvatarWithFallback.svelte │ │ └── ListCard.svelte │ ├── server │ │ ├── redis.ts │ │ ├── youtube.ts │ │ ├── queries.ts │ │ └── YouTubeAPI.ts │ ├── parseDescription.ts │ ├── schemas.ts │ ├── config.server.ts │ ├── parseDescription.test.ts │ ├── utils.ts │ └── prisma │ │ └── client.ts ├── app.d.ts ├── app.html ├── app.postcss └── hooks.server.ts ├── static └── favicon.png ├── .husky └── pre-commit ├── .vscode ├── default.settings.json └── extensions.json ├── .lintstagedrc.cjs ├── .typesafe-i18n.json ├── tests ├── app.test.ts ├── oauth.test.ts ├── utils.ts ├── onboarding.test.ts ├── viewVideo.test.ts ├── editList.test.ts ├── viewList.test.ts ├── baseFixtures.ts └── createList.test.ts ├── Dockerfile.test ├── .eslintignore ├── .prettierignore ├── .gitignore ├── playwright.config.ts ├── Dockerfile ├── types ├── db.ts └── types.d.ts ├── .prettierrc.cjs ├── .nycrc.json ├── NOTES.md ├── docker-compose.dev.yml ├── .env.example ├── postcss.config.cjs ├── docker-compose.prod.yml ├── scripts └── create-test-env.sh ├── docker-compose.base.yml ├── prisma ├── seeds │ ├── index.ts │ ├── locales.ts │ ├── testSeed.ts │ └── data │ │ └── test.json ├── ERD.md └── schema.prisma ├── svelte.config.js ├── tailwind.config.ts ├── docker-compose.test.watch.yml ├── docker-compose.test.yml ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ └── test.yaml └── ISSUE_TEMPLATE │ ├── feature_request.yaml │ └── bug_report.yaml ├── LICENSE ├── tsconfig.json ├── vite.config.ts ├── README.md ├── .eslintrc.cjs ├── MVP_FEATURES.md ├── CODE-OF-CONDUCT.md ├── package.json ├── DEVLOG.md └── CONTRIBUTING.md /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/routes/[username]/[slug]/+page.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingGarden/listd/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src/lib/db.server.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from '@prisma/client'; 2 | 3 | export default new PrismaClient(); 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx svelte-kit sync 5 | npx lint-staged 6 | npm run test:unit 7 | -------------------------------------------------------------------------------- /.vscode/default.settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.validate": ["javascript", "typescript", "svelte"], 3 | "typescript.tsdk": "node_modules/typescript/lib" 4 | } 5 | -------------------------------------------------------------------------------- /src/lib/stores/SeoStore.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const seo = writable({ 4 | title: 'listd', 5 | description: 'listd', 6 | }); 7 | -------------------------------------------------------------------------------- /.lintstagedrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // TODO: only run svelte-check for changed files... 3 | '**/*.{js,ts,cjs,svelte,tsx}': [() => 'npm run check', 'eslint'], 4 | }; 5 | -------------------------------------------------------------------------------- /.typesafe-i18n.json: -------------------------------------------------------------------------------- 1 | { 2 | "adapter": "svelte", 3 | "outputPath": "./src/lib/i18n/", 4 | "$schema": "https://unpkg.com/typesafe-i18n@5.26.2/schema/typesafe-i18n.json" 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode", 5 | "svelte.svelte-vscode", 6 | "bradlc.vscode-tailwindcss", 7 | "Prisma.prisma" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /src/lib/stores/UserStore.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | import type { User } from '@auth/core/types'; 3 | 4 | export const userStore = writable<{ 5 | user: User | undefined; 6 | }>({ 7 | user: undefined, 8 | }); 9 | -------------------------------------------------------------------------------- /tests/app.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | 3 | test('index page has expected anchor tag', async ({ page }) => { 4 | await page.goto('/'); 5 | expect(await page.textContent('a')).toBe('listd.tv'); 6 | }); 7 | -------------------------------------------------------------------------------- /Dockerfile.test: -------------------------------------------------------------------------------- 1 | FROM mcr.microsoft.com/playwright:v1.41.2-jammy 2 | 3 | WORKDIR /app 4 | 5 | COPY package*.json /app/ 6 | 7 | RUN npm ci 8 | 9 | RUN npm install -g dotenv-cli 10 | 11 | COPY . . 12 | 13 | ENV NODE_BUILD=true 14 | -------------------------------------------------------------------------------- /src/lib/i18n/de/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const de: Translation = { 5 | ...(en as Translation), 6 | message: 'Hallo Welt', 7 | }; 8 | 9 | export default de; 10 | -------------------------------------------------------------------------------- /src/lib/i18n/es/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const es: Translation = { 5 | ...(en as Translation), 6 | message: 'Hola Mundo', 7 | }; 8 | 9 | export default es; 10 | -------------------------------------------------------------------------------- /src/lib/i18n/it/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const it: Translation = { 5 | ...(en as Translation), 6 | message: 'Ciao Mondo', 7 | }; 8 | 9 | export default it; 10 | -------------------------------------------------------------------------------- /src/lib/i18n/ru/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const ru: Translation = { 5 | ...(en as Translation), 6 | message: 'Привет Мир', 7 | }; 8 | 9 | export default ru; 10 | -------------------------------------------------------------------------------- /src/lib/i18n/ar/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const ar: Translation = { 5 | ...(en as Translation), 6 | message: 'مرحبا بالعالم', 7 | }; 8 | 9 | export default ar; 10 | -------------------------------------------------------------------------------- /src/lib/i18n/uk/index.ts: -------------------------------------------------------------------------------- 1 | import type { Translation } from '../i18n-types'; 2 | import en from '../en'; 3 | 4 | const uk: Translation = { 5 | ...(en as Translation), 6 | message: 'Привіт світ', 7 | }; 8 | 9 | export default uk; 10 | -------------------------------------------------------------------------------- /src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | import { loadLocaleAsync } from '$lib/i18n/i18n-util.async'; 2 | 3 | export const load = async (event) => { 4 | const { locale } = event.data; 5 | await loadLocaleAsync(locale); 6 | 7 | return event.data as App.Locals; 8 | }; 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | !*.cjs 10 | docker-data/ 11 | 12 | # Ignore files for PNPM, NPM and YARN 13 | pnpm-lock.yaml 14 | package-lock.json 15 | yarn.lock 16 | /coverage* -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | !*.cjs 10 | src/lib/i18n/*.ts 11 | docker-data/ 12 | 13 | # Ignore files for PNPM, NPM and YARN 14 | pnpm-lock.yaml 15 | package-lock.json 16 | yarn.lock 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.test 8 | .env.* 9 | !.env.example 10 | vite.config.js.timestamp-* 11 | vite.config.ts.timestamp-* 12 | /prisma/dev.db 13 | /docker-data 14 | settings.json 15 | auth.json 16 | .nyc_output 17 | coverage 18 | scripts/exportDB.ts 19 | /coverage* -------------------------------------------------------------------------------- /src/lib/components/ViewCount.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {$LL.labels.views(formatNumberCompact(viewCount, locale))} 10 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import type { PlaywrightTestConfig } from '@playwright/test'; 2 | 3 | const config: PlaywrightTestConfig = { 4 | use: { 5 | locale: 'en-US', 6 | // headless: false, 7 | }, 8 | webServer: { 9 | command: `dotenv -e .env.test -- npm run preview`, 10 | port: 4173, 11 | }, 12 | testDir: 'tests', 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /src/lib/i18n/formatters.ts: -------------------------------------------------------------------------------- 1 | import type { FormattersInitializer } from 'typesafe-i18n'; 2 | import type { Locales, Formatters } from './i18n-types'; 3 | 4 | export const initFormatters: FormattersInitializer = (locale: Locales) => { 5 | const formatters: Formatters = { 6 | // add your formatter functions here 7 | }; 8 | 9 | return formatters; 10 | }; 11 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18-alpine AS builder 2 | 3 | WORKDIR /app 4 | 5 | COPY package*.json /app/ 6 | 7 | RUN npm ci 8 | 9 | COPY . . 10 | 11 | ENV NODE_BUILD=true 12 | 13 | RUN npm run build 14 | 15 | CMD node build 16 | 17 | FROM node:18-alpine as production 18 | 19 | COPY --from=builder ./build . 20 | 21 | ENV NODE_ENV=production 22 | 23 | EXPOSE 3000 24 | 25 | CMD node ./build 26 | -------------------------------------------------------------------------------- /types/db.ts: -------------------------------------------------------------------------------- 1 | import type { List, ListItem, ListItemMeta, YouTubeMeta } from '@prisma/client'; 2 | 3 | export type ListItemMetaWithYouTubeMeta = ListItemMeta & { 4 | youtubeMeta?: YouTubeMeta; 5 | }; 6 | 7 | export type ListItemWithMeta = ListItem & { 8 | meta?: ListItemMetaWithYouTubeMeta; 9 | }; 10 | 11 | export type ListWithItems = List & { 12 | items?: ListItemWithMeta[]; 13 | }; 14 | -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | useTabs: true, 3 | singleQuote: true, 4 | semi: true, 5 | trailingComma: 'es5', 6 | tabWidth: 2, 7 | printWidth: 100, 8 | bracketSameLine: true, 9 | plugins: ['prettier-plugin-svelte', import('prettier-plugin-tailwindcss')], 10 | tailwindConfig: './tailwind.config.ts', 11 | overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }], 12 | }; 13 | -------------------------------------------------------------------------------- /tests/oauth.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import { L } from './utils'; 3 | 4 | test('login button redirects to google', async ({ page }) => { 5 | await page.goto('/'); 6 | await page.getByRole('button', { name: L.en.buttons.loginYouTube() }).click(); 7 | await page.waitForURL('**/accounts.google.com/**'); 8 | expect(page.url()).toContain('https://accounts.google.com/'); 9 | }); 10 | -------------------------------------------------------------------------------- /.nycrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "all": true, 3 | "reporter": "html", 4 | "report-dir": "./coverage", 5 | "temp-dir": ".nyc_output", 6 | "extension": [".ts", ".js", ".svelte"], 7 | "include-all-sources": true, 8 | "include": ["src/**"], 9 | "exclude": [ 10 | "**/*/+layout.ts", 11 | "**/*/*.server.ts", 12 | "src/lib/server/**/*", 13 | "src/lib/i18n/**/*", 14 | "**/*.test.js", 15 | "**/*.test.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | 4 | import type { Session } from '@auth/core/types'; 5 | 6 | declare global { 7 | namespace App { 8 | // interface Error {} 9 | interface Locals { 10 | session: Session | undefined; 11 | locale: import('$lib/i18n/i18n-types.js').Locales; 12 | } 13 | // interface PageData {} 14 | // interface Platform {} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /NOTES.md: -------------------------------------------------------------------------------- 1 | Right now we only support YouTube channels. Eventually, we will support other types of items in the feed. For example: 2 | 3 | - YouTube - Channel 4 | - Instagram - Profile / Page 5 | - TikTok - Profile 6 | - Twitter - User 7 | - Reddit - Subreddit 8 | - Reddit User - Reddit User 9 | - Blog - Author 10 | 11 | # UI Design 12 | 13 | - Wireframing 14 | - UX 15 | - User Experience 16 | - Mockup 17 | - Higher Fidelity 18 | - Prototype 19 | -------------------------------------------------------------------------------- /docker-compose.dev.yml: -------------------------------------------------------------------------------- 1 | version: '3.1' 2 | 3 | services: 4 | db-dev: 5 | extends: 6 | file: docker-compose.base.yml 7 | service: db 8 | ports: 9 | - ${DB_PORT}:5432 10 | volumes: 11 | - ./docker-data/db:/var/lib/postgresql/data 12 | redis-dev: 13 | ports: 14 | - ${REDIS_PORT}:6379 15 | extends: 16 | file: docker-compose.base.yml 17 | service: redis 18 | volumes: 19 | - ./docker-data/redis:/data 20 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 13 |
%sveltekit.body%
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/lib/stores/VideoPlayerStore.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | interface PlayerInitEvent { 4 | type: 'init'; 5 | value: null; 6 | } 7 | 8 | interface PlayerSeekToEvent { 9 | type: 'seekTo'; 10 | value: number; 11 | } 12 | 13 | interface PlayerSetVideoIdEvent { 14 | type: 'setVideoId'; 15 | value: string; 16 | } 17 | 18 | export default writable({ 19 | type: 'init', 20 | value: null, 21 | }); 22 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | VITE_COVERAGE=true 2 | AUTH_SECRET=generate-long-random-string-for-this 3 | YOUTUBE_API_KEY=insert-your-api-key-here 4 | GOOGLE_CLIENT_ID=insert-your-client-id-here 5 | GOOGLE_CLIENT_SECRET=insert-your-client-secret-here 6 | REDIS_PORT=6379 7 | REDIS_URL=redis://localhost:${REDIS_PORT} 8 | DB_HOST=localhost 9 | DB_USER=listdapp 10 | DB_PASSWORD=supersecret 11 | DB_NAME=listd 12 | DB_PORT=5432 13 | DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME} -------------------------------------------------------------------------------- /src/lib/server/redis.ts: -------------------------------------------------------------------------------- 1 | import { createClient } from 'redis'; 2 | import { building } from '$app/environment'; 3 | import { config } from '../config.server'; 4 | 5 | const client = createClient({ 6 | url: config.REDIS_URL, 7 | }); 8 | 9 | // TODO: use logging library... 10 | // eslint-disable-next-line no-console 11 | client.on('error', (err) => console.log('Redis Client Error', err)); 12 | 13 | if (!building) { 14 | await client.connect(); 15 | } 16 | 17 | export default client; 18 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | 3 | const tailwindcss = require('tailwindcss'); 4 | const autoprefixer = require('autoprefixer'); 5 | 6 | const config = { 7 | plugins: [ 8 | // Some plugins, like tailwindcss/nesting, need to run before Tailwind, 9 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 10 | // @ts-ignore 11 | tailwindcss(), 12 | // But others, like autoprefixer, need to run after, 13 | autoprefixer, 14 | ], 15 | }; 16 | 17 | module.exports = config; 18 | -------------------------------------------------------------------------------- /src/app.postcss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | @tailwind variants; 5 | 6 | :root [data-theme='crimson'] { 7 | --theme-rounded-container: theme(borderRadius.sm); 8 | --theme-rounded-base: theme(borderRadius.sm); 9 | } 10 | 11 | @layer components { 12 | .video-grid { 13 | @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5; 14 | } 15 | } 16 | 17 | @media (prefers-reduced-motion) { 18 | * { 19 | animation-duration: 1ms; 20 | transition-duration: 1ms; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /docker-compose.prod.yml: -------------------------------------------------------------------------------- 1 | version: '3.1' 2 | services: 3 | app: 4 | build: 5 | dockerfile: Dockerfile 6 | target: production 7 | restart: always 8 | ports: 9 | - 5173:5173 10 | environment: 11 | - AUTH_SECRET=${AUTH_SECRET} 12 | - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID} 13 | - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET} 14 | - DB_HOST=${DB_HOST} 15 | - DB_USER=${DB_USER} 16 | - DB_PASSWORD=${DB_PASSWORD} 17 | - DB_NAME=${DB_NAME} 18 | - DB_PORT=${DB_PORT} 19 | - DATABASE_URL=${DATABASE_URL} 20 | -------------------------------------------------------------------------------- /src/routes/(protected)/onboarding/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect } from '@sveltejs/kit'; 2 | import prismaClient from '../../../lib/db.server'; 3 | 4 | export const actions = { 5 | default: async (event) => { 6 | if (!event.locals.session?.user) { 7 | redirect(302, '/'); 8 | } 9 | // TODO: consume formdata, update user profile / settings 10 | await prismaClient.userSettings.update({ 11 | where: { 12 | userId: event.locals.session.user.id, 13 | }, 14 | data: { 15 | onboarded: true, 16 | }, 17 | }); 18 | redirect(302, '/'); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/lib/i18n/i18n-svelte.ts: -------------------------------------------------------------------------------- 1 | // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten. 2 | /* eslint-disable */ 3 | 4 | import { initI18nSvelte } from 'typesafe-i18n/svelte' 5 | import type { Formatters, Locales, TranslationFunctions, Translations } from './i18n-types' 6 | import { loadedFormatters, loadedLocales } from './i18n-util' 7 | 8 | const { locale, LL, setLocale } = initI18nSvelte(loadedLocales, loadedFormatters) 9 | 10 | export { locale, LL, setLocale } 11 | 12 | export default LL 13 | -------------------------------------------------------------------------------- /src/routes/+layout.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect } from '@sveltejs/kit'; 2 | 3 | export const load = async ({ locals, route }) => { 4 | if ( 5 | locals.session?.user && 6 | !locals.session.user.settings.onboarded && 7 | route.id !== '/(protected)/onboarding' 8 | ) { 9 | redirect(302, '/onboarding'); 10 | } 11 | if ( 12 | locals.session?.user && 13 | locals.session.user.settings.onboarded && 14 | route.id === '/(protected)/onboarding' 15 | ) { 16 | redirect(302, '/'); 17 | } 18 | return { 19 | session: locals.session, 20 | locale: locals.locale, 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /scripts/create-test-env.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | cat <<< "VITE_COVERAGE=${VITE_COVERAGE} 4 | NODE_ENV=${NODE_ENV} 5 | REDIS_PORT=${REDIS_PORT} 6 | REDIS_HOST=${REDIS_HOST} 7 | REDIS_URL=redis://${REDIS_HOST}:${REDIS_PORT} 8 | AUTH_SECRET=${AUTH_SECRET} 9 | YOUTUBE_API_KEY=${YOUTUBE_API_KEY} 10 | GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID} 11 | GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET} 12 | DB_HOST=${DB_HOST} 13 | DB_USER=${DB_USER} 14 | DB_PASSWORD=${DB_PASSWORD} 15 | DB_NAME=${DB_NAME} 16 | DB_PORT=${DB_PORT} 17 | DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}" > .env.test 18 | -------------------------------------------------------------------------------- /src/lib/parseDescription.ts: -------------------------------------------------------------------------------- 1 | export default function parseDescription(description: string, classNames: string): string { 2 | // regexp from: https://stackoverflow.com/questions/11067572/fetching-timestamps-hhmmss-from-youtube-comments-with-youtube-api-using-rege 3 | return description.replace( 4 | /(?:(\d*):)?([0-5]?[0-9]):([0-5][0-9])/gi, 5 | (match, hours, minutes, seconds) => { 6 | const totalSeconds = 7 | Number(hours || 0) * 60 * 60 + Number(minutes || 0) * 60 + Number(seconds || 0); 8 | return `${match}`; 9 | } 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /docker-compose.base.yml: -------------------------------------------------------------------------------- 1 | version: '3.1' 2 | 3 | services: 4 | db: 5 | image: postgres:15 6 | restart: always 7 | environment: 8 | POSTGRES_PASSWORD: ${DB_PASSWORD} 9 | POSTGRES_USER: ${DB_USER} 10 | POSTGRES_DB: ${DB_NAME} 11 | healthcheck: 12 | test: ['CMD-SHELL', 'pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB'] 13 | interval: 1s 14 | timeout: 3s 15 | retries: 30 16 | redis: 17 | image: redis:7 18 | restart: always 19 | healthcheck: 20 | test: ['CMD', 'redis-cli', 'ping'] 21 | interval: 1s 22 | timeout: 3s 23 | retries: 30 24 | -------------------------------------------------------------------------------- /types/types.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable max-classes-per-file */ 2 | import type { User as OGUser } from '@auth/core/types'; 3 | import type { UserSettings } from '@prisma/client'; 4 | import { SvelteKitAuthConfig as OGSvelteKitAuthConfig } from '@auth/sveltekit'; 5 | import type { CustomAdapter } from '$lib/prisma/client'; 6 | 7 | declare module '@auth/core/types' { 8 | interface User extends OGUser { 9 | settings: UserSettings; 10 | username: string; 11 | } 12 | } 13 | 14 | declare module '@auth/sveltekit' { 15 | interface SvelteKitAuthConfig extends OGSvelteKitAuthConfig { 16 | adapter: CustomAdapter; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /tests/utils.ts: -------------------------------------------------------------------------------- 1 | import type { BrowserContext } from '@playwright/test'; 2 | import { L } from '../src/lib/i18n/i18n-node'; 3 | import data from '../prisma/seeds/data/test.json' assert { type: 'json' }; 4 | 5 | export enum UserTypes { 6 | new = 0, 7 | onboarded = 1, 8 | hasList = 2, 9 | } 10 | 11 | export function loginTestUser(context: BrowserContext, userType: UserTypes) { 12 | return context.addCookies([ 13 | { 14 | name: 'next-auth.session-token', 15 | value: data.users[userType].session.sessionToken, 16 | path: '/', 17 | domain: 'localhost', 18 | expires: -1, 19 | }, 20 | ]); 21 | } 22 | 23 | export { L }; 24 | -------------------------------------------------------------------------------- /src/lib/i18n/i18n-node.ts: -------------------------------------------------------------------------------- 1 | // This is only used by playwright tests. Do not import anywhere else 2 | 3 | import type { LocaleTranslationFunctions } from 'typesafe-i18n' 4 | import { i18n, loadedFormatters, loadedLocales, locales } from './i18n-util' 5 | import type { Locales, Translations, TranslationFunctions } from './i18n-types' 6 | 7 | import { initFormatters } from './formatters'; 8 | import en from './en/index'; 9 | 10 | loadedLocales['en'] = en as unknown as Translations 11 | loadedFormatters['en'] = initFormatters('en') 12 | 13 | export const L: LocaleTranslationFunctions = i18n() 14 | 15 | export default L -------------------------------------------------------------------------------- /tests/onboarding.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import { loginTestUser, L, UserTypes } from './utils'; 3 | 4 | test.beforeEach(async ({ context }) => { 5 | await loginTestUser(context, UserTypes.new); 6 | }); 7 | 8 | test('new user redirects to the onboarding page', async ({ page }) => { 9 | await page.goto('/'); 10 | expect(page.url()).toContain('/onboarding'); 11 | }); 12 | 13 | test('new user redirected to homepage after onboarding', async ({ page }) => { 14 | await page.goto('/onboarding'); 15 | await page.getByRole('button', { name: L.en.pages.onboarding.buttons.letsGo() }).click(); 16 | expect(page.url()).toContain('/'); 17 | }); 18 | -------------------------------------------------------------------------------- /prisma/seeds/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import { PrismaClient } from '@prisma/client'; 3 | import { seed as localeSeed } from './locales'; 4 | import { seed as testSeed } from './testSeed'; 5 | 6 | const prismaClient = new PrismaClient(); 7 | 8 | async function main() { 9 | let exitStatus = 0; 10 | try { 11 | await localeSeed(prismaClient); 12 | if (process.env.NODE_ENV?.toLowerCase() === 'test') { 13 | await testSeed(prismaClient); 14 | } 15 | } catch (error) { 16 | // TODO: use logging library 17 | console.error(error); 18 | exitStatus = 1; 19 | } finally { 20 | await prismaClient.$disconnect(); 21 | process.exit(exitStatus); 22 | } 23 | } 24 | 25 | main(); 26 | -------------------------------------------------------------------------------- /src/routes/(protected)/create/+page.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from 'svelte-preprocess'; 2 | import adapter from '@sveltejs/adapter-auto'; 3 | import nodeAdapter from '@sveltejs/adapter-node'; 4 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 5 | 6 | /** @type {import('@sveltejs/kit').Config} */ 7 | const config = { 8 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 9 | // for more information about preprocessors 10 | preprocess: [ 11 | vitePreprocess(), 12 | preprocess({ 13 | postcss: true, 14 | }), 15 | ], 16 | 17 | kit: { 18 | // eslint-disable-next-line no-extra-boolean-cast 19 | adapter: !!process.env.NODE_BUILD ? nodeAdapter() : adapter(), 20 | }, 21 | }; 22 | 23 | export default config; 24 | -------------------------------------------------------------------------------- /src/routes/(protected)/list/[id]/edit/+page.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require */ 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | 4 | import { join } from 'path'; 5 | import forms from '@tailwindcss/forms'; 6 | import type { Config } from 'tailwindcss'; 7 | import { skeleton } from '@skeletonlabs/tw-plugin'; 8 | 9 | const config: Config = { 10 | darkMode: 'class', 11 | content: [ 12 | './src/**/*.{html,js,svelte,ts}', 13 | join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}'), 14 | ], 15 | 16 | theme: { 17 | extend: {}, 18 | }, 19 | 20 | plugins: [ 21 | forms, 22 | skeleton({ 23 | themes: { 24 | preset: [{ name: 'crimson', enhancements: true }], 25 | }, 26 | }), 27 | ], 28 | }; 29 | 30 | export default config; 31 | -------------------------------------------------------------------------------- /src/lib/server/youtube.ts: -------------------------------------------------------------------------------- 1 | import { getUserChannel } from '$/lib/server/YouTubeAPI'; 2 | import type { Account } from '@auth/core/types'; 3 | import prismaClient from '$lib/db.server'; 4 | 5 | export async function updateAccountUsername(account: Account) { 6 | if (account.access_token) { 7 | try { 8 | const channel = await getUserChannel(account.access_token); 9 | const username = channel?.snippet?.customUrl; 10 | if (username) { 11 | await prismaClient.account.updateMany({ 12 | where: { 13 | userId: account.userId, 14 | providerAccountId: account.providerAccountId, 15 | }, 16 | data: { 17 | username, 18 | }, 19 | }); 20 | } 21 | return username; 22 | } catch (error) { 23 | // eslint-disable-next-line no-console 24 | console.error(error); 25 | } 26 | } 27 | return '@Unknown'; 28 | } 29 | -------------------------------------------------------------------------------- /docker-compose.test.watch.yml: -------------------------------------------------------------------------------- 1 | version: '3.1' 2 | name: listd-test-watch 3 | 4 | services: 5 | db-test: 6 | extends: 7 | file: docker-compose.base.yml 8 | service: db 9 | redis-test: 10 | extends: 11 | file: docker-compose.base.yml 12 | service: redis 13 | app-test: 14 | extends: 15 | file: docker-compose.test.yml 16 | service: app-test 17 | volumes: 18 | - ./:/app 19 | - /app/node_modules 20 | ports: 21 | - 4173:4173 22 | environment: 23 | - PWTEST_WATCH=1 24 | command: > 25 | sh -c "dotenv -e .env.test -- npm run migrate:init && \ 26 | dotenv -e .env.test -- npx prisma db seed && \ 27 | dotenv -e .env.test -- npx prisma generate && \ 28 | dotenv -e .env.test -- npm run build && \ 29 | dotenv -e .env.test -- npx playwright test" 30 | -------------------------------------------------------------------------------- /src/routes/+page.server.ts: -------------------------------------------------------------------------------- 1 | import prismaClient from '$lib/db.server'; 2 | import type { ListWithItems } from '../../types/db'; 3 | 4 | export async function load({ locals }) { 5 | let lists: ListWithItems[] = []; 6 | if (locals.session?.user) { 7 | lists = (await prismaClient.list.findMany({ 8 | where: { 9 | userId: locals.session.user.id, 10 | }, 11 | orderBy: { 12 | createdAt: 'desc', 13 | }, 14 | include: { 15 | items: { 16 | include: { 17 | meta: { 18 | include: { 19 | youtubeMeta: true, 20 | }, 21 | }, 22 | }, 23 | }, 24 | }, 25 | })) as unknown as ListWithItems[]; 26 | } 27 | return { 28 | user: locals.session?.user, 29 | lists, 30 | account: await prismaClient.account.findFirst({ 31 | where: { 32 | userId: locals.session?.user?.id, 33 | }, 34 | }), 35 | }; 36 | } 37 | -------------------------------------------------------------------------------- /docker-compose.test.yml: -------------------------------------------------------------------------------- 1 | version: '3.1' 2 | name: listd-test 3 | 4 | services: 5 | db-test: 6 | extends: 7 | file: docker-compose.base.yml 8 | service: db 9 | redis-test: 10 | extends: 11 | file: docker-compose.base.yml 12 | service: redis 13 | app-test: 14 | build: 15 | context: . 16 | dockerfile: Dockerfile.test 17 | volumes: 18 | - ./coverage:/app/coverage 19 | depends_on: 20 | db-test: 21 | condition: service_healthy 22 | redis-test: 23 | condition: service_healthy 24 | command: > 25 | sh -c "dotenv -e .env.test -- npm run migrate:init && \ 26 | dotenv -e .env.test -- npx prisma db seed && \ 27 | dotenv -e .env.test -- npx prisma generate && \ 28 | dotenv -e .env.test -- npm run build && \ 29 | dotenv -e .env.test -- npx nyc playwright test" 30 | -------------------------------------------------------------------------------- /src/routes/[username]/[slug]/+layout.server.ts: -------------------------------------------------------------------------------- 1 | import { LL, setLocale } from '$/lib/i18n/i18n-svelte'; 2 | import { error } from '@sveltejs/kit'; 3 | import { get } from 'svelte/store'; 4 | import * as YouTubeAPI from '$lib/server/YouTubeAPI'; 5 | import { getList } from '$/lib/server/queries'; 6 | 7 | // eslint-disable-next-line consistent-return 8 | export async function load({ params, locals }) { 9 | try { 10 | const { list, channelIds } = await getList({ 11 | username: params.username, 12 | slug: params.slug, 13 | userId: locals.session?.user?.id, 14 | }); 15 | 16 | if (list) { 17 | return { 18 | list, 19 | streamed: { 20 | videos: YouTubeAPI.getVideos(channelIds), 21 | }, 22 | }; 23 | } 24 | } catch (e) { 25 | /* empty */ 26 | } 27 | setLocale(locals.locale); 28 | const $LL = get(LL); 29 | error(404, $LL.errors.notFound()); 30 | } 31 | -------------------------------------------------------------------------------- /src/lib/schemas.ts: -------------------------------------------------------------------------------- 1 | import { Visibility } from '@prisma/client'; 2 | import { z } from 'zod'; 3 | import type { TranslationFunctions } from '$/lib/i18n/i18n-types.js'; 4 | 5 | export const createListSchema = ($LL: TranslationFunctions) => 6 | z.object({ 7 | id: z.string().uuid().optional(), 8 | title: z.string().trim().min(1, $LL.errors.titleRequired()), 9 | slug: z 10 | .string() 11 | .trim() 12 | .min(1, $LL.errors.slugRequired()) 13 | .max(2048) 14 | .regex(/([0-9a-z]|-)+/g, $LL.errors.slugSpecialCharacters()) 15 | .refine((slug) => slug.toLowerCase()), 16 | description: z.string().trim().min(1, $LL.errors.descriptionRequired()).optional(), 17 | visibility: z.nativeEnum(Visibility).default(Visibility.Unlisted), 18 | channelIds: z.array(z.string().trim().min(1)).min(1, $LL.errors.listMinLength()), 19 | }); 20 | 21 | export type ListSchema = ReturnType; 22 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## What type of Pull Request is this? 4 | 5 | **Delete all options except for the one that applies** 6 | 7 | - Bug fix 8 | - Feature 9 | - Code style update (formatting, renaming) 10 | - Refactoring (no functional changes, no API changes) 11 | - Build related changes 12 | - Other (please describe): 13 | 14 | ## What is the current behavior? 15 | 16 | 17 | 18 | Issue Number: N/A 19 | 20 | ## What is the new behavior? 21 | 22 | 23 | 24 | - 25 | - 26 | - 27 | 28 | ## Other information 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/lib/config.server.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-redeclare */ 2 | import { z } from 'zod'; 3 | // eslint-disable-next-line no-restricted-imports 4 | import * as environment from '$env/static/private'; 5 | 6 | export const ServerConfigSchema = z.object({ 7 | AUTH_SECRET: z.string().trim().min(32), 8 | GOOGLE_CLIENT_ID: z.string().trim().min(1), 9 | GOOGLE_CLIENT_SECRET: z.string().trim().min(1), 10 | DB_HOST: z.string().trim().min(1), 11 | DB_USER: z.string().trim().min(1), 12 | DB_PASSWORD: z.string().trim().min(1), 13 | DB_NAME: z.string().trim().min(1), 14 | DB_PORT: z.coerce.number().default(5432), 15 | DATABASE_URL: z.string().trim().min(1).url(), 16 | REDIS_URL: z.string().trim().min(1).url(), 17 | YOUTUBE_API_KEY: z.string().trim().min(1), 18 | }); 19 | 20 | export type ServerConfigSchema = z.infer; 21 | 22 | export const config = ServerConfigSchema.parse(environment); 23 | -------------------------------------------------------------------------------- /src/lib/parseDescription.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | import parseDescription from '$/lib/parseDescription'; 3 | 4 | describe('parse description test', () => { 5 | it('parses time stamps into anchor tags', () => { 6 | expect( 7 | parseDescription( 8 | ` 9 | 1:23 10 | 2:23:46 11 | 12:34 12 | 1:23:45 13 | 00:00:00`, 14 | '' 15 | ) 16 | ).toBe(` 17 | 1:23 18 | 2:23:46 19 | 12:34 20 | 1:23:45 21 | 00:00:00`); 22 | }); 23 | 24 | it('parses time stamps with hours greater than 59', () => { 25 | expect(parseDescription(`100:48:48`, '')).toBe( 26 | `100:48:48` 27 | ); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/routes/SEO.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 21 | {title} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/routes/(protected)/onboarding/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
9 |

{$LL.pages.onboarding.messages.main()}

10 |
11 | 23 |

{$LL.pages.onboarding.messages.final()}

24 |
25 | 26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /src/lib/i18n/i18n-util.sync.ts: -------------------------------------------------------------------------------- 1 | // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten. 2 | /* eslint-disable */ 3 | 4 | import { initFormatters } from './formatters' 5 | import type { Locales, Translations } from './i18n-types' 6 | import { loadedFormatters, loadedLocales, locales } from './i18n-util' 7 | 8 | import ar from './ar' 9 | import de from './de' 10 | import en from './en' 11 | import es from './es' 12 | import it from './it' 13 | import ru from './ru' 14 | import uk from './uk' 15 | 16 | const localeTranslations = { 17 | ar, 18 | de, 19 | en, 20 | es, 21 | it, 22 | ru, 23 | uk, 24 | } 25 | 26 | export const loadLocale = (locale: Locales): void => { 27 | if (loadedLocales[locale]) return 28 | 29 | loadedLocales[locale] = localeTranslations[locale] as unknown as Translations 30 | loadFormatters(locale) 31 | } 32 | 33 | export const loadAllLocales = (): void => locales.forEach(loadLocale) 34 | 35 | export const loadFormatters = (locale: Locales): void => 36 | void (loadedFormatters[locale] = initFormatters(locale)) 37 | -------------------------------------------------------------------------------- /src/routes/(protected)/components/ChannelCardActions.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | {#if channelIds.has(channel.originId)} 12 | 22 | {:else} 23 | 33 | {/if} 34 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { DateTime, Duration } from 'luxon'; 2 | 3 | const formatters = new Map(); 4 | 5 | export const getCompactNumberFormatter = (locale: string): Intl.NumberFormat => { 6 | let formatter = formatters.get(locale); 7 | if (formatter) return formatter; 8 | formatter = new Intl.NumberFormat(locale, { 9 | notation: 'compact', 10 | compactDisplay: 'short', 11 | }); 12 | formatters.set(locale, formatter); 13 | return formatter; 14 | }; 15 | 16 | export const formatNumberCompact = (value: number, locale: string) => { 17 | const formatter = getCompactNumberFormatter(locale); 18 | return formatter.format(value); 19 | }; 20 | 21 | export const formatRelativeDate = (timeStamp: number, locale: string) => 22 | DateTime.fromMillis(timeStamp).toRelative({ locale }); 23 | 24 | export const formatDuration = (duration: string) => { 25 | const interval = Duration.fromISO(duration); 26 | let format = 'm:ss'; 27 | if (interval.days && interval.days > 0) { 28 | format = 'd:hh:mm:ss'; 29 | } else if (interval.hours && interval.hours > 0) { 30 | format = 'h:mm:ss'; 31 | } 32 | return interval.toFormat(format); 33 | }; 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2023 Coding Garden 2 | 3 | Permission is hereby granted, free of 4 | charge, to any person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to the 9 | following conditions: 10 | 11 | The above copyright notice and this permission notice 12 | (including the next paragraph) shall be included in all copies or substantial 13 | portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /tests/viewVideo.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import { loginTestUser, UserTypes } from './utils'; 3 | import data from '../prisma/seeds/data/test.json' assert { type: 'json' }; 4 | 5 | test.beforeEach(async ({ context }) => { 6 | await loginTestUser(context, UserTypes.hasList); 7 | }); 8 | 9 | test('clicking a video card loads the video page', async ({ page }) => { 10 | const listId = data.users[UserTypes.hasList]?.list?.[0].id; 11 | expect(listId).toBeDefined(); 12 | await page.goto(`/list/${listId}`); 13 | await page.waitForSelector('[data-testid="video-list"]'); 14 | const listVideos = await page.getByTestId('video-list').locator('.card').all(); 15 | expect(listVideos.length).toBeGreaterThan(1); 16 | await page.getByTestId('video-list').locator('.card').first().click(); 17 | await page.waitForURL(`**/list/${listId}/watch/**`); 18 | await page.waitForSelector('[data-testid="video-embed"]'); 19 | const videoEmbed = page.getByTestId('video-embed').first(); 20 | await expect(videoEmbed).toBeVisible(); 21 | const videoDescription = page.getByTestId('video-description').first(); 22 | await expect(videoDescription).toBeVisible(); 23 | }); 24 | -------------------------------------------------------------------------------- /src/routes/NavTrail.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | {#if $page.data.session?.user} 18 |
19 | {$page.data.session?.user?.name} 24 | 25 |
26 | 36 | {/if} 37 | -------------------------------------------------------------------------------- /prisma/seeds/locales.ts: -------------------------------------------------------------------------------- 1 | import type { Locale, PrismaClient } from '@prisma/client'; 2 | // Source: https://www.localeplanet.com/icu/ 3 | // Code: https://gist.github.com/w3cj/a8215fe403164a248492f2ec63beb9a3 4 | // manually removed POSIX en 5 | // manually removed 001, 150 and 419 locales 6 | import data from './data/locales.json' assert { type: 'json' }; 7 | 8 | export async function seed(prismaClient: PrismaClient) { 9 | await prismaClient.$executeRawUnsafe(`TRUNCATE TABLE "Locale" CASCADE;`); 10 | await prismaClient.locale.createMany({ 11 | data: data.map((locale) => { 12 | const [languageCode, ...parts] = locale.id.split('_'); 13 | let countryCode = parts[0] || null; 14 | let script: string | null = null; 15 | if (countryCode && countryCode.length > 2) { 16 | countryCode = null; 17 | [script] = parts; 18 | } 19 | if (parts.length === 2) { 20 | [script, countryCode] = parts; 21 | } 22 | return { 23 | id: locale.id.replaceAll('_', '-'), 24 | formalName: locale.formalName, 25 | commonName: locale.commonName || null, 26 | nativeName: locale.nativeName, 27 | languageCode, 28 | countryCode, 29 | script, 30 | }; 31 | }), 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "$/*": ["./src/*"], 6 | "$lib": ["./src/lib"], 7 | "$lib/*": ["./src/lib/*"], 8 | "$app": ["./node_modules/@sveltejs/kit/types"], 9 | "$app/*": ["./node_modules/@sveltejs/kit/types/index.d.ts"], 10 | "anchorme": ["./node_modules/anchorme/dist/node/index.d.ts"] 11 | }, 12 | "outDir": ".svelte-kit/output", 13 | "allowJs": true, 14 | "checkJs": true, 15 | "esModuleInterop": true, 16 | "forceConsistentCasingInFileNames": true, 17 | "resolveJsonModule": true, 18 | "skipLibCheck": true, 19 | "sourceMap": true, 20 | "strict": true, 21 | "allowImportingTsExtensions": true, 22 | "plugins": [ 23 | { 24 | "name": "typescript-svelte-plugin" 25 | } 26 | ], 27 | }, 28 | "include": [ 29 | "./.svelte-kit/ambient.d.ts", 30 | "./.svelte-kit/types/**/$types.d.ts", 31 | "./src/**/*.js", 32 | "./src/**/*.ts", 33 | "./src/**/*.svelte", 34 | "./tests/**/*.js", 35 | "./tests/**/*.ts", 36 | "./tests/**/*.svelte", 37 | "./prisma/**/*.ts", 38 | "./types/**/*.ts", 39 | "./scripts/**/*.ts", 40 | "*.cjs", 41 | ".*.cjs", 42 | "*.js", 43 | "*.ts", 44 | "**/*.tsx" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /.github/workflows/test.yaml: -------------------------------------------------------------------------------- 1 | name: Run Tests 2 | on: 3 | pull_request: 4 | branches: 5 | - main 6 | 7 | jobs: 8 | test: 9 | runs-on: ubuntu-latest 10 | environment: test 11 | env: 12 | AUTH_SECRET: ${{ secrets.AUTH_SECRET }} 13 | DB_PASSWORD: ${{ secrets.DB_PASSWORD }} 14 | GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }} 15 | GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }} 16 | YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }} 17 | VITE_COVERAGE: ${{ vars.VITE_COVERAGE }} 18 | NODE_ENV: ${{ vars.NODE_ENV }} 19 | REDIS_PORT: ${{ vars.REDIS_PORT }} 20 | REDIS_HOST: ${{ vars.REDIS_HOST }} 21 | DB_HOST: ${{ vars.DB_HOST }} 22 | DB_USER: ${{ vars.DB_USER }} 23 | DB_NAME: ${{ vars.DB_NAME }} 24 | DB_PORT: ${{ vars.DB_PORT }} 25 | steps: 26 | - uses: actions/checkout@v3 27 | - uses: actions/setup-node@v3 28 | with: 29 | node-version: '18' 30 | - run: npm ci 31 | - run: ./scripts/create-test-env.sh 32 | - run: cp .env.test .env 33 | - run: npx svelte-kit sync 34 | - run: npm run check 35 | - run: npm run lint 36 | # - run: npx playwright install 37 | - run: npm run test:unit 38 | -------------------------------------------------------------------------------- /tests/editList.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import data from '../prisma/seeds/data/test.json' assert { type: 'json' }; 3 | import { loginTestUser, L, UserTypes } from './utils'; 4 | 5 | test.beforeEach(async ({ context }) => { 6 | await loginTestUser(context, UserTypes.hasList); 7 | }); 8 | 9 | test('onboarded user can edit their own list', async ({ page }) => { 10 | await page.goto('/'); 11 | await page.waitForSelector('.video-grid'); 12 | await page.locator('.video-grid a').first().click(); 13 | const listId = data.users[UserTypes.hasList]?.list?.[0].id; 14 | await page.waitForURL(`**/list/${listId}`); 15 | page.getByRole('link', { name: L.en.buttons.edit(), exact: true }).first().click(); 16 | await page.waitForURL(`**/edit/${listId}`); 17 | 18 | const updatedTitle = 'Coding Garden Universe Updated'; 19 | const titleInput = page.getByLabel(L.en.labels.title()); 20 | await titleInput.click(); 21 | await titleInput.fill(updatedTitle); 22 | 23 | await page.getByRole('button', { name: L.en.buttons.update() }).first().click(); 24 | 25 | await page.waitForURL(`**/list/${listId}`); 26 | 27 | const listTitle = page.getByTestId('list-title').first(); 28 | expect(await listTitle.textContent()).toBe(updatedTitle); 29 | }); 30 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import type { PluginOption, UserConfig } from 'vite'; 3 | import { resolve } from 'path'; 4 | import istanbul from 'vite-plugin-istanbul'; 5 | 6 | const plugins: PluginOption[] = [sveltekit()]; 7 | 8 | if (process.env.NODE_ENV?.toLowerCase() === 'test') { 9 | plugins.push( 10 | istanbul({ 11 | include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.svelte'], 12 | exclude: ['node_modules', 'tests/'], 13 | extension: ['.js', '.ts', '.svelte'], 14 | requireEnv: false, 15 | forceBuildInstrument: true, 16 | nycrcPath: './.nycrc.json', 17 | }) 18 | ); 19 | } else { 20 | plugins.push({ 21 | name: 'remove-testids', 22 | enforce: 'pre', 23 | transform(code, id) { 24 | if (id.endsWith('.svelte')) { 25 | return code.replace(/data-testid=".*?"/g, ''); 26 | } 27 | return code; 28 | }, 29 | }); 30 | } 31 | 32 | const config: UserConfig = { 33 | plugins, 34 | test: { 35 | include: ['src/**/*.{test,spec}.{js,ts}'], 36 | }, 37 | server: { 38 | host: '0.0.0.0', 39 | }, 40 | resolve: { 41 | alias: { 42 | $: resolve('./src'), 43 | '.prisma/client/index-browser': './node_modules/.prisma/client/index-browser.js', 44 | }, 45 | }, 46 | }; 47 | 48 | export default config; 49 | -------------------------------------------------------------------------------- /src/lib/components/YouTubeVideoEmbed.svelte: -------------------------------------------------------------------------------- 1 | 41 | 42 |
43 |
44 |
45 | -------------------------------------------------------------------------------- /src/lib/i18n/i18n-util.async.ts: -------------------------------------------------------------------------------- 1 | // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten. 2 | /* eslint-disable */ 3 | 4 | import { initFormatters } from './formatters' 5 | import type { Locales, Translations } from './i18n-types' 6 | import { loadedFormatters, loadedLocales, locales } from './i18n-util' 7 | 8 | const localeTranslationLoaders = { 9 | ar: () => import('./ar'), 10 | de: () => import('./de'), 11 | en: () => import('./en'), 12 | es: () => import('./es'), 13 | it: () => import('./it'), 14 | ru: () => import('./ru'), 15 | uk: () => import('./uk'), 16 | } 17 | 18 | const updateDictionary = (locale: Locales, dictionary: Partial): Translations => 19 | loadedLocales[locale] = { ...loadedLocales[locale], ...dictionary } 20 | 21 | export const importLocaleAsync = async (locale: Locales): Promise => 22 | (await localeTranslationLoaders[locale]()).default as unknown as Translations 23 | 24 | export const loadLocaleAsync = async (locale: Locales): Promise => { 25 | updateDictionary(locale, await importLocaleAsync(locale)) 26 | loadFormatters(locale) 27 | } 28 | 29 | export const loadAllLocalesAsync = (): Promise => Promise.all(locales.map(loadLocaleAsync)) 30 | 31 | export const loadFormatters = (locale: Locales): void => 32 | void (loadedFormatters[locale] = initFormatters(locale)) 33 | -------------------------------------------------------------------------------- /tests/viewList.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import { loginTestUser, UserTypes } from './utils'; 3 | import data from '../prisma/seeds/data/test.json' assert { type: 'json' }; 4 | 5 | test.beforeEach(async ({ context }) => { 6 | await loginTestUser(context, UserTypes.hasList); 7 | }); 8 | 9 | test('user with lists can see lists on home page', async ({ page }) => { 10 | await page.goto('/'); 11 | await page.waitForSelector('.video-grid'); 12 | const listLink = await page.locator('.video-grid a').first(); 13 | const linkText = await listLink.textContent(); 14 | await expect(linkText).toContain('Coding Garden'); 15 | }); 16 | 17 | test('viewing a list shows the list of channels and list of videos', async ({ page }) => { 18 | const listId = data.users[UserTypes.hasList]?.list?.[0].id; 19 | expect(listId).toBeDefined(); 20 | await page.goto(`/list/${listId}`); 21 | const channelCards = await page.getByTestId('channel-card-list').locator('.card').all(); 22 | expect(channelCards.length).toBe(2); 23 | expect(await channelCards[0].textContent()).toContain('Coding Garden'); 24 | expect(await channelCards[1].textContent()).toContain('Coding Garden'); 25 | await page.waitForSelector('[data-testid="video-list"]'); 26 | const listVideos = await page.getByTestId('video-list').locator('.card').all(); 27 | expect(listVideos.length).toBeGreaterThan(1); 28 | }); 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yaml: -------------------------------------------------------------------------------- 1 | name: "\U0001F4A1 Feature Request" 2 | description: Request a new feature 3 | body: 4 | - type: markdown 5 | attributes: 6 | value: | 7 | Thank you for taking the time to propose a new idea 8 | - type: textarea 9 | id: problem 10 | attributes: 11 | label: Describe the problem 12 | description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better. 13 | placeholder: I would like to... 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: solution 18 | attributes: 19 | label: Describe the proposed solution 20 | description: Try to provide a description or a design of what you would like to be implemented 21 | placeholder: I would like to see... 22 | validations: 23 | required: true 24 | - type: checkboxes 25 | id: searched 26 | attributes: 27 | label: Have you checked if this issue has already been raised? 28 | options: 29 | - label: I did not find any similar issues 30 | required: true 31 | - type: checkboxes 32 | id: CoC 33 | attributes: 34 | label: Code of Conduct 35 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/CodingGarden/listd/blob/main/CODE-OF-CONDUCT.md) 36 | options: 37 | - label: I agree to follow this project's Code of Conduct 38 | required: true 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LISTD Media 2 | 3 | An app that will allow users to **create**, _share_ and watch 👀 lists of YouTube channels. 4 | 5 | # Tech Stack 6 | 7 | ## Backend 8 | 9 | - [SvelteKit](https://kit.svelte.dev/) 10 | - [Auth.js](https://authjs.dev/) 11 | - Databases 12 | - [Postgres](https://www.postgresql.org/) 13 | - [Prisma](https://www.prisma.io/) 14 | - [Redis](https://redis.io/) 15 | - [node-redis](https://www.npmjs.com/package/redis) 16 | 17 | ## Frontend 18 | 19 | - [Svelte](https://svelte.dev/) 20 | - [tailwind](https://tailwindcss.com/) 21 | - [Skeleton UI](https://www.skeleton.dev/) 22 | 23 | ## Libraries 24 | 25 | - [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n/) 26 | - [zod](https://www.npmjs.com/package/zod) 27 | - [@googleapis/youtube](https://www.npmjs.com/package/@googleapis/youtube) 28 | - [luxon](https://www.npmjs.com/package/luxon) 29 | 30 | ## Code Quality 31 | 32 | - [eslint](https://www.npmjs.com/package/eslint) 33 | - [eslint-config-airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript) 34 | - [prettier](https://www.npmjs.com/package/prettier) 35 | - [lint-staged](https://www.npmjs.com/package/lint-staged) 36 | - [husky](https://www.npmjs.com/package/husky) 37 | 38 | ## Testing 39 | 40 | - E2E / Integration 41 | - [Playwright](https://playwright.dev/) 42 | - Coverage 43 | - [Istanbul](https://www.npmjs.com/package/nyc) 44 | 45 | ## CI / CD 46 | 47 | - [Docker](https://www.docker.com/) 48 | - [Github Actions](https://github.com/features/actions) 49 | -------------------------------------------------------------------------------- /tests/baseFixtures.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-await-in-loop */ 2 | /* eslint-disable no-restricted-syntax */ 3 | /* eslint-disable no-underscore-dangle */ 4 | /* eslint-disable @typescript-eslint/no-explicit-any */ 5 | import * as fs from 'fs'; 6 | import * as path from 'path'; 7 | import * as crypto from 'crypto'; 8 | import { test as baseTest } from '@playwright/test'; 9 | 10 | const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output'); 11 | 12 | export function generateUUID(): string { 13 | return crypto.randomBytes(16).toString('hex'); 14 | } 15 | 16 | // source: https://haseebmajid.dev/posts/2023-04-15--how-to-get-code-coverage-from-playwright-tests-in-a-sveltekit-app-/ 17 | export const test = baseTest.extend({ 18 | context: async ({ context }, use) => { 19 | await context.addInitScript(() => 20 | window.addEventListener('beforeunload', () => 21 | (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__)) 22 | ) 23 | ); 24 | await fs.promises.mkdir(istanbulCLIOutput, { recursive: true }); 25 | await context.exposeFunction('collectIstanbulCoverage', (coverageJSON: string) => { 26 | if (coverageJSON) 27 | fs.writeFileSync( 28 | path.join(istanbulCLIOutput, `playwright_coverage_${generateUUID()}.json`), 29 | coverageJSON 30 | ); 31 | }); 32 | await use(context); 33 | for (const page of context.pages()) { 34 | await page.evaluate(() => 35 | (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__)) 36 | ); 37 | } 38 | }, 39 | }); 40 | 41 | export const { expect } = test; 42 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | 29 | 30 | 31 | listd.tv 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/lib/server/queries.ts: -------------------------------------------------------------------------------- 1 | import prismaClient from '$lib/db.server'; 2 | import { Visibility, type Account } from '@prisma/client'; 3 | 4 | type GetListParams = { 5 | id?: string; 6 | username?: string; 7 | slug?: string; 8 | userId?: string; 9 | }; 10 | 11 | async function findList({ id, slug, userId, account }: GetListParams & { account?: Account }) { 12 | return prismaClient.list.findFirst({ 13 | where: { 14 | ...(account 15 | ? { 16 | userId: account.userId, 17 | slug, 18 | } 19 | : { 20 | id, 21 | }), 22 | OR: [ 23 | { visibility: Visibility.Public }, 24 | { visibility: Visibility.Unlisted }, 25 | userId 26 | ? { 27 | AND: [{ userId }, { visibility: Visibility.Private }], 28 | } 29 | : {}, 30 | ], 31 | }, 32 | include: { 33 | items: { 34 | include: { 35 | meta: { 36 | include: { 37 | youtubeMeta: true, 38 | }, 39 | }, 40 | }, 41 | }, 42 | }, 43 | }); 44 | } 45 | 46 | type ListWithItems = Awaited>>>; 47 | 48 | export async function getList({ id, username, slug, userId }: GetListParams) { 49 | let list: ListWithItems | null = null; 50 | if (username) { 51 | const account = await prismaClient.account.findFirst({ 52 | where: { 53 | provider: 'google', 54 | username, 55 | }, 56 | }); 57 | if (!account) { 58 | return { 59 | list, 60 | channelIds: [], 61 | }; 62 | } 63 | list = await findList({ slug, userId, account }); 64 | } 65 | 66 | if (!list && id) { 67 | list = await findList({ id, userId }); 68 | } 69 | 70 | const channelIds = list?.items.map((item) => item.meta.originId) || []; 71 | return { list, channelIds }; 72 | } 73 | -------------------------------------------------------------------------------- /prisma/seeds/testSeed.ts: -------------------------------------------------------------------------------- 1 | import { Visibility, type PrismaClient, ListItemType } from '@prisma/client'; 2 | import data from './data/test.json' assert { type: 'json' }; 3 | 4 | export async function seed(prismaClient: PrismaClient) { 5 | await prismaClient.user.createMany({ 6 | data: data.users.map((user) => user.user), 7 | }); 8 | await prismaClient.userSettings.createMany({ 9 | data: data.users.map((user) => user.userSettings), 10 | }); 11 | await prismaClient.account.createMany({ 12 | data: data.users.map((user) => user.account), 13 | }); 14 | await prismaClient.session.createMany({ 15 | data: data.users.map((user) => user.session), 16 | }); 17 | 18 | await Promise.all( 19 | data.users.map(async (user) => { 20 | if (user.list) { 21 | await Promise.all( 22 | user.list.map(async (list) => { 23 | const { items, ...createList } = list; 24 | await prismaClient.list.create({ 25 | data: { 26 | ...createList, 27 | visibility: Visibility[createList.visibility as Visibility], 28 | }, 29 | }); 30 | await Promise.all( 31 | list.items.map(async (item) => { 32 | const { meta, ...createListItem } = item; 33 | const { youtubeMeta, ...createListItemMeta } = meta; 34 | await prismaClient.youTubeMeta.create({ 35 | data: youtubeMeta, 36 | }); 37 | await prismaClient.listItemMeta.create({ 38 | data: { 39 | ...createListItemMeta, 40 | type: ListItemType[createListItemMeta.type as ListItemType], 41 | }, 42 | }); 43 | await prismaClient.listItem.create({ 44 | data: createListItem, 45 | }); 46 | }) 47 | ); 48 | }) 49 | ); 50 | } 51 | }) 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |
26 | {#if $page.data.session} 27 | {#if !data.lists.length} 28 |

29 | {$LL.pages.root.loggedIn.messages.createList()} 30 |

31 | {/if} 32 | {$LL.buttons.create()} 36 |
37 | {#each data.lists as list} 38 | 39 | {/each} 40 |
41 | {:else} 42 |

{$LL.pages.root.messages.tagline()}

43 | 56 | {/if} 57 |
58 | -------------------------------------------------------------------------------- /src/lib/components/YouTubeThumbnailEmbed.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 17 |
18 | {video.title} 23 | 24 |

26 | {formatNumberCompact(video.likes, locale)} 27 | 28 |

29 |

30 | {formatDuration(video.duration)} 31 |

32 |
33 |
34 |

{video.channelTitle}

35 |
39 | 40 | {formatRelativeDate(video.publishedAt, locale)} 41 |
42 | 43 |

{video.title}

44 |
45 | 46 | -------------------------------------------------------------------------------- /tests/createList.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from './baseFixtures'; 2 | import { loginTestUser, L, UserTypes } from './utils'; 3 | 4 | test.beforeEach(async ({ context }) => { 5 | await loginTestUser(context, UserTypes.onboarded); 6 | }); 7 | 8 | test('onboarded user does not get redirected', async ({ page }) => { 9 | await page.goto('/'); 10 | const url = new URL(page.url()); 11 | expect(url.pathname).toBe('/'); 12 | }); 13 | 14 | test('onboarded user can click to create a list', async ({ page }) => { 15 | await page.goto('/'); 16 | await page.getByRole('link', { name: L.en.buttons.create() }).click(); 17 | await page.waitForURL(/\/create$/); 18 | const url = new URL(page.url()); 19 | expect(url.pathname).toBe('/create'); 20 | }); 21 | 22 | test('onboarded user can create a list', async ({ page }) => { 23 | await page.goto('/create'); 24 | await page.waitForURL(/\/create$/); 25 | const url = new URL(page.url()); 26 | expect(url.pathname).toBe('/create'); 27 | 28 | const titleInput = page.getByLabel(L.en.labels.title()); 29 | await titleInput.click(); 30 | await titleInput.fill('Coding Garden Universe'); 31 | 32 | const descriptionInput = page.getByLabel(L.en.labels.description()); 33 | await descriptionInput.click(); 34 | await descriptionInput.fill('All the coding garden channels'); 35 | 36 | const searchInput = page.getByPlaceholder(L.en.pages.create.messages.channelSearch()); 37 | await searchInput.click(); 38 | await searchInput.fill('coding garden'); 39 | await searchInput.press('Enter'); 40 | await page.waitForSelector('.results .card'); 41 | await page.locator('.results .card .btn').first().click(); 42 | await page.locator('.results .card .btn').nth(1).click(); 43 | 44 | await page.getByRole('button', { name: L.en.buttons.create() }).first().click(); 45 | 46 | await page.waitForURL('**/list/**'); 47 | }); 48 | -------------------------------------------------------------------------------- /src/lib/i18n/i18n-util.ts: -------------------------------------------------------------------------------- 1 | // This file was auto-generated by 'typesafe-i18n'. Any manual changes will be overwritten. 2 | /* eslint-disable */ 3 | 4 | import { i18n as initI18n, i18nObject as initI18nObject, i18nString as initI18nString } from 'typesafe-i18n' 5 | import type { LocaleDetector } from 'typesafe-i18n/detectors' 6 | import type { LocaleTranslationFunctions, TranslateByString } from 'typesafe-i18n' 7 | import { detectLocale as detectLocaleFn } from 'typesafe-i18n/detectors' 8 | import { initExtendDictionary } from 'typesafe-i18n/utils' 9 | import type { Formatters, Locales, Translations, TranslationFunctions } from './i18n-types' 10 | 11 | export const baseLocale: Locales = 'en' 12 | 13 | export const locales: Locales[] = [ 14 | 'ar', 15 | 'de', 16 | 'en', 17 | 'es', 18 | 'it', 19 | 'ru', 20 | 'uk' 21 | ] 22 | 23 | export const isLocale = (locale: string): locale is Locales => locales.includes(locale as Locales) 24 | 25 | export const loadedLocales: Record = {} as Record 26 | 27 | export const loadedFormatters: Record = {} as Record 28 | 29 | export const extendDictionary = initExtendDictionary() 30 | 31 | export const i18nString = (locale: Locales): TranslateByString => initI18nString(locale, loadedFormatters[locale]) 32 | 33 | export const i18nObject = (locale: Locales): TranslationFunctions => 34 | initI18nObject( 35 | locale, 36 | loadedLocales[locale], 37 | loadedFormatters[locale] 38 | ) 39 | 40 | export const i18n = (): LocaleTranslationFunctions => 41 | initI18n(loadedLocales, loadedFormatters) 42 | 43 | export const detectLocale = (...detectors: LocaleDetector[]): Locales => detectLocaleFn(baseLocale, locales, ...detectors) 44 | -------------------------------------------------------------------------------- /src/lib/components/ChannelCard.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 |
33 |
34 |
35 | {#if compact} 36 | {channel.name} 41 |
{channel.name}
42 | {:else} 43 | 48 |
49 |
{channel.name}
50 |
{channel.customUrl}
51 |
52 | {subscriberFormatter.format(Number(channel.subscriberCount))} subscribers 53 |
54 |
55 | {/if} 56 |
57 |
58 | {#if $$slots.default} 59 |
60 | 61 |
62 | {/if} 63 |
64 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:svelte/recommended', 8 | 'airbnb-base', 9 | 'airbnb-typescript/base', 10 | 'plugin:prettier/recommended', 11 | ], 12 | plugins: ['@typescript-eslint', 'import-no-duplicates-prefix-resolved-path'], 13 | ignorePatterns: ['src/lib/i18n/*.ts'], 14 | overrides: [ 15 | { 16 | files: ['**/*.svelte'], 17 | parser: 'svelte-eslint-parser', 18 | parserOptions: { 19 | parser: '@typescript-eslint/parser', 20 | }, 21 | rules: { 22 | 'import/no-named-as-default': 0, 23 | 'import/no-named-as-default-member': 0, 24 | }, 25 | }, 26 | ], 27 | parserOptions: { 28 | sourceType: 'module', 29 | ecmaVersion: 2020, 30 | extraFileExtensions: ['.svelte'], 31 | project: './tsconfig.json', 32 | }, 33 | env: { 34 | browser: true, 35 | es2017: true, 36 | node: true, 37 | }, 38 | globals: { 39 | NodeJS: true, 40 | }, 41 | settings: { 42 | 'import/parsers': { 43 | '@typescript-eslint/parser': ['.cjs', '.js', '.ts'], 44 | }, 45 | 'import/resolver': { 46 | typescript: { 47 | alwaysTryTypes: true, 48 | }, 49 | }, 50 | }, 51 | rules: { 52 | 'arrow-body-style': ['error', 'as-needed'], 53 | 'prefer-arrow-callback': ['error', { allowNamedFunctions: false, allowUnboundThis: true }], 54 | 'import/prefer-default-export': 0, 55 | 'no-param-reassign': 0, 56 | 'import/extensions': 0, 57 | 'import/no-extraneous-dependencies': 0, 58 | 'import/no-mutable-exports': 0, 59 | 'import/no-duplicates': 0, 60 | 'import-no-duplicates-prefix-resolved-path/no-duplicates': [ 61 | 'error', 62 | { 63 | prefixResolvedPathWithImportName: true, 64 | }, 65 | ], 66 | 'no-restricted-imports': ['error', { paths: ['$env/static/private'] }], 67 | 'no-self-assign': 0, 68 | '@typescript-eslint/no-throw-literal': 0, 69 | }, 70 | }; 71 | -------------------------------------------------------------------------------- /src/routes/(protected)/components/ChannelSearch.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
{ 22 | loading = true; 23 | hasSearched = true; 24 | return ({ result }) => { 25 | loading = false; 26 | return applyAction(result); 27 | }; 28 | }} 29 | method="post"> 30 | 38 |
39 |
40 |
41 | {#if loading} 42 |
43 | 44 |
45 | {/if} 46 | {#if results} 47 |
48 | {#each results as result} 49 | 50 | 51 | 52 | {/each} 53 |
54 | {:else} 55 | Search for a channel above to add it to the list. 57 | {/if} 58 |
59 |
60 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yaml: -------------------------------------------------------------------------------- 1 | name: "\U0001F41E Bug report" 2 | description: Report an issue 3 | body: 4 | - type: markdown 5 | attributes: 6 | value: | 7 | First thing first, thanks for reporting! 8 | - type: textarea 9 | id: bug-description 10 | attributes: 11 | label: Describe the bug 12 | description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! 13 | placeholder: Bug description 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: screenshots 18 | attributes: 19 | label: Screenshots 20 | description: If you have any screenshot that you need to share in order to better prove your point here's where you can do it. 21 | - type: textarea 22 | id: reproduction 23 | attributes: 24 | label: Reproduction 25 | description: Please provide a link to a repo or better a stackblitz/replit that can reproduce the problem you ran into. This will speed up the fixing. 26 | placeholder: Reproduction 27 | validations: 28 | required: true 29 | - type: textarea 30 | id: logs 31 | attributes: 32 | label: Logs 33 | description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.' 34 | render: shell 35 | - type: checkboxes 36 | id: searched 37 | attributes: 38 | label: Have you checked if this issue has already been raised? 39 | options: 40 | - label: I did not find any similar issues 41 | required: true 42 | - type: checkboxes 43 | id: CoC 44 | attributes: 45 | label: Code of Conduct 46 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/CodingGarden/listd/blob/main/CODE-OF-CONDUCT.md) 47 | options: 48 | - label: I agree to follow this project's Code of Conduct 49 | required: true 50 | -------------------------------------------------------------------------------- /src/lib/i18n/en/index.ts: -------------------------------------------------------------------------------- 1 | import type { Visibility } from '@prisma/client'; 2 | import type { BaseTranslation } from '../i18n-types'; 3 | 4 | type VisibilityTranslation = { 5 | [key in Visibility]: string; 6 | }; 7 | 8 | const en: BaseTranslation = { 9 | message: 'Hello World', 10 | buttons: { 11 | create: 'Create', 12 | view: 'View', 13 | edit: 'Edit', 14 | update: 'Update', 15 | logOut: 'Logout', 16 | loginYouTube: 'Login with YouTube', 17 | remove: 'Remove', 18 | add: 'Add', 19 | }, 20 | labels: { 21 | title: 'Title', 22 | slug: 'Slug', 23 | description: 'Description', 24 | visibility: 'Visibility', 25 | views: '{0} views', 26 | filter: 'Filter', 27 | }, 28 | enums: { 29 | visibility: { 30 | Public: 'Public', 31 | Unlisted: 'Unlisted', 32 | Private: 'Private', 33 | } satisfies VisibilityTranslation, 34 | }, 35 | errors: { 36 | titleRequired: 'Title cannot be empty.', 37 | slugRequired: 'Slug cannot be empty.', 38 | slugSpecialCharacters: 'Slug cannot contain special characters', 39 | descriptionRequired: 'Description cannot be empty.', 40 | notFound: 'Not found.', 41 | listMinLength: 'A list must have at least 1 channel.', 42 | }, 43 | messages: { 44 | pleaseWait: 'Please wait...', 45 | }, 46 | pages: { 47 | root: { 48 | loggedIn: { 49 | messages: { 50 | createList: 'Click Create to get started.', 51 | }, 52 | }, 53 | messages: { 54 | tagline: 55 | "Presenting the ultimate YouTube experience. Whether you're looking for new content to watch or want to share your own curated list with friends, our app has got you covered.", 56 | }, 57 | }, 58 | onboarding: { 59 | buttons: { 60 | letsGo: 'Lets Go!', 61 | }, 62 | labels: { 63 | username: 'Username', 64 | uploadFile: 'Upload File', 65 | }, 66 | messages: { 67 | main: "Welcome to listd! Let's setup your profile.", 68 | avatar: 'Upload your avatar.', 69 | final: "That's all! Let's get started!", 70 | }, 71 | }, 72 | create: { 73 | labels: { 74 | channelSearch: 'Channel Search', 75 | }, 76 | messages: { 77 | channelSearch: 'Search for a channel...', 78 | }, 79 | }, 80 | }, 81 | }; 82 | 83 | export default en; 84 | -------------------------------------------------------------------------------- /src/lib/components/AvatarWithFallback.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | {#if !showFallback} 28 | { 58 | showFallback = true; 59 | }} 60 | alt={altText} /> 61 | {:else} 62 | {fallbackText} 64 | {/if} 65 | -------------------------------------------------------------------------------- /MVP_FEATURES.md: -------------------------------------------------------------------------------- 1 | # MVP 2 | 3 | ## Design 4 | 5 | - [ ] [Add Logo](https://github.com/CodingGarden/listd/issues/5#issuecomment-1744993170) 6 | 7 | ## Features 8 | 9 | - [x] Page Transitions with @pablopang 10 | - [x] Add Icon Library 11 | - [x] Put Icons on all Action Buttons 12 | - [x] List Create / Edit Page 13 | - [x] detect changes in form 14 | - [x] Prevent navigation if unsaved changes 15 | - [x] Disable update / save button if no changes 16 | - [x] List permissions / auth 17 | - [x] Private lists can only be viewed by the creator 18 | - [ ] List Page 19 | - [x] Access list via slug 20 | - [ ] Share list / copy URL to clipboard 21 | - [ ] Previous / Next Buttons 22 | - [ ] Infinite scroll / pagination / lazy loading 23 | - [ ] On video end, play next video 24 | - [ ] Loop back to beginning if we reach the end 25 | - [ ] List Sort / Filters 26 | * [ ] Views 27 | * [ ] Newest / Oldest 28 | * [ ] Likes 29 | * [ ] Random / Feeling Lucky 30 | * [ ] Toggle 31 | * [ ] Shorts 32 | * [ ] Videos 33 | * [ ] Live-streams 34 | * [ ] Duration 35 | * [ ] Min 36 | * [ ] Max 37 | * [ ] Toggle Channels in List 38 | * [ ] Show 1 video from each channel at a time... 39 | - [ ] Channel cache refresh button 40 | - [ ] Show last updated time / cache time for each channel 41 | - [ ] Landing Page / Features 42 | - [ ] Limits 43 | - [ ] Max number of lists per user 44 | - [ ] Max number of channels per list 45 | - [ ] Users can favorite a list 46 | - [ ] Show favorited lists on user dashboard 47 | - [ ] Fork an existing list 48 | - [ ] Public user profile page 49 | - [ ] Show public lists 50 | - [ ] User Preferences 51 | - [ ] Volume 52 | - [ ] Video Speed 53 | - [ ] Autoplay 54 | - [ ] Message Queue 55 | - [ ] Seperate Service that receives requests for Cacheing 56 | - [ ] Calls YT API, updates cache 57 | - [ ] SvelteKit app -> put messages into the queue requesting caching 58 | 59 | ## Architecture 60 | 61 | - [ ] Message Queues 62 | * [ ] Explore: 63 | - Redis 64 | - pub / sub 65 | - flags 66 | 67 | ## Metrics 68 | 69 | - [ ] Analytics Service 70 | - [ ] Error Reporting 71 | 72 | ## Legal 73 | 74 | - [ ] Terms of Service 75 | - [ ] GDPR 76 | - [ ] Privacy Policy 77 | 78 | ## Bugs 79 | 80 | - [ ] Firefox tab navigation 81 | - [ ] Redirect to homepage on logout -------------------------------------------------------------------------------- /src/lib/components/ListCard.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |
20 | {list.title} 32 | {#if list.items} 33 |
34 | {#each truncatedItems as item} 35 | 40 | {/each} 41 | {#if hiddenItems > 0} 42 | +{hiddenItems} 45 | {/if} 46 |
47 | {/if} 48 |

{list.description}

49 |
50 |
51 | 52 | 57 | 58 | 59 | 64 | 65 | 66 |
67 |
68 | -------------------------------------------------------------------------------- /src/routes/[username]/[slug]/+layout.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | 49 | {#if !$page.params.videoid} 50 |

51 | {data.list?.title} 52 |

53 |

{data.list?.description}

54 |
57 | {#each data.list.items as item} 58 | {#if item.meta.youtubeMeta} 59 | 60 | {/if} 61 | {/each} 62 |
63 | {#if data.session?.user?.id === data.list.userId} 64 |
65 | {$LL.buttons.edit()} 67 |
68 | {/if} 69 | {/if} 70 |
71 | {#await data.streamed.videos} 72 | 73 | 74 | 75 | {:then videos} 76 |
77 | 81 |
82 |
83 | {#each filterVideos(videos, filter) as video} 84 | 88 | {/each} 89 |
90 | {/await} 91 |
92 | -------------------------------------------------------------------------------- /src/routes/(protected)/create/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { ListItemType, Visibility } from '@prisma/client'; 2 | import { fail } from '@sveltejs/kit'; 3 | import { LL, setLocale } from '$lib/i18n/i18n-svelte'; 4 | import { get } from 'svelte/store'; 5 | import * as YouTubeAPI from '$lib/server/YouTubeAPI'; 6 | import prismaClient from '$lib/db.server'; 7 | import { createListSchema } from '$/lib/schemas'; 8 | import { superValidate } from 'sveltekit-superforms/server'; 9 | 10 | export async function load() { 11 | const schema = createListSchema(get(LL)); 12 | const form = await superValidate(schema); 13 | return { 14 | form, 15 | visibility: Visibility, 16 | visibilities: Object.values(Visibility) as Visibility[], 17 | }; 18 | } 19 | 20 | export const actions = { 21 | create: async (event) => { 22 | setLocale(event.locals.locale); 23 | const form = await superValidate(event.request, createListSchema(get(LL))); 24 | if (!form.valid) { 25 | return fail(400, { form }); 26 | } 27 | try { 28 | const { title, slug, description, visibility, channelIds } = form.data; 29 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 30 | const { user } = event.locals.session!; 31 | const insertedList = await prismaClient.list.create({ 32 | data: { 33 | slug, 34 | title, 35 | description, 36 | visibility, 37 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion 38 | userId: user!.id!, 39 | }, 40 | }); 41 | 42 | // TODO: fail gracefully... use transactions... refactor this 43 | await Promise.all( 44 | channelIds.map(async (id) => { 45 | let existing = await prismaClient.listItemMeta.findFirst({ 46 | where: { 47 | originId: id, 48 | }, 49 | }); 50 | if (!existing) { 51 | const channel = await YouTubeAPI.getChannel(id); 52 | if (channel) { 53 | existing = await prismaClient.listItemMeta.create({ 54 | data: { 55 | originId: id, 56 | name: channel.name, 57 | type: ListItemType.YouTubeChannel, 58 | imageUrl: channel.avatarUrl, 59 | youtubeMeta: { 60 | create: channel, 61 | }, 62 | }, 63 | }); 64 | } else { 65 | throw new Error(`Channel with id: ${id} not found.`); 66 | } 67 | } 68 | await prismaClient.listItem.create({ 69 | data: { 70 | listId: insertedList.id, 71 | listItemMetaId: existing.id, 72 | name: existing.name, 73 | }, 74 | }); 75 | return existing; 76 | }) 77 | ); 78 | 79 | return { 80 | form, 81 | success: true, 82 | slug: insertedList.slug, 83 | username: event.locals.session?.user?.username, 84 | }; 85 | } catch (e) { 86 | const error = e as Error; 87 | const { message } = error; 88 | return fail(400, { error: message }); 89 | } 90 | }, 91 | search: async (event) => { 92 | const formData = await event.request.formData(); 93 | const q = (formData.get('search') || '').toString(); 94 | const results = await YouTubeAPI.searchChannels(q); 95 | return { results }; 96 | }, 97 | }; 98 | -------------------------------------------------------------------------------- /prisma/ERD.md: -------------------------------------------------------------------------------- 1 | ```mermaid 2 | erDiagram 3 | ColorScheme { 4 | value System 5 | value Dark 6 | value Light 7 | } 8 | Visibility { 9 | value Public 10 | value Unlisted 11 | value Private 12 | } 13 | ListItemType { 14 | value YouTubeChannel 15 | } 16 | User { 17 | String id PK "dbgenerated(gen_random_uuid())" 18 | DateTime createdAt "now()" 19 | DateTime updatedAt 20 | String name "nullable" 21 | String email "nullable" 22 | DateTime emailVerified "nullable" 23 | String image "nullable" 24 | } 25 | UserSettings { 26 | String id PK "dbgenerated(gen_random_uuid())" 27 | Boolean onboarded 28 | ColorScheme colorScheme "System" 29 | String userId FK 30 | String localeId FK 31 | } 32 | Locale { 33 | String id 34 | String languageCode 35 | String countryCode "nullable" 36 | String script "nullable" 37 | String formalName 38 | String nativeName 39 | String commonName "nullable" 40 | } 41 | Account { 42 | String id PK "dbgenerated(gen_random_uuid())" 43 | String userId FK 44 | String type 45 | String provider 46 | String providerAccountId 47 | String refreshToken "nullable" 48 | String accessToken "nullable" 49 | Int expiresAt "nullable" 50 | String tokenType "nullable" 51 | String scope "nullable" 52 | String idToken "nullable" 53 | String sessionState "nullable" 54 | String username "nullable" 55 | } 56 | Session { 57 | String id PK "dbgenerated(gen_random_uuid())" 58 | String sessionToken 59 | String userId FK 60 | DateTime expires 61 | } 62 | VerificationToken { 63 | String identifier 64 | String token 65 | DateTime expires 66 | } 67 | List { 68 | String id PK "dbgenerated(gen_random_uuid())" 69 | String slug 70 | String title 71 | String description "nullable" 72 | Visibility visibility 73 | String userId FK 74 | DateTime createdAt "now()" 75 | DateTime updatedAt 76 | } 77 | ListItem { 78 | Int id PK "autoincrement()" 79 | String name 80 | String description "nullable" 81 | String listId FK 82 | String listItemMetaId FK 83 | DateTime createdAt "now()" 84 | DateTime updatedAt 85 | } 86 | ListItemMeta { 87 | String id PK "dbgenerated(gen_random_uuid())" 88 | String name 89 | String originId 90 | String imageUrl 91 | ListItemType type 92 | DateTime createdAt "now()" 93 | DateTime updatedAt 94 | String youTubeMetaOriginId FK "nullable" 95 | } 96 | YouTubeMeta { 97 | String originId 98 | String name 99 | String description 100 | Int subscriberCount 101 | String avatarUrl 102 | String bannerUrl "nullable" 103 | String customUrl 104 | Boolean isVerified 105 | DateTime createdAt "now()" 106 | DateTime updatedAt 107 | } 108 | User }|--|{ UserSettings : settings 109 | UserSettings }|--|{ User : user 110 | UserSettings }o--|| Locale : locale 111 | UserSettings }o--|| ColorScheme : "enum:colorScheme" 112 | Account }o--|| User : user 113 | Session }o--|| User : user 114 | List }o--|| User : creator 115 | List }o--|| Visibility : "enum:visibility" 116 | ListItem }o--|| ListItemMeta : meta 117 | ListItem }o--|| List : list 118 | ListItemMeta }o--|| YouTubeMeta : youtubeMeta 119 | ListItemMeta }o--|| ListItemType : "enum:type" 120 | 121 | ``` 122 | -------------------------------------------------------------------------------- /src/hooks.server.ts: -------------------------------------------------------------------------------- 1 | import { redirect, type Handle } from '@sveltejs/kit'; 2 | import { sequence } from '@sveltejs/kit/hooks'; 3 | import { initAcceptLanguageHeaderDetector } from 'typesafe-i18n/detectors'; 4 | import { detectLocale } from '$lib/i18n/i18n-util'; 5 | import { SvelteKitAuth } from '@auth/sveltekit'; 6 | import Google from '@auth/core/providers/google'; 7 | import PrismaAdapter from '$lib/prisma/client'; 8 | import { config } from '$/lib/config.server'; 9 | import prismaClient from '$/lib/db.server'; 10 | import { updateAccountUsername } from '$/lib/server/youtube'; 11 | 12 | const handleDetectLocale = (async ({ event, resolve }) => { 13 | // TODO: get lang from cookie / user setting 14 | const acceptLanguageHeaderDetector = initAcceptLanguageHeaderDetector(event.request); 15 | const locale = detectLocale(acceptLanguageHeaderDetector); 16 | event.locals.locale = locale; 17 | 18 | return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale) }); 19 | }) satisfies Handle; 20 | 21 | const handleAuth = (async (...args) => { 22 | const [{ event }] = args; 23 | return SvelteKitAuth({ 24 | trustHost: true, 25 | adapter: PrismaAdapter(prismaClient), 26 | providers: [ 27 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 28 | // @ts-ignore 29 | Google({ 30 | id: 'google', 31 | name: 'Google', 32 | clientId: config.GOOGLE_CLIENT_ID, 33 | clientSecret: config.GOOGLE_CLIENT_SECRET, 34 | authorization: { 35 | params: { 36 | scope: 37 | 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid https://www.googleapis.com/auth/youtube.readonly', 38 | }, 39 | }, 40 | }), 41 | ], 42 | callbacks: { 43 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 44 | // @ts-ignore 45 | async session({ session, user }) { 46 | session.user = { 47 | id: user.id, 48 | name: user.name, 49 | email: user.email, 50 | image: user.image, 51 | settings: user.settings, 52 | username: user.username, 53 | }; 54 | event.locals.session = session; 55 | return session; 56 | }, 57 | }, 58 | events: { 59 | async signIn(message) { 60 | if (message.account && message.account.provider === 'google') { 61 | const username = await updateAccountUsername(message.account); 62 | if (event.locals.session?.user) { 63 | event.locals.session.user.username = username || '@Unknown'; 64 | } 65 | } 66 | }, 67 | async createUser(message) { 68 | if (!message.user.settings) { 69 | const locale = await prismaClient.locale.findFirst({ 70 | where: { 71 | id: event.locals.locale, 72 | }, 73 | }); 74 | const settings = await prismaClient.userSettings.create({ 75 | data: { 76 | localeId: locale?.id ?? 'en-US', 77 | userId: message.user.id!, 78 | }, 79 | }); 80 | message.user.settings = settings; 81 | } 82 | }, 83 | }, 84 | })(...args); 85 | }) satisfies Handle; 86 | 87 | const protectedHandle = (async ({ event, resolve }) => { 88 | await event.locals.getSession(); 89 | if (!event.locals.session && event.route.id?.includes('(protected)')) { 90 | redirect(302, '/'); 91 | } 92 | return resolve(event); 93 | }) satisfies Handle; 94 | 95 | export const handle = sequence(handleDetectLocale, handleAuth, protectedHandle); 96 | -------------------------------------------------------------------------------- /src/lib/prisma/client.ts: -------------------------------------------------------------------------------- 1 | import { PrismaAdapter } from '@next-auth/prisma-adapter'; 2 | import type { PrismaClient, User, UserSettings } from '@prisma/client'; 3 | import type { Adapter, AdapterAccount, AdapterSession } from 'next-auth/adapters'; 4 | 5 | type OGAdapter = Omit< 6 | Adapter, 7 | 'getUser' | 'getUserByEmail' | 'getUserByAccount' | 'getSessionAndUser' 8 | >; 9 | 10 | type AnnotatedUser = User & { settings: UserSettings | null; username: string | null }; 11 | 12 | async function getAnnotatedUser( 13 | client: PrismaClient, 14 | user: User | null 15 | ): Promise { 16 | if (!user) return null; 17 | const account = await client.account.findFirst({ 18 | where: { 19 | userId: user.id, 20 | provider: 'google', 21 | }, 22 | }); 23 | 24 | const userWithUsername = user as AnnotatedUser; 25 | if (account) { 26 | userWithUsername.username = account.username; 27 | } 28 | 29 | return userWithUsername; 30 | } 31 | 32 | export interface CustomAdapter extends OGAdapter { 33 | getUser(id: string): Promise; 34 | getUserByEmail(email: string): Promise; 35 | getUserByAccount( 36 | providerAccountId: Pick 37 | ): Promise; 38 | getSessionAndUser(sessionToken: string): Promise<{ 39 | session: AdapterSession; 40 | user: AnnotatedUser; 41 | } | null>; 42 | } 43 | 44 | export default function CustomPrismaAdapter(client: PrismaClient): CustomAdapter { 45 | return { 46 | ...PrismaAdapter(client), 47 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 48 | // @ts-ignore 49 | createUser({ id, ...data }) { 50 | return client.user.create({ data }); 51 | }, 52 | async getUser(id: string) { 53 | const user = await client.user.findUnique({ 54 | where: { id }, 55 | include: { settings: true }, 56 | }); 57 | 58 | return getAnnotatedUser(client, user); 59 | }, 60 | async getUserByEmail(email: string) { 61 | const user = await client.user.findUnique({ 62 | where: { email }, 63 | include: { settings: true }, 64 | }); 65 | return getAnnotatedUser(client, user); 66 | }, 67 | async getUserByAccount( 68 | providerAccountId: Pick 69 | ) { 70 | const account = await client.account.findUnique({ 71 | where: { provider_providerAccountId: providerAccountId }, 72 | include: { 73 | user: { 74 | include: { 75 | settings: true, 76 | }, 77 | }, 78 | }, 79 | }); 80 | const userWithUsername = account?.user as AnnotatedUser; 81 | if (account && userWithUsername) { 82 | userWithUsername.username = account.username; 83 | } 84 | return userWithUsername ?? null; 85 | }, 86 | async getSessionAndUser(sessionToken: string) { 87 | const userAndSession = await client.session.findUnique({ 88 | where: { sessionToken }, 89 | include: { 90 | user: { 91 | include: { 92 | settings: true, 93 | }, 94 | }, 95 | }, 96 | }); 97 | 98 | if (!userAndSession) return null; 99 | 100 | const { user, ...session } = userAndSession; 101 | const annotatedUser = await getAnnotatedUser(client, user); 102 | if (!annotatedUser) return null; 103 | return { user: annotatedUser, session }; 104 | }, 105 | }; 106 | } 107 | -------------------------------------------------------------------------------- /src/routes/(protected)/list/[id]/edit/+page.server.ts: -------------------------------------------------------------------------------- 1 | import { ListItemType, Visibility } from '@prisma/client'; 2 | import { error as httpError, fail } from '@sveltejs/kit'; 3 | import { LL, setLocale } from '$lib/i18n/i18n-svelte'; 4 | import { get } from 'svelte/store'; 5 | import * as YouTubeAPI from '$lib/server/YouTubeAPI'; 6 | import prismaClient from '$lib/db.server'; 7 | import { getList } from '$/lib/server/queries'; 8 | import { superValidate } from 'sveltekit-superforms/server'; 9 | import { createListSchema } from '$/lib/schemas'; 10 | 11 | export async function load({ params, locals }) { 12 | const { list, channelIds } = await getList({ 13 | id: params.id, 14 | userId: locals.session?.user?.id, 15 | }); 16 | const $LL = get(LL); 17 | setLocale(locals.locale); 18 | if (!list) { 19 | throw httpError(404, $LL.errors.notFound()); 20 | } 21 | const schema = createListSchema($LL); 22 | const form = await superValidate( 23 | { 24 | id: list.id, 25 | title: list.title, 26 | slug: list.slug, 27 | description: list.description || '', 28 | visibility: list.visibility, 29 | channelIds, 30 | }, 31 | schema 32 | ); 33 | return { 34 | form, 35 | list, 36 | visibility: Visibility, 37 | visibilities: Object.values(Visibility) as Visibility[], 38 | }; 39 | } 40 | 41 | export const actions = { 42 | update: async (event) => { 43 | setLocale(event.locals.locale); 44 | const form = await superValidate(event.request, createListSchema(get(LL))); 45 | if (!form.valid) { 46 | return fail(400, { form }); 47 | } 48 | try { 49 | const { id: listId, title, slug, description, visibility, channelIds } = form.data; 50 | 51 | if (!listId) { 52 | throw new Error('Missing list id'); 53 | } 54 | 55 | const result = await prismaClient.list.updateMany({ 56 | where: { 57 | id: listId, 58 | userId: event.locals.session?.user?.id, 59 | }, 60 | data: { 61 | title, 62 | slug, 63 | description, 64 | visibility, 65 | }, 66 | }); 67 | 68 | if (result.count === 0) { 69 | return fail(404, { error: 'List not found.' }); 70 | } 71 | 72 | await prismaClient.listItem.deleteMany({ 73 | where: { 74 | listId, 75 | }, 76 | }); 77 | 78 | // TODO: fail gracefully... use transactions... refactor this 79 | await Promise.all( 80 | channelIds.map(async (id) => { 81 | let existing = await prismaClient.listItemMeta.findFirst({ 82 | where: { 83 | originId: id, 84 | }, 85 | }); 86 | if (!existing) { 87 | const channel = await YouTubeAPI.getChannel(id); 88 | if (channel) { 89 | existing = await prismaClient.listItemMeta.create({ 90 | data: { 91 | originId: id, 92 | name: channel.name, 93 | type: ListItemType.YouTubeChannel, 94 | imageUrl: channel.avatarUrl, 95 | youtubeMeta: { 96 | create: channel, 97 | }, 98 | }, 99 | }); 100 | } else { 101 | throw new Error(`Channel with id: ${id} not found.`); 102 | } 103 | } 104 | await prismaClient.listItem.create({ 105 | data: { 106 | listId, 107 | listItemMetaId: existing.id, 108 | name: existing.name, 109 | }, 110 | }); 111 | return existing; 112 | }) 113 | ); 114 | 115 | return { 116 | form, 117 | success: true, 118 | slug, 119 | username: event.locals.session?.user?.username, 120 | }; 121 | } catch (e) { 122 | const error = e as Error; 123 | const { message } = error; 124 | return fail(400, { error: message }); 125 | } 126 | }, 127 | // TODO: share this function with edit / create 128 | search: async (event) => { 129 | const formData = await event.request.formData(); 130 | const q = (formData.get('search') || '').toString(); 131 | const results = await YouTubeAPI.searchChannels(q); 132 | return { results }; 133 | }, 134 | }; 135 | -------------------------------------------------------------------------------- /CODE-OF-CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Attempting collaboration before conflict 15 | - Focusing on what is best for the community 16 | - Showing empathy towards other community members 17 | 18 | Examples of unacceptable behavior by participants include: 19 | 20 | - Violence, threats of violence, or inciting others to commit self-harm 21 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 22 | - Trolling, intentionally spreading misinformation, insulting/derogatory comments, and personal or political attacks 23 | - Public or private harassment 24 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 25 | - Abuse of the reporting process to intentionally harass or exclude others 26 | - Advocating for, or encouraging, any of the above behavior 27 | - Other conduct which could reasonably be considered inappropriate in a professional setting 28 | 29 | ## Our Responsibilities 30 | 31 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 32 | 33 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 34 | 35 | ## Scope 36 | 37 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 38 | 39 | ## Enforcement 40 | 41 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting us through: 42 | 43 | - [DM on Twitter](https://twitter.com/coding_garden) 44 | 45 | - DM on Discord - w3cj#7953 46 | 47 | 48 | All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. 49 | 50 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 51 | 52 | If you are unsure whether an incident is a violation, or whether the space where the incident took place is covered by our Code of Conduct, **we encourage you to still report it**. We would prefer to have a few extra reports where we decide to take no action, than to leave an incident go unnoticed and unresolved that may result in an individual or group to feel like they can no longer participate in the community. Reports deemed as not a violation will also allow us to improve our Code of Conduct and processes surrounding it. If you witness a dangerous situation or someone in distress, we encourage you to report even if you are only an observer. 53 | 54 | [This Code of Conduct was adapted from Auth0](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md) 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "listd", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "prepare": "husky install", 7 | "dev": "concurrently \"vite dev\" typesafe-i18n", 8 | "build": "vite build", 9 | "preview": "vite preview --host 0.0.0.0", 10 | "test": "npm run test:unit && npm run test:e2e", 11 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 13 | "test:unit": "vitest run", 14 | "test:e2e": "npm run docker-down:test && npm run docker-up:test", 15 | "test:e2e:watch": "npm run docker-down:test:watch && npm run docker-up:test:watch", 16 | "lint": "eslint --ext .js,.cjs,.ts,.svelte .", 17 | "typecheck": "npm run check", 18 | "format": "prettier --check .", 19 | "lint:fix": "eslint --ext .js,.cjs,.ts,.svelte . --fix", 20 | "format:fix": "prettier --write .", 21 | "migrate:init": "prisma migrate dev --name init", 22 | "migrate:deploy": "prisma migrate deploy", 23 | "docker-up:test": "docker compose -f docker-compose.test.yml up --force-recreate --build --abort-on-container-exit --exit-code-from app-test", 24 | "docker-down:test": "docker compose -f docker-compose.test.yml down", 25 | "docker-up:test:watch": "docker compose -f docker-compose.test.watch.yml up --build", 26 | "docker-down:test:watch": "docker compose -f docker-compose.test.watch.yml down", 27 | "docker-up:dev": "docker compose -f docker-compose.dev.yml up -d --wait", 28 | "docker-down:dev": "docker compose -f docker-compose.dev.yml down", 29 | "update:interactive": "npx npm-check-updates -i" 30 | }, 31 | "prisma": { 32 | "seed": "tsx ./prisma/seeds/index.ts" 33 | }, 34 | "devDependencies": { 35 | "@playwright/test": "^1.41.2", 36 | "@skeletonlabs/skeleton": "^2.8.0", 37 | "@skeletonlabs/tw-plugin": "^0.3.1", 38 | "@sveltejs/adapter-auto": "^3.1.1", 39 | "@sveltejs/adapter-node": "^4.0.1", 40 | "@sveltejs/kit": "^2.5.0", 41 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 42 | "@tailwindcss/forms": "^0.5.7", 43 | "@types/node": "^20.11.16", 44 | "@typescript-eslint/eslint-plugin": "^6.21.0", 45 | "@typescript-eslint/parser": "^6.21.0", 46 | "autoprefixer": "^10.4.17", 47 | "concurrently": "^8.2.2", 48 | "cross-env": "^7.0.3", 49 | "dotenv-cli": "^7.3.0", 50 | "eslint": "^8.56.0", 51 | "eslint-config-airbnb-base": "^15.0.0", 52 | "eslint-config-airbnb-typescript": "^17.1.0", 53 | "eslint-config-prettier": "^9.1.0", 54 | "eslint-import-resolver-typescript": "^3.6.1", 55 | "eslint-plugin-import": "^2.29.1", 56 | "eslint-plugin-import-no-duplicates-prefix-resolved-path": "^2.0.0", 57 | "eslint-plugin-prettier": "^5.1.3", 58 | "eslint-plugin-svelte": "^2.35.1", 59 | "husky": "^9.0.10", 60 | "lint-staged": "^15.2.2", 61 | "nyc": "^15.1.0", 62 | "postcss": "^8.4.34", 63 | "postcss-load-config": "^5.0.2", 64 | "prettier": "^3.2.5", 65 | "prettier-plugin-svelte": "^3.1.2", 66 | "prettier-plugin-tailwindcss": "^0.5.11", 67 | "prisma": "^5.9.1", 68 | "prisma-erd-generator-markdown": "^1.3.1", 69 | "svelte": "^4.2.10", 70 | "svelte-check": "^3.6.3", 71 | "svelte-preprocess": "^5.1.3", 72 | "sveltekit-superforms": "^1.13.4", 73 | "sveltekit-view-transition": "^0.5.3", 74 | "tailwindcss": "^3.4.1", 75 | "tslib": "^2.6.2", 76 | "tsx": "^4.7.0", 77 | "typesafe-i18n": "^5.26.2", 78 | "typescript": "^5.3.3", 79 | "typescript-svelte-plugin": "^0.3.37", 80 | "vite": "^5.0.12", 81 | "vite-plugin-istanbul": "^5.0.0", 82 | "vitest": "^1.2.2" 83 | }, 84 | "type": "module", 85 | "dependencies": { 86 | "@auth/core": "0.19.0", 87 | "@auth/sveltekit": "0.5.0", 88 | "@googleapis/youtube": "^13.1.0", 89 | "@next-auth/prisma-adapter": "^1.0.7", 90 | "@prisma/client": "^5.9.1", 91 | "@types/luxon": "^3.4.2", 92 | "@types/youtube-player": "^5.5.11", 93 | "anchorme": "^3.0.5", 94 | "env-cmd": "^10.1.0", 95 | "lucide-svelte": "^0.323.0", 96 | "luxon": "^3.4.4", 97 | "redis": "^4.6.13", 98 | "slugify": "^1.6.6", 99 | "youtube-player": "^5.6.0", 100 | "zod": "^3.22.4" 101 | }, 102 | "license": "MIT", 103 | "engines": { 104 | "npm": ">= 7.0.0", 105 | "yarn": "Please use npm instead of yarn.", 106 | "pnpm": "Please use npm instead of pnpm." 107 | }, 108 | "bugs": { 109 | "url": "https://github.com/CodingGarden/listd/issues" 110 | }, 111 | "keywords": [ 112 | "listd", 113 | "svelte", 114 | "typescript", 115 | "tailwindcss" 116 | ], 117 | "author": "Coding Garden ('https://coding.garden/')", 118 | "repository": { 119 | "type": "git", 120 | "url": "git@github.com:CodingGarden/listd.git" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /DEVLOG.md: -------------------------------------------------------------------------------- 1 | 2 | # Today 3 | 4 | - [x] Update dependencies 5 | - [x] Fix breaking changes... 6 | - [ ] Plan / Categorize / Prioritize features 7 | - [ ] Work on a feature 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | # Last Time 22 | 23 | - [x] Review PRs 24 | - [x] update dependencies 25 | - [x] YouTube Embed API 26 | - [x] parse timestamps in description, link changes timestamp in video 27 | - [ ] List create UX 28 | - [ ] Only show channel avatar 29 | - [ ] Small remove button 30 | - [ ] Tooltip with channel name 31 | - [ ] Desktop styles - 2 column 32 | - [ ] Channel adder is on the right 33 | 34 | 35 | ## Later... 36 | 37 | - [ ] .env.test does not exist on CI server... 38 | - [ ] Remove test ids in Prod build 39 | - [ ] Update contributing guide... 40 | - [ ] Running tests in watch mode... 41 | - [ ] Debugging tests in watch mode... 42 | - [ ] Exporting data to be seeded for tests 43 | 44 | # Last Time 45 | 46 | - [x] Home Page List 47 | - [x] List actions 48 | - [x] View 49 | - [x] Edit 50 | - [x] Fix scroll position on page change 51 | - [x] Video view page 52 | - [x] expandable description box 53 | - [x] Render description with markdown 54 | - [x] Containerize tests 55 | - [ ] More integration tests 56 | - [x] Run tests / containers while dev containers are still running 57 | - [x] Seed DB with unique users for each type of test 58 | - [x] TODO: make a watch specific config 59 | - [x] Watch for only test updates 60 | - [ ] Tests: 61 | - [x] Search for YT channels 62 | - [x] Add YT channel to List 63 | - [x] Create List 64 | - [x] View List 65 | - [x] View individual List 66 | - [x] Coverage Reports 67 | - [x] Generate outside container (volume) 68 | - [x] Navigating Lists 69 | - [x] Edit List 70 | - [x] Make sure $LL is being run in tests... 71 | - [x] Svelte stores highlighted red?? 72 | - [ ] .env.test does not exist on CI server... 73 | - [ ] Remove test ids in Prod build 74 | - [ ] Update contributing guide... 75 | - [ ] Running tests in watch mode... 76 | - [ ] Debugging tests in watch mode... 77 | - [ ] Exporting data to be seeded for tests 78 | 79 | # Upcoming 80 | 81 | - [ ] List edit / update page 82 | - [x] Update readme with tech stack 83 | - [ ] List create UX 84 | - [ ] Only show channel avatar 85 | - [ ] Click to expand 86 | - [ ] Reveals channel name 87 | - [ ] Reveals remove button 88 | - [ ] Show name on hover 89 | - [ ] 2 column layout on desktop 90 | 91 | ## TBD 92 | 93 | - [ ] Deploy??? 94 | - [ ] Database??? 95 | - Free Tier 96 | - Serverless / Edge Function Support... 97 | - Connection Pooling 98 | - Fly.io 99 | - Railway 100 | - Supabase 101 | - Render 102 | - ElephantSQL 103 | - Paid 104 | - Heroku 105 | - AWS RDS 106 | - [ ] App?? - Vercel 107 | 108 | # Past 109 | 110 | - [x] Merge PRs 111 | - [x] Update dependencies 112 | - [x] Testing todos: 113 | - [x] Fix tests on CI 114 | - [x] Docker / prisma test setup 115 | - [x] Configure e2e tests 116 | - [x] Seed DB 117 | - [x] Generate user token during test (do not do oauth flow during test...) 118 | - Anything else that comes up... 119 | - [x] Update dependencies 120 | - [x] Minor / Patch bump 121 | - [x] Major bump 122 | - [x] Review PRs and issues 123 | - [x] Create page form styles 124 | - [x] Channel card styles 125 | - [x] Update the List page styles 126 | - [x] Update DB schema 127 | - Last updated 128 | - More metadata 129 | - Include Channel Image 130 | - Include Channel handle 131 | - Number of subscribers 132 | - Verified badges 133 | - [x] More robust YT API Response 134 | - [x] Lazy load embedded video and thumbnails 135 | - [x] Cache YT API Response 136 | - [x] Get ALL videos of each channel 137 | - [x] Get ALL video info of each video 138 | - [x] View Count 139 | - [x] Length / Duration 140 | - [x] Like Count 141 | - [x] Fix YT Video order (latest by default...) 142 | - [x] List Page Styles 143 | - [x] Fix video titles 144 | - [x] Single Video Page 145 | 146 | ## 2023-03-10 147 | 148 | - [x] Upgrade Auth.js 149 | - [x] Upgrade Skeleton UI 150 | - [x] Wireframe create list page 151 | - [x] Create list page 152 | - [x] Set title 153 | - [x] Set Descriptio 154 | 155 | ## 2023-02-03 156 | 157 | - [x] Review PRs 158 | - [x] Eslint / Airbnb / Prettier Setup... 159 | 160 | ## 2023-01-27 161 | 162 | - [x] Review PRs 163 | - [x] Tailwind bug fix 164 | - [x] Contributing Guide 165 | - [x] Setup i18n 166 | - [x] Research options 167 | - [x] Install / setup 168 | - [x] Use dictionaries on landing page 169 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "postgresql" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | generator erd { 11 | provider = "prisma-erd-generator-markdown" 12 | output = "./ERD.md" 13 | } 14 | 15 | model User { 16 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 17 | createdAt DateTime @default(now()) 18 | updatedAt DateTime @updatedAt 19 | name String? 20 | email String? @unique 21 | emailVerified DateTime? 22 | image String? 23 | accounts Account[] 24 | sessions Session[] 25 | lists List[] 26 | settings UserSettings? 27 | } 28 | 29 | enum ColorScheme { 30 | System 31 | Dark 32 | Light 33 | } 34 | 35 | model UserSettings { 36 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 37 | onboarded Boolean @default(false) 38 | colorScheme ColorScheme @default(System) 39 | user User @relation(fields: [userId], references: [id], onDelete: Cascade) 40 | userId String @unique @db.Uuid 41 | locale Locale @relation(fields: [localeId], references: [id], onDelete: Cascade) 42 | localeId String @db.VarChar(15) 43 | } 44 | 45 | model Locale { 46 | id String @unique @db.VarChar(15) 47 | languageCode String 48 | countryCode String? 49 | script String? 50 | formalName String 51 | nativeName String 52 | commonName String? 53 | UserSettings UserSettings[] 54 | } 55 | 56 | model Account { 57 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 58 | userId String @db.Uuid 59 | type String 60 | provider String 61 | providerAccountId String 62 | refresh_token String? @map("refreshToken") @db.Text 63 | access_token String? @map("accessToken") @db.Text 64 | expires_at Int? @map("expiresAt") 65 | token_type String? @map("tokenType") 66 | scope String? 67 | id_token String? @map("idToken") @db.Text 68 | session_state String? @map("sessionState") 69 | username String? @db.Text 70 | user User @relation(fields: [userId], references: [id], onDelete: Cascade) 71 | 72 | @@unique([provider, providerAccountId]) 73 | } 74 | 75 | model Session { 76 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 77 | sessionToken String @unique 78 | userId String @db.Uuid 79 | expires DateTime 80 | user User @relation(fields: [userId], references: [id], onDelete: Cascade) 81 | } 82 | 83 | model VerificationToken { 84 | identifier String 85 | token String @unique 86 | expires DateTime 87 | 88 | @@unique([identifier, token]) 89 | } 90 | 91 | enum Visibility { 92 | Public 93 | Unlisted 94 | Private 95 | } 96 | 97 | model List { 98 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 99 | slug String 100 | title String 101 | description String? 102 | visibility Visibility 103 | creator User @relation(fields: [userId], references: [id]) 104 | userId String @db.Uuid 105 | items ListItem[] 106 | createdAt DateTime @default(now()) 107 | updatedAt DateTime @updatedAt 108 | 109 | @@unique([slug, userId]) 110 | } 111 | 112 | enum ListItemType { 113 | YouTubeChannel 114 | } 115 | 116 | model ListItem { 117 | id Int @id @default(autoincrement()) 118 | name String 119 | description String? 120 | meta ListItemMeta @relation(fields: [listItemMetaId], references: [id]) 121 | list List @relation(fields: [listId], references: [id]) 122 | listId String @db.Uuid 123 | listItemMetaId String @db.Uuid 124 | createdAt DateTime @default(now()) 125 | updatedAt DateTime @updatedAt 126 | } 127 | 128 | model ListItemMeta { 129 | id String @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid 130 | name String 131 | originId String 132 | imageUrl String 133 | type ListItemType 134 | youtubeMeta YouTubeMeta? @relation(fields: [youTubeMetaOriginId], references: [originId]) 135 | listItem ListItem[] 136 | createdAt DateTime @default(now()) 137 | updatedAt DateTime @updatedAt 138 | youTubeMetaOriginId String? 139 | 140 | @@unique([originId, type]) 141 | } 142 | 143 | model YouTubeMeta { 144 | originId String @unique 145 | name String 146 | description String 147 | subscriberCount Int 148 | avatarUrl String 149 | bannerUrl String? 150 | customUrl String 151 | isVerified Boolean @default(false) 152 | createdAt DateTime @default(now()) 153 | updatedAt DateTime @updatedAt 154 | ListItemMeta ListItemMeta[] 155 | } 156 | -------------------------------------------------------------------------------- /src/routes/[username]/[slug]/watch/[videoid]/+page.svelte: -------------------------------------------------------------------------------- 1 | 75 | 76 |
77 | {data.list.title} 78 | › 79 | 80 | {#await videoPromise} 81 | Loading... 82 | {:then video} 83 | {#if video} 84 | {video.title} 85 | {:else} 86 | Not Found... 87 | {/if} 88 | {/await} 89 | 90 |
91 |
92 | {#await videoPromise} 93 | 94 | 95 | 96 | {:then video} 97 | {#if video} 98 |
99 | 100 |
101 | 102 |
103 | {#await channelPromise} 104 | 105 | 106 | 107 | {:then channel} 108 | {#if channel} 109 |
110 | {channel.name} 115 |
{channel.name}
116 |
117 | {/if} 118 | {/await} 119 |
120 | {formatNumberCompact(video.likes, data.locale)} 122 | 123 | {formatRelativeDate(video.publishedAt, data.locale)} 124 |
125 |
126 |
130 | 131 | {@html anchorme({ 132 | input: parseDescription(video.description, anchorClassnames), 133 | options: { 134 | attributes: { 135 | rel: 'noopener noreferrer', 136 | target: '_blank', 137 | class: anchorClassnames, 138 | }, 139 | }, 140 | })} 141 | 144 |
145 | {:else} 146 |

Not Found

147 | {/if} 148 | {/await} 149 |
150 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | When contributing to `listd`, whether on GitHub or in other community spaces: 4 | 5 | - Be respectful, civil, and open-minded. 6 | - Before opening a new pull request, try searching through the [issue tracker](https://github.com/CodingGarden/listd/issues) for known issues or fixes. 7 | - If you want to make code changes based on your personal opinion(s), make sure you open an issue first describing the changes you want to make, and open a pull request only when your suggestions get approved by maintainers. 8 | 9 | ## How to Contribute 10 | 11 | ### Prerequisites 12 | 13 | In an effort to respect your time, if you wanted to implement a change that has already been declined, or is generally not needed, start by [opening an issue](https://github.com/CodingGarden/listd/issues/new) describing the problem you would like to solve. 14 | 15 | ### Setup your environment 16 | 17 | Fork the [Listd repository](https://github.com/CodingGarden/listd) to your own GitHub account and then clone it to your local device. 18 | 19 | ```bash 20 | git clone git@github.com:YOUR_USER_NAME/listd.git 21 | ``` 22 | 23 | Then, install the project's dependencies: 24 | 25 | ```bash 26 | npm install 27 | ``` 28 | 29 | ### Set up the database 30 | 31 | This project uses [PostgreSQL](https://www.postgresql.org/) as its database. 32 | 33 | The project has a `docker-compose.dev.yml` file ready to use if you have [Docker](https://www.docker.com/) installed. 34 | 35 | You can also install Postgres on your local machine [directly](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) or use a cloud service. 36 | 37 | copy `.env.example` to `.env` 38 | 39 | ```bash 40 | cp .env.example .env 41 | ``` 42 | 43 | #### `.env` variables for PostgreSQL 44 | 45 | ```bash 46 | DB_HOST=your_database_host 47 | DB_PORT=your_database_port 48 | DB_USER=your_database_user 49 | DB_PASSWORD=your_database_password 50 | DB_NAME=your_database_name 51 | DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME} 52 | ``` 53 | 54 | If you are using Docker, you can use the following values: 55 | 56 | ```bash 57 | DB_HOST=localhost 58 | DB_USER=listdapp 59 | DB_PASSWORD=supersecret 60 | DB_NAME=listd 61 | DB_PORT=5432 62 | DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME} 63 | ``` 64 | 65 | - DATABASE_URL: The full database connection URL. This is required and is used by prisma. 66 | 67 | #### Set up PostgreSQL by Docker Compose 68 | 69 | If you have [Docker](https://www.docker.com/) installed, you can use the following command to start a PostgreSQL container: 70 | 71 | ```bash 72 | docker-compose -f docker-compose.dev.yml up -d --wait 73 | ``` 74 | 75 | #### Prisma Setup 76 | 77 | Use the following command to generate the Prisma client: 78 | 79 | ```bash 80 | npx prisma migrate dev 81 | ``` 82 | 83 | View the database diagram [here](./prisma/ERD.md). 84 | 85 | #### Playwright Setup 86 | 87 | Ensure you have the Playwright executables installed to run tests: 88 | 89 | ```bash 90 | npx playwright install 91 | ``` 92 | 93 | ### Getting Google OAuth API Credentials 94 | 95 | 1. Visit the [Google Cloud Console](https://console.developers.google.com/apis/credentials) 96 | 2. Go to the OAuth consent screen tab, fill first step leaving the rest blank and click Save. This will create a project for you 97 | 3. Now Publish your OAuth consent screen App. 98 | 4. Go to the [Credentials tab](https://console.cloud.google.com/apis/credentials) and click Create Credentials -> OAuth Client ID 99 | - Choose Web Application 100 | - Add `http://localhost:5173` to the Authorized JavaScript origins 101 | - Add `http://localhost:5173/auth/callback/google` to the Authorized redirect URIs. 102 | - Click Create. 103 | 5. Copy the Client ID and Client Secret and paste them into the `.env` file. 104 | 105 | ```bash 106 | AUTH_SECRET=your_secret 107 | GOOGLE_CLIENT_ID=your_client_id 108 | GOOGLE_CLIENT_SECRET=your_client_secret 109 | ``` 110 | 111 | ### Run the project 112 | 113 | To run the project in development mode, run the following command: 114 | 115 | ```bash 116 | npm run dev 117 | ``` 118 | 119 | ### Make changes 120 | 121 | Before making any changes, make sure you create a new branch: 122 | 123 | ```bash 124 | git checkout -b your-branch-name 125 | ``` 126 | 127 | When you're done making changes, commit them and push them to your fork: 128 | 129 | ```bash 130 | git add . 131 | git commit -m "your commit message" 132 | git push 133 | ``` 134 | 135 | Then, [create a pull request](https://github.com/CodingGarden/listd/pulls) 136 | from your fork to the `main` branch of the `listd` repository. 137 | 138 | ## Server Environment Variables 139 | 140 | Server environment variables should only be accessed from [`'$lib/config.server.ts'`](./src/lib/config.server.ts) (do not import directly from `'$env/static/private'`). 141 | 142 | If you need access to a new environment variable, add it to the schema in [`'$lib/config.server.ts'`](./src/lib/config.server.ts). 143 | 144 | ## Code Style Guidelines 145 | 146 | In order to maintain consistent and readable code, this project adheres to certain code style guidelines. Please follow these guidelines when contributing to the project. 147 | 148 | ### Linter 149 | 150 | This project uses `ESLint` as our linter tool. To configure your VSCode workspace to show lint warnings, you can find a suggested configuration file, named `default.settings.json`, in the `.vscode` directory. Copy and rename this file to `settings.json` to enable the linter warnings in VSCode. Please do not alter the original `default.settings.json`. 151 | 152 | To further improve your development experience while working on `listd`, this project also includes a list of suggested VSCode extensions in the file `.vscode/extensions.json`. 153 | 154 | ### Formatter 155 | 156 | This project uses [Prettier](https://prettier.io/) to format the code. You can run `npm run format:fix` to format the code before committing. 157 | 158 | 159 | 160 | 161 | 162 | ## License 163 | 164 | By contributing, you agree that your contributions will be licensed under its MIT License. 165 | -------------------------------------------------------------------------------- /src/routes/(protected)/components/ListForm.svelte: -------------------------------------------------------------------------------- 1 | 88 | 89 |
90 | {#if error} 91 | 96 | {/if} 97 |
98 | 109 |
110 | {#if $form.id} 111 | 112 | {/if} 113 | 125 | {#if $errors.title} 126 |
127 |
128 |

{$errors.title}

129 |
130 |
131 | {/if} 132 | 144 | {#if $errors.slug} 145 |
146 |
147 |

{$errors.slug}

148 |
149 |
150 | {/if} 151 |