feat: add read time and improve style
This commit is contained in:
parent
7ad1eb95a2
commit
acf73b0be4
GPG key ID:
B64802DC33A64FF6
8 changed files with 91 additions and 6 deletions
2
Makefile
2
Makefile
|
|
@ -3,7 +3,7 @@
|
|||
build: confgen.lua src meta resources hx/out/index.js hx/out/article.js
|
||||
confgen confgen.lua build
|
||||
|
||||
hx/out/%.js: hx/%.hxml hx/src hx/common.hxml
|
||||
hx/out/%.js: hx/%.hxml hx/src/% hx/src/lib hx/common.hxml
|
||||
cd $(dir $<) && haxe $(notdir $<) && cd .. && mv $(basename $@).min.js $@
|
||||
|
||||
clean:
|
||||
|
|
|
|||
15
hx/src/article/HighlightedInfoElement.hx
Normal file
15
hx/src/article/HighlightedInfoElement.hx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
package article;
|
||||
|
||||
import js.Browser.document;
|
||||
import js.html.SpanElement;
|
||||
|
||||
@:forward
|
||||
abstract HighlightedInfoElement(SpanElement) to SpanElement {
|
||||
static final COLOR = "#fab387";
|
||||
|
||||
public function new(text:String) {
|
||||
this = document.createSpanElement();
|
||||
this.setAttribute("style", 'color:${COLOR}');
|
||||
this.innerText = text;
|
||||
}
|
||||
}
|
||||
23
hx/src/article/InfoRowElement.hx
Normal file
23
hx/src/article/InfoRowElement.hx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
package article;
|
||||
|
||||
import js.html.Node;
|
||||
import js.html.Text;
|
||||
import js.Browser.document;
|
||||
import js.html.ParagraphElement;
|
||||
|
||||
@:forward
|
||||
abstract InfoRowElement(ParagraphElement) to ParagraphElement {
|
||||
static final KEY_COLOR = "#a6e3a1";
|
||||
|
||||
public function new(key:String, ...values:Node) {
|
||||
this = document.createParagraphElement();
|
||||
|
||||
final keySpan = document.createSpanElement();
|
||||
keySpan.innerText = key;
|
||||
keySpan.setAttribute("style", 'color:${KEY_COLOR}');
|
||||
this.appendChild(keySpan);
|
||||
|
||||
this.appendChild(new Text(': '));
|
||||
this.append(...values);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,53 @@
|
|||
package article;
|
||||
|
||||
import js.html.Text;
|
||||
import js.html.Element;
|
||||
import js.html.Node;
|
||||
import js.Browser.document;
|
||||
import js.Browser.navigator;
|
||||
|
||||
using lib.StaticUtil;
|
||||
|
||||
function main() {
|
||||
addCopyButtons();
|
||||
|
||||
final content = document.getElementById("content");
|
||||
final wordcountP = document.getElementById("wordcount");
|
||||
wordcountP.innerText = 'Words: ${WordCount.inElement(content)}';
|
||||
final topright = document.getElementById("topright");
|
||||
|
||||
final wordCount = WordCount.inElement(content);
|
||||
final wpm = 200;
|
||||
|
||||
topright.appendChild(new InfoRowElement("Words", new HighlightedInfoElement(Std.string(wordCount))));
|
||||
|
||||
var codeblockCount = 0;
|
||||
var child = content.firstChild;
|
||||
while (child != null) {
|
||||
if (child.nodeType == Node.ELEMENT_NODE && cast(child, Element).classList.contains("codeblock"))
|
||||
codeblockCount++;
|
||||
|
||||
child = child.nextSibling;
|
||||
}
|
||||
|
||||
var readTimeEls:Array<Node> = [];
|
||||
final mins = wordCount / wpm;
|
||||
final hours = Std.int(mins / 60);
|
||||
|
||||
if (hours > 0) {
|
||||
readTimeEls.push(new HighlightedInfoElement(Std.string(hours)));
|
||||
readTimeEls.push(new Text("h "));
|
||||
}
|
||||
|
||||
readTimeEls.push(new HighlightedInfoElement('${(mins - hours * 60).toFixed(1)}min'));
|
||||
readTimeEls.push(new Text(" @ "));
|
||||
readTimeEls.push(new HighlightedInfoElement('${wpm}wpm'));
|
||||
|
||||
if (codeblockCount > 0) {
|
||||
readTimeEls.push(new Text(" + "));
|
||||
readTimeEls.push(new HighlightedInfoElement(Std.string(codeblockCount)));
|
||||
readTimeEls.push(new Text(" codeblocks"));
|
||||
}
|
||||
|
||||
topright.appendChild(new InfoRowElement("Time to Read", ...readTimeEls));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import js.html.Node;
|
|||
using Lambda;
|
||||
using StringTools;
|
||||
|
||||
// TODO: return both word and codeblock count
|
||||
function inElement(el:Node):Int {
|
||||
var words = 0;
|
||||
var child = el.firstChild;
|
||||
|
|
|
|||
5
hx/src/lib/StaticUtil.hx
Normal file
5
hx/src/lib/StaticUtil.hx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
package lib;
|
||||
|
||||
inline function toFixed(f:Float, ?digits:Int):String {
|
||||
return (cast f).toFixed(digits);
|
||||
}
|
||||
4
lib.cgt
4
lib.cgt
|
|
@ -10,9 +10,7 @@
|
|||
|
||||
<body>
|
||||
<div id="topright">
|
||||
<p><% meta.date %></p>
|
||||
<p id="wordcount">Words: ?</p>
|
||||
<p><a href="https://git.mzte.de/LordMZTE/homepage/src/branch/master/src/a/<% meta.id %>/index.html.cgt" target="_blank">[src]</a></p>
|
||||
<p><% meta.date %> <a href="https://git.mzte.de/LordMZTE/homepage/src/branch/master/src/a/<% meta.id %>/index.html.cgt" target="_blank">[src]</a></p>
|
||||
</div>
|
||||
<h1><% meta.title %></h1>
|
||||
<p><% meta.summary %></p>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ a {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
#topright p {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 12px;
|
||||
padding: 4px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue