Merge pull request #943 from ahmadk953/bugfixes

Small bug fixes and improvements

.github/workflows/tests.yml

@@ -25,6 +25,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Build content collections
+        run: yarn build-collections
+
       - name: Run tests
         run: yarn coverage
 

__tests__/__snapshots__/blog-page.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blog Page renders blog page unchanged 1`] = `
+<div>
+  <div
+    class="ml-4 mr-4 flex flex-col items-center space-y-10"
+  >
+    <h1
+      class="text-4xl font-semibold text-neutral-800 dark:text-neutral-100"
+    >
+      Blog
+    </h1>
+    <div
+      class="grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4"
+    >
+      <div
+        class="space-y-4 text-center"
+      >
+        <a
+          href="blog/posts/blog-welcome"
+        >
+          <img
+            alt="post cover image"
+            class="aspect-video w-full rounded-md object-cover"
+            data-nimg="1"
+            decoding="async"
+            height="100"
+            loading="lazy"
+            src="/hero.svg"
+            style="color: transparent;"
+            width="300"
+          />
+          <h2
+            class="text-lg font-semibold text-neutral-800 dark:text-neutral-100"
+          >
+            Welcome to the Blog!
+          </h2>
+          <p
+            class="text-sm text-neutral-700 dark:text-neutral-200"
+          >
+            Welcome to our new blog page!
+          </p>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

__tests__/blog-page.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+
+import Page from '@/app/(main)/blog/page';
+
+describe('Blog Page', () => {
+  it('renders blog page unchanged', () => {
+    const { container } = render(<Page />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a heading', () => {
+    render(<Page />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('renders blog posts', () => {
+    render(<Page />);
+
+    const posts = screen.getAllByRole('heading', { level: 2 });
+
+    expect(posts.length).toBeGreaterThan(0);
+  });
+});

app/(main)/blog/posts/[post]/page.tsx

@@ -12,7 +12,7 @@ const PostPage = async (props: PostPageProps) => {
 
   if (!post) {
     return (
-      <h1 className='text-6xl font-semibold text-neutral-900'>
+      <h1 className='mx-auto text-center text-6xl font-semibold text-neutral-800 dark:text-neutral-100'>
         Post not found
       </h1>
     );
@@ -27,10 +27,10 @@ const PostPage = async (props: PostPageProps) => {
         height={600}
         alt='post cover image'
       />
-      <h1 className='mb-12 text-center text-6xl font-bold text-neutral-900'>
+      <h1 className='mb-12 text-center text-6xl font-bold text-neutral-800 dark:text-neutral-100'>
         {post.title}
       </h1>{' '}
-      <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl dark:prose-headings:text-white'>
+      <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-neutral-800 prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl prose-p:text-neutral-700 dark:prose-headings:text-neutral-100 dark:prose-p:text-neutral-200'>
         <MDXContent code={post.mdx} />
       </div>
     </div>

app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx

@@ -50,14 +50,14 @@ BoardLiveblocks.Skeleton = function SkeletonBoardLiveblocks() {
     <div className='h-full overflow-x-auto p-4'>
       <ol className='flex h-full gap-x-3'>
         <li className='h-full w-[272px] shrink-0 select-none'>
-          <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'>
+          <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md dark:bg-[#1f1f1f]'>
             <div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
               <Skeleton className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium' />
             </div>
             <ol className='mx-1 mt-2 flex flex-col gap-y-2 px-1 py-0.5'>
-              <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
-              <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
-              <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
+              <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
+              <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
+              <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
             </ol>
           </div>
         </li>

app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx

@@ -76,7 +76,7 @@ export const ListForm = () => {
             className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
             placeholder='Enter list title...'
           />
-          <input hidden value={params.boardId} name='boardId' />
+          <input hidden defaultValue={params.boardId} name='boardId' />
           <div className='flex items-center gap-x-1'>
             <FormSubmit>Add list</FormSubmit>
             <Button onClick={disableEditing} size='sm' variant='ghost'>

app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx

@@ -88,7 +88,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
             id='title'
             placeholder='Enter list title...'
             defaultValue={title}
-            className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
+            className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white dark:focus:bg-black'
           />
           <button hidden type='submit' />
         </form>

app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx

@@ -68,12 +68,12 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
-        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-200'>
           List Actions
         </div>
         <PopoverClose ref={closeRef} asChild>
           <Button
-            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200'
             variant='ghost'
           >
             <X className='h-4 w-4' />
@@ -87,8 +87,13 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
           Add card...
         </Button>
         <form action={onCopy}>
-          <input hidden name='id' id='id' value={data.id} />
-          <input hidden name='boardId' id='boardId' value={data.boardId} />
+          <input hidden name='id' id='id' defaultValue={data.id} />
+          <input
+            hidden
+            name='boardId'
+            id='boardId'
+            defaultValue={data.boardId}
+          />
           <FormSubmit
             className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
             variant='ghost'
@@ -98,10 +103,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
         </form>
         <Separator />
         <form action={onDelete}>
-          <input hidden name='id' id='id' value={data.id} />
-          <input hidden name='boardId' id='boardId' value={data.boardId} />
+          <input hidden name='id' id='id' defaultValue={data.id} />
+          <input
+            hidden
+            name='boardId'
+            id='boardId'
+            defaultValue={data.boardId}
+          />
           <FormSubmit
-            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
+            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive dark:text-red-500 dark:hover:text-red-500'
             variant='ghost'
           >
             Delete this list

app/(platform)/layout.tsx

@@ -9,17 +9,17 @@ import { ModalProvider } from '@/components/providers/modal-provider';
 import { QueryProvider } from '@/components/providers/query-provider';
 
 const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   return (
     <ClerkProvider
       afterSignOutUrl='/'
       appearance={{
-        baseTheme: theme === 'dark' ? dark : undefined,
+        baseTheme: resolvedTheme === 'dark' ? dark : undefined,
       }}
     >
       <QueryProvider>
-        <Toaster theme='system' />
+        <Toaster theme={resolvedTheme === 'dark' ? 'dark' : 'light'} />
         <ModalProvider />
         {children}
       </QueryProvider>

components/form/form-textarea.tsx

@@ -48,7 +48,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
           {label ? (
             <Label
               htmlFor={id}
-              className='text-xs font-semibold text-neutral-700'
+              className='text-xs font-semibold text-neutral-700 dark:text-neutral-200'
             >
               {label}
             </Label>

docs/mint.json

@@ -2,8 +2,8 @@
   "$schema": "https://mintlify.com/schema.json",
   "name": "Tasko",
   "logo": {
-    "dark": "/public/logo-light.svg",
-    "light": "/public/logo-dark.svg",
+    "dark": "/public/logo-dark.svg",
+    "light": "/public/logo-light.svg",
     "href": "https://tasko.ahmadk953.org/"
   },
   "favicon": "/public/favicon.svg",

package.json

@@ -6,6 +6,7 @@
     "dev": "next dev --turbo",
     "debug": "NODE_OPTIONS='--inspect' next dev --turbo",
     "build": "next build",
+    "build-collections": "content-collections build",
     "start": "next start",
     "lint": "next lint && tsc --noemit",
     "postinstall": "prisma generate --no-engine",
@@ -65,6 +66,7 @@
   },
   "devDependencies": {
     "@codecov/nextjs-webpack-plugin": "^1.7.0",
+    "@content-collections/cli": "^0.1.6",
     "@content-collections/core": "^0.8.0",
     "@content-collections/mdx": "^0.2.0",
     "@content-collections/next": "^0.2.4",

yarn.lock

@@ -640,6 +640,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@clerc/core@npm:^0.44.0":
+  version: 0.44.0
+  resolution: "@clerc/core@npm:0.44.0"
+  dependencies:
+    "@clerc/utils": "npm:0.44.0"
+    defu: "npm:^6.1.2"
+    is-platform: "npm:^1.0.0"
+    lite-emit: "npm:^2.3.0"
+    type-fest: "npm:^4.3.1"
+    type-flag: "npm:^3.0.0"
+  checksum: 10c0/330374351519653bc5f0535b26a75cf874ef983e7c1d3a3a9957849cf13c9b167cf7fcb08fa7869ceb8e2297bd725a470a149447fdaafd09707538a44d52d4d3
+  languageName: node
+  linkType: hard
+
+"@clerc/plugin-completions@npm:^0.44.0":
+  version: 0.44.0
+  resolution: "@clerc/plugin-completions@npm:0.44.0"
+  dependencies:
+    "@clerc/utils": "npm:0.44.0"
+  peerDependencies:
+    "@clerc/core": "*"
+  checksum: 10c0/4dda7bcacdeded2abf208fb244f1156f6d64a6212ca4fe9d60174ddac7ca40f167158dd9fa5395eabcfb592d5ebba3c2935d94fe43b42cdb13ca48e02f5c23d7
+  languageName: node
+  linkType: hard
+
+"@clerc/plugin-help@npm:^0.44.0":
+  version: 0.44.0
+  resolution: "@clerc/plugin-help@npm:0.44.0"
+  dependencies:
+    "@clerc/utils": "npm:0.44.0"
+    "@types/text-table": "npm:^0.2.3"
+    string-width: "npm:^6.1.0"
+    text-table: "npm:^0.2.0"
+    yoctocolors: "npm:^1.0.0"
+  peerDependencies:
+    "@clerc/core": "*"
+  checksum: 10c0/8508f0fd5c398380f59410aaa06d5e8466ce0a091bc04505f5b9fa98430240a767c6c2d239d29086324ffef3dcf398a10507073de30429c592d54f169bd7fbaf
+  languageName: node
+  linkType: hard
+
+"@clerc/plugin-version@npm:^0.44.0":
+  version: 0.44.0
+  resolution: "@clerc/plugin-version@npm:0.44.0"
+  dependencies:
+    "@clerc/utils": "npm:0.44.0"
+  peerDependencies:
+    "@clerc/core": "*"
+  checksum: 10c0/7a66e4417f7b008528b17333032c21302987b11b472e9169e1cd9a7082b6fb28cbe16451af3bffbc861d4059375279373a998772334ae6eacbd931952a0ef9bc
+  languageName: node
+  linkType: hard
+
+"@clerc/utils@npm:0.44.0":
+  version: 0.44.0
+  resolution: "@clerc/utils@npm:0.44.0"
+  peerDependencies:
+    "@clerc/core": "*"
+  checksum: 10c0/160c970f7c0ae80708023c19170ad5ee3d1c45e62d9b1244811a507ac5d3ac74a81d36ec81555c0c9327826f5bbad351c3f7008591d7e349ef374862b2b962ee
+  languageName: node
+  linkType: hard
+
 "@clerk/backend@npm:^1.22.0":
   version: 1.22.0
   resolution: "@clerk/backend@npm:1.22.0"
@@ -798,6 +858,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@content-collections/cli@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "@content-collections/cli@npm:0.1.6"
+  dependencies:
+    "@clerc/core": "npm:^0.44.0"
+    "@clerc/plugin-completions": "npm:^0.44.0"
+    "@clerc/plugin-help": "npm:^0.44.0"
+    "@clerc/plugin-version": "npm:^0.44.0"
+    "@content-collections/integrations": "npm:0.2.1"
+  peerDependencies:
+    "@content-collections/core": 0.x
+  bin:
+    content-collections: dist/index.js
+  checksum: 10c0/e3b9598a53493e2efeeb6d159c31990734d96a8326e6d5a522718837132fcb584ce75b393ded4cd1f077d5e824f6c6ec89fe0e4d2c149e726ef72521c97520e7
+  languageName: node
+  linkType: hard
+
 "@content-collections/core@npm:^0.8.0":
   version: 0.8.0
   resolution: "@content-collections/core@npm:0.8.0"
@@ -4571,6 +4648,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/text-table@npm:^0.2.3":
+  version: 0.2.5
+  resolution: "@types/text-table@npm:0.2.5"
+  checksum: 10c0/967054ba7509bf6ba4dda8adf81d048a7773b35295edb8670c045b6e27bda556a1917c8a29d4ea6b7d7e5b494785500779a002508c4415ef2e8b2a5351ca2066
+  languageName: node
+  linkType: hard
+
 "@types/tough-cookie@npm:*":
   version: 4.0.5
   resolution: "@types/tough-cookie@npm:4.0.5"
@@ -6194,6 +6278,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defu@npm:^6.1.2":
+  version: 6.1.4
+  resolution: "defu@npm:6.1.4"
+  checksum: 10c0/2d6cc366262dc0cb8096e429368e44052fdf43ed48e53ad84cc7c9407f890301aa5fcb80d0995abaaf842b3949f154d060be4160f7a46cb2bc2f7726c81526f5
+  languageName: node
+  linkType: hard
+
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -6384,6 +6475,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-regex@npm:^10.2.1":
+  version: 10.4.0
+  resolution: "emoji-regex@npm:10.4.0"
+  checksum: 10c0/a3fcedfc58bfcce21a05a5f36a529d81e88d602100145fcca3dc6f795e3c8acc4fc18fe773fbf9b6d6e9371205edb3afa2668ec3473fa2aa7fd47d2a9d46482d
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -8359,6 +8457,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-platform@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-platform@npm:1.0.0"
+  checksum: 10c0/5002f262fc4e5f5ba32c009f891ec40a9c6d7364ebc33ba1224c058bcdc6eaa8fe13da447cb5983b1edb7dca88e97a7656da581482cf3923a7b7441acf485541
+  languageName: node
+  linkType: hard
+
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -9289,6 +9394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lite-emit@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "lite-emit@npm:2.3.0"
+  checksum: 10c0/97fda49d9b502c523505e522676262e5580c049fd3d1cba25b3ae4fb9b1b5ccd4361c15135d28917c70e6198823aa85365dd4c3154b6e5246b84d4b328c48a3d
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -12381,6 +12493,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-width@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "string-width@npm:6.1.0"
+  dependencies:
+    eastasianwidth: "npm:^0.2.0"
+    emoji-regex: "npm:^10.2.1"
+    strip-ansi: "npm:^7.0.1"
+  checksum: 10c0/7b2991ea7c946a43042070787b85af454079116dfd6d853aab4ff8a6d4ac717cdc18656cfee15b7a7a78286669202a4a56385728f0740cb1e15001c71807b361
+  languageName: node
+  linkType: hard
+
 "string.prototype.includes@npm:^2.0.1":
   version: 2.0.1
   resolution: "string.prototype.includes@npm:2.0.1"
@@ -12708,6 +12831,7 @@ __metadata:
     "@clerk/nextjs": "npm:^6.9.10"
     "@clerk/themes": "npm:^2.2.5"
     "@codecov/nextjs-webpack-plugin": "npm:^1.7.0"
+    "@content-collections/cli": "npm:^0.1.6"
     "@content-collections/core": "npm:^0.8.0"
     "@content-collections/mdx": "npm:^0.2.0"
     "@content-collections/next": "npm:^0.2.4"
@@ -13085,13 +13209,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^4.15.0":
+"type-fest@npm:^4.15.0, type-fest@npm:^4.3.1":
   version: 4.32.0
   resolution: "type-fest@npm:4.32.0"
   checksum: 10c0/e2e877055487d109eba99afc58211db4a480837ff7b243c7de0b3e2ac29fdce55ab55e201c64cb1a8b2aeffce7e8f60ae3ce3a2f7e6fb68261d62743e54288ba
   languageName: node
   linkType: hard
 
+"type-flag@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "type-flag@npm:3.0.0"
+  checksum: 10c0/b1015d4eb18cd85432fa3bcd0228149dd6893a9c1360a2ad619f79b72e19acfb648a932e2a9ccf2e2db0f0c4b86385bd886a3364e221afb116424e0ae6d1b1ba
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -13983,6 +14114,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yoctocolors@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "yoctocolors@npm:1.0.0"
+  checksum: 10c0/669374d361ffc65d55ae563badae4f2c8d1973c660695b7cf3d8b415f776c38bf535d49e04b648e5fd692fad24f02c05ca2910c300bc29d280d6c77ffc1e687d
+  languageName: node
+  linkType: hard
+
 "zod-validation-error@npm:^3.0.3":
   version: 3.4.0
   resolution: "zod-validation-error@npm:3.4.0"