feat: use LiquidJS as template system

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",

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);

src/pages/background/utils.ts

@@ -1,10 +1,15 @@
+import { format } from 'date-fns';
 import Browser from 'webextension-polyfill';
 
 export const removeUrlHash = (url: string) => {
   const hashIndex = url.indexOf('#');
   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

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>
     </>
   );