Merge branch 'main' into improve-light-theme

components/Breadcrumbs/index.tsx

@@ -38,6 +38,8 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
         </Link>
         <div className="dark:text-text-primary text-1.5xl capitalize font-medium mx-2.5 my-auto border-light-silver border-2 border-opacity-75">
           {sections[0].name}
+        <div className="dark:text-text-primary text-1.5xl capitalize font-medium mx-2.5 my-auto">
+          {sections[0].name?.split('-').join(' ')}
         </div>
       </div>
     </>

components/TopBar/CategoryDescriptions.ts

@@ -30,8 +30,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'Theme templates are pre-designed website themes that can be customized to fit your needs. They are useful for quickly setting up a website without having to design everything from scratch.',
   videos:
     'Videos are visual representations of moving images and sound. They can be used to convey information in a simple and easy-to-understand way.',
-  'three-js':
-    'Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.',
+  '3d-libraries':
+    '3D Libraries are collections of reusable components that can be used to create 3D graphics and animations. They are often used in conjunction with frameworks like Three.js to create web applications.',
   'next-js':
     'Next.js is a flexible React framework that gives you building blocks to create fast web applications.',
   'ui-generators':
@@ -40,6 +40,8 @@ const categoryDescriptions: CategoryDescriptions = {
     "Online code editors, also called cloud-based code editors, are convenient because they usually require no setup. Plus, it's way easier to collaborate with someone over the cloud.",
   'ui-libraries':
     'UI libraries are collections of reusable components that can be used to build user interfaces. They are often used in conjunction with frameworks like React or Vue.js to create web applications.',
+  'js-chart-libraries':
+    'JavaScript chart libraries are used to create interactive and visually appealing charts and graphs for web applications. They are often used in data visualization and reporting applications.',
   angular:
     'Angular is a popular open-source web application framework similar to react developed and maintained by Google. ',
   //backend

components/TopBar/TopBar.tsx

@@ -18,6 +18,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
   const { theme } = useTheme()
 
   const category = router.asPath
+  const categoryNameLink = category?.split('/')[1]
   const categoryName = category?.split('/')[1]?.split('-').join(' ')
   const subcategoryName = category?.split('/')[2]?.split('-').join(' ')
 
@@ -54,13 +55,13 @@ export const TopBar: FC<TopBarProps> = ({}) => {
       </Link>
       <RxSlash className="hidden md:inline-block" />
       <Link
-        href={'/' + categoryName}
+        href={'/' + categoryNameLink}
         className="bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
       >
         <h3>{capitalizeEachWord(categoryName)}</h3>
       </Link>
       <RxSlash className="hidden md:inline-block" />
-      <Link href={'/' + categoryName} className="flex gap-x-2 items-center">
+      <Link href={'/' + categoryNameLink} className="flex gap-x-2 items-center">
         <IoIosArrowBack className="md:hidden" />
       </Link>
       <div className="md:bg-[#EDEDED] md:bg-opacity-20 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">

database/data.ts

@@ -10,7 +10,11 @@ export const sidebarData: ISidebar[] = [
     category: 'frontend',
     subcategory: [
       { name: 'next js', url: '/next-js', resources: DB.next },
-      { name: 'three js', url: '/three-js', resources: DB.three },
+      {
+        name: '3D libraries',
+        url: '/3d-libraries',
+        resources: DB._3dLibraries,
+      },
       { name: 'images', url: '/images', resources: DB.images },
       { name: 'fonts', url: '/fonts', resources: DB.fonts },
       { name: 'colors', url: '/colors', resources: DB.colors },
@@ -54,6 +58,11 @@ export const sidebarData: ISidebar[] = [
         resources: DB.uilibraries,
       },
       { name: 'angular', url: '/angular', resources: DB.angular },
+      {
+        name: 'js-Chart Libraries',
+        url: '/js-chart-libraries',
+        resources: DB.jsChartLibraries,
+      }
     ],
   },
   {

database/frontend/3d-libraries.json

@@ -0,0 +1,72 @@
+[
+  {
+    "name": "Three JS",
+    "description": "The world's most popular JavaScript framework for displaying 3D content on the web. With three.js, you no longer need a fancy gaming PC console or download a special application to display photorealistic 3D graphics. All you need is a smartphone and a web browser.",
+    "url": "https://threejs.org/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "Babylon JS",
+    "description": "One of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and open 3D to everyone on the web.",
+    "url": "https://www.babylonjs.com/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "A-Frame",
+    "description": "An open-source web framework for building virtual reality (VR) experiences. It is based on top of HTML, making it simple to get started. But it is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js.",
+    "url": "https://aframe.io/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "PlayCanvas",
+    "description": "The world's easiest to use WebGL Game Engine. It's free, it's open source and it's backed by amazing developer tools.",
+    "url": "https://playcanvas.com/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "Cannon JS",
+    "description": "A physics engine for the web. It's written in JavaScript and runs in the browser. It's a great choice for building 3D games and simulations in the browser. It's open-source and free to use.",
+    "url": "https://schteppe.github.io/cannon.js/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "Oimo JS",
+    "description": "A 3D physics engine for the web. It's written in JavaScript and runs in the browser. It's a great choice for building 3D games and simulations in the browser. It's open-source and free to use.",
+    "url": "https://lo-th.github.io/Oimo.js/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "Cesium JS",
+    "description": "CesiumJS is an open-source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use.",
+    "url": "https://cesium.com/cesiumjs/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "X3DOM",
+    "description": "A framework for integrating and manipulating 3D content in an HTML5 context. It uses the W3C X3D standard and is open-source and free to use.",
+    "url": "https://www.x3dom.org/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "Verge3D",
+    "description": "A powerful and intuitive toolkit that allows Blender, 3ds Max, or Maya users to create immersive web-based experiences. Verge3D can be used to build interactive animations, product configurators, engaging presentations of any kind, online stores, explainers, e-learning content, portfolios, and browser games.",
+    "url": "https://www.soft8soft.com/verge3d/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  },
+  {
+    "name": "P5 JS",
+    "description": "A JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.",
+    "url": "https://p5js.org/",
+    "category": "frontend",
+    "subcategory": "3d-libraries"
+  }
+]

database/frontend/js-chart-libraries.json

@@ -0,0 +1,51 @@
+[
+    {
+        "name": "Chart.js",
+        "description": "Chart.js is a simple yet flexible JavaScript charting library that allows you to create interactive and responsive charts for your web applications.",
+        "url": "https://www.chartjs.org/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "Highcharts",
+        "description": "Highcharts is a powerful JavaScript charting library that provides a wide range of customizable and interactive charts for visualizing data in your web applications.",
+        "url": "https://www.highcharts.com/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "D3.js",
+        "description": "D3.js is a popular JavaScript library for manipulating documents based on data. It provides powerful tools for creating dynamic and interactive data visualizations on the web.",
+        "url": "https://d3js.org/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "Plotly.js",
+        "description": "Plotly.js is an open-source JavaScript graphing library that allows you to create interactive, publication-quality graphs and charts in your web applications.",
+        "url": "https://plotly.com/javascript/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "FusionCharts",
+        "description": "FusionCharts is a comprehensive JavaScript charting library that offers a wide range of charts, gauges, and maps for visualizing data in your web applications.",
+        "url": "https://www.fusioncharts.com/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "Google Charts",
+        "description": "Google Charts is a powerful JavaScript charting library that provides a variety of charts and visualization options for displaying data in your web applications.",
+        "url": "https://developers.google.com/chart/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    },
+    {
+        "name": "ApexCharts",
+        "description": "ApexCharts is a modern JavaScript charting library that offers a wide range of beautiful and interactive charts for visualizing data in your web applications.",
+        "url": "https://apexcharts.com/",
+        "category": "frontend",
+        "subcategory": "js-chart-libraries"
+    }
+]

database/index.ts

@@ -14,8 +14,9 @@ export { default as themesTemplates } from './frontend/themes-templates.json'
 export { default as uiGenerators } from './frontend/ui-generators.json'
 export { default as react } from './frontend/react.json'
 export { default as next } from './frontend/next.json'
-export { default as three } from './frontend/three.json'
+export { default as _3dLibraries } from './frontend/3d-libraries.json'
 export { default as uilibraries } from './frontend/ui-libraries.json'
+export { default as jsChartLibraries} from './frontend/js-chart-libraries.json'
 // backend
 export { default as authentication } from './backend/authentication.json'
 export { default as architecture } from './backend/architecture.json'

database/languages/javascript.json

@@ -13,6 +13,13 @@
     "category": "languages",
     "subcategory": "javascript"
   },
+  {
+    "name": "You Don't Know JS Yet",
+    "description": "This is a series of books diving deep into the core mechanisms of the JavaScript language",
+    "url": "https://github.com/getify/You-Dont-Know-JS",
+    "category": "languages",
+    "subcategory": "javascript"
+  },
   {
     "name": "Eloquent Javascript",
     "description": "This  book explains the concepts of JavaScript with real-life examples",

database/other/devtools.json

@@ -117,5 +117,12 @@
     "url": "https://imagecompressor.com/",
     "category": "other",
     "subcategory": "devtools"
+  },
+  {
+    "name": "Dr Link Check",
+    "description": "Dr. Link Check is a valuable tool that helps website owners identify and address broken links on their websites. Broken links can negatively impact user experience, search engine rankings, and overall site credibility.    ",
+    "url": "https://www.drlinkcheck.com/",
+    "category": "other",
+    "subcategory": "devtools"
   }
 ]

database/placement_prep/job-portals.json

@@ -47,5 +47,12 @@
     "url": "https://monster.com",
     "category": "placement-prep",
     "subcategory": "job-portals"
+  },
+  {
+    "name": "Naukri",
+    "description": "It's a platform that helps you find and get the job.",
+    "url": "https://www.naukri.com/",
+    "category": "placement-prep",
+    "subcategory": "job-portals"
   }
 ]

pages/search.tsx

@@ -94,7 +94,7 @@ const Search = () => {
         />
       </Head>
       <TopBar className="shadow-black-500/50 fixed top-[76px] z-30 flex w-full -translate-x-4 items-center bg-gray-100 px-4 pt-6 pb-4 shadow-xl dark:bg-gray-900 md:hidden" />
-      <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:min-h-[calc(100%-76px)] md:px-10 md:pt-10 h-[calc(100vh-150px)]">
+      <div className="min-h-[calc(100%-68px)] w-full pt-[85px] pb-4 md:px-10 md:pt-10 ">
         {filteredCardsList.length > 0 ? (
           <MemoizedCardsList cards={filteredCardsList} />
         ) : (