feat: better UI

components.d.ts

@@ -128,6 +128,7 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
@@ -147,7 +148,9 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

src/components/TextareaCopyable.vue

@@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import markdownHljs from 'highlight.js/lib/languages/markdown';
 import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(
@@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('markdown', markdownHljs);
 
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

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

@@ -5,7 +5,7 @@ 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'],
+  keywords: ['markdown', 'md', 'toc', 'generator'],
   component: () => import('./markdown-toc-generator.vue'),
   icon: Table,
   createdAt: new Date('2024-05-11'),

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

@@ -5,13 +5,36 @@ import {
 } from './markdown-toc-generator.service';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
 
-const markdown = ref('');
+const markdown = ref(`# Some main title
+
+[TOC]
+
+## First Title
+
+Some text 
+
+## Second  Spaced  Title
+
+Some text
+
+### Title with Link [TOC](http://it-tools.tech)
+
+\`\`\`
+## some bash code
+echo 'test';
+\`\`\`
+
+### Title with code \`var\`
+
+Some text
+
+## Last Title`);
 const generateAnchors = useQueryParamOrStorage({ name: 'anchors', storageName: 'md-toc-gen:anchors', defaultValue: true });
 const indentChars = useQueryParamOrStorage({ name: 'bullets', storageName: 'md-toc-gen:bullets', defaultValue: '-*+' });
-const indentSpaces = ref(2);
+const indentSpaces = ref(3);
 const maxLevel = useQueryParamOrStorage({ name: 'max', storageName: 'md-toc-gen:max', defaultValue: -1 });
 const anchorPrefix = useQueryParamOrStorage({ name: 'prefix', storageName: 'md-toc-gen:prefix', defaultValue: '' });
-const concatSpaces = useQueryParamOrStorage({ name: 'concat', storageName: 'md-toc-gen:concat', defaultValue: true });
+const concatSpaces = useQueryParamOrStorage({ name: 'concat', storageName: 'md-toc-gen:concat', defaultValue: false });
 const commentStyle = useQueryParamOrStorage({ name: 'comment', storageName: 'md-toc-gen:comment', defaultValue: 'html' });
 
 const markdownWithTOC = computed(() => withDefaultOnError(() => {
@@ -31,42 +54,57 @@ const markdownWithTOC = computed(() => withDefaultOnError(() => {
 <template>
   <div>
     <c-card title="Options" mb-2>
-      <n-form-item label="Generate Anchors" label-placement="left">
+      <n-space>
-        <n-checkbox v-model:checked="generateAnchors" mr-2 />
+        <n-form-item label-placement="left">
+          <n-checkbox v-model:checked="generateAnchors">
+            Generate Anchors
+          </n-checkbox>
         </n-form-item>
+        <n-form-item label="Max Heading Level:" label-placement="left">
+          <n-input-number
+            v-model:value="maxLevel"
+            placeholder="Max Heading Level..."
+            :max="6" :min="-1"
+          />
+        </n-form-item>
+      </n-space>
 
+      <details>
+        <summary>Advanced</summary>
+        <n-space>
+          <n-form-item label-placement="left">
+            <n-checkbox v-model:checked="concatSpaces">
+              Concat Spaces
+            </n-checkbox>
+          </n-form-item>
           <c-input-text
             v-model:value="indentChars"
             label="Bullet Chars"
+            label-position="left"
             placeholder="Bullet Chars"
-        mb-2
           />
-
-      <n-form-item label="Indents: " label-placement="left">
-        <n-input-number v-model:value="indentSpaces" placeholder="Indents..." :max="10" :min="1" w-full />
-      </n-form-item>
-
-      <n-form-item label="Max Heading Level: " label-placement="left">
-        <n-input-number v-model:value="maxLevel" placeholder="Max Heading Level..." :max="6" :min="-1" w-full />
-      </n-form-item>
-
           <c-input-text
             v-model:value="anchorPrefix"
             label="Anchors Prefix"
+            label-position="left"
             placeholder="Anchors Prefix"
-        mb-2
           />
-
+          <n-form-item label="Indents: " label-placement="left">
-      <n-form-item label="Concat Spaces" label-placement="left">
+            <n-input-number
-        <n-checkbox v-model:checked="concatSpaces" mr-2 />
+              v-model:value="indentSpaces"
+              placeholder="Indents..."
+              :max="10" :min="1"
+            />
           </n-form-item>
-
           <c-select
             v-model:value="commentStyle"
             label="Comment Styles"
+            label-position="left"
             :options="['html', 'liquid']"
             placeholder="Comment Styles"
           />
+        </n-space>
+      </details>
     </c-card>
 
     <c-card title="Input markdown" mb-2>
@@ -74,10 +112,8 @@ const markdownWithTOC = computed(() => withDefaultOnError(() => {
       <c-input-text
         v-model:value="markdown"
         placeholder="Put your markdown here..."
-        multline
+        multiline
         rows="8"
-        mb-2
-        mt-2
       />
     </c-card>