Feature: Added tab to display README from GitHub repo

[epoll31]

I added a tab that loads the readme.md file from GitHub through the Octokit API (lib/actiona/get-readme.ts).

I pass load that into a component name Readme in components/projects/project-readme.tsx that uses the react-markdown package. I imported the same plugins using #3 as a reference

• rehype-autolink-headings
• rehype-pretty-code
• rehype-raw
• rehype-slug
• remark-gfm

For the code block syntax highlighting I used Shiki v1.3.0 with the 'github-light' theme. I do the actual syntax highlighting in a server action (lib/actions/code-to-html.ts) instead of as a plugin to react-markdown which makes it very easy to use and customize.

For the markdown components, I implemented most of them directly in components/projects/project-readme.tsx to keep the imports minimal since most of them are simple. However, I did implement Code in components/md/Code.tsx since it is a bit more complex and requires hooks to perform a call the codeToHtml server action.

I checked my markdown implementation using a complete markdown example.

I kept the styling very minimal, but feel free to let me know how you would like them to look and I can add to the styles.

Here are screenshots of the results of that so that you can see what it looked like.

[vercel]

@epoll31 is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.