From 2813c680ebcbbf7ba0e5d6aba51c69b0068c9780 Mon Sep 17 00:00:00 2001 From: Mehul Mathur Date: Thu, 15 Aug 2024 16:21:26 +0530 Subject: [PATCH] feat(420): integrated more reasons section (#422) Co-authored-by: Tushar Mathur --- src/components/home/BenefitsCard.tsx | 8 +-- src/components/home/ChooseTailcall.tsx | 30 +++++++++-- src/components/home/GraphContainer.tsx | 2 +- src/components/shared/LinkButton.tsx | 4 +- src/constants/index.tsx | 51 ++++++++++++++++++ src/types/index.d.ts | 7 +++ static/images/choose-tailcall/check-done.png | Bin 0 -> 459 bytes .../choose-tailcall/clock-stopwatch.png | Bin 0 -> 652 bytes static/images/choose-tailcall/grid.png | Bin 0 -> 248 bytes .../images/choose-tailcall/line-chart-up.png | Bin 0 -> 331 bytes static/images/choose-tailcall/lock.png | Bin 0 -> 479 bytes .../images/choose-tailcall/puzzle-piece.png | Bin 0 -> 581 bytes static/images/choose-tailcall/rocket.png | Bin 0 -> 704 bytes static/images/choose-tailcall/shield-tick.png | Bin 0 -> 589 bytes 14 files changed, 90 insertions(+), 12 deletions(-) create mode 100644 static/images/choose-tailcall/check-done.png create mode 100644 static/images/choose-tailcall/clock-stopwatch.png create mode 100644 static/images/choose-tailcall/grid.png create mode 100644 static/images/choose-tailcall/line-chart-up.png create mode 100644 static/images/choose-tailcall/lock.png create mode 100644 static/images/choose-tailcall/puzzle-piece.png create mode 100644 static/images/choose-tailcall/rocket.png create mode 100644 static/images/choose-tailcall/shield-tick.png diff --git a/src/components/home/BenefitsCard.tsx b/src/components/home/BenefitsCard.tsx index 6600106766..21bac0f523 100644 --- a/src/components/home/BenefitsCard.tsx +++ b/src/components/home/BenefitsCard.tsx @@ -1,17 +1,17 @@ import React from "react" import {benefits} from "@site/src/constants" import {ArrowRight} from "lucide-react" +import Link from "@docusaurus/Link" const BenefitsCard = (): JSX.Element => { return (
{benefits.map((item) => ( -
{

{item.description}

- + ))}
diff --git a/src/components/home/ChooseTailcall.tsx b/src/components/home/ChooseTailcall.tsx index 624aab73e2..04c640d38c 100644 --- a/src/components/home/ChooseTailcall.tsx +++ b/src/components/home/ChooseTailcall.tsx @@ -1,16 +1,18 @@ import React from "react" -import {chooseTailcall} from "@site/src/constants" +import {chooseTailcall, tailcallFeatures, Theme} from "@site/src/constants" +import LinkButton from "../shared/LinkButton" +import Link from "@docusaurus/Link" const ChooseTailcall = (): JSX.Element => { return ( - <> +

More reasons to choose tailcall.

{chooseTailcall.map((item) => (
@@ -18,13 +20,31 @@ const ChooseTailcall = (): JSX.Element => {
-

{item.title}

+

{item.title}

{item.description}

))}
- +
+ {tailcallFeatures.map((item) => ( + + {`${item.title} + {item.title} + + ))} +
+ +
) } diff --git a/src/components/home/GraphContainer.tsx b/src/components/home/GraphContainer.tsx index be151f232c..ab48804c70 100644 --- a/src/components/home/GraphContainer.tsx +++ b/src/components/home/GraphContainer.tsx @@ -43,7 +43,7 @@ const GraphContainer = ({ }, []) return ( -
+
{metricTitle} diff --git a/src/components/shared/LinkButton.tsx b/src/components/shared/LinkButton.tsx index 57d34fcf3b..7a7fde8f3c 100644 --- a/src/components/shared/LinkButton.tsx +++ b/src/components/shared/LinkButton.tsx @@ -58,7 +58,7 @@ const LinkButton = ({title, Icon, theme, onClick, href, width = "auto", disabled } const renderBackgroundElements = (buttonTheme: Theme) => { - if (buttonTheme === Theme.Dark) { + if (buttonTheme === Theme.Dark || buttonTheme === Theme.Gray) { return ( <> {/* Dark theme background */} @@ -96,7 +96,7 @@ const LinkButton = ({title, Icon, theme, onClick, href, width = "auto", disabled {renderBackgroundElements(theme)} {/* Render Icon if provided */} - {Icon && } + {Icon && } {/* Render title if provided */} {title && {title}} diff --git a/src/constants/index.tsx b/src/constants/index.tsx index c0eab4ebc2..035c5a4146 100644 --- a/src/constants/index.tsx +++ b/src/constants/index.tsx @@ -223,6 +223,57 @@ export const chooseTailcall: ChooseTailcall[] = [ }, ] +export const tailcallFeatures: TailcallFeatures[] = [ + { + id: 1, + title: "Powerful Batching Primitive", + image: require("@site/static/images/choose-tailcall/rocket.png").default, + redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/#using-batch-apis", + }, + { + id: 2, + title: "Extensions with plugins and JS support", + image: require("@site/static/images/choose-tailcall/grid.png").default, + redirection_url: "/docs/graphql-javascript-customization/", + }, + { + id: 3, + title: "Field based Authentication & Authorisation", + image: require("@site/static/images/choose-tailcall/shield-tick.png").default, + redirection_url: "/docs/field-level-access-control-graphql-authentication/", + }, + { + id: 4, + title: "Protocol agnostic", + image: require("@site/static/images/choose-tailcall/check-done.png").default, + redirection_url: "/docs/graphql-grpc-tailcall/", + }, + { + id: 5, + title: "Performance", + image: require("@site/static/images/choose-tailcall/line-chart-up.png").default, + redirection_url: "https://github.com/tailcallhq/graphql-benchmarks", + }, + { + id: 6, + title: "Security", + image: require("@site/static/images/choose-tailcall/lock.png").default, + redirection_url: "/docs/field-level-access-control-graphql-authentication/", + }, + { + id: 7, + title: "Edge Compatible", + image: require("@site/static/images/choose-tailcall/puzzle-piece.png").default, + redirection_url: "/docs/deploy-graphql-github-actions/", + }, + { + id: 8, + title: "Compile time checks", + image: require("@site/static/images/choose-tailcall/clock-stopwatch.png").default, + redirection_url: "/docs/tailcall-graphql-cli/#check", + }, +] + export const benefits: Benefits[] = [ { id: 1, diff --git a/src/types/index.d.ts b/src/types/index.d.ts index ff1cd3d8b9..02086dc041 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -31,6 +31,13 @@ type ChooseTailcall = { image: string } +type TailcallFeatures = { + id: number + title: string + image: string + redirection_url: string +} + type Benefits = { id: number title: string diff --git a/static/images/choose-tailcall/check-done.png b/static/images/choose-tailcall/check-done.png new file mode 100644 index 0000000000000000000000000000000000000000..5d4af28b3717817d35f07c63f4a0366f13482758 GIT binary patch literal 459 zcmV;+0W|)JP) zgfI}^1PkyH1|F~jE#WHhI`FLEVg-5~oRwIDcHlkm_ofX1?#Cn;87B!cc;5_c26n$? zcfSBcD?^w?UDtad#IEoA%b-9ZKG_`OIKKBLXqx7ciFfn|bY1t5rm1o|ae@!7pf8Hz zngRh|#30t?Cvh@u$+GN?0%3f8EtRw~R!?x@a|lrvW?|M-bvY}5y4a{t=>qVDBFnN= z6i~qyr?zcxLInVIMN#z1#~mI{`kn@MiMqTq2m#L^=MA@&QXZ2eIobCXCjdE{7bZs% zTvGP^MKU$ye88Si!PIA{0MbIwFd$dInebgNH`(3`}CjV8=P$N}LX8+RxZ*x!wuzAN~Z+>V>AB29P|>VMw1shP>#50M?~ zY|%`0{Qz&e=OK~Lv8t*kPI5cvX8?-iSt zNUK@z&b~K0pS2MGEJ_@s?RINGslH{iSS)H$XH(+Y0&j<#&1Pm8Mj>F&rr}>FTROAb z?fU+`j2|4TkxHd3xwc#`E168@9n*?jBQV&Q=kxiiR4R>V4d1G5+ihSJ5W1$cz2#uN zUe{qXQ5403t{#ua0)UB76_3TlXr|L?>w3LTK|(jLf<$+SrPb+l(y{qT;Frs#2Jk6^ zn^^yV)^JFn0kAg$WpJ{Y(iu8S7>C1Q9_kL_*pjhECp+*lq03GChs z5U2LpL&INDz_@eLP2e;KLiHMkjyR8?oMsBz2ga)#%bCjwWj>$J8+-#TX`(q~^sEbX z@{6WvmgfevfHEDk2Yr!H@Jw`gI+EZX0tOyX{BVmpJnD#;LblXH9Q(&TMDL00*f=Eg z4|wzzDIp$pp(MD8-XO2$c>A5?Azx}Xo2|p+miT?nd&pZi76Fq~pkn_IEJ_vZx&9~A0xjTX>+vS7)U=`n{Kr)bF*#ID(D%W&r0&S!1gA4>KbdTUMRUL#>8 z`kE!-deruncV_LK&$)spkx8t?ar^q6Q-4V)ec;G9vh;s8!Bg=Q~R}TOH literal 0 HcmV?d00001 diff --git a/static/images/choose-tailcall/line-chart-up.png b/static/images/choose-tailcall/line-chart-up.png new file mode 100644 index 0000000000000000000000000000000000000000..f1b59c98f22242c711e08d34999825040359116a GIT binary patch literal 331 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?MhSJzX3_Dj1)JI0_w7;NkImU-g!^ev$tt_Fqi% zuPi^noA-;^M`RAqvS6*J3+_rTQ_L+tJc;wb{R5Wi83zx&h*-0b(d>f6SyrnRE_=-9 zF3r9Fy_zd(uEX*LQ3_#Rr@h{H>pE#~33?^vwBzx&rXyxgKN=oboy9#f)|IJ~<>ck_ z>}O~!D`l2j0P00$7<>?0Q-GkA#X&4PDj zMN0Cd)uP=uZ$8Wpz+Zy z=Xr6Lh6Vj-#bXjGieiXj0;9j7PjS__B9#E0(H(KpG+lsc23TjRJ7Bc) zFbwzdJ)g}Q5zD$Yb|8efrrr1bO&14Cw&l;Uu>&2bGL!MGi@0-E&=ZwXNQe!VbuM?5 zkj0VsfkgAJI5^p(?ai^1fkarc_zTweQKtlLV7M*N_8tz|PrfvdiFuyy*g@F$cvRpQ zzoRT%*B!R!CqKC@O_w;mjU-8?s=GE@xx51~!^*a8+Sj@U7q#iHa9~=ZSy`4w2Ffm? zsj1tdEx1*qb6wQT7HqdA8)$*2?Gt_DaD0cZ41VGzpJYH6M4-7sWY7e2-(>OsfltRi V#sWG_d<_5q002ovPDHLkV1m2%$m#$9 literal 0 HcmV?d00001 diff --git a/static/images/choose-tailcall/puzzle-piece.png b/static/images/choose-tailcall/puzzle-piece.png new file mode 100644 index 0000000000000000000000000000000000000000..f006aeb3e726e516292e8e1070f434ea4e7f3074 GIT binary patch literal 581 zcmV-L0=oT)P)o4>UO&~uDvReDGN3+U#(WrCxkG^l`(Mgo?U*m0xr?vDad{7YC?Q- ziblvjrGkxo5U2A$rIUz5EkE&OLt{}_)BoV|rMNO0de+=55#SO{V~awFZ}wn{+Swch znTUAQ@*DP7WHI4wMYo*CcFQQfzKNxegiH9yi)e1EuO)=|!A)jELoHve{&WXfoYPLK z33OK!9%9a)!{IOzr}tn9Nn5Q}ZY7c0F}xEX!!M5LDKAb5D!t$D&-8onq5V5nLSyR2 z=EAg!s$JK;0|;LEvDfe|_!9)#gFEoG7O4X$I>2%6S?VvzeGjY$XK-#8z8HQ0@ZLQN T?@onV00000NkvXXu0mjf)hPZ{ literal 0 HcmV?d00001 diff --git a/static/images/choose-tailcall/rocket.png b/static/images/choose-tailcall/rocket.png new file mode 100644 index 0000000000000000000000000000000000000000..663de934ce8e40c51547daddf435386531a9ee9e GIT binary patch literal 704 zcmV;x0zdtUP)p0UCXlUIF4^H9964Tr=b48X0urv z!DB+W%H?v3QOxGgmkP}1^X7KDeL=FO3`OuhJjmzsi`{Pbj$(^16_`$^_mJWV2@)CL z50E0z?F2E|B*U3HKvXfzsr zR&pfmV2zgT)_iv)5qBaZBM0e-c%|TGx>u7>?4D7hK}lJ*=UrrTrR&e zxoj#X_tWbxo<*syiZ+|gcbq$HMc0^io8AvsGZ4zumC;7>S0)$K9HV^psr6PGE&L4~ z@k_jyDx$5sTrM59F(0I@FBeb;DO@=U=#P`h#50O$R-WTH3w4EA2Ktr~o#Bo+KW;l~ zAv=g0P#%XD3jl4Bh`Z24E0@QSvG38Ip$1g1*9T_{PpUqO zsMN+vTe8ux!J4@060}67QS(ekQS)4hcn@Hli2J8n^FslczL~Tn0e5ctXwWC*XDlfI m^gdWHMz}-<*LKK%VZQ;5eqb@2D_S%F0000Un2?>EzvH{&7OaM&KFahcWO(tkJNSFXR0c-#p1c_hq0&fT*NWX)NYEqK8 zs7O7@v6I~QV<$cfap%xfl6>EP%;)oM46PstHkzjOFzytK#qrGoM4HRxERfZ4YsRDv z4u?Z$zu)%^!`LVZOePaEo6XkQ?c*s)(>BNBvBSdoz;cFY&L7?y55x? z0{FSx?YyW%UbY5?FY*jwq**GJdg5Bl=kwuWu?WzA5P?t(U@B-HVbT1gL`n$6jd2aH zi#x~70&x09Zl}|!CH`7~$kEvFKy@u8&sXL&pIbRZBY*#wKjWk*5ksBDOdmEZ;!<4BPFt6?arB3rIqAgtloW;=I`g b;y=U}AZZ~6C*-C400000NkvXXu0mjf+#&u7 literal 0 HcmV?d00001