facebook integratie: static gedeelte

2020-05-11 08:26:35 +02:00 · 2020-05-11 08:26:35 +02:00 · 9608f4a78b
parent f1311d3fa1
commit 9608f4a78b
19 changed files with 60 additions and 287 deletions
--- a/content/_index.md
+++ b/content/_index.md
@ -30,10 +30,6 @@ Bak ze!

 [Wouter](/about).

-<span class="smaller">
-Deze website gebruikt [anonieme IP](https://support.google.com/analytics/answer/2763052?hl=en)-gegevens in de vorm van Google Analytics om websiteverkeer beter op te kunnen volgen. 
-</span>
-
 [1]: https://redzuurdesem.be/wp-content/uploads/2012/06/693ef7d02022750cb1a7dae6eb7d1cf5_large.jpg
 [2]: https://redzuurdesem.be/wp-content/uploads/2012/06/photo-full.jpg
 [3]: https://redzuurdesem.be/wp-content/uploads/2012/06/16118a75dafdc72174fc6ca3a2d545b1_large.jpg
--- a/layouts/index.html
+++ b/layouts/index.html
@ -11,6 +11,7 @@
 	</h1>
 </section>

+<!-- BLOCK: boek reclame -->
 <div class='post'>
 <article class='post_content'>
 	<h3>Nu beschikbaar:</h3>
@ -27,8 +28,9 @@
 	</div>
 </article>
 </div>
-
 <hr/>
+
+<!-- BLOCK: blogposts -->
 <div class = 'post post_content'>
 	<h1>
 		<a href="/post">Laatste blogposts</a> &raquo;
@ -46,7 +48,7 @@
 </div>
 <hr/>

-
+<!-- BLOCK: content -->
 <div class = 'post'>
  <article class='post_content'>
    {{- .Content }}
@ -54,5 +56,31 @@
 </div>
 <hr/>

+<!-- BLOCK: facebook posts -->
+<div class='post post_content'>
+	<h1>
+		<a href="https://facebook.com/redzuurdesem">Facebook posts</a> &raquo;
+	</h1>
+</div>
+<ul class='posts wrap' id = 'posts'>
+	<li class = 'post_item'>
+		<div class="fb-post" data-href="https://www.facebook.com/redzuurdesem/posts/3067948703326127"></div>
+	</li>
+	<li class = 'post_item'>
+		<div class="fb-post" data-href="https://www.facebook.com/redzuurdesem/posts/3063110147143316"></div>
+	</li>
+</ul>
+<div class = 'post post_content'>
+	<h4>
+		<a href="https://facebook.com/redzuurdesem">Bekijk alle Facebook posts</a> &raquo;
+	</h4>
+</div>
+<hr/>
+
+<div class="post post_content">
+	<span class="smaller">
+	Deze website gebruikt <a href="https://support.google.com/analytics/answer/2763052?hl=en" target="_blank">anonieme IP</a>-gegevens in de vorm van Google Analytics om websiteverkeer beter op te kunnen volgen. 
+	</span>
+</div>

 {{ end }}
--- a/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content
+++ b/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content
--- a/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json
+++ b/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json
@ -1 +1 @@
-{"Target":"css/styles.cc748accb4f720f2b3a2af6453af43b23282a2d121fa64e4c1550b8e0d0986fb266584159aef3adcd51e4f3c4002e2849a9fbe7c613451d4525d6f84f3139f7d.css","MediaType":"text/css","Data":{"Integrity":"sha512-zHSKzLT3IPKzoq9kU69DsjKCotEh+mTkwVULjg0JhvsmZYQVmu863NUeTzxAAuKEmp++fGE0UdRSXW+E8xOffQ=="}}
+{"Target":"css/styles.cc29ef9d17ff7b447777ba718235126b008747459c4030d7933e729c05c3d54535bfa27b35706cd750fbc65451d8fd15c15ba51feed433c62558bdb8c401a7eb.css","MediaType":"text/css","Data":{"Integrity":"sha512-zCnvnRf/e0R3d7pxgjUSawCHR0WcQDDXkz5ynAXD1UU1v6J7NXBs11D7xlRR2P0VwVulH+7UM8YlWL24xAGn6w=="}}
--- a/static/css/redzuurdesem.css
+++ b/static/css/redzuurdesem.css
@ -1,64 +0,0 @@
-
-body {
-  font-size: 14pt !important;
-}
-
-#body-inner {
-  margin-bottom: 0;
-  padding-bottom: 0 !important;
-}
-
-.boek-row button {
-  border: 1px solid black;
-  padding: 0.7em;
-  border-radius: 5px;
-  text-align: center;
-  margin-top: 20px;
-}
-
-.boek-row a {
-  line-height: 1.4 !important;
-  color: black;
-}
-
-.boek-row button:hover {
-  background: black;
-  color: white;
-}
-
-.boek-col-left {
-  float: left;
-  width: 45%;
-  vertical-align: center;
-  text-align: center;
-  padding-top: 30px;
-}
-
-.boek-col-right {
-  float: right;
-  width: 45%;
-}
-
-.boek-col-right img {
-  -webkit-box-shadow: 6px 6px 3px 0px rgba(0,0,0,.75);
-  -moz-box-shadow: 6px 6px 3px 0px rgba(0,0,0,.75);
-  box-shadow: 6px 6px 3px 0px rgba(0,0,0,.75);
-}
-
-#chapter, #body .padding {
-  padding-top: 0;
-}
-
-#body, #chapter p {
-  text-align: justify;
-}
-
-.wp-caption-text {
-  font-size: smaller;
-  color: grey;
-}
-
-.aligncenter {
-  margin-left: auto;
-  margin-right: auto;
-}
--- a/static/js/hugo-learn.js
+++ b/static/js/hugo-learn.js
@ -1,98 +0,0 @@
-/* 2020-04-26: copypaste hugo-learn, fix getUrlParameter returns undefined */
-
-// Get Parameters from some url
-var getUrlParameter = function getUrlParameter(sPageURL) {
-    var url = sPageURL.split('?');
-    var obj = {};
-    if (url.length == 2) {
-      var sURLVariables = url[1].split('&'),
-          sParameterName,
-          i;
-      for (i = 0; i < sURLVariables.length; i++) {
-          sParameterName = sURLVariables[i].split('=');
-          obj[sParameterName[0]] = sParameterName[1];
-      }
-      return obj;
-    } else {
-      return obj;
-    }
-};
-
-// Execute actions on images generated from Markdown pages
-var images = $("div#body-inner img").not(".inline");
-// Wrap image inside a featherlight (to get a full size view in a popup)
-images.wrap(function(){
-  var image =$(this);
-  var o = getUrlParameter(image[0].src);
-  var f = o['featherlight'];
-  // IF featherlight is false, do not use feather light
-  if (f != 'false') {
-    if (!image.parent("a").length) {
-      return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
-    }
-  }
-});
-
-// Change styles, depending on parameters set to the image
-images.each(function(index){
-  var image = $(this)
-  var o = getUrlParameter(image[0].src);
-  if (typeof o !== "undefined") {
-    var h = o["height"];
-    var w = o["width"];
-    var c = o["classes"];
-    image.css("width", function() {
-      if (typeof w !== "undefined") {
-        return w;
-      } else {
-        return "auto";
-      }
-    });
-    image.css("height", function() {
-      if (typeof h !== "undefined") {
-        return h;
-      } else {
-        return "auto";
-      }
-    });
-    if (typeof c !== "undefined") {
-      var classes = c.split(',');
-      for (i = 0; i < classes.length; i++) {
-        image.addClass(classes[i]);
-      }
-    }
-  }
-});
-
-// Stick the top to the top of the screen when  scrolling
-$(document).ready(function(){
-  $("#top-bar").sticky({topSpacing:0, zIndex: 1000});
-});
-
-
-jQuery(document).ready(function() {
-  // Add link button for every
-  var text, clip = new ClipboardJS('.anchor');
-  $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function(index, html){
-    var element = $(this);
-    var url = encodeURI(document.location.origin + document.location.pathname);
-    var link = url + "#"+element[0].id;
-    return " <span class='anchor' data-clipboard-text='"+link+"'>" +
-      "<i class='fas fa-link fa-lg'></i>" +
-      "</span>"
-    ;
-  });
-
-  $(".anchor").on('mouseleave', function(e) {
-    $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
-  });
-
-  clip.on('success', function(e) {
-      e.clearSelection();
-      $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
-  });
-  $('code.language-mermaid').each(function(index, element) {
-    var content = $(element).html().replace(/&amp;/g, '&');
-    $(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
-  });
-});
--- a/themes/desem-swift-theme/assets/sass/_base.sass
+++ b/themes/desem-swift-theme/assets/sass/_base.sass
@ -108,7 +108,6 @@ hr
  margin: 1rem 0

 aside 
-  margin-top: 4rem
  h3
    position: relative
    margin: 0 !important
--- a/themes/desem-swift-theme/assets/sass/_components.sass
+++ b/themes/desem-swift-theme/assets/sass/_components.sass
@ -35,7 +35,7 @@ button
    font-family: 'Signika', sans-serif
    text-transform: uppercase
    margin-top: 0.5em
-    color: #4f2c16
+    color: var(--title)
    text-shadow: 1px 1px 2px lightgrey
    width: 30% 

--- a/themes/desem-swift-theme/assets/sass/_nav.sass
+++ b/themes/desem-swift-theme/assets/sass/_nav.sass
@ -90,7 +90,7 @@
    font-size: 1.5em !important
    padding-top: 0 !important
    padding-bottom: 0 !important
-    color: #4f2c16 !important
+    color: var(--title) !important
  
  &-close 
    display: flex
--- a/themes/desem-swift-theme/assets/sass/_variables.sass
+++ b/themes/desem-swift-theme/assets/sass/_variables.sass
@ -18,6 +18,7 @@ html
  --bg: var(--light)
  --text: var(--dark)
  --theme: #ef7f1a
+  --title: #4f2c16
  --font: 'Metropolis', sans-serif

@media (prefers-color-scheme: dark)
--- a/themes/desem-swift-theme/i18n/nl.toml
+++ b/themes/desem-swift-theme/i18n/nl.toml
@ -59,7 +59,7 @@
 [errMsg]
  other = "Sorry, there was an error with the submission!"
 [moreFrom]
-  other = "Meer lezen:"
+  other = "Meer lezen"
 [discard]
  other = "discard"
 [discardComment]
--- a/themes/desem-swift-theme/layouts/_default/single.html
+++ b/themes/desem-swift-theme/layouts/_default/single.html
@ -30,15 +30,31 @@
    <div class = 'post_extra'>
      {{- partial "copy" . }}
    </div>
-    {{- partial "author" . }}
  </article>
-  {{- if .Site.Params.Staticman }}
-    {{- partial "comments" . }}
-  {{- end }}
+</div>
+<hr/>
+<div class='post'>
  <aside>
    {{- partial "aside" . }}
  </aside>
 </div>
+<div class='post'>
+  <article class='post_content' style="text-align: center;">
+    <h3>Facebook Community &raquo;</h3>
+
+    <p>Hulp nodig? Klik op '<em>Berichten</em>' en laat iets achter!</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>
+  </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>
--- a/themes/desem-swift-theme/layouts/partials/analytics.html
+++ b/themes/desem-swift-theme/layouts/partials/analytics.html
@ -1,9 +0,0 @@
-{{- with .Site.Params.ga_analytics }}
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '{{ . }}');
-</script>
-{{- end -}}
--- a/themes/desem-swift-theme/layouts/partials/archive.html
+++ b/themes/desem-swift-theme/layouts/partials/archive.html
@ -24,7 +24,7 @@
      {{- if isset .Params "posttitle" }}
        {{ .Params.posttitle }}
      {{- else }}
-        {{ i18n "moreFrom" .Site.Title }}
+        {{ i18n "moreFrom" .Site.Title }} &raquo;
      {{- end }}
      <span class='pages'>({{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }})</span> &raquo;
    </h1>
--- a/themes/desem-swift-theme/layouts/partials/aside.html
+++ b/themes/desem-swift-theme/layouts/partials/aside.html
@ -1,4 +1,4 @@
-<h3>{{ i18n "moreFrom" .Site.Title }}</h3>
+<h3>{{ i18n "moreFrom" .Site.Title }} &raquo;</h3>
 <ul class='posts aside'>
  {{- $kin := (where .Site.RegularPages ".Params.tags" "intersect" .Params.tags) }}
  {{- $siblings := (where $kin ".Title" "!=" .Title) }}
--- a/themes/desem-swift-theme/layouts/partials/author.html
+++ b/themes/desem-swift-theme/layouts/partials/author.html
@ -1,16 +0,0 @@
-{{- $authors := .Site.Data.authors }}
-{{- $pageAuthor := lower .Params.author }}
-{{- with $authors }}
-{{- $author := index (where . (lower "name") $pageAuthor) 0 }}
-{{ with $author }}
-<div class = 'author'>
-  <a href = '{{ .url }}' target = "{{ .name }}'s profile" class = 'author_pic'>
-    <img src = '{{ absURL (printf "images/%s" .photo) }}' alt = ''>
-  </a>
-  <div class = 'author_meta'>
-    <a class = 'author_name' href = '{{ .url }}'>{{ with .fullName }}{{ . }}{{ else }}{{ .name }}{{ end }}</a>
-    <p class = 'pale author_bio solo'>{{ .bio }}</p>
-  </div>
-</div>
-{{- end }}
-{{- end }}
--- a/themes/desem-swift-theme/layouts/partials/comments-form.html
+++ b/themes/desem-swift-theme/layouts/partials/comments-form.html
@ -1,40 +0,0 @@
-{{- $vs := .Site.Params.staticman }}
-<span class = 'form_toggle btn'>{{ i18n "comment" }}</span>
-<form class = 'form' method = 'POST'>
-  <!-- Start comment form display reply target -->
-  <p class='reply_notice'>
-    <span class='reply_to'></span>
-  </p>
-  <!-- End comment form display reply target -->
-
-  <input type = 'hidden' class = 'form_input form_slug' name = 'options[slug]' value = '{{ md5 .File.Path }}'>
-  <input type='hidden' class='form_input reply_thread' name='fields[replyThread]'>
-  <input type='hidden' class='form_input reply_id' name='fields[replyId]'>
-  <input type='hidden' class='form_input reply_name' name='fields[replyName]'>
-  {{- with $vs.reCaptcha -}}
-    <input name = 'options[reCaptcha][siteKey]' type = 'hidden' value = '{{ .sitekey }}'>
-    <input name = 'options[reCaptcha][secret]' type = 'hidden' value = '{{ .secret }}'>
-  {{- end -}}
-
-  <label class = 'form_label'>{{ i18n "name" }}</label>
-  <input name = 'fields[name]' type = 'text' placeholder = '{{ i18n "name" }}' class = 'form_input form_name' required>
-  <label class = 'form_label'>{{ i18n "email" }}</label>
-  <input name = 'fields[email]' type = 'email' placeholder = '{{ i18n "email" }}' class = 'form_input form_email' required>
-  <label class = 'form_label'>{{ i18n "comment" }}</label>
-  <textarea name = 'fields[comment]' placeholder = '{{ i18n "typeInComment" }}' class = 'form_input form_comment' required></textarea>
-
-  {{- with $vs.reCaptcha -}}
-    <div class = 'g-recaptcha' data-sitekey = '{{ .sitekey }}' data-callback='enableSubmitComment'></div>
-    <script type="text/javascript">
-      function enableSubmitComment(){
-        document.getElementById('submitComment').disabled = false;
-      }
-    </script>
-    <script async src = 'https://www.google.com/recaptcha/api.js'></script>
-  {{- end -}}
-
-  <div class = 'btn_group'>
-    <input type = 'submit' id = 'submitComment' value = '{{ i18n "btnSubmit" }}' class = 'btn form_submit' {{- if $vs.reCaptcha }} disabled {{- end }}>
-    <div class='form_reset btn_close icon'></div>
-  </div>
-</form>
--- a/themes/desem-swift-theme/layouts/partials/comments.html
+++ b/themes/desem-swift-theme/layouts/partials/comments.html
@ -1,42 +0,0 @@
-<h3>Comments</h3>
-<div class = 'comments'>
-  {{- $entryId := md5 .File.Path -}}
-  {{ if .Site.Data.comments }}
-    {{- $comments := index $.Site.Data.comments $entryId -}}
-    {{ if not $comments }}
-      <p>{{ i18n "noComment" }}</p>
-    {{ else }}
-      {{ range $comments }}
-        {{ if not .replyThread }}
-          {{ $.Scratch.Set "threadID" ._id }}
-          <div id = '{{ ._id }}' class = 'comment'>
-            <img src = 'https://www.gravatar.com/avatar/{{ .email }}?s=100' alt = 'user icon' class = 'comment_pic'>
-            <div class = 'comment_meta'>
-              <a href='#{{ ._id }}'><div class = 'comment_heading pale' data-time = '{{ .date }}'></div></a>
-              <div class = 'comment_author comment_name'><span class="comment_name_span">{{ .name }}</span></div>
-            </div>
-            <p class = 'solo comment_bio pale'>{{ .comment | markdownify }}</p>
-            <div class = 'comment_thread hidden'>{{ ._id }}</div>
-            <div class = 'reply_btn icon'></div>
-          </div>
-
-          {{ range $comments }}
-            {{ if eq .replyThread ($.Scratch.Get "threadID") }}
-              <div id = '{{ ._id }}' class = 'comment comment_reply'>
-                <img src = 'https://www.gravatar.com/avatar/{{ .email }}?s=100' alt = 'user icon' class = 'comment_pic'>
-                  <div class = 'comment_meta'>
-                  <a href='#{{ ._id }}'><div class = 'comment_heading pale' data-time = '{{ .date }}'></div></a>
-                  <div class = 'comment_author comment_name'><span class = 'comment_name_span'>{{ .name }}</span><span> ↷ </span><a href='#{{ .replyID }}' class='reply_target'>{{ .replyName }}</a></div>
-                </div>
-                <p class = 'solo comment_bio pale'>{{ .comment | markdownify }}</p>
-                <div class = 'comment_thread hidden'>{{ .replyThread }}</div>
-                <div class = 'reply_btn icon'></div>
-              </div>
-            {{- end }}
-          {{- end }}
-        {{- end }}
-      {{- end }}
-    {{- end }}
-  {{- end }}
-  {{- partial "comments-form" . }}
-</div> 
--- a/themes/desem-swift-theme/layouts/partials/footer.html
+++ b/themes/desem-swift-theme/layouts/partials/footer.html
@ -7,3 +7,5 @@
 {{- $mainScriptPath := "js/index.js" }}
 {{- $scripts := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . | resources.Minify | resources.Fingerprint "sha512" }}
 <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>