Skip to content

Commit

Permalink
feat(docs): add remote cache counter (#3271)
Browse files Browse the repository at this point in the history
  • Loading branch information
tknickman authored Jan 12, 2023
1 parent 234d530 commit 88b8c5f
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 0 deletions.
10 changes: 10 additions & 0 deletions docs/components/ExtraContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import RemoteCacheCounter from "./RemoteCacheCounter";
import { useTurboSite } from "./SiteSwitcher";

export default function ExtraContent() {
const site = useTurboSite();

if (site === "repo") {
return <RemoteCacheCounter />;
}
}
47 changes: 47 additions & 0 deletions docs/components/RemoteCacheCounter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import cn from "classnames";
import { useState, useEffect } from "react";
import { animated, useSpring, config } from "@react-spring/web";
import useTurborepoMinutesSaved from "../lib/useTurborepoMinutesSaved";
import Link from "next/link";

const counterFormatter = Intl.NumberFormat(undefined, {
minimumIntegerDigits: 7,
maximumFractionDigits: 0,
});

export default function RemoteCacheCounter() {
const [targetMinutes, setTargetMinutes] = useState(0);
const timeSaved = useTurborepoMinutesSaved();
useEffect(() => {
if (timeSaved) {
setTargetMinutes(
timeSaved.local_cache_minutes_saved +
timeSaved.remote_cache_minutes_saved
);
}
}, [timeSaved]);

const spring = useSpring({
from: { minutesSaved: 0 },
minutesSaved: targetMinutes,
config: config.molasses,
});

return (
<Link
href="/repo/docs/core-concepts/remote-caching"
className="group mt-4 w-full h-full rounded-lg p-[1px] bg-gradient-to-r from-red-500 to-blue-500 dark:text-[#9ca3af] text-[#6b7280]"
>
<div className="justify-between h-full rounded-lg p-4 dark:bg-[#111111] bg-white">
<animated.p className="inline-block text-xl bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text text-transparent">
{spring.minutesSaved.to((t) => counterFormatter.format(t))}
</animated.p>
<div className="text-xs">Total Compute Minutes Saved</div>

<div className="text-xs mt-4 group-hover:underline">
Get Started With Remote Caching →
</div>
</div>
</Link>
);
}
38 changes: 38 additions & 0 deletions docs/lib/useTurborepoMinutesSaved.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import useSWR from "swr";
import axios from "axios";

const fetcher = (url) => axios.get(url).then((res) => res.data);

const path =
"https://api.us-east.tinybird.co/v0/pipes/turborepo_time_saved_ticker.json?token=p.eyJ1IjogIjAzYzA0Y2MyLTM1YTAtNDhhNC05ZTZjLThhMWE0NGNhNjhkZiIsICJpZCI6ICJmOWIzMTU5Yi0wOTVjLTQyM2UtOWIwNS04ZDZlNzIyNjEwNzIifQ.A3TOPdm3Lhmn-1x5m6jNvulCQbbgUeQfAIO3IaaAt5k";

const REFRESH_INTERVAL_IN_MS = 3500;

interface QueryResponse {
meta: { name: string; type: string }[];
data: {
last_update_time: string;
remote_cache_minutes_saved: number;
local_cache_minutes_saved: number;
}[];
rows: number;
statistics: {
elapsed: number;
rows_read: number;
bytes_read: number;
};
}

export default function useTurborepoMinutesSaved():
| {
last_update_time: string;
remote_cache_minutes_saved: number;
local_cache_minutes_saved: number;
}
| undefined {
const swr = useSWR<QueryResponse, unknown>(path, fetcher, {
refreshInterval: REFRESH_INTERVAL_IN_MS,
});

return swr.data?.data[0];
}
1 change: 1 addition & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@heroicons/react": "1.0.6",
"@mdx-js/react": "^2.1.4",
"@react-aria/ssr": "3.3.0",
"@react-spring/web": "^9.6.1",
"@sentry/nextjs": "^7.17.3",
"@vercel/analytics": "^0.1.1",
"@vercel/og": "^0.0.20",
Expand Down
2 changes: 2 additions & 0 deletions docs/theme.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useConfig, useTheme } from "nextra-theme-docs";
import { Footer } from "./components/Footer";
import Navigation from "./components/Navigation";
import HeaderLogo from "./components/HeaderLogo";
import ExtraContent from "./components/ExtraContent";
import { Discord, Github } from "./components/Social";

const SITE_ROOT = "https://turbo.build";
Expand Down Expand Up @@ -62,6 +63,7 @@ const theme = {
unstable_staticImage: true,
toc: {
float: true,
extraContent: ExtraContent,
},
font: false,
feedback: {
Expand Down
56 changes: 56 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 comment on commit 88b8c5f

@vercel
Copy link

@vercel vercel bot commented on 88b8c5f Jan 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.