feat: ✨ add icon

CHANGELOG.md

@@ -1,13 +1,13 @@
-# [1.1.0](https://github.com/haydenull/logseq-plugin-react-boilerplate/compare/v1.0.0...v1.1.0) (2022-03-08)
+# [1.1.0](https://github.com/haydenull/logseq-plugin-git/compare/v1.0.0...v1.1.0) (2022-03-08)
 
 
 ### Features
 
-* add antd ([036577d](https://github.com/haydenull/logseq-plugin-react-boilerplate/commit/036577dc529db4e4a5964c287a55d112bae654bc))
+* add antd ([036577d](https://github.com/haydenull/logseq-plugin-git/commit/036577dc529db4e4a5964c287a55d112bae654bc))
 
 # 1.0.0 (2022-01-18)
 
 
 ### Features
 
-* ✨ initial commit ([cca0e7f](https://github.com/haydenull/logseq-plugin-react-boilerplate/commit/cca0e7fcba33830eaf534fd9ca6b867b57147de4))
+* ✨ initial commit ([cca0e7f](https://github.com/haydenull/logseq-plugin-git/commit/cca0e7fcba33830eaf534fd9ca6b867b57147de4))

README.md

@@ -1,8 +1,8 @@
-# logseq-plugin-react-boilerplate
-> logseq-plugin-react-boilerplate with vite react typescript tailwindcss antd
+# logseq-plugin-git
+> logseq-plugin-git with vite react typescript tailwindcss antd
 
-[![latest release version](https://img.shields.io/github/v/release/haydenull/logseq-plugin-react-boilerplate)](https://github.com/haydenull/logseq-plugin-react-boilerplate/releases)
-[![License](https://img.shields.io/github/license/haydenull/logseq-plugin-react-boilerplate?color=blue)](https://github.com/haydenull/logseq-plugin-react-boilerplate/blob/main/LICENSE)
+[![latest release version](https://img.shields.io/github/v/release/haydenull/logseq-plugin-git)](https://github.com/haydenull/logseq-plugin-git/releases)
+[![License](https://img.shields.io/github/license/haydenull/logseq-plugin-git?color=blue)](https://github.com/haydenull/logseq-plugin-git/blob/main/LICENSE)
 
 ## Demo
 ![demo](./demo.gif)

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "logseq-plugin-react-boilerplate",
-  "version": "1.1.0",
+  "name": "logseq-plugin-git",
+  "version": "1.0.0",
   "main": "dist/index.html",
   "logseq": {
-    "id": "logseq-plugin-react-boilerplate",
+    "id": "logseq-plugin-git",
     "icon": "logo.png"
   },
   "scripts": {

src/App.tsx

@@ -5,7 +5,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
     <div className="w-screen h-screen flex items-center justify-center text-white">
       <div className="w-screen h-screen fixed top-0 left-0" onClick={() => logseq.hideMainUI()}></div>
       <div className="w-5/6 h-5/6 bg-gradient-to-tr from-yellow-400 via-red-500 to-pink-500 flex flex-col items-center justify-center">
-        <h1 className="font-bold text-4xl">Logseq-plugin-react-boilerplate</h1>
+        <h1 className="font-bold text-4xl">logseq-plugin-git</h1>
         <h2 className="text-2xl mt-6">Current Env: {env}</h2>
       </div>
     </div>

src/helper/git.ts

@@ -0,0 +1,29 @@
+// https://logseq.github.io/plugins/interfaces/IAppProxy.html#execGitCommand
+
+export const status = async () => {
+  // git status --porcelain | awk '{print $2}'
+  // git status --porcelain | wc -l
+  const res =  await logseq.App.execGitCommand(['status', '--porcelain'])
+  console.log('[faiz:] === status', res)
+  // changed files    staged files
+}
+
+// log with git log --pretty=format:"%h %ad | %s%d [%an]" --date=short
+export const log = async (): Promise<string> => {
+  // git log --pretty=format:"%h %s" -n 1
+  // git log --pretty=format:"%h %ad | %s%d [%an]" --date=short
+  // return await logseq.App.execGitCommand(['log', '--pretty=format:"%h %s"'])
+  return await logseq.App.execGitCommand(['log', '--pretty=format:"%h %ad | %s%d [%an]"', '--date=short'])
+}
+
+// git commit
+export const commit = async (message: string): Promise<string> => {
+  // git commit -m "message"
+  return await logseq.App.execGitCommand(['commit', '-m', message])
+}
+
+// push
+export const push = async (): Promise<string> => {
+  // git push
+  return await logseq.App.execGitCommand(['push'])
+}

src/main.tsx

@@ -2,28 +2,63 @@ import '@logseq/libs'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
+import { status } from './helper/git'
 import './index.css'
 
 const isDevelopment = import.meta.env.DEV
 
+const INACTIVE_STYLE = `
+#injected-ui-item-git-logseq-plugin-git::after {
+  display: none;
+}
+`
+const ACTIVE_STYLE = `
+#injected-ui-item-git-logseq-plugin-git {
+  position: relative;
+}
+#injected-ui-item-git-logseq-plugin-git::after {
+  display: block;
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: rgb(237, 66, 69);
+  right: 8px;
+  top: 6px;
+}
+`
+
 if (isDevelopment) {
   renderApp('browser')
 } else {
-  console.log('=== logseq-plugin-react-boilerplate loaded ===')
+  console.log('=== logseq-plugin-git loaded ===')
   logseq.ready(() => {
 
     logseq.provideModel({
-      show() {
-        renderApp('logseq')
-        logseq.showMainUI()
+      async push() {
+        // renderApp('logseq')
+        // logseq.showMainUI()
+        const icon = await logseq.App.queryElementById(`injected-ui-item-git-logseq-plugin-git`)
+        console.log('[faiz:] === icon', icon, typeof icon)
+          // .then((el: HTMLElement) => {
+          //   el.classList.add('git-active')
+          // })
+        logseq.provideStyle({
+          key: 'git',
+          // add an indicator to the menu
+          style: ACTIVE_STYLE,
+        })
       },
     })
 
     logseq.App.registerUIItem('toolbar', {
-      key: 'logseq-plugin-react-boilerplate',
-      template: '<a data-on-click="show" class="button"><i class="ti ti-window"></i></a>',
+      key: 'git',
+      template: '<a data-on-click="push" class="button"><i class="ti ti-brand-git"></i></a>',
     })
 
+    status()
+
   })
 }