mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-07 07:55:16 +02:00
chore: add a sticky header with CTAs
This commit is contained in:
Abhishek Kumar
parent
c06c457505
commit
1a7eb08aea
6 changed files with 49 additions and 64 deletions
|
|
@ -1,8 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { Star } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { GitHubStarBadge } from '@/components/layout/GitHubStarBadge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { useAuth } from '@/lib/auth';
|
||||
|
|
@ -36,17 +36,9 @@ export default function OverviewPage() {
|
|||
</CardHeader>
|
||||
<CardContent>
|
||||
{isOSSMode && (
|
||||
<Button asChild className="mb-6">
|
||||
<a
|
||||
href="https://github.com/dograh-hq/dograh"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center"
|
||||
>
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
Star us on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
<div className="mb-6">
|
||||
<GitHubStarBadge label="Star us on GitHub" showCount source="overview_page" />
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -385,7 +385,7 @@ export const WorkflowEditorHeader = ({
|
|||
|
||||
{/* GitHub star badge - desktop only */}
|
||||
<div className="hidden md:block">
|
||||
<GitHubStarBadge className="border-[#3a3a3a] text-white" />
|
||||
<GitHubStarBadge className="border-[#3a3a3a] text-white" source="workflow_editor_header" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
import { Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import posthog from "posthog-js";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { PostHogEvent } from "@/constants/posthog-events";
|
||||
import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar";
|
||||
|
||||
import { AppSidebar } from "./AppSidebar";
|
||||
|
|
@ -28,6 +30,7 @@ function AppHeader() {
|
|||
href="https://join.slack.com/t/dograh-community/shared_invite/zt-2z2i1p37n-CkHFbPWDCQ~hNqmKeFGJiQ"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => posthog.capture(PostHogEvent.SLACK_COMMUNITY_CLICKED, { source: "app_header" })}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
|
|
@ -36,7 +39,7 @@ function AppHeader() {
|
|||
<span className="hidden sm:inline">Join Slack</span>
|
||||
</a>
|
||||
</Button>
|
||||
<GitHubStarBadge />
|
||||
<GitHubStarBadge source="app_header" />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import {
|
|||
Megaphone,
|
||||
Phone,
|
||||
Settings,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Workflow,
|
||||
Wrench,
|
||||
|
|
@ -276,52 +275,6 @@ export function AppSidebar() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Star us on GitHub for OSS mode - at the top */}
|
||||
{provider !== "stack" && (
|
||||
<div className="mt-3 px-2">
|
||||
{effectiveState === "collapsed" ? (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-full hover:bg-accent hover:text-accent-foreground"
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href="https://github.com/dograh-hq/dograh"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="sr-only">Star us on GitHub</span>
|
||||
</a>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p>Star us on GitHub</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start hover:bg-accent hover:text-accent-foreground"
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href="https://github.com/dograh-hq/dograh"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
<span className="ml-2">Star us on GitHub</span>
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent className={cn(
|
||||
|
|
|
|||
|
|
@ -1,24 +1,59 @@
|
|||
"use client";
|
||||
|
||||
import posthog from "posthog-js";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { PostHogEvent } from "@/constants/posthog-events";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function GitHubStarBadge({ className }: { className?: string }) {
|
||||
interface GitHubStarBadgeProps {
|
||||
className?: string;
|
||||
label?: string;
|
||||
showCount?: boolean;
|
||||
source: string;
|
||||
}
|
||||
|
||||
export function GitHubStarBadge({ className, label, showCount, source }: GitHubStarBadgeProps) {
|
||||
const [starCount, setStarCount] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showCount) return;
|
||||
fetch("https://api.github.com/repos/dograh-hq/dograh")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.stargazers_count != null) {
|
||||
const count = data.stargazers_count as number;
|
||||
setStarCount(count >= 1000 ? `${(count / 1000).toFixed(1)}k` : String(count));
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [showCount]);
|
||||
|
||||
const hasCount = showCount && starCount;
|
||||
|
||||
return (
|
||||
<a
|
||||
href="https://github.com/dograh-hq/dograh"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => posthog.capture(PostHogEvent.GITHUB_STAR_CLICKED, { source })}
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-md border text-sm leading-none hover:opacity-80 transition-opacity",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1.5 bg-muted px-2.5 py-1.5 rounded-md">
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1.5 bg-muted px-2.5 py-1.5",
|
||||
hasCount ? "rounded-l-md border-r" : "rounded-md"
|
||||
)}>
|
||||
<svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
<span className="font-medium">Star</span>
|
||||
<span className="font-medium">{label || "Star"}</span>
|
||||
</span>
|
||||
{hasCount && (
|
||||
<span className="px-2.5 py-1.5 font-medium">{starCount}</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,6 @@ export const PostHogEvent = {
|
|||
RECORDING_PLAYED: "recording_played",
|
||||
TRANSCRIPT_VIEWED: "transcript_viewed",
|
||||
WEB_CALL_INITIATED: "web_call_initiated",
|
||||
GITHUB_STAR_CLICKED: "github_star_clicked",
|
||||
SLACK_COMMUNITY_CLICKED: "slack_community_clicked",
|
||||
} as const;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue