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/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: {} 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}: + - + 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/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..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: #ffffff - font-family: 'Inter', sans-serif + border-radius: vars.$borderRadius + color: vars.$textColor gap: 2rem 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..03e0b64 --- /dev/null +++ b/src/components/PageComponents/Text-Comparison/TextComparisonComponent.tsx @@ -0,0 +1,35 @@ +import './TextComparisonComponent.sass' +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 ( + <> +
+
+
+ +
+ + +
+
+ + {/* */} + + + ) +} \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 2367b7b..daa8557 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -18,9 +18,10 @@ import { Image } from 'astro:assets'
- - - + + + +
diff --git a/src/pages/text-comparison.astro b/src/pages/text-comparison.astro new file mode 100644 index 0000000..846f3ea --- /dev/null +++ b/src/pages/text-comparison.astro @@ -0,0 +1,36 @@ +--- +import Layout from '../layouts/Layout.astro' +import TextComparisonComponent from '../components/PageComponents/Text-Comparison/TextComparisonComponent.tsx' +import PageTitle from '../components/PageTitle/PageTitle.tsx' +--- + + +
+ + +
+ +
+
+ + +