Make placeholders configurable

_layouts/code-of-conduct.html

@@ -0,0 +1,57 @@
+---
+layout: default
+---
+
+</div> <!-- .container -->
+
+<div id="configure" class="unconfigured">
+  <div class="container">
+  <div>
+    <p>Through our experiences at the <a href="http://todogroup.org">TODO Group</a>, we strongly believe that a code of conduct helps set the ground rules for participation in communities and helps build a culture of respect. We hope <a href="https://github.com/todogroup/opencodeofconduct">sharing this with you</a> will enable you to easily establish a code of conduct for your respective open source community.</p>
+
+    <ol>
+      <li>
+        <h2>Configure the Code of Conduct:</h2>
+        <form>
+          <ul>
+            <li>
+              <label>What is the name of your community?</label>
+              <div><input type="text" name="community" placeholder="TODO Group" required></div>
+            </li>
+
+            <li>
+              <label>Where should abuses be reported to?</label>
+              <div><input type="email" name="contact" placeholder="abuse@todogroup.org" required></div>
+            </li>
+          </ul>
+        </form>
+      </li>
+      <li id="apply" class="show-when-configured">
+        <h2>Apply it to your community:</h2>
+
+        <p>Copy this template into the <code>README</code> or <code>CONTRIBUTING</code> file of your project.</p>
+
+        <textarea id="snippet" disabled></textarea>
+
+        <div id="code"></div>
+      </li>
+    </ol>
+
+    <p>If this template doesn't fit your needs, feel free to <a href="https://github.com/todogroup/opencodeofconduct">adapt it to your community</a>.</p>
+  </div>
+
+  <script id="markdown-template" type="text/plain">
+This project adheres to the [Open Code of Conduct][code-of-conduct]. By participating, you are expected to uphold this code.
+[code-of-conduct]: [URL]
+  </script>
+
+  </div> <!-- .container -->
+</div>
+
+<div class="container">
+
+<div id="code-of-conduct">
+  {{ content }}
+</div>
+
+<script type="text/javascript" src="{{site.baseurl }}/js/configure.js"></script>

_layouts/default.html

@@ -50,7 +50,10 @@
   <article id='article' class='page-{{page.title|downcase}}'>
     <div class="container">
       <div class="page-header">
-        <h1>{{ site.title }}</h1>
+        <h1>
+          <a href="{{ site.url }}">{{ site.title }}</a>
+          {% if page.version %}<span class="version">{{page.version}}</span>{% endif %}
+        </h1>
         <h2>{{ site.description }}</h2>
       </div>
 

_sass/configure.scss

@@ -0,0 +1,91 @@
+#configure {
+  background-color: #333;
+  color: #ccc;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  padding: 1em 0;
+  margin: 2em 0;
+
+  .configured & {
+    display: none;
+  }
+
+  ul {
+    overflow: hidden;
+    margin-top: 0;
+  }
+
+  @media only screen and (min-width: 670px) {
+    ul li {
+      float: left;
+      width: 48%;
+
+      &:first-child {
+        margin-right: 4%;
+      }
+
+      input {
+        width: 100%;
+        max-width: none;
+      }
+    }
+  }
+
+  ol {
+    counter-reset: configure-counter;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+
+    & > li {
+      position: relative;
+      list-style: none;
+      padding-left: 48px;
+      margin: 2em 0;
+
+
+      h2 {
+        line-height: 36px;
+        margin-bottom: 0;
+        color: #fff;
+      }
+
+      &:before {
+        display: inline-block;
+        float: left;
+        position: absolute;
+        left: 0;
+        width: 36px;
+        line-height: 36px;
+        font-size: 24px;
+        font-weight: bold;
+        border-radius: 36px;
+
+        text-align: center;
+        color: rgba(0,0,0,0.25);
+        color: #fff;
+        background: #A1D33C;
+
+        // Create a custom counter
+        content: counter(configure-counter);
+        counter-increment: configure-counter;
+      }
+    }
+  }
+}
+
+#apply {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+
+  .configuring & {
+    opacity: 1;
+  }
+}
+
+#snippet {
+  width: 100%;
+  max-width: none;
+  font-size: 0.8em;
+  height: 8em;
+}

css/site.scss

@@ -2,14 +2,19 @@
 # Hey Jekyll, please transform this file.
 ---
 
+@import "configure";
+
 article.page- h1 {
   font-size: 4em;
-}
 
-p#intro {
-  margin-left: 0;
-  font-size: 0.8em;
-  color: #777;
-  margin-bottom: 3em;
-  font-style: italic;
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .version {
+    color: #333;
+    font-size: 18px;
+    font-weight: normal;
+  }
 }

index.md

@@ -1,12 +1,9 @@
 ---
-layout: default
+layout: code-of-conduct
+version: v1.0
 ---
 
-<p id="intro">Through our experiences at the <a href="http://todogroup.org">TODO Group</a>, we strongly believe that a code of conduct helps set the ground rules for participation in communities and helps build a culture of respect. We hope <a href="https://github.com/todogroup/opencodeofconduct">sharing this with you</a> will enable you to easily establish a code of conduct for your respective open source community. The following is a code of conduct template. To generate your own code of conduct, change the values of COMMUNITY, CONTACT from their original values as given here, and substitute your own.</p>
-
-## Open Code of Conduct v1.0
-
-This code of conduct outlines our expectations for participants within the **[COMMUNITY]**, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.
+This code of conduct outlines our expectations for participants within the **[COMMUNITY]** community, as well as steps to reporting unacceptable behavior. We are committed to providing a welcoming and inspiring community for all and expect our code of conduct to be honored. Anyone who violates this code of conduct may be banned from the community.
 
 Our open source community strives to:
 
@@ -46,4 +43,3 @@ include them as well. Your account of what occurred, and if you believe the inci
 After filing a report, a representative will contact you personally. If the person who is harassing you is part of the response team, they will recuse themselves from handling your incident. A representative will then review the incident, follow up with any additional questions, and make a decision as to how to respond. We will respect confidentiality requests for the purpose of protecting victims of abuse.
 
 Anyone asked to stop unacceptable behavior is expected to comply immediately. If an individual engages in unacceptable behavior, the representative may take any action they deem appropriate, up to and including a permanent ban from our community without warning.
-

js/configure.coffee

@@ -0,0 +1,95 @@
+---
+# Hey Jekyll, please transform this file.
+---
+
+class @Configure
+  # Variables that get encoded in the URL and substituted in the template
+  @variables: ["community", "contact"]
+
+  constructor: (@template, @element) ->
+    @form = @element.querySelector("form")
+    @snippet = @element.querySelector("#snippet")
+
+    # Select the snippet text on focus
+    @snippet.addEventListener "focus", -> @select()
+    # Prevent mouseup from unselecting the text
+    @snippet.addEventListener "mouseup", (e) -> e.preventDefault()
+
+    # Listen to form events to update the snippet
+    @form.addEventListener "submit", @submit
+    for input in @form.querySelectorAll("input")
+      input.addEventListener "keyup", @keypress
+
+    # If the URL has config variables, update the tempalate
+    if data = @decode(window.location.hash.substr(1))
+      @template.configure(data)
+
+      # Fill out configuration form with values so it can be edited
+      @form.elements.namedItem(key)?.value = value for key,value of data
+      document.body.classList.add("configured")
+
+  # Handle the keypress event with a throttle
+  keypress: =>
+    clearTimeout(@throttle) if @throttle
+    @throttle = setTimeout(@submit, 250)
+
+  # Handle the form submission event
+  submit: (event) =>
+    event?.preventDefault()
+
+    # Bail if the form is not valid
+    return unless @form.checkValidity()
+
+    @update @data()
+    document.body.classList.add("configuring")
+
+  # Return the form data as an object
+  data: ->
+    data = {}
+    for element in @form.elements
+      data[element.name] = element.value if element.value.length
+    data
+
+  # Update the snippet and template
+  update: (data) ->
+    @template.configure(data)
+    window.location.hash = @encode(data)
+
+    snippet = @element.querySelector("#markdown-template").innerText.trim()
+    snippet = snippet.replace("[URL]", window.location)
+    @snippet.value = snippet
+    @snippet.disabled = false
+
+  # Encode the configuration data
+  encode: (data) ->
+    (data[key] for key in @constructor.variables).join("/")
+
+  # Decode the configuration data
+  decode: (string) ->
+    return if string == ""
+    values = string.split("/")
+    data = {}
+    data[key] = values[index] for key,index in @constructor.variables
+    data
+
+class Template
+  constructor: (@element) ->
+
+  configure: (data) ->
+    # Make a backup copy so this can be run multiple times
+    @original ?= @element.cloneNode(true)
+
+    node = @original.cloneNode(true)
+
+    placeholders = {}
+    placeholders["[#{key.toUpperCase()}]"] = value for key, value of data
+
+    for element in node.querySelectorAll("strong")
+      for key, value of placeholders
+        element.textContent = value if element.textContent == key
+
+    @element.parentNode.replaceChild(node, @element)
+    @element = node
+
+template = new Template(element) if element = document.querySelector("#code-of-conduct")
+new Configure(template, element) if element = document.getElementById("configure")