Skip to content

feat(docs): surface external-service homepage links from block metadata #5034

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
waleedlatif1 wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

feat(docs): surface external-service homepage links from block metadata #5034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d54af8
feat(docs): surface external-service homepage links from block metadata
waleedlatif1 Jun 13, 2026
73a538f
fix(docs): style block-info-card visit link as a clean bordered pill
waleedlatif1 Jun 13, 2026
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
55 changes: 17 additions & 38 deletions apps/docs/components/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3704,44 +3704,23 @@ export function QdrantIcon(props: SVGProps<SVGSVGElement>) {

export function QuartrIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} viewBox='0 0 151 40' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M11.5483 29.9995C11.5483 35.5222 19.8031 39.9995 26.1809 39.9995C29.574 39.9995 32.6254 38.7323 34.7384 36.7144L26.1809 29.9995H11.5483Z'
fill='currentColor'
/>
<path
d='M0 29.9996C0 35.5222 5.17047 39.9995 11.5483 39.9995V19.9998C5.17047 19.9998 0 24.4768 0 29.9996Z'
fill='currentColor'
/>
<path
d='M26.1808 9.99989V27.5075H37.7292V10.0249C37.7173 4.46985 32.552 -0.0135841 26.1808 2.98331e-05H11.4362V0.00114226C5.11012 0.0536532 0 4.50986 0 9.99989V19.9998H11.5483V9.99989H26.1808'
fill='currentColor'
/>
<path d='M28.1898 29.3275L40.7827 38.9295V29.3275H28.1898Z' fill='currentColor' />
<path
d='M88.7938 25.1089H88.7527C87.927 29.0309 85.4089 30.806 82.0238 30.806C77.0289 30.806 75.2949 27.5033 75.2949 23.3752V11.0324H78.8865V22.4671C78.8865 25.1089 80.0423 27.5033 83.5102 27.5033C86.8123 27.5033 88.7938 25.6872 88.7938 22.4671V11.0324H92.3854V30.3106H88.7938V25.1089Z'
fill='currentColor'
/>
<path
d='M107.351 23.1277V22.2193H101.613C99.1774 22.2193 97.8563 23.1277 97.8563 24.82C97.8563 26.3063 98.8062 27.7095 101.613 27.7095C105.163 27.7095 107.351 25.7697 107.351 23.1277ZM107.351 25.3982H107.31C106.443 28.948 103.842 30.7235 100.499 30.7235C96.7419 30.7235 94.3067 28.907 94.3067 25.2742C94.3067 21.8892 96.4529 19.371 101.118 19.371H107.351V18.3389C107.351 15.3254 106.196 13.6742 103.14 13.6742C100.375 13.6742 98.8473 14.9538 98.3108 18.1324L94.8843 17.6371C95.5447 13.1375 98.1869 10.6193 103.264 10.6193C108.631 10.6193 110.943 13.3438 110.943 18.2976V30.3106H107.351V25.3982'
fill='currentColor'
/>
<path
d='M112.909 30.3106V11.0324H116.5V16.9767H116.583C117.367 12.477 119.184 11.0324 122.28 11.0324H123.477V14.995H121.743C118.111 14.995 116.5 16.3988 116.5 20.1141V30.3106H112.909'
fill='currentColor'
/>
<path
d='M128.24 14.1166L125.391 15.0444V11.0205H128.24V5.69549H131.832V11.0205H137.982V15.0146L131.832 14.1166V24.0654C131.832 26.2122 132.657 27.3266 134.804 27.3266C135.836 27.3266 136.703 27.1203 137.735 26.8313L138.189 30.1339C136.868 30.5465 135.836 30.7944 134.06 30.7944C130.015 30.7944 128.24 28.1524 128.24 24.5609V14.1166'
fill='currentColor'
/>
<path
d='M140.129 30.3106V11.0324H143.72V16.9767H143.803C144.587 12.477 146.403 11.0324 149.499 11.0324H150.697V14.995H148.963C145.33 14.995 143.72 16.3988 143.72 20.1141V30.3106H140.129'
fill='currentColor'
/>
<path
d='M70.4206 19.1212C70.4206 14.0209 66.7718 10.045 61.8913 10.045C57.0108 10.045 53.0603 14.0209 53.0603 19.1212C53.0603 24.5028 56.9397 27.7175 61.8913 27.7175C66.8429 27.7175 70.4206 24.5028 70.4206 19.1212V19.1212ZM49.7827 19.1615C49.7827 11.9726 55.2655 6.67151 61.8913 6.67151C68.553 6.67151 73.6979 11.9726 73.6979 19.1615C73.6979 23.4184 71.6333 26.3923 68.9972 28.6411L72.0609 34.2237V34.304H68.4629L66.3614 30.2878C65.1145 30.7696 63.423 31.051 61.8913 31.051C55.1227 31.051 49.7827 26.3098 49.7827 19.1615'
fill='currentColor'
/>
<svg {...props} viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
<rect width='32' height='32' rx='6' fill='white' />
<g transform='translate(6 6.19) scale(0.16624)'>
<path
d='M34.0674 88.4993C34.0674 104.791 58.4191 117.999 77.2336 117.999C87.2434 117.999 96.2453 114.261 102.478 108.308L77.2336 88.4993H34.0674Z'
fill='black'
/>
<path
d='M0 88.4993C0 104.791 15.253 117.999 34.0677 117.999V58.9997C15.253 58.9997 0 72.2071 0 88.4993Z'
fill='black'
/>
<path
d='M77.2339 29.4999V81.1477H111.302V29.5736C111.267 13.1861 96.0292 -0.0400894 77.2339 7.20269e-05H33.737V0.00335371C15.075 0.158262 0 13.3042 0 29.4999V58.9997H34.0677V29.4999H77.2339'
fill='black'
/>
<path d='M83.1602 86.5171L120.31 114.843V86.5171H83.1602Z' fill='black' />
</g>
</svg>
Comment on lines 3705 to 3724

@greptile-apps greptile-apps Bot Jun 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 QuartrIcon hardcodes fill='black' instead of fill='currentColor'

Every other icon in this file renders its paths with fill='currentColor' so they inherit the parent's text color — in BlockInfoCard that's text-white, which makes them appear as white silhouettes on the colored card background. The new QuartrIcon instead embeds a self-contained white rounded rectangle with black paths. On Quartr's color="#000000" card the icon will render as a white boxed app-icon floating inside a black panel rather than a clean white monochrome glyph like every other integration icon. If the card background ever changes (or the icon is used in a different listing context), the hardcoded colors will not adapt.

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!

)
}
Comment on lines +3707 to 3726

@greptile-apps greptile-apps Bot Jun 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 QuartrIcon ignores color context

The new icon embeds a hard-coded fill='white' background rect and fill='black' paths, so it no longer responds to text-white or any CSS color applied by the parent. Every other icon in the file uses fill='currentColor', which lets the caller (e.g. BlockInfoCard's size-10 text-white) control the fill. On a dark-mode docs site or any non-white background the icon will render as a white square with a black logo regardless of the surrounding theme.

Expand Down
56 changes: 48 additions & 8 deletions apps/docs/components/ui/block-info-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,64 @@ interface BlockInfoCardProps {
type: string
color: string
icon?: React.ComponentType<{ className?: string }>
/** Display name of the external service, used as the outbound link label. */
name?: string
/** Canonical homepage of the external service; rendered as an outbound link. */
href?: string
}

/** Strips the protocol and `www.` so the link reads as a bare domain. */
function formatHostname(href: string): string {
try {
return new URL(href).hostname.replace(/^www\./, '')
} catch {
return href
}
}

export function BlockInfoCard({
type,
color,
icon: IconComponent,
name,
href,
}: BlockInfoCardProps): React.ReactNode {
const ResolvedIcon = IconComponent || blockTypeToIconMap[type] || null

return (
<div
className='mb-6 flex items-center justify-center overflow-hidden rounded-lg p-8'
style={{ background: color }}
>
{ResolvedIcon ? (
<ResolvedIcon className='size-10 text-white' />
) : (
<div className='font-mono text-white text-xl opacity-70'>{type.substring(0, 2)}</div>
<div className='not-prose mb-6'>
<div
className='flex items-center justify-center overflow-hidden rounded-lg p-8'
style={{ background: color }}
>
{ResolvedIcon ? (
<ResolvedIcon className='size-10 text-white' />
) : (
<div className='font-mono text-white text-xl opacity-70'>{type.substring(0, 2)}</div>
)}
</div>
{href && (
<a
href={href}
target='_blank'
rel='noopener noreferrer'
className='mt-3 inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] px-3 py-1.5 font-normal text-[var(--text-muted)] text-sm no-underline transition-colors hover:bg-[var(--surface-4)] hover:text-[var(--text-body)]'
>
{name ? `Visit ${name}` : formatHostname(href)}
<svg
aria-hidden='true'
className='size-3 shrink-0 opacity-70'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap='round'
strokeLinejoin='round'
>
<path d='M7 17 17 7' />
<path d='M7 7h10v10' />
</svg>
</a>
)}
</div>
)
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/agentmail.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage email inboxes, threads, and messages with AgentMail

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="agentmail"
color="#000000"
name="AgentMail"
href="https://agentmail.to"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/agentphone.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Provision numbers, send SMS and iMessage, and place voice calls wit

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="agentphone"
color="linear-gradient(135deg, #1a1a1a 0%, #0a2a14 100%)"
name="AgentPhone"
href="https://agentphone.ai"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/agiloft.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage records in Agiloft CLM

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="agiloft"
color="#001028"
name="Agiloft"
href="https://www.agiloft.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/ahrefs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: SEO analysis with Ahrefs

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="ahrefs"
color="#FFFFFF"
name="Ahrefs"
href="https://ahrefs.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/airtable.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Read, create, and update Airtable

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="airtable"
color="#FFFFFF"
name="Airtable"
href="https://www.airtable.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/airweave.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Search your synced data collections

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="airweave"
color="#6366F1"
name="Airweave"
href="https://airweave.ai"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/algolia.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Search and manage Algolia indices

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="algolia"
color="#003DFF"
name="Algolia"
href="https://www.algolia.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/amplitude.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Track events and query analytics from Amplitude

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="amplitude"
color="#1B1F3B"
name="Amplitude"
href="https://amplitude.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/apify.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Run Apify actors and retrieve results

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="apify"
color="#FFFFFF"
name="Apify"
href="https://apify.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/apollo.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Search, enrich, and manage contacts with Apollo.io

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="apollo"
color="#EBF212"
name="Apollo"
href="https://www.apollo.io"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/appconfig.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage and retrieve configuration with AWS AppConfig

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="appconfig"
color="linear-gradient(45deg, #B0084D 0%, #FF4F8B 100%)"
name="AWS AppConfig"
href="https://aws.amazon.com/systems-manager/features/appconfig"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/arxiv.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Search and retrieve academic papers from ArXiv

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="arxiv"
color="#FFFFFF"
name="ArXiv"
href="https://arxiv.org"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/asana.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Interact with Asana

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="asana"
color="#FFFFFF"
name="Asana"
href="https://asana.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/ashby.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage candidates, jobs, and applications in Ashby

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="ashby"
color="#5D4ED6"
name="Ashby"
href="https://ashbyhq.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/athena.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Run SQL queries on data in Amazon S3 using AWS Athena

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="athena"
color="linear-gradient(45deg, #4D27A8 0%, #A166FF 100%)"
name="Athena"
href="https://aws.amazon.com/athena"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/attio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage records, notes, tasks, lists, comments, and more in Attio CR

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="attio"
color="#1D1E20"
name="Attio"
href="https://attio.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/azure_devops.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Interact with Azure DevOps pipelines, builds, and work items

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="azure_devops"
color="#0078D4"
name="Azure DevOps"
href="https://azure.microsoft.com/products/devops"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/box.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage files, folders, and e-signatures with Box

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="box"
color="#FFFFFF"
name="Box"
href="https://www.box.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/brandfetch.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Look up brand assets, logos, colors, and company info

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="brandfetch"
color="#000000"
name="Brandfetch"
href="https://brandfetch.com"
/>

## Usage Instructions
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/content/docs/en/integrations/brex.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ description: Manage expenses, receipts, transactions, and team data in Brex

import { BlockInfoCard } from "@/components/ui/block-info-card"

<BlockInfoCard
<BlockInfoCard
type="brex"
color="#171717"
name="Brex"
href="https://www.brex.com"
/>

{/* MANUAL-CONTENT-START:intro */}
Expand Down
Loading
Loading