hosted:own overhaul, facebook dynamic:static"

This commit is contained in:
wgroeneveld 2020-05-26 21:12:43 +02:00
parent 022c7e82a4
commit d107970f9b
28 changed files with 187 additions and 82 deletions

View File

@ -38,8 +38,9 @@ function makeIndex(posts) {
async function run() {
const posts = await loadPostsWithFrontMatter(`${__dirname}/content/post`);
const fbposts = await loadPostsWithFrontMatter(`${__dirname}/content/fb`);
const leren = await loadPostsWithFrontMatter(`${__dirname}/content/leren`);
const index = makeIndex(posts.concat(leren));
const index = makeIndex(posts.concat(leren).concat(fbposts));
console.log(JSON.stringify(index));
}

View File

@ -12,7 +12,6 @@ theme = "desem-swift-theme"
[params]
logo = "/images/badge.png"
fathomid = "BUDSM"
fbtoken = "EAAn5J1FBPssBAEklcMbCU4PrCZB3aMyLuD3XqYGTaif8gKbx24PH5ZA6WrsQwiSGJzLIuVdHn4s2EymVDXTdrWaKLJqkDACiY5SLreXbeLuXTKirw7bncJM68dKTV7Y7Sp9rroU9IGqSUsJrhIzFvjlZAKBCQwUesut1p03oLPxkVTpNSg2"
# For search functionnality
[outputs]

View File

@ -1,5 +1,4 @@
---
chapter: true
title: "Het Boek"
date: 2020-04-26
image: /images/boekcover.jpg

11
content/fb/20200507.md Normal file
View File

@ -0,0 +1,11 @@
---
title: "Facebook post op 2020-05-07"
date: 2020-05-07
link: https://www.facebook.com/redzuurdesem/posts/3067948703326127
---
Omdat de tarwebloem op was, maar ook omdat ik zin had in iets hartelijk: 75% volkoren roggebrood. Ik denk dat er ongeveer 80% water in zit, ik heb met een soaker gewerkt.
Zoals je kan zien: het is géén goed idee om zo'n deeg een halfuurtje uit het oog te verliezen. Net niet erover, maar wel moeilijk uit het rijsmandje te krijgen...
In België is roggebloem bijna onvindbaar, en varieert de kwaliteit van het gemalen meel enorm.
![gebakken roggebrood](/fb/rogge.png)

9
content/fb/20200514.md Normal file
View File

@ -0,0 +1,9 @@
---
title: "Facebook post op 2020-05-14"
date: 2020-05-14
link: https://www.facebook.com/redzuurdesem/posts/3083224988465165
---
Om een beeld te krijgen van de desems: Hoe ziet jullie starter eruit? Heb je een combinatie van beide opties of een onconventionele starter zoals boekweit? Deel foto's van je desem!
![zuurdesem starters](/fb/starters.png)

9
content/fb/20200517.md Normal file
View File

@ -0,0 +1,9 @@
---
title: "Facebook post op 2020-05-17"
date: 2020-05-17
link: https://www.facebook.com/redzuurdesem/posts/3092681767519487
---
Red Zuurdesem wordt geëerd met een gastpost op de voorpagina van onze vrienden en bakcollega's https://www.weekendbakery.com - bedankt! Om dat te vieren is de website https://redzuurdesem.be in een nieuw jasje gestoken.
![WeekendBakery screenshot](/fb/wb.png)

9
content/fb/20200520.md Normal file
View File

@ -0,0 +1,9 @@
---
title: "Facebook post op 2020-05-20"
date: 2020-05-20
link: https://www.facebook.com/redzuurdesem/posts/3107354282718902
---
... En de resultaten van de poll 'Hoe ziet jullie starter eruit?' zijn: ong. 50/50 tarwe/rogge! Niet toevallig voor België en Nederland, aangezien wij perfect tussen tarwe-lievende Zuiderburen en rogge-etende Noorderburen liggen. Leuk (Amerikaans??) bewijs: https://ipad.fas.usda.gov/rssiws/al/europe_cropprod.aspx
![kaart van productie graansoorten](/fb/map.png)

View File

@ -9,22 +9,17 @@ Deze website maakt gebruik van de volgende externe componenten, waar mogelijks c
#### Website statistieken
Deze website gebruikt anonieme IP-gegevens om websiteverkeer beter op te kunnen volgen. Er worden geen enkele persoons- of locatiegebonden gegevens mee opgenomen. Hiervoor wordt Fathom gebruikt, en niet Google Analytics, en de data wordt niet verstuurd naar derden.
Deze website gebruikt anonieme IP-gegevens om websiteverkeer beter op te kunnen volgen. Er worden geen enkele persoons- of locatiegebonden gegevens mee opgenomen. Hiervoor wordt een intern systeem genaamd Fathom gebruikt, en niet Google Analytics, zodat data niet wordt verstuurd naar derden.
Meer informatie over het gebruik van cookies door Fathom: https://usefathom.com/privacy
#### YouTube
Sommige pagina's bevatten YouTube videos. Deze componenten maken expliciet _geen_ het interne cookie systemen van YouTube, maar verwijzen in de plaats daarvan naar `youtube-nocookie.com`.
Meer informatie over het gebruik van cookies door Google:
https://policies.google.com/technologies/cookies?hl=nl-BE
Sommige pagina's bevatten YouTube videos. Deze componenten maken expliciet _geen_ het interne cookie systemen van YouTube, maar verwijzen in de plaats daarvan naar `youtube-nocookie.com`, om te vermijden dat YouTube, en Google, cookies en trackers inzet op deze website.
#### Facebook
Sommige pagina's maken gebruik van Facebook diensten om posts weer te geven. Deze componenten bevatten cookies enkel als je bent ingelogd op Facebook zelf. Deze website maakt geen enkel gebruik van deze informatie, buiten om posts weer te geven van de Red Zuurdesem Facebook-pagina.
Meer informatie over het gebruik van cookies door Facebook: https://nl-nl.facebook.com/policies/cookies/
Alle Facebook posts zijn statische posts die zelf worden gehost om te vermijden dat Facebook cookies en trackers worden ingezet op deze website. Er worden geen enkele cookies en trackers gebruikt van Facebook.
## Toeschrijving
@ -32,5 +27,5 @@ Deze website werd tot stand gebracht mede door:
- [Hugo](https://gohugo.io) als static website generator
- [Swift Theme](https://github.com/onweru/hugo-swift-theme) als basis voor het thema
- [Font Awesome](fontawesome.com/) voor icons.
- [Font Awesome](https://fontawesome.com/) voor icons.

View File

@ -64,8 +64,10 @@
<a href="https://facebook.com/redzuurdesem">Laatste Facebook posts</a> &raquo;
</h1>
</div>
<ul class='posts wrap' id = 'fbposts'>
<li><div class="lds-facebook"><div></div><div></div><div></div></div> Bezig met laden... </li>
<ul class='posts wrap'>
{{- range first 4 (where .Site.RegularPages "Section" "==" "fb") }}
{{ partial "excerptfb" . }}
{{- end }}
</ul>
<script>
window.fbtoken = "{{ .Site.Params.fbtoken }}";

BIN
static/fb/fbwidget.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

BIN
static/fb/map.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
static/fb/rogge.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 KiB

BIN
static/fb/starters.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

BIN
static/fb/wb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -17,14 +17,20 @@
<noscript id="logo-facebook">JBH2TsVjTX0cvgHzuQHpvcCaxgPsw2fpvd0cGM4rCcV4vQrowt0cuBL0wXipF3x3xs53Gs5pwgwpGdUqGW9txgwcCBbnvA5tIhbmuQ5lJMDixBLqIc8px3x3FhwtFg9sTs8rINe5F3bmuQ5lCcV4JMCqwBacCBe9CdVqyWCaxgffx0DpyX0cGWUqCXC0CXC0CcV4vQq6w3VbS2O9ChVsTRHfwhTfCcU+JAwaS2rbw3G9Cg5dFQfdv24nx3DbwBVfwcCaTgfmvX0cS3PswgPoxYHpvA9sCd48wAZ0uWVguQrmJMDdxRDsTQ50K29mv3CcCAK9Ce0sGcqqMXDXGW44INOmGWGW43HXKqGterGXKqHdw4GXG0qqFXUoIXe1FXUmGhSsGAGqFXYoGNU1FXUoIXe1FXCmGcqsuXYrxc05uW0txc00uXHQIW40GNHdGW0tFdYmGM44INGnHW43IXamHW42HNenHW43IXaaStYoGtC1FXUmGc40HdGmGW4qINemGc43INOmGW4rHXH2Gs4sHAqnGM45GNamGW4qGXZdFNYoHNU0FXUnGM43INOmGW43GNOnGM43INOmGM43HdHQGNZiHW40HAqnGMq0uW0tFdK0xdfCGdDdGM4rGXOmGWqsFNUoIXe1FXCnGcVQGeGsHWqqFda5HMqsGs4rGXOmGWqsGcqqycC+JW9qSRLiJdqpTt48F3H2Tt4=</noscript>
<title>Red Zuurdesem: Het boek</title>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-117973708-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
(function(f, a, t, h, o, m){
a[h]=a[h]||function(){
(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
})(document, window, '//fathom.brainbaking.com/tracker.js', 'fathom');
fathom('set', 'siteId', 'BUDSM');
fathom('trackPageview');
</script>
<meta name="description" content="Red Zuurdesem, het boek: een persoonlijke zoektocht naar de smaak en wetenschap van brood. Red Zuurdesem is een met liefde gebakken boek waarin traag gefermenteerde ideeën uit zowel de praktische als de theoretische wereld met succes worden gecombineerd tot één geurig geheel, rijkelijk belegd met tips en formules om zelf aan de slag te gaan.">
<meta content="Red Zuurdesem, het boek: 10 jaar kennis gebundeld in 370 pagina's! Red Zuurdesem is een met liefde gebakken boek waarin traag gefermenteerde ideeën uit zowel de praktische als de theoretische wereld met succes worden gecombineerd tot één geurig geheel, rijkelijk belegd met tips en formules om zelf aan de slag te gaan." property="og:description">
<link rel="icon" href="/images/favicon.png" type="image/png">

File diff suppressed because one or more lines are too long

View File

@ -90,6 +90,18 @@
});
})();
[...document.querySelectorAll('.fbpost_item')].forEach((el) => {
const link = el.getAttribute('data-link');
[...el.querySelectorAll('p img')].forEach((img) => {
img.addEventListener('click', () => {
let a = document.createElement('a')
a.target= '_blank'
a.href= link
a.click()
})
})
});
(function() {
let bar = 'nav_bar-wrap';
let navBar = elem(`.${bar}`);
@ -146,40 +158,6 @@
})();
// ******
(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);
}
}
if(fbposts && window.fbtoken) {
window.fbAsyncInit = getRedZuurdesemFacebookFeed;
}
})();
(function() {
const $target = document.querySelector('#searchapp');
const $pages = document.querySelector('#resultaten .pages');
@ -226,6 +204,7 @@
header.style.backgroundAttachment = 'scroll';
}
}
fromFixedToScrollForSafari();
const fbCommunityHeaderify = () => {
var elem = document.querySelector('#fb-community-header');
@ -250,17 +229,7 @@
var index = Math.floor(Math.random() * list.length);
elem.innerHTML = list[index] + ' &raquo;';
}
const 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>';
}
fbCommunityHeaderify();
const lightbox = () => {
[...document.querySelectorAll('article img')].forEach(el => {
@ -272,9 +241,5 @@
})
const box = new SimpleLightbox('.lbox', { /* options */ });
};
fbCommunityHeaderify();
fbCommunityContainer();
fromFixedToScrollForSafari();
lightbox();
})()

View File

@ -234,7 +234,48 @@
&.active, &.disabled
opacity: 0.5
#fbwidget
margin: 0
.fbpost_item
.excerpt
margin-top: 0.5em
svg
float: right
position: absolute
top: 0
right: 10px
width: 32px
height: 32px
&_badge
float: left
width: 40px
margin: 0
&_link
margin-left: 50px
margin-bottom: 0
font-size: 1rem
&_date
margin-left: 50px
margin-top: 0
padding: 0
font-size: 0.8rem
color: darkgrey
p
font-size: 0.9rem
img
margin-bottom: 0.3rem
cursor: pointer
a
border-bottom: 1px solid var(--theme)
.excerpt
padding: 0 10px 1.5rem 10px
position: relative

View File

@ -42,4 +42,22 @@ html
box-shadow: 0 0 3rem rgba(0,0,0,$opacity)
&:hover
box-shadow: 0 0 5rem rgba(0,0,0, (1.5 * $opacity))
/* latin-ext */
@font-face
font-family: 'Signika'
font-style: normal
font-weight: 700
font-display: swap
src: local('Signika Bold'), local('Signika-Bold'), url(/fonts/signika-latin-ext.woff2) format('woff2')
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
/* latin */
@font-face
font-family: 'Signika'
font-style: normal
font-weight: 700
font-display: swap
src: local('Signika Bold'), local('Signika-Bold'), url(/fonts/signika-latin.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

View File

@ -34,7 +34,16 @@
<div class = 'post'>
<div class='post_metadata'>
<hr/>
<h1 class='post_title'>{{ .Title }}</h1>
<h1 class='post_title'>
{{- if isset .Params "title" }}
{{ .Title }}
{{- else }}
Post op {{ .Lastmod.Format (.Site.Params.dateFormat | default "2 January 2006") }}
{{- end }}
{{- if isset .Params "link" }}
(<a href="{{ .Params.link }}" target="_blank" style="text-decoration: underline;">link</a>)
{{- end }}
</h1>
{{ if isset .Params "date" }}
<h3>
<svg>
@ -66,9 +75,11 @@
<p>Klik op '<em>Berichten</em>' en laat iets van je horen!</p>
<div id='fb-community-container'>
<div class="lds-facebook"><div></div><div></div><div></div></div> Bezig met laden...
</div>
<p>
<a href="https://facebook.com/redzuurdesem/" target="_blank">
<img src="/fb/fbwidget.png" id="fbwidget" alt="Facebook Widget Screenshot" />
</a>
</p>
</article>
</div>
{{ end }}

View File

@ -0,0 +1,29 @@
{{- $scratch := newScratch }}
{{- if isset .Params "image" }}
{{- $scratch.Set "image" .Params.image }}
{{- else }}
{{- if isset .Params "featured_image" }}
{{- $scratch.Set "image" .Params.featured_image }}
{{- else }}
{{ $scratch.Set "image" "thumbnail.svg" }}
{{- end }}
{{- end }}
{{- $image := $scratch.Get "image" }}
{{- $bg := ( $image | absLangURL) }}
<li class = 'fbpost_item post_item' data-link="{{ .Params.link }}">
<div class = 'excerpt'>
<a href='{{ .Params.link }}' target="_blank">
<img src="/images/badge.png" alt="logo" class="fbpost_item_badge" />
<h3 class = 'post_link fbpost_item_link'>
Red Zuurdesem
</h3>
<h4 class='fbpost_item_date'>
Op {{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
</h4>
<svg>
<use xlink:href="#facebook"></use>
</svg>
</a>
<p class = 'pale'>{{ .Content }}</p>
</div>
</li>

View File

@ -15,5 +15,3 @@
{{- end }}
<script src = '/js/simple-lightbox.min.js'></script>
<script src = '{{ $scripts.Permalink }}'></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

@ -46,5 +46,4 @@
{{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
<link rel = 'stylesheet' href = '{{ $styles.Permalink }}' integrity = '{{ $styles.Data.Integrity }}'>
<link rel = 'stylesheet' href = '/css/simple-lightbox.min.css'>
<link href="https://fonts.googleapis.com/css2?family=Signika:wght@700&display=swap" rel="stylesheet">
</head>

View File

@ -9,4 +9,7 @@
<symbol viewBox="0 0 60.015 60.015" xmlns="http://www.w3.org/2000/svg" id="reply">
<path d="M42.007 0h-24c-9.925 0-18 8.075-18 18v14c0 9.59 7.538 17.452 17 17.973v8.344a1.694 1.694 0 0 0 1.699 1.698c.44 0 .873-.173 1.198-.498l1.876-1.876C26.708 52.713 33.259 50 40.227 50h1.78c9.925 0 18-8.075 18-18V18c0-9.925-8.075-18-18-18zm16 32c0 8.822-7.178 16-16 16h-1.78c-7.502 0-14.556 2.921-19.86 8.226l-1.359 1.359V44a1 1 0 1 0-2 0v3.949c-8.356-.52-15-7.465-15-15.949V18c0-8.822 7.178-16 16-16h24c8.822 0 16 7.178 16 16v14z"></path>
</symbol>
<symbol id="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -13,7 +13,7 @@
<div id="searchapp"></div>
</div>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="/js/lunr.min.js"></script>
{{ $p := slice }}
{{ range (where .Site.RegularPages "Section" "!=" "") }}
{{ $post := dict "link" .RelPermalink "title" .Title "content" (substr .Plain 0 200) -}}

File diff suppressed because one or more lines are too long