Started to refactor to change css library from w3 to bootstrap

includes/404.html

@@ -1,4 +1,6 @@
-<h1 class="w3-center">Page Not Found</h1>
-<div class="w3-center">
+<div class="row p-lg-0">
+<h1 class="align-content-center">Page Not Found</h1>
+<div class="align-content-center">
     <img src="/img/website/404.jpg" alt="Page not found" width="70%" />
 </div>
+</div>

includes/footer.html

@@ -1,27 +1,67 @@
-<!-- END w3-content -->
-</div>
-    </div>
+
+<!-- Close section -->
 </div>
 
 <!-- Footer -->
-
-<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
-
-    <div class="w3-row">
-        <div class="w3-third w3-container">
-
-        </div>
-        <div class="w3-third w3-container">
-
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
         </div>
-        <div class="w3-third w3-container">
-
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                        document.write(new Date().getFullYear());
+                    </script> Jrtechs</p>
+                </div>
+            </div>
         </div>
     </div>
-    <div class="w3-center">Copyright &copy; <a href="https://jrtechs.net">Jrtechs.net</a> 2018</div>
 </footer>
+
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-51392711-1"></script>
 <script>

includes/header.html

@@ -1,47 +1,72 @@
 <!DOCTYPE html>
 
 <html>
+<head>
+    <title>Jrtechs</title>
 
-<title>Jrtechs</title>
+    <meta charset="UTF-8">
 
-<meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
 
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="/css/bootstrap.css" media="screen">
 
-<meta name="description" content="Blog of Jeffery Russell, featuring technical guides, and projects.">
+    <meta name="description" content="Blog of Jeffery Russell, featuring technical guides, and projects.">
 
-<meta name="author" content="Jeffery Russell">
+    <meta name="author" content="Jeffery Russell">
 
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 
 
-<link rel="stylesheet"
-      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
+    <link rel="stylesheet"
+          href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
-<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
-<style>
-    html, body, h1, h2, h3, h4, h5, h6 {
-        font-family: 'Open Sans', sans-serif;
-    }
-    p{font-size:18px;}
-</style>
+    <style>
+        html, body, h1, h2, h3, h4, h5, h6 {
+            font-family: 'Open Sans', sans-serif;
+        }
+        p{font-size:18px;}
+    </style>
+</head>
 
-<!-- Navbar -->
-<div class="w3-top">
-    <div class="w3-bar w3-dark-grey w3-card">
-        <a href="/" class="w3-bar-item w3-button w3-padding-large">Home</a>
-        <a href="https://github.com/jrtechs" class="w3-bar-item w3-button w3-padding-large w3-hide-small">GitHub</a>
-        <a href="https://jrtechs.me" class="w3-bar-item w3-button w3-padding-large w3-hide-small">Portfolio</a>
-        <a href="https://www.youtube.com/channel/UCbebizd25t22-vv13_lr9_A"
-           class="w3-bar-item w3-button w3-padding-large w3-hide-small">Youtube</a>
+<body>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a class="navbar-brand" href="#">Jrtechs</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="graphs.html">Categories</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="faq.html">Contact</a>
+                </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li>
+                    <a class="nav-link" href=https://jrtechs.me">Portfolio</a>
+                </li>
+                <li>
+                    <a class="nav-link" href="https://github.com/jrtechs">Github</a>
+                </li>
+                <li>
+                    <a class="nav-link" href="https://www.youtube.com/c/JrtechsNet">Youtube</a>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>
-
-<body class="w3-light-grey">
-<div class="w3-content w3-padding-64" style="max-width:1400px">
-    <div class="w3-row">
+<br><br><br>
+<div class="container">

posts/category.js

@@ -15,7 +15,7 @@ var renderPosts = function(result, resultURL)
     var splitURL = resultURL.split("/");
     if(splitURL.length >= 3)
     {
-        result.write("<div class=\"w3-col l8 s12\">\n");
+        result.write("<div class='col-md-8'>");
 
         return new Promise(function(resolve, reject)
         {

posts/homePage.js

@@ -18,7 +18,7 @@ var renderRecentPosts = function(result)
         sql.getRecentPostSQL().then(function(posts)
         {
             var postPromises = [];
-            result.write("<div class='w3-col l8 s12'>");
+            result.write("<div class='col-md-8'>");
             posts.forEach(function(post)
             {
                 postPromises.push(new Promise(function(res, rej)

posts/posts.js

@@ -15,7 +15,7 @@ var renderPost = function(res, requestURL)
 {
     return new Promise(function(resolve, reject)
     {
-        res.write("<div class=\"w3-col l8 s12\">");
+        res.write("<div class='col-md-8'>");
         var splitURL = requestURL.split("/");
 
         //user entered /category/name/ or /category/name

posts/singlePost.js

@@ -40,7 +40,9 @@ module.exports=
     {
        return new Promise(function(resolve, reject)
        {
-           var html = "<div class=\"w3-card-4 w3-margin w3-white\">";
+           //var html = "<div class=\"w3-card-4 w3-margin w3-white\">";
+
+           var html = "<div class=\"row\">";
 
            //image
            if(!(post.picture_url === "n/a"))
@@ -49,7 +51,7 @@ module.exports=
                    "\" alt=\"\" style=\"width:100%\">";
            }
 
-           html += "<div class=\"w3-container\">";
+           html += "<div class=\"container\">";
            //title
            html += "<h3><b>" + post.name + "</b></h3>";
            //date
@@ -57,7 +59,7 @@ module.exports=
                post.published.toDateString() + "</span></h5>";
            html +="</div>";
 
-           html += "<div class=\"w3-container\">";
+           html += "<div class=\"container\">";
 
            try
            {
@@ -78,7 +80,7 @@ module.exports=
 
                    html = html.split("<img").join("<img style=\"max-width: 100%;\" ");
 
-                   html += "      <div class=\"w3-row\">\n" +
+                   html += "      <div class=\"row\">\n" +
                        "          <p class='w3-center'><button class=\"w3-button " +
                        "w3-padding-large w3-white w3-border\"  onclick=\"location.href='" +
                        "http://jrtechs.net/" + category[0].url + "/" + post.url +
@@ -114,7 +116,7 @@ module.exports=
     {
         return new Promise(function (resolve, reject)
         {
-            var html = "<div class=\"w3-card-4 w3-margin w3-white\">";
+            var html = "<div class=\"container\">";
             //image
             if(!(post.picture_url === "n/a"))
             {
@@ -122,7 +124,7 @@ module.exports=
                     "\" alt=\"\" style=\"width:100%\">";
             }
 
-            html += "<div class=\"w3-container\">";
+            html += "<div class=\"container\">";
             //title
             html += "<h3><b>" + post.name + "</b></h3>";
             //date
@@ -130,7 +132,7 @@ module.exports=
                 post.published.toDateString() + "</span></h5>";
             html +="</div>";
 
-            html += "<div class=\"w3-container\">";
+            html += "<div class=\"container\">";
             try
             {
                 sql.getCategory(post.category_id).then(function(category)

server.js

@@ -7,8 +7,6 @@
 
 const http = require('http');
 
-const https = require('https');
-
 const url = require('url');
 
 var express = require("express");
@@ -28,10 +26,6 @@ var app = express();
 
 app.use(session({ secret: utils.getFileLine('../session_secret'), cookie: { maxAge: 6000000 }}));
 
-var privateKey = fs.readFileSync('/etc/letsencrypt/live/jrtechs.net/privkey.pem');
-
-var certificate = fs.readFileSync('/etc/letsencrypt/live/jrtechs.net/cert.pem');
-
 var port = 8000;
 
 

sidebar/categoriesSideBar.js

@@ -14,18 +14,21 @@ module.exports=
         {
             return new Promise(function(resolve, reject)
             {
-                res.write("<div class=\"w3-card w3-margin\">");
+                res.write("<div class=\"container\">");
 
-                res.write("<div class=\"w3-container w3-padding w3-gray\"><h4>Categories</h4></div>");
+                //res.write("<div class=\"w3-container w3-padding w3-gray\"><h4>Categories</h4></div>");
 
-                res.write("<div class=\"w3-bar-block w3-white\">");
+                res.write("<div class=\"container\"><h4>Categories</h4></div>");
+
+                //res.write("<div class=\"w3-bar-block w3-white\">");
+                res.write("<div class=\"\">");
 
                 sql.getCategories().then(function(categories)
                 {
                     categories.forEach(function(cat)
                     {
                         //res.write(cat.name);
-                        res.write("<a class=\"w3-bar-item w3-button\" href='/category/" + cat.url + "'>" + cat.name + "<br></a>");
+                        res.write("<a class=\"btn-lg\" href='/category/" + cat.url + "'>" + cat.name + "<br></a>");
                     });
                     res.write("</div></div>");
                     resolve();