1 files changed, 85 insertions, 0 deletions
diff --git a/design/templates/tutorials/tutorial_detail.html b/design/templates/tutorials/tutorial_detail.html
new file mode 100644
index 0000000..df2f434
--- /dev/null
+++ b/design/templates/tutorials/tutorial_detail.html
@@ -0,0 +1,85 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% load comments %}
+{% block pagetitle %}{{object.title|striptags}} - by Scott Gilbertson{% endblock %}
+{% block metadescription %}{% autoescape on %}{{object.meta_description|striptags|safe}}{% endautoescape %}{% endblock %}
+{%block extrahead%}
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="Libregraf"/>
+    <meta property="og:title" content="{{object.title|safe}}" />
+    <meta property="og:url" content="https://libregraf.net{{object.get_absolute_url}}" />
+    <meta property="og:image" content="">
+    <meta property="og:description" content="{{object.meta_description}}" />
+    <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" />
+    <meta property="article:author" content="Scott Gilbertson" />
+    <meta property="og:site_name" content="Libregraf" />
+    <meta property="og:locale" content="en_US" />
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="twitter:site" content="@libregraf"/>
+    <meta name="twitter:creator" content="@libregraf"/>
+
+<link rel="stylesheet" href="/media/solarized.css" type="text/css" media="screen"/>
+{%endblock%}
+
+{% block bodyid %}class="src detail single"{% endblock %}
+
+{% block content %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
+        <li><a href="/" title="libregraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
+        <li><a href="/tutorials/">Tutorials</a></li>
+    </ul>
+    <main class="content-narrow">
+    <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
+            <header id="header" class="post-header">
+                <h1 class="p-name hed-primary" itemprop="headline">{{object.title|smartypants|safe}}</h1>
+                {% if object.sub_title %}<h2 class="p-summary hed-secondary">{{object.sub_title|smartypants|safe}}</h2>{%endif%}
+                <div class="post-linewrapper">
+                    <h5 class="hed-tertiary">Filed Under: {% for tag in object.tags.all %}<a rel="tag" class="p-category" href="/essays/tags/{{tag.slug}}" title="View all essays about {{tag}}">{{tag}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</h5>
+                    <time class="dt-published published dt-updated hed-tertiary" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                    <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
+                </div>
+            </header>
+        <div id="article" class="e-content entry-content" itemprop="articleBody">
+            {{object.body_html|safe|smartypants}}
+        </div>
+        </article>
+   {% if object.enable_comments %}
+   <hr />
+   <div class="comment-wrapper">
+{% get_comment_count for object as comment_count %}
+{%if comment_count > 0 %}
+<p class="comments-header">{{comment_count}} Comment{{ comment_count|pluralize }}</p>
+{% render_comment_list for object %}
+{%endif%}
+{% render_comment_form for object %}
+{% else %}
+<p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p>
+{%endif%}
+   </div>
+    </main>
+{% endblock %}
+{% block js %}
+<script type="text/javascript">
+window.onload = function() {
+    {% if object.enable_comments %}
+{% get_comment_count for object as comment_count %}
+{%if comment_count > 0 %}
+    //delay loading of gravatar images using noscript data-hash attribute
+    dataattr = document.getElementsByClassName("datahashloader");
+    for(var i=0; i<dataattr.length; i++) {
+        var c = dataattr[i].parentNode;
+        var img = document.createElement("img");
+        img.src = 'https://libregraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
+        img.className += "gravatar";
+        c.insertBefore(img, c.childNodes[3]);
+    }
+{%endif%}
+{%endif%}
+    {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
+    createMap();
+    var open = false;
+    {%endif%}{%endwith%}
+}
+</script>
+{% if object.has_code %}
+{%endif %}
+{% endblock %}