From cf577bb7c9ca86351757be3a59b909517f7e345c Mon Sep 17 00:00:00 2001
From: Isaiah <isaiahjfowler@protonmail.com>
Date: Sat, 2 Dec 2023 21:09:24 -0500
Subject: [PATCH] Cleanup

---
 src/tools/markdown-viewer/index.ts            |  8 ++--
 .../markdown-viewer.e2e.spec.ts               | 15 -------
 .../markdown-viewer.service.test.ts           |  6 ---
 .../markdown-viewer.service.ts                | 25 ++++++-----
 src/tools/markdown-viewer/markdown-viewer.vue | 41 +++++++------------
 5 files changed, 31 insertions(+), 64 deletions(-)
 delete mode 100644 src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts
 delete mode 100644 src/tools/markdown-viewer/markdown-viewer.service.test.ts

diff --git a/src/tools/markdown-viewer/index.ts b/src/tools/markdown-viewer/index.ts
index 684b0baa..677639a9 100644
--- a/src/tools/markdown-viewer/index.ts
+++ b/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'),
 });
diff --git a/src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts b/src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts
deleted file mode 100644
index 0ca72df1..00000000
--- a/src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts
+++ /dev/null
@@ -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 }) => {
-
-  });
-});
\ No newline at end of file
diff --git a/src/tools/markdown-viewer/markdown-viewer.service.test.ts b/src/tools/markdown-viewer/markdown-viewer.service.test.ts
deleted file mode 100644
index e5401e27..00000000
--- a/src/tools/markdown-viewer/markdown-viewer.service.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { expect, describe, it } from 'vitest';
-// import { } from './markdown-viewer.service';
-//
-// describe('markdown-viewer', () => {
-//
-// })
\ No newline at end of file
diff --git a/src/tools/markdown-viewer/markdown-viewer.service.ts b/src/tools/markdown-viewer/markdown-viewer.service.ts
index d8c517da..0023c1e5 100644
--- a/src/tools/markdown-viewer/markdown-viewer.service.ts
+++ b/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);
 }
diff --git a/src/tools/markdown-viewer/markdown-viewer.vue b/src/tools/markdown-viewer/markdown-viewer.vue
index 7ee6a908..b4e2b32b 100644
--- a/src/tools/markdown-viewer/markdown-viewer.vue
+++ b/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>