From 4870609a01e8ce8543b076144f1313d98f4d597a Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 20 Dec 2023 15:01:13 +0430 Subject: [PATCH 1/2] update the packages --- docs-content/html/releases.ts | 16 ++++++++++++++++ docs-content/react/releases.ts | 15 +++++++++++++++ documentation/react/release-notes.mdx | 1 + package.json | 5 ++++- 4 files changed, 36 insertions(+), 1 deletion(-) diff --git a/docs-content/html/releases.ts b/docs-content/html/releases.ts index e26f07823..b13acf5b1 100644 --- a/docs-content/html/releases.ts +++ b/docs-content/html/releases.ts @@ -1,4 +1,20 @@ export const releases = [ + { + version: "2.1.2", + date: "December 20, 2023", + name: "@material-tailwind/html", + description: "Material Tailwind v2.1.2", + content: [ + { + title: "docs changes", + data: [ + "New components: Skeleton, Gallery, Mega Menu", + "New plugins integration: Tiptap Rich Text Editor, Copy to Clipboard", + "New framework integration guides.", + ], + }, + ], + }, { version: "2.1.1", date: "December 13, 2023", diff --git a/docs-content/react/releases.ts b/docs-content/react/releases.ts index 1571ca273..0e17be1b3 100644 --- a/docs-content/react/releases.ts +++ b/docs-content/react/releases.ts @@ -1,4 +1,19 @@ export const releases = [ + { + version: "2.1.8", + date: "December 20, 2023", + name: "@material-tailwind/react", + description: "Material Tailwind v2.1.8", + content: [ + { + title: "docs changes", + data: [ + "New components: Skeleton, Gallery, Mega Menu", + "New plugins integration: Lexical Rich Text Editor, Copy to Clipboard", + ], + }, + ], + }, { version: "2.1.7", date: "December 14, 2023", diff --git a/documentation/react/release-notes.mdx b/documentation/react/release-notes.mdx index ebb451b5e..57768333e 100644 --- a/documentation/react/release-notes.mdx +++ b/documentation/react/release-notes.mdx @@ -2,6 +2,7 @@ title: Release Notes - Material Tailwind description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. navigation: [ + "v2.1.8", "v2.1.7", "v2.1.6", "v2.1.5", diff --git a/package.json b/package.json index 8e761e2b2..8ac51a118 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "framer-motion": "6.5.1", "gray-matter": "4.0.3", "js-cookie": "3.0.5", + "keymap": "link:@tiptap/pm/keymap", "lexical": "0.12.5", "material-ripple-effects": "2.0.1", "mdx-observable": "0.2.0", @@ -74,11 +75,13 @@ "remark-gfm": "3.0.1", "remark-mdx": "2.3.0", "shiki": "0.11.1", + "state": "link:@tiptap/pm/state", "tailwind-merge": "1.8.1", "un": "0.0.0", "use-react-countries": "1.1.0", "usehooks-ts": "2.9.1", - "uuid": "9.0.0" + "uuid": "9.0.0", + "view": "link:@tiptap/pm/view" }, "devDependencies": { "@types/js-cookie": "3.0.6", From 80dfa2d678d48546f971b2a85515fb6e97e896ac Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 20 Dec 2023 15:07:14 +0430 Subject: [PATCH 2/2] update the navbar --- pages/docs/[...slug].tsx | 759 +++++++++++++++++++++++++------------- widgets/layout/navbar.tsx | 201 ++++++---- 2 files changed, 633 insertions(+), 327 deletions(-) diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx index db6a9aa6a..911f51645 100644 --- a/pages/docs/[...slug].tsx +++ b/pages/docs/[...slug].tsx @@ -1,279 +1,532 @@ import React from "react"; +import Head from "next/head"; import Link from "next/link"; +import Image from "next/image"; +import { useRouter } from "next/router"; + +// mdx +import fs from "fs"; +import matter from "gray-matter"; +import remarkGfm from "remark-gfm"; +import { MDXRemote } from "next-mdx-remote"; +import rehypePrettyCode from "rehype-pretty-code"; +import { serialize } from "next-mdx-remote/serialize"; + +// @widgets import { - Navbar as Navbar, - Collapse, - IconButton, + DocsNavbar, + Footer, + Sidenav, + PageMap, + Code, + FrameworkCard, + CraLogo, + NextLogo, + RemixLogo, + ViteLogo, + AstroLogo, + GatsbyLogo, + CodePreview, + DocsTitle, + ColorPalette, +} from "@widgets"; + +// docs-content +import * as AccordionExamples from "docs-content/react/accordion"; +import * as AlertExamples from "docs-content/react/alert"; +import * as AvatarExamples from "docs-content/react/avatar"; +import * as BadgeExamples from "docs-content/react/badge"; +import * as BreadcrumbsExamples from "docs-content/react/breadcrumbs"; +import * as ButtonGroupExamples from "docs-content/react/button-group"; +import * as ButtonExamples from "docs-content/react/button"; +import * as CardExamples from "docs-content/react/card"; +import * as CarouselExamples from "docs-content/react/carousel"; +import * as CheckboxExamples from "docs-content/react/checkbox"; +import * as ChipExamples from "docs-content/react/chip"; +import * as CollapseExamples from "docs-content/react/collapse"; +import * as DialogExamples from "docs-content/react/dialog"; +import * as DrawerExamples from "docs-content/react/drawer"; +import * as NavbarExamples from "docs-content/react/navbar"; +import * as FooterExamples from "docs-content/react/footer"; +import * as ImgExamples from "docs-content/react/img"; +import * as VideoExamples from "docs-content/react/video"; +import * as TableExamples from "docs-content/react/table"; +import * as PaginationExamples from "docs-content/react/pagination"; +import * as SidebarExamples from "docs-content/react/sidebar"; +import * as FormExamples from "docs-content/react/form"; +import * as IconButtonExamples from "docs-content/react/icon-button"; +import * as InputExamples from "docs-content/react/input"; +import * as ListExamples from "docs-content/react/list"; +import * as TypographyExamples from "docs-content/react/typography"; +import * as MenuExamples from "docs-content/react/menu"; +import * as RatingExamples from "docs-content/react/rating"; +import * as PopoverExamples from "docs-content/react/popover"; +import * as ProgressExamples from "docs-content/react/progress"; +import * as RadioExamples from "docs-content/react/radio"; +import * as SliderExamples from "docs-content/react/slider"; +import * as SelectExamples from "docs-content/react/select"; +import * as SpeedDialExamples from "docs-content/react/speed-dial"; +import * as SpinnerExamples from "docs-content/react/spinner"; +import * as StepperExamples from "docs-content/react/stepper"; +import * as TimelineExamples from "docs-content/react/timeline"; +import * as TooltipExamples from "docs-content/react/tooltip"; +import * as SwitchExamples from "docs-content/react/switch"; +import * as TabsExamples from "docs-content/react/tabs"; +import * as TextareaExamples from "docs-content/react/textarea"; +import * as Plugins from "docs-content/react/plugins"; +import ReleaseNotes from "docs-content/react/release-notes"; +import * as FrameworkIcons from "@widgets"; +import * as SkeletonExamples from "docs-content/react/skeleton"; +import * as GalleryExamples from "docs-content/react/gallery"; +import * as MegaMenuExamples from "docs-content/react/mega-menu"; + +// html docs content +import * as HtmlPlugins from "docs-content/html/plugins"; +import * as HTMLButtonExamples from "docs-content/html/button"; +import * as HTMLAccordianExamples from "docs-content/html/accordion"; +import * as HTMLAlertExamples from "docs-content/html/alert"; +import * as HTMLAvatarExamples from "docs-content/html/avatar"; +import * as HTMLBadgeExamples from "docs-content/html/badge"; +import * as HTMLBreadcrumbsExamples from "docs-content/html/breadcrumbs"; +import * as HTMLButtonGroupExamples from "docs-content/html/button-group"; +import * as HTMLCardExamples from "docs-content/html/card"; +import * as HTMLCheckboxExamples from "docs-content/html/checkbox"; +import * as HTMLChipExamples from "docs-content/html/chip"; +import * as HTMLDialogExamples from "docs-content/html/dialog"; +import * as HTMLIconButtonExamples from "docs-content/html/icon-button"; +import * as HTMLInputExamples from "docs-content/html/input"; +import * as HTMLFormExamples from "docs-content/html/form"; +import * as HTMLListExamples from "docs-content/html/list"; +import * as HTMLMenuExamples from "docs-content/html/menu"; +import * as HTMLNavbarExamples from "docs-content/html/navbar"; +import * as HTMLPaginationExamples from "docs-content/html/pagination"; +import * as HTMLPopoverExamples from "docs-content/html/popover"; +import * as HTMLProgressExamples from "docs-content/html/progress"; +import * as HTMLRadioExamples from "docs-content/html/radio"; +import * as HTMLRatingExamples from "docs-content/html/rating"; +import * as HTMLSelectExamples from "docs-content/html/select"; +import * as HTMLSpeedDialExamples from "docs-content/html/speed-dial"; +import * as HTMLSpinnerExamples from "docs-content/html/spinner"; +import * as HTMLStepperExamples from "docs-content/html/stepper"; +import * as HTMLSwitchExamples from "docs-content/html/switch"; +import * as HTMLTabsExamples from "docs-content/html/tabs"; +import * as HTMLTextareaExamples from "docs-content/html/textarea"; +import * as HTMLTimelineExamples from "docs-content/html/timeline"; +import * as HTMLTooltipExamples from "docs-content/html/tooltip"; +import * as HTMLTypographyExamples from "docs-content/html/typography"; +import * as HTMLFooterExamples from "docs-content/html/footer"; +import * as HTMLImageExamples from "docs-content/html/img"; +import * as HTMLTableExamples from "docs-content/html/table"; +import * as HTMLVideoExamples from "docs-content/html/video"; +import * as HTMLSidebarExamples from "docs-content/html/sidebar"; +import { ReleaseNotes as HTMLReleaseNotes } from "docs-content/html/release-notes"; +import * as HTMLGalleryExamples from "docs-content/html/gallery"; +import * as HTMLSkeletonExamples from "docs-content/html/skeleton"; +import * as HTMLMegaMenuExamples from "docs-content/html/mega-menu"; + +// @material-tailwind/react +import { + Accordion, + AccordionHeader, + AccordionBody, + Alert, + Avatar, + Breadcrumbs, + Button, + Card, + CardHeader, + CardBody, + CardFooter, + Checkbox, Chip, + Dialog, + DialogHeader, + DialogBody, + DialogFooter, + IconButton, + Input, + Menu, + MenuHandler, + MenuList, + MenuItem, + MobileNav, + Navbar, + Option, + Popover, + PopoverHandler, + PopoverContent, + Progress, + Radio, + Select, + Switch, + Tabs, + TabsHeader, + TabsBody, + Tab, + TabPanel, + Textarea, + Tooltip, Typography, + ButtonGroup, + Carousel, List, ListItem, - Tooltip, - Input, - Button, + ListItemPrefix, + ListItemSuffix, + Collapse, + Slider, } from "@material-tailwind/react"; -import { Logo, Search } from "@widgets"; -import { formatNumber } from "@utils"; -import { usePathname } from "next/navigation"; -interface DocsNavbar { - slug: string[]; - setMobileNav: React.Dispatch>; -} +// routes +import { routes as htmlRoutes } from "routes/html.routes"; +import { routes as reactRoutes } from "routes/react.routes"; -function NavItem({ - children, - href, -}: { - children: React.ReactNode; - href?: string; -}) { - const LinkEl = href ? Link : "span"; +// utils +import filterArray from "utils/filter-array"; +import { rehypePrettyCodeConfig } from "@utils"; +import getDirectoriesAndFile from "utils/get-directories-and-files"; - return ( - - - {children} - - - ); -} +// material tailwind html script +import initHtmlScripts from "public/material-tailwind-html-v2"; +import OfferBar from "widgets/offer-bar"; + +const components = { + h1: (props) => ( + + ), + h2: (props) => ( + + ), + h3: (props) => ( + + ), + h6: (props) => ( + + ), + p: (props) => ( + + ), + hr: () =>
, + a: (props) => ( + + ), + table: (props) => ( +
+ + + ), + thead: (props) => , + tbody: (props) => , + tr: (props) => , + th: (props) => ( +
+ ), + td: (props) => ( + + ), + Accordion, + AccordionHeader, + AccordionBody, + Alert, + Avatar, + Breadcrumbs, + Button, + Card, + CardHeader, + CardBody, + CardFooter, + Checkbox, + Chip, + Dialog, + DialogHeader, + DialogBody, + DialogFooter, + IconButton, + Input, + Menu, + MenuHandler, + MenuList, + MenuItem, + MobileNav, + Navbar, + Option, + Popover, + PopoverHandler, + PopoverContent, + Progress, + Radio, + Select, + Switch, + Tabs, + TabsHeader, + TabsBody, + Tab, + TabPanel, + Textarea, + Tooltip, + Typography, + ButtonGroup, + Carousel, + List, + ListItem, + ListItemPrefix, + ListItemSuffix, + Collapse, + Slider, + Image, + Code, + FrameworkCard, + CraLogo, + NextLogo, + RemixLogo, + ViteLogo, + AstroLogo, + GatsbyLogo, + CodePreview, + DocsTitle, + Link, + AccordionExamples, + AlertExamples, + AvatarExamples, + BadgeExamples, + BreadcrumbsExamples, + ButtonGroupExamples, + ButtonExamples, + CardExamples, + CarouselExamples, + CheckboxExamples, + ChipExamples, + CollapseExamples, + DrawerExamples, + PaginationExamples, + NavbarExamples, + ImgExamples, + VideoExamples, + SidebarExamples, + TableExamples, + DialogExamples, + FooterExamples, + FormExamples, + IconButtonExamples, + InputExamples, + ListExamples, + TypographyExamples, + MenuExamples, + RatingExamples, + PopoverExamples, + ProgressExamples, + RadioExamples, + SelectExamples, + SliderExamples, + SpeedDialExamples, + SpinnerExamples, + StepperExamples, + TimelineExamples, + TooltipExamples, + SwitchExamples, + TabsExamples, + TextareaExamples, + ReleaseNotes, + ColorPalette, + Plugins, + SkeletonExamples, + GalleryExamples, + MegaMenuExamples, -export function DocsNavbar({ slug, setMobileNav }: DocsNavbar) { - const [stars, setStars] = React.useState(0); - const [open, setOpen] = React.useState(false); - const pathname = usePathname(); + // html docs content + HtmlPlugins, + HTMLButtonExamples, + HTMLAccordianExamples, + HTMLAlertExamples, + HTMLAvatarExamples, + HTMLBadgeExamples, + HTMLBreadcrumbsExamples, + HTMLButtonGroupExamples, + HTMLCardExamples, + HTMLCheckboxExamples, + HTMLChipExamples, + HTMLDialogExamples, + HTMLIconButtonExamples, + HTMLInputExamples, + HTMLFormExamples, + HTMLListExamples, + HTMLMenuExamples, + HTMLNavbarExamples, + HTMLPaginationExamples, + HTMLPopoverExamples, + HTMLProgressExamples, + HTMLRadioExamples, + HTMLRatingExamples, + HTMLSelectExamples, + HTMLSpeedDialExamples, + HTMLSpinnerExamples, + HTMLStepperExamples, + HTMLSwitchExamples, + HTMLTabsExamples, + HTMLTextareaExamples, + HTMLTimelineExamples, + HTMLTooltipExamples, + HTMLTypographyExamples, + HTMLFooterExamples, + HTMLImageExamples, + HTMLTableExamples, + HTMLVideoExamples, + HTMLSidebarExamples, + HTMLReleaseNotes, + FrameworkIcons, + HTMLGalleryExamples, + HTMLSkeletonExamples, + HTMLMegaMenuExamples, +}; - React.useEffect(() => { - window.addEventListener("resize", () => { - window.innerWidth >= 960 && setOpen(false); - }); - }, []); +export default function Page({ frontMatter, mdxSource, slug }) { + const { asPath } = useRouter(); + const [mobileNav, setMobileNav] = React.useState(false); + + const routes = { + html: htmlRoutes, + react: reactRoutes, + }; + const validFrameworks = ["html", "react"]; + const frameworkType = asPath + .split("/") + .filter((el) => validFrameworks.includes(el)) + .join("") as "html" | "react"; React.useEffect(() => { - const stars = fetch( - "https://api.github.com/repos/creativetimofficial/material-tailwind", - ) - .then((response) => response.json()) - .then((data) => setStars(formatNumber(data.stargazers_count, 1))); - }, []); + if (frameworkType === "html" && typeof window !== "undefined") { + initHtmlScripts(); + } + }, [frameworkType, slug]); - const menuOpenIcon = ( - - - - ); + const replaceMatch = [ + "html/what-is-tailwind-css", + "html/license", + "html/colors", + "html/fonts", + "html/shadows", + "html/screens", + ]; + const headLink = slug.join("/"); + const matchTheSlug = replaceMatch.includes(headLink); + const canonical = matchTheSlug + ? headLink.replace("html/", "react/") + : headLink; - const menuCloseIcon = ( - - - - ); + return ( + <> + + {frontMatter.title} + + + + - const navbarMenu = ( -
- - Docs - Blocks - Figma - Book - Blog - -
-
- -
- - - ⌘ - - K - -
- +