From a2fe4903d98806124c66a7f36530e31836995384 Mon Sep 17 00:00:00 2001
From: EINDEX <snowstarlbk@gmail.com>
Date: Tue, 1 Aug 2023 13:08:48 +0800
Subject: [PATCH] feat: use LiquidJS as template system

---
 package-lock.json                         | 28 +++++++++++++++++++++++
 package.json                              |  1 +
 src/pages/background/index.ts             | 26 +++++++++++----------
 src/pages/background/utils.ts             |  5 ++++
 src/pages/options/components/ClipNote.tsx |  8 ++++++-
 5 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 25a2aa4..3adc2d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
         "chakra-react-select": "^4.6.0",
         "date-fns": "^2.29.3",
+        "liquidjs": "^10.8.4",
         "marked": "^4.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -10237,6 +10238,33 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/liquidjs": {
+      "version": "10.8.4",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.8.4.tgz",
+      "integrity": "sha512-HSpYAFBVWxhwWsTKPBJgPm3bnwwIzAZjy17XhX7uJCKJ8H6A1YstZSFmPqMmWfSuJOg43RSx+qWVSA1Fu3+B2w==",
+      "dependencies": {
+        "commander": "^10.0.0"
+      },
+      "bin": {
+        "liquid": "bin/liquid.js",
+        "liquidjs": "bin/liquid.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/liquidjs"
+      }
+    },
+    "node_modules/liquidjs/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
diff --git a/package.json b/package.json
index 7b90ab4..a8deaef 100755
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "chakra-react-select": "^4.6.0",
     "date-fns": "^2.29.3",
+    "liquidjs": "^10.8.4",
     "marked": "^4.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
index cf46b48..567c476 100644
--- a/src/pages/background/index.ts
+++ b/src/pages/background/index.ts
@@ -2,10 +2,13 @@ import LogseqClient from '../logseq/client';
 import Browser from 'webextension-polyfill';
 import { getLogseqCopliotConfig } from '../../config';
 import { removeUrlHash } from '@/utils';
-import { setExtensionBadge, versionCompare } from './utils';
-import { delay, debounce } from '@/utils';
+import { setExtensionBadge, versionCompare, logseqTimeFormat } from './utils';
+import { debounce } from '@/utils';
 import { format } from 'date-fns';
 import { changeOptionsHostToHostNameAndPort } from './upgrade';
+import { Liquid } from 'liquidjs';
+
+const engine = new Liquid();
 
 const logseqClient = new LogseqClient();
 
@@ -61,16 +64,15 @@ const quickCapture = async (data: string) => {
   const now = new Date();
   const resp = await logseqClient.getUserConfig();
   const journalPage = format(now, resp['preferredDateFormat']);
-  const render = clipNoteTemplate
-    .replaceAll('{{date}}', journalPage)
-    .replaceAll('{{content}}', data.replaceAll(/([\{\}])/g, '\\$1'))
-    .replaceAll('{{url}}', activeTab.url)
-    .replaceAll(
-      '{{time}}',
-      `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`,
-    )
-    .replaceAll('{{title}}', activeTab.title)
-    .trim();
+
+  const render =  engine.parseAndRenderSync(clipNoteTemplate, {
+    date: journalPage,
+    content: data.replaceAll(/([\{\}])/g, '\\$1'),
+    url: activeTab.url,
+    time: logseqTimeFormat(now),
+    dt: now,
+    title: activeTab.title,
+  }).trim();
 
   if (clipNoteLocation === 'customPage') {
     await logseqClient.appendBlock(clipNoteCustomPage, render);
diff --git a/src/pages/background/utils.ts b/src/pages/background/utils.ts
index 39e50b7..94e10aa 100644
--- a/src/pages/background/utils.ts
+++ b/src/pages/background/utils.ts
@@ -1,3 +1,4 @@
+import { format } from 'date-fns';
 import Browser from 'webextension-polyfill';
 
 export const removeUrlHash = (url: string) => {
@@ -5,6 +6,10 @@ export const removeUrlHash = (url: string) => {
   return hashIndex > 0 ? url.substring(0, hashIndex) : url;
 };
 
+export const logseqTimeFormat = (date: Date): str => {
+  return format(date, 'HH:mm');
+}
+
 export const setExtensionBadge = async (text: string, tabId: number) => {
   const action =
     Browser.runtime.getManifest().manifest_version === 2
diff --git a/src/pages/options/components/ClipNote.tsx b/src/pages/options/components/ClipNote.tsx
index f5b20af..cf18ef0 100644
--- a/src/pages/options/components/ClipNote.tsx
+++ b/src/pages/options/components/ClipNote.tsx
@@ -155,7 +155,13 @@ export const ClipNoteOptions = () => {
           gridColumn={'1 / span 2'}
           size={'sm'}
           justifySelf={'end'}
-        >{`Available params: {{date}} {{time}} {{title}} {{link}} {{content}}`}</Text>
+        >{`Available params: date, time, title, url, content, dt.`}</Text>
+        <Link
+          href="https://liquidjs.com/tutorials/intro-to-liquid.html"
+          gridColumn={'1 / span 2'}
+          size={'sm'}
+          justifySelf={'end'}
+        >{`The template language follow the LiquidJS.`}</Link>
       </Grid>
     </>
   );