wip

packages/app/package.json

@@ -29,7 +29,7 @@
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.453.0",
-    "nuxt": "^3.13.2",
+    "nuxt": "^3.14.159",
     "radix-vue": "^1.9.7",
     "shadcn-nuxt": "^0.10.4",
     "tailwind-merge": "^2.5.4",
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@nuxtjs/tailwindcss": "^6.12.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.12",
     "@vueuse/core": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",

packages/app/src/modules/app/components/app-header.vue

@@ -17,7 +17,7 @@ const colorMode = useColorMode();
       </Button>
     </div>
 
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-0.5">
       <Button variant="ghost" size="icon" class="sm:hidden" @click="openCommandPalette">
         <Icon name="i-tabler-search" class="size-5" />
       </Button>
@@ -26,10 +26,10 @@ const colorMode = useColorMode();
 
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="ghost" size="icon">
+          <Button variant="ghost">
-            <Icon name="i-tabler-moon" class="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Icon v-if="colorMode.value === 'dark'" name="i-tabler-moon" class="size-5" />
-            <Icon name="i-tabler-sun" class="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Icon v-else name="i-tabler-sun" class="size-5" />
-            <span class="sr-only">Toggle theme</span>
+            <Icon name="i-tabler-chevron-down" class="ml-1 text-muted-foreground" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">

packages/app/src/modules/tools/definitions/token-generator/token-generator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { times } from 'lodash-es';
 import { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState';
+import { cn } from '~/src/modules/shared/style/cn';
 import { Button } from '~/src/modules/ui/components/button';
 import { Checkbox } from '~/src/modules/ui/components/checkbox';
 import NumberField from '~/src/modules/ui/components/number-field/NumberField.vue';
@@ -39,6 +40,7 @@ const length = ref(64);
 
 const format = ref<keyof typeof formats>('raw');
 const quantity = ref(1);
+const tab = ref<'generator' | 'about'>('generator');
 
 function reset() {
   withUppercase.value = true;
@@ -90,16 +92,137 @@ watch([
 
 <template>
   <div class="flex flex-col h-full">
-    <div class="p-6 bg-white dark:bg-background border-b">
+    <div class="p-6 pb-0 bg-white dark:bg-background border-b">
       <h1 class="text-2xl">
         {{ $t('tools.token-generator.title') }}
       </h1>
       <p class="text-muted-foreground">
         {{ $t('tools.token-generator.description') }}
       </p>
+
+      <div class="mt-2 flex gap-4">
+        <Button variant="link" :class="cn('text-muted-foreground font-sm pb-0 px-0 rounded-none hover:no-underline', { 'border-b border-b-foreground text-foreground': tab === 'generator' })" @click="tab = 'generator'">
+          Generator
+        </Button>
+        <Button variant="link" :class="cn('border-b border-b-transparent text-muted-foreground font-sm pb-0 px-0 rounded-none hover:no-underline transition', { 'border-b-foreground text-foreground': tab === 'about' })" @click="tab = 'about'">
+          About
+        </Button>
+      </div>
     </div>
 
-    <div class="h-full flex-1 flex flex-col md:flex-row">
+    <div v-if="tab === 'about'" class="p-6 bg-white dark:bg-background">
+      <div class="prose dark:prose-invert mx-auto mb-20">
+        <h2 id="about-the-random-token-generator">
+          About The Random Token Generator
+        </h2>
+        <p>
+          The Random Token Generator on Crucials.tools is designed to meet the
+          modern developer’s need for quick, secure, and customizable tokens.
+          Whether you&#39;re working on web applications, software development, system
+          administration, or creating secure passwords, our tool provides a
+          straightforward solution to create tokens that fit your specifications
+          perfectly.
+        </p>
+        <h2 id="why-are-tokens-important-">
+          Why Are Tokens Important?
+        </h2>
+        <p>
+          In the realm of software development and IT, tokens play a crucial role in
+          maintaining security and user authentication. They are essential for:
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Session Management:</strong> Tokens are used to manage user sessions,
+              allowing systems to recognize and verify users over multiple requests.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>API Security:</strong> Securely accessing APIs often requires tokens to
+              ensure that the requestor has the necessary permissions.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Randomized Data Generation:</strong> Tokens can be used in testing
+              environments to generate randomized data inputs, helping developers
+              identify potential issues.
+            </p>
+          </li>
+        </ul>
+        <h2 id="ideal-for-generating-secure-passwords">
+          Ideal for Generating Secure Passwords
+        </h2>
+        <p>
+          In addition to creating tokens, our Random Token Generator is an excellent
+          tool for generating strong, secure passwords. With options to include a
+          mix of uppercase letters, lowercase letters, numbers, and special symbols,
+          you can create robust passwords that enhance security for any application
+          or service.
+        </p>
+        <h2 id="how-to-use-the-token-generator">
+          How to Use the Token Generator
+        </h2>
+        <p>Using our Token Generator is simple:</p>
+        <ol>
+          <li>
+            <p>
+              <strong>Select the characters you want:</strong> Choose from uppercase letters,
+              lowercase letters, numbers, and special symbols based on your token or
+              password requirements.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Choose the length:</strong> Determine how long you want your token or
+              password to be, depending on the level of complexity and security needed.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Generate with a click:</strong> Once your options are set, click &#39;Generate&#39;
+              to receive your token or password instantly.
+            </p>
+          </li>
+        </ol>
+        <h2 id="benefits-of-using-crucials-tools-token-generator">
+          Benefits of Using Crucials.tools Token Generator
+        </h2>
+        <ul>
+          <li>
+            <p>
+              <strong>Customization:</strong> Our tool allows for extensive customization, ensuring
+              you get exactly what you need for your project or personal security.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Speed:</strong> Generate tokens or passwords in seconds, speeding up your
+              development process and enhancing your security posture.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>No Installation Required:</strong> As a web-based tool, there is no need to
+              install any software, making it accessible from anywhere at any time.
+            </p>
+          </li>
+        </ul>
+        <h2 id="perfect-tool-for-developers-and-people-in-it">
+          Perfect Tool For Developers and people in IT
+        </h2>
+        <p>
+          Whether you are developing a new application, testing existing
+          functionality, needing to ensure secure access, or generating a strong
+          password, our Random Token Generator is the perfect tool. It is built to
+          be reliable and secure, providing peace of mind in various development and
+          personal security scenarios.
+        </p>
+      </div>
+    </div>
+
+    <div v-if="tab === 'generator'" class="h-full flex-1 flex flex-col md:flex-row">
       <div class="md:max-w-[360px] bg-white dark:bg-background h-full border-b md:border-b-none md:border-r">
         <div class="px-6 pt-4 pb-6 ">
           <div class="text-muted-foreground mb-3">

packages/app/tailwind.config.js

@@ -1,3 +1,4 @@
+import typography from '@tailwindcss/typography';
 import defaultTheme from 'tailwindcss/defaultTheme';
 import animate from 'tailwindcss-animate';
 
@@ -87,5 +88,5 @@ module.exports = {
       },
     },
   },
-  plugins: [animate],
+  plugins: [animate, typography],
 };