invisal / khmercoders Goto Github PK

3cabb52

Description

Error message in sign in page does not look good with dark mode.

Steps to Reproduce

• Simply go to the sign-in page
• Type the incorrect information to get the error
• You will see an error message.

Screenshots

We can follow the Github setting design.

The left side menu should include two things:

• Profile (it is where user can change their bio, avatar and profile name
• Security (where user can change password)

You can design the mockup of those two pages. The implementation of this page will be in separated issues

https://khmer.codes/@invisal/my-experience-as-facebook-developer-circle-phnom-penh-lead-eq6yaq

If you check this one, the list does not have renderer. Look pretty ugly

The plugin is already added just need to implement an api to fetch metadata.

Docs:
https://github.com/editor-js/link

Package to fetch metadata:
https://www.npmjs.com/package/open-graph-scraper
https://www.npmjs.com/package/metadata-scraper

Add metadata for article. You can follow https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

• no special character
• only allow lowercase alphabet and number

Since the animation stroke is white so when it is in light mode, it is as if it is not visible. This is the animation that we use
https://lottiefiles.com/animations/atomic-spin-nrdWvb4i5p

Something that can be useful:

• https://stackoverflow.com/questions/57303700/change-color-dynamically-in-lottie-json

If it is hard to change color based on the theme, we can consider generate two files with different code and change accordingly.

Since we want our blog url to be in this format https://khmer.codes/@username/article-slug-{article-id}, the article id produces by nanoid is too lengthy. I propose we just do random 6 character of [0-9a-z]. It will produce 36^6 = 2176782336 possibilities.

Where to implement
https://github.com/invisal/khmercoders/blob/main/src/lib/db/schema/articles.ts#L12

• Please remove the search menu
• Add 3 menu items: Blogs, Events, About us. Those 3 menu should only visible in desktop site
• Add the hamburger button at the top right side. It should only be visible at the mobile site. You can use https://ui.shadcn.com/docs/components/drawer to make a right side drawer. When click, it will show. The avatar of the user (if login), 3 menu items (Blogs, Resources, About us).

Create empty page for blogs, events, and about.

• the link to the article should be /@username/slug-id, currently its /@username/id

In the future , we will have multiple provider , we should refactor our database to accommodate those requirement

Convert the .ai logo to .svg and put it as logo for our top navigation

khmercoders.zip

Create the landing page for blogger following the medium site. For example: https://medium.com/@uniqtech.

Regarding to infinite slow, to make thing simple, we don't need to implement infinite show. We can show Load more button. When click, it will load more articles.

Implementing upload API as the following:

• Implement POST /api/upload
• Only valid user token can upload image
• When upload image, we will md5 hash the image. Use it as filename + extension
• Create table user_uploads(user_id, filename, size, created_at). The size is the size of the file in byte
• Then upload it to R2.
• Then insert it to user_uploads table

The plugin is already added just need to implement the renderer block

• Unorder List
• Ordered List
• Nested List

Description

Signup with an existing username displays an unknown error.
I'm not sure if the Signup page will be available in production. If it's not available in production we can just close this issue.

Steps to Reproduce

• Simply go to the signup-in page
• Signup with an existing username
• You will see an error message.

Screenshots

• The summary should only be two lines at most
• The card height should be in the same to make it less akward
• Properly show the author name
• Show latest 6 articles.
• Properly link to the URL containing the following /@username/slug-article-id

Currently our blog url is as following /@username/article-id. Please do as the following format /@username/understanding-algorithm-a23112. Where a23112 is the article id.

Design footer

When blog contains the image, it will use show JSON data instead of actually render the image. Please add the image rendering support.