Show README.md file contents

Question

I am downloading README.md file contents using axios in react. The contents are loaded in base64. I want to show all of the contents inside this readme file. I followed these answers but none of them worked for me. Below is my code.

import "./styles.css";
import { useEffect, useState } from 'react';
import axios from 'axios';

export default function App() {
  const [md, setMd] = useState('');
  useEffect(() => {
        async function fetchReadMeContents() {
            const response = await axios({
                url: "https://api.github.com/repos/zafar-saleem/anymnd/git/blobs/7af90ceab018a889b46634331cab822d94ff2b19",
            });
            console.log('response: ', response.data);
            const text = await response.data.content;
            setMd(text);
        }
        fetchReadMeContents();
    }, []);
  return (
    <code className="App">
      {md}
    </code>
  );
}

The above code renders below.

IyMgUmVxdWlyZW1lbnRzCkJlbG93IGlzIHRoZSBnZXR0aW5nIHN0YXJ0ZWQg c2VjdGlvbiB0byBzdGFydCB0aGUgcHJvamVjdC4gRm9yIG1vcmUgZGV0YWls cywgcGxlYXNlIHJlYWQgdGhlIFt3aWtpXShodHRwczovL2dpdGh1Yi5jb20v emFmYXItc2FsZWVtL2JyZWxhLXRlc3Qvd2lraSkgcGFnZS4KCiMjIEdldHRp bmcgc3RhcnRlZApJbiBvcmRlciB0byBydW4gdGhpcyBwcm9qZWN0IGluIHRo ZSBicm93c2VyIHN1Y2Nlc3NmdWxseSwgcGxlYXNlIGZvbGxvdyB0aGUgc3Rl cHMgYmVsb3chCgogICAgMS4gQ2xvbmUgdGhpcyByZXBvc2l0b3J5LgogICAg Mi4gY2QgaW50byBgL3Jvb3RgIGkuZS4gYGJyZWxhLXRlc3QvYCBkaXJlY3Rv cnkuCiAgICAzLiBSdW4gYHlhcm4vbnBtIGluc3RhbGxgIGNvbW1hbmQgdG8g ZG93bmxvYWQgYW5kIGluc3RhbGwgYWxsIGRlcGVuZGVuY2llcy4KICAgIDQu IFRvIHJ1biB0aGlzIHByb2plY3QgdXNlIGBucG0gc3RhcnQveWFybmAgY29t bWFuZCBpbiBjb21tYW5kIGxpbmUuCiAgICA

Here is codesandbox link https://codesandbox.io/s/floral-wave-8rf4l?file=/src/App.js:0-590.

How can I render readme file contents?

Why is your markdown in base64? Doesn't that defeat the purpose of having it as markdown. — Andy, Oct 23 '21 at 04:54
@Andy Maybe that is a question need to be asked from github team. — Om3ga, Oct 23 '21 at 05:07

score 0 · Answer 1 · answered Oct 23 '21 at 05:23

You can use atob() and btoa() built-in functions to convert base64 and strings together.

1. Convert String to Base64 (MDN describes btoa)

The btoa() method creates a Base64-encoded ASCII string from a binary string (i.e., a String object in which each character in the string is treated as a byte of binary data).

const encodedData = btoa('Hello, world'); // encode a string

2. Convert Base64 to String (MDN describes atob)

The atob() function decodes a string of data that has been encoded using Base64 encoding.

const decodedData = atob(encodedData); // decode the string

So you can use the following code to render the contents of your README.md file.

useEffect(() => {
  async function fetchReadMeContents() {
    const response: any = await axios({
      url: readmeFileUrl,
    });
    const text: any = await response.text();
    if (response.status === 200) {
      setMd(atob(text));
    }
  }
  if (readmeFileUrl) {
    fetchReadMeContents();
  }
}, [readmeFileUrl]);

return (
  <code>{md}</code>
);

That seems to be working but it does not format the contents as it is in readme file. Any idea about that? — Om3ga, Oct 23 '21 at 05:27
Check if it can help you. [https://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div](https://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div) — fsefidabi, Oct 23 '21 at 05:31

Show README.md file contents

1 Answers1