first commit

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: ['hkgnp']
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/publish.yml

@@ -0,0 +1,63 @@
+name: Build plugin
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - '*' # Push events to matching any tag format, i.e. 1.0, 20.15.10
+
+env:
+  PLUGIN_NAME: ${{ github.event.repository.name }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '16.x' # You might need to adjust this value to your own version
+      - name: Build
+        id: build
+        run: |
+          npm i && npm run build
+          mkdir ${{ env.PLUGIN_NAME }}
+          cp README.md package.json icon.svg ${{ env.PLUGIN_NAME }}
+          mv dist ${{ env.PLUGIN_NAME }}
+          zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }}
+          ls
+          echo "::set-output name=tag_name::$(git tag --sort version:refname | tail -n 1)"
+      - name: Create Release
+        uses: ncipollo/release-action@v1
+        id: create_release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ github.ref }}
+        with:
+          allowUpdates: true
+          draft: false
+          prerelease: false
+
+      - name: Upload zip file
+        id: upload_zip
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./${{ env.PLUGIN_NAME }}.zip
+          asset_name: ${{ env.PLUGIN_NAME }}-${{ steps.build.outputs.tag_name }}.zip
+          asset_content_type: application/zip
+
+      - name: Upload package.json
+        id: upload_metadata
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./package.json
+          asset_name: package.json
+          asset_content_type: application/json

.gitignore

@@ -0,0 +1,119 @@
+.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hkgnp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,15 @@
+# Overview
+
+This simple plugin allows you to quickly insert mermaid diagrams in your notes.
+
+![](/screenshots/demo.gif)
+
+# Installation
+
+If not available in the marketplace, download the latest release and manually load it into Logseq after unzipping.
+
+# Credits
+
+[mermaid.ink](https://github.com/jihchi/mermaid.ink)
+
+[mermaid-js-converter](https://github.com/superj80820/mermaid-js-converter) for the idea.

icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hierarchy" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="gray" fill="gray" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="5" r="2" />
+  <circle cx="5" cy="19" r="2" />
+  <circle cx="19" cy="19" r="2" />
+  <path d="M6.5 17.5l5.5 -4.5l5.5 4.5" />
+  <line x1="12" y1="7" x2="12" y2="13" />
+</svg>
+
+

package.json

@@ -0,0 +1,28 @@
+{
+  "logseq": {
+    "id": "logseq-mermaid-plugin",
+    "title": "logseq-mermaid-plugin",
+    "icon": "./icon.svg"
+  },
+  "name": "logseq-mermaid-plugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.html",
+  "targets": {
+    "main": false
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "parcel build --no-source-maps src/index.html --public-url ./"
+  },
+  "keywords": [],
+  "author": "hkgnp",
+  "license": "MIT",
+  "dependencies": {
+    "@logseq/libs": "^0.0.1-alpha.34",
+    "mermaid": "^8.14.0"
+  },
+  "devDependencies": {
+    "parcel": "^2.2.0"
+  }
+}

src/convert.ts

@@ -0,0 +1,12 @@
+export const convert = (data: string) => {
+  const matchData = data.match(/```mermaid(.|\n)*?```/gm);
+
+  console.log(matchData[0]);
+
+  let toDecode = matchData[0];
+  toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+  toDecode = toDecode.replace('\n', ' ');
+
+  const jsonString = btoa(toDecode);
+  return `<img src="https://mermaid.ink/img/${jsonString}" />`;
+};

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="index.ts" type="module"></script>
+  </body>
+</html>

src/index.ts

@@ -0,0 +1,80 @@
+import '@logseq/libs';
+import { convert } from './convert';
+
+const uniqueIdentifier = () =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '');
+
+const main = () => {
+  console.log('logseq-mermaid-plugin loaded');
+
+  logseq.Editor.registerSlashCommand('Draw mermaid diagram', async () => {
+    await logseq.Editor.insertAtEditingCursor(
+      `{{renderer :mermaid_${uniqueIdentifier()}}}`
+    );
+
+    const currBlock = await logseq.Editor.getCurrentBlock();
+    await logseq.Editor.insertBlock(
+      currBlock.uuid,
+      `\`\`\`mermaid 
+\`\`\``,
+      {
+        sibling: false,
+        before: false,
+      }
+    );
+  });
+
+  logseq.App.onMacroRendererSlotted(async ({ slot, payload }) => {
+    const [type] = payload.arguments;
+    const id = type.split('_')[1]?.trim();
+    const mermaidId = `mermaid_${id}`;
+
+    if (!type.startsWith(':mermaid_')) return;
+
+    const dataBlock = await logseq.Editor.getBlock(payload.uuid, {
+      includeChildren: true,
+    });
+
+    const mermaidUUID = dataBlock.children[0]['uuid'];
+
+    logseq.provideModel({
+      async show() {
+        await logseq.Editor.editBlock(payload.uuid);
+        await logseq.Editor.exitEditingMode();
+        const mermaidBlock = await logseq.Editor.getBlock(mermaidUUID);
+        await logseq.Editor.updateBlock(
+          payload.uuid,
+          `${convert(mermaidBlock.content)}
+{{renderer ${type}}}`
+        );
+      },
+    });
+
+    logseq.provideStyle(`
+      .renderBtn {
+        border: 1px solid black;
+        border-radius: 8px;
+        padding: 3px;
+        font-size: 80%;
+        background-color: white;
+        color: black;
+      }
+
+      .renderBtn:hover {
+        background-color: black;
+        color: white;
+      }
+    `);
+
+    logseq.provideUI({
+      key: `${mermaidId}`,
+      slot,
+      reset: true,
+      template: `<button data-on-click="show" class="renderBtn">Render</button>`,
+    });
+  });
+};
+
+logseq.ready(main).catch(console.error);

src/mermaid.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    HTMLDivElement: any;
+  }
+}
+
+export const renderMermaid = (content) => {};