feat(new tool): Markdown TOC Generator

Fix #572, #573 and #542

components.d.ts

@@ -119,6 +119,7 @@ declare module '@vue/runtime-core' {
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MarkdownTocGenerator: typeof import('./src/tools/markdown-toc-generator/markdown-toc-generator.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
@@ -129,15 +130,18 @@ declare module '@vue/runtime-core' {
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']

package.json

@@ -68,6 +68,7 @@
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
+    "markdown-contents": "^1.0.11",
     "marked": "^10.0.0",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",

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 markdownTocGenerator } from './markdown-toc-generator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -107,6 +108,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      markdownTocGenerator,
     ],
   },
   {

src/tools/markdown-toc-generator/index.ts

@@ -0,0 +1,12 @@
+import { Table } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown toc generator',
+  path: '/markdown-toc-generator',
+  description: 'Generate a TOC from a markdown file/content',
+  keywords: ['markdown', 'toc', 'generator'],
+  component: () => import('./markdown-toc-generator.vue'),
+  icon: Table,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/markdown-toc-generator/markdown-contents.d.ts

@@ -0,0 +1,6 @@
+declare module 'markdown-contents'{
+    declare class MarkdownContents {
+        markdown(): string;
+      }
+    export default function Create(markdown: string):MarkdownContents;
+}

src/tools/markdown-toc-generator/markdown-toc-generator.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import MarkdownContents from 'markdown-contents';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const defaultValue = `# A title 1
+
+## A title level 2
+
+# Another title 1
+
+## Another title level 2
+`;
+function transformer(value: string) {
+  return withDefaultOnError(() => {
+    const generator = MarkdownContents(value);
+    return generator.markdown();
+  }, '');
+}
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your Markdown content"
+    :input-default="defaultValue"
+    input-placeholder="Paste your Markdown content here..."
+    output-label="Generated Markdown TOC"
+    output-language="markdown"
+    :transformer="transformer"
+  />
+</template>