From 7f9055f4127abc2945543b81795007d8d66d4791 Mon Sep 17 00:00:00 2001 From: esemyonov <132259164+esemyonov@users.noreply.github.com> Date: Fri, 8 Dec 2023 12:31:48 +0600 Subject: [PATCH] feat: layout template (#277) * Added test doc * updated docs * feat: header template * feat: mobile-header * feat: mobile-header * feat: mobile-header * feat: layout template * feat: layout template * feat: layout template * feat: layout template * feat: layout template * feat: layout template * fix: policy template * fix: layout template * fix: policy template --------- Co-authored-by: Nathan Totten --- package-lock.json | 20 ++++++ package.json | 1 + src/app/favicon.ico | Bin 15406 -> 0 bytes src/app/layout.tsx | 9 ++- src/app/policies/page.tsx | 16 +++-- src/components/DocsContainer.tsx | 16 ++++- src/components/DocsHeader.tsx | 17 +++-- src/components/DocsLayout.tsx | 16 +++-- src/components/Layout.tsx | 74 ++++++++++++---------- src/components/PolicyCard.tsx | 2 +- src/components/PrevNextLinks.tsx | 12 ++-- src/components/Prose.tsx | 14 ++-- src/components/QuickLinks.tsx | 2 +- src/components/Search.tsx | 6 +- src/components/StartFreeCTAButton.tsx | 26 +++----- src/components/TableOfContents.tsx | 2 +- src/components/ThemeSelector.tsx | 20 +++--- src/components/shared/Container.tsx | 26 ++++++++ src/components/shared/article/Rate.tsx | 24 +++++++ src/components/shared/article/Support.tsx | 32 ++++++++++ src/components/svgs/changelog.svg | 6 ++ src/components/svgs/chevron-down.svg | 3 + src/components/svgs/chevron-right.svg | 3 + src/components/svgs/contact.svg | 5 ++ src/components/svgs/dislike.svg | 3 + src/components/svgs/like.svg | 3 + src/styles/tailwind.css | 30 ++++++++- tailwind.config.ts | 57 ++++++++++++++--- 28 files changed, 335 insertions(+), 110 deletions(-) delete mode 100644 src/app/favicon.ico create mode 100644 src/components/shared/Container.tsx create mode 100644 src/components/shared/article/Rate.tsx create mode 100644 src/components/shared/article/Support.tsx create mode 100644 src/components/svgs/changelog.svg create mode 100644 src/components/svgs/chevron-down.svg create mode 100644 src/components/svgs/chevron-right.svg create mode 100644 src/components/svgs/contact.svg create mode 100644 src/components/svgs/dislike.svg create mode 100644 src/components/svgs/like.svg diff --git a/package-lock.json b/package-lock.json index 4805a777..c51b0cd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@types/react-dom": "^18.2.11", "@types/react-highlight-words": "^0.16.4", "autoprefixer": "^10.4.12", + "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "esbuild": "^0.19.8", "flexsearch": "^0.7.31", @@ -4623,6 +4624,17 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, "node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -4633,6 +4645,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", diff --git a/package.json b/package.json index d652e1b0..2e877c08 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@types/react-dom": "^18.2.11", "@types/react-highlight-words": "^0.16.4", "autoprefixer": "^10.4.12", + "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "esbuild": "^0.19.8", "flexsearch": "^0.7.31", diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index ace65d78173be707563d1699424a748c6c92ebb0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15406 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 EKN~wWT>t<8 diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e6f094e8..4353a599 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,7 +26,14 @@ export default function RootLayout({ className={clsx("h-full antialiased", beVietnamProFont.variable)} suppressHydrationWarning > - + + + + {children} diff --git a/src/app/policies/page.tsx b/src/app/policies/page.tsx index 042b30bb..17a56d5c 100644 --- a/src/app/policies/page.tsx +++ b/src/app/policies/page.tsx @@ -14,7 +14,7 @@ export default async function Page() { const policies = await getAllPolicies(); return ( - +

@@ -39,12 +39,14 @@ export default async function Page() { so developers can simply write code to customize any aspect of Zuplo.

- - Check out details - +
+ + Check out details + +
+
{children}
); diff --git a/src/components/DocsHeader.tsx b/src/components/DocsHeader.tsx index 8e958a7d..d5e911dd 100644 --- a/src/components/DocsHeader.tsx +++ b/src/components/DocsHeader.tsx @@ -4,6 +4,8 @@ import { usePathname } from "next/navigation"; import { navigation } from "@/build/navigation.mjs"; import { NavCategory, NavItem } from "@/lib/interfaces"; +import Link from "next/link"; +import ChevronRightIcon from "@/components/svgs/chevron-right.svg"; export function DocsHeader({ title }: { title?: string }) { let pathname = usePathname(); @@ -23,14 +25,15 @@ export function DocsHeader({ title }: { title?: string }) { } return ( -
- {section && ( -

- {section.label} -

- )} +
+
+ Home + + {section &&

{section.label}

} +
+ {title && ( -

+

{title}

)} diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx index 0f95f0b5..ac410813 100644 --- a/src/components/DocsLayout.tsx +++ b/src/components/DocsLayout.tsx @@ -3,6 +3,8 @@ import { DocsHeader } from "@/components/DocsHeader"; import { PrevNextLinks } from "@/components/PrevNextLinks"; import { Prose } from "@/components/Prose"; import { TableOfContents } from "@/components/TableOfContents"; +import ArticleRate from "@/components/shared/article/Rate"; +import ArticleSupport from "@/components/shared/article/Support"; import { Section } from "@/lib/interfaces"; export function DocsLayout({ @@ -17,11 +19,15 @@ export function DocsLayout({ return ( <> -
- - {children} -
- +
+
+ + {children} +
+ + + +
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 765e3224..c7d85262 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -9,6 +9,7 @@ import classNames from "classnames"; import { Search } from "./Search"; import { StartFreeCTAButton } from "./StartFreeCTAButton"; import { ThemeSelector } from "./ThemeSelector"; +import { Container } from "@/components/shared/Container"; function Header() { const [scrollY, setScrollY] = useState(0); @@ -28,35 +29,37 @@ function Header() { return (
10, })} > -
-
- -
-
- -
-
-
- +
+
+
+
-
-
- - -
- {/*
- -
-
- -
+
+ +
+
+
+ +
+
+
+
-
*/} + {/*
+ +
+
+ +
+ +
+
*/} +
); @@ -64,19 +67,22 @@ function Header() { export function Layout({ children }: { children: React.ReactNode }) { return ( -
+
- -
-
- {/*
-
-
*/} -
- -
+
+
+ + + {children} +
- {children}
); diff --git a/src/components/PolicyCard.tsx b/src/components/PolicyCard.tsx index 44bfa3c6..f90d7795 100644 --- a/src/components/PolicyCard.tsx +++ b/src/components/PolicyCard.tsx @@ -10,7 +10,7 @@ export const PolicyCard: React.FC = ({ name, href, icon }) => { return (
-
+ {/*
{dir === "next" ? "Next" : "Previous"} -
-
+ */} +
{label} @@ -70,7 +70,7 @@ export function PrevNextLinks() { } return ( -
+
{previousPage && "href" in previousPage && ( )} diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx index 7608c0d2..b65d940e 100644 --- a/src/components/Prose.tsx +++ b/src/components/Prose.tsx @@ -13,19 +13,25 @@ export function Prose({ diff --git a/src/components/QuickLinks.tsx b/src/components/QuickLinks.tsx index d46e8daf..799c5830 100644 --- a/src/components/QuickLinks.tsx +++ b/src/components/QuickLinks.tsx @@ -26,7 +26,7 @@ export function QuickLink({
-

+

{title} diff --git a/src/components/Search.tsx b/src/components/Search.tsx index b6d4c8b7..389a833b 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -443,11 +443,11 @@ export function Search() { <> diff --git a/src/components/StartFreeCTAButton.tsx b/src/components/StartFreeCTAButton.tsx index 58061085..afcfeeec 100644 --- a/src/components/StartFreeCTAButton.tsx +++ b/src/components/StartFreeCTAButton.tsx @@ -13,27 +13,21 @@ export const StartFreeCTAButton = ({ return ( <> Sign Up Book a demo diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx index 46201ef5..daf36635 100644 --- a/src/components/TableOfContents.tsx +++ b/src/components/TableOfContents.tsx @@ -62,7 +62,7 @@ export function TableOfContents({ } return ( -
+