Experiment

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',
   },

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",

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: {}

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%)

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 }) => (
   <>
-    <TextField class="input" value={props.value} onChange={props.onChange}>
-      <TextField.Label class="input__label">{props.label}:</TextField.Label>
+    <TextField class="input" value={props.value} onChange={props.onChange} >
+      <Show when={props.label}>
+        <TextField.Label class="input__label">{props.label}:</TextField.Label>
+      </Show>
       <Show when={props.isTextField}>
-        <TextField.TextArea class="input__textarea" />
+        <TextField.TextArea class="input__textarea" style={{ width: props.width ? `${props.width}rem` : '100%', height: props.height ? `${props.height}rem` : 'auto' }} />
       </Show>
       <Show when={!props.isTextField}>
         <TextField.Input class="input__text" />

src/components/Navbar/Navbar.tsx

@@ -23,7 +23,7 @@ export default () => {
       <a target="_blank" href={link} class="navbar__icon" aria-label="GitHub repository">
         <FaSolidCode color="#ffffff" size={24} cursor="pointer" />
       </a>
-      <a href="/about" class="navbar__icon" aria-label="About page">
+      <a href="/about" data-astro-prefetch class="navbar__icon" aria-label="About page">
         <RiSystemInformationLine color="#ffffff" size={32} cursor="pointer" />
       </a>
 

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

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
 

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
 

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

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

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 (
+    <>
+      <section class='section'>
+        <div class='section__button'>
+          <Button label="Compare Texts" />
+        </div>
+
+        <div class='section__inputs'>
+          <Input value={firstText()} onChange={setFirstText} isTextField width={40} height={40} />
+          <Input value={secondText()} onChange={setSecondText} isTextField width={40} height={40} />
+        </div>
+      </section>
+
+      {/* <Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input> */}
+
+    </>
+  )
+}

src/pages/index.astro

@@ -18,9 +18,10 @@ import { Image } from 'astro:assets'
     </section>
 
     <section class="cards--section">
-      <a href="/password-generator" aria-label="Password generator page"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /> </a>
-      <a href="/hash-generator" aria-label="Hash generator page"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></a>
-      <a href="/color-converter" aria-label="Color converter page"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></a>
+      <a href="/password-generator" data-astro-prefetch aria-label="Password generator page"><Card title="Password Generator" description="Generate a strong and secure password for your accounts online." /> </a>
+      <a href="/hash-generator" data-astro-prefetch aria-label="Hash generator page"><Card title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." /></a>
+      <a href="/color-converter" data-astro-prefetch aria-label="Color converter page"><Card title="Color Converter" description="Convert colors to any format. Color picker provided inside." /></a>
+      <a href="/text-comparison" data-astro-prefetch aria-label="Text comparison page"><Card title="Text Comparison" description="Compare text side by side to detect changes easily." /></a>
     </section>
   </main>
 </Layout>

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'
+---
+
+<Layout title="Text Comparison - AIO Tools">
+  <div class="page">
+    <PageTitle title="Text Comparison" description="Compare text side by side to detect changes easily." />
+
+    <section class="content">
+      <TextComparisonComponent client:visible />
+    </section>
+  </div>
+</Layout>
+
+<style lang="sass">
+  @use '/src/assets/css/viewport.sass' as view
+
+  .page
+    font-family: 'Inter', sans-serif
+    text-align: center
+    margin: 4rem 0 0 0
+    transition: margin 0.4s ease-in-out
+
+    @media screen and (max-width: view.$tablet)
+      margin-top: 1rem
+
+  .content
+    display: flex
+    justify-content: center
+    align-items: center
+    // border: 1px solid #ffffff
+    // padding: 2rem
+    // border-radius: 8px
+</style>