fix checkout action for deployment to chromatic

.github/workflows/ci.yml

@@ -217,6 +217,8 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup pnpm
         uses: pnpm/[email protected]

README.md

@@ -23,6 +23,16 @@
 - [ ] create diagram
 - [ ] setup renovate
 
+## Deployments
+
+<!--  table -->
+
+| App              | URL                                   |
+| ---------------- | ------------------------------------- |
+| NestJS           | https://pnpm-monorepo-nestjs.fly.dev/ |
+| Remix            | https://pnpm-monorepo-remix.fly.dev/  |
+| Docs (Storybook) | fdasfsa                               |
+
 ## References
 
 - https://pnpm.io/next/filtering

libs/ui/src/components/card.tsx

@@ -11,8 +11,8 @@ export function Card({
 }): JSX.Element {
   return (
     <a
-      className="group block rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-neutral-700 hover:bg-neutral-800/30"
-      href={`${href}?utm_source=create-turbo&utm_medium=with-tailwind&utm_campaign=create-turbo"`}
+      className="border-secondary text-primary group block rounded-lg border border-transparent px-5 py-4 transition-shadow hover:shadow-xl"
+      href={href}
       rel="noopener noreferrer"
       target="_blank"
     >

libs/ui/src/styles.css

@@ -1,3 +1,46 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Based on Kent's repo: https://github.com/kentcdodds/kentcdodds.com/tree/main */
+@layer utilities {
+  .bg-primary {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  .bg-secondary {
+    @apply bg-gray-100 dark:bg-gray-800;
+  }
+
+  .bg-alt {
+    @apply bg-gray-200 dark:bg-gray-700;
+  }
+
+  .bg-inverse {
+    @apply bg-black dark:bg-white;
+  }
+
+  .border-primary {
+    @apply border-gray-900 dark:border-white;
+  }
+
+  .border-secondary {
+    @apply border-gray-200 dark:border-gray-600;
+  }
+
+  .text-primary {
+    @apply text-black dark:text-white;
+  }
+
+  .text-secondary {
+    @apply text-gray-500 dark:text-slate-500;
+  }
+
+  .text-inverse {
+    @apply text-white dark:text-black;
+  }
+
+  .text-prose {
+    @apply prose dark:prose-invert;
+  }
+}