use markdown file for about page

import_map.json

@@ -1,5 +1,6 @@
 {
   "imports": {
-    "ren/": "https://git.pleshevski.ru/pleshevskiy/paren/raw/commit/1a67959b1a19598f8e95bf2ec5f7b1a4c3da4da6/ren/"
+    "par/": "https://git.pleshevski.ru/pleshevskiy/paren/raw/commit/ac60fc50bfd4d5027925c9077a016697382c667e/par/",
+    "ren/": "https://git.pleshevski.ru/pleshevskiy/paren/raw/commit/ac60fc50bfd4d5027925c9077a016697382c667e/ren/"
   }
 }

log.ts

@@ -1,3 +1,7 @@
+export function error(...args: unknown[]): void {
+  console.log("[ERROR]", ...args);
+}
+
 export function info(...args: unknown[]): void {
   console.log("[INFO]", ...args);
 }

server.ts

@@ -1,13 +1,14 @@
-import { StrRenderer } from "ren/str.ts";
+import { MarkdownParser } from "par/md.ts";
+import { HtmlStrRenderer } from "ren/html_str.ts";
 import * as log from "./log.ts";
 import rusTranslates from "./translates/rus.ts";
 import type { Translations } from "./translates/rus.ts";
 import { Context, getLangHref, Lang } from "./context.ts";
 import { E404Page } from "./views/pages/e404.ts";
 import { E500Page } from "./views/pages/e500.ts";
-import { AboutPage } from "./views/pages/about.ts";
 import { WorksPage } from "./views/pages/works.ts";
 import { Layout } from "./views/comp/layout.ts";
+import { ContentPage } from "./views/pages/content.ts";
 
 if (import.meta.main) {
   await main();
@@ -61,7 +62,8 @@ async function handleGet(req: Request) {
     }
     log.debug({ context: ctx });
 
-    const ren = new StrRenderer({
+    const par = new MarkdownParser();
+    const ren = new HtmlStrRenderer({
       wrapNode: Layout.bind(null, ctx),
       onVisitAttr: ([key, value]) => {
         if (key === "lhref" && typeof value === "string") {
@@ -74,18 +76,25 @@ async function handleGet(req: Request) {
 
     try {
       if (ctx.locPath === "/" || ctx.locPath === "/about") {
-        return createHtmlResponse(ren.render(AboutPage(ctx)));
+        const res = par.parse(await readMarkdownFile("data/about", ctx.lang));
+        return createHtmlResponse(ren.render(ContentPage(ctx, res)));
       } else if (ctx.locPath === "/works") {
         return createHtmlResponse(ren.render(WorksPage(ctx)));
       } else {
         return createHtmlResponse(ren.render(E404Page(ctx)), 404);
       }
-    } catch (_) {
+    } catch (e) {
+      log.error(e);
       return createHtmlResponse(ren.render(E500Page(ctx)), 500);
     }
   }
 }
 
+async function readMarkdownFile(dirPath: string, lang: Lang): Promise<string> {
+  return await Deno.readTextFile(`${dirPath}/${lang}.md`)
+    .catch((_) => Deno.readTextFile(`${dirPath}/${Lang.Rus}.md`));
+}
+
 async function loadAndUpdateTranslations(ctx: Context) {
   try {
     const translates = await import(`./translates/${ctx.lang}.ts`);

translates/eng.ts

@@ -7,27 +7,4 @@ export default {
   Source_code: "Source code",
   Page_not_found: "Page not found",
   Internal_server_error: "Internal server error",
-  about: {
-    Hi: "Hi!",
-    My_name_is_Dmitriy_Pleshevskiy: "My name is Dmitriy Pleshevskiy.",
-    I_am_lead_software_developer_architect_team_leader_and_mentor:
-      "I'm a lead software developer, architect, team leader and mentor",
-    Open_source_projects_are_my_passion_I_invent_experiment_implement_and_improve_projects_in_my_spare_time:
-      "Open-source projects are my passion! I invest, exeriment, implement and improve projects in my spare time",
-    Besides_programming_I_love_to_cook_and_spend_time_with_my_beloved_family:
-      "Besides programming, I love to cook and spend time with my beloved family!",
-    Programming_languages: "Programming languages",
-    Prefer: "Prefer",
-    Extensive_experience: "Extensive experience",
-    Limited_experience: "Limited experience",
-
-    Databases: "Databases",
-
-    Creating_applications: "Creating applications",
-    Traditional: "Traditional",
-    Dynamic: "Dynamic",
-    Hybrid: "Hybrid",
-    Console: "Console",
-    Crossplatform: "Crossplatform",
-  },
 } as Translations;

translates/rus.ts

@@ -5,29 +5,6 @@ export const rus = {
   Source_code: "Исходный код",
   Page_not_found: "Страница не найдена",
   Internal_server_error: "Внутренняя ошибка сервера",
-  about: {
-    Hi: "Привет!",
-    My_name_is_Dmitriy_Pleshevskiy: "Меня зовут Дмитрий Плешевский.",
-    I_am_lead_software_developer_architect_team_leader_and_mentor:
-      "Я ведущий разработчик програмного обеспечения, архитектор, руководитель команды, а так же ментор.",
-    Open_source_projects_are_my_passion_I_invent_experiment_implement_and_improve_projects_in_my_spare_time:
-      "Open-source проекты – моя страсть! Придумываю, экспериментирую, воплощаю, улучшаю проекты в свое свободное время",
-    Besides_programming_I_love_to_cook_and_spend_time_with_my_beloved_family:
-      "Помимо программирования я люблю готовить и проводить время со своей любимой семьей!",
-    Programming_languages: "Языки программирования",
-    Prefer: "Предпочитаю",
-    Extensive_experience: "Огромный опыт",
-    Limited_experience: "Ограниченный опыт",
-
-    Databases: "Базы данных",
-
-    Creating_applications: "Создание приложений",
-    Traditional: "Традиционные",
-    Dynamic: "Динамичное",
-    Hybrid: "Гибридное",
-    Console: "Консольные",
-    Crossplatform: "Кроссплатформенные",
-  },
 };
 
 export default rus;

views/pages/about.ts

@@ -1,49 +0,0 @@
-import { PageLayout } from "../comp/page_layout.ts";
-import { AnyNode, E } from "ren/node.ts";
-import { classNames } from "ren/attrs.ts";
-import { Context } from "../../context.ts";
-import { H3 } from "../uikit/typo.ts";
-
-const p = E.bind(null, "p", []);
-const ul = E.bind(null, "ul", []);
-const li = E.bind(null, "li", []);
-
-export function AboutPage(ctx: Context): AnyNode {
-  return PageLayout(ctx, [
-    E("div", classNames("content-width responsive-typography"), [
-      p(ctx.tr.about.Hi),
-      p(ctx.tr.about.My_name_is_Dmitriy_Pleshevskiy),
-      p(
-        ctx.tr.about
-          .I_am_lead_software_developer_architect_team_leader_and_mentor,
-      ),
-      p(
-        ctx.tr.about
-          .Open_source_projects_are_my_passion_I_invent_experiment_implement_and_improve_projects_in_my_spare_time,
-      ),
-      p(
-        ctx.tr.about
-          .Besides_programming_I_love_to_cook_and_spend_time_with_my_beloved_family,
-      ),
-
-      H3(ctx.tr.about.Programming_languages),
-      p(`${ctx.tr.about.Prefer}: Rust, TS, Bash`),
-      p(`${ctx.tr.about.Extensive_experience}: Rust, TS, JS, Python, Bash`),
-      p(`${ctx.tr.about.Limited_experience}: Haskell, Java, C#, C++`),
-
-      H3(ctx.tr.about.Databases),
-      p(`${ctx.tr.about.Prefer}: Postgres`),
-      p(`${ctx.tr.about.Extensive_experience}: Postgres, MySQL, Sqlite, Mongo`),
-
-      H3(ctx.tr.about.Creating_applications),
-      ul([
-        li(`${ctx.tr.about.Traditional} (SSR + Forms)`),
-        li("API (REST/GraphQL/WebSocket/EventSource)"),
-        li(`${ctx.tr.about.Dynamic} (SPA)`),
-        li(`${ctx.tr.about.Hybrid} (SSR + SPA)`),
-        li(ctx.tr.about.Console),
-        li(ctx.tr.about.Crossplatform),
-      ]),
-    ]),
-  ]);
-}

views/pages/content.ts

@@ -0,0 +1,10 @@
+import { PageLayout } from "../comp/page_layout.ts";
+import { AnyNode, E } from "ren/node.ts";
+import { classNames } from "ren/attrs.ts";
+import { Context } from "../../context.ts";
+
+export function ContentPage(ctx: Context, content: AnyNode): AnyNode {
+  return PageLayout(ctx, [
+    E("div", classNames("content-width responsive-typography"), [content]),
+  ]);
+}