Merge pull request #2680 from udecode/docs/star-on-github

Star on github

apps/www/package.json

@@ -110,7 +110,7 @@
     "cmdk": "^0.2.0",
     "contentlayer": "0.3.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "10.12.20",
+    "framer-motion": "^10.16.4",
     "jotai": "^2.2.2",
     "lodash.template": "^4.5.0",
     "lucide-react": "^0.277.0",

apps/www/src/components/counting-numbers.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useInView } from 'framer-motion';
+
+export const useCounting = ({
+  duration,
+  end,
+  interval,
+  isInView,
+  reverse,
+  start,
+}: {
+  start: number;
+  end: number;
+  interval: number;
+  duration: number;
+  reverse: boolean;
+  isInView: boolean;
+}) => {
+  const [number, setNumber] = useState(start);
+  const increment =
+    Math.floor(Math.abs(start - end) / (duration / interval)) || 1;
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isInView) {
+      timer = setInterval(() => {
+        setNumber((prevNumber) => {
+          const newNumber = reverse
+            ? prevNumber - increment
+            : prevNumber + increment;
+          const isCompleted = reverse ? newNumber <= end : newNumber >= end;
+
+          if (isCompleted) {
+            clearInterval(timer);
+            return end;
+          }
+
+          return newNumber;
+        });
+      }, interval);
+    }
+
+    return () => clearInterval(timer); // Cleanup timer
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInView]);
+
+  return number;
+};
+
+export function CountingNumbers({
+  value,
+  className,
+  reverse = false,
+  start = reverse ? 1000 : 0,
+  interval = 10,
+  duration = 800,
+}) {
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+  const number = useCounting({
+    start,
+    end: value,
+    interval,
+    duration,
+    reverse,
+    isInView,
+  });
+
+  const formattedNumber = useMemo(
+    () => Intl.NumberFormat().format(number),
+    [number]
+  );
+
+  return (
+    <p className={className} ref={ref}>
+      {formattedNumber}
+    </p>
+  );
+}

apps/www/src/components/site-header.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
 import Link from 'next/link';
 
 import { siteConfig } from '@/config/site';
@@ -9,19 +10,39 @@ import { CommandMenu } from './command-menu';
 import { Icons } from './icons';
 import { MainNav } from './main-nav';
 import { MobileNav } from './mobile-nav';
+import { StarOnGithub } from './star-on-github';
+
+export async function SiteHeader() {
+  const { stargazers_count: count } = await fetch(
+    'https://api.github.com/repos/udecode/plate',
+    {
+      ...(process.env.GITHUB_OAUTH_TOKEN && {
+        headers: {
+          Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
+          'Content-Type': 'application/json',
+        },
+      }),
+      next: {
+        revalidate: 3600,
+      },
+    }
+  )
+    .then((res) => res.json())
+    .catch(() => ({ stargazers_count: 0 }));
 
-export function SiteHeader() {
   return (
     <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
-      <div className="container flex h-14 items-center">
+      <div className="container flex h-14 items-center justify-between">
         <MainNav />
         <MobileNav />
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+        <StarOnGithub count={count} />
+        <div className="flex items-center justify-between space-x-2 md:justify-end">
           <div className="w-full flex-1 md:w-auto md:flex-none">
             <CommandMenu />
           </div>
           <nav className="flex items-center">
             <Link
+              className="inline md:hidden"
               href={siteConfig.links.github}
               target="_blank"
               rel="noreferrer"

apps/www/src/components/star-on-github.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { StarIcon } from 'lucide-react';
+
+import { siteConfig } from '@/config/site';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/registry/default/plate-ui/button';
+
+import { CountingNumbers } from './counting-numbers';
+import { Icons } from './icons';
+
+export function StarOnGithub({ count }: { count: number }) {
+  return (
+    <div className={cn('mx-2 hidden md:block', count > 0 && 'min-w-[225px]')}>
+      <Link
+        className={cn(
+          buttonVariants(),
+          'group relative flex w-full justify-start gap-2 overflow-hidden whitespace-pre rounded-sm',
+          'dark:bg-muted dark:text-foreground',
+          'hover:ring-2 hover:ring-primary hover:ring-offset-2',
+          'transition-all duration-300 ease-out'
+        )}
+        target="_blank"
+        href={siteConfig.links.github}
+      >
+        <span
+          className={cn(
+            'absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12',
+            'bg-white opacity-10',
+            'transition-all duration-1000 ease-out ',
+            cn(
+              count > 0
+                ? 'group-hover:translate-x-[-181px]'
+                : 'group-hover:translate-x-[-135px]'
+            )
+          )}
+        />
+        <Icons.gitHub className="h-4 w-4" />
+        Star on GitHub
+        <div className="hidden items-center gap-1 text-sm text-muted-foreground md:flex">
+          <StarIcon className="h-4 w-4 transition-all duration-300 group-hover:text-[#e3b341]" />
+
+          {count > 0 && (
+            <CountingNumbers
+              value={count}
+              className="font-medium text-background dark:text-foreground"
+            />
+          )}
+        </div>
+      </Link>
+    </div>
+  );
+}

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalEnv": ["CI"],
+  "globalEnv": ["CI", "GITHUB_OAUTH_TOKEN"],
   "pipeline": {
     "dev": {
       "cache": false,