feat: markdown -> html and then display in editor

README.md

@@ -6,7 +6,7 @@
     <br>
 </h1>
 
-<h4 align="center">Source code of <a href="https://pihkaal.me">my personnal website</a>.</h4>
+<h4 align="center">My <a href="https://pihkaal.me">personnal website</a>.</h4>
 
 <p align="center">
     <a href="https://vitejs.dev">
@@ -20,7 +20,7 @@
     </a>
 </p>
 
-<p align="center">
+<p align="center" id="links">
     <a href="https://pihkaal.me">Visit it</a> •
     <a href="#license">License</a>
 </p>

build/manifestPlugin.ts

@@ -4,6 +4,7 @@ import { spawnSync } from "child_process";
 import { Octokit, RestEndpointMethodTypes } from "@octokit/rest";
 import { env } from "./env";
 import { existsSync } from "fs";
+import showdown from "showdown";
 
 type Manifest = {
   files: string[];
@@ -75,6 +76,9 @@ export const manifest = (): Plugin => ({
       await getRepoFileContent("pihkaal", "manifest.json"),
     ) as Manifest;
 
+    showdown.setFlavor("github");
+    const converter = new showdown.Converter();
+
     const projects: Array<Project> = [];
     for (const project of manifest.projects) {
       const { data: repo } = await octokit.repos.get({
@@ -83,9 +87,11 @@ export const manifest = (): Plugin => ({
       });
       const content = await getRepoFileContent(project, "README.md");
 
+      const html = converter.makeHtml(content);
+
       projects.push({
         name: project,
-        content,
+        content: html,
         language: repo.language,
         url: repo.url,
         private: repo.private,
@@ -95,10 +101,11 @@ export const manifest = (): Plugin => ({
     const files: Array<File> = [];
     for (const file of manifest.files) {
       const content = await getRepoFileContent("pihkaal", file);
+      const html = converter.makeHtml(content);
 
       files.push({
         name: file,
-        content,
+        content: html,
       });
     }
 

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "uncache": "rm -f node_modules/.cache/assets",
     "build": "rm -f node_modules/.cache/assets && vite build && tsc",
     "dev": "vite",
     "lint": "eslint src --cache --fix --max-warnings 0",
@@ -23,6 +24,7 @@
     "@types/node": "18.19.6",
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
+    "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
     "@vitejs/plugin-react-swc": "3.5.0",
@@ -36,6 +38,7 @@
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.5.11",
     "sass": "1.70.0",
+    "showdown": "^2.1.0",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
     "vite": "5.0.12",

pnpm-lock.yaml

@@ -36,6 +36,9 @@ importers:
       '@types/react-dom':
         specifier: 18.2.18
         version: 18.2.18
+      '@types/showdown':
+        specifier: ^2.0.6
+        version: 2.0.6
       '@typescript-eslint/eslint-plugin':
         specifier: 6.18.1
         version: 6.18.1(@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)
@@ -75,6 +78,9 @@ importers:
       sass:
         specifier: 1.70.0
         version: 1.70.0
+      showdown:
+        specifier: ^2.1.0
+        version: 2.1.0
       tailwindcss:
         specifier: 3.4.1
         version: 3.4.1
@@ -558,6 +564,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/showdown@2.0.6':
+    resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
+
   '@typescript-eslint/eslint-plugin@6.18.1':
     resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -790,6 +799,10 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1781,6 +1794,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  showdown@2.1.0:
+    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
+    hasBin: true
+
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
     engines: {node: '>= 0.4'}
@@ -2395,6 +2412,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/showdown@2.0.6': {}
+
   '@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -2682,6 +2701,8 @@ snapshots:
 
   commander@4.1.1: {}
 
+  commander@9.5.0: {}
+
   concat-map@0.0.1: {}
 
   cross-spawn@7.0.3:
@@ -3828,6 +3849,10 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  showdown@2.1.0:
+    dependencies:
+      commander: 9.5.0
+
   side-channel@1.0.6:
     dependencies:
       call-bind: 1.0.7

src/components/Nvim/NvimEditor.tsx

@@ -19,6 +19,15 @@ export const NvimEditor = (props: { content: string | undefined }) => {
     }
   }
 
+  return (
+    <div className="flex w-full justify-center">
+      <div
+        className="plain-html"
+        dangerouslySetInnerHTML={{ __html: props.content ?? "" }}
+      />
+    </div>
+  );
+
   return (
     <table>
       <tbody>

src/components/Nvim/index.tsx

@@ -47,8 +47,6 @@ const InnerNvimTree = (props: InnerKittyProps<typeof Nvim>) => {
         style={{
           gridArea: "1 / 2 / 1 / 3",
           overflowY: "auto",
-          wordWrap: "break-word",
-          scrollSnapType: "inline",
         }}
       >
         <NvimEditor content={activeChild?.content} />

src/index.scss

@@ -59,4 +59,62 @@ body {
     scrollbar-width: thin;
     scrollbar-color: #f7ddd9 transparent;
   }
+
+  .plain-html {
+    @apply w-full whitespace-normal px-10 py-1 xl:w-2/3 2xl:w-3/5;
+
+    & img {
+      @apply inline;
+    }
+
+    & p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      @apply m-[revert];
+      font-size: revert;
+      font-weight: revert;
+    }
+
+    & p {
+      font-size: 0.8em;
+    }
+
+    & h1 {
+      @apply text-[2rem] font-bold;
+
+      & img {
+        @apply mb-4;
+      }
+    }
+
+    & h2 {
+      @apply text-2xl;
+    }
+
+    & a:not(:has(img)) {
+      @apply text-[#4493f8] underline underline-offset-2;
+    }
+
+    & h2::before {
+      content: "# ";
+    }
+
+    & h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      & a {
+        @apply no-underline;
+      }
+    }
+
+    & h1,
+    h2 {
+      @apply border-b border-[#5d646da3] pb-3;
+    }
+  }
 }