Develop: Redesign Pages

.eslintrc.cjs

@@ -23,6 +23,14 @@ module.exports = {
     "@typescript-eslint/prefer-for-of": "warn",
     "@typescript-eslint/triple-slash-reference": "error",
     "@typescript-eslint/unified-signatures": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_"
+      }
+    ],
     "comma-dangle": "warn",
     "constructor-super": "error",
     eqeqeq: ["warn", "always"],

.eslintrc.mjs

@@ -23,6 +23,14 @@ module.exports = {
     "@typescript-eslint/prefer-for-of": "warn",
     "@typescript-eslint/triple-slash-reference": "error",
     "@typescript-eslint/unified-signatures": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_"
+      }
+    ],
     "comma-dangle": "warn",
     "constructor-super": "error",
     eqeqeq: ["warn", "always"],

.githooks/pre-commit

@@ -25,7 +25,7 @@ if [ $? -ne 0 ]; then
     exit 1
 fi
 
-npm run lint
+npm run lint --no-color
 if [ $? -ne 0 ]; then
   echo "Lint failed. Commit aborted."
   exit 1

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,11 +1,11 @@
 # 🚀 Summary
 
-Fixes # 
+Fixes #
 
 ## 🛠️ Changes
 
-- 
-- 
+-
+-
 
 ## 🧪 Testing
 

.vscode/settings.json

@@ -15,6 +15,7 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.customDictionaries": {
     "my-words": {
       "name": "myDictionary",
@@ -27,7 +28,6 @@
   },
   "editor.accessibilitySupport": "off",
   "git.openRepositoryInParentFolders": "always",
-  "typescript.updateImportsOnFileMove.enabled": "always",
   "editor.linkedEditing": true,
   "cSpell.userWords": ["nojekyll", "testid"],
   "editor.tabSize": 2,
@@ -46,26 +46,5 @@
   "css.lint.unknownAtRules": "ignore",
   "css.lint.unknownProperties": "ignore",
   "css.hover.documentation": true,
-  "css.hover.references": true,
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#e98cf9",
-    "activityBar.background": "#e98cf9",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#fdf9e1",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#e98cf9",
-    "statusBar.background": "#e05bf7",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#d72af5",
-    "statusBarItem.remoteBackground": "#e05bf7",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#e05bf7",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#e05bf799",
-    "titleBar.inactiveForeground": "#15202b99",
-    "sideBar.border": "#e98cf9",
-    "tab.activeBorder": "#e98cf9"
-  }
+  "css.hover.references": true
 }

abcd.code-workspace

@@ -132,8 +132,6 @@
     "git.enableCommitSigning": false,
     "git.enableSmartCommit": true,
     "git.postCommitCommand": "push",
-    "javascript.preferences.quoteStyle": "double",
-    "javascript.updateImportsOnFileMove.enabled": "always",
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#6A3B98",
@@ -151,12 +149,12 @@
       "package-lock.json": true
     },
     "search.showLineNumbers": true,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
-    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
-    "typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": false,
-    "typescript.inlayHints.parameterTypes.enabled": true,
-    "typescript.preferences.quoteStyle": "double",
-    "typescript.updateImportsOnFileMove.enabled": "always",
+    "js/ts.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
+    "js/ts.inlayHints.functionLikeReturnTypes.enabled": true,
+    "js/ts.inlayHints.parameterNames.suppressWhenArgumentMatchesName": false,
+    "js/ts.inlayHints.parameterTypes.enabled": true,
+    "js/ts.preferences.quoteStyle": "double",
+    "js/ts.updateImportsOnFileMove.enabled": "always",
     "window.autoDetectColorScheme": true,
     "window.title": "${rootNameShort}${separator}${activeEditorShort}${separator}${activeFolderMedium}",
     "window.zoomLevel": 0.5,
@@ -192,20 +190,14 @@
       "*.log": "default"
     },
     "zenMode.centerLayout": false,
-    "cSpell.words": [ ],
+    "cSpell.words": [],
     "workbench.editor.limit.excludeDirty": true,
     "files.readonlyInclude": {
       ".githooks/**": true
     },
     "[xml]": {
       "editor.defaultFormatter": "redhat.vscode-xml"
     },
-    "github.copilot.chat.agent.terminal.allowList": {
-      "npm run": true
-    },
-    "github.copilot.chat.agent.terminal.denyList": {
-      "npm run nuke": true
-    },
-    "folder-color.pathColors": [ ]
+    "folder-color.pathColors": []
   }
 }

astro.config.mjs

@@ -3,9 +3,9 @@ import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import { defineConfig } from "astro/config";
 
-const isProd = process.env.NODE_ENV === 'production';
+const isProd = process.env.NODE_ENV === "production";
 
-console.log({ isProd })
+console.log({ isProd });
 
 // https://astro.build/config
 export default defineConfig({
@@ -24,12 +24,15 @@ export default defineConfig({
     svg: true
   },
   integrations: [
-    isProd ? partytown({
-      // https://partytown.qwik.dev/google-tag-manager/#google-analytics-4-ga4
-      config: {
-        forward: ["dataLayer.push"]
-      }
-    }) : null,
+    ...(isProd
+      ? [
+          partytown({
+            config: {
+              forward: ["dataLayer.push"]
+            }
+          })
+        ]
+      : []),
     sitemap(),
     mdx()
   ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.3.0",
-  "description": "A website for our kids trial phase of abcdkbd.com",
+  "version": "3.3.1",
+  "description": "A website for kids whio want to learn the alphabet in a fun and interactive way. It is built using Astro and TypeScript.",
   "homepage": "https://abcdkbd.com",
   "displayName": "abcd",
   "license": "MIT",
@@ -90,11 +90,29 @@
       "email": "[email protected]",
       "github": "ciphrox",
       "role": "UI Engineer"
+    },
+    {
+      "name": "Md Shahid Jamal",
+      "email": "[email protected]",
+      "github": "ShahidJamal1",
+      "role": "UI Engineer"
     }
   ],
   "keywords": [
     "recursivezero",
-    "abcd"
+    "abcd",
+    "abcdkbd",
+    "kids",
+    "education",
+    "learning",
+    "fun",
+    "interactive",
+    "website",
+    "astro",
+    "hindi",
+    "indian",
+    "culture",
+    "typescript"
   ],
   "scripts": {
     "dev": "astro dev",
@@ -104,7 +122,8 @@
     "astro": "astro",
     "check": "astro check",
     "lint": "prettier -w --cache . && prettier -w --cache **/*.astro",
-    "clean": "rm -rf dist rm -rf build",
+    "clean": "rm -rf dist build .astro node_modules/.vite .vitepress",
+    "rebuild": "npm run clean && astro build",
     "nuke": "shx rm -rf node_modules && rm package-lock.json && npm run clean",
     "setup:hooks": "sh ./setup-hooks.sh"
   },
@@ -114,6 +133,7 @@
     "@astrojs/node": "9.1.2",
     "@astrojs/partytown": "2.1.4",
     "@astrojs/sitemap": "3.4.1",
+    "@builder.io/partytown": "0.10.3",
     "@fontsource/roboto": "5.1.0",
     "astro": "5.4.1",
     "astro-social-share": "2.2.0",
@@ -138,6 +158,12 @@
     "shx": "0.3.4"
   },
   "engines": {
-    "node": "^20"
+    "node": "^22"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,astro}": [
+      "eslint --fix --no-color",
+      "tsc --pretty false --noEmit"
+    ]
   }
-}
+}

public/manifest.webmanifest

@@ -38,4 +38,4 @@
   "short_name": "ABCDKBD",
   "start_url": "/",
   "theme_color": "#2bbc8a"
-}
+}

src/assets/styles/canvas.css

@@ -5,7 +5,7 @@
 
 /* Global Styles for the Canvas Generator */
 .canvas-generator {
-  min-height: 100vh;
+  min-height: auto;
   width: 100%;
   padding: 0;
   margin: 0;
@@ -130,7 +130,8 @@
 }
 
 .canvas-generator .color-options .color-select option {
-  background: #1e293b;
+  background: #0f172a;
+  color: #ffffff;
 }
 
 .canvas-generator label {
@@ -255,4 +256,4 @@
     padding: 0.75rem;
     max-height: 350px;
   }
-}
+}

src/assets/styles/capital.css

@@ -345,6 +345,11 @@
   box-shadow: none !important;
 }
 
+.container__search:focus-within {
+  border: 2px solid light-dark(#667eea, #06ffa5) !important;
+  box-shadow: 0 0 0 3px light-dark(rgba(102, 126, 234, 0.3), rgba(6, 255, 165, 0.3)) !important;
+}
+
 /* Animations */
 @keyframes shimmer {
   0% {
@@ -413,4 +418,4 @@
   .search-container {
     max-width: 100%;
   }
-}
+}