Skip to content

Commit 1c0821d

Browse files
kkratterfclaude
kkratterf
and
claude
committed
feat(playground): add social links, tooltips, OG image and favicon
- Add GitHub, LinkedIn, X social links with COSS tooltips - Move social links to left of Run/Share buttons - Add OG image and favicon for social sharing - Add comprehensive meta tags (Open Graph, Twitter Card) - Update page title and description Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 29bb4d9 commit 1c0821d

File tree

5 files changed

+137
-31
lines changed

5 files changed

+137
-31
lines changed

‎packages/playground/index.html‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,37 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>fratmscript playground</title>
6+
7+
<!-- Favicon -->
8+
<link rel="icon" type="image/png" href="favicon.png" />
9+
<link rel="apple-touch-icon" href="favicon.png" />
10+
11+
<!-- Primary Meta Tags -->
12+
<title>fratmscript - JavaScript, ma comme si deve 🤌🏻</title>
13+
<meta name="title" content="fratmscript - JavaScript, ma comme si deve 🤌" />
14+
<meta name="description" content="A fun Neapolitan dialect programming language that compiles to JavaScript. Write code like a true Napoletano!" />
15+
<meta name="author" content="@kkratter" />
16+
<meta name="keywords" content="programming language, javascript, transpiler, neapolitan, italian, compiler, wasm, rust" />
17+
18+
<!-- Open Graph / Facebook -->
19+
<meta property="og:type" content="website" />
20+
<meta property="og:url" content="https://kkratterf.github.io/fratmscript/" />
21+
<meta property="og:title" content="fratmscript - JavaScript, ma comme si deve 🤌" />
22+
<meta property="og:description" content="A fun Neapolitan dialect programming language that compiles to JavaScript. Write code like a true Napoletano!" />
23+
<meta property="og:image" content="https://kkratterf.github.io/fratmscript/og-image.png" />
24+
<meta property="og:site_name" content="fratmscript" />
25+
26+
<!-- Twitter -->
27+
<meta name="twitter:card" content="summary_large_image" />
28+
<meta name="twitter:url" content="https://kkratterf.github.io/fratmscript/" />
29+
<meta name="twitter:title" content="fratmscript - JavaScript, ma comme si deve 🤌" />
30+
<meta name="twitter:description" content="A fun Neapolitan dialect programming language that compiles to JavaScript. Write code like a true Napoletano!" />
31+
<meta name="twitter:image" content="https://kkratterf.github.io/fratmscript/og-image.png" />
32+
<meta name="twitter:creator" content="@kkratter" />
33+
34+
<!-- Theme Color -->
35+
<meta name="theme-color" content="#0a0a0a" />
836
</head>
937
<body>
1038
<div id="root"></div>

‎packages/playground/public/favicon.png‎

11.7 KB
Loading

‎packages/playground/public/og-image.png‎

13.8 KB
Loading

‎packages/playground/src/components/Header.tsx‎

Lines changed: 51 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Button } from '@/components/ui/button'
2+
import { Tooltip, TooltipTrigger, TooltipPopup } from '@/components/ui/tooltip'
23

34
interface HeaderProps {
45
onRun: () => void
@@ -37,6 +38,56 @@ export function Header({ onRun, onShare, isCompiling }: HeaderProps) {
3738
<h1 className="font-bold text-primary text-xl">fratmscript 🤌🏻</h1>
3839
</div>
3940
<div className="flex items-center gap-3">
41+
<div className="flex items-center gap-1">
42+
<Tooltip>
43+
<TooltipTrigger
44+
render={
45+
<a
46+
href="https://github.com/kkratterf/fratmscript"
47+
target="_blank"
48+
rel="noopener noreferrer"
49+
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
50+
aria-label="View on GitHub"
51+
>
52+
<GitHubIcon className="size-4" />
53+
</a>
54+
}
55+
/>
56+
<TooltipPopup>Star this repo 🤌</TooltipPopup>
57+
</Tooltip>
58+
<Tooltip>
59+
<TooltipTrigger
60+
render={
61+
<a
62+
href="https://linkedin.com/in/kkratter"
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
66+
aria-label="LinkedIn"
67+
>
68+
<LinkedInIcon className="size-4" />
69+
</a>
70+
}
71+
/>
72+
<TooltipPopup>Made with love by @kkratter</TooltipPopup>
73+
</Tooltip>
74+
<Tooltip>
75+
<TooltipTrigger
76+
render={
77+
<a
78+
href="https://x.com/kkratter"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
82+
aria-label="X (Twitter)"
83+
>
84+
<XIcon className="size-4" />
85+
</a>
86+
}
87+
/>
88+
<TooltipPopup>Follow for updates</TooltipPopup>
89+
</Tooltip>
90+
</div>
4091
<div className="flex items-center gap-1.5">
4192
<Button onClick={onRun} disabled={isCompiling}>
4293
Run
@@ -45,35 +96,6 @@ export function Header({ onRun, onShare, isCompiling }: HeaderProps) {
4596
Share
4697
</Button>
4798
</div>
48-
<div className="flex items-center gap-1">
49-
<a
50-
href="https://github.com/kkratterf/fratmscript"
51-
target="_blank"
52-
rel="noopener noreferrer"
53-
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
54-
aria-label="View on GitHub"
55-
>
56-
<GitHubIcon className="size-4" />
57-
</a>
58-
<a
59-
href="https://linkedin.com/in/kkratter"
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
63-
aria-label="LinkedIn"
64-
>
65-
<LinkedInIcon className="size-4" />
66-
</a>
67-
<a
68-
href="https://x.com/kkratter"
69-
target="_blank"
70-
rel="noopener noreferrer"
71-
className="hover:bg-accent p-1.5 rounded-md text-muted-foreground hover:text-foreground transition-colors"
72-
aria-label="X (Twitter)"
73-
>
74-
<XIcon className="size-4" />
75-
</a>
76-
</div>
7799
</div>
78100
</header>
79101
)

‎packages/playground/src/components/ui/tooltip.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
"use client";
2+
3+
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
4+
5+
import { cn } from "@/lib/utils";
6+
7+
const TooltipProvider = TooltipPrimitive.Provider;
8+
9+
const Tooltip = TooltipPrimitive.Root;
10+
11+
function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
12+
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
13+
}
14+
15+
function TooltipPopup({
16+
className,
17+
align = "center",
18+
sideOffset = 4,
19+
side = "top",
20+
children,
21+
...props
22+
}: TooltipPrimitive.Popup.Props & {
23+
align?: TooltipPrimitive.Positioner.Props["align"];
24+
side?: TooltipPrimitive.Positioner.Props["side"];
25+
sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
26+
}) {
27+
return (
28+
<TooltipPrimitive.Portal>
29+
<TooltipPrimitive.Positioner
30+
align={align}
31+
className="z-50 transition-[top,left,right,bottom,transform] data-instant:transition-none"
32+
data-slot="tooltip-positioner"
33+
side={side}
34+
sideOffset={sideOffset}
35+
>
36+
<TooltipPrimitive.Popup
37+
className={cn(
38+
"relative flex origin-(--transform-origin) text-balance rounded-md border bg-popover px-2 py-1 text-popover-foreground text-xs shadow-md transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
39+
className,
40+
)}
41+
data-slot="tooltip-popup"
42+
{...props}
43+
>
44+
{children}
45+
</TooltipPrimitive.Popup>
46+
</TooltipPrimitive.Positioner>
47+
</TooltipPrimitive.Portal>
48+
);
49+
}
50+
51+
export {
52+
TooltipProvider,
53+
Tooltip,
54+
TooltipTrigger,
55+
TooltipPopup,
56+
};

0 commit comments

Comments
 (0)