128 lines
4.8 KiB
HTML
128 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Thoughts</title>
|
|
|
|
{% load static %}
|
|
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
|
|
|
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
|
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
|
|
|
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>
|
|
<span class="text">Thoughts</span>{% if authenticated %}
|
|
<a href="/post" class="text" style="border: none">Post</a>
|
|
{% endif %}</h1>
|
|
</header>
|
|
|
|
<section class="main-wrap">
|
|
{% 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-text text">{{thought.extended_text}}</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 %}
|
|
|
|
</section>
|
|
|
|
<!-- <footer>Copyright Matthias @2020{% if authenticated %}-->
|
|
<!-- <a href="/post" style="color: var(--text-color); margin-left: 100px; text-decoration: none">POST</a>-->
|
|
<!-- {% endif %}</footer>-->
|
|
|
|
<script>
|
|
const els = document.querySelectorAll(".thought");
|
|
|
|
for (let el of els) {
|
|
const extended = el.querySelector(".extended-text");
|
|
|
|
//Hide extended text
|
|
extended.classList.add("hidden");
|
|
//Add button to show extended text
|
|
if (extended.textContent.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);
|
|
|
|
// Allow data: URIs for images, from https://github.com/jonschlinkert/remarkable/issues/329
|
|
const originalLinkValidator = md.inline.validateLink;
|
|
const dataLinkRegex = /^\s*data:([a-z]+\/[a-z]+(;[a-z-]+=[a-z-]+)?)?(;base64)?,[a-z0-9!$&'',()*+,;=\-._~:@/?%\s]*\s*$/i;
|
|
|
|
md.inline.validateLink = (url) => originalLinkValidator(url) || url.match(dataLinkRegex);
|
|
|
|
for (let el of els) {
|
|
const extended = el.querySelector(".extended-text");
|
|
const mainText = el.querySelector(".main-text");
|
|
|
|
//Markdown + highlight
|
|
extended.innerHTML = md.render(extended.textContent);
|
|
mainText.innerHTML = md.render(mainText.textContent);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|