feat: Home Custom Content and tools filters

Fix CorentinTh#1538 and part of CorentinTh#395

Author: sharevb

README.md

@@ -33,6 +33,23 @@ services:
       - 8080:8080
 ```
 
+## Filter tools and add home custom content
+
+You can add custom content in Home page by mounting a `home.custom.md` in `/app`.
+
+You can filter available tools by mounting `tools-filter.json` in `/app`. It can contains the following filtering regex:
+```json
+{
+  "excludeCategoryFilterRegex": "",
+  "includeCategoryFilterRegex": "",
+  "excludeToolsFilterRegex": "",
+  "includeToolsFilterRegex": ""
+}
+```
+Category matches on category (English) names ; Tools matches on tools path/url.
+
+See (docker-tools-filter-and-home-content)[https://github.com/sharevb/it-tools]
+
 ## To build using a custom folder:
 
 ```

components.d.ts

@@ -279,6 +279,8 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']

docker-tools-filter-and-home-content/docker-compose.yml

@@ -0,0 +1,11 @@
+services:
+  it-tools:
+    container_name: it-tools
+    image: sharevb/it-tools:latest
+    pull_policy: always
+    restart: unless-stopped
+    volumes:
+      - ./tools-filter.json:/app/tools-filter.json
+      - ./home.custom.md:/app/home.custom.md
+    ports:
+      - 8080:8080

docker-tools-filter-and-home-content/tools-filter.json

@@ -0,0 +1,6 @@
+{
+  "excludeCategoryFilterRegex": "^(Gaming|Maths|Physics)$",
+  "includeCategoryFilterRegex": "",
+  "excludeToolsFilterRegex": "ai-prompt-splitter",
+  "includeToolsFilterRegex": "illuminance-converter"
+}

public/home.custom.md

@@ -0,0 +1 @@
+{}

public/tools-filter.json

@@ -3,11 +3,24 @@ import { IconDragDrop, IconFileDescription, IconHeart } from '@tabler/icons-vue'
 import { useHead } from '@vueuse/head';
 import { computed } from 'vue';
 import Draggable from 'vuedraggable';
+import VueMarkdown from 'vue-markdown-render';
 import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';
 import { useToolStore } from '@/tools/tools.store';
 import { config } from '@/config';
 
+const base = import.meta.env.BASE_URL ?? '/';
+const homeCustomMarkdown = computedAsync(async () => {
+  try {
+    const remoteCustomHomeMarkdownResponse = await fetch(`${base}home.custom.md`);
+    if (remoteCustomHomeMarkdownResponse.ok) {
+      return await remoteCustomHomeMarkdownResponse.text();
+    }
+  }
+  catch {}
+  return '';
+});
+
 const toolStore = useToolStore();
 
 useHead({ title: 'IT Tools - Handy online tools for developers' });
@@ -87,6 +100,10 @@ function onUpdateFavoriteTools() {
         </div>
       </div>
 
+      <div v-if="homeCustomMarkdown">
+        <VueMarkdown :source="homeCustomMarkdown" />
+      </div>
+
       <h3 class="mb-5px mt-25px font-500 text-neutral-400">
         {{ $t('home.categories.allTools') }}
       </h3>

src/pages/Home.page.vue

@@ -12,7 +12,7 @@ const [coinFlip, refreshCoinFlip] = computedRefreshable(() => ({
   <div>
     <Transition name="bounce" mode="out-in">
       <div :key="coinFlip.dt" flex items-center justify-center>
-        <div flex items-center justify-center rounded-full outline style="width: 5em; height: 5em" mt-1 mb-1>
+        <div style="width: 5em; height: 5em" mb-1 mt-1 flex items-center justify-center rounded-full outline>
           {{ coinFlip.coin }}
         </div>
       </div>

src/tools/coin-flipper/coin-flipper.vue

@@ -2,25 +2,60 @@ import { type MaybeRef, get, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import type { Ref } from 'vue';
 import _ from 'lodash';
-import type { Tool, ToolCategory, ToolWithCategory } from './tools.types';
+import type { Tool, ToolCategory, ToolWithCategory, ToolsFilter } from './tools.types';
 import { tools as allTools } from './index';
 
+const base = import.meta.env.BASE_URL ?? '/';
+let filterConfig: ToolsFilter = {};
+try {
+  const remoteConfigResponse = await fetch(`${base}tools-filter.json`);
+  if (remoteConfigResponse.ok) {
+    filterConfig = (await remoteConfigResponse.json()) as ToolsFilter;
+  }
+}
+catch {}
+
 export const useToolStore = defineStore('tools', () => {
   const favoriteToolsName = useStorage('favoriteToolsName', []) as Ref<string[]>;
   const { t } = useI18n();
 
-  const tools = computed<ToolWithCategory[]>(() => allTools.map((tool) => {
-    const toolI18nKey = tool.path.replace(/\//g, '');
-    const category = tool.category || 'Development';
+  const makeRegExp = (regex: string | undefined) => regex ? new RegExp(regex, 'i') : null;
+  const filters = {
+    excludeCategoryFilterRegex: makeRegExp(filterConfig.excludeCategoryFilterRegex),
+    includeCategoryFilterRegex: makeRegExp(filterConfig.includeCategoryFilterRegex),
+    excludeToolsFilterRegex: makeRegExp(filterConfig.excludeToolsFilterRegex),
+    includeToolsFilterRegex: makeRegExp(filterConfig.includeToolsFilterRegex),
+  };
+
+  const tools = computed<ToolWithCategory[]>(() => allTools
+    .filter((tool) => {
+      const category = tool.category || 'Development';
+      if (filters.includeToolsFilterRegex?.test(tool.path)) {
+        return true;
+      }
+      if (filters.includeCategoryFilterRegex?.test(category)) {
+        return true;
+      }
+      if (filters.excludeToolsFilterRegex?.test(tool.path)) {
+        return false;
+      }
+      if (filters.excludeCategoryFilterRegex?.test(category)) {
+        return false;
+      }
+      return true;
+    })
+    .map((tool) => {
+      const toolI18nKey = tool.path.replace(/\//g, '');
+      const category = tool.category || 'Development';
 
-    return ({
-      ...tool,
-      path: tool.path,
-      name: t(`tools.${toolI18nKey}.title`, tool.name),
-      description: t(`tools.${toolI18nKey}.description`, tool.description),
-      category: t(`tools.categories.${category.toLowerCase()}`, category),
-    });
-  }));
+      return ({
+        ...tool,
+        path: tool.path,
+        name: t(`tools.${toolI18nKey}.title`, tool.name),
+        description: t(`tools.${toolI18nKey}.description`, tool.description),
+        category: t(`tools.categories.${category.toLowerCase()}`, category),
+      });
+    }));
 
   const toolsByCategory = computed<ToolCategory[]>(() => {
     return _.chain(tools.value)

src/tools/tools.store.ts

@@ -20,4 +20,11 @@ export interface ToolCategory {
   components: Tool[]
 }
 
+export interface ToolsFilter {
+  excludeCategoryFilterRegex?: string
+  includeCategoryFilterRegex?: string
+  excludeToolsFilterRegex?: string
+  includeToolsFilterRegex?: string
+}
+
 export type ToolWithCategory = Tool & { category: string };