chore(release): 2.7.0

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.7.0](https://github.com/CorentinTh/it-tools/compare/v2.6.0...v2.7.0) (2022-07-24)
+
+
+### Features
+
+* **new-tool:** added an SQL prettifier and formatter ([d1f95f5](https://github.com/CorentinTh/it-tools/commit/d1f95f5b34a4570f1033a5289f0bd009d1aefb0c))
+
+
+### Bug Fixes
+
+* **typo:** fix few typos ([6cd25a7](https://github.com/CorentinTh/it-tools/commit/6cd25a743e32fceeaec8c1f8b94927a9c5d901f1))
+
 ## [2.6.0](https://github.com/CorentinTh/it-tools/compare/v2.5.3...v2.6.0) (2022-07-23)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "it-tools",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "it-tools",
-      "version": "2.6.0",
+      "version": "2.7.0",
       "license": "GNU GPLv3",
       "dependencies": {
         "@it-tools/bip39": "^0.0.4",
@@ -30,6 +30,7 @@
         "plausible-tracker": "^0.3.5",
         "qrcode": "^1.5.0",
         "randombytes": "^2.1.0",
+        "sql-formatter": "^8.2.0",
         "uuid": "^8.3.2",
         "vue": "^3.2.31",
         "vue-router": "^4.0.12"
@@ -3089,8 +3090,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/array-ify": {
       "version": "1.0.0",
@@ -9580,6 +9580,17 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "node_modules/sql-formatter": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-8.2.0.tgz",
+      "integrity": "sha512-5hQOSOk8jfhPkNgUmpm+9Fn2aaLWcf4vKL/dIvUN5q9rsamKHSyN/gL79xpkETNOyL+Zv5BMQfA7z9Rmz/DJJg==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.js"
+      }
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -13660,8 +13671,7 @@
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "array-ify": {
       "version": "1.0.0",
@@ -18502,6 +18512,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "sql-formatter": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-8.2.0.tgz",
+      "integrity": "sha512-5hQOSOk8jfhPkNgUmpm+9Fn2aaLWcf4vKL/dIvUN5q9rsamKHSyN/gL79xpkETNOyL+Zv5BMQfA7z9Rmz/DJJg==",
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -52,6 +52,7 @@
     "plausible-tracker": "^0.3.5",
     "qrcode": "^1.5.0",
     "randombytes": "^2.1.0",
+    "sql-formatter": "^8.2.0",
     "uuid": "^8.3.2",
     "vue": "^3.2.31",
     "vue-router": "^4.0.12"

src/layouts/base.layout.vue

@@ -107,7 +107,7 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
           :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
           quaternary
-          aria-label="Toogle menu"
+          aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <n-icon size="25" :component="Menu2" />
@@ -147,7 +147,7 @@ const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
               Sponsor
             </n-button>
           </template>
-          ❤ Support IT Tools developement !
+          ❤ Support IT Tools development !
         </n-tooltip>
 
         <navbar-buttons v-if="!styleStore.isSmallScreen" />

src/pages/404.page.vue

@@ -6,7 +6,7 @@ useHead({ title: 'Page not found - IT Tools' });
 
 <template>
   <div class="e404-wrapper">
-    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to extist">
+    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist">
       <template #footer>
         <router-link to="/" #="{ navigate, href }" custom>
           <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>

src/pages/About.vue

@@ -11,11 +11,11 @@ useHead({ title: 'About - IT Tools' });
       This wonderful website, made with ❤ by
       <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
         Corentin Thomasset </n-button
-      >, aggregates useful tools for developer and people working in IT. If you find it usefull, please fell free to
-      share it to people you think may find it usefull too and dont forget to pin it in your shortcut bar !
+      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
+      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
     </n-p>
     <n-p>
-      IT Tools is opensource (under the MIT license) and free, and will always be, but it cost me money to host and
+      IT Tools is open-source (under the MIT license) and free, and will always be, but it cost me money to host and
       renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
       supporting by
       <n-button
@@ -33,7 +33,7 @@ useHead({ title: 'About - IT Tools' });
     <n-h2>Technologies</n-h2>
     <n-p>
       IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
-      by Vercel. Third party opensource libraries are used in some tools, you may find the complete list in the
+      by Vercel. Third party open-source libraries are used in some tools, you may find the complete list in the
       <n-button
         type="primary"
         tag="a"

src/tools/index.ts

@@ -21,6 +21,7 @@ import { tool as mathEvaluator } from './math-evaluator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
+import { tool as sqlPrettify } from './sql-prettify';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
 import { tool as urlEncoder } from './url-encoder';
@@ -53,7 +54,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Development',
     icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify],
   },
   {
     name: 'Math',

src/tools/sql-prettify/index.ts

@@ -0,0 +1,26 @@
+import { Database } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'SQL prettify and format',
+  path: '/sql-prettify',
+  description: 'Format and prettify your SQL queries online (it supports various SQL dialects).',
+  keywords: [
+    'sql',
+    'prettify',
+    'beautify',
+    'GCP BigQuery',
+    'IBM DB2',
+    'Apache Hive',
+    'MariaDB',
+    'MySQL',
+    'Couchbase N1QL',
+    'Oracle PL/SQL',
+    'PostgreSQL',
+    'Amazon Redshift',
+    'Spark',
+    'SQL Server Transact-SQL',
+  ],
+  component: () => import('./sql-prettify.vue'),
+  icon: Database,
+});

src/tools/sql-prettify/sql-prettify.service.test.ts

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

src/tools/sql-prettify/sql-prettify.vue

@@ -0,0 +1,112 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; width: 600px">
+      <n-space n-space item-style="flex: 1 1 0">
+        <div>
+          <n-form-item label="Dialect">
+            <n-select
+              v-model:value="config.language"
+              :options="[
+                { label: 'GCP BigQuery', value: 'bigquery' },
+                { label: 'IBM DB2', value: 'db2' },
+                { label: 'Apache Hive', value: 'hive' },
+                { label: 'MariaDB', value: 'mariadb' },
+                { label: 'MySQL', value: 'mysql' },
+                { label: 'Couchbase N1QL', value: 'n1ql' },
+                { label: 'Oracle PL/SQL', value: 'plsql' },
+                { label: 'PostgreSQL', value: 'postgresql' },
+                { label: 'Amazon Redshift', value: 'redshift' },
+                { label: 'Spark', value: 'spark' },
+                { label: 'Standard SQL', value: 'sql' },
+                { label: 'sqlite', value: 'sqlite' },
+                { label: 'SQL Server Transact-SQL', value: 'tsql' },
+              ]"
+            />
+          </n-form-item>
+        </div>
+        <div>
+          <n-form-item label="Keyword case">
+            <n-select
+              v-model:value="config.keywordCase"
+              :options="[
+                { label: 'UPPERCASE', value: 'upper' },
+                { label: 'lowercase', value: 'lower' },
+                { label: 'Preserve', value: 'preserve' },
+              ]"
+            />
+          </n-form-item>
+        </div>
+        <div>
+          <n-form-item label="Indent style">
+            <n-select
+              v-model:value="config.indentStyle"
+              :options="[
+                { label: 'Standard', value: 'standard' },
+                { label: 'Tabular left', value: 'tabularLeft' },
+                { label: 'Tabular right', value: 'tabularRight' },
+              ]"
+            />
+          </n-form-item>
+        </div>
+      </n-space>
+    </div>
+  </div>
+
+  <n-form-item label="Your SQL query">
+    <n-input
+      ref="inputElement"
+      v-model:value="rawSQL"
+      placeholder="Put your SQL query here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Prettify version of your query">
+    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
+      <n-config-provider :hljs="hljs">
+        <n-code :code="prettySQL" language="sql" :trim="false" />
+      </n-config-provider>
+      <n-button v-if="prettySQL" class="copy-button" secondary @click="copy">Copy</n-button>
+    </n-card>
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { useElementSize } from '@vueuse/core';
+import hljs from 'highlight.js/lib/core';
+import sqlHljs from 'highlight.js/lib/languages/sql';
+import { format as formatSQL, type FormatFnOptions } from 'sql-formatter';
+import { computed, reactive, ref } from 'vue';
+hljs.registerLanguage('sql', sqlHljs);
+
+const inputElement = ref<HTMLElement>();
+const { height: inputElementHeight } = useElementSize(inputElement);
+
+const config = reactive<Partial<FormatFnOptions>>({
+  keywordCase: 'upper',
+  useTabs: false,
+  language: 'sql',
+  indentStyle: 'standard',
+  tabulateAlias: true,
+});
+
+const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
+const prettySQL = computed(() => formatSQL(rawSQL.value, config));
+const { copy } = useCopy({ source: prettySQL });
+</script>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>