render readme files

components/FileListing.tsx

@@ -123,9 +123,16 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   if ('folder' in resp) {
     const { children } = resp
+
+    // Image preview rendering preparations
     const imagesInFolder: ImageDecorator[] = []
     const imageIndexDict: { [key: string]: number } = {}
     let imageIndex = 0
+
+    // README rendering preparations
+    let renderReadme = false
+    let readmeFile = null
+
     children.forEach((c: any) => {
       if (fileIsImage(c.name)) {
         imagesInFolder.push({
@@ -136,6 +143,11 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         imageIndexDict[c.id] = imageIndex
         imageIndex += 1
       }
+
+      if (c.name.toLowerCase() === 'readme.md') {
+        renderReadme = true
+        readmeFile = c
+      }
     })
 
     return (
@@ -202,6 +214,12 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
             <FileListItem fileContent={c} />
           </div>
         ))}
+
+        {renderReadme && (
+          <div className="border-t">
+            <MarkdownPreview file={readmeFile} standalone={false} />
+          </div>
+        )}
       </div>
     )
   }

components/previews/MarkdownPreview.tsx

@@ -16,7 +16,7 @@ import DownloadBtn from '../DownloadBtn'
 
 const fetcher = (url: string) => axios.get(url).then(res => res.data)
 
-const MarkdownPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
   const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -26,14 +26,14 @@ const MarkdownPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   if (error) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className={`${standalone ? 'shadow bg-white rounded p-3' : ''}`}>
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white rounded p-3">
+      <div className={standalone ? 'shadow bg-white rounded p-3' : ''}>
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -41,14 +41,16 @@ const MarkdownPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="markdown-body shadow bg-white rounded p-3">
+      <div className={standalone ? 'markdown-body shadow bg-white rounded p-3' : 'markdown-body p-3'}>
         <ReactMarkdown remarkPlugins={[gfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
           {data}
         </ReactMarkdown>
       </div>
-      <div className="mt-4">
-        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
-      </div>
+      {standalone && (
+        <div className="mt-4">
+          <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+        </div>
+      )}
     </>
   )
 }