seapagan / react-github-readme-button Goto Github PK

Relative links, for example, to files in the repository, do not work correctly. They are relative to GitHub root not the relevant project.

GitHub is case-insensitive for READMEs - readme.md and Readme.md` will both work.

While this component allows you to specify the filename, it will not automatically try upper/lower versions.

The issue seems to be related to the markdownjs library way we import the highlight.js library used internally and a change in Vite. It should work fine in any default CRA project, though.

Error is :

11:03:43.946 ReferenceError: require is not defined
Please report this to https://github.com/markedjs/marked.
    highlight index-bf2e5e5a.js:29758
    code index-bf2e5e5a.js:27241
    parse index-bf2e5e5a.js:27483
    parse index-bf2e5e5a.js:27425
    J index-bf2e5e5a.js:27692
    pP index-bf2e5e5a.js:29812
    uc index-bf2e5e5a.js:5987
    Ws index-bf2e5e5a.js:7234
    fE index-bf2e5e5a.js:7106
    w index-bf2e5e5a.js:626
    ue index-bf2e5e5a.js:660
    r5 index-bf2e5e5a.js:673
    r5 index-bf2e5e5a.js:794
    W8 index-bf2e5e5a.js:1
    <anonymous> index-bf2e5e5a.js:32776
index-bf2e5e5a.js:formatted:4857

The fix is to import the library instead of requiring it later in the code.

End users (during development time) will need a sass compiler installed due to the component using the SCSS language for styles. Without this, the application will error.

There are 2 ways to fix this:

1. add sass as a dev dependency to this component
2. compile the SCSS to CSS at build time.
3. Re-write as CSS, there is really very little of it anyway, and SCSS is only used for nesting

Using a GitHub emoji in the README like :smile: does not yet work.

It should show 😄

The button should be a <button> element for semantic reasons.
The CSS should therefore remove all button-specific styles (in a cross-browser fashion) to result in the same base display that can then be built upon by the consumer as required.

We need to fix the CSS to be more specific. Cannot really use CSS modules since the highlighting component needs a specific un-mangled class.

Local images referenced in the README are not displayed due to being relative links with no base URL.

if the README is smaller than the popup, so it will not scroll, the mouse wheel is actually passed down to the underlying app. Ideally, in this case, the scrolling should be disabled completely.

When the mouse scroll reaches the top or bottom of the popup content, it will scroll the underlying application instead of stopping.

While most GitHub READMEs are markdown, other formats are used (see https://github.com/github/markup/blob/master/README.md#markups).

The other more common one is .rst (reStructuredText)

GitHub markdown processor supports all of these, can we use that instead (but I have only found a version for Ruby not JS) and detect the correct README file (it would require either a GraphQL call to find the actual README or try/catch with a list of extensions)