herstructureren js componenten

This commit is contained in:
wgroeneveld 2020-05-12 17:53:40 +02:00
parent efb8b76caf
commit dd7d6e5181
17 changed files with 120 additions and 975 deletions

2
.gitignore vendored
View File

@ -5,6 +5,8 @@ docs/
*.log
**/*.sublime-workspace
resources/_gen/
content/boek/src/boek.tex
content/boek/src/boek.pdf
content/boek/src/synopsis.pdf

View File

@ -11,10 +11,6 @@ Brood. Het is iets eenvoudig, maar tegelijkertijd iets complex. Vandaag de dag d
Sinds commerciële gist aan populariteit won, verloor het “klassieke” zuurdesem boerenbrood alle aandacht. De gedachtegang is simpel: gedroogde gist betekent van nul tot afgewerkt brood binnen de 2 uur. Dat is simpelweg onmogelijk is met behulp van enkel zuurdesem omdat rijzen met zuurdesem de hulp van natuurlijke fermentatiemiddelen inroepen betekent: het _desem_. En dat desem bevat enkel bloem, water, en heel veel van dat gouden ingrediënt: _geduld_.
<center>
![Korst](/images/korst.jpg)
</center>
Mijn missie is simpel: **zuurdesembrood bakken opnieuw populariseren**. Daarom werd Red Zuurdesem als [broodbak blog](/blog) opgericht in 2012. Daarom eindigde de persoonlijke zoektocht naar de smaak en wetenschap van brood in 2020 in een [allesomvattend boek](/boek).

View File

@ -53,6 +53,7 @@ Inspelend op actualiteit!
[-] EVA VWZ (gestuurd 04/05)
[-] Vanuit Stad Hasselt; via Marleen (gestuurd 3/05)
[ ] De Nieuwe Hasselaar proberen? communicatie@hasselt.be
[ ] Delicious magazine?
## Tips Veerle e.d.

View File

@ -0,0 +1,7 @@
---
title: Weekend Bakery
date: 2020-05-12
disablefb: true
---

View File

@ -1,7 +1,7 @@
{{ define "main" }}
{{- $bg := ( .Params.image | absLangURL) }}
<section class='index-title post_header' style = 'height: 75vh; background-image:url({{ $bg }});'>
<section class='index-title post_header' style = 'background-image:url({{ $bg }});'>
<h1>
<a href="/boek">
Red<br/>

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"Target":"css/styles.d723ab5bad08d2c572c024d8d09a65ec188cfe915c7af6881832b1ab1752b26b735aec960d0b0189250ddd3d6b08c8570af2672f06921d01746410cbeb883ba1.css","MediaType":"text/css","Data":{"Integrity":"sha512-1yOrW60I0sVywCTY0Jpl7BiM/pFcevaIGDKxqxdSsmtzWuyWDQsBiSUN3T1rCMhXCvJnLwaSHQF0ZBDL64g7oQ=="}}
{"Target":"css/styles.a824af1bdd031310f727c3e894c744b9fec7a5b5d06083cb4772632588eea8ea8c4c7030050086a2243a46b54dbb3e84236a766ce1776e05683a6e166e1fcf9f.css","MediaType":"text/css","Data":{"Integrity":"sha512-qCSvG90DExD3J8PolMdEuf7HpbXQYIPLR3JjJYjuqOqMTHAwBQCGoiQ6RrVNuz6EI2p2bOF3bgVoOm4Wbh/Pnw=="}}

View File

@ -1,30 +0,0 @@
(function() {
var fbposts = document.querySelector('#fbposts');
function whoops(error) {
console.log(error);
fbposts.innerHTML = "<li>Er is iets misgelopen bij het ophalen van Facebook posts.</li>";
}
function parseFeed(response) {
if(response && !response.error) {
var html = "";
response.data.forEach(function(elem) {
var id = elem.id.substring(elem.id.indexOf('_') + 1, elem.id.length);
html += "<li class = 'post_item'><div class='fb-post' data-href='https://www.facebook.com/redzuurdesem/posts/" + id + "'></div></li>";
});
fbposts.innerHTML = html;
FB.XFBML.parse(fbposts);
} else {
whoops(response.error);
}
}
window.fbAsyncInit = function() {
try {
FB.api("/redzuurdesem/feed?limit=4&access_token=" + window.fbtoken, parseFeed);
} catch(e) {
whoops(e);
}
}
})()

View File

@ -1,636 +0,0 @@
function fileClosure(){
// everything in this file should be declared within this closure (function).
// global variables
let hidden;
hidden = 'hidden';
const doc = document.documentElement;
const parentURL = '{{ .Site.BaseURL }}';
const staticman = Object.create(null);
{{ with .Site.Params.staticman -}}
const endpoint = '{{ .endpoint | default "https://staticman3.herokuapp.com" }}';
const gitProvider = '{{ .gitprovider }}';
const username = '{{ .username }}';
const repository = '{{ .repository }}';
const branch = '{{ .branch }}';
// store reCAPTCHA v2 site key and secret
{{ with .recaptcha -}}
staticman.siteKey = '{{ .sitekey }}';
staticman.secret = '{{ .secret }}';
{{ end -}}
{{ end -}}
const translations = {
success: {
title: '{{ i18n "successTitle" }}',
text: '{{ i18n "successMsg" }}',
close: '{{ i18n "close" }}'
},
error: {
title: '{{ i18n "errTitle" }}',
text: '{{ i18n "errMsg" }}',
close: '{{ i18n "close" }}'
},
discard: {
title: '{{ i18n "discardComment" }}',
button: '{{ i18n "discard" }}'
},
submit: '{{ i18n "btnSubmit" }}',
submitted: '{{ i18n "btnSubmitted" }}'
};
function isObj(obj) {
return (obj && typeof obj === 'object' && obj !== null) ? true : false;
}
function createEl(element = 'div') {
return document.createElement(element);
}
function elem(selector, parent = document){
let elem = parent.querySelector(selector);
return elem != false ? elem : false;
}
function elems(selector, parent = document) {
let elems = parent.querySelectorAll(selector);
return elems.length ? elems : false;
}
function pushClass(el, targetClass) {
if (isObj(el) && targetClass) {
elClass = el.classList;
elClass.contains(targetClass) ? false : elClass.add(targetClass);
}
}
function deleteClass(el, targetClass) {
if (isObj(el) && targetClass) {
elClass = el.classList;
elClass.contains(targetClass) ? elClass.remove(targetClass) : false;
}
}
function modifyClass(el, targetClass) {
if (isObj(el) && targetClass) {
elClass = el.classList;
elClass.contains(targetClass) ? elClass.remove(targetClass) : elClass.add(targetClass);
}
}
function containsClass(el, targetClass) {
if (isObj(el) && targetClass && el !== document ) {
return el.classList.contains(targetClass) ? true : false;
}
}
function isChild(node, parentClass) {
let objectsAreValid = isObj(node) && parentClass && typeof parentClass == 'string';
return (objectsAreValid && node.closest(parentClass)) ? true : false;
}
function elemAttribute(elem, attr, value = null) {
if (value) {
elem.setAttribute(attr, value);
} else {
value = elem.getAttribute(attr);
return value ? value : false;
}
}
function deleteChars(str, subs) {
let newStr = str;
if (Array.isArray(subs)) {
for (let i = 0; i < subs.length; i++) {
newStr = newStr.replace(subs[i], '');
}
} else {
newStr = newStr.replace(subs, '');
}
return newStr;
}
function isBlank(str) {
return (!str || str.trim().length === 0);
}
function isMatch(element, selectors) {
if(isObj(element)) {
if(selectors.isArray) {
let matching = selectors.map(function(selector){
return element.matches(selector)
})
return matching.includes(true);
}
return element.matches(selectors)
}
}
(function updateDate() {
var date = new Date();
var year = date.getFullYear();
elem('.year').innerHTML = year;
})();
(function() {
let bar = 'nav_bar-wrap';
let navBar = elem(`.${bar}`);
let nav = elem('.nav-body');
let open = 'nav-open';
let exit = 'nav-exit';
let drop = 'nav-drop';
let pop = 'nav-pop';
let navDrop = elem(`.${drop}`);
function toggleMenu(){
let menuOpen, menuPulled, status;
modifyClass(navDrop, pop);
modifyClass(navBar, hidden);
menuOpen = containsClass(nav, open);
menuPulled = containsClass(nav, exit);
status = menuOpen || menuPulled ? true : false;
status ? modifyClass(nav, exit) : modifyClass(nav, open);
status ? modifyClass(nav, open) : modifyClass(nav, exit);
}
navBar.addEventListener('click', function() {
toggleMenu();
});
elem('.nav-close').addEventListener('click', function() {
toggleMenu();
});
elem('.nav-drop').addEventListener('click', function(e) {
e.target === this ? toggleMenu() : false;
});
})();
function convertToUnderScoreCase(str) {
let char, newChar, newStr;
newStr = '';
if (typeof str == 'string') {
for (let x = 0; x < str.length; x++) {
char = str.charAt(x);
if (char.match(/^[A-Z]*$/)) {
char = char.toLowerCase();
newChar = `_${char}`
newStr += newChar;
} else {
newStr += char;
}
}
return newStr;
}
}
function createModal(children, parent) {
let body, modal, title;
modal = createEl();
pushClass(modal, 'modal');
body = createEl();
pushClass(body, 'modal_inner');
title = createEl('h3');
pushClass(title, 'modal_title');
body.appendChild(title);
// add html specific to modal
if (isObj(children)) {
if (Array.isArray(children)) {
children.map(function(child){
body.appendChild(child);
});
} else {
body.appendChild(children);
}
}
modal.appendChild(body);
parent.append(modal);
pushClass(doc, 'modal_show');
}
function fillModal(obj) {
let el, targetClass, modal;
modal = elem('.modal');
const entries = Object.entries(obj)
for (const [element, content] of entries) {
targetClass = `.${convertToUnderScoreCase(element)}`;
el = elem(targetClass, modal);
el.innerHTML = content;
}
}
(function comments(){
let comments, form, replyNotice, open;
comments = elem('.comments');
form = elem('.form');
button = elem('.form_toggle');
replyNotice = elem('.reply_notice')
open = 'form_open';
let successOutput, errorOutput;
successOutput = {
modalTitle: translations.success.title,
modalText: translations.success.text,
modalClose: translations.success.close
};
errorOutput = {
modalTitle: translations.error.title,
modalText: translations.error.text,
modalClose: translations.error.close
};
function feedbackModal() {
let body, button, children;
body = createEl();
pushClass(body, 'modal_text');
button = createEl();
pushClass(button, 'btn');
pushClass(button, 'modal_close');
children = [
body,
button
];
return children;
}
function confirmModal() {
// confirm if you want to exit form
let group, button, cancel;
group = createEl();
pushClass(group, 'btn_group');
button = createEl();
pushClass(button, 'btn');
pushClass(button, 'modal_close')
pushClass(button, 'form_close')
cancel = createEl();
pushClass(cancel, 'modal_close')
pushClass(cancel, 'btn_close');
pushClass(cancel, 'icon');
group.appendChild(button);
group.appendChild(cancel);
return group;
}
function handleForm(form) {
function formValues() {
// returns an object with form field values
let deadWeight, fields, fieldAreas, obj;
fieldAreas = elems('.form_input', form);
fields = Array.from(fieldAreas);
obj = Object.create(null);
deadWeight = ['fields', 'options', '[' , ']', 'undefined'];
fields.map(function(field) {
let key, value;
key = deleteChars(field.name, deadWeight);
key = convertToUnderScoreCase(key);
value = field.value;
obj[key] = value;
});
return obj;
}
(function submitForm() {
form.addEventListener('submit', function (event) {
event.preventDefault();
let fields, recaptchaResponse, submit, url;
url = [endpoint, 'v3/entry', gitProvider, username, repository, branch, 'comments'].join('/');
fields = formValues();
submit = elem('.form_submit', form);
recaptchaResponse = elem('[name="g-recaptcha-response"]', form);
submit.value = translations.submitted;
function formActions(info) {
showModal(info);
submit.value = translations.submit;
}
let data = {
fields: {
name: fields.name,
email: fields.email,
comment: fields.comment,
replyID: fields.reply_id,
replyName: fields.reply_name,
replyThread: fields.reply_thread
},
options: {
slug: fields.slug
}
};
if (staticman.secret){
data.options.reCaptcha = {};
data.options.reCaptcha.siteKey = staticman.siteKey;
data.options.reCaptcha.secret = staticman.secret;
data["g-recaptcha-response"] = recaptchaResponse.value;
}
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
}).then(function(res) {
if(res.ok) {
formActions(successOutput);
} else {
formActions(errorOutput);
}
}).catch(function(error) {
formActions(errorOutput);
console.error('Error:', error);
});
});
})();
function getHiddenFields() {
let reply_id, reply_name, reply_thread, reply_to, obj;
reply_id = elem('.reply_id', form);
reply_name = elem('.reply_name', form);
reply_thread = elem('.reply_thread', form);
reply_to = elem('.reply_to', form);
obj = {
id: reply_id,
name: reply_name,
thread: reply_thread,
to: reply_to
}
return obj;
}
function setReplyValues(trigger) {
let comment, id, name, thread;
let reply_fields = getHiddenFields();
comment = trigger.parentNode;
id = comment.id;
name = elem('.comment_name_span', comment);
thread = elem('.comment_thread', comment);
reply_fields.thread.value = thread.textContent;
reply_fields.id.value = id;
reply_fields.name.value = name.textContent;
reply_fields.to.textContent = name.textContent;
}
function resetReplyValues() {
let reply_fields;
reply_fields = getHiddenFields();
const values = Object.entries(reply_fields);
for (const [key, element] of values) {
if (key == 'to') {
element.textContent = '';
} else {
element.value = '';
}
}
}
function toggleForm(action = true) {
let reply_to, toggle_btn;
action = action ? pushClass : deleteClass;
toggle_btn = elem('.form_toggle');
action(form, open);
action(toggle_btn, hidden);
reply_to = getHiddenFields().to.textContent;
isBlank(reply_to) ? pushClass(replyNotice, hidden) : deleteClass(replyNotice, hidden) ;
}
comments.addEventListener('click', function (event){
let confirm, fields, modal, target, obj, formIsEmpty, hiddenValuesEmpty;
// buttons
let isFormCloseBtn, isFormToggleBtn, isModalCloseBtn, isResetFormBtn, isReplyBt;
target = event.target;
fields = formValues();
formIsEmpty = isBlank(fields.name) && isBlank(fields.comment) && isBlank(fields.email) ? true : false;
hiddenValuesEmpty = isBlank(fields.reply_id) ? true : false;
isFormCloseBtn = containsClass(target, 'form_close');
isFormToggleBtn = containsClass(target, 'form_toggle');
isModalCloseBtn = containsClass(target, 'modal_close');
isResetFormBtn = containsClass(target, 'form_reset');
isReplyBtn = containsClass(target, 'reply_btn');
isReplyBtn ? setReplyValues(target) : false;
isReplyBtn || isFormToggleBtn ? toggleForm() : false;
isFormCloseBtn ? toggleForm(false) : false;
if (isFormCloseBtn) {
form.reset();
}
if (isResetFormBtn) {
if (formIsEmpty) {
hiddenValuesEmpty ? false : resetReplyValues();
toggleForm(false);
} else {
obj = {
modalTitle: translations.discard.title,
modalClose: translations.discard.button
}
confirm = confirmModal();
createModal(confirm, comments);
fillModal(obj);
}
}
if (isModalCloseBtn) {
modal = target.closest('.modal');
modal.remove();
deleteClass(doc, 'modal_show');
}
});
}
form ? handleForm(form) : false;
function showModal(obj) {
let feedbackBody;
feedback = feedbackModal();
createModal(feedback, comments);
fillModal(obj);
}
})();
(function makeExternalLinks(){
let links = elems('a');
if(links) {
Array.from(links).forEach(function(link){
let target, rel, blank, noopener, attr1, attr2, url, isExternal;
url = elemAttribute(link, 'href');
isExternal = (url && typeof url == 'string' && url.startsWith('http')) && !url.startsWith(parentURL) ? true : false;
if(isExternal) {
target = 'target';
rel = 'rel';
blank = '_blank';
noopener = 'noopener';
attr1 = elemAttribute(link, target);
attr2 = elemAttribute(link, noopener);
attr1 ? false : elemAttribute(link, target, blank);
attr2 ? false : elemAttribute(link, rel, noopener);
}
});
}
})();
let headingNodes = [], results, link, icon, current, id,
tags = ['h2', 'h3', 'h4', 'h5', 'h6'];
current = document.URL;
tags.forEach(function(tag){
results = document.getElementsByTagName(tag);
Array.prototype.push.apply(headingNodes, results);
});
headingNodes.forEach(function(node){
link = createEl('a');
icon = createEl('img');
icon.src = '{{ absURL "images/icons/link.svg" }}';
link.className = 'link';
link.appendChild(icon);
id = node.getAttribute('id');
if(id) {
link.href = `${current}#${id}`;
node.appendChild(link);
pushClass(node, 'link_owner');
}
});
let inlineListItems = elems('ol li');
if(inlineListItems) {
inlineListItems.forEach(function(listItem){
let firstChild = listItem.children[0]
let containsHeading = isMatch(firstChild, tags);
containsHeading ? pushClass(listItem, 'align') : false;
})
}
const copyToClipboard = str => {
let copy, selection, selected;
copy = createEl('textarea');
copy.value = str;
copy.setAttribute('readonly', '');
copy.style.position = 'absolute';
copy.style.left = '-9999px';
selection = document.getSelection();
doc.appendChild(copy);
// check if there is any selected content
selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
copy.select();
document.execCommand('copy');
doc.removeChild(copy);
if (selected) { // if a selection existed before copying
selection.removeAllRanges(); // unselect existing selection
selection.addRange(selected); // restore the original selection
}
}
(function copyHeadingLink() {
let deeplink, deeplinks, newLink, parent, target;
deeplink = 'link';
deeplinks = elems(`.${deeplink}`);
if(deeplinks) {
document.addEventListener('click', function(event)
{
target = event.target;
parent = target.parentNode;
if (target && containsClass(target, deeplink) || containsClass(parent, deeplink)) {
event.preventDefault();
newLink = target.href != undefined ? target.href : target.parentNode.href;
copyToClipboard(newLink);
}
});
}
})();
(function copyLinkToShare() {
let copy, copied, excerpt, isCopyIcon, isInExcerpt, link, postCopy, postLink, target;
copy = 'copy';
copied = 'copy_done';
excerpt = 'excerpt';
postCopy = 'post_copy';
postLink = 'post_card';
doc.addEventListener('click', function(event) {
target = event.target;
isCopyIcon = containsClass(target, copy);
let isWithinCopyIcon = target.closest(`.${copy}`);
if (isCopyIcon || isWithinCopyIcon) {
let icon = isCopyIcon ? isCopyIcon : isWithinCopyIcon;
isInExcerpt = containsClass(icon, postCopy);
if (isInExcerpt) {
link = target.closest(`.${excerpt}`).previousElementSibling;
link = containsClass(link, postLink)? elemAttribute(link, 'href') : false;
} else {
link = window.location.href;
}
if(link) {
copyToClipboard(link);
pushClass(icon, copied);
}
}
});
})();
(function hideAside(){
let aside, title, posts;
aside = elem('.aside');
title = aside ? aside.previousElementSibling : null;
if(aside && title.nodeName.toLowerCase() === 'h3') {
posts = Array.from(aside.children);
posts.length < 1 ? title.remove() : false;
}
})();
(function goBack() {
let backBtn = elem('.btn_back');
let history = window.history;
if (backBtn) {
backBtn.addEventListener('click', function(){
history.back();
});
}
})();
(function postsPager(){
const pager = elem('.pagination');
if (pager) {
pushClass(pager, 'pager');
const pagerItems = elems('li', pager);
const pagerLinks = Array.from(pagerItems).map(function(item){
return item.firstElementChild;
});
pagerLinks.forEach(function(link){
pushClass(link, 'pager_link')
});
pagerItems.forEach(function(item){
pushClass(item, 'pager_item')
});
}
})();
// add new code above this line
}
window.addEventListener('load', fileClosure());

View File

@ -0,0 +1,71 @@
(function() {
var fbposts = document.querySelector('#fbposts');
function whoops(error) {
console.log(error);
fbposts.innerHTML = "<li>Er is iets misgelopen bij het ophalen van Facebook posts.</li>";
}
function parseFeed(response) {
if(response && !response.error) {
var html = "";
response.data.forEach(function(elem) {
var id = elem.id.substring(elem.id.indexOf('_') + 1, elem.id.length);
html += "<li class = 'post_item'><div class='fb-post' data-href='https://www.facebook.com/redzuurdesem/posts/" + id + "'></div></li>";
});
fbposts.innerHTML = html;
FB.XFBML.parse(fbposts);
} else {
whoops(response.error);
}
}
function getRedZuurdesemFacebookFeed() {
try {
FB.api("/redzuurdesem/feed?limit=4&access_token=" + window.fbtoken, parseFeed);
} catch(e) {
whoops(e);
}
}
function fbCommunityHeaderify() {
var elem = document.querySelector('#fb-community-header');
if(!elem) return;
var list = [
"Starter dood? Facebook to the rescue",
"Hulp nodig? Laat een berichtje achter",
"Brood mislukt? Laat ons helpen",
"Ongerezen brood? Schakel hulp in",
"Smaakmakers nodig? Brainstorm hier mee",
"moeilijkheden met je deeg? Zo opgelost",
"Desem te zuur? Vraag om tips",
"Eerste experiment gelukt? Deel de vreugde",
"Mooi brood gebakken? Deel de vreugde",
"Lekker brood gebakken? Deel je trots",
"Zuurdesemstarter gemaakt? Deel je trots",
"Prachtige 'brood-foto' gemaakt? Deel je vreugde",
"Trots op je zelfgemaakt brood? Deel je vreugde"
];
var index = Math.floor(Math.random() * list.length);
elem.innerHTML = list[index] + ' &raquo;';
}
function fbCommunityContainer() {
var elem = document.querySelector('#fb-community-container');
if(!elem) return;
// https://developers.facebook.com/docs/plugins/page-plugin/ - max is 600
var width = 600;
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(vw < width) width = vw - 10;
elem.innerHTML = '<div class="fb-page" data-width="' + vw + '" data-href="https://www.facebook.com/redzuurdesem" data-hide-cover="false" data-tabs="timeline,messages" data-show-facepile="false"></div>';
}
if(fbposts && window.fbtoken) {
window.fbAsyncInit = getRedZuurdesemFacebookFeed;
}
fbCommunityHeaderify();
fbCommunityContainer();
})()

View File

@ -1,54 +0,0 @@
function calculateTimeSince(num){
const currentTime = Math.floor(Date.now()/1000);
const timestamp = parseInt(num);
const timeSince = currentTime - timestamp;
var timeAgo;
var timeTag;
var minute = 60;
var hour = 3600;
var day = 86400;
var week = 604800;
var month = 2.628e+6;
var year = 3.154e+7;
if (timeSince < minute ) {
timeAgo = 1;
timeTag = timeAgo < 2 ? '{{ i18n "oneMin" }}' : '{{ i18n "moreMin" }}';
} else if (timeSince > minute && timeSince < hour ) {
timeAgo = Math.ceil(timeSince / minute);
timeTag = timeAgo < 2 ? '{{ i18n "oneMin" }}' : '{{ i18n "moreMin" }}';
} else if (timeSince > hour && timeSince < day ) {
timeAgo = Math.floor(timeSince / hour);
timeTag = timeAgo < 2 ? '{{ i18n "oneHr" }}' : '{{ i18n "moreHr" }}';
} else if (timeSince > day && timeSince < week) {
timeAgo = Math.floor(timeSince / day);
timeTag = timeAgo < 2 ? '{{ i18n "oneDay" }}' : '{{ i18n "moreDay" }}';
} else if (timeSince > week && timeSince < month) {
timeAgo = Math.floor(timeSince / week);
timeTag = timeAgo < 2 ? '{{ i18n "oneWk" }}' : '{{ i18n "moreWk" }}';
} else if (timeSince > month && timeSince < year) {
timeAgo = Math.floor(timeSince / month);
timeTag = timeAgo < 2 ? '{{ i18n "oneMonth" }}' : '{{ i18n "moreMonth" }}';
} else if (timeSince > year) {
timeAgo = Math.floor(timeSince / year);
timeTag = timeAgo < 2 ? '{{ i18n "oneYr" }}' : '{{ i18n "moreYr" }}';
}
return `{{ i18n "timeAgoStr" }}`;
}
function populateCommentsTime(nodes) {
if (nodes) {
nodes.forEach(function(node) {
let durationTime = node.dataset.time;
let durationSeconds = Math.ceil(Date.parse(durationTime) / 1000) ;
let durationSince = calculateTimeSince(durationSeconds);
node.innerHTML = `${durationSince}`;
});
}
}
const durations = document.querySelectorAll('.comment_heading');
populateCommentsTime(durations);

View File

@ -60,13 +60,15 @@ button
color: white
.index-title
height: 95vh !important
h1
@media (min-width: 960px)
margin-left: 2em
font-size: 5em
font-size: 6em
margin-left: 0.5em
font-size: 4em
font-size: 5em
font-family: 'Signika', sans-serif
text-transform: uppercase
margin-top: 0.5em

View File

@ -137,6 +137,9 @@
&_title
text-align: center
font-size: 2.5rem
font-family: 'Signika', sans-serif
color: var(--title)
@extend %narrow
&_author

View File

@ -6,25 +6,31 @@
{{- if isset .Params "featured_image" }}
{{- $scratch.Set "image" .Params.featured_image }}
{{- else }}
{{ $scratch.Set "image" "thumbnail.svg" }}
{{- $scratch.Set "image" "nop" }}
{{- end }}
{{- end }}
{{- $image := $scratch.Get "image" }}
{{- $bg := ( $image | absLangURL) }}
<section class = 'post_header' style = 'background-image:url({{ $bg }});'>
<div class='post_header_tags'>
<div class = 'excerpt_meta'>
{{- with .Params.tags -}}
{{- range first 10 . }}
{{- $tag := . | urlize }}
<a href = '{{ absURL (printf "tags/%s" $tag) }}' class = 'post_tag'>
{{- . }}
</a>
{{ if eq $image "nop" }}
<section style='margin-top: 5em'>
</section>
{{ else }}
{{- $bg := ( $image | absLangURL) }}
<section class = 'post_header' style = 'background-image:url({{ $bg }});'>
<div class='post_header_tags'>
<div class = 'excerpt_meta'>
{{- with .Params.tags -}}
{{- range first 10 . }}
{{- $tag := . | urlize }}
<a href = '{{ absURL (printf "tags/%s" $tag) }}' class = 'post_tag'>
{{- . }}
</a>
{{- end }}
{{- end }}
{{- end }}
</div>
</div>
</div>
</section>
</section>
{{ end }}
<div class = 'post'>
<div class='post_metadata'>
<hr/>
@ -50,46 +56,19 @@
{{- partial "aside" . }}
</aside>
</div>
{{ if not (isset .Params "disablefb") }}
<div class='post'>
<article class='post_content' style="text-align: center;">
<h3>
<script>
(function() {
var list = [
"Starter dood? Facebook to the rescue",
"Hulp nodig? Laat een berichtje achter",
"Brood mislukt? Laat ons helpen",
"Ongerezen brood? Schakel hulp in",
"Smaakmakers nodig? Brainstorm hier mee",
"moeilijkheden met je deeg? Zo opgelost",
"Desem te zuur? Vraag om tips",
"Eerste experiment gelukt? Deel de vreugde",
"Mooi brood gebakken? Deel de vreugde",
"Lekker brood gebakken? Deel je trots",
"Zuurdesemstarter gemaakt? Deel je trots",
"Prachtige 'brood-foto' gemaakt? Deel je vreugde",
"Trots op je zelfgemaakt brood? Deel je vreugde"
];
var index = Math.floor(Math.random() * list.length);
document.write(list[index]);
})()
</script>
&raquo;</h3>
<h3 id="fb-community-header">Facebook community &raquo;</h3>
<p>Klik op '<em>Berichten</em>' en laat iets van je horen!</p>
<script>
(function() {
// https://developers.facebook.com/docs/plugins/page-plugin/ - max is 600
var width = 600;
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(vw < 600) width = vw - 10;
document.write('<div class="fb-page" data-width="' + vw + '" data-href="https://www.facebook.com/redzuurdesem" data-hide-cover="false" data-tabs="timeline,messages" data-show-facepile="false"></div>');
})()
</script>
<div id='fb-community-container'>
<div class="lds-facebook"><div></div><div></div><div></div></div> Bezig met laden...
</div>
</article>
</div>
<script src = '{{ absURL "js/autosize.min.js" }}'></script>
{{- $timeagoScr := resources.Get "js/timeago.js" | resources.ExecuteAsTemplate "js/timeago.js" . }}
<script src = '{{ $timeagoScr.Permalink }}'></script>
{{ end }}
{{- end }}

View File

@ -6,9 +6,8 @@
</p>
</div>
</footer>
{{- $mainScriptPath := "js/index.js" }}
{{- $mainScriptPath := "js/redzuurdesem.js" }}
{{- $scripts := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . | resources.Minify | resources.Fingerprint "sha512" }}
<script src = '{{ $scripts.Permalink }}'></script>
<script src = '/js/redzuurdesem.js'></script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/nl_BE/sdk.js#xfbml=1&version=v3.2"></script>

View File

@ -1,140 +0,0 @@
! function(e, t) {
if ("function" == typeof define && define.amd) define(["exports", "module"], t);
else if ("undefined" != typeof exports && "undefined" != typeof module) t(exports, module);
else {
var n = {
exports: {}
};
t(n.exports, n), e.autosize = n.exports
}
}(this, function(e, t) {
"use strict";
function n(e) {
function t() {
var t = window.getComputedStyle(e, null);
"vertical" === t.resize ? e.style.resize = "none" : "both" === t.resize && (e.style.resize = "horizontal"), s = "content-box" === t.boxSizing ? -(parseFloat(t.paddingTop) + parseFloat(t.paddingBottom)) : parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), isNaN(s) && (s = 0), l()
}
function n(t) {
var n = e.style.width;
e.style.width = "0px", e.offsetWidth, e.style.width = n, e.style.overflowY = t
}
function o(e) {
for (var t = []; e && e.parentNode && e.parentNode instanceof Element;) e.parentNode.scrollTop && t.push({
node: e.parentNode,
scrollTop: e.parentNode.scrollTop
}), e = e.parentNode;
return t
}
function r() {
var t = e.style.height,
n = o(e),
r = document.documentElement && document.documentElement.scrollTop;
e.style.height = "";
var i = e.scrollHeight + s;
return 0 === e.scrollHeight ? void(e.style.height = t) : (e.style.height = i + "px", u = e.clientWidth, n.forEach(function(e) {
e.node.scrollTop = e.scrollTop
}), void(r && (document.documentElement.scrollTop = r)))
}
function l() {
r();
var t = Math.round(parseFloat(e.style.height)),
o = window.getComputedStyle(e, null),
i = "content-box" === o.boxSizing ? Math.round(parseFloat(o.height)) : e.offsetHeight;
if (i !== t ? "hidden" === o.overflowY && (n("scroll"), r(), i = "content-box" === o.boxSizing ? Math.round(parseFloat(window.getComputedStyle(e, null).height)) : e.offsetHeight) : "hidden" !== o.overflowY && (n("hidden"), r(), i = "content-box" === o.boxSizing ? Math.round(parseFloat(window.getComputedStyle(e, null).height)) : e.offsetHeight), a !== i) {
a = i;
var l = d("autosize:resized");
try {
e.dispatchEvent(l)
} catch (e) {}
}
}
if (e && e.nodeName && "TEXTAREA" === e.nodeName && !i.has(e)) {
var s = null,
u = e.clientWidth,
a = null,
c = function() {
e.clientWidth !== u && l()
},
p = function(t) {
window.removeEventListener("resize", c, !1), e.removeEventListener("input", l, !1), e.removeEventListener("keyup", l, !1), e.removeEventListener("autosize:destroy", p, !1), e.removeEventListener("autosize:update", l, !1), Object.keys(t).forEach(function(n) {
e.style[n] = t[n]
}), i.delete(e)
}.bind(e, {
height: e.style.height,
resize: e.style.resize,
overflowY: e.style.overflowY,
overflowX: e.style.overflowX,
wordWrap: e.style.wordWrap
});
e.addEventListener("autosize:destroy", p, !1), "onpropertychange" in e && "oninput" in e && e.addEventListener("keyup", l, !1), window.addEventListener("resize", c, !1), e.addEventListener("input", l, !1), e.addEventListener("autosize:update", l, !1), e.style.overflowX = "hidden", e.style.wordWrap = "break-word", i.set(e, {
destroy: p,
update: l
}), t()
}
}
function o(e) {
var t = i.get(e);
t && t.destroy()
}
function r(e) {
var t = i.get(e);
t && t.update()
}
var i = "function" == typeof Map ? new Map : function() {
var e = [],
t = [];
return {
has: function(t) {
return e.indexOf(t) > -1
},
get: function(n) {
return t[e.indexOf(n)]
},
set: function(n, o) {
e.indexOf(n) === -1 && (e.push(n), t.push(o))
},
delete: function(n) {
var o = e.indexOf(n);
o > -1 && (e.splice(o, 1), t.splice(o, 1))
}
}
}(),
d = function(e) {
return new Event(e, {
bubbles: !0
})
};
try {
new Event("test")
} catch (e) {
d = function(e) {
var t = document.createEvent("Event");
return t.initEvent(e, !0, !1), t
}
}
var l = null;
"undefined" == typeof window || "function" != typeof window.getComputedStyle ? (l = function(e) {
return e
}, l.destroy = function(e) {
return e
}, l.update = function(e) {
return e
}) : (l = function(e, t) {
return e && Array.prototype.forEach.call(e.length ? e : [e], function(e) {
return n(e, t)
}), e
}, l.destroy = function(e) {
return e && Array.prototype.forEach.call(e.length ? e : [e], o), e
}, l.update = function(e) {
return e && Array.prototype.forEach.call(e.length ? e : [e], r), e
}), t.exports = l
});
autosize(document.querySelector('textarea'));

View File

@ -1,55 +0,0 @@
function calculateTimeSince(num){
const currentTime = Math.floor(Date.now()/1000);
const timestamp = parseInt(num);
const timeSince = currentTime - timestamp;
var timeAgo;
var timeTag;
var minute = 60;
var hour = 3600;
var day = 86400;
var week = 604800;
var month = 2.628e+6;
var year = 3.154e+7;
if (timeSince < minute ) {
timeAgo = 1;
timeTag = ' MIN';
} else if (timeSince > minute && timeSince < hour ) {
timeAgo = Math.ceil(timeSince / minute);
timeTag = ' MIN';
} else if (timeSince > hour && timeSince < day ) {
timeAgo = Math.floor(timeSince / hour);
timeTag = ' HR';
} else if (timeSince > day && timeSince < week) {
timeAgo = Math.floor(timeSince / day);
timeTag = ' DAY';
} else if (timeSince > week && timeSince < month) {
timeAgo = Math.floor(timeSince / week);
timeTag = ' WK';
} else if (timeSince > month && timeSince < year) {
timeAgo = Math.floor(timeSince / month);
timeTag = ' MONTH';
} else if (timeSince > year) {
timeAgo = Math.floor(timeSince / year);
timeTag = ' YR';
}
let decorator = timeAgo < 2 ? ' AGO' : 'S AGO';
return `${timeAgo}&nbsp;${timeTag}${decorator}`;
}
function populateCommentsTime(nodes) {
if (nodes) {
nodes.forEach(function(node) {
let durationTime = node.dataset.time;
let durationSeconds = Math.ceil(Date.parse(durationTime) / 1000) ;
let durationSince = calculateTimeSince(durationSeconds);
node.innerHTML = `${durationSince}`;
});
}
}
const durations = document.querySelectorAll('.comment_heading');
populateCommentsTime(durations);