2021-04-20 05:10:31 +00:00
|
|
|
{% extends "whispermaphone/page.html" %}
|
|
|
|
{% load static %}
|
2020-09-06 16:00:44 +00:00
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block title %}Thoughts{% endblock %}
|
2020-09-08 16:01:03 +00:00
|
|
|
|
2021-06-25 06:32:05 +00:00
|
|
|
{% block navigation %}
|
2021-09-11 19:18:34 +00:00
|
|
|
<h1 class="text" aria-current="page">Thoughts</h1>
|
2021-06-25 06:32:05 +00:00
|
|
|
<a href="/about" class="text">About</a>{% if authenticated %}
|
|
|
|
<a href="/post" class="text" style="border: none">Post</a>
|
|
|
|
{% endif %}
|
|
|
|
{% endblock %}
|
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block head %}
|
|
|
|
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">
|
|
|
|
{% endblock %}
|
2020-09-12 17:04:34 +00:00
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block main %}
|
2020-11-24 18:39:36 +00:00
|
|
|
{% load tz %}
|
|
|
|
|
2020-09-06 04:06:16 +00:00
|
|
|
{% for thought in thoughts %}
|
2020-11-22 00:05:31 +00:00
|
|
|
<div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{thought.uuid}}">
|
2020-10-01 02:12:52 +00:00
|
|
|
<div class="main">
|
|
|
|
<span class="main-text text">{{thought.text}}</span>
|
|
|
|
</div>
|
2021-09-11 19:18:34 +00:00
|
|
|
|
2021-09-01 04:31:33 +00:00
|
|
|
{% with file_type=thought.get_media_type %}
|
|
|
|
{% if file_type or thought.extended_text.strip %}
|
|
|
|
<div class="extended">
|
|
|
|
{% if thought.extended_text.strip %}
|
|
|
|
<span class="extended-text text">{{thought.extended_text}}</span>
|
|
|
|
{% endif %}
|
|
|
|
{% if file_type == "png" or file_type == "jpeg" %}
|
|
|
|
<img src="{{ thought.media.url }}" class="extended-media" alt="{{ thought.media_alt }}">
|
|
|
|
{% elif file_type == "m4a" or file_type == "mp3" or file_type == "aac" %}
|
|
|
|
<audio controls src="{{ thought.media.url }}" class="extended-media"></audio>
|
|
|
|
{% elif file_type == "mov" or file_type == "mp4" %}
|
|
|
|
<video src="{{ thought.media.url }}" class="extended-media"></video>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
{% endwith %}
|
2020-10-01 02:12:52 +00:00
|
|
|
<div class="thought-end">
|
2020-11-24 18:39:36 +00:00
|
|
|
<span class="timestamp">
|
2021-10-12 13:11:24 +00:00
|
|
|
{% timezone thought.get_timezone %}
|
2020-11-24 18:39:36 +00:00
|
|
|
{{ thought.posted|time:"g:i a" }}
|
|
|
|
{{ thought.posted|date:"M d, Y" }},
|
|
|
|
|
2021-10-12 13:11:24 +00:00
|
|
|
UTC{{ thought.get_offset_hours }}
|
|
|
|
{{ thought.get_season }}
|
2020-11-24 18:39:36 +00:00
|
|
|
{% endtimezone %}
|
|
|
|
</span>
|
2020-10-01 02:12:52 +00:00
|
|
|
</div>
|
2020-11-12 08:06:41 +00:00
|
|
|
<hr>
|
2020-09-06 04:06:16 +00:00
|
|
|
</div>
|
2020-10-01 02:12:52 +00:00
|
|
|
{% endfor %}
|
2021-04-20 05:10:31 +00:00
|
|
|
{% endblock %}
|
2020-11-24 18:39:36 +00:00
|
|
|
|
2021-10-12 13:30:25 +00:00
|
|
|
{% block footer %}
|
2021-10-12 16:05:41 +00:00
|
|
|
<nav id="page-nav" class="history-nav" aria-label="History Navigation">
|
|
|
|
<ul>
|
2021-10-12 13:30:25 +00:00
|
|
|
{% for page in pages %}
|
2021-10-12 16:05:41 +00:00
|
|
|
{% if page.slug == current_page %}
|
|
|
|
<li><span class="current-page">{{ page.formatted_name }}</span></li>
|
|
|
|
{% else %}
|
|
|
|
<li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
|
|
|
|
{% endif %}
|
2021-10-12 13:30:25 +00:00
|
|
|
{% endfor %}
|
2021-10-12 16:05:41 +00:00
|
|
|
</ul>
|
2021-10-12 13:30:25 +00:00
|
|
|
</nav>
|
|
|
|
{% endblock %}
|
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block scripts %}
|
2020-09-06 16:00:44 +00:00
|
|
|
<script>
|
|
|
|
const els = document.querySelectorAll(".thought");
|
2020-11-13 17:11:40 +00:00
|
|
|
|
2020-09-06 16:00:44 +00:00
|
|
|
for (let el of els) {
|
2021-04-28 02:47:33 +00:00
|
|
|
const extended = el.querySelector(".extended");
|
2020-12-18 03:31:27 +00:00
|
|
|
|
2021-09-02 00:06:15 +00:00
|
|
|
if (extended) {
|
|
|
|
//Hide extended text
|
|
|
|
extended.classList.add("hidden");
|
|
|
|
//Add button to show extended text
|
|
|
|
if (extended.childNodes.length) {
|
|
|
|
const main = el.querySelector(".main");
|
|
|
|
const showMoreButton = document.createElement("button");
|
|
|
|
showMoreButton.appendChild(document.createTextNode("Show More"));
|
|
|
|
showMoreButton.classList.add("show-more");
|
|
|
|
showMoreButton.addEventListener("click", evt => {
|
|
|
|
// Remove ourself
|
|
|
|
showMoreButton.parentNode.removeChild(showMoreButton);
|
|
|
|
// Show the extended text
|
|
|
|
extended.classList.remove("hidden");
|
|
|
|
})
|
|
|
|
main.appendChild(showMoreButton);
|
|
|
|
}
|
2020-09-06 16:00:44 +00:00
|
|
|
}
|
|
|
|
}
|
2020-11-22 00:05:31 +00:00
|
|
|
|
|
|
|
const highlighted = document.querySelector(".highlighted");
|
|
|
|
if (highlighted) {
|
|
|
|
highlighted.scrollIntoView();
|
2020-11-30 04:19:23 +00:00
|
|
|
const showMoreButton = highlighted.querySelector(".show-more");
|
2020-11-30 04:17:35 +00:00
|
|
|
if (showMoreButton) {
|
|
|
|
showMoreButton.click();
|
|
|
|
}
|
2020-11-22 00:05:31 +00:00
|
|
|
}
|
2020-09-06 16:00:44 +00:00
|
|
|
</script>
|
2020-11-13 17:11:40 +00:00
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
|
|
|
|
|
|
|
|
<!--Remarkable UMD bundle, includes linkify and Remarkable in the global remarkable-->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
// Remarkable ES6 module
|
|
|
|
// import { Remarkable } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/index.browser.min.js";
|
|
|
|
// import { linkify } from "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/esm/linkify.js";
|
|
|
|
|
2021-03-15 20:15:36 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
2020-11-13 17:11:40 +00:00
|
|
|
const md = new remarkable.Remarkable({
|
2021-03-15 20:15:36 +00:00
|
|
|
html: false, breaks: true, typographer: true,
|
2020-11-13 17:11:40 +00:00
|
|
|
highlight: function (str, lang) {
|
|
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
|
|
return hljs.highlight(lang, str).value;
|
|
|
|
}
|
|
|
|
return hljs.highlightAuto(str).value;
|
|
|
|
}
|
|
|
|
}).use(remarkable.linkify);
|
|
|
|
|
2021-05-03 00:51:37 +00:00
|
|
|
// I'm leaving in "references", which handles the convention of putting your links at the bottom of your post
|
|
|
|
md.core.ruler.disable(["abbr", "abbr2", "footnote_tail", "replacements"]);
|
|
|
|
md.block.ruler.disable(["hr", "footnote", "heading", "lheading", "table", "htmlblock"]);
|
|
|
|
md.inline.ruler.disable(["del", "ins", "mark", "sub", "sup", "footnote_inline", "footnote_ref", "htmltag", "entity", "autolink"]);
|
|
|
|
|
|
|
|
//Images are parsed as inline links, so we can't turn off parsing,
|
|
|
|
//but we can overwrite the renderer so they never get displayed. Not ideal
|
|
|
|
/*md.renderer.rules.image = function () {
|
|
|
|
return "";
|
|
|
|
};*/
|
2020-11-13 17:11:40 +00:00
|
|
|
|
|
|
|
for (let el of els) {
|
2021-04-28 02:47:33 +00:00
|
|
|
const extendedText = el.querySelector(".extended-text");
|
2020-11-13 17:11:40 +00:00
|
|
|
const mainText = el.querySelector(".main-text");
|
|
|
|
|
|
|
|
//Markdown + highlight
|
2020-12-18 03:31:27 +00:00
|
|
|
mainText.innerHTML = md.render(mainText.textContent);
|
2021-04-28 02:47:33 +00:00
|
|
|
if (extendedText) {
|
|
|
|
extendedText.innerHTML = md.render(extendedText.textContent);
|
|
|
|
}
|
2020-11-13 17:11:40 +00:00
|
|
|
}
|
|
|
|
</script>
|
2021-04-20 05:10:31 +00:00
|
|
|
{% endblock %}
|