Personal blog written from scratch using Node.js, Bootstrap, and MySQL. https://jrtechs.net
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

188 lines
5.2 KiB

  1. {>header}
  2. <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  3. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  4. crossorigin="anonymous">
  5. </script>
  6. <script>
  7. var postsToLoad= [];
  8. /**
  9. * Runs a get request using ajax
  10. */
  11. function runAjax(url, successCallBack, errorCallBack)
  12. {
  13. console.log(url);
  14. $.ajax({
  15. type:'GET',
  16. url: url,
  17. crossDomain: true,
  18. dataType: "json",
  19. success: successCallBack,
  20. error:errorCallBack,
  21. timeout: 3000
  22. });
  23. }
  24. /** Lazy loads youtube videos on the page
  25. */
  26. function lazyLoad()
  27. {
  28. var youtube = document.querySelectorAll( ".youtube" );
  29. for (var i = 0; i < youtube.length; i++) {
  30. var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
  31. var image = new Image();
  32. image.src = source;
  33. image.addEventListener( "load", function() {
  34. youtube[ i ].appendChild( image );
  35. }( i ) );
  36. youtube[i].addEventListener( "click", function() {
  37. var iframe = document.createElement( "iframe" );
  38. iframe.setAttribute( "frameborder", "0" );
  39. iframe.setAttribute( "allowfullscreen", "" );
  40. iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
  41. this.innerHTML = "";
  42. this.appendChild( iframe );
  43. } );
  44. };
  45. }
  46. function buildPostHTML(post)
  47. {
  48. var pic = '';
  49. if(post.hasPicture)
  50. {
  51. pic = '<img src="/blogContent/headerImages/' + post.picture_url + '" style="width:100%;">';
  52. }
  53. return '<div class="blogPost">' + pic + '<div class="p-4"><b><h3>' + post.name + '</h3></b><h5>' + post.published + '</span></h5><div>' + post.blogBody + '<p class="text-center"><a class="btn btn-secondary btn-lg text-white" href="https://jrtechs.net/' + post.categoryURL + '/' + post.url + '"><b>Read More &raquo;</b></a></p></div></div></div><br><br>';
  54. }
  55. function addPosts(id)
  56. {
  57. return new Promise(function(resolve, reject)
  58. {
  59. runAjax("/api/preview/" + id,
  60. (html)=>
  61. {
  62. var content = buildPostHTML(html)
  63. $("#newPosts").append(content);
  64. //lazy loads youtube videos
  65. lazyLoad();
  66. //highlights code
  67. Prism.highlightAll();
  68. //renders latex math
  69. MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  70. resolve();
  71. },
  72. (err)=>
  73. {
  74. console.log(err);
  75. reject();
  76. });
  77. })
  78. }
  79. async function loadMore()
  80. {
  81. for(var i = 0; i < 3; i++)
  82. {
  83. if(postsToLoad.length == 0)
  84. {
  85. $('#morePostsBtn').html('');
  86. break;
  87. }
  88. await addPosts(postsToLoad.shift());
  89. }
  90. console.log("Wham");
  91. }
  92. $(document).ready(function()
  93. {
  94. runAjax("/api/getPostsIds/{categoryID}",
  95. (idsList)=>
  96. {
  97. postsToLoad=idsList;
  98. },
  99. (err)=>
  100. {
  101. console.log(err);
  102. reject();
  103. });
  104. });
  105. </script>
  106. <br><br><br><br><br>
  107. <div class="container">
  108. <div class="row">
  109. <div class="col-md-8 col-12">
  110. {for post in posts}
  111. <div class="blogPost">
  112. {if post.hasPicture}
  113. <img src="/blogContent/headerImages/{post.picture_url}" style="width:100%;">
  114. {/if}
  115. <div class="p-4">
  116. <h3><b>{post.name}</b></h3>
  117. <h5>
  118. <span class="w3-opacity">{post.published}</span>
  119. </h5>
  120. {post.blogBody}
  121. {if preview}
  122. <p class="text-center">
  123. <a class="btn btn-secondary btn-lg text-white"
  124. href="https://jrtechs.net/{post.categoryURL}/{post.url}"><b>Read More &raquo;</b></a>
  125. </p>
  126. {/if}
  127. </div>
  128. </div>
  129. <br>
  130. <br>
  131. {else}
  132. <div class="row p-lg-0">
  133. <h1 class="align-content-center">Page Not Found</h1>
  134. <div class="align-content-center">
  135. <img src="/includes/img/404.jpg" alt="Page not found" width="70%" />
  136. </div>
  137. </div>
  138. <br><br>
  139. {/for}
  140. <div id="newPosts"></div>
  141. {if preview}
  142. <div class="justify-content-center w-100 blogPost" id="morePostsBtn">
  143. <a class="btn btn-secondary btn-lg btn-block text-white w-100 text-center" id="readMore"
  144. onclick="loadMore()"><b>More Posts &raquo;</b></a>
  145. </div>
  146. {/if}
  147. <br>
  148. </div>
  149. <div class="col-md-4 col-12">
  150. {>sideBar}
  151. </div>
  152. </div>
  153. </div>
  154. {footer}