From a9372a44b7249f5420cee82fd730627a5dc5f882 Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Tue, 19 Dec 2023 12:13:02 -0500
Subject: guides: built out publishing system for darktable guides

---
 app/posts/templates/posts/guide_base.html   |  27 ++--
 app/posts/templates/posts/guide_detail.html | 222 +++++++++-------------------
 2 files changed, 88 insertions(+), 161 deletions(-)

(limited to 'app/posts/templates')

diff --git a/app/posts/templates/posts/guide_base.html b/app/posts/templates/posts/guide_base.html
index 0f1f482..aef4cf0 100644
--- a/app/posts/templates/posts/guide_base.html
+++ b/app/posts/templates/posts/guide_base.html
@@ -5,19 +5,27 @@
 {% block pagetitle %}Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.{% endblock %}
 {% block metadescription %}Guides for fellow travelers: tools, tips, and tricks to make life on the road in an RV or Van easier and more enjoyable.{% endblock %}
 
-{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-    <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-    <li itemprop="title">guide</li>
-    </ul>
+{% block primary %}
     <main role="main" id="guide-archive" class="archive-list">
         <div class="archive-intro">
-            <h2 class="post-title">Roaming Guide</h2>
-            <h3 class="post-subtitle">Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.</h3>
-            <p>I don't want to tell you how to travel. Everyone is different. Besides, even after twenty some odd years of travel, I am still learning. </p>
+            <h2 class="post-title">Guides and How-Tos</h2>
+            <h3 class="post-subtitle">Advice, Tools, Tips, and Tricks for Life.</h3>
+            <p>I don't know how many of these I'll do, but I wanted to have a place to share some things I've learned, so I made this page. So far, just some thoughts on photography and how to use the Darktable image editor.</p>
+
+            {%comment%}<p>I don't want to tell you how to travel. Everyone is different. Besides, even after twenty some odd years of travel, I am still learning. </p>
                 <p>I've always been most inspired by wandering monks and nuns, those who walked or sailed with next to nothing and survived. Mostly. Today most of us are not that skilled or strong of will, but keeping that example in mind is helpful. The less stuff you travel with the better off you are. Up to a point. Having the right tools is important. The right tools make life easier and more fun.</p>
-            <p>I put this together to help you find the tools you need. These aren't casual reviews. These are things I have spent years seeking out, using, and refining. In the end what you need are not things, but strategies and tools that allow you to create solutions to problems. </p>
+                <p>I put this together to help you find the tools you need. These aren't casual reviews. These are things I have spent years seeking out, using, and refining. In the end what you need are not things, but strategies and tools that allow you to create solutions to problems. </p>{%endcomment%}
         </div>
-        <h1 class="archive-hed">Reviews</h1>
+        <ul class="archive-list">
+            <li class="h-entry hentry archive-list-card archive-list-card-sm" itemscope itemType="http://schema.org/Article">
+                <span class="date dt-published card-smcaps">{% now "F Y" %}</span>
+                <a href="/guide/photography/">
+                    <h2 class="card-hed">Photography</h2>
+                    <p class="p-summary card-lede">Thoughts on photography and how to edit images with Darktable</p>
+                </a>
+            </li>
+        </ul>
+        {% comment %}
          {% autopaginate object_list 30 %}
          <ul class="article-card-list article-card-list-circle">{% for object in object_list %}
              <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article">
@@ -37,5 +45,6 @@
             </h4>{% endif %}
         </li>
         {%endfor%}</ul>
+        {% endcomment %}
     </main>
 {%endblock%}
diff --git a/app/posts/templates/posts/guide_detail.html b/app/posts/templates/posts/guide_detail.html
index 998d6ce..ee1908e 100644
--- a/app/posts/templates/posts/guide_detail.html
+++ b/app/posts/templates/posts/guide_detail.html
@@ -10,178 +10,96 @@
     <link rel="stylesheet" href="/media/src/solarized.css" type="text/css" media="screen"/>
 {%endif %}
     <link rel="canonical" href="https://luxagraf.net{{object.get_absolute_url}}" />
-    <meta property="og:type" content="article" />
-    <meta property="og:title" content="{{object.title|safe}}" />
-    <meta property="og:url" content="https://luxagraf.net{{object.get_absolute_url}}" />
-    <meta property="og:description" content="{% if object.meta_description %}{{object.meta_description}}{%else%}{{object.subtitle}}{%endif%}" />
-    <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" />
-    <meta property="article:author" content="Scott Gilbertson" />
-    <meta property="og:site_name" content="Luxagraf" />
-    <meta property="og:image" content="{{self.get_featured_image}}" />
-    <meta property="og:locale" content="en_US" />
-    <meta name="twitter:card" content="summary_large_image"/>
-    <meta name="twitter:description" content="{% if object.meta_description %}{{object.meta_description}}{%else%}{{object.subtitle}}{%endif%}"/>
-    <meta name="twitter:title" content="{{object.title|safe}}"/>
-    <meta name="twitter:site" content="@luxagraf"/>
-    <meta name="twitter:domain" content="luxagraf"/>{% if object.featured_image %}
-    <meta name="twitter:image:src" content="{{object.featured_image.get_image_url}}"/>{%endif%}
-    <meta name="twitter:creator" content="@luxagraf"/>
 {%endblock%}
-							
-{%block bodyid %}{% if object.get_post_type_display == 'tools' %}class="src"{% endif %}{%endblock%}
-				
-{% block primary %}		
-    <main>
-    <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">Field-Tests</span></a> &rarr; </li>
-        <li itemprop="title">{{object.short_title|smartypants|safe}}</li>
-    </ul>
-    <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
-        <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>
+{% block breadcrumbs %}
+<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
+        <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="/" itemprop="name">Home</a>
+            <meta itemprop="position" content="1" />
         </span>
-        <meta itemprop="image" content="https://images.luxagraf.net/header.gif" /> <!--{{self.featured_image.url}}" />-->
+        <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="{% url 'guides:guide-base' %}" itemprop="name">Guides</a>
+            <meta itemprop="position" content="2" />
+        </span>
+        <span class="nav-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <span itemprop="name">{{topic}}</span>
+            <meta itemprop="position" content="3" />
+        </span>
+    </nav>
+{% endblock %}			
+    {% block primary %}<main>
+        <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
             <header id="header" class="post-header">
                 <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1>
-                <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>
-                <div class="post-linewrapper">
-                {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%}
-                {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
-                    <h3 class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</h3>
-                     &ndash;&nbsp;<a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>
+                {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%}
+                <div class="post-dateline">
+                {% if object.location %}<div class="p-location h-adr adr post-location">
+                    <span class="h-adr">{% if object.location.country_name == "United States" %}
+                        <span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%}
+                        <span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name|safe}}</a>{%endif%}
+                    </span>
+                     &ndash;&nbsp;<span id="mapbtn" data-clat="{{object.latitude}}" data-clon="{{object.longitude}}" data-type="point" data-latitude="{{object.latitude}}" data-longitude="{{object.longitude}}">Map</a>
                 </div>{%endif%}
-                <h3 class="post-location">Filed Under: <a href="/guides/">Guides</a>, {% for topic in object.topics.all %}<a href="/guides/topic/{{topic.slug}}">{{topic}}</a>{%endfor%}</h3>
-                <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Last Updated: {{object.last_updated|date:"F"}} <span>{{object.last_updated|date:"j, Y"}}</span></time>
+                <time class="dt-published published dt-updated post-date" 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">by <a class="p-author h-card" href="/about">Scott Gilbertson</a></span>
                 </div>
             </header>
-        <div id="article" class="e-content entry-content post-body post-guide" itemprop="articleBody">
-        {% if object.preamble %}<div class="afterward">
-            {{object.preamble_html|smartypants|safe}}
-        </div>{%endif%}
-            {{object.body_html|safe|smartypants}}
+            <div class="e-content entry-content post-body" itemprop="articleBody">
+                {{object.body_html|safe|smartypants}}
+            </div>
+        <div class="entry-footer">
+            <aside>
+                <h4>This is part of a series of posts on {{topic|lower}}, you can <a href="{% url 'guides:guides-by-topic' topic|lower %}">read the rest here</a>.</h4>
+            </aside>
         </div>
-        {% if object.afterword_html %}<div class="afterward">
-            <h4>Afterward</h4>
-            {{object.afterword_html|smartypants|safe}}
+        </article>
+        {% if object.related.all %}<div class="article-afterward related">
+        <div class="related-bottom">
+            <h6 class="hedtinycaps">You might also enjoy</h6>
+            <div class="archive-grid-quad">{% for object in related %}
+                <div class="archive-grid-card archive-grid-card-simple h-entry">
+                    <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                        <div class="card-image-tiny">
+                            {% if object.featured_image %}
+                                {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %}
+                            {%endif%}
+                        </div>
+                        <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4>
+                        <p class="p-author author hide" ><span class="byline-author">Scott Gilbertson</span></p>
+                        <span class="card-smcaps">
+                            {% if object.location %}<span class="p-location h-adr adr card-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                                {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%}
+                            </span>{%endif%}
+                            {% if object.location and object.model_name.model != 'page' %}&ndash;{%endif%}
+                            {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%}
+                        </span> 
+                    </a>
+            </div>
+        {% endfor %}</div>
+            </div>
         </div>{%endif%}
-        {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %}
-            <aside id="wildlife">
-                <h3>Fauna and Flora</h3>
-                {% regroup wildlife by ap.apclass.get_kind_display as wildlife_list %}
-                <ul>
-                {% for object_list in wildlife_list %}
-                <li class="grouper">{{object_list.grouper}}<ul>
-                {% for object in object_list.list %}
-                <li>{%if object.ap.body_markdown%}<a href="{% url 'sightings:detail' object.ap.slug %}">{{object}}</a>{%else%}{{object}}{%endif%} </li>
-                {% endfor %}</ul>
-                    {% endfor %}</ul>
+            <aside class="narrow join mailing-list--wrapper">
+                <h6 class="hedtinycaps">If you enjoyed this, you might like <em><a href="/range/">Range</a></em>, A photography (sometimes) newsletter</h6>
+                <iframe target='_parent' style="border:none !important; background:white; width:100% !important;" title="embedded form for subscribing the the Range newsletter" src="{% url 'lttr:subscribe' slug='range' %}"></iframe>
             </aside>
-            {% endif %}{%if object.field_notes.all %}
-            <aside {% if wildlife %}class="margin-left-none" {%endif%}id="field_notes">
-                <h3>Field Notes</h3>
-                <ul>{% for obj in object.field_notes.all %}
-                <li><a href="{% url 'fieldnotes:detail' year=obj.pub_date.year month=obj.pub_date|date:"m"  slug=obj.slug %}">{{obj}}</a></li>
-                {% endfor %}</ul>
-            </aside>{% endif %}
-            {%if object.books.all %}
-            <aside id="recommended-reading" {%if object.field_notes.all and wildlife %}class="rr-clear{%endif%}" >
-                <h3>Recommended Reading</h3>
-                <ul>{% for obj in object.books.all %}
-                    <li><a href="{% url 'books:detail' slug=obj.slug %}"><img src="{{obj.get_small_image_url}}" /></a></li>
-                {% endfor %}</ul>
-            </aside>{% endif %}
-        </div>{%endif%}
-        </article>
-
-        {% comment %}    <div class="mailing-list--wrapper">
-    <h5>If you enjoyed this, you should join the mailing&nbsp;list&hellip;</h5>
-        {% include 'mailing_list.html' %}
-    </div> {% endcomment %}
-    </main>
     {% if object.enable_comments %}
 {% get_comment_count for object as comment_count %}
 {%if comment_count > 0 %}
-<p class="comments--header">{{comment_count}} Comment{{ comment_count|pluralize }}</p>
+<div class="comment-wrapper">
+<p class="comments-header">{{comment_count}} Comment{{ comment_count|pluralize }}</p>
 {% render_comment_list for object %}
 {%endif%}
-<div class="comment--form--wrapper {%if comment_count > 0%}comment-form-border{%endif%}">
+<div class="comment-form-wrapper {%if comment_count > 0%}comment-form-border{%endif%}">
 {% render_comment_form for object %}
 </div>
 {% 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">
-document.addEventListener("DOMContentLoaded", function(event) { 
-    var leaflet = document.createElement('script');
-    leaflet.src = "/media/js/leaflet-master/leaflet-mod.js";
-    document.body.appendChild(leaflet);
-    var lightbox = document.createElement('script');
-    lightbox.src = "/media/js/lightbox.js";
-    document.body.appendChild(lightbox);
-    leaflet.onload = function(){
-        var detail = document.createElement('script');
-        detail.src = "/media/js/detail.min.js";
-        document.body.appendChild(detail);
-        {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
-        detail.onload = function(){
-            createMap();
-            var open = false;
-        }
-        {%endif%}{%endwith%}
-    }
-
-    lightbox.onload = function() {
-        var opts= {
-            //nextOnClick: false,
-            captions: true,
-            onload: function(){
-                var im = document.getElementById("jslghtbx-contentwrapper");
-                var link = im.appendChild(document.createElement('a'))
-                link.href = im.firstChild.src;
-                link.innerHTML= "open ";
-                link.target = "_blank";
-                link.setAttribute('class', 'p-link');
-                im.appendChild(link);
-            }
-        }; 
-        var lightbox = new Lightbox();
-        lightbox.load(opts);
-    }
-    {% 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://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
-        img.className += "gravatar";
-        c.insertBefore(img, c.childNodes[3]);
-    }
-{%endif%}
-{%endif%}
-{% if object.has_video %}
-var tester = document.getElementsByClassName("vidauto");
-var wrapper = document.getElementById('wrapper');
-var dist = 100;
-
-window.onscroll = function() {
-    for (var i=0; i<tester.length; i++) {
-        checkVisible(tester[i]) ? tester[i].play() : tester[i].pause();
-    }
-};
-
-function checkVisible(elm) {
-  var rect = elm.getBoundingClientRect();
-  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
-  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
-}
-{%endif%}
-
-});
-</script>
+<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+<script src="/media/js/detail.min.js"></script>
+{{ block.super }}
 {%endblock%}
-- 
cgit v1.2.3-70-g09d2