Create git-scm.html
· 1 year ago
69811e2ce92e2a1ab1b60c58398cae1aa62a65be
Parent:
9c6197c71
1 file changed +1167 −0
- git-scm.html +1167 −0
Diff
--- /dev/null +++ b/git-scm.html @@ -0,0 +1,1167 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Interactive Git Cheatsheet: Essential Commands & Workflows | git-scm.html</title> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔄</text></svg>"> + + <!-- SEO Meta Description --> + <meta name="description" content="A comprehensive interactive Git cheatsheet covering essential commands, setup, branching, merging, remotes, Gitflow, and advanced tools. Perfect for quick reference and learning Git."> + <meta name="keywords" content="Git, Git Cheatsheet, Git Commands, Learn Git, Version Control, Source Control, Git Tutorial, Git Branching, Git Merge, Git Remote, Gitflow, Interactive Git Guide, Git Reference, DVCS, git-scm"> + + <!-- Canonical URL --> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/git-scm.html"> + + <!-- Social Media Metadata --> + <meta property="og:title" content="Interactive Git Cheatsheet: Essential Commands & Workflows"> + <meta property="og:description" content="A comprehensive interactive Git cheatsheet for quick reference and learning. Covers setup, core operations, branching, remotes, Gitflow, and advanced tools."> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/git-scm.html"> + <meta property="og:site_name" content="David Veksler Cheatsheets"> + <!-- <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/git-scm-cheatsheet-preview.png"> --> <!-- Placeholder OG image URL --> + + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:title" content="Interactive Git Cheatsheet: Essential Commands & Workflows"> + <meta name="twitter:description" content="Your go-to interactive Git cheatsheet for commands, branching, remotes, and workflows."> + <!-- <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/git-scm-cheatsheet-preview.png"> --> <!-- Placeholder Twitter image URL --> + <!-- <meta name="twitter:creator" content="@DavidVeksler"> --> + + + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + + <style> + :root { + --git-orange: #F05033; + --git-dark: #2c3e50; /* Darker, more modern shade */ + --link-color: #3498db; /* A brighter blue */ + --branch-color-main: #27ae60; /* Emerald */ + --branch-color-develop: #2980b9; /* Belize Hole */ + --branch-color-feature: #f39c12; /* Orange */ + --branch-color-release: #8e44ad; /* Wisteria */ + --branch-color-hotfix: #c0392b; /* Pomegranate */ + --light-gray: #ecf0f1; /* Clouds */ + --border-color: #bdc3c7; /* Silver */ + --card-bg: #ffffff; + --text-color: #34495e; /* Wet Asphalt */ + --code-bg: #e8eaed; + --code-color: #c0392b; /* Pomegranate for code text */ + } + + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: var(--light-gray); + color: var(--text-color); + line-height: 1.7; + } + + .page-header { + background: linear-gradient(135deg, var(--git-dark) 0%, #34495e 100%); + color: white; + padding: 3rem 1rem; + margin-bottom: 2.5rem; + text-align: center; + border-bottom: 5px solid var(--git-orange); + } + .page-header h1 { + font-weight: 600; + letter-spacing: 0.5px; + } + .page-header h1 .bi-git { + color: var(--git-orange); + font-size: 0.9em; + margin-right: 0.2em; + } + .page-header .lead { + font-size: 1.15rem; + color: #f0f0f0; + margin-top: 0.5rem; + } + + .conceptual-hubs-container { + padding: 0 1rem; + } + + .hub-nexus { + text-align: center; + padding: 2.5rem 2rem; + background-color: var(--card-bg); + border-radius: 10px; + box-shadow: 0 5px 20px rgba(0,0,0,0.08); + margin-bottom: 3rem; + border-top: 5px solid var(--git-orange); + } + .hub-nexus h2 { + font-weight: 600; + color: var(--git-dark); + } + + .hub-link-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-top: 2rem; + } + + .hub-link { + display: inline-flex; /* For icon alignment */ + align-items: center; /* For icon alignment */ + background-color: var(--git-orange); + color: white !important; + padding: 0.8rem 1.6rem; + border-radius: 50px; /* Pill shape */ + text-decoration: none; + font-weight: 500; + transition: all 0.25s ease-in-out; + box-shadow: 0 3px 8px rgba(0,0,0,0.12); + letter-spacing: 0.3px; + } + .hub-link:hover, .hub-link:focus { + background-color: #d84325; /* Darken orange */ + transform: translateY(-3px) scale(1.03); + box-shadow: 0 5px 15px rgba(var(--git-orange-rgb, 240, 80, 51), 0.4); + } + .hub-link i { + margin-right: 0.6rem; + font-size: 1.1em; + } + + .conceptual-hub { + margin-bottom: 3.5rem; + padding-top: 70px; /* For scroll spy offset if using fixed header */ + margin-top: -70px; /* Counteract padding for anchor links */ + } + + .hub-title-card { + background: var(--git-dark); + color: white; + padding: 1.75rem 1.5rem; + border-radius: 10px 10px 0 0; + margin-bottom: 0; + border: none; + } + .hub-title-card h2 { + margin-bottom: 0; + font-size: 1.8rem; + font-weight: 500; + } + .hub-title-card h2 i { + color: var(--git-orange); + margin-right: 0.85rem; + } + + .hub-content-area { + background-color: var(--card-bg); + padding: 2rem 1.5rem; + border-radius: 0 0 10px 10px; + box-shadow: 0 8px 25px rgba(0,0,0,0.09); + border: 1px solid var(--border-color); + border-top: none; + } + + .info-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + margin-bottom: 1.5rem; + transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; + height: 100%; + display: flex; + flex-direction: column; + } + .info-card:hover { + transform: translateY(-4px); + box-shadow: 0 10px 20px rgba(0,0,0,0.12); + } + .info-card .card-body { + padding: 1.25rem; + flex-grow: 1; + } + .info-card h5 { + font-weight: 600; + color: var(--git-dark); + margin-bottom: 0.75rem; + font-size: 1.1rem; + } + .info-card h5 i { + color: var(--git-orange); + margin-right: 0.4rem; + } + .info-card .summary { + font-size: 0.95rem; + margin-bottom: 1rem; + color: #555; + } + .info-card .term { + font-weight: 600; + color: var(--git-orange); + } + .info-card .card-footer { + background-color: transparent; + border-top: 1px solid var(--border-color); /* Subtle separator */ + padding: 0.75rem 1.25rem; + } + .info-card .card-footer .btn { /* Ensure button full width in footer if desired */ + width: 100%; + } + + + .details-toggle { + font-size: 0.9rem; + padding: 0.4rem 1rem; + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin-top: auto; + border-radius: 20px; + font-weight: 500; + } + .details-toggle .bi { + transition: transform 0.25s ease; + } + + .collapse-content { + padding: 1.25rem; + background-color: #f9f9f9; /* Slightly off-white for contrast */ + border-top: 1px solid var(--border-color); + font-size: 0.9rem; + border-radius: 0 0 7px 7px; + } + .collapse-content h6 { + font-weight: bold; + margin-top: 0.75rem; + color: var(--git-dark); + font-size: 1rem; + } + .collapse-content ul { + padding-left: 1.3rem; + margin-bottom: 0.75rem; + } + .collapse-content ul li { + margin-bottom: 0.3rem; + } + .collapse-content code, .command { + background-color: var(--code-bg); + padding: 0.25em 0.5em; + margin: 0 0.1em; + font-size: 0.88em; + border-radius: 4px; + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + cursor: copy; + display: inline-block; + position: relative; + color: var(--code-color); + border: 1px solid #ddd; + } + .command::after { + content: "📋"; + position: absolute; + right: -1.7em; + top: 50%; + transform: translateY(-50%); + opacity: 0.3; + font-size: 0.85em; + transition: opacity 0.2s; + color: var(--text-color); + } + .command:hover::after { + opacity: 1; + } + .important-note { + background-color: #fff9e6; /* Lighter yellow */ + border-left: 5px solid #ffc107; + padding: 1rem 1.25rem; + margin: 1rem 0; + font-size: 0.9rem; + border-radius: 0 6px 6px 0; + color: #664d03; /* Darker text for yellow bg */ + } + .important-note strong { color: #594402; } + + .copied-feedback { + position: fixed; + bottom: 25px; + left: 50%; + transform: translateX(-50%); + background-color: var(--git-dark); + color: white; + padding: 12px 22px; + border-radius: 6px; + z-index: 1050; /* Ensure above Bootstrap components */ + opacity: 0; + transition: opacity 0.4s ease-out, transform 0.3s ease-out; + pointer-events: none; + font-weight: 500; + } + .copied-feedback.show { + opacity: 1; + transform: translateX(-50%) translateY(-15px); + } + + /* Three States Diagram */ + .three-states-diagram { + display: flex; + justify-content: space-around; + align-items: center; + padding: 1.5rem 0.5rem; + flex-wrap: wrap; + gap: 0.5rem; + } + .state-box { + border: 2px solid var(--git-dark); + padding: 1rem 1.5rem; + text-align: center; + border-radius: 6px; + margin: 0.5rem; + min-width: 140px; + background-color: #fff; + box-shadow: 0 2px 5px rgba(0,0,0,0.05); + } + .state-box h6 { margin-bottom: 0.3rem; font-weight: bold; font-size: 1rem; color: var(--git-dark); } + .state-box p { font-size: 0.85em; margin-bottom: 0;} + .state-arrow { + font-size: 2rem; + color: var(--git-orange); + margin: 0 0.3rem; + align-self: center; + } + @media (max-width: 767px) { + .three-states-diagram { flex-direction: column; gap: 0.3rem;} + .state-arrow { transform: rotate(90deg); margin: 0.4rem 0;} + } + + /* Basic Branching Diagram */ + .branching-diagram-simple { + position: relative; + padding: 2.5rem 1rem; + min-height: 130px; + margin-top: 1.5rem; + border: 1px dashed var(--border-color); + border-radius: 6px; + background-color: #fff; + } + .commit-node-simple { + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.65rem; + color: white; + font-weight: bold; + box-shadow: 0 0 0 3px var(--card-bg); /* Create a border effect */ + } + .commit-node-simple.main { background-color: var(--branch-color-main); } + .commit-node-simple.feature { background-color: var(--branch-color-feature); } + + .branch-line-simple { + position: absolute; + background-color: #95a5a6; /* Mid-gray */ + height: 4px; + border-radius: 2px; + } + #s-main-c1 { top: 45%; left: 10%; } + #s-line-main1 { top: calc(45% + 8px); left: 10%; width: 20%; background-color: var(--branch-color-main); } + #s-main-c2 { top: 45%; left: 30%; } + #s-line-fork { top: calc(45% + 8px); left: 30%; width: 4px; height: calc(25% + 4px); background-color: var(--branch-color-feature); transform-origin: top center; transform: skewX(-30deg); } + #s-feat-c1 { top: 70%; left: 50%; } + #s-line-feat1 { top: calc(70% + 8px); left: 30%; width: calc(20% + 4px); background-color: var(--branch-color-feature); } + #s-line-merge-path1 { top: calc(45% + 8px); left: 50%; width: 4px; height: calc(25% + 4px); background-color: var(--branch-color-feature); transform-origin: bottom center; transform: skewX(30deg); } + #s-main-c3 { top: 45%; left: 70%; } + #s-line-main2 { top: calc(45% + 8px); left: 30%; width: 40%; background-color: var(--branch-color-main); z-index: -1; } /* Ensure main line is behind merge point */ + + + /* Gitflow Diagram */ + .gitflow-diagram { + position: relative; + padding: 25px; + background-color: #fff; + border-radius: 10px; + border: 1px solid var(--border-color); + margin-top: 2rem; + overflow-x: auto; + box-shadow: 0 4px 10px rgba(0,0,0,0.05); + } + .gitflow-lanes { + display: flex; + justify-content: space-around; + min-width: 580px; + padding-bottom: 15px; + } + .gitflow-lane { + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 5px; + flex-basis: 110px; + } + .gitflow-branch { + writing-mode: vertical-rl; + transform: rotate(180deg); + padding: 14px 7px; + margin-bottom: 12px; + border-radius: 5px; + color: white; + font-weight: bold; + font-size: 0.9rem; + text-align: center; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s; + min-height: 120px; + letter-spacing: 0.5px; + box-shadow: 0 2px 4px rgba(0,0,0,0.15); + } + .gitflow-branch:hover { filter: brightness(1.1); } + .gitflow-branch.active-branch { + transform: rotate(180deg) scale(1.08); + box-shadow: 0 0 15px rgba(0,0,0,0.3); + filter: brightness(1.15); + } + .gitflow-main { background-color: var(--branch-color-main); } + .gitflow-develop { background-color: var(--branch-color-develop); } + .gitflow-feature { background-color: var(--branch-color-feature); } + .gitflow-release { background-color: var(--branch-color-release); } + .gitflow-hotfix { background-color: var(--branch-color-hotfix); } + + .gitflow-branch-details { + margin-top: 1.5rem; + padding: 1.25rem; + border: 1px solid var(--border-color); + border-radius: 6px; + background-color: var(--light-gray); + display: none; + } + .gitflow-branch-details.active { + display: block; + border-left: 5px solid var(--git-orange); + } + .gitflow-branch-details h5 { color: var(--git-dark); font-weight: bold; margin-bottom: 0.5rem;} + .gitflow-branch-details strong { color: var(--git-dark); } + .gitflow-branch-details p:last-child { margin-bottom: 0;} + + /* Footer Styling */ + .site-footer { + background-color: var(--git-dark); + color: #bdc3c7; /* Silver for footer text */ + padding: 3rem 1rem; + margin-top: 4rem; + font-size: 0.9rem; + } + .site-footer p { + margin-bottom: 0.75rem; + } + .site-footer a { + color: var(--git-orange); + text-decoration: none; + transition: color 0.2s ease; + } + .site-footer a:hover { + color: #fff; + text-decoration: underline; + } + .site-footer .bi { + margin-right: 0.4rem; + vertical-align: text-bottom; /* Better align icons */ + font-size: 1.1em; + } + .site-footer .container { + max-width: 960px; /* Constrain footer content width */ + } + + /* Responsive adjustments */ + @media (max-width: 991px) { /* Adjust when cards stack */ + .info-card { margin-bottom: 1.5rem; } /* Ensure consistent spacing when stacked */ + } + @media (max-width: 768px) { + .gitflow-branch { + writing-mode: horizontal-tb; + transform: none; + min-height: auto; + padding: 10px 14px; + margin-bottom: 6px; + width: 100%; + font-size: 0.95rem; + } + .gitflow-branch:hover, .gitflow-branch.active-branch { + transform: scale(1.03); + } + .gitflow-lanes { + flex-direction: column; + min-width: auto; + } + .gitflow-lane { + flex-basis: auto; + width: 100%; + margin-bottom: 12px; + } + } + @media (max-width: 576px) { + .page-header { padding: 2rem 1rem; } + .page-header h1 { font-size: 1.9rem; } + .page-header .lead { font-size: 1.05rem; } + .hub-link { padding: 0.7rem 1.4rem; font-size: 0.95rem; } + .hub-title-card h2 { font-size: 1.6rem; } + .hub-content-area { padding: 1.5rem 1rem; } + .info-card h5 { font-size: 1.05rem; } + .collapse-content { padding: 1rem; } + } + + </style> +</head> +<body> + <header class="page-header"> + <div class="container"> + <h1><i class="bi bi-git"></i> Interactive Git Cheatsheet</h1> + <p class="lead">Your essential guide to Git commands, core concepts, and popular workflows.</p> + </div> + </header> + + <div class="conceptual-hubs-container container"> + <nav class="hub-nexus"> + <h2>Navigate Git Concepts</h2> + <p>This cheatsheet provides quick access to fundamental and advanced Git operations. Select a hub to explore specific topics and commands.</p> + <div class="hub-link-container"> + <a href="#hub-essentials" class="hub-link"><i class="bi bi-stars"></i> Essentials & Setup</a> + <a href="#hub-core-operations" class="hub-link"><i class="bi bi-pencil-square"></i> Core Operations</a> + <a href="#hub-branching-merging" class="hub-link"><i class="bi bi-diagram-3"></i> Branching & Merging</a> + <a href="#hub-remotes-sync" class="hub-link"><i class="bi bi-cloud-sync"></i> Remotes & Sync</a> + <a href="#hub-advanced" class="hub-link"><i class="bi bi-tools"></i> Advanced & History</a> + </div> + </nav> + + <!-- Hub 1: Git Essentials & Setup --> + <section id="hub-essentials" class="conceptual-hub"> + <div class="card hub-title-card"> + <h2><i class="bi bi-stars"></i> Git Essentials & Setup</h2> + </div> + <div class="hub-content-area"> + <div class="row"> + <div class="col-md-6 col-lg-4"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-tools"></i> Initial Configuration</h5> + <p class="summary">Set your user identity for all local repositories. Typically done once per machine.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitConfig" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitConfig"> + <ul> + <li>Set user name: <code class="command">git config --global user.name "Your Name"</code></li> + <li>Set user email: <code class="command">git config --global user.email "[email protected]"</code></li> + <li>Set default branch name for new repos (recommended "main"): <code class="command">git config --global init.defaultBranch main</code></li> + <li>(Optional) Set your preferred text editor: <code class="command">git config --global core.editor "code --wait"</code> (Example for VS Code)</li> + <li>Check your configuration: <code class="command">git config --list</code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6 col-lg-4"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-archive-fill"></i> Getting a Repository</h5> + <p class="summary">Start a new project with Git or obtain a copy of an existing one.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitInitClone" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitInitClone"> + <h6>Initialize a new local repository:</h6> + <p>Navigate to your project directory, then run: <code class="command">git init</code></p> + <h6>Clone an existing repository:</h6> + <p><code class="command">git clone <repository_url></code></p> + <p>Example: <code class="command">git clone https://github.com/example/project.git</code></p> + <p>This creates a local copy named after the project.</p> + </div> + </div> + </div> + <div class="col-md-12 col-lg-4"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-layers-half"></i> The Three Main States</h5> + <p class="summary">Understand Git's core areas: Working Directory, Staging Area (Index), and the Repository itself.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThreeStates" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseThreeStates"> + <div class="three-states-diagram mb-3"> + <div class="state-box"><h6>Working Directory</h6><p>Your project files</p></div> + <div class="state-arrow"><i class="bi bi-arrow-right-short"></i></div> + <div class="state-box"><h6>Staging Area (Index)</h6><p>Changes for next commit</p></div> + <div class="state-arrow"><i class="bi bi-arrow-right-short"></i></div> + <div class="state-box"><h6>Repository (.git)</h6><p>Committed history</p></div> + </div> + <ul> + <li><strong>Working Directory:</strong> The files you actively modify in your project.</li> + <li><strong>Staging Area (Index):</strong> A "holding area" where you prepare (stage) changes before committing them. Use <code class="command">git add</code> to stage.</li> + <li><strong>Repository (.git directory):</strong> Where Git stores the complete history of your project (commits, branches, tags). Use <code class="command">git commit</code> to save staged changes here.</li> + </ul> + </div> + </div> + </div> + <div class="col-md-6 col-lg-12"> <!-- Full width for .gitignore as it's important --> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-eye-slash-fill"></i> Ignoring Files (.gitignore)</h5> + <p class="summary">Specify intentionally untracked files or directories that Git should ignore (e.g., build artifacts, log files, environment variables).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitIgnore" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitIgnore"> + <p>Create a file named <code>.gitignore</code> in your project's root directory.</p> + <p>Each line in <code>.gitignore</code> specifies a pattern:</p> + <ul> + <li>Blank lines or lines starting with <code>#</code> are treated as comments.</li> + <li>Standard glob patterns are used (e.g., <code>*.log</code>, <code>node_modules/</code>, <code>build/</code>).</li> + <li>A leading slash <code>/</code> matches files only in the root directory.</li> + <li>A trailing slash <code>/</code> specifies a directory.</li> + <li>Prefix with <code>!</code> to negate a pattern (un-ignore) if a parent folder is ignored.</li> + </ul> + <h6>Example <code>.gitignore</code>:</h6> + <pre class="bg-light p-2 small rounded"><code># Comments start with a hash +# Ignore compiled Python files +*.pyc +__pycache__/ + +# Ignore dependency directories +node_modules/ +vendor/ + +# Ignore sensitive files +.env +*.secret + +# Ignore OS-generated files +.DS_Store +Thumbs.db</code></pre> + <p>It's crucial to commit your <code>.gitignore</code> file to the repository so it's shared with collaborators.</p> + <p>For common templates, check <a href="https://github.com/github/gitignore" target="_blank" rel="noopener noreferrer" class="link-primary">GitHub's .gitignore collection</a>.</p> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Hub 2: Core Operations: Recording & Viewing Changes --> + <section id="hub-core-operations" class="conceptual-hub"> + <div class="card hub-title-card"> + <h2><i class="bi bi-pencil-square"></i> Core Operations: Recording & Viewing Changes</h2> + </div> + <div class="hub-content-area"> + <div class="row"> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-check2-all"></i> Staging & Committing</h5> + <p class="summary">The fundamental workflow: check status, stage changes, and commit them to history.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitAddCommit" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitAddCommit"> + <h6>Check Status:</h6> + <p><code class="command">git status</code> (shows current state of working directory and staging area)</p> + <h6>Staging Changes (Adding to Index):</h6> + <ul> + <li>Stage a specific file: <code class="command">git add <filename></code></li> + <li>Stage multiple files: <code class="command">git add <file1> <file2></code></li> + <li>Stage all changes in current directory and subdirectories: <code class="command">git add .</code></li> + <li>Stage all tracked files (new, modified, deleted) project-wide: <code class="command">git add -A</code></li> + <li>Interactively stage parts of files: <code class="command">git add -p</code> (Patch mode)</li> + </ul> + <h6>Committing Staged Changes:</h6> + <ul> + <li>Commit with a message: <code class="command">git commit -m "Your descriptive commit message"</code></li> + <li>Commit, opening editor for message: <code class="command">git commit</code></li> + <li>Stage all modified or deleted tracked files and commit: <code class="command">git commit -a -m "Message"</code> (Does NOT add new untracked files)</li> + <li>Modify the last commit (if not yet pushed): <code class="command">git commit --amend</code> (Opens editor for message, adds currently staged changes) <span class="important-note">Rewrites history!</span></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-eye-fill"></i> Viewing History & Diffs</h5> + <p class="summary">Inspect past commits and see differences between states.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitLogDiff" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitLogDiff"> + <h6>Viewing Commit History (Log):</h6> + <ul> + <li>Show full history: <code class="command">git log</code></li> + <li>Condensed one-line view: <code class="command">git log --oneline</code></li> + <li>With graph, decoration, and all branches: <code class="command">git log --graph --decorate --oneline --all</code></li> + <li>Limit number of commits: <code class="command">git log -n 5</code> (shows last 5)</li> + <li>Show changes (patches) for each commit: <code class="command">git log -p</code></li> + </ul> + <h6>Viewing Differences (Diff):</h6> + <ul> + <li>Changes in working directory not yet staged: <code class="command">git diff</code></li> + <li>Changes staged but not yet committed: <code class="command">git diff --staged</code> (or <code>--cached</code>)</li> + <li>Changes in working directory since last commit: <code class="command">git diff HEAD</code></li> + <li>Differences between two commits: <code class="command">git diff <commit1> <commit2></code></li> + <li>Differences between two branches: <code class="command">git diff <branch1>..<branch2></code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-file-earmark-x-fill"></i> Removing & Moving Files</h5> + <p class="summary">Manage files within Git's tracking system.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitRmMove" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitRmMove"> + <h6>Removing Files:</h6> + <ul> + <li>Remove from working directory & staging: <code class="command">git rm <filename></code></li> + <li>Remove from staging only (keep file in working directory): <code class="command">git rm --cached <filename></code></li> + </ul> + <h6>Moving or Renaming Files:</h6> + <p><code class="command">git mv <old-name> <new-name></code></p> + <p>Equivalent to manually renaming, then <code>git rm <old-name></code> and <code>git add <new-name></code>.</p> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Hub 3: Branching & Merging Strategies --> + <section id="hub-branching-merging" class="conceptual-hub"> + <div class="card hub-title-card"> + <h2><i class="bi bi-diagram-3"></i> Branching & Merging Strategies</h2> + </div> + <div class="hub-content-area"> + <div class="row"> + <div class="col-lg-7"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-diagram-2-fill"></i> Branch Management</h5> + <p class="summary">Isolate development work using branches. Create, list, switch, and delete them.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitBranch" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitBranch"> + <p>Branches are lightweight movable pointers to commits, allowing parallel lines of development.</p> + <ul> + <li>List local branches: <code class="command">git branch</code> (* indicates current branch)</li> + <li>Create a new branch (does not switch): <code class="command">git branch <branch-name></code></li> + <li>Switch to an existing branch: <code class="command">git switch <branch-name></code> (Modern Git) + <br><small>(Older: <code class="command">git checkout <branch-name></code>)</small> + </li> + <li>Create a new branch and switch to it: <code class="command">git switch -c <branch-name></code> (Modern Git) + <br><small>(Older: <code class="command">git checkout -b <branch-name></code>)</small> + </li> + <li>Delete a merged local branch: <code class="command">git branch -d <branch-name></code></li> + <li>Force delete an unmerged local branch: <code class="command">git branch -D <branch-name></code> <span class="important-note">Use with caution!</span></li> + <li>Rename current branch: <code class="command">git branch -m <new-name></code></li> + </ul> + </div> + </div> + <div class="info-card" id="card-branching-diagram-visual"> + <div class="card-body"> + <h5><i class="bi bi-git"></i> Simplified Branching Visual</h5> + <p class="summary">A basic illustration of creating and merging a feature branch.</p> + <div class="branching-diagram-simple"> + <div class="commit-node-simple main" id="s-main-c1" title="C1">M1</div> + <div class="branch-line-simple" id="s-line-main1"></div> + <div class="commit-node-simple main" id="s-main-c2" title="C2 (Branched from here)">M2</div> + <div class="branch-line-simple" id="s-line-fork"></div> + <div class="branch-line-simple" id="s-line-feat1"></div> + <div class="commit-node-simple feature" id="s-feat-c1" title="F1">F1</div> + <div class="branch-line-simple" id="s-line-merge-path1"></div> + <div class="commit-node-simple main" id="s-main-c3" title="C3 (Merge Commit)">M3</div> + <div class="branch-line-simple" id="s-line-main2"></div> + </div> + <small class="d-block mt-2 text-muted">M=Main branch commits, F=Feature branch commit.</small> + </div> + </div> + </div> + <div class="col-lg-5"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-bezier2"></i> Merging & Rebasing</h5> + <p class="summary">Combine work from different branches using merge (preserves history) or rebase (linearizes history).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitMergeRebase" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitMergeRebase"> + <h6>Merging:</h6> + <p>To merge <code>feature-branch</code> into your current branch (e.g., <code>main</code>):</p> + <ol> + <li>Switch to target: <code class="command">git switch main</code></li> + <li>Merge: <code class="command">git merge feature-branch</code></li> + </ol> + <p>May result in a "merge commit" if histories diverged.</p> + <h6>Resolving Merge Conflicts:</h6> + <p>If Git reports conflicts: + <ol> + <li>Open conflicted files (look for <code><<<<<<<</code>, <code>=======</code>, <code>>>>>>>></code>).</li> + <li>Edit files to resolve, then save.</li> + <li>Stage resolved files: <code class="command">git add <resolved-file></code></li> + <li>Commit the merge: <code class="command">git commit</code></li> + </ol> + Abort merge: <code class="command">git merge --abort</code> (before committing). + </p> + <hr> + <h6>Rebasing (Alternative to Merge):</h6> + <p>To rebase <code>feature</code> branch onto <code>main</code> (reapplies <code>feature</code> commits on top of <code>main</code>'s tip):</p> + <ol> + <li>Ensure <code>main</code> is up-to-date: <code class="command">git switch main</code>; <code class="command">git pull</code> (if remote)</li> + <li>Switch to feature branch: <code class="command">git switch feature</code></li> + <li>Rebase: <code class="command">git rebase main</code></li> + </ol> + <p class="important-note"><strong>Warning:</strong> Do NOT rebase commits that have already been pushed to a shared remote repository and are used by others. It rewrites history and can cause severe problems for collaborators.</p> + <p>Conflicts during rebase: Resolve, <code class="command">git add <file></code>, then <code class="command">git rebase --continue</code>. Abort: <code class="command">git rebase --abort</code>.</p> + </div> + </div> + </div> + </div> + <!-- Gitflow --> + <div class="info-card mt-3" id="card-gitflow"> + <div class="card-body"> + <h5 class="mb-3"><i class="bi bi-git"></i> Gitflow Workflow: A Common Branching Model</h5> + <p class="summary">Gitflow is a structured branching model designed for projects with scheduled releases. It defines specific roles for different branches. Click branch names below for details.</p> + <div class="gitflow-diagram"> + <div class="gitflow-lanes"> + <div class="gitflow-lane"><div class="gitflow-branch gitflow-hotfix" data-target="details-hotfix">Hotfix Branches</div></div> + <div class="gitflow-lane"><div class="gitflow-branch gitflow-main" data-target="details-main">Main (Master)</div></div> + <div class="gitflow-lane"><div class="gitflow-branch gitflow-release" data-target="details-release">Release Branches</div></div> + <div class="gitflow-lane"><div class="gitflow-branch gitflow-develop" data-target="details-develop">Develop Branch</div></div> + <div class="gitflow-lane"><div class="gitflow-branch gitflow-feature" data-target="details-feature">Feature Branches</div></div> + </div> + </div> + <div id="details-main" class="gitflow-branch-details"><h5 style="color: var(--branch-color-main);">Main (Master) Branch</h5><p><strong>Purpose:</strong> Stores the official release history. Code on <code>main</code> should always be stable and deployable. Each commit on <code>main</code> is a tagged release (e.g., v1.0, v1.0.1). <br><strong>Derives from:</strong> Initial commit. <br><strong>Merges into:</strong> Nothing (but receives merges from <code>release</code> and <code>hotfix</code> branches).</p></div> + <div id="details-develop" class="gitflow-branch-details"><h5 style="color: var(--branch-color-develop);">Develop Branch</h5><p><strong>Purpose:</strong> Serves as an integration branch for features. Contains the latest development changes for the next release. This branch can be unstable at times. <br><strong>Derives from:</strong> <code>main</code>. <br><strong>Merges into:</strong> Nothing directly (but <code>feature</code> branches merge into it, and <code>release</code> branches are created from it).</p></div> + <div id="details-feature" class="gitflow-branch-details"><h5 style="color: var(--branch-color-feature);">Feature Branches (e.g., <code>feature/user-auth</code>)</h5><p><strong>Purpose:</strong> Used to develop new features. Each feature gets its own branch to isolate work. <br><strong>Derives from:</strong> <code>develop</code>. <br><strong>Merges into:</strong> <code>develop</code> (once the feature is complete and reviewed). <br><strong>Naming:</strong> Typically <code>feature/*</code> or <code>feat/*</code>. Should not interact directly with <code>main</code>.</p></div> + <div id="details-release" class="gitflow-branch-details"><h5 style="color: var(--branch-color-release);">Release Branches (e.g., <code>release/v1.1.0</code>)</h5><p><strong>Purpose:</strong> Prepare for a new production release. Allows for final bug fixes, documentation generation, and other release-oriented tasks. No new major features are added here. <br><strong>Derives from:</strong> <code>develop</code> (when <code>develop</code> is deemed feature-complete for the release). <br><strong>Merges into:</strong> <code>main</code> (tagged with release version) AND back into <code>develop</code> (to ensure fixes are in future development).</p></div> + <div id="details-hotfix" class="gitflow-branch-details"><h5 style="color: var(--branch-color-hotfix);">Hotfix Branches (e.g., <code>hotfix/critical-login-bug</code>)</h5><p><strong>Purpose:</strong> Address urgent critical bugs in a production release quickly. Allows patching without disrupting ongoing development on <code>develop</code>. <br><strong>Derives from:</strong> <code>main</code> (from the specific tagged version that has the bug). <br><strong>Merges into:</strong> <code>main</code> (tagged with a new patch version) AND back into <code>develop</code> (to ensure the fix is also in subsequent development).</p></div> + <p class="mt-3 text-muted"><small>Gitflow is one of many branching strategies. Others include GitHub Flow (simpler, for continuous deployment) and GitLab Flow.</small></p> + </div> + </div> + </div> + </section> + + <!-- Hub 4: Remote Collaboration & Synchronization --> + <section id="hub-remotes-sync" class="conceptual-hub"> + <div class="card hub-title-card"> + <h2><i class="bi bi-cloud-sync"></i> Remote Collaboration & Synchronization</h2> + </div> + <div class="hub-content-area"> + <div class="row"> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-hdd-network-fill"></i> Managing Remotes</h5> + <p class="summary">Connect your local repository to remote ones (e.g., on GitHub, GitLab, Bitbucket).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitRemote" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitRemote"> + <ul> + <li>List remotes with URLs: <code class="command">git remote -v</code></li> + <li>Add a new remote: <code class="command">git remote add <name> <url></code> (Common name: <code>origin</code>)</li> + <li>Show information about a remote: <code class="command">git remote show <name></code></li> + <li>Change a remote's URL: <code class="command">git remote set-url <name> <new-url></code></li> + <li>Rename a remote: <code class="command">git remote rename <old-name> <new-name></code></li> + <li>Remove a remote: <code class="command">git remote remove <name></code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-cloud-arrow-down-fill"></i> Fetching & Pulling Changes</h5> + <p class="summary">Download changes from a remote repository to your local one.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitFetchPull" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitFetchPull"> + <h6>Fetch (Download, Does NOT Merge):</h6> + <p><code class="command">git fetch <remote-name></code> (e.g., <code>git fetch origin</code>)</p> + <p>Downloads commits, files, and refs from the remote into your local repository. Updates remote-tracking branches (e.g., <code>origin/main</code>). Does NOT automatically merge these changes into your local working branches.</p> + <p>After fetching, you can inspect changes (e.g., <code class="command">git log origin/main..main</code>) or merge manually (<code class="command">git merge origin/main</code>).</p> + <h6>Pull (Fetch + Merge):</h6> + <p><code class="command">git pull <remote-name> <branch-name></code> (e.g., <code>git pull origin main</code>)</p> + <p>Effectively runs <code class="command">git fetch</code> followed by <code class="command">git merge <remote-name>/<branch-name></code> into your current local branch. If your local branch tracks a remote branch, a simple <code class="command">git pull</code> often suffices.</p> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-cloud-upload-fill"></i> Pushing Changes</h5> + <p class="summary">Upload your local commits to a remote repository to share them.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitPush" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitPush"> + <p><code class="command">git push <remote-name> <branch-name></code> (e.g., <code>git push origin main</code>)</p> + <p>Transfers commits from your local branch to the specified branch on the remote.</p> + <h6>Setting an Upstream Branch:</h6> + <p>The first time you push a new local branch, you may need to set its upstream counterpart on the remote:</p> + <p><code class="command">git push -u <remote-name> <local-branch-name></code></p> + <p>This sets <code><remote-name>/<local-branch-name></code> as the upstream. Subsequent pushes from this local branch can use a simple <code class="command">git push</code>.</p> + <p class="important-note"><strong>Force Push:</strong> <code class="command">git push --force <remote> <branch></code> (or <code>-f</code>). Overwrites the remote branch. Can discard history and cause problems for collaborators. Use with extreme caution and only if you know what you're doing (e.g., on a personal feature branch you haven't shared).</p> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-diagram-3-fill"></i> Working with Remote Branches</h5> + <p class="summary">Understand and manage references to branches on your remotes.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRemoteBranch" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseRemoteBranch"> + <p>Remote-tracking branches are local read-only references to the state of branches on your remote repositories (e.g., <code>origin/main</code>, <code>origin/feature-x</code>). You don't work on them directly.</p> + <ul> + <li>List remote-tracking branches: <code class="command">git branch -r</code></li> + <li>List all branches (local and remote-tracking): <code class="command">git branch -a</code></li> + <li>Create a new local branch that tracks a remote branch: + <br><code class="command">git switch -c <local-branch> <remote>/<remote-branch></code> + <br>(e.g., <code class="command">git switch -c my-feature origin/feature-abc</code>) + <br>Often, if <code>feature-abc</code> only exists on one remote, <code class="command">git switch feature-abc</code> will automatically set up tracking. + </li> + <li>Delete a remote branch: <code class="command">git push <remote-name> --delete <branch-name></code> + <br>(e.g., <code class="command">git push origin --delete old-feature</code>) + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Hub 5: Advanced Tools & History Management --> + <section id="hub-advanced" class="conceptual-hub"> + <div class="card hub-title-card"> + <h2><i class="bi bi-tools"></i> Advanced Tools & History Management</h2> + </div> + <div class="hub-content-area"> + <div class="row"> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-tag-fill"></i> Tagging Commits</h5> + <p class="summary">Create permanent markers for specific commits, typically used for software releases (e.g., v1.0, v2.1.3).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitTag" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitTag"> + <ul> + <li>List all tags: <code class="command">git tag</code></li> + <li>Create a lightweight tag (just a pointer, no extra info): <code class="command">git tag <tag-name></code></li> + <li>Create an annotated tag (recommended for releases; stores extra metadata like tagger, date, message): <code class="command">git tag -a <tag-name> -m "Tag message for version X.Y.Z"</code></li> + <li>Tag an older commit specifically: <code class="command">git tag -a <tag-name> <commit-hash> -m "Message"</code></li> + <li>Push a single tag to remote: <code class="command">git push <remote-name> <tag-name></code> (e.g. <code class="command">git push origin v1.0</code>)</li> + <li>Push all local tags to remote: <code class="command">git push <remote-name> --tags</code></li> + <li>Delete a local tag: <code class="command">git tag -d <tag-name></code></li> + <li>Delete a remote tag: <code class="command">git push <remote-name> --delete <tag-name></code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-archive-fill"></i> Stashing & Cleaning</h5> + <p class="summary">Temporarily save uncommitted changes (stash) or remove untracked files from your working directory (clean).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitStashClean" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitStashClean"> + <h6>Stashing (Temporarily Saving Changes):</h6> + <p>Useful when you need to switch branches but have uncommitted work.</p> + <ul> + <li>Stash current uncommitted changes (tracked files): <code class="command">git stash</code> or <code class="command">git stash push -m "Optional message"</code></li> + <li>Stash including untracked files: <code class="command">git stash -u</code> (or <code>--include-untracked</code>)</li> + <li>List stashes: <code class="command">git stash list</code></li> + <li>Apply the most recent stash and remove it from stash list: <code class="command">git stash pop</code></li> + <li>Apply the most recent stash but keep it in stash list: <code class="command">git stash apply</code></li> + <li>Apply a specific stash: <code class="command">git stash apply stash@{N}</code> (N is stash index)</li> + <li>Drop the most recent stash: <code class="command">git stash drop</code></li> + <li>Clear all stashes: <code class="command">git stash clear</code> <span class="important-note">Irreversible!</span></li> + </ul> + <h6>Cleaning (Removing Untracked Files):</h6> + <p class="important-note">Warning: <code class="command">git clean</code> permanently deletes files from your working directory. Use with extreme caution.</p> + <ul> + <li>Dry run (see what would be deleted): <code class="command">git clean -n</code> (or <code>--dry-run</code>)</li> + <li>Remove untracked files: <code class="command">git clean -f</code> (<code>--force</code>)</li> + <li>Remove untracked directories as well: <code class="command">git clean -fd</code></li> + <li>Interactive cleaning: <code class="command">git clean -i</code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-arrow-repeat"></i> Resetting & Restoring</h5> + <p class="summary">Powerful commands to undo changes at different levels. Understand their impact before use.</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGitResetRestore" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseGitResetRestore"> + <h6><code>git reset</code> (Moves HEAD, affects Index/Working Dir based on mode):</h6> + <p>Primarily used to unstage changes or revert commits on a local branch before pushing.</p> + <ul> + <li><strong><code>git reset --soft <commit></code>:</strong> Moves HEAD to <code><commit></code>. Staging area and working directory are NOT changed. Commits after <code><commit></code> become staged changes. Useful for redoing a series of commits.</li> + <li><strong><code>git reset --mixed <commit></code> (Default mode):</strong> Moves HEAD to <code><commit></code>. Staging area is updated to match <code><commit></code>. Working directory is NOT changed. Changes are now unstaged. Example: <code class="command">git reset HEAD~1</code> (uncommits last commit, changes are unstaged).</li> + <li><strong><code>git reset --hard <commit></code>:</strong> Moves HEAD to <code><commit></code>. Staging area AND working directory are forcefully updated to match <code><commit></code>. + <span class="important-note">Warning: Discards ALL uncommitted changes in staging and working directory since <code><commit></code>. Potentially destructive and can lead to data loss if not used carefully.</span></li> + </ul> + <h6><code>git restore</code> (Restores files in Working Dir or Staging Area):</h6> + <p>A safer, more focused command for discarding changes.</p> + <ul> + <li>Discard changes in a working directory file (revert to last commit): <code class="command">git restore <filename></code></li> + <li>Unstage a file (remove from staging area, keep changes in working dir): <code class="command">git restore --staged <filename></code></li> + <li>Discard changes and unstage from a specific commit: <code class="command">git restore --source=<commit> --staged --worktree <filename></code></li> + </ul> + </div> + </div> + </div> + <div class="col-md-6"> + <div class="info-card"> + <div class="card-body"> + <h5><i class="bi bi-crosshair2"></i> Revision Selection (Referring to Commits)</h5> + <p class="summary">Various ways to specify particular commits in Git commands (log, diff, reset, etc.).</p> + <button class="btn btn-outline-primary btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRevisionSelection" aria-expanded="false">Details <i class="bi bi-chevron-down"></i></button> + </div> + <div class="collapse collapse-content" id="collapseRevisionSelection"> + <ul> + <li>Full SHA-1 hash (e.g., <code>1a410efbd13591db07496601ebc7a059dd55cfe9</code>)</li> + <li>Short SHA-1 hash (e.g., <code>1a410e</code> - usually first 7 chars are enough)</li> + <li>Branch names (e.g., <code>main</code>, <code>feature/login</code> - points to the tip of the branch)</li> + <li>Tag names (e.g., <code>v1.0.0</code> - points to the tagged commit)</li> + <li><code>HEAD</code>: Points to the currently checked-out commit (tip of current branch).</li> + <li><code>HEAD~1</code> or <code>HEAD^</code>: The first parent of <code>HEAD</code>.</li> + <li><code>HEAD~N</code>: The Nth grandparent of <code>HEAD</code> (following first parents).</li> + <li><code>HEAD^N</code>: The Nth parent of <code>HEAD</code> (useful for merge commits with multiple parents).</li> + <li><code><branch>@{yesterday}</code> or <code><branch>@{"2 hours ago"}</code>: Commit on a branch at a specific time.</li> + <li><code><branch>@{N}</code>: Nth prior position of the branch reference (uses the reflog).</li> + <li><code>:/<text></code>: Newest commit whose message contains <code><text></code>.</li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + </div> <!-- /conceptual-hubs-container --> + + <div id="copied-feedback" class="copied-feedback">Copied to clipboard!</div> + + <footer class="site-footer container-fluid text-center"> + <div class="container"> + <p class="mb-2">© <span id="currentYear"></span> David Veksler</p> + <div class="mb-2"> + <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2"> + <i class="bi bi-linkedin" aria-hidden="true"></i> LinkedIn + </a> + <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2"> + <i class="bi bi-collection" aria-hidden="true"></i> All Cheatsheets + </a> + </div> + <p class="small"> + For official Git documentation and further learning, visit <a href="https://git-scm.com/doc" target="_blank" rel="noopener noreferrer">git-scm.com/doc</a>. + </p> + </div> + </footer> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + <script> + document.addEventListener('DOMContentLoaded', () => { + // --- Chevron Toggle for Collapse Buttons --- + const collapseToggles = document.querySelectorAll('.details-toggle'); + collapseToggles.forEach(button => { + const targetId = button.getAttribute('data-bs-target'); + if (!targetId) return; + + const targetCollapse = document.querySelector(targetId); + const icon = button.querySelector('.bi'); + + if (targetCollapse && icon) { + const updateIcon = () => { + if (targetCollapse.classList.contains('show')) { + icon.classList.remove('bi-chevron-down'); + icon.classList.add('bi-chevron-up'); + button.setAttribute('aria-expanded', 'true'); + } else { + icon.classList.remove('bi-chevron-up'); + icon.classList.add('bi-chevron-down'); + button.setAttribute('aria-expanded', 'false'); + } + }; + updateIcon(); + targetCollapse.addEventListener('show.bs.collapse', updateIcon); + targetCollapse.addEventListener('hide.bs.collapse', updateIcon); + } + }); + + // --- Gitflow Diagram Interactivity --- + const gitflowBranches = document.querySelectorAll('.gitflow-branch'); + const allDetailsPanels = document.querySelectorAll('.gitflow-branch-details'); + + gitflowBranches.forEach(branch => { + branch.addEventListener('click', () => { + const targetDetailsId = branch.dataset.target; + const targetPanel = document.getElementById(targetDetailsId); + const isActive = targetPanel && targetPanel.classList.contains('active'); + + allDetailsPanels.forEach(panel => panel.classList.remove('active')); + gitflowBranches.forEach(b => b.classList.remove('active-branch')); + + if (targetPanel && !isActive) { + targetPanel.classList.add('active'); + branch.classList.add('active-branch'); + } + }); + }); + + // --- Smooth scroll for hub links --- + const hubLinks = document.querySelectorAll('.hub-link'); + const navbarHeight = 0; // Adjust if you have a fixed top navbar + hubLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + if (targetElement) { + const elementPosition = targetElement.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - navbarHeight; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // --- Click to Copy Commands --- + const commandElements = document.querySelectorAll('.command'); + const feedbackElement = document.getElementById('copied-feedback'); + let feedbackTimeout; + + commandElements.forEach(el => { + el.addEventListener('click', (e) => { + e.stopPropagation(); // Prevent parent collapse from toggling + const commandText = el.innerText; + navigator.clipboard.writeText(commandText).then(() => { + feedbackElement.classList.add('show'); + clearTimeout(feedbackTimeout); + feedbackTimeout = setTimeout(() => { + feedbackElement.classList.remove('show'); + }, 1800); // Slightly longer display + }).catch(err => { + console.error('Failed to copy: ', err); + alert("Could not copy text. Please select and copy manually."); + }); + }); + el.setAttribute('title', 'Click to copy command'); + }); + + // --- Update Footer Year --- + const currentYearEl = document.getElementById('currentYear'); + if (currentYearEl) { + currentYearEl.textContent = new Date().getFullYear(); + } + }); + </script> +</body> +</html> \ No newline at end of file