feat: implement multiple type url

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "logseq-plugin-template-react",
-  "version": "1.0.0",
+  "name": "logseq-gallery",
+  "version": "1.0.1",
   "main": "dist/index.html",
   "scripts": {
     "dev": "vite",

readme.md

@@ -8,4 +8,10 @@ Implement a gallery renderer for Logseq. like Notion
 {{renderer :gallery, <page query>, <title>}}
 ```
 
-![](./imgs/screenshot.png)
+![](./imgs/screenshot.png)
+
+the Note should have `cover` or `banner` property.  
+for example:
+`cover:: ../assets/IMG_2694_1706277077580_0.jpeg`
+
+and the url is compatible with file path(`../assets/IMG_2694_1706277077580_0.jpeg`) and markdown url(`![untitle](../assets/IMG_2694_1706277077580_0.jpeg)`).

src/App.tsx → src/Gallery.tsx

@@ -1,14 +1,28 @@
 import { PageEntity } from "@logseq/libs/dist/LSPlugin";
 import React from "react";
 
+
+function processCoverURL(rawCoverURL: string): string {
+  const markdownImageRegex = /!\[.*\]\((.*)\)/;
+  const matches = rawCoverURL.match(markdownImageRegex);
+  if (matches && matches.length > 1) {
+      return matches[1];
+  }
+  return rawCoverURL;
+}
+
 interface NoteProps {
   page: PageEntity
   graphPath:string
 }
 const Note = ({page,graphPath}:NoteProps) => {
 
-  const coverURL = page.properties?.cover || page.properties?.banner
-  const propsBanner =  encodeURI("assets://" + graphPath + coverURL.replace("..", ""))
+  const rawCoverURL = page.properties?.cover || page.properties?.banner
+
+  // replace markdown image path to assert path if it is 
+  // to judge if it is a markdown image path like ![xxx](path)
+
+  const propsBanner =  encodeURI("assets://" + graphPath + processCoverURL(rawCoverURL).replace("..", ""))
 
   return (
     <div className="w-48 whitespace-nowrap rounded-lg cursor-pointer overflow-hidden"
@@ -37,12 +51,12 @@ const Note = ({page,graphPath}:NoteProps) => {
   )
 }
 
-interface AppProps {
+interface GalleryProps {
   pages: PageEntity[]
   graphPath:string
   title: string
 }
-function App({pages,graphPath,title}:AppProps) {
+function Gallery({pages,graphPath,title}:GalleryProps) {
   return (
     <main>
       <h3>{title}</h3>
@@ -61,4 +75,4 @@ function App({pages,graphPath,title}:AppProps) {
 
 }
 
-export default App;
+export default Gallery;

src/main.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import "./index.css";
 
 import { logseq as PL } from "../package.json";
-import App from "./App";
+import Gallery from "./Gallery";
 import { PageEntity } from "@logseq/libs/dist/LSPlugin";
 
 
@@ -26,7 +26,7 @@ function main() {
     const pages = await logseq.DB.q(query) as PageEntity[]
     const graphPath = (await logseq.App.getCurrentGraph())?.path || "";
 
-    const html = renderToString(<App pages={pages} graphPath={graphPath} title={title}/>)
+    const html = renderToString(<Gallery pages={pages} graphPath={graphPath} title={title}/>)
     logseq.provideUI({
        key: 'h1-playground',
        slot,