Skip to content

Add bookmark banner to landing page #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrmps wants to merge 1 commit into
base: main
Choose a base branch
from
+49 −1
Open

Add bookmark banner to landing page #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion components/features/home-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { GitHubStarsButton } from "@/components/ui/shadcn-io/github-stars-button
import { Banner } from "@/components/marketing/banner";
import { SiteFooter } from "@/components/layout/site-footer";
import { BookmarkletLink } from "@/components/marketing/bookmarklet";
import { BookmarkBanner } from "@/components/marketing/bookmark-banner";
import { AdSpot } from "@/components/marketing/ad-spot";
import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
Expand Down Expand Up @@ -89,11 +90,12 @@ export function HomeContent() {

<main className="flex min-h-screen flex-col items-center bg-background p-4 pt-20 text-foreground sm:pt-24 md:p-24 pb-24 lg:pb-4">
<div className="z-10 mx-auto flex w-full max-w-lg flex-col items-center justify-center sm:mt-16">
<BookmarkBanner />
<GitHubStarsButton
username="mrmps"
repo="SMRY"
formatted={true}
className="mb-10 mr-4"
className="mt-4 mb-10 mr-4"
/>
<h1 className="text-center text-4xl font-semibold text-foreground md:text-5xl">
<Image
Expand Down
46 changes: 46 additions & 0 deletions components/marketing/bookmark-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
"use client";

import { useSyncExternalStore } from "react";

const emptySubscribe = () => () => {};

function useIsMac() {
return useSyncExternalStore(
emptySubscribe,
() => navigator.platform.toLowerCase().includes("mac"),
() => true // Assume Mac on server for SSR
);
}

export function BookmarkBanner() {
const isMac = useIsMac();

return (
<div
className="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-foreground"
style={{
backdropFilter: "blur(40px)",
WebkitBackdropFilter: "blur(40px)",
backgroundImage:
"linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0px, rgba(0, 0, 0, 0) 100%), linear-gradient(100deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0) 25%)",
boxShadow:
"rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 2px",
}}
Comment on lines +22 to +28
Copy link
Contributor

@greptile-apps greptile-apps bot Jan 20, 2026

Choose a reason for hiding this comment

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

violates design philosophy - uses inline style prop with hardcoded rgba values and complex gradients instead of semantic design tokens

Per DESIGN_PHILOSOPHY.md:

  • Should use semantic tokens (bg-accent, bg-card, border-border) that auto-adapt to dark mode
  • "Avoid hardcoded Tailwind colors (e.g., gray-100, gray-800)" - this applies to inline rgba values too
  • Backdrop blur effects with complex gradients don't match the "investor update" aesthetic
Suggested change
backdropFilter: "blur(40px)",
WebkitBackdropFilter: "blur(40px)",
backgroundImage:
"linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0px, rgba(0, 0, 0, 0) 100%), linear-gradient(100deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0) 25%)",
boxShadow:
"rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 2px",
}}
className="inline-flex items-center gap-2 rounded-lg border border-border bg-accent/50 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur-sm"

Context Used: Context from dashboard - AGENTS.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

>
<span
style={{ textShadow: "rgba(0, 0, 0, 0.05) 0px 1px 0px" }}
>
Bookmark us!
</span>
Comment on lines +30 to +34
Copy link
Contributor

@greptile-apps greptile-apps bot Jan 20, 2026

Choose a reason for hiding this comment

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

inline style prop with hardcoded rgba values should use Tailwind utility classes with semantic tokens instead

Suggested change
<span
style={{ textShadow: "rgba(0, 0, 0, 0.05) 0px 1px 0px" }}
>
Bookmark us!
</span>
<span>
Bookmark us!
</span>

Context Used: Context from dashboard - AGENTS.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

<span className="inline-flex items-center gap-1">
<kbd className="inline-flex min-h-[26px] min-w-[26px] items-center justify-center rounded-md border border-border bg-background px-2 font-mono text-xs text-foreground shadow-sm [border-bottom-width:2px]">
{isMac ? "⌘" : "Ctrl"}
</kbd>
<span className="text-[11px] text-muted-foreground">+</span>
<kbd className="inline-flex min-h-[26px] min-w-[26px] items-center justify-center rounded-md border border-border bg-background px-2 font-mono text-xs text-foreground shadow-sm [border-bottom-width:2px]">
D
</kbd>
</span>
</div>
);
}