feat(repository): display ReadMe using MarkdownToJSX component
+ 13
- 7
@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1663707497509,
+  "_generatedAtUnix": 1663708828286,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "islands": {

...
@@ -58,7 +58,7 @@
       "pathSource": "./app/views/repository/RepositoryCreateView.tsx"
     },
     "RepositoryDetailsView": {
-      "hash": "1cd767882e2f20c35576fb1b77432c5ea01231de",
+      "hash": "886a76224620bcbb3ff973bbeb2fccfd944e21cd",
       "pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
     },
     "RepositoryExploreView": {

app/views/repository/RepositoryDetailsView.tsx
@@ -11,7 +11,7 @@ import type {
   RepositoryFile,
   RepositoryFileContent,
 } from "../../types";
-import { Layout, PageWrapper } from "../../components";
+import { Card, Layout, MarkdownToJsx, PageWrapper } from "../../components";
 // app islands
 import RepositoryInitialSetup from "../../islands/RepositoryInitialSetup";
 import RepositoryTreeView from "../../islands/RepositoryTreeView";

...
@@ -106,11 +106,17 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
           </div>
         )}
         {readmeFileContent != null && (
-          <div>
+          <div style={{ width: "100%" }}>
             <h3>Read Me</h3>
-            <code>
-              <pre>{readmeFileContent.content}</pre>
-            </code>
+            <Card
+              style={{ width: "100%" }}
+              themeScheme={commonProps.themeScheme}
+            >
+              <MarkdownToJsx
+                markdown={readmeFileContent.content}
+                themeScheme={commonProps.themeScheme}
+              />
+            </Card>
           </div>
         )}
       </PageWrapper>