chore(release): 2.16.0

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
+
+
+### Features
+
+* **search-bar:** use cmd + k to focus on mac ([bf88836](https://github.com/CorentinTh/it-tools/commit/bf88836dbe4037019e9545deaae1db06e5768cfb))
+* **tool:** improved favorite tool management ([af075dc](https://github.com/CorentinTh/it-tools/commit/af075dccccec959a0863e6d11516206860bed91f))
+* **tools:** added favorite tool handling ([4cd809b](https://github.com/CorentinTh/it-tools/commit/4cd809bd0c94836532f58a2ec6aa131694cce10d))
+* **tracker:** added actions monitoring ([bfc2e24](https://github.com/CorentinTh/it-tools/commit/bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b))
+
+
+### Refactors
+
+* **clean:** removed empty style tag ([cf723f1](https://github.com/CorentinTh/it-tools/commit/cf723f144ee865b6de7323d3be58eb7a9586fa56))
+* **clean:** removed unused import ([4087285](https://github.com/CorentinTh/it-tools/commit/40872859a580a20bb838b79db2b3c88c00995e37))
+* **menu:** improve support button ([679dd1c](https://github.com/CorentinTh/it-tools/commit/679dd1c1f6265227cc9db60c55d83f8eaf8f72b4))
+* **tracker:** better tracker injection ([def60e7](https://github.com/CorentinTh/it-tools/commit/def60e7248003e74ed67e9ff116b438bab410a92))
+
 ## [2.15.0](https://github.com/CorentinTh/it-tools/compare/v2.14.1...v2.15.0) (2022-12-16)
 
 

README.md

@@ -10,46 +10,53 @@ You have an idea of a tool? Submit a [feature request](https://github.com/Corent
 
 ## Contribute
 
-### Recommended IDE Setup
+## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-### Node version
+## Type Support for `.vue` Imports in TS
 
-Ensure you have the correct node/npm version
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
 
 ```sh
-nvm use
+pnpm install
 ```
 
-### Project Setup
+### Compile and Hot-Reload for Development
 
 ```sh
-npm install
+pnpm dev
 ```
 
-#### Compile and Hot-Reload for Development
+### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run dev
+pnpm build
 ```
 
-#### Type-Check, Compile and Minify for Production
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run build
+pnpm test
 ```
 
-#### Run Unit Tests with [Vitest](https://vitest.dev/)
+### Lint with [ESLint](https://eslint.org/)
 
 ```sh
-npm run test
-```
-
-#### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
+pnpm lint
 ```
 
 ### Create a new tool
@@ -68,12 +75,9 @@ Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).
 
 This project is continuously deployed using [vercel.com](https://vercel.com).
 
-
-
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=345793&theme=light" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=345793&theme=light&period=daily" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
-
 ## License
 
 This project is under the [GNU GPLv3](LICENSE).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",

src/components/FavoriteButton.vue

@@ -36,5 +36,3 @@ function toggleFavorite(event: MouseEvent) {
   toolStore.addToolToFavorites({ tool });
 }
 </script>
-
-<style scoped></style>

src/components/SearchBar.vue

@@ -1,24 +1,25 @@
 <script lang="ts" setup>
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import { useTracker } from '@/modules/tracker/tracker.services';
 import { tools } from '@/tools';
 import type { Tool } from '@/tools/tools.types';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
+import type { NInput } from 'naive-ui';
 import { computed, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import SearchBarItem from './SearchBarItem.vue';
 
-const router = useRouter();
-const queryString = ref('');
-
-const { searchResult } = useFuzzySearch({
-  search: queryString,
-  data: tools,
-  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
-});
-
 const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });
 
+const router = useRouter();
+const { tracker } = useTracker();
+
+const queryString = ref('');
+const inputEl = ref<HTMLElement>();
+const displayDropDown = ref(true);
+const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
+
 const options = computed(() => {
   if (queryString.value === '') {
     return tools.map(toolToOption);
@@ -27,12 +28,11 @@ const options = computed(() => {
   return searchResult.value.map(toolToOption);
 });
 
-function onSelect(path: string) {
-  router.push(path);
-  queryString.value = '';
-}
-
-const focusTarget = ref();
+const { searchResult } = useFuzzySearch({
+  search: queryString,
+  data: tools,
+  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
+});
 
 const keys = useMagicKeys({
   passive: false,
@@ -40,16 +40,40 @@ const keys = useMagicKeys({
     if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
       e.preventDefault();
     }
+
+    if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
+      e.preventDefault();
+    }
   },
 });
 
-whenever(keys.ctrl_k, () => {
-  focusTarget.value.focus();
-});
+whenever(keys.ctrl_k, claimFocus);
+whenever(keys.meta_k, claimFocus);
+whenever(keys.escape, releaseFocus);
 
 function renderOption({ tool }: { tool: Tool }) {
   return h(SearchBarItem, { tool });
 }
+
+function onSelect(path: string) {
+  router.push(path);
+  queryString.value = '';
+}
+
+function claimFocus() {
+  displayDropDown.value = true;
+
+  inputEl.value?.focus();
+}
+
+function releaseFocus() {
+  displayDropDown.value = false;
+}
+
+function onFocus() {
+  tracker.trackEvent({ eventName: 'Search-bar focused' });
+  displayDropDown.value = true;
+}
 </script>
 
 <template>
@@ -60,14 +84,16 @@ function renderOption({ tool }: { tool: Tool }) {
       :on-select="(value) => onSelect(String(value))"
       :render-label="renderOption"
       :default-value="'aa'"
-      :get-show="() => true"
+      :get-show="() => displayDropDown"
+      :on-focus="onFocus"
+      @update:value="() => (displayDropDown = true)"
     >
       <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
         <n-input
-          ref="focusTarget"
+          ref="inputEl"
           round
           clearable
-          placeholder="Search a tool... [Ctrl + K]"
+          :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"
           :value="slotValue"
           :input-props="{ autocomplete: 'disabled' }"
           @input="handleInput"
@@ -82,5 +108,3 @@ function renderOption({ tool }: { tool: Tool }) {
     </n-auto-complete>
   </div>
 </template>
-
-<style lang="less" scoped></style>

src/layouts/base.layout.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-import { h } from 'vue';
+import { computed, h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
@@ -8,6 +8,8 @@ import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import MenuIconItem from '@/components/MenuIconItem.vue';
 import type { Tool } from '@/tools/tools.types';
+import { useToolStore } from '@/tools/tools.store';
+import { useTracker } from '@/modules/tracker/tracker.services';
 import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
@@ -22,16 +24,27 @@ const commitSha = config.app.lastCommitSha.slice(0, 7);
 const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
 const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
 
-const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
-  label: category.name,
-  key: category.name,
-  type: 'group',
-  children: category.components.map((tool) => ({
-    label: makeLabel(tool),
-    icon: makeIcon(tool),
-    key: tool.name,
+const { tracker } = useTracker();
+
+const toolStore = useToolStore();
+
+const menuOptions = computed<MenuGroupOption[]>(() =>
+  [
+    ...(toolStore.favoriteTools.length > 0
+      ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
+      : []),
+    ...toolsByCategory,
+  ].map((category) => ({
+    label: category.name,
+    key: category.name,
+    type: 'group',
+    children: category.components.map((tool) => ({
+      label: makeLabel(tool),
+      icon: makeIcon(tool),
+      key: tool.name,
+    })),
   })),
-}));
+);
 </script>
 
 <template>
@@ -147,10 +160,10 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
               target="_blank"
               class="support-button"
               :bordered="false"
+              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
             >
               Buy me a coffee
-
-              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 8px" size="20px" />
+              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
             </n-button>
           </template>
           ❤ Support IT Tools development !

src/layouts/tool.layout.vue

@@ -3,22 +3,22 @@ import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';
-import { useThemeVars } from 'naive-ui';
+import FavoriteButton from '@/components/FavoriteButton.vue';
+import type { Tool } from '@/tools/tools.types';
 import BaseLayout from './base.layout.vue';
 
 const route = useRoute();
-const theme = useThemeVars();
 
 const head = computed<HeadObject>(() => ({
   title: `${route.meta.name} - IT Tools`,
   meta: [
     {
       name: 'description',
-      content: route.meta.description,
+      content: route.meta?.description as string,
     },
     {
       name: 'keywords',
-      content: route.meta.keywords,
+      content: ((route.meta.keywords ?? []) as string[]).join(','),
     },
   ],
 }));
@@ -29,22 +29,18 @@ useHead(head);
   <base-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-h1>
-          {{ route.meta.name }}
+        <n-space align="center" justify="space-between" :wrap="false">
+          <n-h1>
+            {{ route.meta.name }}
+          </n-h1>
 
-          <n-tag
-            v-if="route.meta.isNew"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-          >
-            New tool
-          </n-tag>
-          <!-- <span class="new-tool-badge">New !</span> -->
-        </n-h1>
+          <div>
+            <favorite-button :tool="{name: route.meta.name} as Tool" />
+          </div>
+        </n-space>
 
         <div class="separator" />
+
         <div class="description">
           {{ route.meta.description }}
         </div>
@@ -92,6 +88,7 @@ useHead(head);
       width: 200px;
       height: 2px;
       background: rgb(161, 161, 161);
+      opacity: 0.2;
 
       margin: 10px 0;
     }

src/modules/tracker/tracker.services.ts

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import type Plausible from 'plausible-tracker';
+import { inject } from 'vue';
+
+export { createTrackerService, useTracker };
+
+function createTrackerService({ plausible }: { plausible: ReturnType<typeof Plausible> }) {
+  return {
+    trackEvent({ eventName }: { eventName: string }) {
+      plausible.trackEvent(eventName);
+    },
+  };
+}
+
+function useTracker() {
+  const plausible: ReturnType<typeof Plausible> | undefined = inject('plausible');
+
+  if (_.isNil(plausible)) {
+    throw new Error('Plausible must be instantiated');
+  }
+
+  const tracker = createTrackerService({ plausible });
+
+  return {
+    tracker,
+  };
+}

src/modules/tracker/tracker.types.ts

@@ -0,0 +1,3 @@
+import type { createTrackerService } from './tracker.services';
+
+export type TrackerService = ReturnType<typeof createTrackerService>;

src/pages/About.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useTracker } from '@/modules/tracker/tracker.services';
 import { useHead } from '@vueuse/head';
 
 useHead({ title: 'About - IT Tools' });
+const { tracker } = useTracker();
 </script>
 
 <template>
@@ -25,6 +27,7 @@ useHead({ title: 'About - IT Tools' });
         href="https://github.com/sponsors/CorentinTh"
         rel="noopener"
         target="_blank"
+        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
         sponsoring me </n-button
       >.

src/pages/Home.page.vue

@@ -12,58 +12,60 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 
 <template>
   <div class="home-page">
-    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi>
-        <colored-card title="You like it-tools?" :icon="Heart">
-          Give us a star on
-          <a
-            href="https://github.com/CorentinTh/it-tools"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' github repository"
-            >github</a
-          >
-          or follow us on
-          <a
-            href="https://twitter.com/ittoolsdottech"
-            rel="noopener"
-            target="_blank"
-            aria-label="IT-Tools' twitter account"
-            >twitter</a
-          >! Thank you
-          <n-icon :component="Heart" />
-        </colored-card>
-      </n-gi>
-    </n-grid>
+    <div class="grid-wrapper">
+      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+        <n-gi>
+          <colored-card title="You like it-tools?" :icon="Heart">
+            Give us a star on
+            <a
+              href="https://github.com/CorentinTh/it-tools"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' github repository"
+              >github</a
+            >
+            or follow us on
+            <a
+              href="https://twitter.com/ittoolsdottech"
+              rel="noopener"
+              target="_blank"
+              aria-label="IT-Tools' twitter account"
+              >twitter</a
+            >! Thank you
+            <n-icon :component="Heart" />
+          </colored-card>
+        </n-gi>
+      </n-grid>
 
-    <transition name="height">
-      <div v-if="toolStore.favoriteTools.length > 0">
-        <n-h3>Your favorite tools</n-h3>
+      <transition name="height">
+        <div v-if="toolStore.favoriteTools.length > 0">
+          <n-h3>Your favorite tools</n-h3>
+          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+              <tool-card :tool="tool" />
+            </n-gi>
+          </n-grid>
+        </div>
+      </transition>
+
+      <div v-if="toolStore.newTools.length > 0">
+        <n-h3>Newest tools</n-h3>
         <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
+          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
             <tool-card :tool="tool" />
           </n-gi>
         </n-grid>
       </div>
-    </transition>
 
-    <div v-if="toolStore.newTools.length > 0">
-      <n-h3>Newest tools</n-h3>
+      <n-h3>All the tools</n-h3>
       <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-          <tool-card :tool="tool" />
+        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
+          <transition>
+            <tool-card :tool="tool" />
+          </transition>
         </n-gi>
       </n-grid>
     </div>
-
-    <n-h3>All the tools</n-h3>
-    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-      <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-        <transition>
-          <tool-card :tool="tool" />
-        </transition>
-      </n-gi>
-    </n-grid>
   </div>
 </template>
 
@@ -72,8 +74,12 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
   padding-top: 50px;
 }
 
+.n-h3 {
+  margin-bottom: 10px;
+}
+
 ::v-deep(.n-grid) {
-  margin-bottom: 12px;
+  margin-bottom: 30px;
 }
 
 .height-enter-active,

src/plugins/plausible.plugin.ts

@@ -1,4 +1,5 @@
 import { config } from '@/config';
+
 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';
 
@@ -7,6 +8,6 @@ export const plausible = {
     const plausible = Plausible(config.plausible);
     plausible.enableAutoPageviews();
 
-    app.config.globalProperties.$plausible = plausible;
+    app.provide('plausible', plausible);
   },
 };

src/tools/base64-string-converter/base64-string-converter.vue

@@ -53,5 +53,3 @@ const b64Validation = useValidation({
   rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
 });
 </script>
-
-<style lang="less" scoped></style>

src/tools/hmac-generator/hmac-generator.vue

@@ -94,5 +94,3 @@ const hmac = computed(() =>
 );
 const { copy } = useCopy({ source: hmac });
 </script>
-
-<style lang="less" scoped></style>

src/tools/index.ts

@@ -1,5 +1,3 @@
-import { LockOpen } from '@vicons/tabler';
-
 import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';

src/tools/math-evaluator/math-evaluator.vue

@@ -29,5 +29,3 @@ const expression = ref('');
 
 const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
 </script>
-
-<style lang="less" scoped></style>

src/tools/mime-types/mime-types.vue

@@ -95,5 +95,3 @@ const selectedExtension = ref(undefined);
 
 const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeType[selectedExtension.value] : []));
 </script>
-
-<style lang="less" scoped></style>