Merge branch 'feat/port-numbers' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -271,6 +271,7 @@
     "postal-mime": "^2.2.7",
     "qpdf-wasm-esm-embedded": "^1.1.1",
     "potrace": "^2.1.8",
+    "port-numbers": "^8.0.11",
     "qrcode": "^1.5.1",
     "rtf-stream-parser": "^3.8.0",
     "slashes": "^3.0.12",

pnpm-lock.yaml

@@ -129,6 +129,7 @@ import { tool as nanoMemo } from './nano-memo';
 import { tool as option43Generator } from './option43-generator';
 import { tool as pgpEncryption } from './pgp-encryption';
 import { tool as pgpKeygen } from './pgp-keygen';
+import { tool as portNumbers } from './port-numbers';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -466,6 +467,7 @@ export const toolsByCategory: ToolCategory[] = [
       macAddressGenerator,
       ipv6UlaGenerator,
       option43Generator,
+      portNumbers,
     ],
   },
   {

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { PlugConnected } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Port Numbers',
+  path: '/port-numbers',
+  description: 'Search for assigned usage of a given port and protocol',
+  keywords: ['port', 'tcp', 'udp', 'protocol'],
+  component: () => import('./port-numbers.vue'),
+  icon: PlugConnected,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/port-numbers/index.ts

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import ports from 'port-numbers';
+import SpanCopyable from '@/components/SpanCopyable.vue';
+
+const port = ref(80);
+const protocol = ref('tcp');
+const result = computed(() => {
+  const [type, description] = ports[`${port.value}/${protocol.value}` as (keyof typeof ports)];
+  return { type: type ?? 'unknown', description: description ?? 'Unknown' };
+});
+</script>
+
+<template>
+  <div>
+    <c-card title="Port search">
+      <n-space>
+        <n-form-item label="Port number">
+          <n-input-number v-model:value="port" :min="1" />
+        </n-form-item>
+        <n-form-item label="Protocol">
+          <c-select
+            v-model:value="protocol"
+            :options="[{ value: 'tcp', label: 'TCP' }, { value: 'udp', label: 'UDP' }]"
+          />
+        </n-form-item>
+      </n-space>
+    </c-card>
+
+    <c-card>
+      <n-form-item label="Type">
+        <SpanCopyable :value="result?.type" />
+      </n-form-item>
+      <n-form-item label="Description">
+        <SpanCopyable :value="result?.description" />
+      </n-form-item>
+    </c-card>
+  </div>
+</template>