From 860b6b1dbe5a28b39b1f7ec56c3754b7b48d699a Mon Sep 17 00:00:00 2001 From: Dennis Brentjes Date: Sun, 26 Oct 2014 18:22:18 +0100 Subject: Finalizes the project page, and creates a post about it. --- _posts/2014-10-14-DMP-progress.markdown | 20 ------ _posts/2014-10-14-Project-progress.markdown | 20 ++++++ _posts/2014-10-26-learning-how-to-jekyll.markdown | 83 +++++++++++++++++++++++ 3 files changed, 103 insertions(+), 20 deletions(-) delete mode 100644 _posts/2014-10-14-DMP-progress.markdown create mode 100644 _posts/2014-10-14-Project-progress.markdown create mode 100644 _posts/2014-10-26-learning-how-to-jekyll.markdown (limited to '_posts') diff --git a/_posts/2014-10-14-DMP-progress.markdown b/_posts/2014-10-14-DMP-progress.markdown deleted file mode 100644 index 5c9d8f9..0000000 --- a/_posts/2014-10-14-DMP-progress.markdown +++ /dev/null @@ -1,20 +0,0 @@ ---- -layout: post -title: "Project progress" -date: 2014-10-14 15:53:00 ---- - -So I haven't updated my site in a while now, aside for some technical details. -But I have been working on DMP in the meanwhile. -I have made such progress that I should update the DMP project page. -But I also want to update my project page so it can more easily function as a portfolio. -So the idea is to give a concise overview of my current and past projects and link to a more detailed view. -But the problem is how can I concisely depict a source code project. -Especially when it is a command line tool. -So I cannot use an array of pictures, or at least it would look a bit silly. - -So thats something I need to figure out first. -Then I can update the DMP project page, just to pressure myself to make the projects page. -And then I can add some more projects. -Even some smaller 1-day of coding projects that were just made for fun. -So stay tune if you are reading this. diff --git a/_posts/2014-10-14-Project-progress.markdown b/_posts/2014-10-14-Project-progress.markdown new file mode 100644 index 0000000..5c9d8f9 --- /dev/null +++ b/_posts/2014-10-14-Project-progress.markdown @@ -0,0 +1,20 @@ +--- +layout: post +title: "Project progress" +date: 2014-10-14 15:53:00 +--- + +So I haven't updated my site in a while now, aside for some technical details. +But I have been working on DMP in the meanwhile. +I have made such progress that I should update the DMP project page. +But I also want to update my project page so it can more easily function as a portfolio. +So the idea is to give a concise overview of my current and past projects and link to a more detailed view. +But the problem is how can I concisely depict a source code project. +Especially when it is a command line tool. +So I cannot use an array of pictures, or at least it would look a bit silly. + +So thats something I need to figure out first. +Then I can update the DMP project page, just to pressure myself to make the projects page. +And then I can add some more projects. +Even some smaller 1-day of coding projects that were just made for fun. +So stay tune if you are reading this. diff --git a/_posts/2014-10-26-learning-how-to-jekyll.markdown b/_posts/2014-10-26-learning-how-to-jekyll.markdown new file mode 100644 index 0000000..a76cb0e --- /dev/null +++ b/_posts/2014-10-26-learning-how-to-jekyll.markdown @@ -0,0 +1,83 @@ +--- +layout: post +title: "Learning how to Jekyll: the projects page." +date: "2014-10-26" +--- + +So I wanted to create a better projects page. One that generates itself and generates every project page from some kind of input. Enter the world of Jekyll generators. + +I first was a bit put off by the prospect of diving into ruby. But I really wanted a way to generate new project pages based on content and not handcraft each page. I also wanted to use markdown for this because It would then be similar to the posts. + +So first I define a list of associative arrays in my main config that define my projects. These associative arrays contain a name, a markdown file and a thumbnail to be used on the main projects page. This is all information I need to add in the config. + +But then I need to generate the project page itself. This is where the Jekyll plug-in system comes into play. This is my project page generator. + +``` +module Jekyll + + class ProjectPage < Page + def initialize(site, base, dir, project) + @site = site + @base = base + @dir = dir + @name = project['name'] + '.html' + + self.process(@name) + self.read_yaml(File.join(base, '_layouts'), 'project.html') + self.data['project_name'] = project['name'] + + self.data['file'] = project['file'] + end + end + + class ProjectGenerator < Generator + safe true + + def generate(site) + dir = site.config['projects_dir'] || 'Projects' + site.config['projects'].each do |project| + site.pages << ProjectPage.new(site, site.source, dir, project) + end + end + end +end +``` + +This creates the necessary html pages, but now I still need to be able to "include" files from my custom Project folder. So I created an liquid tag that does that. + +``` +module Jekyll + class InputProjectTag < Liquid::Tag + + def initialize(tag_name, text, tokens) + super + @text = text; + end + + def render(context) + site = context.environments.first['site'] + + #set your project dir. + dir = 'Projects' + if defined? site.projects_dir + dir = site.projects_dir + end + source = site['source'] + + #render the variable to the markdown filename + content = Liquid::Template.parse(@text).render(context.environments.first) + path = File.join(File.join(source, dir), content); + + input = IO.read(path.strip()) + + #render the markdown file with the variables of the project. + return Liquid::Template.parse(input).render(context) + + end + end +end + +Liquid::Template.register_tag('include_project', Jekyll::InputProjectTag) +``` + +The only downside of this is that with jekyll --watch new projects will not appear on the webpage, It seems the global config file is not watched, or maybe its something entirely different. I will look into this later down the line but for now I just wanted to share these modules. -- cgit v1.2.3-70-g09d2