From 127609594ca77d7fc78e250843e535f8d82713df Mon Sep 17 00:00:00 2001
From: "husni.zuhdi@accelbyte.net" <husninaufalz@gmail.com>
Date: Thu, 29 Aug 2024 23:24:25 +0700
Subject: [PATCH] chore: enable GFM during markdown -> html conversion and add
 tables tailwind styling

---
 internal/src/model/data.rs | 26 +++++++++++++-------------
 internal/src/utils.rs      |  7 ++++---
 statics/input.css          | 15 +++++++++++++++
 statics/styles.css         | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/internal/src/model/data.rs b/internal/src/model/data.rs
index a21ac5f..9c7b711 100644
--- a/internal/src/model/data.rs
+++ b/internal/src/model/data.rs
@@ -112,13 +112,13 @@ pub struct Trees {
     pub tree: Vec<Tree>,
 }
 
-// The file mode one of
-// 100644 for file (blob)
-// 100755 for executable (blob)
-// 040000 for subdirectory (tree)
-// 160000 for submodule (commit)
-// 120000 for a blob that specifies the path of a symlink.
-// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
+/// The file mode one of
+/// 100644 for file (blob)
+/// 100755 for executable (blob)
+/// 040000 for subdirectory (tree)
+/// 160000 for submodule (commit)
+/// 120000 for a blob that specifies the path of a symlink.
+/// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
 #[derive(Deserialize, Serialize, Debug, Clone)]
 pub enum TreeMode {
     #[serde(rename(deserialize = "100644"))]
@@ -133,8 +133,8 @@ pub enum TreeMode {
     Symlink,
 }
 
-// Either blob, tree, or commit.
-// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
+/// Either blob, tree, or commit.
+/// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
 #[derive(Deserialize, Serialize, Debug, Clone)]
 pub enum TreeType {
     #[serde(rename(deserialize = "blob"))]
@@ -145,8 +145,8 @@ pub enum TreeType {
     Commit,
 }
 
-// Tree structure of git
-// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
+/// Tree structure of git
+/// Reference: https://docs.github.com/en/rest/git/trees?apiVersion=2022-11-28
 #[derive(Deserialize, Serialize, Debug, Clone)]
 pub struct Tree {
     pub path: String,
@@ -159,8 +159,8 @@ pub struct Tree {
     pub url: String,
 }
 
-// Axum state
-// Consist of Config and BlogsData
+/// Axum state
+/// Consist of Config and BlogsData
 #[derive(Debug, Clone)]
 pub struct AppState {
     pub config: Config,
diff --git a/internal/src/utils.rs b/internal/src/utils.rs
index bb1bbd9..aa91abd 100644
--- a/internal/src/utils.rs
+++ b/internal/src/utils.rs
@@ -1,6 +1,6 @@
 use crate::model::data::VersionData;
 use log::debug;
-use markdown::to_html;
+use markdown::{to_html_with_options, Options};
 use regex::Regex;
 use std::fs;
 use std::io::BufReader;
@@ -21,8 +21,9 @@ pub fn md_to_html(filename: Option<String>, body: Option<String>) -> Result<Stri
         Some(val) => body_md = val,
         None => (),
     }
-    // let body_md = fs::read_to_string(filename.unwrap()).expect("Failed to read markdown blog file");
-    Ok(to_html(&body_md))
+    let html = to_html_with_options(&body_md, &Options::gfm())
+        .expect("Failed to convert html with options");
+    Ok(html)
 }
 
 /// read_version_manifest
diff --git a/statics/input.css b/statics/input.css
index 945d325..ba4914e 100644
--- a/statics/input.css
+++ b/statics/input.css
@@ -30,4 +30,19 @@
     pre {
         @apply px-4 text-wrap rounded border-solid border-2 border-gray-500 bg-gray-200;
     }
+    table {
+        @apply table-auto rounded border-solid border-2 border-gray-500;
+    }
+    thead {
+        @apply bg-gray-400 text-center;
+    }
+    th {
+        @apply px-3 py-1;
+    }
+    tbody {
+        @apply bg-gray-200;
+    }
+    td {
+        @apply px-3 py-1;
+    }
 }
diff --git a/statics/styles.css b/statics/styles.css
index 5ad4a3c..d9e44c5 100644
--- a/statics/styles.css
+++ b/statics/styles.css
@@ -539,6 +539,40 @@ pre {
   padding-right: 1rem;
 }
 
+table {
+  table-layout: auto;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+thead {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  text-align: center;
+}
+
+th {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+tbody {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+td {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;