feat: create project Versatile Npm and remove blog post

ngseke · Nov 24, 2023 · 6a0ca4d · 6a0ca4d
1 parent ed80f19
commit 6a0ca4d
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 1 deletion.
diff --git a/public/img/project-cover/versatile-npm.png b/public/img/project-cover/versatile-npm.png
diff --git a/src/assets/img/post/versatile-npm-copy/before-after.png b/src/assets/img/post/versatile-npm-copy/before-after.png
diff --git a/src/assets/img/post/versatile-npm-copy/demo.gif b/src/assets/img/post/versatile-npm-copy/demo.gif
diff --git a/src/assets/img/project/versatile-npm/1400x560.png b/src/assets/img/project/versatile-npm/1400x560.png
diff --git a/src/assets/img/project/versatile-npm/demo.gif b/src/assets/img/project/versatile-npm/demo.gif
diff --git a/src/assets/img/project/versatile-npm/logo-candidates.png b/src/assets/img/project/versatile-npm/logo-candidates.png
diff --git a/src/assets/img/project/versatile-npm/screenshot-1.png b/src/assets/img/project/versatile-npm/screenshot-1.png
diff --git a/src/assets/img/project/versatile-npm/screenshot-2.png b/src/assets/img/project/versatile-npm/screenshot-2.png
diff --git a/src/components/AboutMeSectionProjects.vue b/src/components/AboutMeSectionProjects.vue
@@ -4,8 +4,8 @@ import { useProjects } from '../composables/useProjects'
 const { projectMap } = useProjects()
 
 const list = [
+  projectMap.value['versatile-npm'],
   projectMap.value['leetcode-night'],
-  projectMap.value.mcip,
 ]
 </script>
 

diff --git a/src/composables/useProjects.ts b/src/composables/useProjects.ts
@@ -31,6 +31,7 @@ export function useProjects () {
         title: 'Browser Extension',
         list: [
           map['leetcode-night'],
+          map['versatile-npm'],
         ],
       },
       {

diff --git a/src/pages/project/versatile-npm.md b/src/pages/project/versatile-npm.md
@@ -0,0 +1,48 @@
+---
+title: Versatile Npm
+briefDescription: 自訂 Npm 安裝指令瀏覽器擴充功能
+githubLink: https://github.com/ngseke/versatile-npm
+demoLink: https://chromewebstore.google.com/detail/versatile-npm/jahejogdoffpehfhkhbpjblnlhghjnje?hl=zh-TW
+period: ['2023/11', '2023/11']
+cover: /img/project-cover/versatile-npm.png
+tags:
+  - Vue
+  - TypeScript
+  - Vuetify
+  - npm
+---
+
+![](../../assets/img/project/versatile-npm/1400x560.png)
+
+
+## 簡介
+
+*Versatile Npm* 是 Google Chrome 擴充功能，使用 Vue 3 + TypeScript + Chrome Extension API + Vuetify 建構。
+
+![Demonstration](../../assets/img/project/versatile-npm/demo.gif)
+
+這個擴充功能可以讓使用者在 npm 套件頁面的右側欄加入 `yarn` 和 `pnpm` 等安裝指令，方便開發者一鍵複製。
+
+![Screenshot 2](../../assets/img/project/versatile-npm/screenshot-2.png)
+
+另外也提供設定 UI 供使用者自定義安裝指令，執行新增、刪除、編輯和排序操作。
+
+![Screenshot 1](../../assets/img/project/versatile-npm/screenshot-1.png)
+
+## Logo
+
+App Logo 是完全由 DALL·E 3 生成的，prompt 的大意是 `穿著帽 T 的水豚帶著包裹`、`badge style`、`sport mascot style`，接著再透過 macOS 內建的「移除背景」功能去背。
+
+其他候選 Logo 如下：
+![Logo Candidates](../../assets/img/project/versatile-npm/logo-candidates.png)
+
+
+## Demo
+
+<a href="https://chromewebstore.google.com/detail/versatile-npm/jahejogdoffpehfhkhbpjblnlhghjnje?hl=zh-TW" target="_blank">
+  <img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png" />
+</a>
+
+<br/>
+
+<iframe src="https://ghbtns.com/github-btn.html?user=ngseke&repo=versatile-npm&type=star&count=false" frameborder="0" scrolling="0" width="150" height="20"></iframe>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,7 @@ export function useProjects () { @@
             title: 'Browser Extension',
             list: [
               map['leetcode-night'],
+              map['versatile-npm'],
             ],
           },
           {
@@ Expand Down @@