feat: better UI
This commit is contained in:
ShareVB
parent
d92a285cb2
commit
786991433a
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -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']
|
||||
|
||||
@ -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) };
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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-checkbox v-model:checked="generateAnchors" mr-2 />
|
||||
</n-form-item>
|
||||
<n-space>
|
||||
<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>
|
||||
|
||||
<c-input-text
|
||||
v-model:value="indentChars"
|
||||
label="Bullet Chars"
|
||||
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"
|
||||
placeholder="Anchors Prefix"
|
||||
mb-2
|
||||
/>
|
||||
|
||||
<n-form-item label="Concat Spaces" label-placement="left">
|
||||
<n-checkbox v-model:checked="concatSpaces" mr-2 />
|
||||
</n-form-item>
|
||||
|
||||
<c-select
|
||||
v-model:value="commentStyle"
|
||||
label="Comment Styles"
|
||||
:options="['html', 'liquid']"
|
||||
placeholder="Comment Styles"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<c-input-text
|
||||
v-model:value="anchorPrefix"
|
||||
label="Anchors Prefix"
|
||||
label-position="left"
|
||||
placeholder="Anchors Prefix"
|
||||
/>
|
||||
<n-form-item label="Indents: " label-placement="left">
|
||||
<n-input-number
|
||||
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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user