[docs]: add links to source

[Jay-Karia]

trafficstars

Feature description

Add a link in every component documentation to their respective GitHub source.

Affected component/components

Every

Additional Context

Inspired from Radix UI

Next UI

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[doshi-kevin]

Hey Jay, could you please assign me this issue @Jay-Karia

[doshi-kevin]

And could you please specify in detail about the issue

[Jay-Karia]

Hey Jay, could you please assign me this issue @Jay-Karia

There is no need to assign issues, you can send a PR

[Jay-Karia]

Add a link to every component header which links to it's source.

There are two different sources for every component: Default and New York. Default: https://github.com/shadcn-ui/ui/tree/main/apps/www/registry/default/ui New York: https://github.com/shadcn-ui/ui/tree/main/apps/www/registry/new-york/ui

The link would be similar to:

Example: The source for Accordion lies here: Default: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/accordion.tsx NewYork: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/new-york/ui/accordion.tsx

[doshi-kevin]

Yeah got it, so you want to add an extra button to every component to the documentation which refers it's source to the github page. Am I right ? New to open source, thus asking so many questions

[Jay-Karia]

Yeah got it, so you want to add an extra button to every component to the documentation which refers it's source to the github page. Am I right ? New to open source, thus asking so many questions

Yes

[Usman-T]

Hey, in the codebase the docs and api references are there via the content layer. They are found from the allDocs array which is present in contentlayer/generated and are mapped through based on the query params, like this:

 {doc.links?.api && (
  <Link
    href={doc.links.api}
    target="_blank"
    rel="noreferrer"
    className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
  >
    API Reference
    <ExternalLinkIcon className="h-3 w-3" />
  </Link>
)}

So if we want to add a new link like source, we would have to update the contentlayer/generated file and add the sources to all components and then map them like this for example,

{doc.links?.source && (
  <Link
    href={doc.links.source}
    target="_blank"
    rel="noreferrer"
    className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
  >
    Source
    <ExternalLinkIcon className="h-3 w-3" />
  </Link>
)}

But the problem is that the contentlayer is not committed to the repo by the devs so we can't really do much about it. Cheers!

[Jay-Karia]

The rendering logic seems correct.

But, we just have to modify mdx file under apps/www/content/docs/component/accordion.mdx to

links:
  doc: https://www.radix-ui.com/docs/primitives/components/accordion
  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
  source: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/accordion.tsx

(To all components mdx files)

[Usman-T]

We should link only to the default ones? I am gonna create a python script which will Ctrl + P open 'name'.mdx, look for 'api:' and hit Ctrl + Enter. Then it'll write source: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/name.tsx and move to the next component. All the sources should be added correctly. The only edge cases i can think of are the typography and other small ones which don't specifically have a component, so we'll just skip those. Should i do this and open a PR?

[Jay-Karia]

Yeah sure,

For now keep it default

[Usman-T]

Most of them do not have API Reference or Docs external links so I am gonna leave those

[Jay-Karia]

We can add it manually

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.