~sircmpwn/git-send-email.io

31692ee658d7203d87c46b501f1c3577bcd93f66 — Drew DeVault 4 years ago 
Initial commit
patch browse .tar.gz 
2 files changed, 633 insertions(+), 0 deletions(-)

A index.css
A index.html

A  => index.css +239 -0
@@ 1,239 @@
html, body {
	background: #5555D5;
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font: sans-serif;
}

.container {
	background: white;
	max-width: 840px;
	margin: 0 auto;
	min-height: 100%;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
}

.container > p {
	padding: 0 1rem;
}

footer {
	margin-top: 1rem;
	padding: 1rem;
	color: grey;
}

h1, h2, h3 {
	text-align: center;
	margin-top: 0;
}

h1 {
	padding-top: 1rem;
}

h2 small {
	display: block;
}

pre {
	padding: 0.5rem;
	background: #eee;
}

a {
	color: black;
}

a:hover {
	color: #3333F8;
}

.well {
	background: white;
	padding: 1rem;
}

.well ol {
	margin: 0;
	padding-left: 1rem;
}

.well ol pre {
	margin-bottom: 0;
}

.well ol li {
	margin-bottom: 0.5rem;
}

.wells .well {
	margin-bottom: 1rem;
}

.wells .well:last-child {
	margin-bottom: 0;
}

.magic {
	display: none;
}

.step {
	display: none;
	padding: 2rem 1rem;
	background: #eee;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	grid-template-rows: auto auto;
	grid-template-columns: auto 1fr auto;
	align-self: center;
}

.step > h2 {
	grid-row-start: 1;
	grid-column-start: 1;
	grid-column-end: 4;
}

.step > .prev {
	grid-row-start: 2;
	grid-column-start: 1;
}

.step > .content {
	grid-row-start: 2;
	grid-column-start: 2;
	padding: 0 1rem;
}

.step > .next {
	grid-row-start: 2;
	grid-column-start: 3;
}

.step > .prev::after {
	content: '<';
}

.step > .next::after {
	content: '>';
}

.step > label {
	align-self: center;
	width: 3rem;
	height: 3rem;
	background: #888888;
	border-radius: 1.5rem;
	cursor: pointer;
	text-align: center;
	line-height: 3;
	font-weight: bold;
	color: white;
}

.content {
	display: flex;
	flex-direction: column;
}

.content label {
	background: #d94444;
	color: white;
	padding: 0.25rem;
	cursor: pointer;
	border: 1px solid #b02828;
	align-self: flex-end;
	margin-top: 0.5rem;
}

.alert {
	background: #FFFFBB;
	color: black;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	border: 1px solid #777733;
}

.accordion {
	border: 1px solid black;
	border-radius: 5px;
}

.accordion > .item > label {
	font-size: 1.25rem;
	display: block;
	background: #aaaada;
	color: black;
	padding-left: 1rem;
	border: none;
	border-bottom: 2px solid #222;
	cursor: pointer;
	margin: 0;
}

.accordion > .item:last-child > label {
	border-bottom: none;
}

input[type="radio"]:last-child:checked ~ .accordion > .item:last-child > label {
	/* TODO: fixme */
	border-bottom: 2px solid #222;
}

.accordion > .item > .content {
	display: none;
	padding: 1rem 1rem;
	border-bottom: 2px solid #222;
	background: white;
}

.accordion > .item:last-child > .content {
	border-bottom: none;
}

.accordion > .item > .content p {
	margin: 0;
}

#step-1:checked ~ .step-1 { display: grid; }
#step-2:checked ~ .step-2 { display: grid; }
#step-3:checked ~ .step-3 { display: grid; }
#step-4:checked ~ .step-4 { display: grid; }
#step-5:checked ~ .step-5 { display: grid; }

#os-arch:checked ~ .os-arch > .content { display: flex; }
#os-arch:checked ~ .os-arch > label { background: #6666c4; color: white; }
#os-alpine:checked ~ .os-alpine > .content { display: flex; }
#os-alpine:checked ~ .os-alpine > label { background: #6666c4; color: white; }
#os-centos:checked ~ .os-centos > .content { display: flex; }
#os-centos:checked ~ .os-centos > label { background: #6666c4; color: white; }
#os-debian:checked ~ .os-debian > .content { display: flex; }
#os-debian:checked ~ .os-debian > label { background: #6666c4; color: white; }
#os-fedora:checked ~ .os-fedora > .content { display: flex; }
#os-fedora:checked ~ .os-fedora > label { background: #6666c4; color: white; }
#os-freebsd:checked ~ .os-freebsd > .content { display: flex; }
#os-freebsd:checked ~ .os-freebsd > label { background: #6666c4; color: white; }
#os-macos:checked ~ .os-macos > .content { display: flex; }
#os-macos:checked ~ .os-macos > label { background: #6666c4; color: white; }
#os-nixos:checked ~ .os-nixos > .content { display: flex; }
#os-nixos:checked ~ .os-nixos > label { background: #6666c4; color: white; }
#os-opensuse:checked ~ .os-opensuse > .content { display: flex; }
#os-opensuse:checked ~ .os-opensuse > label { background: #6666c4; color: white; }
#os-pkgsrc:checked ~ .os-pkgsrc > .content { display: flex; }
#os-pkgsrc:checked ~ .os-pkgsrc > label { background: #6666c4; color: white; }
#os-ubuntu:checked ~ .os-ubuntu > .content { display: flex; }
#os-ubuntu:checked ~ .os-ubuntu > label { background: #6666c4; color: white; }
#os-windows:checked ~ .os-windows > .content { display: flex; }
#os-windows:checked ~ .os-windows > label { background: #6666c4; color: white; }

#mailer-gmail:checked ~ .mailer-gmail > .content { display: flex; }
#mailer-gmail ~ .mailer-gmail > label { background: #6666c4; color: white; }
#mailer-protonmail:checked ~ .mailer-protonmail > .content { display: flex; }
#mailer-protonmail ~ .mailer-protonmail > label { background: #6666c4; color: white; }
#mailer-generic:checked ~ .mailer-generic > .content { display: flex; }
#mailer-generic ~ .mailer-generic > label { background: #6666c4; color: white; }


A  => index.html +394 -0
@@ 1,394 @@
<!doctype html>
<html>
  <head>
    <title>Learn to use email with git!</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
  </head>
  <body>
    <div class="container">
      <h1>email + git = &lt;3</h1>
      <p>
        Git ships with built-in tools for collaborating over email, and they're
        easy to set up. With this guide, you'll be contributing to projects
        like the Linux kernel, PostgreSQL, or even git itself in no time.
      </p>
      <input type="radio" class="magic" name="progress" id="step-1" checked />
      <input type="radio" class="magic" name="progress" id="step-2" />
      <input type="radio" class="magic" name="progress" id="step-3" />
      <input type="radio" class="magic" name="progress" id="step-4" />
      <input type="radio" class="magic" name="progress" id="step-5" />
      <div class="step step-1">
        <h2>
          <small>Step one</small> Installation
        </h2>
        <label class="prev" style="visibility: hidden"></label>
        <div class="content">
          <p>
            Let's start by installing the appropriate packages for your
            operating system.
          </p>
          <div class="accordion">
            <input type="radio" class="magic" name="os" id="os-arch" checked />
            <input type="radio" class="magic" name="os" id="os-alpine" />
            <input type="radio" class="magic" name="os" id="os-centos" />
            <input type="radio" class="magic" name="os" id="os-debian" />
            <input type="radio" class="magic" name="os" id="os-fedora" />
            <input type="radio" class="magic" name="os" id="os-freebsd" />
            <input type="radio" class="magic" name="os" id="os-macos" />
            <input type="radio" class="magic" name="os" id="os-nixos" />
            <input type="radio" class="magic" name="os" id="os-opensuse" />
            <input type="radio" class="magic" name="os" id="os-pkgsrc" />
            <input type="radio" class="magic" name="os" id="os-ubuntu" />
            <input type="radio" class="magic" name="os" id="os-windows" />
            <div class="item os-arch">
              <label for="os-arch">Arch Linux</label>
              <div class="content">
                <p>
                  The <code>git</code> package comes with git tools
                  pre-installed. Run this to install it:
                </p>
                <pre>sudo pacman -Syu git</pre>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-alpine">
              <label for="os-alpine">Alpine Linux</label>
              <div class="content">
                <p>
                  The <code>git-email</code> package includes git's
                  email-related tools. Run this to install it:
                </p>
                <pre>sudo apk add git git-email</pre>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-centos">
              <label for="os-centos">CentOS</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-debian">
              <label for="os-debian">Debian</label>
              <div class="content">
                <p>
                  The <code>git-email</code> package includes git's
                  email-related tools. Run this to install it:
                </p>
                <pre>sudo apt install git git-email</pre>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-fedora">
              <label for="os-fedora">Fedora</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-freebsd">
              <label for="os-freebsd">FreeBSD</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-macos">
              <label for="os-macos">MacOS</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-nixos">
              <label for="os-nixos">NixOS</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-opensuse">
              <label for="os-opensuse">openSUSE</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-pkgsrc">
              <label for="os-pkgsrc">pkgsrc</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-ubuntu">
              <label for="os-ubuntu">Ubuntu</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
            <div class="item os-windows">
              <label for="os-windows">Windows</label>
              <div class="content">
                <p>TODO: Install details</p>
                <label for="step-2">Next</label>
              </div>
            </div>
          </div>
        </div>
        <label class="next" for="step-2"></label>
      </div>
      <div class="step step-2">
        <h2>
          <small>Step two</small> Configuration
        </h2>
        <label class="prev" for="step-1"></label>
        <div class="content">
          <p>
            Be sure to read the instructions specific to your email provider,
            if appropriate.
          </p>
          <div class="accordion">
            <input type="radio" class="magic" name="mailer" id="mailer-gmail" />
            <input type="radio" class="magic" name="mailer" id="mailer-protonmail" />
            <input type="radio" class="magic" name="mailer" id="mailer-generic" checked />
            <div class="item mailer-gmail">
              <label for="mailer-gmail">Gmail</label>
              <div class="content">
                <p>
                  Yadda yadda gmail instructions here
                </p>
                <label for="step-3">Next</label>
              </div>
            </div>
            <div class="item mailer-protonmail">
              <label for="mailer-protonmail">Protonmail</label>
              <div class="content">
                <p>
                  Yadda yadda protonmail instructions here
                </p>
                <label for="step-3">Next</label>
              </div>
            </div>
            <div class="item mailer-generic">
              <label for="mailer-generic">Generic instructions</label>
              <div class="content">
                <p>
                  Your email provider should have instructions somewhere for
                  <strong>SMTP access</strong>. Look these details up, and then
                  add this to your <code>~/.git/config</code> file:
                </p>
                <pre>[sendemail]
	smtpserver = mail.example.org
	smtpuser = you@example.org
	smtpencryption = tls
	smtpserverport = 587</pre>
                <p>
                  Be sure to fill in the appropriate values for your email
                  provider. You will probably only have to fill in
                  <code>smtpserver</code> and <code>smtpuser</code>. Also run
                  <code>git config --global user.email "you@example.org"</code>
                  and
                  <code>git config --global user.name "Your Name"</code> if you
                  haven't yet.
                </p>
                <label for="step-3">Next</label>
              </div>
            </div>
          </div>
        </div>
        <label class="next" for="step-3"></label>
      </div>
      <div class="step step-3">
        <h2>
          <small>Step three</small> Give it a shot!
        </h2>
        <label class="prev" for="step-2"></label>
        <div class="content">
          <p>
            It's time to take it for a spin - we're going to send a patch.
            Ready?
          </p>
          <div class="content well">
            <ol>
              <li>
                <strong>Clone the upstream repository</strong>. No need to make a
                fork! We have prepared a repository for you to test with:
                <pre>git clone <a
                  href="https://git.sr.ht/~sircmpwn/email-test-drive"
                >https://git.sr.ht/~sircmpwn/email-test-drive</a>
<!--              -->cd email-test-drive</pre>
              </li>
              <li>
                <strong>Make your changes</strong>. Let's add a file with your
                progress so far:
                <pre>echo "I'm about to try git send-email!" &gt;your-name</pre>
                <div style="margin: 0.5rem 0">
                  Be sure to change <code>your-name</code> to your own!
                </div>
              </li>
              <li>
                <strong>Commit your changes</strong>. A simple commit will do.
                <pre>git add your-name
<!--              -->git commit -m "Demonstrate that I can use git send-email!"</pre>
              </li>
              <li>
                <strong>Send the patch</strong>! If you check out the
                <code>README.md</code> file, you'll note that patches should be
                sent to <a href="mailto:~sircmpwn/email-test-drive@lists.sr.ht">
                  ~sircmpwn/email-test-drive@lists.sr.ht</a>.
                <pre>git send-email --to="~sircmpwn/email-test-drive@lists.sr.ht" HEAD^</pre>
                <div style="margin: 0.5rem 0">
                  Follow the prompts and you've done it! You should see your
                  email appear in the
                  <a href="https://lists.sr.ht/~sircmpwn/email-test-drive">
                    mailing list archives
                  </a> momentarily.
                </div>
              </li>
              <li>
                <strong>Check your inbox</strong>... someone has some feedback
                on your patch!
              </li>
            </ol>
            <label for="step-4">Next</label>
          </div>
        </div>
        <label class="next" for="step-4"></label>
      </div>
      <div class="step step-4">
        <h2>
          <small>Step four</small> Dealing with feedback
        </h2>
        <label class="prev" for="step-3"></label>
				<div class="content">
					<div class="content well">
            <p style="margin-bottom: 0.5rem">
              No one ever gets it right on the first try. Don't worry, it's all
              part of the process! You may receive some feedback on your patch
              from the maintainers of the software. This feedback will arrive in
              the form of a reply to your email. If you have any questions,
              just reply back - and remember to "reply all"! In the meantime,
              let's fix the patch.
            </p>
            <div class="alert">
              <strong>Note</strong>:
              In this tutorial, the feedback was generated by a bot, but feel
              free to reply to get the hang of it. You need to make sure your
              email client is configured to write emails in <strong>plain
              text</strong> before you do.
            </div>
            <ol>
              <li>
                <strong>Make the changes</strong>. Update the files to match the
                changes requested by the maintainers. We'll leave this to you.
              </li>
              <li>
                <strong>Amend your commit</strong>. Git is designed to allow
                you to edit your commit history. The maintainers reviewing your
                work don't want to merge a patch which is anything but perfect,
                even if it's followed up by a fixup patch. So you'll have to
                <strong>amend</strong> your previous commit:
                <pre>git commit -a --amend</pre>
                <div class="alert" style="margin-top: 1rem">
                  <strong>Note</strong>: First time amending a commit? Amending and
                  rebasing commits is something you'll have to get used to in this
                  workflow. Check out <a href="#">sr.ht's guide to rebasing</a>
                  if you need help!
                </div>
              </li>
              <li>
                <strong>Set the default "to" address</strong>. Let's make this
                easier on ourselves and set the default email address for this
                repository.
                <pre>git config sendemail.to "~sircmpwn/email-test-drive@lists.sr.ht"</pre>
              </li>
              <li>
                <strong>Send a new patch</strong>! This time we'll use
                <code>-v2</code> to indicate that this the second version of
                this patch. If we do this again, we'll use <code>-v3</code>.
                <pre>git send-email --annotate -v2 HEAD^</pre>
                <p>
                  Note that we also specified the "--annotate" flag. This is
                  going to open the email in our editor before sending it out,
                  so we can make any changes. We're going to add some "timely
                  commentary". Look for the "---" and add a short summary of the
                  differences since the first patch on the next line. It should
                  look something like this:
                </p>
                <pre>Subject: [PATCHv2] Demonstrate that I can use git send-email!

<!--              -->---
<!--              -->This fixes the issues raised about the first patch.</pre>
								<p>
									Follow the prompts again and that's it - you're done!
									Congratulations! If you want some more tips on using git
									send-email, check out the next page.
								</p>
              </li>
            </ol>
						<label for="step-5">Next</label>
					</div>
        </div>
        <label class="next" for="step-5"></label>
      </div>
      <div class="step step-5">
        <!--
          TODO: Move step 5 onto a separate page so each tip is linkable
        -->
        <h2>
          Tips &amp; tricks
        </h2>
        <label class="prev" for="step-4"></label>
        <div class="content wells">
          <p>
            Miscellaneous tips and tricks which may serve you well as you use
            git send-email.
          </p>
          <div class="well">
            <h3>Sending several patches at once</h3>
            <p>Use this to send the last 3 patches:</p>
            <pre>git send-email HEAD~3</pre>
            <p>Or all patches since a commit:</p>
            <pre>git send-email 209210d30780ec64995594b77fde3d718b655542</pre>
            <p>Or just the second-to-last patch:</p>
            <pre>git send-email -1 HEAD^^</pre>
          </div>
          <div class="well">
            <h3>Specifying a sub-project</h3>
            <p>
              Some projects use a single mailing list for several git
              repositories. Try this to clarify that you're working on the
              "foobar" project:
            </p>
            <pre>git config format.subjectPrefix "PATCH foobar"</pre>
          </div>
          <div class="well">
            <h3>Using --annotate every time</h3>
            <pre>git config --global sendemail.annotate yes</pre>
          </div>
          <div class="well">
            <h3>"Signing off" on your commits</h3>
            <p>
              Some projects, such as the Linux kernel, will ask you to "sign
              off" on your commits. To do this, add <code>--signoff</code> (or
              <code>-s</code>) to <code>git send-email</code>. To set it as the
              default for that git repository:
            </p>
            <pre>git config format.signOff yes</pre>
          </div>
        </div>
        <label class="next" style="visibility: hidden"></label>
      </div>
      <footer>
        This tutorial brought to you courtesy of
        <a href="https://sr.ht">sr.ht</a>, the hacker's forge. 100% open source
        Git &amp; Mercurial hosting, continuous integration, mailing lists, and
        <strong>no Javascript</strong>!
        <a href="https://meta.sr.ht/register">Try it today</a>!
      </footer>
    </div>
  </body>
</html>