Merge 894f2596bc into 76a19d218d

src/tools/index.ts

@@ -1,11 +1,10 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
-
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
-
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as markdownCheatsheet } from './markdown-cheatsheet';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -85,7 +84,19 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',
@@ -128,16 +139,23 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      asciiTextDrawer,
     ],
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+    ],
   },
   {
     name: 'Development',
     components: [
       gitMemo,
+      markdownCheatsheet,
       randomPortGenerator,
       crontabGenerator,
       jsonViewer,
@@ -152,15 +170,29 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator],
   },
   {
     name: 'Measurement',
-    components: [chronometer, temperatureConverter, benchmarkBuilder],
+    components: [
+      chronometer,
+      temperatureConverter,
+      benchmarkBuilder,
+    ],
   },
   {
     name: 'Text',
@@ -176,7 +208,10 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+    ],
   },
 ];
 

src/tools/markdown-cheatsheet/index.ts

@@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown Cheat Sheet',
+  path: '/markdown-cheatsheet',
+  description: 'Markdown Cheat Sheet',
+  keywords: ['markdown', 'cheatsheet', 'memo'],
+  component: () => import('./markdown-cheatsheet.vue'),
+  icon: Markdown,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/markdown-cheatsheet/markdown-cheatsheet.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import Memo from './md-memo.content.md';
+
+const themeVars = useThemeVars();
+</script>
+
+<template>
+  <div>
+    <Memo />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(pre) {
+  margin: 0;
+  padding: 15px 22px;
+  background-color: v-bind('themeVars.cardColor');
+  border-radius: 4px;
+  overflow: auto;
+}
+</style>

src/tools/markdown-cheatsheet/md-memo.content.md

@@ -0,0 +1,166 @@
+---
+layout: default
+title: Markdown Cheat Sheet
+description: A quick reference to the Markdown syntax.
+last_modified_at: 2021-12-05
+---
+
+## Overview
+
+This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can't cover every edge case, so if you need more information about any of these elements, refer to the reference guides for <n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/">basic-syntax</n-a> and <n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/">extended-syntax</n-a>.
+
+## Basic Syntax
+
+These are the elements outlined in John Gruber's original design document. All Markdown applications support these elements.
+
+<n-table :single-line="false">
+  <thead>
+    <tr>
+      <th>Element</th>
+      <th>Markdown Syntax</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#headings">Heading</n-a></td>
+      <td><code># H1<br>
+          ## H2<br>
+          ### H3</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#bold">Bold</n-a></td>
+      <td><code>**bold text**</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#italic">Italic</n-a></td>
+      <td><code>*italicized text*</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#blockquotes-1">Blockquote</n-a></td>
+      <td><code>> blockquote</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#ordered-lists">Ordered List</n-a></td>
+      <td><code>
+        1. First item<br>
+        2. Second item<br>
+        3. Third item<br>
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#unordered-lists">Unordered List</n-a></td>
+      <td>
+        <code>
+          - First item<br>
+          - Second item<br>
+          - Third item<br>
+        </code>
+      </td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#code">Code</n-a></td>
+      <td><code>`code`</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#horizontal-rules">Horizontal Rule</n-a></td>
+      <td><code>---</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#links">Link</n-a></td>
+      <td><code>[title](https://www.example.com)</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/basic-syntax/#images-1">Image</n-a></td>
+      <td><code>![alt text](image.jpg)</code></td>
+    </tr>
+  </tbody>
+</n-table>
+
+## Extended Syntax
+
+These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.
+
+<n-table :single-line="false">
+  <thead>
+    <tr>
+      <th>Element</th>
+      <th>Markdown Syntax</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#tables">Table</n-a></td>
+      <td><code>
+          | Syntax      | Description |<br>
+          | ----------- | ----------- |<br>
+          | Header      | Title       |<br>
+          | Paragraph   | Text        |
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#fenced-code-blocks">Fenced Code Block</n-a></td>
+      <td><code>```<br>
+      {<br>
+      &nbsp;&nbsp;"firstName": "John",<br>
+      &nbsp;&nbsp;"lastName": "Smith",<br>
+      &nbsp;&nbsp;"age": 25<br>
+      }<br>
+      ```
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#footnotes">Footnote</n-a></td>
+      <td><code>
+        Here's a sentence with a footnote. [^1]<br><br>
+        [^1]: This is the footnote.
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#heading-ids">Heading ID</n-a></td>
+      <td><code>### My Great Heading {#custom-id}</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#definition-lists">Definition List</n-a></td>
+      <td><code>
+        term<br>
+        : definition
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#strikethrough">Strikethrough</n-a></td>
+      <td><code>~~The world is flat.~~</code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#task-lists">Task List</n-a></td>
+      <td><code>
+        - [x] Write the press release<br>
+        - [ ] Update the website<br>
+        - [ ] Contact the media
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#emoji">Emoji</n-a><br>(see also <n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#copying-and-pasting-emoji">Copying and Pasting Emoji</n-a>)</td>
+      <td><code>
+        That is so funny! :joy:
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#highlight">Highlight</n-a></td>
+      <td><code>
+        I need to highlight these ==very important words==.
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#subscript">Subscript</n-a></td>
+      <td><code>
+        H~2~O
+      </code></td>
+    </tr>
+    <tr>
+      <td><n-a target="_blank" href="https://www.markdownguide.org/extended-syntax/#superscript">Superscript</n-a></td>
+      <td><code>
+        X^2^
+      </code></td>
+    </tr>
+  </tbody>
+</n-table>