improve(ui): details of plugin item

libs/src/LSPlugin.core.ts

@@ -398,7 +398,7 @@ class PluginLocal
     }
 
     // Pick legal attrs
-    ['name', 'author', 'version', 'description'].forEach(k => {
+    ['name', 'author', 'repository', 'version', 'description'].forEach(k => {
       this._options[k] = pkg[k]
     })
 

src/main/frontend/components/plugins.cljs

@@ -8,7 +8,8 @@
             [promesa.core :as p]
             [frontend.components.svg :as svg]
             [frontend.handler.notification :as notification]
-            [frontend.handler.plugin :as plugin-handler]))
+            [frontend.handler.plugin :as plugin-handler]
+            [clojure.string :as string]))
 
 (rum/defc installed-themes
   < rum/reactive
@@ -62,23 +63,34 @@
 (rum/defc simple-markdown-display
   < rum/reactive
   []
-  (let [content (state/sub :plugin/active-readme)]
-    [:textarea.p-1.bg-transparent.border-none
-     {:style {:width "700px" :min-height "60vw"}}
-     content]))
+  (let [[content item] (state/sub :plugin/active-readme)]
+    [:div.cp__plugins-details
+     {:on-click (fn [^js/MouseEvent e]
+                  (when-let [target (.-target e)]
+                    (when (and (= (string/lower-case (.-nodeName target)) "a")
+                               (not (string/blank? (. target getAttribute "href"))))
+                      (js/apis.openExternal (. target getAttribute "href"))
+                      (.preventDefault e))))}
+     (when-let [repo (:repository item)]
+       (when-let [repo (if (string? repo) repo (:url repo))]
+         [:div.p-4.rounded-md.bg-base-3
+          [:strong [:a.flex.items-center {:target "_blank" :href repo} [:span.mr-1 (svg/github {:width 25 :height 25})] repo]]]))
+     [:div.p-1.bg-transparent.border-none.ls-block
+      {:style                   {:min-height "60vw"}
+       :dangerouslySetInnerHTML {:__html content}}]]))
 
 (rum/defc plugin-item-card
   [{:keys [id name settings version url description author icon usf] :as item}]
   (let [disabled (:disabled settings)]
     [:div.cp__plugins-item-card
      [:div.l.link-block
-      {:on-click #(plugin-handler/open-readme! url simple-markdown-display)}
+      {:on-click #(plugin-handler/open-readme! url item simple-markdown-display)}
       (if icon
         [:img.icon {:src icon}]
         svg/folder)]
      [:div.r
       [:h3.head.text-xl.font-bold.pt-1.5
-       {:on-click #(plugin-handler/open-readme! url simple-markdown-display)}
+       {:on-click #(plugin-handler/open-readme! url item simple-markdown-display)}
        [:span name]
        [:sup.inline-block.px-1.text-xs.opacity-30 version]]
       [:div.desc.text-xs.opacity-60

src/main/frontend/components/plugins.css

@@ -139,6 +139,8 @@
       }
     }
   }
+
+  &-details {}
 }
 
 .cp__themes {

src/main/frontend/handler/plugin.cljs

@@ -3,6 +3,7 @@
             [rum.core :as rum]
             [frontend.util :as util]
             [frontend.fs :as fs]
+            [frontend.format.mldoc :refer [->MldocMode] :as mldoc]
             [frontend.handler.notification :as notifications]
             [frontend.storage :as storage]
             [camel-snake-kebab.core :as csk]
@@ -10,7 +11,9 @@
             [medley.core :as md]
             [electron.ipc :as ipc]
             [cljs-bean.core :as bean]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [lambdaisland.glogi :as log]
+            [frontend.format :as format]))
 
 (defonce lsp-enabled?
   (and (util/electron?)
@@ -64,11 +67,29 @@
   [id settings]
   (swap! state/state update-in [:plugin/installed-plugins id] assoc :settings settings))
 
+(defn parse-user-md-content
+  [content {:keys [url]}]
+  (try
+    (if-not (string/blank? content)
+      (let [content (if-not (string/blank? url)
+                      (string/replace
+                       content #"!\[[^\]]*\]\((.*?)\s*(\"(?:.*[^\"])\")?\s*\)"
+                       (fn [[matched link]]
+                         (if (and link (not (string/starts-with? link "http")))
+                           (string/replace matched link (util/node-path.join url link))
+                           matched)))
+                      content)]
+        (format/to-html content :markdown (mldoc/default-config :markdown false))))
+    (catch js/Error e
+      (log/error :parse-user-md-exception e)
+      content)))
+
 (defn open-readme!
-  [url display]
+  [url item display]
   (when url
-    (-> (p/let [content (invoke-exported-api "load_plugin_readme" url)]
-          (state/set-state! :plugin/active-readme content)
+    (-> (p/let [content (invoke-exported-api "load_plugin_readme" url)
+                content (parse-user-md-content content item)]
+          (state/set-state! :plugin/active-readme [content item])
           (state/set-modal! display))
         (p/catch #(notifications/show! "No README file." :warn)))))