We have elements like this that are not intended to be rendered! For example, in this channel card element, there is an element wrapping the slot content which is not needed here because we are not using the slot and it causes UI issues like this:

Setup i18n

Hi

Here are some recommendations for changes:

Prettier Configuration

https://prettier.io/docs/en/options.html

Remove these config options

useTabs: true,
singleQuote: true,
trailingComma: 'es5',
printWidth: 100,
bracketSameLine: true,
tailwindConfig: './tailwind.config.cjs',
pluginSearchDirs: ['.'],

If we remove any of these options, the default value is going to be used instead.

useTabs (default: false)

Tabs are evil! Please read this: https://alexkondov.com/indentation-warfare-tabs-vs-spaces.

Todo

[ ] Create ./.vscode/settings.json and add this: "editor.insertSpaces": true

singleQuote (default: false)

Use double quotes for consistency between your JavaScript, HTML, and CSS. It's also easier to write strings that contain a single quote!

trailingComma (default: "es5")

"es5" is the default, so there is no need to have this config options.

In v3, "all" is the default, which I think it's better.

Todo

[ ] Remove the trailingComma config option when updating Prettier to version 3.

printWidth (default: 80)

Using 80 is better for small screen sizes like laptops.

bracketSameLine (default: false)

This makes the code look broken, unreadable, and ugly. I'll argue that this is one of the worst coding styles!

tailwindConfig

We don't need this because it doesn't accomplish anything in this project. Please read this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options

pluginSearchDirs

I think this option is deprecated or something. It's nowhere to be found in prettier docs. Without it, everything works fine.

Change these config options

semi: false,
tabWidth: 4,
arrowParens: "avoid",

The default value for these options is not desired. So, let's change them.

semi

Why it's a good idea to not to use semicolons:

1. Readability:

   • Omitting semicolons can lead to cleaner and more readable code by reducing visual clutter.

2. Consistency:

   • Many modern JavaScript style guides and linters (e.g., ESLint with "semi: never" rule) encourage omitting semicolons, promoting a consistent coding style.

3. Developer Preference:

   • Some developers prefer the simplicity of not using semicolons and find it more aesthetically pleasing.

4. Reduced Keystrokes:

   • Omitting semicolons can save typing effort and reduce the risk of typos, especially in large codebases.

5. Avoiding Pitfalls:

   • Omitting semicolons can help avoid common bugs caused by incorrect semicolon placement or missing semicolons at the end of blocks.

6. Interoperability:

   • Modern JavaScript engines can handle semicolon insertion automatically, making semicolons optional and improving interoperability with other languages.

7. Minification Benefits:

   • In the context of minification and code compression, omitting semicolons can lead to smaller file sizes.

8. Embracing Modern Syntax:

   • With the introduction of ES6 and beyond, JavaScript syntax has become more lenient with semicolons. Omitting them aligns with the latest language features.

tabWidth

By changing the tab width to 4, we can improve code readability and reduce confusion significantly.

Todo

[ ] Create ./.vscode/settings.json and add this: "editor.tabSize": 4

arrowParens

By avoiding arrow function paracentesis we can improve code readability and make the code cleaner.

Use PNPM instead

• https://pnpm.io
• https://www.youtube.com/watch?v=ZIKDJBrk56k

Todo

[ ] Add "How to install PNPM" to CONTRIBUTING.md.

Pre-Commit hooks

Why it's a bad idea to use pre-commit hooks:

1. Watch this video: https://www.youtube.com/watch?v=RAelLqnnOp0

2. Overhead for Developers:

   • Pre-commit hooks introduce additional steps and potentially slow down the development process, leading to frustration for developers.

3. Risk of False Positives:

   • Overly strict pre-commit hooks can result in false positives, rejecting commits that are actually valid and error-free.

4. Difficulty for New Contributors:

   • Pre-commit hooks can be intimidating for new contributors, deterring them from participating in open-source projects or collaborative development.

5. Impact on Code Review:

   • Pre-commit hooks can delay code reviews, as developers may need to address hook-related issues before receiving feedback.

6. Bypass with --no-verify:

   • Developers can bypass pre-commit hooks by using the --no-verify option when committing, potentially undermining the intended checks and validations.

Finishing talks

All of these are just opinions, feel free to talk about it on the stream, I think it would be nice talk.
Thanks ❤️.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

we don't add a dir prop to the HTML element.

Describe the proposed solution

In

1. https://github.com/CodingGarden/listd/blob/main/src/app.html#L2

- <html lang="%lang%">
+ <html lang="%lang%" dir="%dir%">

2. https://github.com/CodingGarden/listd/blob/main/src/hooks.server.ts#L25

- return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale) });
+ const direction = (new Intl.Locale(locale)).textInfo.direction
+ return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale).replace('%dir%', direction) });

Intl.Locale ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

We have a lot of validation logic to handle forms

Describe the proposed solution

To use this super awesome library: https://github.com/ciscoheat/sveltekit-superforms

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the bug

npm run lint is not able to validate NavTrail.svelte.

I tried to reinstall the whole project but I am not able to get the linter to work with this file.

Screenshots

Reproduction

Checkout the latest main branch and run npm run lint

Logs

> [email protected] lint
> eslint --ext .js,.cjs,.ts,.svelte .


Error while parsing ***\NavTrail.svelte
Line 1, column 8: '>' expected.
`parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

I was looking at Prisma's different generators and saw https://github.com/keonik/prisma-erd-generator

Describe the proposed solution

add

generator erd {
  provider = "prisma-erd-generator"
}

And it will generate ./prisma/ERD.svg file

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

It is missing in CONTRIBUTING.md. I think this command is doing what npx prisma generate does also.

So I noticed that in the project you are using https://github.com/benflap/tabler-icons-svelte but I was searching for tabler icons to add into my Svelte app and found this one instead https://tabler-icons.io/ and the Svelte implementation leads to https://github.com/tabler/tabler-icons/tree/master/packages/icons-svelte

PS: Sorry that I open this as an issue, but Discussion is not enabled.

Hey CJ, this is Chris from the Skeleton project.

FYI I caught this in your YouTube VOD today:
https://github.com/CodingGarden/listd/blob/main/src/app.postcss#L2

See this bit in the docs:
https://www.skeleton.dev/guides/tailwind

It's awesome that Svelte-Add implements these automatically, but unfortunately they do not provide a means to opt out. Leaving dupes like this might cause some issues so probably best to drop them, otherwise they might bite you later!

Hope this helps!

Describe the problem

Saving the videos that the user clicked to help the user keep track of the watched videos. (Does the YT API provide such watch time? Like this red line?

Describe the proposed solution

We can add the video to the user's localStorage or the database (more DB migrations, hooray!).

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

I would like to have a .editorconfig file as to the recommendation from: https://editorconfig.org/

This is needed since not everyone will be using vscode

Describe the proposed solution

I would like to see a .editorconfig file in the form of, updated to the needs of this project:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

Committing .vscode/settings.json to source control removes the ability for contributors to have their own custom Workspace Settings while working on listd.

For example, I would like to use the peacock extension to jazz up vscode's color scheme, but to do so, the extension must modify workspace settings.

Describe the proposed solution

Add vscode/settings.json to .gitignore.

Rename .vscode/settings.json to .vscode/settings.json.default and add a blurb in the project README.md to encourage contributors to manually adopt the project's suggested default workspace settings.

solution reference

Happy to create a PR with the suggested solution if approved.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Jost - Extra Light @ Google Fonts

I do like some Olde English

It responded:

"Yes, it's perfectly okay to use

Go to the /create page and search for dfgthyutrewrety5ryewretryitrye in channel search input and you will get an error 500.

Describe the bug

lint-staged will only run against changed files speeding things up.

Screenshots

No response

Reproduction

none

Logs

No response

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the bug

this pre-commit is realy new for me,
but it force the existing of cygpath,
which is still a open bug (eaven the issue got closed): desktop/desktop#10326
so cygpath had to be moved manuel to get the test running on windows env

workaround: desktop/desktop#10326 (comment)

Screenshots

Reproduction

Create a git commit in a windows env

Logs

/d/Programme/nodejs/npx: line 5: cygpath: command not found
node:internal/modules/cjs/loader:1078
  throw err;
  ^

Error: Cannot find module 'C:\Users\*****\AppData\Local\GitHubDesktop\app-3.2.3\resources\app\git\node_modules\npm\bin\npx-cli.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v18.15.0
husky - pre-commit hook exited with code 1 (error)

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Run a project type check as part of commit hooks and CI

Describe the problem

I would like to have listd as a container as such to install it with docker hub, not having to worry about updates.

Problems that need to be solved:

• it seems that docker-compose.yml currently implements a volume for the database with local pathing, which won't work when both are containers.
• listd with container support

Describe the proposed solution

I would like to see a solution where both the database and listd can be used with docker.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

WHEN we are using any kind of e-mail, we need to test them. Then I would like to see automated e-mail testing done. For example, there is a service that was mentioned by playwright: https://mailosaur.com/.

Describe the proposed solution

I would like to see automated email testing WHEN we are doing e-mail stuff.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

• Initialize sveltekit project
• Add prisma
• Setup initial prisma schema

Describe the bug

We have to disable import/no-named-as-default-member or ignore it for svelte files. Svelte components are imported using default named.

Screenshots

No response

Reproduction

1. Create a svelte component
2. import that component using import MyComponent from './MyComponent.svelte'

Logs

No response

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

It would be nice to have the Next and Previous buttons under the video, instead of scrolling down to click the next video.

Describe the proposed solution

adding < and > buttons under the video player

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the bug

This is more of a question than a bug. Right now, we are setting the title and description during onMount which will run after hydration (in client side).

Don't you think it defeats the purpose of SEO? since it won't be available in the server rendered HTML. Correct me if I am wrong.

Screenshots

No response

Reproduction

.

Logs

No response

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

Currently, we embed all the iframes, and the player is small.

Describe the proposed solution

User click the video and it opens a modal to 1) embed the iframe 2) play the video

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the bug

The PR template currently shows erroneous tasks. It is interpreting the "PR type" as tasks instead of a list of options.

Screenshots

No response

Reproduction

Create a PR and select a type.

Logs

No response

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Discussed in #64

    Google({
      clientId: GOOGLE_CLIENT_ID,
      clientSecret: GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          scope:
            'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
        }
      }
    }),

We can get extra stuff like access_token and id_token like this:

    Google({
      clientId: GOOGLE_CLIENT_ID,
      clientSecret: GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          access_type: 'offline', prompt: 'consent',
          scope:
            'openid https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
        },
      },
      // extra has id_token, access_token, refresh_token, and expires_in
      profile(profile, extra) {
        console.log({ profile, extra })
        return {
          id: profile.sub,
          name: profile.name,
          image: profile.picture,
          email: profile.email,
        }
      },
    }),

To get a user channels
^{ref: https://developers.google.com/youtube/v3/docs/subscriptions/list}

const YT_API = 'https://www.googleapis.com/youtube/v3'
const getUserSubscriptions = async (access_token: string, maxResults = 10) =>
  (await fetch(
      `${YT_API}/subscriptions?part=snippet&mine=true&maxResults=${maxResults}&access_token=${access_token}`)).json()

Refresh token https://authjs.dev/guides/basics/refresh-token-rotation

Describe the problem

UI does not show loading state when logging out or in.

Describe the proposed solution

Show loading state.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

When you search for a channel in /create, it shows the channels like this:

As you can see there is a max height value set on the list. Now if you in the code make a change to trigger the page, we are going to lose that max height:

Describe the problem

Publish a simple page with info about the project and URLs for the playlist and your twitch channel.

Describe the proposed solution

N/A

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

In this route /create we have two buttons called "Create" that do the same action. I think we can improve the user experience by just having one sticky button following you around.

Here is when the top button got created (it was hard to find it 😅): https://youtu.be/STOSh_INDm0?list=PLM_i0obccy3ujNeSo0EoVppCYDr8YwjSQ&t=20170

Describe the bug

When running npm install npm warns that this package is deprecated.

npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

This can be easily fixed by installing the npm recommendation @jridgewell/sourcemap-codec

Screenshots

Reproduction

Just fresh clone the repo and run npm install script

Logs

npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

Describe the bug

When trying to run npm run lint or committing files (that lints before actually commit) on linux enviroment the terminal throws an error about permission denied.

Screenshots

Reproduction

Run npm run lint on a linux enviroment.

Logs

No response

Describe the problem

• Create a new list

Describe the proposed solution

• Create a new list

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

I would like to have Playwright test for Lighthouse. https://www.npmjs.com/package/playwright-lighthouse
Lighthouse is a testing suite made by google: https://developer.chrome.com/docs/lighthouse/overview/

Describe the proposed solution

I would like to see tests implemented for main routes that are tested with lighthouse.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

I would like to use Playwright to test different languages i18n features. https://playwright.dev/docs/emulation

Describe the proposed solution

I would like to see tests implemented for main routes that are tested with different user agents for i18n and mobile support.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

Resolved the warning by using node v16

Describe the proposed solution

Following the basic setup in https://github.com/actions/setup-node

We can resolved the warning using the below code in our github workflows checks.yaml file

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

As a dev that wants do contribute to this project, I think that would be great to have a pull request template.
Something like this...

Description about your change.

Info that the code reviewer should know about when reviewing this code.

Screenshots if needed.

Describe the proposed solution

Description about your change.

In this pr I did some changes on the main page.

Info that the code reviewer should know about when reviewing this code.

To reproduce my feature, run the project locally and go to the main page.

Screenshots if needed.

Describe the problem

If a person has some good lists of channels, the person should be able to share it with others.

Describe the proposed solution

A share button on lists page which opens a new page which has user search. after search the user, you share the list with that person.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

Shared prisma instance/folder

Describe the proposed solution

A global variable

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the bug

When the test is not successfull,
the docker-down:test script get not executed,
which mean a rerun is not possible since the old docker instance a still running -> to shutedown manuell
by execute the docker-down:test script by hand.

notice for the log:
i run two commands two show the issue:

• npm run test:e2e
• npm run docker-down:test

Screenshots

No response

Reproduction

i added a second button to the login page which create unsuccessful test in oauth.test.ts

Logs

PS F:\github\listd> npm run test:e2e        

> [email protected] test:e2e
> npm run docker-up:test && npm run migrate:init && cross-env NODE_ENV=test prisma db seed && playwright test && npm run docker-down:test


> [email protected] docker-up:test
> docker compose -f docker-compose.test.yml up -d --wait --force-recreate

[+] Running 3/3
 ✔ Network listd_default    Created                                                                                                                                                                                                                                                                               0.8s 
 ✔ Container listd-db-1     Healthy                                                                                                                                                                                                                                                                               3.6s 
 ✔ Container listd-redis-1  Healthy                                                                                                                                                                                                                                                                               3.6s 

> [email protected] migrate:init
> prisma migrate dev --name init

Environment variables loaded from .env
Prisma schema loaded from prisma\schema.prisma
Datasource "db": PostgreSQL database "listd", schema "public" at "localhost:5432"

Applying migration `20230331211353_init`

The following migration(s) have been applied:

migrations/
  └─ 20230331211353_init/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (4.14.0 | library) to .\node_modules\@prisma\client in 136ms
✔ Generated prisma-erd-generator-markdown (1.3.1) to .\prisma\ERD.md in 663ms


Environment variables loaded from .env
Running seed command `tsx ./prisma/seeds/index.ts` ...

The seed command has been executed.

Running 3 tests using 3 workers

[WebServer]
[WebServer]
[WebServer] ".prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency.
[WebServer]
  ✓  1 app.test.ts:3:1 › index page has expected anchor tag (345ms)
  ✓  2 onboarding.test.ts:4:1 › new user redirects to the onboarding page (393ms)
  ✘  3 oauth.test.ts:3:1 › login button redirects to google (364ms)

  1) oauth.test.ts:3:1 › login button redirects to google ──────────────────────────────────────────

    Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 2 elements:
        1) <button class="btn variant-filled-primary cursor-pointer">Login with YouTube</button> aka getByRole('button', { name: 'Login with YouTube' }).first()
        2) <button class="btn variant-filled-primary cursor-pointer">Login with YouTube</button> aka getByRole('button', { name: 'Login with YouTube' }).nth(1)

    =========================== logs ===========================
    ============================================================

      3 | test('login button redirects to google', async ({ page }) => {
      4 |       await page.goto('/');
    > 5 |       await page.getByRole('button').click();
        |                                      ^
      6 |       await page.waitForURL('**/accounts.google.com/**');
      7 |       expect(page.url()).toContain('https://accounts.google.com/');
      8 | });

        at F:\github\listd\tests\oauth.test.ts:5:33

  1 failed
    oauth.test.ts:3:1 › login button redirects to google ───────────────────────────────────────────
  2 passed (1.6s)
PS F:\github\listd> npm run docker-down:test

> [email protected] docker-down:test
> docker compose -f docker-compose.test.yml down

[+] Running 3/3
 ✔ Container listd-db-1     Removed                                                                                                                                                                                                                                                                               0.9s 
 ✔ Container listd-redis-1  Removed                                                                                                                                                                                                                                                                               0.6s 
 ✔ Network listd_default    Removed

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

I would like to have Playwright test for accessibility flaws: https://playwright.dev/docs/accessibility-testing

Describe the proposed solution

I would like to see tests implemented for main routes that check for a11y flaws.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

The latest version of skeleton uses "variants" so we should update to that before adding too much new UI code.

Describe the proposed solution

Update it.

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Describe the problem

UP UP

Describe the proposed solution

UP

Have you checked if this issue has already been raised?

• I did not find any similar issues

Code of Conduct

• I agree to follow this project's Code of Conduct