Update prettier configuration

.eslintrc.cjs

@@ -98,6 +98,7 @@ module.exports = {
     },
     {
       files: [
+        'prettier.config.js',
         'postcss.config.js',
         'tailwind.config.js',
         'next.config.js',

.prettierignore

@@ -1,3 +1,2 @@
 pnpm-lock.yaml
-.changeset/*.md
-templates
+.changeset/*.md

packages/next-docs-ui/css/styles.css

@@ -21,7 +21,7 @@ body {
 }
 
 [data-rehype-pretty-code-fragment] .line-highlighted {
-  @apply nd-bg-primary/10 nd-border-l-2 nd-border-l-primary;
+  @apply nd-border-l-2 nd-border-l-primary nd-bg-primary/10;
 }
 
 :root {

packages/next-docs-ui/src/components/nav.tsx

@@ -35,28 +35,14 @@ export function Nav({
   collapsibleSidebar = true,
   children
 }: NavProps) {
-  const [open, setOpen] = useContext(SidebarContext)
-
   return (
     <nav className="nd-sticky nd-top-0 nd-inset-x-0 nd-z-50 nd-backdrop-blur-lg">
       <div className="nd-container nd-flex nd-flex-row nd-items-center nd-h-16 nd-gap-4 nd-border-b nd-border-foreground/10 nd-max-w-[1300px]">
         {children}
         {items?.map((item, key) => <NavItem key={key} {...item} />)}
         <div className="nd-flex nd-flex-row nd-justify-end nd-items-center nd-flex-1">
           <SearchToggle className="md:nd-mr-2" />
-          {enableSidebar && collapsibleSidebar && (
-            <button
-              aria-label="Toggle Sidebar"
-              onClick={() => setOpen(!open)}
-              className="nd-mr-2 nd-p-2 nd-transition-colors nd-rounded-md nd-border nd-bg-secondary nd-text-muted-foreground hover:nd-text-accent-foreground hover:nd-bg-accent max-lg:nd-hidden"
-            >
-              {open ? (
-                <SidebarCloseIcon className="nd-w-5 nd-h-5" />
-              ) : (
-                <SidebarOpenIcon className="nd-w-5 nd-h-5" />
-              )}
-            </button>
-          )}
+          {enableSidebar && collapsibleSidebar && <DesktopSidebarToggle />}
           {links?.map((item, key) => <NavLink key={key} {...item} />)}
           <ThemeToggle className={clsx(enableSidebar && 'max-lg:nd-hidden')} />
           {enableSidebar && (
@@ -73,6 +59,24 @@ export function Nav({
   )
 }
 
+function DesktopSidebarToggle() {
+  const [open, setOpen] = useContext(SidebarContext)
+
+  return (
+    <button
+      aria-label="Toggle Sidebar"
+      onClick={() => setOpen(!open)}
+      className="nd-mr-2 nd-p-2 nd-transition-colors nd-rounded-md nd-border nd-bg-secondary nd-text-muted-foreground hover:nd-text-accent-foreground hover:nd-bg-accent max-lg:nd-hidden"
+    >
+      {open ? (
+        <SidebarCloseIcon className="nd-w-5 nd-h-5" />
+      ) : (
+        <SidebarOpenIcon className="nd-w-5 nd-h-5" />
+      )}
+    </button>
+  )
+}
+
 export function NavItem(props: NavItemProps) {
   const pathname = usePathname()
   const isActive =

packages/next-docs-ui/src/not-found.tsx

@@ -9,7 +9,7 @@ export default function NotFound() {
       </p>
       <Link
         href="/"
-        className="nd-px-4 nd-py-2 nd-bg-primary nd-text-primary-foreground nd-text-sm nd-font-medium nd-rounded-md"
+        className="nd-px-4 nd-bg-primary nd-py-2 nd-text-primary-foreground nd-text-sm nd-rounded-md nd-font-medium"
       >
         Back to Home
       </Link>

prettier.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  semi: false,
+  tailwindFunctions: ['clsx', 'cn'],
+  singleQuote: true,
+  trailingComma: 'none',
+  arrowParens: 'avoid',
+  plugins: [
+    'prettier-plugin-tailwindcss',
+    '@ianvs/prettier-plugin-sort-imports'
+  ],
+  proseWrap: 'always'
+}