2022-04-30 17:33:57 +00:00
|
|
|
{% extends "thoughts/page.html" %}
|
2021-04-20 05:10:31 +00:00
|
|
|
{% 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-10-22 04:59:14 +00:00
|
|
|
<a class="text" href="/about">About</a>{% if authenticated %}
|
|
|
|
<a class="text" href="/post">Post</a>
|
2021-06-25 06:32:05 +00:00
|
|
|
{% endif %}
|
|
|
|
{% endblock %}
|
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block head %}
|
2022-05-19 20:44:02 +00:00
|
|
|
{% if not first_page %}
|
|
|
|
<link rel="canonical" href="/?page={{ current_page_slug }}">
|
|
|
|
{% else %}
|
|
|
|
<link rel="canonical" href="/">
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
<link href="{% static 'thoughts/codehighlight.css' %}" rel="stylesheet">
|
|
|
|
|
|
|
|
<!-- Open Graph + Twitter card -->
|
|
|
|
<meta name="twitter:card" content="summary">
|
|
|
|
<meta content="Thoughts" property="og:title">
|
|
|
|
<meta content="Thoughts" name="twitter:title">
|
|
|
|
|
2022-06-14 19:24:55 +00:00
|
|
|
{% spaceless %}
|
2022-05-19 20:44:02 +00:00
|
|
|
{% for thought in thoughts %}
|
|
|
|
{% if thought.uuid == highlighted %}
|
|
|
|
<meta content="{{ thought.text }}" property="og:description">
|
|
|
|
<meta content="{{ thought.text }}" name="twitter:description">
|
2021-10-14 03:46:40 +00:00
|
|
|
|
2022-05-19 20:44:02 +00:00
|
|
|
{% if thought.get_media_type == "png" or thought.get_media_type == "jpeg" %}
|
|
|
|
<meta content="{{ thought.media.url }}" property="og:image">
|
|
|
|
<meta content="{{ thought.media.url }}" name="twitter:image">
|
|
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
2022-06-14 19:24:55 +00:00
|
|
|
{% endspaceless %}
|
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% endblock %}
|
2020-09-12 17:04:34 +00:00
|
|
|
|
2021-04-20 05:10:31 +00:00
|
|
|
{% block main %}
|
2021-10-12 16:54:22 +00:00
|
|
|
{% if not first_page %}
|
2021-10-14 03:34:16 +00:00
|
|
|
<nav class="history-nav top" aria-label="History Navigation">
|
2021-10-12 16:54:22 +00:00
|
|
|
<ul>
|
|
|
|
{% for page in pages %}
|
2022-05-12 13:16:44 +00:00
|
|
|
{% if page.slug == current_page_slug %}
|
2021-10-12 16:54:22 +00:00
|
|
|
<li><span class="current-page">{{ page.formatted_name }}</span></li>
|
|
|
|
{% else %}
|
|
|
|
<li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
2022-05-17 14:44:48 +00:00
|
|
|
<li><a href="/search">Search</a></li>
|
2021-10-12 16:54:22 +00:00
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
{% endif %}
|
|
|
|
|
2020-09-06 04:06:16 +00:00
|
|
|
{% for thought in thoughts %}
|
2022-09-17 18:00:48 +00:00
|
|
|
<div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{ thought.uuid }}">
|
|
|
|
{% if thought.uuid == highlighted %}
|
|
|
|
{% if authenticated %}
|
|
|
|
{{ thought.get_html_content_authenticated }}
|
|
|
|
{% else %}
|
|
|
|
{{ thought.get_html_content}}
|
|
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
|
|
{{ thought.html_content|safe }}
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
2020-10-01 02:12:52 +00:00
|
|
|
{% endfor %}
|
2022-04-04 14:28:58 +00:00
|
|
|
|
|
|
|
<nav class="history-nav bottom" aria-label="History Navigation">
|
|
|
|
<ul>
|
|
|
|
{% for page in pages %}
|
2022-05-12 13:16:44 +00:00
|
|
|
{% if page.slug == current_page_slug %}
|
2022-04-04 14:28:58 +00:00
|
|
|
<li><span class="current-page">{{ page.formatted_name }}</span></li>
|
|
|
|
{% else %}
|
|
|
|
<li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
2022-05-17 14:44:48 +00:00
|
|
|
<li><a href="/search">Search</a></li>
|
2022-04-04 14:28:58 +00:00
|
|
|
</ul>
|
|
|
|
</nav>
|
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 %}
|
|
|
|
{% endblock %}
|
2020-11-24 18:39:36 +00:00
|
|
|
|
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");
|
2022-09-03 12:39:36 +00:00
|
|
|
});
|
2021-09-02 00:06:15 +00:00
|
|
|
main.appendChild(showMoreButton);
|
|
|
|
}
|
2022-01-10 00:28:48 +00:00
|
|
|
|
|
|
|
//Hydrate Show transcription button
|
|
|
|
const transcriptButton = el.querySelector(".transcript-button");
|
|
|
|
if (transcriptButton) {
|
|
|
|
const transcriptTitle = el.querySelector(".transcript-label");
|
|
|
|
const transcript = el.querySelector(".transcript");
|
|
|
|
|
|
|
|
const extendedParent = transcript.parentNode;
|
2022-04-04 14:28:58 +00:00
|
|
|
|
2022-01-10 00:28:48 +00:00
|
|
|
transcriptButton.addEventListener("click", function () {
|
|
|
|
extendedParent.appendChild(transcriptTitle);
|
|
|
|
extendedParent.appendChild(transcript);
|
|
|
|
extendedParent.removeChild(transcriptButton);
|
|
|
|
});
|
|
|
|
|
|
|
|
extendedParent.removeChild(transcriptTitle);
|
|
|
|
extendedParent.removeChild(transcript);
|
|
|
|
}
|
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>
|
2021-04-20 05:10:31 +00:00
|
|
|
{% endblock %}
|