make guide sections a macro

app/templates/common/macros.html

@@ -287,3 +287,21 @@
   </div>
 </div>
 {% endmacro %}
+
+{% macro guide_sections() %}
+  <div class="guide-container">
+  	<div class="guide-topics">
+      {% set sections %}{{ caller() }}{% endset %}
+      {{ sections | safe }}
+  	</div>
+  	<div class="guide-toc">
+    <h2>Table of contents</h2>
+      {% set toc = sections | extract_h2 %}
+      <ul>
+        {% for heading in toc %}
+          <li><a href='#{{ heading.id }}'>{{ heading.text }}</a></li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+{% endmacro %}

app/templates/guides/babycode.html

@@ -1,12 +1,12 @@
 {% extends 'base.html' %}
+{% from 'common/macros.html' import guide_sections with context %}
 {% block title %}babycode guide{% endblock %}
 {% block content %}
 <div class=darkbg>
   <h1 class="thread-title">Babycode guide</h1>
 </div>
-<div class="guide-container">
+
-  <div class="guide-topics">
+{% call() guide_sections() %}
-    {% set sections %}
   <section class="guide-section">
     <h2 id="what-is-babycode">What is babycode?</h2>
     <p>You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.</p>
@@ -186,18 +186,5 @@
       <li>The <code class="inline-code">[@]</code> tag allows you to use the @ symbol without it being turned into a mention.</li>
     </ul>
   </section>
-    {% endset %}
+{% endcall %}
-    {{ sections | safe }}
-  </div>
-  <div class="guide-toc">
-    <h2>Table of contents</h2>
-    {% set toc = sections | extract_h2 %}
-    <ul>
-      {% for heading in toc %}
-        <li><a href='#{{ heading.id }}'>{{ heading.text }}</a></li>
-      {% endfor %}
-    </ul>
-  </div>
-</div>
-
 {% endblock %}