refactor: tailwind icon

vbrajon · Apr 13, 2023 · c2561be · c2561be
1 parent 3e11a1b
commit c2561be
Show file tree

Hide file tree

Showing 9 changed files with 462 additions and 275 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 10000,
+  semi: false,
+  plugins: [require("prettier-plugin-tailwindcss")],
+}
diff --git a/extension-chrome/cut.js b/extension-chrome/cut.js
@@ -346,7 +346,7 @@ Object.shortcuts = Object.shortcuts || {
   },
   format: {
     after: (v) => {
-      if (["Invalid Date", "NaN", "null", "undefined"].includes(v)) return "-"
+      if (/(Invalid Date|NaN|null|undefined)/.test(v)) return "-"
       return v
     },
   },

diff --git a/extension-chrome/index.css b/extension-chrome/index.css
diff --git a/extension-chrome/index.html b/extension-chrome/index.html
@@ -16,58 +16,46 @@
         <div class="m-1 text-[9px] font-bold">Hit Tab to focus</div>
       </label>
       <button class="m-2 mx-auto flex place-content-center place-items-center rounded p-2 hover:bg-slate-200 hover:shadow dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://history' })" tabindex="-1">
-        <svg class="mr-2 h-[20px] w-[20px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
-          <circle cx="12" cy="12" r="10" />
-          <path d="M12 6v6l4 2" />
-        </svg>
-        <div v-text="h.length <= 10 ? '-' : h.length"></div>
+        <div class="mr-2 text-xl i-lucide/clock"></div>
+        <div class="w-10" v-text="h.length"></div>
       </button>
       <div class="-m-2 h-[400px] overflow-auto" @scroll="hoff = 2 * Math.floor($event.target.scrollTop / 76.8)">
         <div class="sticky top-0 grid gap-4 p-2 md:grid-cols-2">
           <a class="flex h-16 place-content-center place-items-center rounded bg-slate-100 p-4 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" :href="item.url" rel="nofollow noreferrer" v-for="item in h.slice(hoff, hoff + 10)">
-            <img class="pr-2" :src="'chrome://favicon/' + new window.URL(item.url).origin" />
+            <img class="pr-2" :src="'chrome://favicon/' + new window.URL(item.url || 'https://x.com').origin" />
             <div class="line-clamp-2 font-medium" v-text="item.title"></div>
             <div class="ml-auto pl-2" v-text="new Date(item.lastVisitTime).relative().replace(/ (.*?)s? ago/, (m, u) => Date.UNITS.find(([k]) => k === u)[2])"></div>
           </a>
         </div>
         <div :style="`height: ${Math.ceil((h.length - 10) / 2) * 76.8}px`" v-if="h.length > 10"></div>
       </div>
       <button class="m-2 mx-auto flex place-content-center place-items-center rounded p-2 hover:bg-slate-200 hover:shadow dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://bookmarks' })" tabindex="-1">
-        <svg class="mr-2 h-[20px] w-[20px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" /></svg>
-        <div v-text="b.length"></div>
+        <div class="mr-2 text-lg i-lucide/bookmark"></div>
+        <div class="w-10" v-text="b.length"></div>
       </button>
       <div class="-m-2 h-[160px] overflow-auto" @scroll="boff = 2 * Math.floor($event.target.scrollTop / 76.8)">
         <div class="sticky top-0 grid gap-4 p-2 md:grid-cols-2">
           <a class="flex h-16 place-content-center place-items-center rounded bg-slate-100 p-4 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" :href="item.url" rel="nofollow noreferrer" v-for="item in b.slice(boff, boff + 4)">
-            <img class="pr-2" :src="'chrome://favicon/' + new window.URL(item.url).origin" />
+            <img class="pr-2" :src="'chrome://favicon/' + new window.URL(item.url || 'https://x.com').origin" />
             <div class="line-clamp-2 font-medium" v-text="item.title"></div>
-            <div class="ml-auto pl-2" v-text="new Date(item.dateAdded || '-').format('YYYY')"></div>
+            <div class="ml-auto pl-2" v-text="new Date(item.dateAdded).format('YYYY')"></div>
           </a>
         </div>
         <div :style="`height: ${Math.ceil((b.length - 4) / 2) * 76.8}px`" v-if="b.length > 4"></div>
       </div>
-      <div class="fixed top-10 right-10 hidden text-7xl font-bold lg:flex" v-text="now"></div>
+      <div class="fixed right-10 top-10 hidden text-7xl font-bold lg:flex" v-text="now"></div>
       <div class="fixed bottom-10 right-10 hidden lg:flex">
+        <button class="m-2 rounded bg-slate-100 p-2 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://history/syncedTabs' })">
+          <div class="text-2xl i-lucide/smartphone"></div>
+        </button>
         <button class="m-2 rounded bg-slate-100 p-2 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://downloads' })">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
-            <path d="M8 17l4 4 4-4" />
-            <path d="M12 12v9" />
-            <path d="M20.88 18.09A5 5 0 0018 9h-1.26A8 8 0 103 16.29" />
-          </svg>
+          <div class="text-2xl i-lucide/download-cloud"></div>
         </button>
         <button class="m-2 rounded bg-slate-100 p-2 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://extensions' })">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
-            <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
-            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
-            <line x1="12" y1="22.08" x2="12" y2="12"></line>
-          </svg>
+          <div class="text-2xl i-lucide/package"></div>
         </button>
         <button class="m-2 rounded bg-slate-100 p-2 shadow hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600" @click="window.chrome.tabs.update({ url: 'chrome://settings' })">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-          </svg>
+          <div class="text-2xl i-lucide/settings"></div>
         </button>
       </div>
     </main>

diff --git a/extension-chrome/index.js b/extension-chrome/index.js
@@ -41,8 +41,8 @@ const app = createApp({
     return {
       now: new Date().format("hh:mm"),
       search: "",
-      history: [],
-      bookmarks: [],
+      history: Array(10).fill({}),
+      bookmarks: Array(10).fill({}),
       hoff: 0,
       boff: 0,
     }

diff --git a/package.json b/package.json
@@ -1,17 +1,19 @@
 {
   "scripts": {
     "bump": "npx npm-check-updates -u && pnpm install && cd extension-chrome && curl -LO https://unpkg.com/vue/dist/vue.esm-browser.prod.js",
-    "lint": "npx prettier --no-semi --print-width=Infinity --write extension-chrome",
+    "lint": "prettier --write extension-chrome",
     "build": "TAILWIND_MODE=build postcss tailwind.css -o extension-chrome/index.css --verbose && ls -lh extension-chrome/index.css",
-    "watch": "TAILWIND_MODE=watch postcss tailwind.css -o extension-chrome/index.css --verbose --watch"
+    "dev": "TAILWIND_MODE=watch postcss tailwind.css -o extension-chrome/index.css --verbose --watch"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@iconify/json": "2.2.49",
     "autoprefixer": "10.4.14",
     "cssnano": "6.0.0",
     "postcss": "8.4.21",
     "postcss-cli": "10.1.0",
+    "postcss-url": "10.1.3",
     "prettier": "2.8.7",
-    "prettier-plugin-tailwindcss": "0.2.6",
+    "prettier-plugin-tailwindcss": "0.2.7",
     "tailwindcss": "3.3.1"
   }
 }