WhisperMaPhone/main/templates/whispermaphone/index.html

{% extends "whispermaphone/page.html" %}
{% load static %}

{% block title %}Thoughts{% endblock %}

{% block navigation %}
    <span class="text" aria-current="page">Thoughts</span>
    <a href="/about" class="text">About</a>{% if authenticated %}
    <a href="/post" class="text" style="border: none">Post</a>
{% endif %}
{% endblock %}

{% block head %}
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">
{% endblock %}

{% block main %}
    {% load tz %}

    {% for thought in thoughts %}
        <div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{thought.uuid}}">
            <div class="main">
                <span class="main-text text">{{thought.text}}</span>
            </div>
            <div class="extended">
                <span class="extended-text text">{{thought.extended_text}}</span>
                {% with file_type=thought.get_media_type %}
                    {% 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 %}

                {% endwith %}
            </div>
            <div class="thought-end">
                <span class="timestamp">
                    {% timezone thought.timezone %}
                        {{ thought.posted|time:"g:i a" }}
                        {{ thought.posted|date:"M d, Y" }},

                        UTC{{ thought.offset_hours }}
                    {% endtimezone %}
                </span>
            </div>
            <hr>
        </div>
    {% endfor %}
{% endblock %}

{% block scripts %}
    <script>
        const els = document.querySelectorAll(".thought");

        function isEmptyNode(node) {
            //It's an empty node if it's a comment or text that's just whitespace
            return node instanceof Comment ||
                ((node instanceof Text || node instanceof HTMLSpanElement) && !node.textContent.trim());
        }

        for (let el of els) {
            const extended = el.querySelector(".extended");

            //Hide extended text
            extended.classList.add("hidden");
            //Remove empty nodes from extended text
            for (const node of Array.from(extended.childNodes).filter(isEmptyNode)) {
                extended.removeChild(node);
            }
            //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);
            }
        }

        const highlighted = document.querySelector(".highlighted");
        if (highlighted) {
            highlighted.scrollIntoView();
            const showMoreButton = highlighted.querySelector(".show-more");
            if (showMoreButton) {
                showMoreButton.click();
            }
        }
    </script>

    <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";




        const md = new remarkable.Remarkable({
            html: false, breaks: true, typographer: true,
            highlight: function (str, lang) {
                if (lang && hljs.getLanguage(lang)) {
                    return hljs.highlight(lang, str).value;
                }
                return hljs.highlightAuto(str).value;
            }
        }).use(remarkable.linkify);

        // 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 "";
        };*/

        for (let el of els) {
            const extendedText = el.querySelector(".extended-text");
            const mainText = el.querySelector(".main-text");

            //Markdown + highlight
            mainText.innerHTML = md.render(mainText.textContent);
            if (extendedText) {
                extendedText.innerHTML = md.render(extendedText.textContent);
            }
        }
    </script>
{% endblock %}