From 6a50dde5da660194c323578a4f6aeea57fbd64c4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 16:22:21 +0000 Subject: [PATCH 1/3] Initial plan From 9a6fde113ffbb8e926157dfc3bf787e46689b618 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 16:25:20 +0000 Subject: [PATCH 2/3] Initial plan for blog page improvements Co-authored-by: Adez017 <142787780+Adez017@users.noreply.github.com> --- package-lock.json | 50 ++++------------------------------------------- 1 file changed, 4 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 89fbbbad..cf9df4f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -280,7 +280,6 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.40.0.tgz", "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.40.0", "@algolia/requester-browser-xhr": "5.40.0", @@ -441,7 +440,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -2276,7 +2274,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -2299,7 +2296,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2409,7 +2405,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2831,7 +2826,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3819,7 +3813,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz", "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==", "license": "MIT", - "peer": true, "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/logger": "3.9.2", @@ -5928,7 +5921,6 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "license": "MIT", - "peer": true, "dependencies": { "@emotion/memoize": "^0.8.1" } @@ -6201,7 +6193,6 @@ "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.13.tgz", "integrity": "sha512-GfiI1JxJ7ecluEmDjPzseRXk/PX31hS7+tjgBopL7XjB2hLUdR+0FTMXy2Q3/hXezypDvU6or7gVFizDESrkXw==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", @@ -6259,7 +6250,6 @@ "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.13.tgz", "integrity": "sha512-j6ANZaWjeVy5zg6X7uiqh6lM6o3n3LD1+/SJFNs9V781xyryyZWXe+tmnWNWPkP086QfJoNkWN9pMQRqSG4vMg==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/app": "0.9.13", "@firebase/component": "0.6.4", @@ -6272,8 +6262,7 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz", "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==", - "license": "Apache-2.0", - "peer": true + "license": "Apache-2.0" }, "node_modules/@firebase/auth": { "version": "0.23.2", @@ -6683,7 +6672,6 @@ "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz", "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -7300,7 +7288,6 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", - "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -7963,7 +7950,6 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -8480,8 +8466,7 @@ } ], "hasInstallScript": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@tsparticles/interaction-external-attract": { "version": "3.9.1", @@ -9434,7 +9419,6 @@ "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -9612,7 +9596,6 @@ "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/types": "8.46.2", @@ -10071,7 +10054,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -10157,7 +10139,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -10203,7 +10184,6 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.40.0.tgz", "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/abtesting": "1.6.0", "@algolia/client-abtesting": "5.40.0", @@ -10962,7 +10942,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -11317,7 +11296,6 @@ "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -12208,7 +12186,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12539,7 +12516,6 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10" } @@ -12961,7 +12937,6 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -13555,8 +13530,7 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/embla-carousel-autoplay": { "version": "8.6.0", @@ -13942,7 +13916,6 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -14775,7 +14748,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -14903,7 +14875,6 @@ "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.23.0.tgz", "integrity": "sha512-/4lUVY0lUvBDIaeY1q6dUYhS8Sd18Qb9CgWkPZICUo9IXpJNCEagfNZXBBFCkMTTN5L5gx2Hjr27y21a9NzUcA==", "license": "Apache-2.0", - "peer": true, "dependencies": { "@firebase/analytics": "0.10.0", "@firebase/analytics-compat": "0.2.6", @@ -21110,7 +21081,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -21884,7 +21854,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -22788,7 +22757,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -23402,7 +23370,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -23809,7 +23776,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -23822,7 +23788,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -23888,7 +23853,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/react": "*" }, @@ -23917,7 +23881,6 @@ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -26413,8 +26376,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tunnel-agent": { "version": "0.6.0", @@ -26589,7 +26551,6 @@ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -26984,7 +26945,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -27257,7 +27217,6 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -28076,7 +28035,6 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } From 09b5dd236fdc20a71fe5105d323fff11424b64b1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 11 Nov 2025 16:36:41 +0000 Subject: [PATCH 3/3] Add sidebar with search and category filters to blog page Co-authored-by: Adez017 <142787780+Adez017@users.noreply.github.com> --- src/database/blogs/index.tsx | 20 ++ src/pages/blogs/blogs-new.css | 345 +++++++++++++++++++++++++++++++++- src/pages/blogs/index.tsx | 207 +++++++++++++------- 3 files changed, 496 insertions(+), 76 deletions(-) diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx index d727c433..b1be638b 100644 --- a/src/database/blogs/index.tsx +++ b/src/database/blogs/index.tsx @@ -5,6 +5,8 @@ interface Blog { description: string; slug: string; authors: string[]; + category: string; + tags?: string[]; } const blogs: Blog[] = [ @@ -16,6 +18,8 @@ const blogs: Blog[] = [ "User experience design can be overwhelming because of the number of factors that influence what a product should look like and how it should function.", slug: "streamline-ux-ui", authors: ["dharshibalasubramaniyam", "sanjay-kv"], + category: "Design", + tags: ["UX", "UI", "Design", "User Experience"], }, { @@ -26,6 +30,8 @@ const blogs: Blog[] = [ " Are you passionate about design and dreaming of a career in it? Or maybe you are already in the design space and looking to pivot into UI/UX? ", slug: "ux-ui-design-job", authors: ["dharshibalasubramaniyam", "sanjay-kv"], + category: "Design", + tags: ["UX", "UI", "Career", "Job"], }, { id: 3, @@ -35,6 +41,8 @@ const blogs: Blog[] = [ "The impact of technology on UX design is undeniable. Automation and artificial intelligence are making it easier to identify user needs and create tailored experiences.", slug: "ux-designers-ai", authors: ["dharshibalasubramaniyam", "sanjay-kv"], + category: "AI & Tech", + tags: ["AI", "UX", "Design", "Technology"], }, { id: 4, @@ -44,6 +52,8 @@ const blogs: Blog[] = [ "DeepMind is an auxiliary of Google that centers around man-made brainpower. It utilizes a part of AI called AI", slug: "google-deepmind", authors: ["dharshibalasubramaniyam", "sanjay-kv"], + category: "AI & Tech", + tags: ["AI", "Google", "DeepMind", "Machine Learning"], }, { id: 5, @@ -53,6 +63,8 @@ const blogs: Blog[] = [ "An SEO backlink is created when one website links to another, and they're extremely important for SEO. ", slug: "google-backlinks", authors: ["sanjay-kv"], + category: "Resources", + tags: ["SEO", "Marketing", "Backlinks", "Web Development"], }, { @@ -63,6 +75,8 @@ const blogs: Blog[] = [ "The GitHub Copilot Coding Agent is an asynchronous software engineering agent that assists developers by suggesting code snippets", slug: "git-coding-agent", authors: ["sanjay-kv"], + category: "Development", + tags: ["GitHub", "AI", "Coding", "Tools"], }, { id: 7, @@ -72,6 +86,8 @@ const blogs: Blog[] = [ "Apache Spark is a fast, open-source big data framework that leverages in-memory computing for high performance. Its architecture powers scalable distributed processing across clusters, making it essential for analytics and machine learning.", slug: "spark-architecture", authors: ["Aditya-Singh-Rathore", "sanjay-kv"], + category: "Development", + tags: ["Apache Spark", "Big Data", "Data Engineering", "Architecture"], }, { id: 8, @@ -81,6 +97,8 @@ const blogs: Blog[] = [ "N8N is an open-source workflow automation tool that enables users to connect various apps and services to automate tasks without extensive coding knowledge.", slug: "n8n-workflow-automation", authors: ["Aditya-Singh-Rathore"], + category: "Development", + tags: ["Automation", "Workflow", "N8N", "Tools"], }, { id: 9, @@ -90,6 +108,8 @@ const blogs: Blog[] = [ "OpenAI AgentKit is a framework that simplifies the process of building AI agents, allowing developers to create intelligent applications without getting bogged down in the underlying complexities.", slug: "open-ai-agent-builder", authors: ["Aditya-Singh-Rathore"], + category: "AI & Tech", + tags: ["AI", "OpenAI", "Development", "Agents"], }, ]; diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index b568ff6c..bc430621 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -651,6 +651,16 @@ pointer-events: none; } +.articles-container-wrapper { + max-width: 1400px; + margin: 0 auto; + display: flex; + gap: 40px; + position: relative; + z-index: 1; + animation: contentSlideUp 1s ease-out 0.3s both; +} + .articles-container { max-width: 1200px; margin: 0 auto; @@ -929,7 +939,7 @@ /* Search Results Info */ .search-results-info { text-align: center; - margin: 32px 0 24px; + margin: 0 0 24px; padding: 16px 24px; background: linear-gradient( 135deg, @@ -938,9 +948,6 @@ ); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.1); - max-width: 500px; - margin-left: auto; - margin-right: auto; } .search-results-info p { @@ -1011,6 +1018,260 @@ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } +/* Blog Sidebar */ +.blog-sidebar { + flex: 0 0 280px; + display: flex; + flex-direction: column; + gap: 24px; + position: sticky; + top: 80px; + height: fit-content; + max-height: calc(100vh - 100px); + overflow-y: auto; +} + +.sidebar-section { + background: white; + border-radius: 16px; + padding: 24px; + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.08), + 0 1px 3px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; +} + +[data-theme="dark"] .sidebar-section { + background: #242526; + border: 1px solid rgba(74, 85, 104, 0.3); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.4), + 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.sidebar-section:hover { + box-shadow: + 0 8px 30px rgba(0, 0, 0, 0.12), + 0 2px 6px rgba(99, 102, 241, 0.1); +} + +.sidebar-title { + font-size: 16px; + font-weight: 700; + color: #1e293b; + margin: 0 0 16px 0; + display: flex; + align-items: center; + gap: 8px; + letter-spacing: -0.01em; +} + +[data-theme="dark"] .sidebar-title { + color: #f1f5f9; +} + +.sidebar-icon { + width: 20px; + height: 20px; + stroke-width: 2; + color: #6366f1; +} + +[data-theme="dark"] .sidebar-icon { + color: #a78bfa; +} + +.sidebar-search-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.sidebar-search-input { + width: 100%; + padding: 12px 36px 12px 16px; + border: 2px solid rgba(99, 102, 241, 0.2); + border-radius: 8px; + font-size: 14px; + color: #1e293b; + background: rgba(248, 250, 252, 0.5); + transition: all 0.3s ease; + outline: none; +} + +[data-theme="dark"] .sidebar-search-input { + background: rgba(26, 32, 44, 0.5); + color: #f1f5f9; + border-color: rgba(167, 139, 250, 0.2); +} + +.sidebar-search-input:focus { + border-color: #6366f1; + background: white; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +[data-theme="dark"] .sidebar-search-input:focus { + background: #1a202c; + border-color: #a78bfa; + box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1); +} + +.sidebar-search-input::placeholder { + color: #94a3b8; + font-size: 13px; +} + +.sidebar-clear-btn { + position: absolute; + right: 8px; + width: 24px; + height: 24px; + background: none; + border: none; + cursor: pointer; + color: #94a3b8; + padding: 4px; + border-radius: 4px; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar-clear-btn:hover { + color: #ef4444; + background: rgba(239, 68, 68, 0.1); +} + +.sidebar-clear-btn svg { + width: 100%; + height: 100%; + stroke-width: 2; +} + +.category-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.category-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: rgba(248, 250, 252, 0.5); + border: 2px solid transparent; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + color: #475569; + cursor: pointer; + transition: all 0.3s ease; + text-align: left; +} + +[data-theme="dark"] .category-item { + background: rgba(26, 32, 44, 0.5); + color: #cbd5e1; +} + +.category-item:hover { + background: rgba(99, 102, 241, 0.05); + border-color: rgba(99, 102, 241, 0.2); + color: #6366f1; + transform: translateX(4px); +} + +[data-theme="dark"] .category-item:hover { + background: rgba(167, 139, 250, 0.1); + border-color: rgba(167, 139, 250, 0.2); + color: #a78bfa; +} + +.category-item.active { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + border-color: #6366f1; + color: white; + font-weight: 600; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); +} + +[data-theme="dark"] .category-item.active { + background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%); + border-color: #a78bfa; + color: #1a202c; +} + +.category-name { + flex: 1; +} + +.category-count { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 24px; + height: 24px; + padding: 0 8px; + background: rgba(99, 102, 241, 0.1); + border-radius: 12px; + font-size: 12px; + font-weight: 600; + color: #6366f1; +} + +[data-theme="dark"] .category-count { + background: rgba(167, 139, 250, 0.2); + color: #a78bfa; +} + +.category-item.active .category-count { + background: rgba(255, 255, 255, 0.2); + color: white; +} + +[data-theme="dark"] .category-item.active .category-count { + background: rgba(26, 32, 44, 0.3); + color: #1a202c; +} + +.clear-filters-btn { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 16px; + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + border: none; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + color: white; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); +} + +.clear-filters-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); +} + +.clear-icon { + width: 16px; + height: 16px; + stroke-width: 2.5; +} + +.articles-main-content { + flex: 1; + min-width: 0; +} + /* Articles Grid */ .articles-grid { display: grid; @@ -1776,3 +2037,79 @@ font-size: 15px; } } + +/* Responsive Design for Sidebar Layout */ + +/* Tablet and below - Stack sidebar on top */ +@media (max-width: 991px) { + .articles-container-wrapper { + flex-direction: column; + gap: 32px; + } + + .blog-sidebar { + flex: 1; + position: relative; + top: 0; + max-height: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + } + + .sidebar-section { + padding: 20px; + } +} + +/* Mobile - Single column for everything */ +@media (max-width: 767px) { + .blog-sidebar { + grid-template-columns: 1fr; + gap: 16px; + } + + .sidebar-section { + padding: 16px; + } + + .sidebar-title { + font-size: 14px; + margin-bottom: 12px; + } + + .sidebar-search-input { + padding: 10px 32px 10px 12px; + font-size: 13px; + } + + .category-item { + padding: 10px 12px; + font-size: 13px; + } + + .clear-filters-btn { + padding: 10px 12px; + font-size: 13px; + } +} + +/* Update Articles Grid responsive for new layout */ +@media (min-width: 992px) { + .articles-grid { + grid-template-columns: repeat(2, 1fr); + padding: 0; + } +} + +@media (max-width: 991px) and (min-width: 768px) { + .articles-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 767px) { + .articles-grid { + grid-template-columns: 1fr; + } +} diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index b7edb1b9..0679d8c0 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -19,17 +19,32 @@ const authorMapping = { "n8n-workflow-automation": ["Aditya Singh Rathore"], }; +// Get unique categories from blogs +const getUniqueCategories = () => { + const categories = blogs.map((blog) => blog.category); + return Array.from(new Set(categories)).sort(); +}; + export default function Blogs(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); const [searchTerm, setSearchTerm] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("All"); const [filteredBlogs, setFilteredBlogs] = useState(blogs); - // Filter blogs based on search term + const categories = ["All", ...getUniqueCategories()]; + + // Filter blogs based on search term and category useEffect(() => { - if (searchTerm.trim() === "") { - setFilteredBlogs(blogs); - } else { - const filtered = blogs.filter( + let filtered = blogs; + + // Filter by category + if (selectedCategory !== "All") { + filtered = filtered.filter((blog) => blog.category === selectedCategory); + } + + // Filter by search term + if (searchTerm.trim() !== "") { + filtered = filtered.filter( (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.description.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -37,14 +52,24 @@ export default function Blogs(): React.JSX.Element { tag.toLowerCase().includes(searchTerm.toLowerCase()), ), ); - setFilteredBlogs(filtered); } - }, [searchTerm]); + + setFilteredBlogs(filtered); + }, [searchTerm, selectedCategory]); const handleSearchChange = (e: React.ChangeEvent) => { setSearchTerm(e.target.value); }; + const handleCategoryClick = (category: string) => { + setSelectedCategory(category); + }; + + const handleClearFilters = () => { + setSearchTerm(""); + setSelectedCategory("All"); + }; + return ( -
-
- {/* Search Bar */} -
-
+
+ {/* Sidebar */} +
- {/* Search Results Counter */} - {searchTerm && ( -
-

- {filteredBlogs.length > 0 - ? `Found ${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""} for "${searchTerm}"` - : `No articles found for "${searchTerm}"`} -

-
- )} - -
- {filteredBlogs.length > 0 ? ( - filteredBlogs.map((blog, index) => ( - - )) - ) : ( -
-
-
🔍
-

No articles found

-

- Try adjusting your search terms or browse all articles. -

+
+

+ + + + + + + Categories +

+
+ {categories.map((category) => ( -
+ ))} +
+
+ + {(searchTerm || selectedCategory !== "All") && ( +
+
)} + + + {/* Main Content */} +
+ {/* Search Results Counter */} + {(searchTerm || selectedCategory !== "All") && ( +
+

+ {filteredBlogs.length > 0 + ? `Found ${filteredBlogs.length} article${filteredBlogs.length !== 1 ? "s" : ""}` + : `No articles found`} + {selectedCategory !== "All" && + ` in ${selectedCategory}`} + {searchTerm && ` for "${searchTerm}"`} +

+
+ )} + +
+ {filteredBlogs.length > 0 ? ( + filteredBlogs.map((blog, index) => ( + + )) + ) : ( +
+
+
🔍
+

No articles found

+

+ Try adjusting your search terms or browse all articles. +

+ +
+
+ )} +
@@ -184,38 +268,17 @@ export default function Blogs(): React.JSX.Element { } const BlogCard = ({ blog, index }) => { - // Get category from blog title or description for demo purposes - const getCategory = (title) => { - if ( - title.toLowerCase().includes("design") || - title.toLowerCase().includes("ux") - ) - return "Design"; - if ( - title.toLowerCase().includes("ai") || - title.toLowerCase().includes("deepmind") - ) - return "AI & Tech"; - if ( - title.toLowerCase().includes("github") || - title.toLowerCase().includes("git") - ) - return "Development"; - return "Resources"; - }; - // Get authors for this blog post const getAuthors = (slug) => { const authors = authorMapping[slug] || ["recode hive Team"]; return authors.length > 1 ? authors.join(" & ") : authors[0]; }; - const category = getCategory(blog.title); const authorName = getAuthors(blog.slug); return (
-
{category}
+
{blog.category}
{blog.title}