shadcn-ui / taxonomy Goto Github PK

When I deploy this template on vercel, building process fails.

Getting an error when trying to log in with email:

1. Enter email
2. Receive email link
3. Click link from email and receive error:

Question: is this project meant to:

• showcase all capabilities of the latest nextjs release;
• a project starter/template;
• a ready to use CMS;
• all of the above?

Hi,

@shadcn Thanks for such a wonderful project, Its works like a charm for starter projects.

I have cloned it for testing, but after deployment on Vercel, the login functionality somehow is having some issues.

I looked for it in the log but no error reported, the test project is located at https://taxonomy-nine.vercel.app/ and GitHub is active.

Any help will be appreciated.

When clicking on Get Started or any link for the first time, it takes a couple of ms to open. Wasn't that a bad experience? Was it happening because of SSR?
Video link:-
Video 1
Video 2

Getting below warning while deploying to vercel,

warn The `referentialIntegrity` attribute is deprecated. Please use `relationMode` instead. Learn more at https://pris.ly/d/relation-mode

But while using relationMode, it gives deployment error:

Error: Schema validation error - Error (get-config wasm)
--
19:20:32.652 | Error code: P1012
19:20:32.652 | error: Error validating datasource `db`:
19:20:32.652 | This option can only be set if the preview feature is enabled in a generator block.
19:20:32.652 |  
19:20:32.653 | Example:
19:20:32.653 |  
19:20:32.653 | generator client {
19:20:32.653 | provider = "prisma-client-js"
19:20:32.653 | previewFeatures = ["referentialIntegrity"]
19:20:32.653 | }
19:20:32.653 |  
19:20:32.653 | -->  schema.prisma:4
19:20:32.653 | \|
19:20:32.653 | 3 \|   url      = env("DATABASE_URL")
19:20:32.653 | 4 \|   relationMode = "prisma"
19:20:32.653 | 5 \| }
19:20:32.653 | \|

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from D:\Codehub\taxonomy.env.local
error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'esbuild' imported from D:\Codehub\taxonomy\node_modules.pnpm@[email protected][email protected]\node_modules@contentlayer\core\dist\getConfig\esbuild.js
at new NodeError (node:internal/errors:371:5)
at packageResolve (node:internal/modules/esm/resolve:932:9)
at moduleResolve (node:internal/modules/esm/resolve:978:18)
at defaultResolve (node:internal/modules/esm/resolve:1080:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
at ModuleWrap. (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

Hi, I don't know why but your CSS is not working. Any solution?

Hi! I really don't understand how to properly configure the .env file, can I ask you to describe in detail how to do everything correctly so that all the functionality works correctly for me?

Hello,

Not really a issue, but what is responsible for this behavior ? Highlight the topic that is on the screen.

As I was browsing the stunning website, I became curious about how such beauty could be crafted. I speculated that it must have been designed using software before being brought to life, so I began searching for the design. However, despite my efforts, I was unable to locate it. (I am learning from the project.)

https://github.com/shadcn/taxonomy/blob/03ef292d26f1f96dfbd9d2773284c370e3fec7e4/app/(dashboard)/dashboard/page.tsx#L20

I imagine this is a big one - but would be an awesome addition.

Would you be interested in supporting i18n in this app? I'm the maintainer of next-intl, an internationalization library for Next.js. I just added support for Next.js 13 and the app folder in the latest version (docs).

The latest version includes a drop-in middleware replacement for the i18n routing that Next.js previously provided, but which was removed for the app folder. At this time, Client Components are fully supported by next-intl and support for Server Components is in beta.

If you'd be interested, I could help to set this up in Taxonomy—just let me know!

This project is really nice. Ideally any production project is going to need a library like tanstack/react query. Would be really nice if you incorporated it into this project

this is a small issue, but the login fail error toast message should be chaged

When we go to the editor page for one post, when we click on "save", go back to the dashboard, and return to the editor page it shows the old post.

Since next 13 does a soft navigation on route push or back, you could call router.refresh() on save to force it to refetch the data.

I've attached a screenshot :
https://user-images.githubusercontent.com/38298743/200118896-baa87a7d-eabf-4a02-8490-867fdc8d3649.mov

PS :
And one simple way to have loading state without creation one yourself is to use React.useTransition it provides you with a pending state :

const [isSaving, startTransition] = React.useTransition();

async function onSubmit(data: FormData) {
	startTransition(() => {
		// you do your fetch call here...

		router.refresh();
	});
}

// ... rest of your code

to recreate the above issue, login and go to the /dashboard endpoint, go back to home page you still see a login button which should not be there and also when you click on it you can access login page even though the users is authenticated, i can't find a usecase where this is a feature instead of bug, lmk if i am msising anything

Hello

I would like to see how you would approach implementing a referral code handling feature into this cool app.

Think of an url https://tx.shadcn.com/?ref=DISCOUNT5 for 5% discount on the subscription price

Thanks in advance!

getting the error while cloning, Could not clone: shadcn/taxonomy is not a template repository.

Failed to compile.

01:38:16.130 |  
01:38:16.130 | ./components/card.tsx
01:38:16.130 | 27:14 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
01:38:16.130 |  
01:38:16.130 | ./components/ui/command.tsx
01:38:16.131 | 32:18 Error: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
01:38:16.131 |  
01:38:16.131 | info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
01:38:16.248 | error Command failed with exit code 1.
01:38:16.249 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
01:38:16.279 | Error: Command "yarn run build" exited with 1
01:38:16.553 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

Love the project and would definitely like to start contributing if possible. Would be great to have a GitHub project board for the roadmap / see who's working on what.

Side note: Discord server would also be awesome for chatting all things Next13 / SaaS, just throwing it out there 😉

When removing post heading is still visible.

Looks like Heading and modal have z-index: 40

Not sure why hitting "New Post" takes a really long time to load (~3-4s):

Steps to repro:

1. Sign in with GitHub
2. Click 'New Post' button in top right
3. Click 'Back' button in top left

Expected Behavior:
Still no posts in the list

Actual behavior:
There's a new post in the list
'Untitled Post {today's date}'

This is not really an issue but a suggestion :
You probably should call redirect to login for users on the dashboard if the user is not in the session :

import { redirect } from 'next/navigation';

// ... rest of the code

export default async function DashboardLayout({
  children,
}: DashboardLayoutProps) {
  const user = await getUser()

  if (!user) {
	// here
    redirect('/login');
  }

  return ( ... );
}

The docs on redirect are here : https://beta.nextjs.org/docs/api-reference/redirect

Hello,

I am very interested in your project as I wanted to start migrating some projet to Next13 and the app directory.
I was wondering how you handle the authentication as I am stuggling with that subject. I saw you removed the authentication in a previous commit. Why ? Have you got some ideas how to make it work ?
I am very interested to see how you will manage that, I'll folllow closely your work ;)

Thanks,

Can unit testing be added to this repo? It would be a great learning for many.

after running "pnpm run dev" server runs on port 3000 but when i visit http://127.0.0.1:3000/ It seems that it can't send request to the app, the bowser keeps loading infinitely.

I don't get any errors on server or dev console

Node version: v19.8.1

If you're logged in, shouldn't you be getting a logout button or a profile dropdown shown on the website's home page instead of the login button?

Hi
I can't deploy a fresh install of Taxonomy. It seems to be related to @opentelemetry.
Here are the deployment logs :

Install NPM Packages 20230403075608108
Missing lock file(s). Installing packages using npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api
npm ERR! @opentelemetry/api@"~1.1.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! contentlayer@"^0.2.9" from the root project
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/next-contentlayer
npm ERR! next-contentlayer@"^0.2.9" from the root project
npm ERR! 3 more (@contentlayer/cli, @contentlayer/core, @contentlayer/source-files)
npm ERR! peer @opentelemetry/api@"^1.1.0" from @effect-ts/[email protected]
npm ERR! node_modules/@effect-ts/otel
npm ERR! @effect-ts/otel@"^0.14.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! contentlayer@"^0.2.9" from the root project
npm ERR! 4 more (next-contentlayer, @contentlayer/cli, ...)
npm ERR! @effect-ts/otel@"^0.14.1" from @effect-ts/[email protected]
npm ERR! node_modules/@effect-ts/otel-exporter-trace-otlp-grpc
npm ERR! @effect-ts/otel-exporter-trace-otlp-grpc@"^0.14.0" from @contentlayer/[email protected]
npm ERR! node_modules/@contentlayer/utils
npm ERR! @contentlayer/utils@"0.2.9" from [email protected]
npm ERR! node_modules/contentlayer
npm ERR! 4 more (next-contentlayer, @contentlayer/cli, ...)
npm ERR! 1 more (@effect-ts/otel-sdk-trace-node)
npm ERR! 15 more (@opentelemetry/core, @opentelemetry/sdk-trace-base, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @opentelemetry/api@"^1.4.0" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"^13.2.3" from the root project
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
npm ERR! node_modules/next-auth
npm ERR! next-auth@"^4.20.1" from the root project
npm ERR! 1 more (@next-auth/prisma-adapter)
npm ERR! 2 more (next-contentlayer, next-themes)
npm ERR!
npm ERR! Conflicting peer dependency: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api
npm ERR! peerOptional @opentelemetry/api@"^1.4.0" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"^13.2.3" from the root project
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
npm ERR! node_modules/next-auth
npm ERR! next-auth@"^4.20.1" from the root project
npm ERR! 1 more (@next-auth/prisma-adapter)
npm ERR! 2 more (next-contentlayer, next-themes)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Currently it brings up the default browser save dialog:

Recommend adding a CMD + S event listener within the text area to allow users to save with CMD + S

Here's how I'm doing it in Dub: https://github.com/steven-tey/dub/blob/main/components/stats/feedback.tsx#L30-L34

publish coming soon?

TypeScript strict mode enables some extremely useful static type analysis and prevents some easy to stumble into pitfalls. Unless there's a specific compatibility reason why it needs to be disabled, enabling it would be beneficial to the type-safety and runtime stability of this app

I originally realized it wasn't enabled after I wasn't able to get proper type inference using zod. Specifically, the discriminated union return type of parseSafe isn't able to be narrowed to one case unless strict mode is enabled.

There are some unhandled type errors when enabling strict mode. Most of these are either accessing a property of a nullish object or assigning a nullish value to a non-nullable target. I'd be willing to do a PR to enable strict mode and resolve these type errors but figured I'd raise an issue first.

when I click on contentLayer in documentation it go to a 404 page,

Radix fallback component is visible with avatar image

Most likely because you are using next/image component and not Radix <Avatar.Image />. So fallback is triggered?

When in divination if you click on any of the other links it re routes you to the home page items of the link.

Quite possible could be something with nextjs app router but can investigate if needed.

@shadcn There are a few typos in the documentation for the word markdown it's spelled mardown

Assign the issue to me I'll fix it.

I got a couple of types errors in there and a couple of @ts-nocheck. I'll fix this when Next.js app dir is out of beta or when new minors are out.

Hi! I am trying to get my head around how to implement the new next/font package in my project and I dont really understand how can I specify the font as an utility class. In your case I suppose it applies to all the font in the web as you have set it up in the main layout, but how can I specify it to be used for example only for h1 tags or by specifying font-title to an element using tailwind? Thanks in advance!

I tried to deploy Taxonomy on Vercel, I filled every environment variable, including NextAuth, Github, Stripe, Postmark and Planetscale, it works on my local machine, both development and build are OK, no console errors or warnings, but when I deploy it to Vercel, I always get the same error and I don't know how to debug it. Can you help me please?

"Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
ur @ 1038-8ac05e91eb48cd01.js:9"

Would be great to support custom domains on Vercel.

So that clients can easily use their own domain, it's already implemented in some Vercel templates such as this one regarding mutlitentant applications.

I get this error when I try and build the site.

Nov 28 10:08:42 AM  TypeError [ERR_INVALID_URL]: Invalid URL
Nov 28 10:08:42 AM      at new NodeError (node:internal/errors:387:5)
Nov 28 10:08:42 AM      at URL.onParseError (node:internal/url:565:9)
Nov 28 10:08:42 AM      at new URL (node:internal/url:641:5)
Nov 28 10:08:42 AM      at MdxHead (/opt/render/project/src/.next/server/chunks/6564.js:26:17)
Nov 28 10:08:42 AM      at T (/opt/render/project/src/.next/server/chunks/5245.js:20716:25)
Nov 28 10:08:42 AM      at Ma (/opt/render/project/src/.next/server/chunks/5245.js:20879:33)
Nov 28 10:08:42 AM      at Object.toJSON (/opt/render/project/src/.next/server/chunks/5245.js:20672:32)
Nov 28 10:08:42 AM      at stringify (<anonymous>)
Nov 28 10:08:42 AM      at V (/opt/render/project/src/.next/server/chunks/5245.js:20971:53)
Nov 28 10:08:42 AM      at AsyncLocalStorage.run (node:async_hooks:330:14) {
Nov 28 10:08:42 AM    input: 'undefined/og.jpg',
Nov 28 10:08:42 AM    code: 'ERR_INVALID_URL'

I think it is looking for "undefined/og.jpg" instead of the valid og.jpg

Not sure if I am right since I am not a developer.

Thanks
Paul

Hi @shadcn
It seems that when you update a POST in https://tx.shadcn.com/editor/clg0hxp290001l608laz06l3i and come back to /dashboard the title of the edited post stays the same.

navigation does not close on click

It sometimes does but it's a bit flaky:

Middleware should solve this.

I know it's written to be installed with pnpm and after doing it it worked.

I am more interested in general if anyone understands why it's not working with plain npm:

Error on all routes after npm install & npm run dev: => generated is not exported from package

In the application, after a user successfully logs in, the site is supposed to show the user's profile icon on the home page. However, instead of showing the profile icon, the login button is still displayed.

Expected Result:

Profile icon not showing on the home page after successful login.

Actual Result

After successful login, the login button is still being displayed on the home page.

Preview

Hi thanks for open sourcing!
I have a couple questions regarding the email integration:

• Are the templates in the repo too?
• How to create them. First time using postmark

POSTMARK_SIGN_IN_TEMPLATE = 29559329
POSTMARK_ACTIVATION_TEMPLATE = 29559329