diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6f6cdf1695..3f3998d28f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,7 +32,7 @@ jobs: npm run build - name: Deploy 🚀 - if: github.ref == 'refs/heads/develop' + # if: github.ref == 'refs/heads/develop' uses: JamesIves/github-pages-deploy-action@v4 with: folder: build diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 979dd8827f..7adb9f04c9 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -11,6 +11,13 @@ export default { trailingSlash: true, tagline: "GraphQL platform engineered for scale", headTags: [ + { + tagName: "script", + attributes: { + async: "true", + src: "partytown.js", + }, + }, { tagName: "script", attributes: { @@ -28,7 +35,7 @@ export default { }, ], url: "https://tailcall.run", - baseUrl: "/", + baseUrl: "/tailcallhq.github.io/", onBrokenLinks: "throw", onBrokenMarkdownLinks: "warn", favicon: "images/favicon.ico", @@ -52,10 +59,6 @@ export default { "classic", /** @type {import('@docusaurus/preset-classic').Options} */ { - gtag: { - trackingID: "G-JEP3QDWT0G", - anonymizeIP: false, - }, docs: { // docRootComponent: require.resolve("./src/components/docs/Layout.tsx"), sidebarPath: require.resolve("./sidebars.ts"), @@ -86,6 +89,7 @@ export default { alt: "My Site Logo", src: "icons/companies/taicall.svg", height: "2.5rem", + width: "150px", }, items: [ {to: "/", label: "Home", position: "left", activeBaseRegex: "^/$"}, @@ -95,6 +99,7 @@ export default { {to: "https://blog.tailcall.run/", label: "Blog", position: "left"}, { href: "https://discord.gg/kRZBPpkgwq", + "aria-label": "Discord", position: "right", className: "header-button header-button-discord", html: ` @@ -122,6 +127,14 @@ export default { highlightResult: true, }, ], + [ + require.resolve("./src/plugins/gtag"), + { + trackingID: "G-JEP3QDWT0G", + anonymizeIP: false, + }, + ], + // @ts-ignore async function myPlugin() { return { name: "docusaurus-tailwindcss", @@ -134,4 +147,4 @@ export default { } }, ], -} +} satisfies Config diff --git a/package-lock.json b/package-lock.json index 2fc9f4bed2..7afaecd44e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,13 @@ "version": "0.0.0", "dependencies": { "@docusaurus/core": "3.1.1", - "@docusaurus/plugin-google-gtag": "^3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", "autoprefixer": "^10.4.17", "clsx": "^2.1.0", "docusaurus-lunr-search": "^3.3.2", - "graphiql": "^3.2.0", + "graphiql-tc": "^3.2.3", + "lottie-light-react": "^2.4.0", "lottie-react": "^2.4.0", "postcss": "^8.4.33", "prism-react-renderer": "^2.3.1", @@ -32,6 +32,7 @@ "devDependencies": { "@babel/core": "^7.23.9", "@babel/eslint-parser": "^7.23.10", + "@builder.io/partytown": "^0.10.2", "@docusaurus/eslint-plugin": "^3.1.1", "@docusaurus/module-type-aliases": "3.1.1", "@docusaurus/tsconfig": "3.1.1", @@ -2172,6 +2173,18 @@ "node": ">=6.9.0" } }, + "node_modules/@builder.io/partytown": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.10.2.tgz", + "integrity": "sha512-A9U+4PREWcS+CCYzKGIPovtGB/PBgnH/8oQyCE6Nr9drDJk6cMPpLQIEajpGPmG9tYF7N3FkRvhXm/AS9+0iKg==", + "dev": true, + "bin": { + "partytown": "bin/partytown.cjs" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/@codemirror/language": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.0.0.tgz", @@ -4785,11 +4798,11 @@ } }, "node_modules/@tanstack/react-virtual": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.3.0.tgz", - "integrity": "sha512-QFxmTSZBniq15S0vSZ55P4ToXquMXwJypPXyX/ux7sYo6a2FX3/zWoRLLc4eIOGWTjvzqcIVNKhcuFb+OZL3aQ==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz", + "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==", "dependencies": { - "@tanstack/virtual-core": "3.3.0" + "@tanstack/virtual-core": "3.4.0" }, "funding": { "type": "github", @@ -4801,9 +4814,9 @@ } }, "node_modules/@tanstack/virtual-core": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.3.0.tgz", - "integrity": "sha512-A0004OAa1FcUkPHeeGoKgBrAgjH+uHdDPrw1L7RpkwnODYqRvoilqsHPs8cyTjMg1byZBbiNpQAq2TlFLIaQag==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz", + "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" @@ -9566,10 +9579,10 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "devOptional": true }, - "node_modules/graphiql": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/graphiql/-/graphiql-3.2.0.tgz", - "integrity": "sha512-HHZ9j47IVUdUhdEdOkwD/U3kMGxCGZocEf9rk1aou5lInK9vJRbjlDW4BbG9CvA5fNoe7DevRr72tv0ubvjjPA==", + "node_modules/graphiql-tc": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/graphiql-tc/-/graphiql-tc-3.2.3.tgz", + "integrity": "sha512-UjHUh1whzWBhicRnh1AvkS5xaWF4IXIs26AOtz7WKbV2T0nTvrr2ixkH5KfkLs6t3H1+kxRAThzbPAS/4iOOgA==", "dependencies": { "@graphiql/react": "^0.21.0", "@graphiql/toolkit": "^0.9.1", @@ -11475,6 +11488,18 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-light-react": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/lottie-light-react/-/lottie-light-react-2.4.0.tgz", + "integrity": "sha512-TXJOnyqEc6ev9/um8Xkxve5EVcgCX2pi1olWc8jj+81qaPyFBA+VxHIc2Ojl42IqeAiKhGHz098ztQOIImJcyg==", + "dependencies": { + "lottie-web": "^5.10.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/lottie-react": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz", diff --git a/package.json b/package.json index 78a68888a5..0966969880 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "docusaurus": "docusaurus", "start": "docusaurus start", - "build": "docusaurus build", + "partytown": "partytown copylib ./build/~partytown/", + "build": "docusaurus build && npm run partytown", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", @@ -18,13 +19,13 @@ }, "dependencies": { "@docusaurus/core": "3.1.1", - "@docusaurus/plugin-google-gtag": "^3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", "autoprefixer": "^10.4.17", "clsx": "^2.1.0", "docusaurus-lunr-search": "^3.3.2", - "graphiql": "^3.2.0", + "graphiql-tc": "^3.2.3", + "lottie-light-react": "^2.4.0", "lottie-react": "^2.4.0", "postcss": "^8.4.33", "prism-react-renderer": "^2.3.1", @@ -41,6 +42,7 @@ "devDependencies": { "@babel/core": "^7.23.9", "@babel/eslint-parser": "^7.23.10", + "@builder.io/partytown": "^0.10.2", "@docusaurus/eslint-plugin": "^3.1.1", "@docusaurus/module-type-aliases": "3.1.1", "@docusaurus/tsconfig": "3.1.1", diff --git a/src/components/about/Founders.tsx b/src/components/about/Founders.tsx index b6ba94b9a2..ac6ae4df34 100644 --- a/src/components/about/Founders.tsx +++ b/src/components/about/Founders.tsx @@ -2,6 +2,7 @@ import React, {useState} from "react" import {founders} from "@site/src/constants" import Link from "@docusaurus/Link" +import Image from "../shared/Image" type Founder = { founder: { @@ -20,7 +21,7 @@ type SocialIconProps = { const Founder = ({founder}: Founder): JSX.Element => { return (
- {founder.name} + {founder.name}
{founder.name} diff --git a/src/components/about/Hero.tsx b/src/components/about/Hero.tsx index fea9fae0b2..755a44eed6 100644 --- a/src/components/about/Hero.tsx +++ b/src/components/about/Hero.tsx @@ -1,6 +1,7 @@ import React from "react" import Heading from "@theme/Heading" import SectionTitle from "../shared/SectionTitle" +import Image from "../shared/Image" const Hero = (): JSX.Element => { return ( @@ -15,8 +16,8 @@ const Hero = (): JSX.Element => {
- about us visual diff --git a/src/components/about/Investors.tsx b/src/components/about/Investors.tsx index c9ae4d53fb..715bd187ae 100644 --- a/src/components/about/Investors.tsx +++ b/src/components/about/Investors.tsx @@ -1,5 +1,6 @@ import React from "react" import {investors} from "@site/src/constants" +import Image from "../shared/Image" const Investors = (): JSX.Element => { return ( @@ -10,22 +11,22 @@ const Investors = (): JSX.Element => {
- peak xv
- tenacity @@ -37,7 +38,7 @@ const Investors = (): JSX.Element => {
{investors.map((investor) => (
- {investor.name} { return ( @@ -10,29 +11,23 @@ const SocialBuzz = (): JSX.Element => { Social & Buzz
- tweet 2 -
- tweet 2 diff --git a/src/components/enterprise/EnterpriseFeatures.tsx b/src/components/enterprise/EnterpriseFeatures.tsx index 1e9f851f05..4aa1f05bf9 100644 --- a/src/components/enterprise/EnterpriseFeatures.tsx +++ b/src/components/enterprise/EnterpriseFeatures.tsx @@ -1,6 +1,6 @@ import React from "react" import Heading from "@theme/Heading" - +import Image from "../shared/Image" import {enterpriseFeatures} from "@site/src/constants" type EnterpriseFeaturesCardProps = { @@ -8,14 +8,14 @@ type EnterpriseFeaturesCardProps = { id: number title: string description: string - logo: React.FunctionComponent> + logo: string } } const EnterpriseFeaturesCard = ({feature}: EnterpriseFeaturesCardProps): JSX.Element => { return (
- + {feature.title}

{feature.title}

{feature.description}

diff --git a/src/components/enterprise/MoreEnterpriseFeatures.tsx b/src/components/enterprise/MoreEnterpriseFeatures.tsx index 997c5e11ca..1a61ad8255 100644 --- a/src/components/enterprise/MoreEnterpriseFeatures.tsx +++ b/src/components/enterprise/MoreEnterpriseFeatures.tsx @@ -3,13 +3,14 @@ import Heading from "@theme/Heading" import {additionalEnterpriseFeatures} from "@site/src/constants" import CheckCircle from "@site/static/icons/basic/check-circle-broken.svg" +import Image from "../shared/Image" const MoreEnterpriseFeatures = (): JSX.Element => { return (
- diff --git a/src/components/home/ChooseTailcall.tsx b/src/components/home/ChooseTailcall.tsx index b9518ab51f..f98e7fd845 100644 --- a/src/components/home/ChooseTailcall.tsx +++ b/src/components/home/ChooseTailcall.tsx @@ -1,5 +1,6 @@ import React from "react" import {chooseTailcall} from "@site/src/constants" +import Image from "../shared/Image" const ChooseTailcall = (): JSX.Element => { return ( @@ -14,7 +15,7 @@ const ChooseTailcall = (): JSX.Element => { key={item.id} >
- +
diff --git a/src/components/home/Features.tsx b/src/components/home/Features.tsx index 03c107e381..5e4086eb89 100644 --- a/src/components/home/Features.tsx +++ b/src/components/home/Features.tsx @@ -3,7 +3,7 @@ import Heading from "@theme/Heading" import {features} from "@site/src/constants" import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-underscore.svg" - +import Image from "../shared/Image" type FeatureProps = { feature: Feature } @@ -13,7 +13,7 @@ const Feature = ({feature}: FeatureProps): JSX.Element => {
- + {feature.title}
@@ -21,7 +21,7 @@ const Feature = ({feature}: FeatureProps): JSX.Element => {
@@ -30,7 +30,7 @@ const Feature = ({feature}: FeatureProps): JSX.Element => { {feature.content}

- +
diff --git a/src/components/home/GraphContainer.tsx b/src/components/home/GraphContainer.tsx index 52274e8577..c3f36b97ae 100644 --- a/src/components/home/GraphContainer.tsx +++ b/src/components/home/GraphContainer.tsx @@ -2,7 +2,7 @@ import React, {useEffect, useRef} from "react" import CountUp from "react-countup" import TrackVisibility from "react-on-screen" import {InteractivityProps, LottieRefCurrentProps, useLottie, useLottieInteractivity} from "lottie-react" -import LottieContainer from "./LottieContainer.tsxsrc/components/home/LottieContainer" +import LottieContainer from "./LottieContainer" type GraphContainerProps = { metricTitle: string diff --git a/src/components/home/LegacyGateway.tsx b/src/components/home/LegacyGateway.tsx index 0927f42366..b5934911e8 100644 --- a/src/components/home/LegacyGateway.tsx +++ b/src/components/home/LegacyGateway.tsx @@ -4,7 +4,7 @@ import Heading from "@theme/Heading" import {useLottie} from "lottie-react" import SolutionGraphic from "@site/static/animations/solution-graphic.json" import SectionTitle from "../shared/SectionTitle" -import LottieContainer from "./LottieContainer.tsxsrc/components/home/LottieContainer" +import LottieContainer from "./LottieContainer" const LegacyGateway = (): JSX.Element => { return ( diff --git a/src/components/home/LottieContainer.tsx b/src/components/home/LottieContainer.tsx new file mode 100644 index 0000000000..0b24e4ed8f --- /dev/null +++ b/src/components/home/LottieContainer.tsx @@ -0,0 +1,47 @@ +import React, {useEffect, useState} from "react" +import BrowserOnly from "@docusaurus/BrowserOnly" +import type {LottieComponentProps} from "lottie-light-react" + +const LottieContainer: React.FC = ({animationData, loop = true, className = ""}) => { + const [lottie, setLottie] = useState(null) + + useEffect(() => { + const script = document.createElement("script") + script.src = "https://unpkg.com/lottie-web-light@1.1.0/build/player/lottie_light.min.js" + script.onload = () => { + // @ts-ignore + setLottie(window.lottie) + } + document.body.appendChild(script) + return () => { + document.body.removeChild(script) + } + }, []) + + return ( + + {() => + lottie ? ( +
{ + if (container && !container.firstChild) { + lottie.loadAnimation({ + container: container, + renderer: "svg", + loop: loop, + autoplay: true, + animationData: animationData, + }) + } + }} + /> + ) : ( + <> + ) + } + + ) +} + +export default LottieContainer diff --git a/src/components/home/LottieContainer.tsxsrc/components/home/LottieContainer.tsx b/src/components/home/LottieContainer.tsxsrc/components/home/LottieContainer.tsx deleted file mode 100644 index 0e434266d0..0000000000 --- a/src/components/home/LottieContainer.tsxsrc/components/home/LottieContainer.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, {useEffect, useState} from "react" -import BrowserOnly from "@docusaurus/BrowserOnly" -import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment" -import type {LottieComponentProps} from "lottie-react" - -const LottieContainer: React.FC = ({animationData, loop = true, className = ""}) => { - const [Lottie, setLottie] = useState<{default: React.FC} | null>(null) - - useEffect(() => { - if (ExecutionEnvironment.canUseDOM) { - import("lottie-react").then((LottieModule) => { - setLottie(LottieModule) - }) - } - }, []) - - return ( - - {() => (Lottie ? : <>)} - - ) -} - -export default LottieContainer diff --git a/src/components/home/MoreFeatures.tsx b/src/components/home/MoreFeatures.tsx index 31d25555cc..dae2930740 100644 --- a/src/components/home/MoreFeatures.tsx +++ b/src/components/home/MoreFeatures.tsx @@ -5,6 +5,7 @@ import {Theme, moreFeatures} from "@site/src/constants" import LinkButton from "../shared/LinkButton" import {analyticsHandler} from "@site/src/utils" import {pageLinks} from "@site/src/constants/routes" +import Image from "../shared/Image" type MoreFeaturesProps = { feature: MoreFeatures @@ -13,7 +14,7 @@ type MoreFeaturesProps = { const FeatureBox = ({feature}: MoreFeaturesProps) => { return (
- + {feature.title} {feature.title}
) diff --git a/src/components/home/Partners.tsx b/src/components/home/Partners.tsx index b30fd17e85..9adc14a866 100644 --- a/src/components/home/Partners.tsx +++ b/src/components/home/Partners.tsx @@ -3,6 +3,7 @@ import Marquee from "react-fast-marquee" import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-undescore-gray.svg" import {partnerImages} from "@site/src/constants" +import Image from "../shared/Image" const Partners = (): JSX.Element => { return ( @@ -15,7 +16,7 @@ const Partners = (): JSX.Element => {
{partnerImages.map((partner) => (
- {partner.name} + {partner.name}
))}
@@ -23,7 +24,7 @@ const Partners = (): JSX.Element => {
{partnerImages.map((partner) => (
- {partner.name} + {partner.name}
))}
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx index cfc4b177fb..c570de8499 100644 --- a/src/components/playground/Playground.tsx +++ b/src/components/playground/Playground.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useState} from "react" -import {GraphiQL} from "graphiql" +import {GraphiQL} from "graphiql-tc/esm" import {isValidURL} from "@site/src/utils" -import "graphiql/graphiql.css" +import "graphiql-tc/graphiql.min.css" import "../../css/graphiql.css" type FetcherParams = { diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx index 8066b8e017..89a42a3acf 100644 --- a/src/components/shared/Footer.tsx +++ b/src/components/shared/Footer.tsx @@ -3,15 +3,12 @@ import Link from "@docusaurus/Link" import {socials, tailCallBlogUrl} from "@site/src/constants" import TailcallLogo from "@site/static/icons/companies/tailcall-white.svg" import {pageLinks} from "@site/src/constants/routes" +import Image from "./Image" const Footer = (): JSX.Element => { return (