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,8 +18,6 @@
     "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,12 +35,6 @@ 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
@@ -1070,10 +1064,6 @@ 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==}
 
@@ -1427,9 +1417,6 @@ 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'}
@@ -3106,8 +3093,6 @@ snapshots:
 
   diff@5.2.0: {}
 
-  diff@8.0.2: {}
-
   dlv@1.1.3: {}
 
   dset@3.1.4: {}
@@ -3686,8 +3671,6 @@ 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.2s ease-out
+    transition: all 0.4s ease-out
 
     &:hover
       border-color: color.adjust(vars.$background, $lightness: 30%)

src/components/Input/Input.tsx

@@ -2,14 +2,12 @@ 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; width?: number; height?: number }) => (
+export default (props: { value: string; onChange: (text:string) => void; label: string; isTextField?: boolean }) => (
   <>
-    <TextField class="input" value={props.value} onChange={props.onChange} >
+    <TextField class="input" value={props.value} onChange={props.onChange}>
-      <Show when={props.label}>
+      <TextField.Label class="input__label">{props.label}:</TextField.Label>
-        <TextField.Label class="input__label">{props.label}:</TextField.Label>
-      </Show>
       <Show when={props.isTextField}>
-        <TextField.TextArea class="input__textarea" style={{ width: props.width ? `${props.width}rem` : '100%', height: props.height ? `${props.height}rem` : 'auto' }} />
+        <TextField.TextArea class="input__textarea" />
       </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" data-astro-prefetch class="navbar__icon" aria-label="About page">
+      <a href="/about" 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: vars.$textColor
+  color: #ffffff
   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: vars.$textColor
+  color: #ffffff
   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: vars.$textColor
+  color: #ffffff
   font-family: 'Inter', sans-serif
   gap: 2rem
 

src/components/PageComponents/Password-Manager/PasswordManagerComponent.sass

@@ -8,6 +8,7 @@
   align-items: flex-start
   padding: 2rem
   border: vars.$componentBorder
-  border-radius: vars.$borderRadius
+  border-radius: vars.$componentBorderRadius
-  color: vars.$textColor
+  color: #ffffff
+  font-family: 'Inter', sans-serif
   gap: 2rem

src/components/PageComponents/Text-Comparison/TextComparisonComponent.sass

@@ -1,35 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-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,10 +18,9 @@ import { Image } from 'astro:assets'
     </section>
 
     <section class="cards--section">
-      <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="/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" 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="/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" 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="/color-converter" 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

@@ -1,36 +0,0 @@
----
-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>