feat(docs): Migrate from contentlayer to next-mdx-remote (#78)

apps/docs/next.config.js

@@ -1,5 +1,3 @@
-const { withContentlayer } = require("next-contentlayer");
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   basePath: "/wedges/docs",
@@ -58,4 +56,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withContentlayer(nextConfig);
+module.exports = nextConfig;

apps/docs/package.json

@@ -3,41 +3,43 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "pnpm generate:examples && next dev -p 3000",
     "build": "pnpm generate:examples && next build",
+    "dev": "pnpm generate:examples && next dev -p 3000",
     "start": "next start",
+    "clean": "rimraf .turbo node_modules .next",
+    "generate:examples": "node src/scripts/generateExamples.mjs",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "preview": "pnpm generate:examples && next build && next start -p 3000",
-    "clean": "rimraf .turbo .contentlayer node_modules .next",
-    "generate:examples": "node src/scripts/generateExamples.mjs"
+    "typecheck": "tsc --pretty --noEmit"
   },
   "dependencies": {
     "@headlessui/react": "^2.0.4",
     "@iconicicons/react": "^1.5.1",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "fathom-client": "^3.6.0",
-    "next": "14.2.3",
-    "sass": "^1.77.4",
-    "shikiji": "0.10.x"
+    "fathom-client": "^3.7.0",
+    "next": "14.2.4",
+    "sass": "^1.77.6"
   },
   "devDependencies": {
     "@docsearch/react": "^3.6.0",
     "@lemonsqueezy/wedges": "workspace:*",
+    "@shikijs/transformers": "^1.7.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/hast": "^3.0.4",
     "@types/unist": "^3.0.2",
     "autoprefixer": "^10.4.19",
-    "contentlayer": "latest",
     "hast-util-from-html-isomorphic": "^2.0.0",
     "mdast-util-toc": "^7.1.0",
-    "next-contentlayer": "latest",
+    "next-mdx-remote": "^5.0.0",
     "postcss": "^8",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-pretty-code": "^0.13.2",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-smartypants": "^3.0.1",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   }

apps/docs/src/content/components/checkbox-group.mdx → apps/docs/public/docs/components/checkbox-group.mdx

@@ -75,7 +75,7 @@ Alternatively, `CheckboxGroup.Root` can be used in place of this component. Besi
 
 #### CheckboxGroup.Item
 
-Shares all the properties of the `Checkbox` component. Details can be found <Link href="/components/checkbox#api-reference">here</Link>.
+Shares all the properties of the `Checkbox` component. Details can be found [here](/components/checkbox#api-reference).
 
 ### Examples
 

apps/docs/src/content/getting-started/installation.mdx → apps/docs/public/docs/getting-started/installation.mdx

@@ -12,7 +12,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         <svg
         role="img"
         viewBox="0 0 24 24"
-        className="w-10 h-10"
+        className="size-10 shrink-0"
         fill="currentColor"
         >
             <title>Next.js</title>
@@ -26,7 +26,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         <svg
         role="img"
         viewBox="0 0 24 24"
-        className="w-10 h-10"
+        className="size-10 shrink-0"
         fill="currentColor"
         >
             <title>Vite</title>
@@ -41,7 +41,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        className="w-10 h-10"
+        className="size-10 shrink-0"
         fill="currentColor"
         >
             <title>Remix</title>
@@ -55,8 +55,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         <svg
             role="img"
             viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            className="w-10 h-10"
+            className="size-10 shrink-0"
             fill="currentColor"
         >
             <title>Gatsby</title>
@@ -70,8 +69,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         <svg
             role="img"
             viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            className="w-10 h-10"
+            className="size-10 shrink-0"
             fill="currentColor"
         >
             <title>Astro</title>
@@ -87,8 +85,7 @@ Straightforward setup guides are available for popular frameworks, as well as a
         <svg
             role="img"
             viewBox="0 0 62 65"
-            xmlns="http://www.w3.org/2000/svg"
-            className="w-10 h-10"
+            className="size-10 shrink-0"
             fill="currentColor"
         >
             <title>Laravel</title>
@@ -99,11 +96,11 @@ Straightforward setup guides are available for popular frameworks, as well as a
     </LinkCard>
 
     <LinkCard className='col-span-2 md:col-span-3' href="/installation/manual">
-        <Logomark className='-mx-2 fill-current w-10 h-10' aria-label="Manual"/>
+        <Logomark className='-mx-2 fill-current size-10 shrink-0' aria-label="Manual"/>
 
         <p className='font-medium flex items-center gap-1 text-sm'>
             <span>Manual</span>
-            <Tooltip content="For any setup with React + Tailwind CSS."/>
+            <Tooltip content="For any stack with React + Tailwind CSS."/>
         </p>
     </LinkCard>
 </div>

apps/docs/public/docs/index.mdx

@@ -0,0 +1,36 @@
+---
+title: Introduction
+description: An ever-expanding, open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
+breadcrumbs:
+  - Getting Started
+---
+
+<Image priority src="/banner.webp" quality={100} width={616} height={411} alt="Wedges banner" className="block w-full rounded-lg object-cover border border-surface-100" />
+
+### What is Wedges?
+
+Wedges is a professionally designed <a href="https://lemonsqueezy.com/wedges/figma/">design system for Figma</a> and an ever-expanding, open-source React UI library that combines [Radix UI primitives](https://www.radix-ui.com/primitives) and [Tailwind CSS](https://tailwindcss.com/). Its goal is to simplify the process of building beautiful, functional and accessible user interfaces.
+
+With Wedges, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.
+
+### License
+
+Wedges is licensed under the [MIT License](https://github.com/lmsqueezy/wedges/blob/main/LICENSE).
+
+### Contributing
+
+Interested in contributing to Wedges? Awesome! Start by reviewing our [contribution guidelines](https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md. We value your efforts in helping us improve Wedges.
+
+### Credits
+
+Wedges is an open source project by <a href="https://www.lemonsqueezy.com/" target="_blank">Lemon Squeezy</a> — the all-in-one platform for software companies.
+
+- Design system by [@ormanclark](https://twitter.com/ormanclark)
+- UI component library by [@brankoconjic](https://twitter.com/brankoconjic)
+- [Radix UI](https://radix-ui.com/primitives/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- Custom Tailwind CSS plugin inspired by [tw-colors](https://github.com/L-Blondy/tw-colors)
+
+### Connect with us
+
+Follow us [@lmsqueezy](https://twitter.com/lmsqueezy/) for the latest and coolest. Let us know what you're building with Wedges!