diff --git a/README.md b/README.md index e550e3e..6a71b31 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@
-

Source code of my personnal website.

+

My personnal website.

@@ -20,7 +20,7 @@

-

+

diff --git a/build/manifestPlugin.ts b/build/manifestPlugin.ts index 8b43852..6637509 100644 --- a/build/manifestPlugin.ts +++ b/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 = []; 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 = []; for (const file of manifest.files) { const content = await getRepoFileContent("pihkaal", file); + const html = converter.makeHtml(content); files.push({ name: file, - content, + content: html, }); } diff --git a/package.json b/package.json index 4681a46..4156a10 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1cf5a3..385edde 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Nvim/NvimEditor.tsx b/src/components/Nvim/NvimEditor.tsx index b362603..f3d3921 100644 --- a/src/components/Nvim/NvimEditor.tsx +++ b/src/components/Nvim/NvimEditor.tsx @@ -19,6 +19,15 @@ export const NvimEditor = (props: { content: string | undefined }) => { } } + return ( +
+
+
+ ); + return ( diff --git a/src/components/Nvim/index.tsx b/src/components/Nvim/index.tsx index 5b8aeeb..d6a208b 100644 --- a/src/components/Nvim/index.tsx +++ b/src/components/Nvim/index.tsx @@ -47,8 +47,6 @@ const InnerNvimTree = (props: InnerKittyProps) => { style={{ gridArea: "1 / 2 / 1 / 3", overflowY: "auto", - wordWrap: "break-word", - scrollSnapType: "inline", }} > diff --git a/src/index.scss b/src/index.scss index 803d9fd..1460cfc 100644 --- a/src/index.scss +++ b/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; + } + } }