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.

175 lines
5.1 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= [1,3,4,5,6,7,8,12];
  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><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. document.querySelectorAll('pre code').forEach((block) => {
  68. hljs.highlightBlock(block);
  69. });
  70. //renders latex math
  71. MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  72. resolve();
  73. },
  74. (err)=>
  75. {
  76. console.log(err);
  77. reject();
  78. });
  79. })
  80. }
  81. async function loadMore()
  82. {
  83. for(var i = 0; i < 3; i++)
  84. {
  85. if(postsToLoad.length == 0)
  86. {
  87. $('#morePostsBtn').html('');
  88. break;
  89. }
  90. await addPosts(postsToLoad.pop());
  91. }
  92. console.log("Wham");
  93. }
  94. </script>
  95. <br><br><br><br><br>
  96. <div class="container">
  97. <div class="row">
  98. <div class="col-md-8 col-12">
  99. {for post in posts}
  100. <div class="blogPost">
  101. {if post.hasPicture}
  102. <img src="/blogContent/headerImages/{post.picture_url}" style="width:100%;">
  103. {/if}
  104. <div class="p-4">
  105. <h3><b>{post.name}</b></h3>
  106. <h5>
  107. <span class="w3-opacity">{post.published}</span>
  108. </h5>
  109. {post.blogBody}
  110. {if preview}
  111. <p class="text-center">
  112. <a class="btn btn-secondary btn-lg text-white"
  113. href="https://jrtechs.net/{post.categoryURL}/{post.url}"><b>Read More &raquo;</b></a>
  114. </p>
  115. {/if}
  116. </div>
  117. </div>
  118. <br>
  119. <br>
  120. {else}
  121. <div class="row p-lg-0">
  122. <h1 class="align-content-center">Page Not Found</h1>
  123. <div class="align-content-center">
  124. <img src="/includes/img/404.jpg" alt="Page not found" width="70%" />
  125. </div>
  126. </div>
  127. <br><br>
  128. {/for}
  129. <div id="newPosts"></div>
  130. {if preview}
  131. <div class="row justify-content-center w-100" id="morePostsBtn">
  132. <div class="col-md-6 col-12">
  133. <p class="text-center">
  134. <a class="btn btn-secondary btn-lg text-white" id="readMore"
  135. onclick="loadMore()"><b>More Posts &raquo;</b></a>
  136. </p>
  137. </div>
  138. </div>
  139. {/if}
  140. <br>
  141. </div>
  142. <div class="col-md-4 col-12">
  143. {>sideBar}
  144. </div>
  145. </div>
  146. </div>
  147. {footer}