For lab day I decided to tackle one of my own problems as I tend to be a hoarder when it comes to code snippets. I love checking out CodePen or BootSnipp for inspiration as well as examples of building various components on the web. I also like to download free and open source templates from places like BlackTie and HTML5Up.
My solution is to focus on 3 key goals:
- Be able to easily view all the templates at once
- Be able to search the templates
- Be able to view a specific template
After a bit of back and forth with how I was going to build this, I decided to break up the problem into 3 main files.
- (generate.js) – Create a generator that would build a JSON file containing information about the files and folders in my snippet files, as well as generate screenshots.
- (server.js) – Create a simple Express.js/Node.js app that would showcase these templates and integrate search.
- (index.json) – Create an output JSON file from generate.js that would be read in to server.js for indexing, searching, and viewing
I spent much of the morning leveraging the Node FileSystem package to create my JSON index (index.json) in which I broke down each code snippet/template folder into the following:
- Folder – Name of Folder
- ReadMe – Searched for files named readme so I could parse for search
- License – Searched for files named license so I could parse for search
- Links – Any links in the ReadMes/License files
- Files – List of all files in the folder
- Html – List of HTML files in the folder
- Screenshots – Same list of HTML files but changed extension to .png
- Search – Concatenated text of ReadMes, Licenses and file names.
Once I was able to generate this index.json file, I worked on generating the screenshots using PhantomJS which would iterate through the HTML files and create the screenshots. These screenshots are basically the same HTML path, but with a different extension. Granted I could have left that out, but made it easier when it came to output those with the express app (server.js) later on.
So by early afternoon I was able to create the index.json file, generate the screenshots, and had all of my content created, so with that I switched gears and focused on building the web app.
The web app needed to be beautifully designed and really showcase the screenshots of the code snippets and templates. I wanted to feature the screenshots in a clean and fun way and have a simple search box on top. I came up with the idea to show a cover image if there was just 1 HTML file, split the screen if there were 2 HTML files, and show a cover and all thumbnails below if there were more than 3 HTML files.
One HTML file
Two HTML file
Three or more HTML files
While building the server.js file or express app I tried to limit the amount of required packages as I did not want to have any external requirements such as a database and/or 3rd party API. I wanted to keep everything local and as simple and clean as possible. To solve the search problem and keep it local I found Elasticlunr. I had already created a index of all the content with index.json and just needed to feed in the file in a specific way to build a basic index and allow for searching content. Elasticlunr would be self contained and the results would be the folder name from index.json that I could read in and filter by. It was a pretty simple implementation and seemed to work fairly well while searching.
Here is a quick example of the search.
Having completed the search part and basic design I just needed to put it all together in a final package. After showcasing all the code snippets and templates as one page, I focused on the viewing of each folder and broke the view into 2 types of views.
- Being able to view all HTML files from a folder
- Being able to view each HTML file from a folder
I had to carefully consider how to best showcase the actual source, as you can not just reference the local files in a browser without posing a security risk. I solved this by reading in the files as static content and serving them up.
Here is a specific HTML from a folder
I had a lot of fun solving my own problem and building out this tool. I also got some great feedback from some of the owls in the office, such as looking into saving a hash of the html to keep track of changes to the files for when to update the screenshots when running the generate.js file. Lots of great ideas and things to think about for future iterations.
Here is the final design and look of the app, enjoy! You can also take a look at the code on GitHub