updating some content. No longer a student. wooot

prestart.js

@@ -6,6 +6,7 @@
 // that we aren't converting MD -> ejs
 // on EVERY request
 const showdown  = require('showdown'),
+    showdownHighlight = require("showdown-highlight"),
     fs        = require('fs'),
     mkdirp    = require('mkdirp'),
     inputDir  = './project_writeups/',
@@ -41,7 +42,7 @@ const addClass = {
 
 // create our Showdown converter with our custom extension
 const converter = new showdown.Converter({
-    extensions: [addClass]
+    extensions: [addClass, showdownHighlight],
 });
 
 // make the directory for our html output if necessary

project_writeups/myWebsite.md

@@ -0,0 +1,43 @@
+# My Website
+
+Starting out with this website, I had essentially no knowledge of modern web technologies. I knew that I wanted something modern but also easy to maintain that I could use well into the future.
+
+The end result is the site you see here. By no means perfect or beautiful, but functional and a place where I can store guides mainly for my benefit. But maybe for your benefit too? I certainly dont know who's reading this ¯\\\_(ツ)_/¯
+
+As I'm writing this page after the fact (about a year since originally making this site), I'll likely glaze over a lot of the details.
+
+## Technologies Used
+
+- [Node](https://nodejs.org/) for quick 'n easy webserver creation
+
+- [NPM](https://www.npmjs.com) for a bunch of support packages
+
+- [ExpressJS](https://expressjs.com) for amped up static pages. Express is great for beginners that want a simple framework for a static website with no code duplication
+
+- [Bootstrap](https://getbootstrap.com) to make it all pretty
+
+- Other stuff
+
+## Express
+
+Originally I started this site as a pure html/bootstrap affair. This worked for all of 2 days until I got sick of copying and pasting code all over the place. While I had no desire to maintain duplicate copies of code, I was even less interested in using some massive overkill framework (as an embedded dev, I have a need for speed). Low and behold: ExpressJS! The perfect minimal framework solution for my problem. Express has a concept of 'pages' and 'partials'. A page defines the overall structure of a static webpage (say my home page). Partials define chunks/components of that page that are shared in other locations. So for example, all the html for my navigation/ header bar has its own partial, as does the footer. Then in a page, to use this content you can simply add a `<% include` as if you were writing a C program! Express was speaking my language.
+
+## Static Project Pages
+
+The bulk of the effort for me was sunk into generating the project writeup pages (like the page you're reading this off of _right now_!). I wanted them to be simple static text, images and video. But I didn't want the complexity of using a whole framework like wordpress, and I definitely wasn't into the idea of writting everything in html. I wanted my writeups to be in a portable format I could easily migrate or use in other places in the future.
+
+Given these requirements I thought it best to write about all of my projects in markdown. I've used markdown for years and like its readability and easy syntax. To convert my markdown to HTML, I grabbed [showdown](https://github.com/showdownjs/showdown). Showdown does it's job well and has some hooks (called 'extensions') that made it easier for me to get the formatting jusssst right. At present the only extension I've created helps make the title/H1 of each writeup nice and big (ie: look at those big 'My Website' letters up top). All the showdown generator stuff lives in `prestart.js` which is run before the server is started so the markdown is generated once and can then be served statically for all time.
+
+I saved showdown's resulting files as ExpressJS partials. These partials are linked to a template page which adds the header, footer and table of contents you see here. Then, any requests that contain `/projects` actually load the `project_template` page with the requested project-name partial. Express makes this all surprisingly simple (I say after struggling with it for hours):
+
+```js
+if (pathname.includes('projects') && page !== 'index') {
+    // projects has a custom template that is used for all projects
+    // so we need to change the pathname that the renderer is using
+    // that template:
+    pathname = pathname.substr(0, pathname.lastIndexOf(page));
+    pathname += 'project_template'
+    // provide the pagename for project_template to use for main content
+    page = 'partials/md/' + page;
+}
+```

server.js

@@ -22,9 +22,10 @@ app.get(/\/.*/, function(req, res) {
         if (pathname.includes('projects') && page !== 'index') {
             // projects has a custom template that is used for all projects
             // so we need to change the pathname that the renderer is using
-            // to that template:
+            // that template:
             pathname = pathname.substr(0, pathname.lastIndexOf(page));
             pathname += 'project_template'
+            // provide the pagename for project_template to use for main content
             page = 'partials/md/' + page;
         }
     }
@@ -33,4 +34,4 @@ app.get(/\/.*/, function(req, res) {
     res.render(pathname, {"page": page});
 });
 
-app.listen(PORT);
+app.listen(PORT);

views/pages/contact.ejs

@@ -14,11 +14,11 @@
 		<div class="cenMain">
 			<h1>Contact me</h1>
 			<p>As a lonly explorer of the interwebs, I welcome the warm embrace of human contact. Please email me with the below address:</p>
-			<h2>contact@lenord.me</h2>
+			<h2>len0rd@fastmail.co.uk</h2>
 		</div>
 	</div>
 
 	<% include ../partials/footer %>
 	<% include ../partials/post_html_include %>
 </body>
-</html>
+</html>

views/pages/index.ejs

@@ -30,7 +30,7 @@
                         <samp class="display-1 ml-auto">></samp>
                     </div>
                     <div class="col-8">
-                        <samp>I'm an American Computer Engineering student with diverse industry experience. From large commercial Java projects to low-level C firmware development, I've done a little bit of everything (except web development as will be evident with this website). Such experience allows me to understand and solve new problems quickly. My hobbies are just as eclectic as my professional experience. This website showcases many of my personal projects.</samp>
+                        <samp>I'm an American embedded software engineer with diverse industry experience. From large commercial Java projects to low-level C firmware development, I've done a little bit of everything (except web development as will be evident with this website). Such experience allows me to understand and solve new problems quickly. My hobbies are just as eclectic as my professional experience. This website showcases many of my personal projects.</samp>
                     </div>
                 </div>
             </div>
@@ -86,7 +86,7 @@
                             <p class="card-text">A post on my website about how I built my website? Yep. Turns out things aren't quite plug 'n play when you're a stubborn engineer who wants something to function in a very specific way</p>
                         </div>
                         <div class="card-footer pb-3">
-                            <a href="#" class="btn btn-outline-light">Read More</a>
+                            <a href="projects/myWebsite" class="btn btn-outline-light">Read More</a>
                             <a href="https://github.com/len0rd/personal-website" class="card-link card-soft-link">See Code</a>
                         </div>
                     </div>
@@ -113,4 +113,4 @@
     <% include ../partials/footer %>
     <% include ../partials/post_html_include %>
 </body>
-</html>
+</html>

views/partials/include.ejs

@@ -4,4 +4,5 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
 <link rel="stylesheet" type="text/css" href="/css/site.css">
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">