Skip to content

Commit 7869914

Browse files
sharevbsharevb
committed
feat: better UI
1 parent d92a285 commit 7869914

File tree

4 files changed

+83
-42
lines changed

4 files changed

+83
-42
lines changed

‎components.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ declare module '@vue/runtime-core' {
128128
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
129129
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
130130
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
131+
NCheckbox: typeof import('naive-ui')['NCheckbox']
131132
NCode: typeof import('naive-ui')['NCode']
132133
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
133134
NColorPicker: typeof import('naive-ui')['NColorPicker']
@@ -147,7 +148,9 @@ declare module '@vue/runtime-core' {
147148
NLayout: typeof import('naive-ui')['NLayout']
148149
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
149150
NMenu: typeof import('naive-ui')['NMenu']
151+
NP: typeof import('naive-ui')['NP']
150152
NScrollbar: typeof import('naive-ui')['NScrollbar']
153+
NSpace: typeof import('naive-ui')['NSpace']
151154
NSpin: typeof import('naive-ui')['NSpin']
152155
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
153156
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

‎src/components/TextareaCopyable.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
77
import xmlHljs from 'highlight.js/lib/languages/xml';
88
import yamlHljs from 'highlight.js/lib/languages/yaml';
99
import iniHljs from 'highlight.js/lib/languages/ini';
10+
import markdownHljs from 'highlight.js/lib/languages/markdown';
1011
import { useCopy } from '@/composable/copy';
1112
1213
const props = withDefaults(
@@ -30,6 +31,7 @@ hljs.registerLanguage('html', xmlHljs);
3031
hljs.registerLanguage('xml', xmlHljs);
3132
hljs.registerLanguage('yaml', yamlHljs);
3233
hljs.registerLanguage('toml', iniHljs);
34+
hljs.registerLanguage('markdown', markdownHljs);
3335
3436
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
3537
const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const tool = defineTool({
55
name: 'Markdown toc generator',
66
path: '/markdown-toc-generator',
77
description: 'Generate a TOC from a markdown file/content',
8-
keywords: ['markdown', 'toc', 'generator'],
8+
keywords: ['markdown', 'md', 'toc', 'generator'],
99
component: () => import('./markdown-toc-generator.vue'),
1010
icon: Table,
1111
createdAt: new Date('2024-05-11'),

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

Lines changed: 77 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,36 @@ import {
55
} from './markdown-toc-generator.service';
66
import { useQueryParamOrStorage } from '@/composable/queryParams';
77
8-
const markdown = ref('');
8+
const markdown = ref(`# Some main title
9+
10+
[TOC]
11+
12+
## First Title
13+
14+
Some text
15+
16+
## Second Spaced Title
17+
18+
Some text
19+
20+
### Title with Link [TOC](http://it-tools.tech)
21+
22+
\`\`\`
23+
## some bash code
24+
echo 'test';
25+
\`\`\`
26+
27+
### Title with code \`var\`
28+
29+
Some text
30+
31+
## Last Title`);
932
const generateAnchors = useQueryParamOrStorage({ name: 'anchors', storageName: 'md-toc-gen:anchors', defaultValue: true });
1033
const indentChars = useQueryParamOrStorage({ name: 'bullets', storageName: 'md-toc-gen:bullets', defaultValue: '-*+' });
11-
const indentSpaces = ref(2);
34+
const indentSpaces = ref(3);
1235
const maxLevel = useQueryParamOrStorage({ name: 'max', storageName: 'md-toc-gen:max', defaultValue: -1 });
1336
const anchorPrefix = useQueryParamOrStorage({ name: 'prefix', storageName: 'md-toc-gen:prefix', defaultValue: '' });
14-
const concatSpaces = useQueryParamOrStorage({ name: 'concat', storageName: 'md-toc-gen:concat', defaultValue: true });
37+
const concatSpaces = useQueryParamOrStorage({ name: 'concat', storageName: 'md-toc-gen:concat', defaultValue: false });
1538
const commentStyle = useQueryParamOrStorage({ name: 'comment', storageName: 'md-toc-gen:comment', defaultValue: 'html' });
1639
1740
const markdownWithTOC = computed(() => withDefaultOnError(() => {
@@ -31,53 +54,66 @@ const markdownWithTOC = computed(() => withDefaultOnError(() => {
3154
<template>
3255
<div>
3356
<c-card title="Options" mb-2>
34-
<n-form-item label="Generate Anchors" label-placement="left">
35-
<n-checkbox v-model:checked="generateAnchors" mr-2 />
36-
</n-form-item>
57+
<n-space>
58+
<n-form-item label-placement="left">
59+
<n-checkbox v-model:checked="generateAnchors">
60+
Generate Anchors
61+
</n-checkbox>
62+
</n-form-item>
63+
<n-form-item label="Max Heading Level:" label-placement="left">
64+
<n-input-number
65+
v-model:value="maxLevel"
66+
placeholder="Max Heading Level..."
67+
:max="6" :min="-1"
68+
/>
69+
</n-form-item>
70+
</n-space>
3771

38-
<c-input-text
39-
v-model:value="indentChars"
40-
label="Bullet Chars"
41-
placeholder="Bullet Chars"
42-
mb-2
43-
/>
44-
45-
<n-form-item label="Indents: " label-placement="left">
46-
<n-input-number v-model:value="indentSpaces" placeholder="Indents..." :max="10" :min="1" w-full />
47-
</n-form-item>
48-
49-
<n-form-item label="Max Heading Level: " label-placement="left">
50-
<n-input-number v-model:value="maxLevel" placeholder="Max Heading Level..." :max="6" :min="-1" w-full />
51-
</n-form-item>
52-
53-
<c-input-text
54-
v-model:value="anchorPrefix"
55-
label="Anchors Prefix"
56-
placeholder="Anchors Prefix"
57-
mb-2
58-
/>
59-
60-
<n-form-item label="Concat Spaces" label-placement="left">
61-
<n-checkbox v-model:checked="concatSpaces" mr-2 />
62-
</n-form-item>
63-
64-
<c-select
65-
v-model:value="commentStyle"
66-
label="Comment Styles"
67-
:options="['html', 'liquid']"
68-
placeholder="Comment Styles"
69-
/>
72+
<details>
73+
<summary>Advanced</summary>
74+
<n-space>
75+
<n-form-item label-placement="left">
76+
<n-checkbox v-model:checked="concatSpaces">
77+
Concat Spaces
78+
</n-checkbox>
79+
</n-form-item>
80+
<c-input-text
81+
v-model:value="indentChars"
82+
label="Bullet Chars"
83+
label-position="left"
84+
placeholder="Bullet Chars"
85+
/>
86+
<c-input-text
87+
v-model:value="anchorPrefix"
88+
label="Anchors Prefix"
89+
label-position="left"
90+
placeholder="Anchors Prefix"
91+
/>
92+
<n-form-item label="Indents: " label-placement="left">
93+
<n-input-number
94+
v-model:value="indentSpaces"
95+
placeholder="Indents..."
96+
:max="10" :min="1"
97+
/>
98+
</n-form-item>
99+
<c-select
100+
v-model:value="commentStyle"
101+
label="Comment Styles"
102+
label-position="left"
103+
:options="['html', 'liquid']"
104+
placeholder="Comment Styles"
105+
/>
106+
</n-space>
107+
</details>
70108
</c-card>
71109

72110
<c-card title="Input markdown" mb-2>
73111
<n-p>You can paste a document with existing TOC (generated by this tool) or add a <code>[TOC]</code> marker in your document (on a single line)</n-p>
74112
<c-input-text
75113
v-model:value="markdown"
76114
placeholder="Put your markdown here..."
77-
multline
115+
multiline
78116
rows="8"
79-
mb-2
80-
mt-2
81117
/>
82118
</c-card>
83119

0 commit comments

Comments
 (0)