Cleanup

src/tools/markdown-viewer/index.ts

@@ -1,12 +1,12 @@
-import { ArrowsShuffle } from '@vicons/tabler';
+import { Markdown } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
   name: 'Markdown viewer',
   path: '/markdown-viewer',
-  description: 'Effortlessly view Markdown files with enhanced readability and convenience',
-  keywords: ['markdown', 'viewer'],
+  description: 'View your Markdown in a human friendly readable format.',
+  keywords: ['markdown', 'md', 'viewer', 'prettify'],
   component: () => import('./markdown-viewer.vue'),
-  icon: ArrowsShuffle,
+  icon: Markdown,
   createdAt: new Date('2023-12-02'),
 });

src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Tool - Markdown viewer', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/markdown-viewer');
-  });
-
-  test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Markdown viewer - IT Tools');
-  });
-
-  test('', async ({ page }) => {
-
-  });
-});

src/tools/markdown-viewer/markdown-viewer.service.test.ts

@@ -1,6 +0,0 @@
-import { expect, describe, it } from 'vitest';
-// import { } from './markdown-viewer.service';
-//
-// describe('markdown-viewer', () => {
-//
-// })

src/tools/markdown-viewer/markdown-viewer.service.ts

@@ -1,20 +1,19 @@
-import { marked } from "marked";
-import highlight from "highlight.js";
+import { marked } from 'marked';
+import highlight from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
 
-export const renderMarkdown = (md: string) => {
-    highlight.configure({
+export { renderMarkdown };
 
-    })
-    const renderer = new marked.Renderer();
+function renderMarkdown(md: string) {
+  const renderer = new marked.Renderer();
 
-    // Override the code rendering function to use highlight.js for syntax highlighting
-    renderer.code = (code: string, language: string) => {
-        const validLanguage = highlight.getLanguage(language) ? language : 'plaintext';
-        return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`;
-    };
+  // Override the code rendering function to use highlight.js for syntax highlighting
+  renderer.code = (code: string, language: string) => {
+    const validLanguage = highlight.getLanguage(language) ? language : 'plaintext';
+    return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`;
+  };
 
-    marked.use({ renderer });
+  marked.use({ renderer });
 
-    return marked.parse(md)
+  return marked.parse(md);
 }

src/tools/markdown-viewer/markdown-viewer.vue

@@ -1,40 +1,29 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core';
+import { renderMarkdown } from './markdown-viewer.service';
+
 const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const inputElement = ref<HTMLElement>();
-import { renderMarkdown } from "./markdown-viewer.service";
-
 </script>
 
 <template>
   <n-form-item
-      label="Your raw MD"
+    label="Your raw markdown"
   >
     <c-input-text
-        ref="inputElement"
-        v-model:value="rawMd"
-        placeholder="Paste your raw JSON here..."
-        rows="35"
-        multiline
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-        monospace
+      ref="inputElement"
+      v-model:value="rawMd"
+      placeholder="Paste your raw markdown here..."
+      rows="35"
+      multiline
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      monospace
     />
   </n-form-item>
-  <n-form-item label="Prettified version of your MD">
-    <c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)"></c-card>
+  <n-form-item label="Prettified version of your markdown">
+    <c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)" />
   </n-form-item>
 </template>
-
-<style lang="less" scoped>
-.result-card {
-  position: relative;
-  .copy-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-}
-</style>