Show more - blog posts

website/landingpage/dev/src/assets/js/app.js

@@ -153,11 +153,43 @@ function removeActiveState(arr) {
 }
 
 // BLOG
+var backToBlog = $('#back-to-blog');
+//variables for load more blogs functionality
+var loadMoreBlogsBtn = $('#load-more-blogs-btn');
+var backToTopBtn = $('#back-to-top-btn');
+var filesAmount = $('#blog-chunks-data').data("chunk-total"); //count amount of all blogs files
+var chunksMinBlogLoadAmount = $('#blog-chunks-data').data("chunk-step"); //amount of blogs to be visible on first load
+var chunkCounter = 0;
+
+loadMoreBlogsBtn.on('click', function() {
+  fetch('blog-chunks/blog-chunk' + chunkCounter + '.html', {
+    method: 'GET'
+  }).then(response => {
+    if (response.ok) {
+      response.text().then(response => {
+        $('#blog-chunk').append(response);
+        chunkCounter = chunkCounter + chunksMinBlogLoadAmount;
+        let chunksWrapperDIV = $('#blog-chunk div.blog-entry:nth-child(' + chunkCounter + ')');
+
+        //ids for a smooth scroll to particular new div
+        chunksWrapperDIV.attr('id', 'chunk-number' + chunkCounter); 
+        loadMoreBlogsBtn.attr('href', '#chunk-number' + chunkCounter);
+
+        let currentVisibleBlogs = chunkCounter + chunksMinBlogLoadAmount;
+        if (currentVisibleBlogs >= filesAmount ){
+          loadMoreBlogsBtn.addClass('hide');
+          backToTopBtn.removeClass('hide');
+        }
+      });
+    }
+  });
+});
+
 // use history api back() instead of standard link if coming from overview page
-if (jQuery('.back-to-blog').length && document.referrer.indexOf('/blog/overview') !== -1 && window.history) {
-  jQuery('.back-to-blog').on('click', function(e) {
+if (backToBlog.length && document.referrer.indexOf('/blog/overview') !== -1 && window.history) {
+  backToBlog.on('click', function(e) {
     e.preventDefault();
     e.stopPropagation();
     history.back();
-  });
+});
 }

website/landingpage/dev/src/assets/scss/_general.scss

@@ -56,7 +56,7 @@ ul {
 .title-1 {
   font-size: 31px;
   line-height: 1.16;
-  font-weight: 600;
+  font-weight: $global-weight-middle;
   margin-bottom: 0.7em;
 
   @include breakpoint(large) {
@@ -70,7 +70,7 @@ ul {
 
 .title-2 {
   font-size: 24px;
-  font-weight: 600;
+  font-weight: $global-weight-middle;
   line-height: 1.25;
   margin-bottom: 1em;
 
@@ -89,7 +89,7 @@ ul {
 
 .title-3 {
   font-size: 24px;
-  font-weight: 600;
+  font-weight: $global-weight-middle;
   line-height: 1.58;
   margin-bottom: 0.5em;
 
@@ -179,7 +179,7 @@ section,
   box-shadow: 0 8px 24px -17px #000101;
   background-color: $primary-color;
   font-size: 14px;
-  font-weight: 600;
+  font-weight: $global-weight-middle;
   font-family: $body-font-family;
   color: $button-color;
   cursor: pointer;
@@ -221,7 +221,7 @@ p {
 
   font-size: 15px;
   line-height: 1.2em;
-  font-weight: 600;
+  font-weight: $global-weight-middle;
 
 
   li {

website/landingpage/dev/src/assets/scss/_settings.scss

@@ -90,6 +90,7 @@ $global-padding: 1rem;
 $global-position: 1rem;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
+$global-weight-middle: 600;
 $global-radius: 0;
 $global-menu-padding: 0.7rem 1rem;
 $global-menu-nested-margin: 1rem;
@@ -199,6 +200,7 @@ $anchor-color: $primary-color;
 $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;
+
 $hr-width: $global-width;
 $hr-border: 1px solid $medium-gray;
 $hr-margin: rem-calc(20) auto;

website/landingpage/dev/src/assets/scss/components/_blog_pages.scss

@@ -1,13 +1,14 @@
-.back-to-blog {
+.back-to-blog, .read-more-btn {
   display: inline-block;
   position: relative;
-  padding-left: 20px;
-  margin-bottom: 25px;
+  padding-right: 20px;
+  color: map-get($foundation-palette, secondary);
+  font-weight: $global-weight-middle;
 
   &:before {
     position: absolute;
-    top: 7px;
-    left: 0;
+    top: 8px;
+    right: 0;
     content: '';
     width: 6px;
     height: 6px;
@@ -16,6 +17,19 @@
     height: 16px;
     background: url('../img/link-arrow.svg') no-repeat 50% 50%;
     background-size: auto;
+
+  }
+}
+.back-to-blog {
+  color: map-get($foundation-palette, success);
+  font-weight: $global-weight-bold;
+  padding-left: 20px;
+  margin-bottom: 25px;
+
+  &:before{
+    top: 7px;
+    left: 0;
+    background: url(../img/link-arrow.svg) no-repeat 50% 50%;
     transform: rotate(180deg);
   }
 }
@@ -25,7 +39,7 @@
   color: $primary-color;
   width: 50px;
   height: 50px;
-  background-color: #FFF;
+  background-color: $white;
   box-shadow: 2px 2px 10px 0px #D2D2D2;
   transition: all 0.2s linear 0s;
   border-radius: 50%;
@@ -34,7 +48,7 @@
   &:hover, &:active {
     box-shadow: none;
     background-color: $primary-color;
-    color: #FFF;
+    color: $white;
   }
 
   > svg {
@@ -60,6 +74,8 @@
   padding-bottom: 25px;
   margin-bottom: 60px;  
   border-bottom: 1px solid rgb(229, 229, 229);
+  transition-duration: .15s;
+  transition-timing-function: ease-out;
 
   &:last-child {
     border-bottom: 0;

website/landingpage/dev/src/helpers/blogentries.js

@@ -1,4 +1,32 @@
 import { getBlogEntries } from '../services/blogprocessor';
-module.exports = (options) => {
-  return getBlogEntries().map(entry => entry.blogExcerpt).join(' ');
+import path from 'path';
+import { writeFileSync } from 'fs';
+
+module.exports = () => {
+  const blogChunkPath = path.join(__dirname, '../../../public/blog', 'blog-chunks');
+
+  const numberOfBlogsToBeVisibleOnLoad = 5,
+  blogsMapAll = getBlogEntries().map(entry => entry.blogExcerpt),
+  blogsListLength = blogsMapAll.length,
+  showedBlogs = blogsMapAll.slice(0, numberOfBlogsToBeVisibleOnLoad),
+  showedBlogsHTML = showedBlogs.join(' '),
+  hiddenBlogsArray = blogsMapAll.slice(numberOfBlogsToBeVisibleOnLoad),
+  hiddenBlogsArrayLength = hiddenBlogsArray.length;
+
+  const blogHTMLDataLength = `<div id="blog-chunks-data" 
+  data-chunk-step="${numberOfBlogsToBeVisibleOnLoad}" 
+  data-chunk-total="${blogsListLength}"></div>`
+
+  if (blogsListLength > numberOfBlogsToBeVisibleOnLoad){
+    for (var currentBlogNumber=0 ; currentBlogNumber < hiddenBlogsArrayLength; currentBlogNumber += numberOfBlogsToBeVisibleOnLoad) {
+      let currentChunkOfBlogs = hiddenBlogsArray.slice(currentBlogNumber, currentBlogNumber + numberOfBlogsToBeVisibleOnLoad);
+      let currentChunkOfBlogsHTML = currentChunkOfBlogs.join(' ');
+      writeFileSync(blogChunkPath + `/blog-chunk` + currentBlogNumber + `.html`, currentChunkOfBlogsHTML);
+    }
+
+    return `${showedBlogsHTML} ${blogHTMLDataLength}`;
+
+  } else if(hiddenBlogsArrayLength === 0){
+    return `${showedBlogsHTML}`;
+  } 
 }

website/landingpage/dev/src/pages/blog/overview.html

@@ -5,3 +5,13 @@
 ---
 
 {{{ blogentries }}}
+
+<div id="blog-chunk"> 
+</div> 
+
+<div class="row" id="blog-actions">
+    <div class="column">
+        <a id="load-more-blogs-btn" href="#blog-chunk" data-smooth-scroll class="btn-primary">Load more entries</a>
+        <a id="back-to-top-btn" href="#stickyAnchor" data-smooth-scroll class="btn-primary hide">Back to top</a>
+    </div>
+</div>

website/landingpage/dev/src/services/blogprocessor.js

@@ -42,9 +42,8 @@ const getAuthors = (authors) => {
 
 const generateBlogEntry = (blog, content, showButton = false) => {
 
-  const button = showButton ? `<p><a href="/blog/${blog.slug}" class="btn-primary">Read more</a></p>` : '';
+  const button = showButton ? `<p><a href="/blog/${blog.slug}" class="button read-more-btn">Read more </a></p>` : '';
   return `
-
   <div class="blog-entry">
     <div class="title-2">
       ${blog.title}
@@ -93,11 +92,11 @@ layout: blog
 ---
 ${entry.blogContent}`;
     writeFileSync(blogHtmlPath + `/${entry.slug}.html`, blogHtml);
-  });
+  })
 };
 
 export const processBlogFiles = () => {
   const blogEntries = getBlogEntries();
   writeBlogFiles(blogEntries);
   BlogFeeds.generate(blogEntries);
-};
+};