adding tailwind prefix support

Adding support of tailwind CSS prefix in theme
frontendweb3 · Jan 18, 2024 · ba04e83 · ba04e83
2 parents b8473aa + 27a9234
commit ba04e83
Show file tree

Hide file tree

Showing 26 changed files with 1,223 additions and 1,256 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -10,10 +10,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tabler/icons-react": "^2.44.0",
-    "@types/node": "20.10.4",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@tabler/icons-react": "^2.45.0",
+    "@types/node": "20.11.0",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
     "next": "14.0.4",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",

diff --git a/package.json b/package.json
@@ -1,23 +1,32 @@
 {
   "name": "section-theme-blog",
   "scripts": {
-    "build": "turbo run build --filter=section-blog-theme --filter=demo-section-blog --filter=docs",
+    "build:core": "turbo run build --filter=section-blog-theme",
+    "build": "turbo run build --filter=section-blog-theme --filter=demo-section-blog ",
     "dev": "turbo run dev --filter=section-blog-theme --filter=demo-section-blog ",
     "clean": "turbo run clean",
-    "build:all": "turbo run build",
+    "build:all": "turbo run build --filter=section-blog-theme --filter=demo-section-blog --filter=docs",
     "dev:docs": "turbo run dev --filter=docs",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "release": "changeset publish "
   },
   "devDependencies": {
-    "@turbo/gen": "^1.11.2",
-    "eslint": "^8.55.0",
+    "@turbo/gen": "^1.11.3",
+    "eslint": "^8.56.0",
     "prettier": "^3.1.1",
-    "turbo": "^1.11.2"
+    "turbo": "^1.11.3"
   },
   "packageManager": "[email protected]",
   "dependencies": {
     "@changesets/cli": "^2.27.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "semver@<5.7.2": ">=5.7.2",
+      "semver@>=6.0.0 <6.3.1": ">=6.3.1",
+      "zod@<=3.22.2": ">=3.22.3",
+      "postcss@<8.4.31": ">=8.4.31"
+    }
   }
 }
diff --git a/packages/section-blog-theme/components.json b/packages/section-blog-theme/components.json
@@ -7,10 +7,11 @@
     "config": "tailwind.config.js",
     "css": "./styles/globals.css",
     "baseColor": "slate",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": "nx-"
   },
   "aliases": {
     "components": "@/components/",
     "utils": "@/utility/utils"
   }
-}
+}
diff --git a/packages/section-blog-theme/components/Article/Article.tsx b/packages/section-blog-theme/components/Article/Article.tsx
@@ -10,7 +10,7 @@ export function Article({ className, children }: ArticleProps) {
   return (
     <article
       className={cn(
-        "mt-5 px-5 sm:px-0 mb-20 prose dark:prose-p:text-white prose-img:mx-auto prose-pre:bg-primary-foreground prose-slate sm:prose-sm md:prose-base lg:prose-lg xl:prose-xl 2xl:prose-1xl dark:prose-invert mx-auto",
+        "max-w-none nx-mt-5 nx-px-5 sm:nx-px-0 nx-mb-20 nx-format nx-format-section nx-format-img:nx-mx-auto sm:nx-format-sm md:nx-format-base lg:nx-format-lg xl:nx-format-2xl 2xl:nx-format-2xl nx-mx-auto",
         className,
       )}
     >

diff --git a/packages/section-blog-theme/components/Banner/Banner.tsx b/packages/section-blog-theme/components/Banner/Banner.tsx
@@ -8,22 +8,22 @@ export function Banner({
   hideBanner: () => void;
 }) {
   return (
-    <div className="print:hidden flex flex-row justify-around bg-primary/80 text-primary-foreground px-4 py-3 sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:px-8">
+    <div className="print:nx-hidden nx-flex nx-flex-row nx-justify-around nx-bg-primary/80 nx-text-primary-foreground nx-px-4 nx-py-3 sm:nx-flex-nowrap sm:items-center sm:nx-justify-center sm:nx-gap-3 sm:nx-pr-8 md:nx-px-8">
       {/* Message */}
       <div
-        className="text-primary-foreground order-1 mb-2 inline-block w-11/12 text-sm sm:order-none sm:mb-0 sm:w-auto md:text-base"
+        className="nx-text-primary-foreground nx-order-1 nx-mb-2 nx-inline-block nx-w-11/12 nx-text-sm sm:nx-order-none sm:nx-mb-0 sm:nx-w-auto md:nx-text-base"
         dangerouslySetInnerHTML={{
           __html: message,
         }}
       ></div>
 
       {/* Exit Button */}
-      <div className="order-2 flex w-1/12 items-start justify-end sm:absolute sm:right-0 sm:order-none sm:mr-1 sm:w-auto xl:mr-3">
+      <div className="nx-order-2 nx-flex nx-w-1/12 nx-items-start nx-justify-end sm:nx-absolute sm:nx-right-0 sm:nx-order-none sm:nx-mr-1 sm:nx-w-auto xl:nx-mr-3">
         <button
           aria-label="close banner"
           onClick={hideBanner}
           type="button"
-          className=" text-primary-foreground transition duration-100"
+          className="nx-text-primary-foreground nx-transition nx-duration-100"
         >
           <X width={20} height={20} />
         </button>

diff --git a/packages/section-blog-theme/components/Card/Card.tsx b/packages/section-blog-theme/components/Card/Card.tsx
@@ -3,43 +3,31 @@ import type { authorType } from "@/src/types";
 import { Button } from "@/components/ui/button";
 import { CardContent, Card, CardFooter } from "@/components/ui/card";
 
-export function ArticleCard({
-  title,
-  description,
-  date,
-  URL,
-  author,
-}: {
-  title: string;
-  description: string;
-  date: string;
-  URL: string;
-  author?: string | authorType;
-}) {
+export function ArticleCard({ title, description, date, URL, author }: { title: string; description: string; date: string; URL: string; author?: string | authorType; }) {
   return (
-    <Card className="mb-10 p-2 sm:p-4  w-fill sm:w-6/6 md:w-5/6 lg:w-4/6  mx-auto shadow-sm">
-      <CardContent className="p-2 md:p-6">
-        <h2 className="text-2xl mb-1 leading-8 font-bold sm:text-3xl">
+    <Card className="nx-mb-10 nx-p-2 sm:nx-p-4 nx-w-fill sm:nx-w-6/6 md:nx-w-5/6 lg:nx-w-4/6 nx-mx-auto nx-shadow-sm">
+      <CardContent className="nx-p-2 md:nx-p-6">
+        <h2 className="nx-text-2xl nx-mb-1 nx-leading-8 nx-font-bold sm:nx-text-3xl">
           {title}
         </h2>
         {typeof author === "string" ? (
-          <time className="text-sm" dateTime={date} title={date}>
+          <time className="nx-text-sm" dateTime={date} title={date}>
             Published By {author} on {date}
           </time>
         ) : typeof author === "object" ? (
-          <time className="text-sm" dateTime={date} title={date}>
+          <time className="nx-text-sm" dateTime={date} title={date}>
             Published By {author.name} on {date}
           </time>
         ) : (
           ""
         )}
 
-        <p className="mt-2">{description}</p>
+        <p className="nx-mt-2">{description}</p>
       </CardContent>
 
-      <CardFooter className="px-2 pt-2 md:pt-0 pb-6 md:px-6 md:pb-6">
-        <Link className="block" href={URL}>
-          <Button className="" variant="outline">
+      <CardFooter className="nx-px-2 nx-pt-2 md:nx-pt-0 nx-pb-6 md:nx-px-6 md:nx-pb-6">
+        <Link className="nx-block" href={URL}>
+          <Button variant="outline">
             Read More
           </Button>
         </Link>

diff --git a/packages/section-blog-theme/components/Command/Command.tsx b/packages/section-blog-theme/components/Command/Command.tsx
@@ -1,20 +1,7 @@
 import * as React from "react";
 import { CommandIcon, TextIcon } from "lucide-react";
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandGroup,
-} from "@/components/ui/command";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList, CommandSeparator } from "@/components/ui/command";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/router";
 import { useFetch } from "usehooks-ts";
@@ -55,13 +42,8 @@ export function SearchCommandDialog() {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button
-              aria-label="Search article"
-              variant="secondary"
-              size={"icon"}
-              onClick={() => setOpen(!open)}
-            >
-              <CommandIcon className="h-5 w-5" />
+            <Button aria-label="Search article" variant={"ghost"} size={"icon"} onClick={() => setOpen(!open)}>
+              <CommandIcon className="nx-h-5 nx-w-5" />
             </Button>
           </TooltipTrigger>
 
@@ -72,9 +54,9 @@ export function SearchCommandDialog() {
       </TooltipProvider>
 
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder={" Search here..."} />
+        <CommandInput placeholder={"Search here..."} />
 
-        <CommandList>
+        <CommandList className="mx-2">
           <CommandEmpty> No results found.</CommandEmpty>
           {data &&
             Object.entries(data).map(([key, value]) => {
@@ -85,14 +67,13 @@ export function SearchCommandDialog() {
               if (value.data) {
                 return (
                   <SubCommandItem
-                    className="border-l-2 ml-3  my-2 "
+                    className="nx-ml-3 nx-my-2 "
                     key={key + value.title}
                     value={value.title}
                   >
-                    <div className="flex w-fill flex-row items-center justify-around">
-                      <TextIcon className="h-5 w-5 mr-2" />
-
-                      <Link className="block text-sm" href={key}>
+                    <div className="nx-flex nx-w-fill nx-flex-row nx-items-center nx-justify-around">
+                      <TextIcon className="nx-h-5 nx-w-5 nx-mr-2" />
+                      <Link className="nx-block nx-text-sm" href={key}>
                         {value.title}
                       </Link>
                     </div>

diff --git a/packages/section-blog-theme/components/Footer/Footer.tsx b/packages/section-blog-theme/components/Footer/Footer.tsx
@@ -18,17 +18,17 @@ export function Footer({
   socialLinks: SocialLinks[];
 }) {
   return (
-    <footer className="print:hidden container flex flex-wrap flex-row item-center justify-center my-5 p-5 mx-auto lg:flex-row divide-gray-400">
+    <footer className="print:nx-hidden nx-container nx-flex nx-flex-wrap nx-flex-row nx-item-center nx-justify-center nx-my-5 nx-p-5 nx-mx-auto lg:nx-flex-row nx-divide-gray-400">
       <Link
         aria-label="brand logo"
         target={Logo.target ? Logo.target : "_blank"}
         href={Logo.link ? Logo.link : "/"}
-        className="flex flex-row items-center justify-between text-black dark:text-white"
+        className="nx-flex nx-flex-row nx-items-center nx-justify-between"
       >
         {renderComponent(Logo.logo)}
       </Link>
 
-      <NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
+      <NavigationMenu className="nx-my-3 nx-flex nx-flex-wrap nx-justify-between nx-items-center nx-mx-auto md:nx-my-0">
         <NavigationMenuList>
           {SecondaryNavigation.map((navigation: Navigation) => {
             return (
@@ -38,7 +38,7 @@ export function Footer({
         </NavigationMenuList>
       </NavigationMenu>
 
-      <div className="flex flex-row justify-between gap-2 items-center">
+      <div className="nx-flex nx-flex-row nx-justify-between nx-gap-2 nx-items-center">
         {socialLinks &&
           socialLinks?.map((link) => (
             <SocialLink key={link.name} socialLink={link} />

diff --git a/packages/section-blog-theme/components/Header/Header.tsx b/packages/section-blog-theme/components/Header/Header.tsx
@@ -21,18 +21,18 @@ export function Header({
   socialLinks: SocialLinks[];
 }) {
   return (
-    <header className="container print:hidden mt-3 px-4 lg:px-6 py-8 flex gap-y-5 justify-center flex-col sm:flex-row md:justify-between items-center mx-auto">
+    <header className="nx-container print:nx-hidden nx-mt-3 nx-px-4 lg:nx-px-6 nx-py-8 nx-flex nx-gap-y-5 nx-justify-center nx-flex-col sm:nx-flex-row md:nx-justify-between nx-items-center nx-mx-auto">
       <Link
         aria-label="brand logo"
         target={Logo.target ? Logo.target : "_blank"}
         href={Logo.link ? Logo.link : "/"}
-        className="flex flex-row items-center justify-between text-black dark:text-white"
+        className="nx-flex nx-flex-row nx-items-center nx-justify-between"
       >
         {renderComponent(Logo.logo)}
       </Link>
 
-      <NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
-        <NavigationMenuList className="flex-wrap sm:fle-row">
+      <NavigationMenu className="nx-my-3 nx-flex nx-flex-wrap nx-justify-between nx-items-center nx-mx-auto md:nx-my-0">
+        <NavigationMenuList className="nx-flex-wrap sm:nx-fle-row">
           {PrimaryNavigation.map((navigation: Navigation) => {
             if (navigation.subNav === true) {
               return (
@@ -54,7 +54,7 @@ export function Header({
         </NavigationMenuList>
       </NavigationMenu>
 
-      <div className="flex flex-row justify-between gap-2 items-center">
+      <div className="nx-flex nx-flex-row nx-justify-between nx-gap-2 nx-items-center">
         <SearchCommandDialog />
 
         <ThemeToggle />

diff --git a/packages/section-blog-theme/components/Header/ThemeToggle.tsx b/packages/section-blog-theme/components/Header/ThemeToggle.tsx
@@ -1,22 +1,19 @@
+import { useTheme } from "next-themes"
 import { SunIcon, MoonIcon } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 
 export function ThemeToggle() {
-  const { setTheme } = useTheme();
+
+  const { setTheme } = useTheme()
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="secondary" className="ml-1" size="icon">
-          <SunIcon className="h-5 w-5  rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className=" h-5 w-5 absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
+        <Button variant="ghost" size="icon">
+          <SunIcon className="nx-h-[1.2rem] nx-w-[1.2rem] nx-rotate-0 nx-scale-100 nx-transition-all dark:nx-rotate-90 dark:nx-scale-0" />
+          <MoonIcon className="nx-absolute nx-h-[1.2rem] nx-w-[1.2rem] nx-rotate-90 nx-scale-0 nx-transition-all dark:nx-rotate-0 dark:nx-scale-100" />
+          <span className="nx-sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -31,5 +28,5 @@ export function ThemeToggle() {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
-}
+  )
+}
diff --git a/packages/section-blog-theme/components/Layouts/404.tsx b/packages/section-blog-theme/components/Layouts/404.tsx
@@ -9,25 +9,25 @@ export function Error404() {
         description="Something went wrong, sorry, we couldn't find this page."
         noindex={true}
       />
-      <section className="flex items-center h-full p-16">
-        <div className="container flex flex-col items-center justify-center px-5 mx-auto my-8">
-          <div className="max-w-md text-center">
-            <h2 className="mb-8 font-extrabold text-9xl ">
-              <span className="sr-only">Error</span>404
+      <section className="nx-flex nx-items-center nx-h-full nx-p-16">
+        <div className="nx-container nx-flex nx-flex-col nx-items-center nx-justify-center nx-px-5 nx-mx-auto nx-my-8">
+          <div className="nx-max-w-md nx-text-center">
+            <h2 className="nx-mb-8 nx-font-extrabold nx-text-9xl ">
+              <span className="nx-sr-only">Error</span>404
             </h2>
 
-            <p className="text-2xl font-semibold md:text-3xl">
+            <p className="nx-text-2xl nx-font-semibold md:nx-text-3xl">
               Sorry, we couldn't find this page.
             </p>
 
-            <p className="mt-4 mb-8 ">
+            <p className="nx-mt-4 nx-mb-8 ">
               But dont worry, you can find plenty of other things on our
               homepage.
             </p>
 
             <Link
               href="/"
-              className="px-8 py-3 font-semibold rounded dark:bg-violet-400 dark:text-gray-900"
+              className="nx-px-8 nx-py-3 nx-font-semibold nx-rounded dark:nx-bg-violet-400 dark:nx-text-gray-900"
             >
               Back to homepage
             </Link>

diff --git a/packages/section-blog-theme/components/Layouts/500.tsx b/packages/section-blog-theme/components/Layouts/500.tsx
@@ -9,25 +9,25 @@ export function Error500() {
         description="Something went wrong, sorry, we couldn't find this page."
         noindex={true}
       />
-      <section className="flex items-center h-full p-16 ">
-        <div className="container flex flex-col items-center justify-center px-5 mx-auto my-8">
-          <div className="max-w-md text-center">
-            <h2 className="mb-8 font-extrabold text-9xl ">
-              <span className="sr-only">Error</span>500
+      <section className="nx-flex nx-items-center nx-h-full nx-p-16">
+        <div className="nx-container nx-flex nx-flex-col nx-items-center nx-justify-center nx-px-5 nx-mx-auto nx-my-8">
+          <div className="nx-max-w-md nx-text-center">
+            <h2 className="nx-mb-8 nx-font-extrabold nx-text-9xl ">
+              <span className="nx-sr-only">Error</span>500
             </h2>
 
-            <p className="text-2xl font-semibold md:text-3xl">
+            <p className="nx-text-2xl nx-font-semibold md:nx-text-3xl">
               Sorry, we couldn't find this page.
             </p>
 
-            <p className="mt-4 mb-8 ">
+            <p className="nx-mt-4 nx-mb-8 ">
               But dont worry, you can find plenty of other things on our
               homepage.
             </p>
 
             <Link
               href="/"
-              className="px-8 py-3 font-semibold rounded dark:bg-violet-400 dark:text-gray-900"
+              className="nx-px-8 nx-py-3 nx-font-semibold nx-rounded dark:nx-bg-violet-400 dark:nx-text-gray-900"
             >
               Back to homepage
             </Link>