From 079ff202331680c3f81806ef8b6d37cb8a40f100 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 18 Oct 2025 20:45:42 +0530 Subject: [PATCH] Update: Cards added --- docs/index.mdx | 119 +++++++++++--- src/components/DocsCard/index.tsx | 94 +++++++++++ src/components/DocsCard/styles.module.css | 192 ++++++++++++++++++++++ src/components/DocsCards/cards.css | 31 ++++ src/components/DocsCards/index.tsx | 9 + src/css/custom.css | 27 +++ src/theme/MDXComponents.js | 4 + 7 files changed, 450 insertions(+), 26 deletions(-) create mode 100644 src/components/DocsCard/index.tsx create mode 100644 src/components/DocsCard/styles.module.css create mode 100644 src/components/DocsCards/cards.css create mode 100644 src/components/DocsCards/index.tsx diff --git a/docs/index.mdx b/docs/index.mdx index 6d2bdb2..38f2c0e 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,48 +1,115 @@ --- -title: Welcome to CodeHarborHub +title: CodeHarborHub Tutorials +hide_table_of_contents: false sidebar_position: 1 slug: / --- -Hello, and welcome to CodeHarborHub! Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered. + + CodeHarborHub Tutorials | Learn HTML, CSS, JavaScript, and More + + + - -
+Hello, and welcome to **CodeHarborHub**! -With a team of experienced instructors and industry experts, we offer a diverse range of courses and learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry! +Our mission is to provide accessible and comprehensive educational resources for all levels — from beginners to professionals. Whether you want to **kickstart your career**, **master a new language**, or **stay updated with the latest tech**, you’ll find everything you need here. + + + +With a team of experienced instructors and open-source contributors, we offer a wide range of tutorials designed to help you grow your skills with hands-on learning. ## What is CodeHarborHub? - -
+ id="lI3RBnK8V6Y" + params="autoplay=1&autohide=1&showinfo=0&rel=0" + title="CodeHarborHub Website Overview" + poster="maxresdefault" + webp +/> -CodeHarborHub is an online platform that offers a wide range of tech courses and tutorials to help you learn new skills and advance your career. Our courses cover a variety of topics, including web development, programming languages, data science, and more. Whether you're a beginner looking to get started in tech or an experienced professional looking to expand your skill set, we have something for everyone. +
-## Why Choose CodeHarborHub? +**CodeHarborHub** is a free platform that empowers learners with structured tutorials, project-based lessons, and real-world challenges. +We cover topics including **Frontend**, **Backend**, **AI**, **Data Science**, and **Cloud Computing**. -There are many reasons to choose CodeHarborHub for your tech education needs. Here are just a few: +## Why Learn with CodeHarborHub? -- **Quality Content**: Our courses are created by experienced instructors and industry experts who are passionate about teaching and helping others succeed. You can trust that you're getting the most up-to-date and relevant information when you enroll in a course on CodeHarborHub. And most importantly, our courses are designed to be engaging and fun, so you'll enjoy the learning process. -- **Flexibility**: We understand that everyone has different learning styles and schedules, which is why we offer a variety of course formats to suit your needs. Whether you prefer to learn at your own pace or in a structured environment, we have options that will work for you. -- **Community**: When you join CodeHarborHub, you're not just enrolling in a course – you're joining a community of like-minded individuals who are passionate about tech and learning. Our community is a great place to connect with others, ask questions, and share your knowledge and experiences. -- **Free of cost**: All the courses and tutorials on CodeHarborHub are completely free of cost. You can access them anytime, anywhere, without having to worry about subscription fees or hidden costs. We believe that quality education should be accessible to everyone, which is why we're committed to providing our content for free. -- **Beginner-Friendly**: Whether you're brand new to tech or have some experience under your belt, our courses are designed to be beginner-friendly and easy to follow. We break down complex concepts into simple, easy-to-understand lessons, so you can learn at your own pace and build your skills from the ground up. -- **Comprehensive Curriculum**: Our course catalog covers a wide range of topics, from web development and programming languages to data science and machine learning. Whether you're interested in front-end development, back-end development, or something in between, we have courses that will help you achieve your goals. -- **Hands-On Projects**: Learning by doing is one of the most effective ways to master new skills, which is why our courses include hands-on projects and assignments that will help you apply what you've learned in a real-world context. By working on projects, you'll gain practical experience and build a portfolio that showcases your skills to potential employers. -- **Career Opportunities**: By learning new skills on CodeHarborHub, you'll be better equipped to advance your career and pursue new opportunities in the tech industry. Whether you're looking to land your dream job, start your own business, or freelance as a developer, our courses will help you get there. -- **Continuous Learning**: Technology is constantly evolving, which means that there's always something new to learn. CodeHarborHub is committed to helping you stay up-to-date on the latest trends and technologies in the tech industry, so you can continue to grow and thrive in your career. -- **Feedback and Support**: Our instructors and support team are here to help you every step of the way. If you have questions or need assistance, don't hesitate to reach out – we're here to ensure that you have a positive learning experience on CodeHarborHub. +- **Completely Free** — Access all tutorials anytime, anywhere. +- **Project-Based Learning** — Build hands-on projects and grow your portfolio. +- **Beginner to Advanced** — Learn at your own pace with structured paths. +- **Community Support** — Collaborate, share, and contribute to open-source projects. +- **Continuous Updates** — Stay up-to-date with modern frameworks and technologies. + +

Explore Tutorials by Technology

+ +
+ + + + +

Learn the building blocks of the web — HTML. Understand tags, attributes, forms, and layout fundamentals to create structured webpages.

+ + + +

Master styling with CSS. Learn Flexbox, Grid, animations, and responsive design techniques for beautiful interfaces.

+ + + +

From basics to advanced — learn JavaScript programming, DOM manipulation, and ES6+ features to bring interactivity to your projects.

+ + + +

Dive into React and learn how to build modern single-page applications with reusable components and hooks.

+ + + +

Learn backend development using Node.js and Express. Build RESTful APIs and integrate with databases like MongoDB.

+ + + +

Get started with Python programming. Learn syntax, data structures, and how to build automation scripts or web apps.

+ + + +

Understand version control, branching, and collaboration with Git and GitHub for open-source development.

+ + + +

Build responsive UIs faster with Tailwind CSS. Learn utility-first styling and advanced customization.

+ + + +

Enhance your JavaScript with static typing. Learn TypeScript to write scalable and maintainable applications.

+ + + +

Learn server-side rendering and static site generation with Next.js — the React framework for production-ready apps.

+ + + +

Learn NoSQL database concepts with MongoDB. Store, query, and manage data efficiently for modern applications.

+ + + +

Explore artificial intelligence, machine learning, and neural networks with beginner-friendly examples.

+ + + +
## Get Started Today! -Ready to start your learning journey with CodeHarborHub? Browse our course catalog to find the perfect course for you, or check out our tutorials to learn something new today. We can't wait to see what you'll accomplish with CodeHarborHub – welcome aboard! +Browse the tutorials above to begin your journey with **CodeHarborHub**. Keep learning, keep building, and let’s create the future of technology together. \ No newline at end of file diff --git a/src/components/DocsCard/index.tsx b/src/components/DocsCard/index.tsx new file mode 100644 index 0000000..f9746ef --- /dev/null +++ b/src/components/DocsCard/index.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +import styles from './styles.module.css'; + +interface Props extends React.HTMLAttributes { + href?: string; + header?: string; + icon?: string; + hoverIcon?: string; + iconset?: string; + ionicon?: string; + img?: string; + size?: 'md' | 'lg'; +} + +function DocsCard(props: Props): JSX.Element { + const isStatic = typeof props.href === 'undefined'; + const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false; + const header = props.header === 'undefined' ? null :
{props.header}
; + const hoverIcon = props.hoverIcon || props.icon; + + const content = ( + <> + {props.img && } +
+ {(props.icon || hoverIcon) && ( +
+ {/* {props.icon && } */} + {hoverIcon && } +
+ )} + {props.ionicon && } + {props.iconset && ( +
+ {props.iconset.split(',').map((icon, index) => ( + + ))} +
+ )} +

+ {props.header && header} +

+
+

+ {props.children} +

+
+
+ + ); + + const className = clsx({ + 'Card-with-image': typeof props.img !== 'undefined', + 'Card-without-image': typeof props.img === 'undefined', + 'Card-size-lg': props.size === 'lg', + [props.className]: props.className, + }); + + if (isStatic) { + return ( + +
{content}
+ + ); + } + + if (isOutbound) { + return ( + + + {content} + + + ); + } + + return ( + + + {content} + + + ); +} + +export default DocsCard; \ No newline at end of file diff --git a/src/components/DocsCard/styles.module.css b/src/components/DocsCard/styles.module.css new file mode 100644 index 0000000..c297591 --- /dev/null +++ b/src/components/DocsCard/styles.module.css @@ -0,0 +1,192 @@ +:global(html[data-theme='light']) { + --docs-card-border-c: var(--c-indigo-30); + --docs-card-shadow: 0px 1px 2px rgba(2, 8, 20, 0.06), 0px 2px 8px rgba(2, 8, 20, 0.08); +} + +:global(html[data-theme='dark']) { + --docs-card-border-c: rgba(255, 255, 255, 0.02); + --docs-card-shadow: 0px 1px 2px rgba(255, 255, 255, 0.05), + 0px 2px 8px rgba(255, 255, 255, 0.1), + 0px -1px 2px rgba(255, 255, 255, 0.05), + 0px -2px 8px rgba(255, 255, 255, 0.1); +} + +:root { + --docs-card-bg-c: var(--token-secondary-bg-c); +} + +docs-card { + display: block; + max-width: 30em; +} + +docs-card.disabled, +docs-card[disabled] { + position: relative; +} + +docs-card.disabled::after, +docs-card[disabled]::after { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(232, 232, 232, 0.5); + pointer-events: none; + content: ''; +} + +.card { + color: inherit; + border: 1px solid #ccc; + border-radius: 12px; + display: flex; + flex-direction: column; + font-weight: normal; + height: 100%; + justify-content: flex-start; + line-height: 1.6; + transition: box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out; + width: 100%; + overflow: hidden; + padding: 1rem; +} + +@media (hover: hover) { + .card[href]:hover { + box-shadow: var(--docs-card-shadow); + text-decoration: none; + } + + .card[href]:hover .Card-icon-hover { + opacity: 1; + } +} + +.card:hover, +.card:active, +.card:focus { + color: inherit; +} + +.Card-with-image { + grid-row: span 2; +} + +.Card-without-image { + font-size: 12px; +} + +.Card-container { + padding: 1.5rem; +} + +.Card-image { + width: 100%; + height: auto; +} + +.Card-icon, +.Card-iconset__container { + width: 48px; + height: 48px; + margin-bottom: 1.2em; + border-radius: 50%; + object-fit: contain; +} + +.Card-icon-default { + transition: opacity 150ms ease-out; +} + +.Card-icon-hover { + top: 0; + position: absolute; + opacity: 0; + transition: opacity 150ms ease-out; +} + +.Card-icon-row { + position: relative; +} + +.Card-iconset__container { + position: relative; +} + +.Card-iconset__container .Card-icon { + position: absolute; + opacity: 0; + transition: 0.8s opacity; +} + +.Card-iconset__container .Card-icon--active { + opacity: 1; +} + +.Card-ionicon { + width: 48px; + height: 48px; + float: left; + margin-right: 1em; +} + +.Card-content > *:first-child { + margin-top: 0; +} + +.Card-content > *:last-child { + margin-bottom: 0; +} + +.Card-header { + font-size: 1rem; + line-height: 1.4; + margin-bottom: 0.45em; + font-weight: 600; + color: var(--token-heading-color-dark); +} + +.Card-without-image .Card-header { + margin-bottom: 0.3em; +} + +.Card-header > svg { + fill: currentColor; + height: 1em; + margin-bottom: -0.125em; + width: auto; +} + +.Card-size-lg .Card-icon, +.Card-size-lg .Card-ionicon, +.Card-size-lg .Card-iconset__container { + width: 80px; + height: 80px; +} + +.Card-size-lg.Card-without-image .Card-header { + font-size: 20px; +} + +aside .Card-container { + display: grid; + grid-template-columns: minmax(0, max-content) 1fr; + grid-template-rows: minmax(0, min-content); + grid-template-areas: + 'icon title' + 'icon body'; +} + +aside .Card-icon { + width: 32px; + height: 32px; + margin-right: 16px; + margin-bottom: 0; + grid-area: icon; +} + +aside .Card-header { + grid-area: title; +} \ No newline at end of file diff --git a/src/components/DocsCards/cards.css b/src/components/DocsCards/cards.css new file mode 100644 index 0000000..fd52499 --- /dev/null +++ b/src/components/DocsCards/cards.css @@ -0,0 +1,31 @@ +docs-cards { + display: grid; + font-size: 0.9rem; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-gap: 1.35rem; +} + +docs-cards > docs-card { + font-size: inherit; + max-width: none; +} + +docs-cards > docs-card.tall { + grid-row: span 2; +} + +docs-cards > docs-card.wide { + grid-column: span 2; +} + +docs-cards.prioritized > docs-card:nth-child(-n + 5) { + font-size: 1.25em; +} + +docs-cards.prioritized > docs-card:first-child { + grid-row: span 2; +} + +docs-cards.max-measure > docs-card { + max-width: 50%; +} \ No newline at end of file diff --git a/src/components/DocsCards/index.tsx b/src/components/DocsCards/index.tsx new file mode 100644 index 0000000..704dcc9 --- /dev/null +++ b/src/components/DocsCards/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import './cards.css'; + +function DocsCards(props): JSX.Element { + return {props.children}; +} + +export default DocsCards; \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 6c8ed6c..2c26b39 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -18,6 +18,33 @@ --image-filter:invert(0); --site-color-svg-icon-favorite: #ff1100cb; --ifm-text-color: #000; + + /* Indigo palette */ + --c-indigo-10: #e8eaf6; + --c-indigo-20: #c5cae9; + --c-indigo-30: #9fa8da; + --c-indigo-40: #7986cb; + --c-indigo-50: #5c6bc0; + --c-indigo-60: #3f51b5; + --c-indigo-70: #3949ab; + --c-indigo-80: #303f9f; + --c-indigo-90: #283593; + + /* Neutral grayscale */ + --c-gray-5: #f9f9f9; + --c-gray-10: #f3f3f3; + --c-gray-20: #e0e0e0; + --c-gray-30: #c2c2c2; + --c-gray-40: #9e9e9e; + --c-gray-50: #757575; + --c-gray-60: #616161; + --c-gray-70: #424242; + --c-gray-80: #2b2b2b; + --c-gray-90: #1c1c1c; + + /* Token replacements */ + --token-secondary-bg-c: var(--c-gray-5); + --token-heading-color-dark: var(--c-indigo-80); } [data-theme="dark"] { diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 9be0b41..3c92aa0 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -10,6 +10,8 @@ import TabItem from "@theme/TabItem"; import Tabs from "@theme/Tabs"; import { FaReact } from "react-icons/fa"; import LiteYouTubeEmbed from "react-lite-youtube-embed"; +import DocsCard from '@site/src/components/DocsCard'; +import DocsCards from '@site/src/components/DocsCards'; export default { // Re-use the default mapping @@ -23,4 +25,6 @@ export default { Image, LiteYouTubeEmbed, AdsComponent, + DocsCard, + DocsCards, };