From 99f53678a6e207b2d578a5cb5984a82a486e149f Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 16:48:50 +0800 Subject: [PATCH 01/10] Added new page --- src/pages/index.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/index.astro b/src/pages/index.astro index 2367b7b..87b393a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -21,6 +21,7 @@ import { Image } from 'astro:assets' + From 2b1545f99919b5c43f31a49d60cc4aadf619e9c0 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 16:49:01 +0800 Subject: [PATCH 02/10] New page --- src/pages/text-comparison.astro | 36 +++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/pages/text-comparison.astro diff --git a/src/pages/text-comparison.astro b/src/pages/text-comparison.astro new file mode 100644 index 0000000..095a8c0 --- /dev/null +++ b/src/pages/text-comparison.astro @@ -0,0 +1,36 @@ +--- +import Layout from '../layouts/Layout.astro' +// import PasswordManagerComponent from '../components/PageComponents/Password-Manager/PasswordManagerComponent.tsx' +import PageTitle from '../components/PageTitle/PageTitle.tsx' +--- + + +
+ + +
+ +
+
+ + + From 61be8e2cabbaeecb667e14a07c26edf37e7a72f1 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 17:41:03 +0800 Subject: [PATCH 03/10] Added versitality --- src/components/Input/Input.sass | 2 +- src/components/Input/Input.tsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Input/Input.sass b/src/components/Input/Input.sass index 2360b54..3f0c613 100644 --- a/src/components/Input/Input.sass +++ b/src/components/Input/Input.sass @@ -27,7 +27,7 @@ $border: 1px solid color.adjust(vars.$background, $lightness: 20%) padding: 0.5rem color: color.adjust(vars.$background, $lightness: 60%) outline: none - transition: all 0.4s ease-out + transition: all 0.2s ease-out &:hover border-color: color.adjust(vars.$background, $lightness: 30%) diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 0748023..9e9a887 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -2,12 +2,14 @@ import './Input.sass' import { Show } from 'solid-js' import { TextField } from '@kobalte/core/text-field' -export default (props: { value: string; onChange: (text:string) => void; label: string; isTextField?: boolean }) => ( +export default (props: { value: string; onChange: (text: string) => void; label?: string; isTextField?: boolean; width?: number; height?: number }) => ( <> - - {props.label}: + + + {props.label}: + - + From face6b75349949f5d5bf42b7dbe22374d731685e Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 17:41:53 +0800 Subject: [PATCH 04/10] Adjusted to use variables --- .../PageComponents/Color-Converter/ColorConverterComponent.sass | 2 +- .../PageComponents/Hash-Generator/HashGeneratorComponent.sass | 2 +- .../Password-Generator/PasswordGeneratorComponent.sass | 2 +- .../Password-Manager/PasswordManagerComponent.sass | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass b/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass index 7d8ef70..3eeaaac 100644 --- a/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass +++ b/src/components/PageComponents/Color-Converter/ColorConverterComponent.sass @@ -10,7 +10,7 @@ border: vars.$componentBorder border-radius: vars.$borderRadius background-color: vars.$componentBackground - color: #ffffff + color: vars.$textColor gap: 2rem &__input diff --git a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass b/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass index d7f8c22..78eff4c 100644 --- a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass +++ b/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.sass @@ -10,7 +10,7 @@ border: vars.$componentBorder border-radius: vars.$borderRadius background-color: vars.$componentBackground - color: #ffffff + color: vars.$textColor font-family: 'Inter', sans-serif gap: 2rem diff --git a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass b/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass index aa37670..5e9426b 100644 --- a/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass +++ b/src/components/PageComponents/Password-Generator/PasswordGeneratorComponent.sass @@ -13,7 +13,7 @@ $toggleOnColor: rgba(53, 155, 80, 0.993) border: vars.$componentBorder border-radius: vars.$borderRadius background-color: vars.$componentBackground - color: #ffffff + color: vars.$textColor font-family: 'Inter', sans-serif gap: 2rem diff --git a/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass b/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass index 681839d..58d67d6 100644 --- a/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass +++ b/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass @@ -9,6 +9,6 @@ padding: 2rem border: vars.$componentBorder border-radius: vars.$componentBorderRadius - color: #ffffff + color: vars.$textColor#ffffff font-family: 'Inter', sans-serif gap: 2rem From 93904b643380c91aca3d4d2c5c4be4e864a4d3e0 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 17:42:24 +0800 Subject: [PATCH 05/10] Added component --- src/pages/text-comparison.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/text-comparison.astro b/src/pages/text-comparison.astro index 095a8c0..846f3ea 100644 --- a/src/pages/text-comparison.astro +++ b/src/pages/text-comparison.astro @@ -1,6 +1,6 @@ --- import Layout from '../layouts/Layout.astro' -// import PasswordManagerComponent from '../components/PageComponents/Password-Manager/PasswordManagerComponent.tsx' +import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent.tsx' import PageTitle from '../components/PageTitle/PageTitle.tsx' --- @@ -9,7 +9,7 @@ import PageTitle from '../components/PageTitle/PageTitle.tsx'
- +
From 37b3bf8a59392f0926726bd7131e9d4031185f19 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 5 Jun 2025 17:42:41 +0800 Subject: [PATCH 06/10] New component --- .../TextComparisonComponent.sass | 35 +++++++++++++++++++ .../TextComparisonComponent.tsx | 27 ++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass create mode 100644 src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx diff --git a/src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass new file mode 100644 index 0000000..2ebe58d --- /dev/null +++ b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass @@ -0,0 +1,35 @@ +@use '/src/assets/css/variables.sass' as vars +@use '/src/assets/css/viewport.sass' as view +@use 'sass:color' + +.section + display: flex + flex-direction: column + align-items: center + padding: 2rem + border: vars.$componentBorder + border-radius: vars.$borderRadius + background-color: vars.$componentBackground + color: vars.$textColor + gap: 2rem + + &__button + margin: 0 0 1rem 0 + + &__inputs + display: flex + flex-direction: row + align-items: center + justify-content: center + gap: 2rem + + @media screen and (max-width: view.$tablet) + display: flex + flex-direction: column + align-items: center + justify-content: center + padding: 2rem + border: 1px solid rgba(255, 255, 255, 0.3) + border-radius: 16px + color: #ffffff + font-family: 'Inter', sans-serif diff --git a/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx new file mode 100644 index 0000000..83cea28 --- /dev/null +++ b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx @@ -0,0 +1,27 @@ +import './TextComparisonComponent.sass' +import { createSignal } from 'solid-js' +import Input from '../../Input/Input' +import Button from '../../Button/Button' + +export default () => { + const [firstText, setFirstText] = createSignal('') + const [secondText, setSecondText] = createSignal('') + + return ( + <> +
+
+
+ +
+ + +
+
+ + {/* */} + + + ) +} \ No newline at end of file From 1d7a92c16ec4a1cb694827b03abf26ca657d83bf Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Mon, 9 Jun 2025 14:58:28 +0800 Subject: [PATCH 07/10] fix error --- .../Password-Manager/PasswordManagerComponent.sass | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass b/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass index 58d67d6..80cf2f2 100644 --- a/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass +++ b/src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass @@ -8,7 +8,6 @@ align-items: flex-start padding: 2rem border: vars.$componentBorder - border-radius: vars.$componentBorderRadius - color: vars.$textColor#ffffff - font-family: 'Inter', sans-serif + border-radius: vars.$borderRadius + color: vars.$textColor gap: 2rem From c9d4ddb86164cea64f51447255ceed311f42203a Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Tue, 1 Jul 2025 10:25:06 +0800 Subject: [PATCH 08/10] Added prefetch --- astro.config.mjs | 2 +- src/components/Navbar/Navbar.tsx | 2 +- src/pages/index.astro | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 5e6b791..8790f65 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -8,7 +8,7 @@ import robotsTxt from 'astro-robots-txt' export default defineConfig({ site: 'https://tools.patalcala.com', integrations: [solidJs(), compressor({ gzip: false, brotli: true }), robotsTxt()], - + prefetch: true, build: { assets: '_aiotools', }, diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 76548a9..1e4d691 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -23,7 +23,7 @@ export default () => { - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 87b393a..daa8557 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -18,10 +18,10 @@ import { Image } from 'astro:assets'
- - - - + + + +
From ff36c2b34c4875e640c734683ec00a3258c1d1c6 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Tue, 1 Jul 2025 10:25:35 +0800 Subject: [PATCH 09/10] Added experimental editor --- package.json | 2 ++ pnpm-lock.yaml | 17 +++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/package.json b/package.json index 760959f..29d4869 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "astro-robots-txt": "^1.0.0", "colord": "^2.9.3", "crypto-js": "^4.2.0", + "diff": "^8.0.2", + "monaco-editor": "^0.52.2", "nanostores": "^1.0.1", "sharp": "^0.34.2", "solid-icons": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a5c5a1..8265733 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,12 @@ importers: crypto-js: specifier: ^4.2.0 version: 4.2.0 + diff: + specifier: ^8.0.2 + version: 8.0.2 + monaco-editor: + specifier: ^0.52.2 + version: 0.52.2 nanostores: specifier: ^1.0.1 version: 1.0.1 @@ -1064,6 +1070,10 @@ packages: resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} engines: {node: '>=0.3.1'} + diff@8.0.2: + resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==} + engines: {node: '>=0.3.1'} + dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} @@ -1417,6 +1427,9 @@ packages: micromark@4.0.2: resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} + monaco-editor@0.52.2: + resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==} + mrmime@2.0.1: resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} engines: {node: '>=10'} @@ -3093,6 +3106,8 @@ snapshots: diff@5.2.0: {} + diff@8.0.2: {} + dlv@1.1.3: {} dset@3.1.4: {} @@ -3671,6 +3686,8 @@ snapshots: transitivePeerDependencies: - supports-color + monaco-editor@0.52.2: {} + mrmime@2.0.1: {} ms@2.1.3: {} From 23132a75b37f56d20f8a2416d306742c97387735 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Tue, 1 Jul 2025 10:25:56 +0800 Subject: [PATCH 10/10] Experiment --- .../Text-Comparison/TextComparisonComponent.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx index 83cea28..03e0b64 100644 --- a/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx +++ b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx @@ -1,12 +1,20 @@ import './TextComparisonComponent.sass' -import { createSignal } from 'solid-js' +import { createSignal, createEffect } from 'solid-js' import Input from '../../Input/Input' import Button from '../../Button/Button' +import { diffChars, createPatch } from 'diff'; + + export default () => { const [firstText, setFirstText] = createSignal('') const [secondText, setSecondText] = createSignal('') + createEffect(() => { + const diffCharsResult = diffChars(firstText(), secondText()) + console.log(diffCharsResult) + }) + return ( <>