chore(release): 2.2.1

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.2.1](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.2.1) (2022-04-21)
+
+
+### Bug Fixes
+
+* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
+* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
+* **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
+* **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
+
+## [2.2.0](https://github.com/CorentinTh/it-tools/compare/v2.1.0...v2.2.0) (2022-04-18)
+
+
+### Features
+
+* **new-tool:** url parser ([2b38d6f](https://github.com/CorentinTh/it-tools/commit/2b38d6f81e34845f896b858513e35209cba29f98))
+
+
+### Bug Fixes
+
+* **sider-footer:** fixed commit sha url ([ed9046d](https://github.com/CorentinTh/it-tools/commit/ed9046d3e1f5a7dc01c722ed139a2ae477a2d48f))
+
 ## [2.1.0](https://github.com/CorentinTh/it-tools/compare/v2.0.2...v2.1.0) (2022-04-18)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "it-tools",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "it-tools",
-      "version": "2.1.0",
+      "version": "2.2.1",
       "dependencies": {
         "@it-tools/bip39": "^0.0.4",
         "@vicons/material": "^0.12.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

src/layouts/base.layout.vue

@@ -98,7 +98,7 @@ const m = toolsByCategory.map(category => ({
                 rel="noopener"
                 type="primary"
                 depth="3"
-                :href="`https://github.com/CorentinTh/it-tools/tree/v${commitSha}`"
+                :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
               >
                 {{ commitSha }}
               </n-button>
@@ -112,6 +112,7 @@ const m = toolsByCategory.map(category => ({
               target="_blank"
               rel="noopener"
               type="primary"
+              href="https://github.com/CorentinTh"
             >
               Corentin Thomasset
             </n-button>

src/pages/404.page.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { useHead } from '@vueuse/head';
 
+useHead({title: 'Page not found - IT Tools'})
 </script>
 
 <template>

src/pages/About.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useHead } from '@vueuse/head';
+
+useHead({title: 'About - IT Tools'})
 </script>
 
 <template>

src/pages/Home.page.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { toolsWithCategory } from '@/tools';
 import ToolCard from '../components/ToolCard.vue';
+import { useHead } from '@vueuse/head';
+
+useHead({title: 'IT Tools'})
 </script>
 
 <template>

src/tools/date-time-converter/date-time-converter.vue

@@ -37,8 +37,8 @@
         style="margin: 5px 0;"
       >
         <n-input-group>
-          <n-input-group-label style="width: 200px;">
-            {{ name }}
+          <n-input-group-label style="flex: 0 0 170px;">
+            {{ name }}:
           </n-input-group-label>
           <input-copyable :value="fromDate(baseDate)" />
         </n-input-group>

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as urlParser } from './url-parser';
 import { tool as deviceInformation } from './device-information';
 import { tool as bcrypt } from './bcrypt';
 import { tool as caseConverter } from './case-converter';
@@ -36,7 +37,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, qrCodeGenerator, deviceInformation],
+    components: [urlEncoder, qrCodeGenerator, urlParser, deviceInformation],
   },
   {
     name: 'Development',

src/tools/url-parser/index.ts

@@ -0,0 +1,11 @@
+import { Unlink } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Url parser',
+  path: '/url-parser',
+  description: 'Parse an url string to get all the differents parts (protocol, origin, params, port, username-password, ...)',
+  keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
+  component: () => import('./url-parser.vue'),
+  icon: Unlink,
+};

src/tools/url-parser/url-parser.vue

@@ -0,0 +1,102 @@
+<template>
+  <n-card>
+    <n-form-item
+      label="Your url to parse:"
+      :feedback="validation.message"
+      :validation-status="validation.status"
+    >
+      <n-input
+        v-model:value="urlToParse"
+        placeholder="Your url to parse..."
+      />
+    </n-form-item>
+
+    <n-divider style="margin-top: 0;" />
+
+    <n-form>
+      <n-input-group
+        v-for="{title, key} in properties"
+        :key="key"
+      >
+        <n-input-group-label
+          style="flex: 0 0 120px;"
+        >
+          {{ title }}:
+        </n-input-group-label>
+        <input-copyable
+          :value="(urlParsed?.[key] as string) ?? ''"
+          readonly
+          placeholder=" "
+        />
+      </n-input-group>
+
+      <n-input-group
+        v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
+        :key="k"
+      > 
+        <n-input-group-label
+          style="flex: 0 0 120px;"
+        >
+          <n-icon :component="SubdirectoryArrowRightRound" />
+        </n-input-group-label>
+        <input-copyable
+          :value="k"
+          readonly
+        />
+        <input-copyable
+          :value="v"
+          readonly
+        />
+      </n-input-group>
+    </n-form>
+  </n-card> 
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { SubdirectoryArrowRightRound } from '@vicons/material';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { useValidation } from '@/composable/validation';
+
+const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash')
+const urlParsed = computed<URL | undefined>(() => {
+  try {
+    return new URL(urlToParse.value)
+  } catch (_) {
+    return undefined
+  }
+})
+const validation = useValidation({source: urlToParse, rules: [
+  {validator: (value) => {
+      try {
+        new URL(value)
+    return true;
+  } catch (_) {
+    return false
+  }
+  }, message: 'Invalid url'}
+]})
+
+
+const properties: {title: string, key: keyof URL}[] = [
+  {title: 'Protocol', key: 'protocol'},
+  {title: 'Username', key: 'username'},
+  {title: 'Password', key: 'password'},
+  {title: 'Hostname', key: 'hostname'},
+  {title: 'Port', key: 'port'},
+  {title: 'Path', key: 'pathname'},
+  {title: 'Params', key: 'search'},
+]
+
+
+</script>
+
+<style lang="less" scoped>
+
+.n-input-group-label {
+  text-align: right;
+}
+.n-input-group {
+  margin: 2px 0;
+}
+</style>