Skip to content

Commit 2484348

Browse files
officialrajdeepsinghofficialrajdeepsingh
committed
Merge branch 'canary'
adding tailwind css prefix support
2 parents 9087285 + ba04e83 commit 2484348

File tree

26 files changed

+1223
-1256
lines changed

26 files changed

+1223
-1256
lines changed

‎docs/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"@tabler/icons-react": "^2.44.0",
14-
"@types/node": "20.10.4",
15-
"@types/react": "18.2.45",
16-
"@types/react-dom": "18.2.17",
13+
"@tabler/icons-react": "^2.45.0",
14+
"@types/node": "20.11.0",
15+
"@types/react": "18.2.47",
16+
"@types/react-dom": "18.2.18",
1717
"next": "14.0.4",
1818
"nextra": "^2.13.2",
1919
"nextra-theme-docs": "^2.13.2",

‎package.json

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
11
{
22
"name": "section-theme-blog",
33
"scripts": {
4-
"build": "turbo run build --filter=section-blog-theme --filter=demo-section-blog --filter=docs",
4+
"build:core": "turbo run build --filter=section-blog-theme",
5+
"build": "turbo run build --filter=section-blog-theme --filter=demo-section-blog ",
56
"dev": "turbo run dev --filter=section-blog-theme --filter=demo-section-blog ",
67
"clean": "turbo run clean",
7-
"build:all": "turbo run build",
8+
"build:all": "turbo run build --filter=section-blog-theme --filter=demo-section-blog --filter=docs",
89
"dev:docs": "turbo run dev --filter=docs",
910
"lint": "turbo run lint",
1011
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
1112
"release": "changeset publish "
1213
},
1314
"devDependencies": {
14-
"@turbo/gen": "^1.11.2",
15-
"eslint": "^8.55.0",
15+
"@turbo/gen": "^1.11.3",
16+
"eslint": "^8.56.0",
1617
"prettier": "^3.1.1",
17-
"turbo": "^1.11.2"
18+
"turbo": "^1.11.3"
1819
},
1920
"packageManager": "pnpm@8.6.9",
2021
"dependencies": {
2122
"@changesets/cli": "^2.27.1"
23+
},
24+
"pnpm": {
25+
"overrides": {
26+
"semver@<5.7.2": ">=5.7.2",
27+
"semver@>=6.0.0 <6.3.1": ">=6.3.1",
28+
"zod@<=3.22.2": ">=3.22.3",
29+
"postcss@<8.4.31": ">=8.4.31"
30+
}
2231
}
2332
}

‎packages/section-blog-theme/components.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@
77
"config": "tailwind.config.js",
88
"css": "./styles/globals.css",
99
"baseColor": "slate",
10-
"cssVariables": true
10+
"cssVariables": true,
11+
"prefix": "nx-"
1112
},
1213
"aliases": {
1314
"components": "@/components/",
1415
"utils": "@/utility/utils"
1516
}
16-
}
17+
}

‎packages/section-blog-theme/components/Article/Article.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function Article({ className, children }: ArticleProps) {
1010
return (
1111
<article
1212
className={cn(
13-
"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",
13+
"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",
1414
className,
1515
)}
1616
>

‎packages/section-blog-theme/components/Banner/Banner.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ export function Banner({
88
hideBanner: () => void;
99
}) {
1010
return (
11-
<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">
11+
<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">
1212
{/* Message */}
1313
<div
14-
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"
14+
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"
1515
dangerouslySetInnerHTML={{
1616
__html: message,
1717
}}
1818
></div>
1919

2020
{/* Exit Button */}
21-
<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">
21+
<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">
2222
<button
2323
aria-label="close banner"
2424
onClick={hideBanner}
2525
type="button"
26-
className=" text-primary-foreground transition duration-100"
26+
className="nx-text-primary-foreground nx-transition nx-duration-100"
2727
>
2828
<X width={20} height={20} />
2929
</button>

‎packages/section-blog-theme/components/Card/Card.tsx

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,31 @@ import type { authorType } from "@/src/types";
33
import { Button } from "@/components/ui/button";
44
import { CardContent, Card, CardFooter } from "@/components/ui/card";
55

6-
export function ArticleCard({
7-
title,
8-
description,
9-
date,
10-
URL,
11-
author,
12-
}: {
13-
title: string;
14-
description: string;
15-
date: string;
16-
URL: string;
17-
author?: string | authorType;
18-
}) {
6+
export function ArticleCard({ title, description, date, URL, author }: { title: string; description: string; date: string; URL: string; author?: string | authorType; }) {
197
return (
20-
<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">
21-
<CardContent className="p-2 md:p-6">
22-
<h2 className="text-2xl mb-1 leading-8 font-bold sm:text-3xl">
8+
<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">
9+
<CardContent className="nx-p-2 md:nx-p-6">
10+
<h2 className="nx-text-2xl nx-mb-1 nx-leading-8 nx-font-bold sm:nx-text-3xl">
2311
{title}
2412
</h2>
2513
{typeof author === "string" ? (
26-
<time className="text-sm" dateTime={date} title={date}>
14+
<time className="nx-text-sm" dateTime={date} title={date}>
2715
Published By {author} on {date}
2816
</time>
2917
) : typeof author === "object" ? (
30-
<time className="text-sm" dateTime={date} title={date}>
18+
<time className="nx-text-sm" dateTime={date} title={date}>
3119
Published By {author.name} on {date}
3220
</time>
3321
) : (
3422
""
3523
)}
3624

37-
<p className="mt-2">{description}</p>
25+
<p className="nx-mt-2">{description}</p>
3826
</CardContent>
3927

40-
<CardFooter className="px-2 pt-2 md:pt-0 pb-6 md:px-6 md:pb-6">
41-
<Link className="block" href={URL}>
42-
<Button className="" variant="outline">
28+
<CardFooter className="nx-px-2 nx-pt-2 md:nx-pt-0 nx-pb-6 md:nx-px-6 md:nx-pb-6">
29+
<Link className="nx-block" href={URL}>
30+
<Button variant="outline">
4331
Read More
4432
</Button>
4533
</Link>

‎packages/section-blog-theme/components/Command/Command.tsx

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
import * as React from "react";
22
import { CommandIcon, TextIcon } from "lucide-react";
3-
import {
4-
CommandDialog,
5-
CommandEmpty,
6-
CommandInput,
7-
CommandItem,
8-
CommandList,
9-
CommandSeparator,
10-
CommandGroup,
11-
} from "@/components/ui/command";
12-
import {
13-
Tooltip,
14-
TooltipContent,
15-
TooltipProvider,
16-
TooltipTrigger,
17-
} from "@/components/ui/tooltip";
3+
import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList, CommandSeparator } from "@/components/ui/command";
4+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
185
import { Button } from "@/components/ui/button";
196
import { useRouter } from "next/router";
207
import { useFetch } from "usehooks-ts";
@@ -55,13 +42,8 @@ export function SearchCommandDialog() {
5542
<TooltipProvider>
5643
<Tooltip>
5744
<TooltipTrigger asChild>
58-
<Button
59-
aria-label="Search article"
60-
variant="secondary"
61-
size={"icon"}
62-
onClick={() => setOpen(!open)}
63-
>
64-
<CommandIcon className="h-5 w-5" />
45+
<Button aria-label="Search article" variant={"ghost"} size={"icon"} onClick={() => setOpen(!open)}>
46+
<CommandIcon className="nx-h-5 nx-w-5" />
6547
</Button>
6648
</TooltipTrigger>
6749

@@ -72,9 +54,9 @@ export function SearchCommandDialog() {
7254
</TooltipProvider>
7355

7456
<CommandDialog open={open} onOpenChange={setOpen}>
75-
<CommandInput placeholder={" Search here..."} />
57+
<CommandInput placeholder={"Search here..."} />
7658

77-
<CommandList>
59+
<CommandList className="mx-2">
7860
<CommandEmpty> No results found.</CommandEmpty>
7961
{data &&
8062
Object.entries(data).map(([key, value]) => {
@@ -85,14 +67,13 @@ export function SearchCommandDialog() {
8567
if (value.data) {
8668
return (
8769
<SubCommandItem
88-
className="border-l-2 ml-3 my-2 "
70+
className="nx-ml-3 nx-my-2 "
8971
key={key + value.title}
9072
value={value.title}
9173
>
92-
<div className="flex w-fill flex-row items-center justify-around">
93-
<TextIcon className="h-5 w-5 mr-2" />
94-
95-
<Link className="block text-sm" href={key}>
74+
<div className="nx-flex nx-w-fill nx-flex-row nx-items-center nx-justify-around">
75+
<TextIcon className="nx-h-5 nx-w-5 nx-mr-2" />
76+
<Link className="nx-block nx-text-sm" href={key}>
9677
{value.title}
9778
</Link>
9879
</div>

‎packages/section-blog-theme/components/Footer/Footer.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ export function Footer({
1818
socialLinks: SocialLinks[];
1919
}) {
2020
return (
21-
<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">
21+
<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">
2222
<Link
2323
aria-label="brand logo"
2424
target={Logo.target ? Logo.target : "_blank"}
2525
href={Logo.link ? Logo.link : "/"}
26-
className="flex flex-row items-center justify-between text-black dark:text-white"
26+
className="nx-flex nx-flex-row nx-items-center nx-justify-between"
2727
>
2828
{renderComponent(Logo.logo)}
2929
</Link>
3030

31-
<NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
31+
<NavigationMenu className="nx-my-3 nx-flex nx-flex-wrap nx-justify-between nx-items-center nx-mx-auto md:nx-my-0">
3232
<NavigationMenuList>
3333
{SecondaryNavigation.map((navigation: Navigation) => {
3434
return (
@@ -38,7 +38,7 @@ export function Footer({
3838
</NavigationMenuList>
3939
</NavigationMenu>
4040

41-
<div className="flex flex-row justify-between gap-2 items-center">
41+
<div className="nx-flex nx-flex-row nx-justify-between nx-gap-2 nx-items-center">
4242
{socialLinks &&
4343
socialLinks?.map((link) => (
4444
<SocialLink key={link.name} socialLink={link} />

‎packages/section-blog-theme/components/Header/Header.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,18 @@ export function Header({
2121
socialLinks: SocialLinks[];
2222
}) {
2323
return (
24-
<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">
24+
<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">
2525
<Link
2626
aria-label="brand logo"
2727
target={Logo.target ? Logo.target : "_blank"}
2828
href={Logo.link ? Logo.link : "/"}
29-
className="flex flex-row items-center justify-between text-black dark:text-white"
29+
className="nx-flex nx-flex-row nx-items-center nx-justify-between"
3030
>
3131
{renderComponent(Logo.logo)}
3232
</Link>
3333

34-
<NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
35-
<NavigationMenuList className="flex-wrap sm:fle-row">
34+
<NavigationMenu className="nx-my-3 nx-flex nx-flex-wrap nx-justify-between nx-items-center nx-mx-auto md:nx-my-0">
35+
<NavigationMenuList className="nx-flex-wrap sm:nx-fle-row">
3636
{PrimaryNavigation.map((navigation: Navigation) => {
3737
if (navigation.subNav === true) {
3838
return (
@@ -54,7 +54,7 @@ export function Header({
5454
</NavigationMenuList>
5555
</NavigationMenu>
5656

57-
<div className="flex flex-row justify-between gap-2 items-center">
57+
<div className="nx-flex nx-flex-row nx-justify-between nx-gap-2 nx-items-center">
5858
<SearchCommandDialog />
5959

6060
<ThemeToggle />

‎packages/section-blog-theme/components/Header/ThemeToggle.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1+
import { useTheme } from "next-themes"
12
import { SunIcon, MoonIcon } from "lucide-react";
2-
import { useTheme } from "next-themes";
3-
import { Button } from "@/components/ui/button";
4-
import {
5-
DropdownMenu,
6-
DropdownMenuContent,
7-
DropdownMenuItem,
8-
DropdownMenuTrigger,
9-
} from "@/components/ui/dropdown-menu";
3+
import { Button } from "@/components/ui/button"
4+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
105

116
export function ThemeToggle() {
12-
const { setTheme } = useTheme();
7+
8+
const { setTheme } = useTheme()
9+
1310
return (
1411
<DropdownMenu>
1512
<DropdownMenuTrigger asChild>
16-
<Button variant="secondary" className="ml-1" size="icon">
17-
<SunIcon className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
18-
<MoonIcon className=" h-5 w-5 absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
19-
<span className="sr-only">Toggle theme</span>
13+
<Button variant="ghost" size="icon">
14+
<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" />
15+
<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" />
16+
<span className="nx-sr-only">Toggle theme</span>
2017
</Button>
2118
</DropdownMenuTrigger>
2219
<DropdownMenuContent align="end">
@@ -31,5 +28,5 @@ export function ThemeToggle() {
3128
</DropdownMenuItem>
3229
</DropdownMenuContent>
3330
</DropdownMenu>
34-
);
35-
}
31+
)
32+
}

‎packages/section-blog-theme/components/Layouts/404.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ export function Error404() {
99
description="Something went wrong, sorry, we couldn't find this page."
1010
noindex={true}
1111
/>
12-
<section className="flex items-center h-full p-16">
13-
<div className="container flex flex-col items-center justify-center px-5 mx-auto my-8">
14-
<div className="max-w-md text-center">
15-
<h2 className="mb-8 font-extrabold text-9xl ">
16-
<span className="sr-only">Error</span>404
12+
<section className="nx-flex nx-items-center nx-h-full nx-p-16">
13+
<div className="nx-container nx-flex nx-flex-col nx-items-center nx-justify-center nx-px-5 nx-mx-auto nx-my-8">
14+
<div className="nx-max-w-md nx-text-center">
15+
<h2 className="nx-mb-8 nx-font-extrabold nx-text-9xl ">
16+
<span className="nx-sr-only">Error</span>404
1717
</h2>
1818

19-
<p className="text-2xl font-semibold md:text-3xl">
19+
<p className="nx-text-2xl nx-font-semibold md:nx-text-3xl">
2020
Sorry, we couldn't find this page.
2121
</p>
2222

23-
<p className="mt-4 mb-8 ">
23+
<p className="nx-mt-4 nx-mb-8 ">
2424
But dont worry, you can find plenty of other things on our
2525
homepage.
2626
</p>
2727

2828
<Link
2929
href="/"
30-
className="px-8 py-3 font-semibold rounded dark:bg-violet-400 dark:text-gray-900"
30+
className="nx-px-8 nx-py-3 nx-font-semibold nx-rounded dark:nx-bg-violet-400 dark:nx-text-gray-900"
3131
>
3232
Back to homepage
3333
</Link>

‎packages/section-blog-theme/components/Layouts/500.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ export function Error500() {
99
description="Something went wrong, sorry, we couldn't find this page."
1010
noindex={true}
1111
/>
12-
<section className="flex items-center h-full p-16 ">
13-
<div className="container flex flex-col items-center justify-center px-5 mx-auto my-8">
14-
<div className="max-w-md text-center">
15-
<h2 className="mb-8 font-extrabold text-9xl ">
16-
<span className="sr-only">Error</span>500
12+
<section className="nx-flex nx-items-center nx-h-full nx-p-16">
13+
<div className="nx-container nx-flex nx-flex-col nx-items-center nx-justify-center nx-px-5 nx-mx-auto nx-my-8">
14+
<div className="nx-max-w-md nx-text-center">
15+
<h2 className="nx-mb-8 nx-font-extrabold nx-text-9xl ">
16+
<span className="nx-sr-only">Error</span>500
1717
</h2>
1818

19-
<p className="text-2xl font-semibold md:text-3xl">
19+
<p className="nx-text-2xl nx-font-semibold md:nx-text-3xl">
2020
Sorry, we couldn't find this page.
2121
</p>
2222

23-
<p className="mt-4 mb-8 ">
23+
<p className="nx-mt-4 nx-mb-8 ">
2424
But dont worry, you can find plenty of other things on our
2525
homepage.
2626
</p>
2727

2828
<Link
2929
href="/"
30-
className="px-8 py-3 font-semibold rounded dark:bg-violet-400 dark:text-gray-900"
30+
className="nx-px-8 nx-py-3 nx-font-semibold nx-rounded dark:nx-bg-violet-400 dark:nx-text-gray-900"
3131
>
3232
Back to homepage
3333
</Link>

0 commit comments

Comments
 (0)