feat(new-tool): slugify string

5 files changed, 69 insertions, 0 deletions

diff --git a/package.json b/package.json
index d5200a3..ea29f11 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.9.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b96de11..36161e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,7 @@ specifiers:
   '@it-tools/bip39': ^0.0.4
   '@it-tools/oggen': ^1.3.0
   '@rushstack/eslint-patch': ^1.2.0
+  '@sindresorhus/slugify': ^2.2.0
   '@types/bcryptjs': ^2.4.2
   '@types/crypto-js': ^4.1.1
   '@types/jsdom': ^16.2.15
@@ -73,6 +74,7 @@ specifiers:
 dependencies:
   '@it-tools/bip39': 0.0.4
   '@it-tools/oggen': 1.3.0
+  '@sindresorhus/slugify': 2.2.0
   '@vicons/material': 0.12.0
   '@vicons/tabler': 0.12.0
   '@vueuse/core': 8.9.4_vue@3.2.45
@@ -1622,6 +1624,21 @@ packages:
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
     dev: true
 
+  /@sindresorhus/slugify/2.2.0:
+    resolution: {integrity: sha512-9Vybc/qX8Kj6pxJaapjkFbiUJPk7MAkCh/GFCxIBnnsuYCFPIXKvnLidG8xlepht3i24L5XemUmGtrJ3UWrl6w==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@sindresorhus/transliterate': 1.6.0
+      escape-string-regexp: 5.0.0
+    dev: false
+
+  /@sindresorhus/transliterate/1.6.0:
+    resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      escape-string-regexp: 5.0.0
+    dev: false
+
   /@surma/rollup-plugin-off-main-thread/2.2.3:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
@@ -3581,6 +3598,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /escape-string-regexp/5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /escodegen/2.0.0:
     resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
     engines: {node: '>=6.0'}
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 2aa56f2..c7f0d98 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as slugifyString } from './slugify-string';
 import { tool as keycodeInfo } from './keycode-info';
 import { tool as jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
@@ -69,6 +70,7 @@ export const toolsByCategory: ToolCategory[] = [
       mimeTypes,
       jwtParser,
       keycodeInfo,
+      slugifyString,
     ],
   },
   {
diff --git a/src/tools/slugify-string/index.ts b/src/tools/slugify-string/index.ts
new file mode 100644
index 0000000..8dabcdb
--- /dev/null
+++ b/src/tools/slugify-string/index.ts
@@ -0,0 +1,11 @@
+import { AbcRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Slugify string',
+  path: '/slugify-string',
+  description: 'Make a string url, filename and id safe.',
+  keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
+  component: () => import('./slugify-string.vue'),
+  icon: AbcRound,
+});
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue
new file mode 100644
index 0000000..be5db14
--- /dev/null
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <n-form-item label="Your string to slugify">
+      <n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)"></n-input>
+    </n-form-item>
+
+    <n-form-item label="Your slug">
+      <n-input
+        :value="slug"
+        type="textarea"
+        readonly
+        placeholder="You slug will be generated here (ex: my-file-path)"
+      ></n-input>
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import slugify from '@sindresorhus/slugify';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useCopy } from '@/composable/copy';
+
+const input = ref('');
+const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
+const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
+</script>
+
+<style lang="less" scoped></style>