Redesign Introduction of GitHub as an interactive lesson

docs/GitHub/intro-github.mdx

@@ -0,0 +1,128 @@
+---
+id: intro-github
+title: Introduction of GitHub
+sidebar_label: Introduction of GitHub #displays in sidebar
+sidebar_position: 1
+hide_title: true
+footer_width: lesson
+tags:
+  [
+    GitHub,
+    Introduction of GitHub,
+    What is GitHub,
+    Why learn GitHub,
+    How to use GitHub,
+  ]
+description: In this tutorial, you will learn about GitHub, its importance, what is GitHub from Scratch, how to use GitHub, steps to start using GitHub, and more.
+---
+
+import {
+  Lesson, LessonHeader, GitVsGitHub, FeatureCards, Feature, Scenario, Frame, Split, SavePoints, VcsCards, Glossary,
+  Tip, WhyGrid, Why, WorkflowStepper, Concepts, LiteYouTube, Takeaways, QuickCheck, UpNext,
+} from '@site/src/components/githubLesson';
+
+<Lesson>
+
+<LessonHeader />
+
+<GitVsGitHub />
+
+GitHub is a cloud-based platform that helps developers store, manage, and track changes to their code. It combines the power of Git, a version control system, with a collaborative interface that makes teamwork across distributed teams possible. Whether you are building a solo project or contributing to a large open-source codebase, GitHub provides the tools to manage your work effectively.
+
+<FeatureCards>
+  <Feature icon="clock" title="Large-scale version control">GitHub enables large-scale version control, letting teams track every change made to a project over time.</Feature>
+  <Feature icon="lock" title="Public and private repositories">It supports both public and private repositories, making it suitable for open-source projects and proprietary software alike.</Feature>
+  <Feature icon="users" title="Paid plans for teams">GitHub offers <a href="https://github.com/pricing">paid plans</a> with additional features like advanced security, larger storage, and team management tools.</Feature>
+</FeatureCards>
+
+## How to Start with GitHub?
+
+As a developer, you often want to share your work, get feedback, and collaborate with others. GitHub makes this possible by providing a central place where code can be hosted, reviewed, and improved together. Instead of emailing files back and forth, teams can work on the same codebase simultaneously without overwriting each other's work.
+
+Other platforms that offer similar functionality include Bitbucket, GitLab, and Azure Repos. Each has its strengths, but GitHub remains the most widely adopted platform for hosting open-source projects and developer portfolios.
+
+<Scenario>
+
+Consider a team building an e-commerce website. Developer 1 works on the product listing page, Developer 2 handles the checkout flow, and Developer 3 builds the user authentication system. Each developer works on their own copy of the codebase locally. When their feature is ready, they push the changes to the shared remote repository on GitHub. A senior developer then reviews the code through a pull request and merges it into the main branch, making the new features available to everyone.
+
+</Scenario>
+
+<Frame url="github.com">
+
+[![GitHub Dashboard](./assets/1-Introduction-to-github.png)](https://github.com/)
+
+</Frame>
+
+## What is Git?
+
+<Split>
+
+Git is the engine that powers GitHub. It is a free, open-source distributed version control system created by Linus Torvalds in 2005. Torvalds originally built Git to manage the development of the Linux kernel, which required a system that could handle thousands of contributors efficiently.
+
+Git tracks changes to files over time, allowing developers to revisit earlier versions of their code, understand what changed and when, and coordinate work across a large team without conflicts.
+
+</Split>
+
+<SavePoints />
+
+**What is a Version Control System?**
+
+<VcsCards
+  vcs={
+    <>
+      <p>Imagine you are working on a project and you accidentally delete an important function. Without version control, recovering that code would be difficult or impossible. A version control system (VCS) acts like a detailed history log. Every change you make is recorded, along with who made it and when. You can roll back to any earlier state at any point.</p>
+    </>
+  }
+  dvcs={
+    <>
+      <p>Git is a distributed version control system (DVCS), which means every developer has a full copy of the project history on their local machine. This makes it faster and more resilient than older centralized systems.</p>
+    </>
+  }
+/>
+
+<Glossary />
+
+<Tip title="Need Git Commands?">Ready to start using Git? Check out our [comprehensive Git Commands Cheatsheet](../GitHub/setup-environment/git-commands.md) with 50 essential commands and real examples. We also recommend [Learn Git Branching](https://learngitbranching.js.org/), an interactive visual tool to practice Git in a gamified environment.</Tip>
+
+## Why Learn GitHub?
+
+GitHub builds on top of Git by adding a visual interface, collaboration features, and a large developer community. Here is why learning GitHub is valuable:
+
+<WhyGrid>
+  <Why title="Industry standard">The majority of open-source projects and many private companies use GitHub to manage their codebases.</Why>
+  <Why title="Portfolio visibility">Your GitHub profile acts as a public portfolio that employers and collaborators can view.</Why>
+  <Why title="Collaboration tools">Features like pull requests, code reviews, and issue tracking make teamwork structured and transparent.</Why>
+  <Why title="Automation">GitHub Actions allows you to automate repetitive tasks like testing, building, and deploying your application.</Why>
+  <Why title="Community">GitHub hosts millions of open-source projects, making it a great place to learn from real codebases and contribute to projects you use.</Why>
+</WhyGrid>
+
+The typical GitHub workflow looks like this: you clone a repository to your local machine, create a new branch for your feature, make and commit your changes, push the branch to GitHub, and then open a pull request asking the project maintainer to review and merge your work.
+
+<WorkflowStepper />
+
+<Frame>
+
+![Git Structure](./assets/2-git-strucutre.png)
+
+</Frame>
+
+<Concepts />
+
+A fork is useful when you want to contribute to a project you do not have direct write access to. You fork the repository, make your changes in your own copy, and then submit a pull request to the original project.
+
+{/* A JSX heading, so the contents list on the right keeps its four sections */}
+<h3>Watch the Video Tutorial</h3>
+
+<LiteYouTube />
+
+<Takeaways />
+
+<QuickCheck slug="intro-github" />
+
+## Conclusion
+
+GitHub is far more than a place to store code. It is a complete platform for software collaboration, project management, and automation. By learning GitHub, you gain a skill that is relevant across every area of software development, from personal projects to large enterprise teams. In the next tutorial, we will walk through how to create your first GitHub repository and push your local project to it using Git.
+
+<UpNext />
+
+</Lesson>

docusaurus.config.ts

@@ -3,6 +3,7 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import * as dotenv from "dotenv";
 import stripHeadingEmoji from "./src/plugins/strip-heading-emoji";
+import lessonReadingTime from "./src/plugins/lesson-reading-time";
 dotenv.config({ path: ".env.local" });
 dotenv.config();
 
@@ -79,6 +80,8 @@ const config: Config = {
           path: "docs",
           routeBasePath: "docs",
           sidebarPath: require.resolve("./sidebars.ts"),
+          // Lessons only: gives <LessonHeader> the word count of its page, so the reading time is computed
+          remarkPlugins: [lessonReadingTime],
           editUrl: ({ docPath }) =>
             `https://github.com/recodehive/recode-website/tree/main/docs/${docPath}`,
         },

src/components/blogPost/blogPost.module.css

@@ -27,6 +27,8 @@
 }
 /* Pages whose content is capped at 760px give their footer the same width (front matter: footer_width) */
 .docEndNarrow { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
+/* The GitHub lesson pages use the same 808px column as their content (front matter: footer_width: lesson) */
+.docEndLesson { width: 100%; max-width: 808px; margin-left: auto; margin-right: auto; }
 /* The setup guide centres a 1080px layout (760px content plus its progress rail) and keeps the content at its left edge */
 .docEndNarrowStart { width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }
 .docEndNarrowStart > * { max-width: 760px; }

src/components/docFooter/DocFooter.tsx

@@ -17,7 +17,7 @@ export default function DocFooter(): React.ReactElement {
   const { tags, title, permalink, editUrl, previous, next } = metadata;
   // Pages whose content is capped at 760px ask for a footer of the same width
   const width = (frontMatter as { footer_width?: string }).footer_width;
-  const widthClass = width === 'narrow' ? styles.docEndNarrow : width === 'narrow-start' ? styles.docEndNarrowStart : '';
+  const widthClass = width === 'narrow' ? styles.docEndNarrow : width === 'narrow-start' ? styles.docEndNarrowStart : width === 'lesson' ? styles.docEndLesson : '';
   return (
     <div className={`${styles.docEnd} ${widthClass}`}>
       {tags.length > 0 && (