More features

docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from "@docusaurus/preset-classic"
 
 const title = "Tailcall"
 const organization = "tailcallhq"
-const project = "tailcallhq.github.io"
+const project = "tailcall"
 
 function fetchLatestReleaseTagName(author = "tailcallhq", repo = "tailcall") {
   console.log(`Fetching latest release tag name from ${author}/${repo}`)
@@ -118,11 +118,11 @@ export default async function () {
           },
           docs: {
             // docRootComponent: require.resolve("./src/components/docs/Layout.tsx"),
-            sidebarPath: require.resolve("./sidebars.js"),
+            sidebarPath: require.resolve("./sidebars.ts"),
             sidebarCollapsible: false,
             // Please change this to your repo.
             // Remove this to remove the "edit this page" links.
-            editUrl: `https://github.com/${organization}/${project}/tree/develop`,
+            editUrl: `https://github.com/${organization}/${project}/blob/main/`,
           },
           blog: {
             showReadingTime: true,

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.0.0",
+    "@docusaurus/plugin-google-gtag": "^3.0.1",
     "@docusaurus/preset-classic": "3.0.0",
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.16",
@@ -28,6 +29,7 @@
     "react-countup": "^6.4.1",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.2",
+    "react-ga4": "^2.1.0",
     "react-on-screen": "^2.1.1",
     "tailwindcss": "^3.3.5"
   },

src/components/about/Founders.tsx

@@ -45,7 +45,7 @@ const SocialIcon = ({social}) => {
             <g mask="url(#mask0_1387_3208)">
               <path
                 d="M8.17805 18.9997V9.55356H5.1769V18.9997H8.17805ZM6.6781 8.26408C7.72445 8.26408 8.37587 7.53873 8.37587 6.63224C8.35628 5.70511 7.72445 5 6.698 5C5.67085 5 5 5.70511 5 6.63216C5 7.53864 5.65118 8.26399 6.65844 8.26399L6.6781 8.26408ZM9.83923 18.9997H12.8401V13.7251C12.8401 13.4432 12.8597 13.1605 12.939 12.9591C13.1559 12.3948 13.6497 11.8107 14.4789 11.8107C15.5646 11.8107 15.9992 12.6768 15.9992 13.9468V18.9997H19V13.5836C19 10.6822 17.5196 9.3321 15.5452 9.3321C13.9264 9.3321 13.2154 10.2787 12.8204 10.9234H12.8404V9.55389H9.83939C9.87856 10.44 9.83923 18.9997 9.83923 18.9997Z"
-                fill={isHovered ? "#0A66C2" : "#B6B6B7"}
+                fill={isHovered ? "var(--ifm-color-linkedin)" : "var(--ifm-color-gray-800"}
               />
             </g>
           </svg>
@@ -60,7 +60,7 @@ const SocialIcon = ({social}) => {
             <g mask="url(#mask0_1387_3215)">
               <path
                 d="M18.9309 5.42515C17.6561 4.82111 16.2891 4.37607 14.8599 4.12118C14.8339 4.11627 14.8079 4.12856 14.7944 4.15315C14.6187 4.47606 14.4239 4.89732 14.2876 5.22844C12.7503 4.99076 11.221 4.99076 9.71526 5.22844C9.57887 4.88997 9.37706 4.47606 9.20047 4.15315C9.18706 4.12939 9.16106 4.11709 9.13504 4.12118C7.70659 4.37526 6.33963 4.82029 5.06411 5.42515C5.05306 5.43007 5.0436 5.43827 5.03732 5.44891C2.44449 9.44932 1.73421 13.3514 2.08265 17.2051C2.08422 17.2239 2.09447 17.2419 2.10866 17.2534C3.81934 18.5508 5.47642 19.3385 7.10273 19.8606C7.12875 19.8687 7.15633 19.8588 7.1729 19.8367C7.5576 19.2942 7.90053 18.7222 8.19456 18.1205C8.21191 18.0853 8.19535 18.0435 8.15988 18.0295C7.61594 17.8165 7.098 17.5567 6.59977 17.2617C6.56036 17.2379 6.55721 17.1796 6.59346 17.1517C6.69831 17.0706 6.80317 16.9863 6.9033 16.901C6.92141 16.8854 6.94664 16.8822 6.96794 16.8919C10.2411 18.4353 13.7847 18.4353 17.0191 16.8919C17.0404 16.8813 17.0657 16.8846 17.0846 16.9002C17.1847 16.9855 17.2896 17.0706 17.3952 17.1517C17.4314 17.1796 17.4291 17.2379 17.3897 17.2617C16.8914 17.5624 16.3734 17.8165 15.8288 18.0287C15.7933 18.0426 15.7776 18.0853 15.7949 18.1205C16.0952 18.7212 16.4381 19.2934 16.8158 19.8359C16.8316 19.8588 16.8599 19.8687 16.8859 19.8606C18.5201 19.3385 20.1772 18.5508 21.8879 17.2534C21.9029 17.2419 21.9123 17.2247 21.9139 17.2059C22.3309 12.7506 21.2154 8.88053 18.9569 5.44973C18.9513 5.43827 18.9419 5.43007 18.9309 5.42515ZM8.68335 14.8586C7.69791 14.8586 6.88594 13.9242 6.88594 12.7769C6.88594 11.6294 7.68216 10.6951 8.68335 10.6951C9.69239 10.6951 10.4966 11.6376 10.4808 12.7769C10.4808 13.9242 9.68451 14.8586 8.68335 14.8586ZM15.329 14.8586C14.3436 14.8586 13.5316 13.9242 13.5316 12.7769C13.5316 11.6294 14.3278 10.6951 15.329 10.6951C16.338 10.6951 17.1421 11.6376 17.1263 12.7769C17.1263 13.9242 16.338 14.8586 15.329 14.8586Z"
-                fill={isHovered ? "#5865F2" : "#B6B6B7"}
+                fill={isHovered ? "var(--ifm-color-discord)" : "var(--ifm-color-gray-800"}
               />
             </g>
           </svg>
@@ -71,7 +71,7 @@ const SocialIcon = ({social}) => {
           <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M18.7447 6.42798H21.2748L15.7473 12.7456L22.25 21.3425H17.1584L13.1705 16.1285L8.60746 21.3425H6.07582L11.9881 14.585L5.75 6.42798H10.9708L14.5755 11.1937L18.7447 6.42798ZM17.8567 19.8281H19.2587L10.209 7.86283H8.7046L17.8567 19.8281Z"
-              fill={isHovered ? "#000" : "#B6B6B7"}
+              fill={isHovered ? "var(--ifm-color-black)" : "var(--ifm-color-gray-800"}
             />
           </svg>
         )

src/components/about/Investors.tsx

@@ -12,7 +12,7 @@ const Investors = () => {
         <div
           className="flex items-center justify-center rounded-xl sm:rounded-2xl p-5 sm:p-10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         >
           <img
@@ -28,7 +28,7 @@ const Investors = () => {
         <div
           className="flex items-center justify-center rounded-xl sm:rounded-2xl p-5 sm:p-10 shadow-lg w-52 h-28 sm:w-80 sm:h-40 bg-tailCall-light-100"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         >
           <img

src/components/about/SocialBuzz.tsx

@@ -5,7 +5,7 @@ const SocialBuzz = () => {
   return (
     <section className="py-16 sm:py-24 relative flex items-center justify-center mx-4 sm:mx-10 lg:mx-12 lg:space-x-10 max-w-8xl">
       <div className="flex flex-col gap-6 lg:gap-y-44">
-        <div className="ml-4 lg:ml-20">
+        <div className="ml-4 lg:ml-32">
           <SectionTitle title="About Us" />
           <span className="text-title-semi-large sm:text-display-small">Social & Buzz</span>
         </div>
@@ -18,7 +18,7 @@ const SocialBuzz = () => {
           alt="tweet 2"
           className="rounded-3xl m-2 lg:hidden"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         />
 
@@ -30,7 +30,7 @@ const SocialBuzz = () => {
           alt=""
           className=" rounded-3xl m-2"
           style={{
-            border: "1px solid #CECECF",
+            border: "1px solid var(--ifm-color-gray-700)",
           }}
         />
       </div>
@@ -42,7 +42,7 @@ const SocialBuzz = () => {
         alt="tweet 2"
         className="rounded-3xl m-2 lg:block hidden"
         style={{
-          border: "1px solid #CECECF",
+          border: "1px solid var(--ifm-color-gray-700)",
         }}
       />
     </section>

src/components/contact/Hello.tsx

@@ -65,7 +65,7 @@ const Hello = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               style={{
-                border: "1px solid #CECECF",
+                border: "1px solid var(--ifm-color-gray-700)",
               }}
               className="rounded-lg font-space-grotesk h-11 w-[95%] sm:w-[480px] p-3 text-content-small outline-none focus:border-x-tailCall-light-700"
               placeholder="[email protected]"

src/components/enterprise/EnterpriseFeatures.tsx

@@ -15,7 +15,7 @@ const EnterpriseFeaturesCard = ({feature}: EnterpriseFeaturesCardProps) => {
     <div
       className="rounded-3xl w-full sm:w-[450px] sm:h-60 p-8 flex flex-col items-start space-y-4"
       style={{
-        border: "1px solid #E7E7E7",
+        border: "1px solid var(--ifm-color-gray-600)",
       }}
     >
       <feature.logo className="h-5 w-5 sm:h-8 sm:w-8" />

src/components/enterprise/MoreEnterpriseFeatures.tsx

@@ -8,7 +8,7 @@ const MoreEnterpriseFeatures = () => {
     <section
       className="flex flex-col sm:flex-row items-center justify-center sm:px-10 lg:px-40 relative overflow-hidden"
       style={{
-        border: "1px solid #E5E5E5",
+        border: "1px solid var(--ifm-color-gray-500)",
       }}
     >
       <div className="w-full h-full p-4 sm:py-0 sm:pr-10">
@@ -25,14 +25,14 @@ const MoreEnterpriseFeatures = () => {
       <div
         className="flex items-start justify-start gap-4 flex-wrap p-4 overflow-x-auto h-full max-w-screen-md sm:pl-10 sm:py-10"
         style={{
-          borderLeft: "1px solid #E5E5E5",
+          borderLeft: "1px solid var(--ifm-color-gray-500)",
         }}
       >
         {additionalEnterpriseFeatures.map((feature) => (
           <div
             className="flex items-center p-2 sm:px-4 sm:py-3 rounded w-fit space-x-2 sm:space-x-4"
             style={{
-              border: "1px solid #E5E5E5",
+              border: "1px solid var(--ifm-color-gray-500)",
               minWidth: "150px",
             }}
             key={feature.id}

src/components/enterprise/Pricing.tsx

@@ -16,7 +16,7 @@ const Pricing = () => {
           <div
             key={plan.id}
             style={{
-              border: plan.mostPopular ? "1px solid #000" : "1px solid #E7E7E7",
+              border: plan.mostPopular ? "1px solid black" : "1px solid var(--ifm-color-gray-600)",
             }}
             className="rounded-2xl flex flex-col items-center justify-between gap-y-7 sm:gap-y-0 py-4 sm:py-6 relative w-full h-auto sm:w-[384px] md:h-[520px] lg:h-[584px]"
           >

src/components/home/ChooseTailcall.tsx

@@ -14,7 +14,7 @@ const ChooseTailcall = () => {
             key={item.id}
             // TODO: Tailwind border not getting applied
             style={{
-              border: "1px solid #2C2C2C",
+              border: "1px solid var(--ifm-color-dark-900)",
             }}
           >
             <div className="h-16 w-16 sm:w-full sm:h-full">

src/components/home/Features.tsx

@@ -26,7 +26,7 @@ const Feature = ({feature}: FeatureProps) => {
         className="flex flex-col sm:flex-row p-4 sm:p-10  shadow-xl rounded-[20px] relative  sm:ml-0"
         style={{
           backgroundImage: `url(${require("@site/static/images/home/grid.jpg").default})`,
-          boxShadow: "0px 0px 0px 3px #F3F4F7",
+          boxShadow: "0px 0px 0px 3px var(--ifm-color-gray-300)",
         }}
       >
         <div className="bg-gradient-to-b from-tailCall-light-100 from-3% via-[#E4E5E9] via-67% to-tailCall-light-100 absolute -left-4 sm:-left-6 w-[2px] h-full" />

src/components/home/Graph.tsx

@@ -30,6 +30,7 @@ const Graph = () => {
           <GraphContainer
             visual={RequestVisual}
             metricData={7442.01}
+            start={5000}
             metricTitle="Requests/sec"
             metricDesc="(Higher is better)"
             duration={1.6}
@@ -38,6 +39,7 @@ const Graph = () => {
           <GraphContainer
             visual={LatencyVisual}
             metricData={13.39}
+            start={1000}
             metricTitle="Latency (ms)"
             metricDesc="(Lower is better)"
             duration={1.6}

src/components/home/GraphContainer.tsx

@@ -10,9 +10,10 @@ type GraphContainerProps = {
   visual: any
   duration?: number
   delay?: number
+  start?: number
 }
 
-const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, duration}: GraphContainerProps) => {
+const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, duration, start}: GraphContainerProps) => {
   const lottieRef = useRef()
 
   const interactivity: any = {
@@ -35,7 +36,7 @@ const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, dur
   return (
     <div
       style={{
-        border: "1px solid #2C2C2C",
+        border: "1px solid var(--ifm-color-dark-900)",
       }}
       className="h-[368px] lg:h-[400px] w-[95%] sm:w-[680px] rounded-3xl sm:rounded-[32px] flex flex-col relative"
     >
@@ -55,7 +56,7 @@ const GraphContainer = ({metricTitle, metricData, metricDesc, visual, delay, dur
               return (
                 <>
                   {isVisible ? (
-                    <CountUp start={2000} end={metricData} decimals={2} duration={duration} delay={delay} />
+                    <CountUp start={start} end={metricData} decimals={2} duration={duration} delay={delay} />
                   ) : null}
                 </>
               )

src/components/home/LegacyGateway.tsx

@@ -24,7 +24,7 @@ const LegacyGateway = () => {
         </div>
       </div>
 
-      <div className="w-full flex items-center justify-center px-6 lg:px-0 mt-7">
+      <div className="w-full flex items-center justify-center px-0 mt-7">
         <Lottie
           animationData={SolutionGraphic}
           loop

src/components/home/MoreFeatures.tsx

@@ -7,7 +7,7 @@ const FeatureBox = ({feature}) => {
   return (
     <div
       style={{
-        borderBottom: "1px solid #E4E4E4",
+        borderBottom: "1px solid var(--ifm-color-gray-400)",
       }}
       className="flex flex-col sm:flex-row items-start justify-start sm:items-center text-start space-y-2 sm:space-y-0 py-4 sm:py-8 lg:py-12 sm:space-x-4 text-content-tiny font-bold sm:text-title-small lg:text-title-medium text-tailCall-dark-500  sm:h-32 w-full border border-tailCall-dark-300"
     >

src/components/shared/Button.tsx

@@ -20,23 +20,23 @@ const Button = ({title, Icon, theme, onClick, href, width, disabled}: ButtonProp
       case "light":
         return {
           classes: "text-tailCall-dark-500 bg-transparent",
-          styles: isHovered ? "2px solid #121315" : "1px solid #121315",
+          styles: isHovered ? "2px solid var(--ifm-color-dark-800)" : "1px solid var(--ifm-color-dark-800)",
           gridClasses:
             "absolute inset-0 -z-20 w-full h-full opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-10 transform transition ease-out duration-150",
         }
 
       case "dark":
         return {
           classes: "text-tailCall-light-100 bg-white border-none",
-          styles: "2px solid #121315",
+          styles: "2px solid var(--ifm-color-dark-800)",
           gridClasses:
             "absolute inset-0 z-10 w-full h-full opacity-0 scale-90 group-hover:scale-95 group-hover:opacity-100 transform transition ease-out duration-150",
         }
 
       case "gray":
         return {
           classes: "text-tailCall-dark-100 bg-transparent text-tailCall-light-100",
-          styles: "2px solid #FFFFFF",
+          styles: "2px solid var(--ifm-color-white)",
           gridClasses: "hidden",
         }
 

src/components/shared/Footer.tsx

@@ -43,7 +43,9 @@ const Footer = () => {
       </div>
 
       <div className="flex flex-col-reverse sm:flex-row items-center gap-y-4 sm:justify-between w-[100%] max-w-7xl sm:mt-10 z-10">
-        <p className="text-content-tiny text-[#B4B4B4] font-space-mono font-normal">Copyright © 2023 Tailcall, Inc.</p>
+        <p className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal">
+          Copyright © 2023 Tailcall, Inc.
+        </p>
         <div className="space-x-4">
           {socials.map((social) => (
             <Link href={social.href} className="cursor-pointer" key={social.id}>

src/components/shared/GithubStarsButton.tsx

@@ -17,8 +17,16 @@ function GithubIcon() {
 
 export default function GithubStarsButton({className}) {
   const starsCount = useContext(GithubStarsContext)
+  const [isHovered, setIsHovered] = React.useState(false)
+
   return (
-    <a href={githubRepoURL} target="_blank" className={`${className} header-button header-button-github`}>
+    <a
+      href={githubRepoURL}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      target="_blank"
+      className={`${className} header-button header-button-github ${isHovered && "button-grid-bg-github"}`}
+    >
       <GithubIcon />
       <span>
         Star <span className="min-w-[3ch] inline-block">{starsCount}</span>