Question about this setup/layout is doable in Harp?

ajmalafif commented 10 years ago

I stumbled across Harp while searching for static generator (I've tried few of them; octopress, hexo, ghost and assemble) but so far none works to what I've trying to achieve. Assemble.io was the closest but some parts like pagination is not doable.

Then I stumbled upon Harp and it gives the impression that it's able to achieve what I was looking for; but would appreciate some feedbacks and guides from those with experience in Harp if this is doable;

Thanks for your time and concern!

shovon commented 10 years ago

I think that it's definitely possible.

Assuming that you have a separate directory for your work, you can include a _data.json file in a work folder, and define a list of all your work. I think it should be pretty similar to creating a blog.

shovon commented 10 years ago

And also, I think you can access a list of all blog posts from any directory, and any template file.

From a jade file, you can access the properties defined in work/_data.json file via public.work._data, and in it, you will find a list of all your work.

Want to access the blog from your the work folder? It's easy, assuming you have a blog/_data.json file set up. You can get a list of all posts from public.blog._data.

shovon commented 10 years ago

Disclaimer: I'm not a Harp contributor at all. Just a Harp user, that really, really likes this static site generator.

sintaxi commented 10 years ago

@ajmalafif Yep, looks like a great use case for harp. I would approach it just as @shovon suggests. Have a work directory and a blog directory that will contain your .md files and you can use .jade or .ejs to iterate over your blog posts and work files to build your navigation.

If you need help with this, you can likely find help in the #harp IRC channel. Good luck.

kennethormandy commented 10 years ago

Hey @ajmalafif, this is very similar to what working on with my own portfolio right now, right down to the art directed posts.

I would set it up something like this:

▾ /
  ▪ _layout.jade         <-- Basic layout, head tag, etc. will wrap everything
  ▪ _shared/             <-- A partials directory, can be named anything starting with _ 
      ▪ feature-1.jade   <-- Could be the features in the circles in the screenshots
      ▪ feature-2.jade  
  ▪ index.jade           <-- Index page, you could include the partials in _shared/ here
  ▪ 404.jade             <-- Your 404 page, will get served at /404
  ▪ about.md             <-- Your about page, will get served at /about
  ▪ css/
      ▪ _bootstrap       <-- Prevent Bootstrap from being served by adding the LESS files here
      ▪ _variables.scss  <-- A LESS partial with Bootstrap variable overrides
      ▪ main.less        <-- Main LESS file, Can @import Bootstrap and other partials here
  ▪ portfolio/
      ▪ _data.json       <-- Your portfolio’s flexible metadata
      ▪ index.jade       <-- Portfolio index
      ▪ project-1.md     <-- A portfolio item
      …
      ▪ project-6.md     <-- Another portfolio item
      ▪ project-7.jade   <-- A project where you want more layout control, so used Jade or EJS

Now, for the art directed posts, you can use Harp’s current variable. You can use it in the _layout file, something like this:

doctype
html(class="#{ current.path[1] == 'portfolio' && current.source !== 'index' ? current.source : '' }")
  head
    //- And so on…

When you visit portfolio/project-6, This will render as:

<!DOCTYPE html>
  <html class="project-6">
    <head>
      …

…allowing you to style the post differently. When you visit other pages, it will just render without a class name. You could change this however you want, and just have the page’s class name everywhere if you decided that was appropriate for your used case. Another example might be to prefix the class name with art-dir- or something.

I’ll probably just end up going into more detail with this with a post once I finish the changes to my own site (ha.) The first part is on starting a blog with Harp, and contains some basics which might be helpful. Hopefully that gets you started, anyway. Like sintaxi said, we’re in the IRC a lot if you have questions.

ajmalafif commented 10 years ago

@shovon @sintaxi hey guys thanks for pointers and help!

@kennethormandy omg that's very useful and helpful with Harp's current variable which is exactly what I need!! I think the blog part is simpler than the art-directed part, just have to load .md files to make it works.

Look forward to that blog post and please do notify us! I'm quite busy juggling work right now but gonna give this another try when I have find time for it. I think that set up you posted should nail it.

Have to be honest I'm quite "new" to IRC, don't own a PC back in the era but sure, will get a hang of it and ask any concerns and questions I have if I'm stuck or something.

Thanks again all really really appreciate it!

ps: btw @kennethormandy wow what an awesome blog post you have there. Look forward to the 2nd and 3rd post of that series. Subscribed!

ajmalafif commented 10 years ago

@kennethormandy @shovon @sintaxi

Wow managed to get lotsa of progress with Harp. Harp is unbelievable awesome. Very flexible and comprehensive feature-wise. I had a lot of questions but the docs are pretty extensive so got almost all issues solved just by going through it :+1:

However @kennethormandy's code for appending html class:

doctype
html(class="#{ current.path[1] == 'portfolio' && current.source !== 'index' ? current.source : '' }")
  head
    //- And so on…

doesn't seem to work. I guess I'll make do with what's available and doable for now. Definitely looking forward to that detailed post on how to achieve that use case. That blog post @kennethormandy wrote is definitely helpful. Manage to get all sort of things working like site's meta and title, list of posts, sitemap.xml and more.

My next goal (apart from that art-directed solution) is to adopt Bootstrap's css and js into Harp (saw it was in the recipe tutorial list but it's not yet available/clickable). From example above it looks like it's not that hard to include.

Do you think it's overkill to manage Harp + Bootstrap setup with Bower? Would love some feedback on that. Btw, here's my progress so far: https://github.com/ajmalafif/harp.js

kennethormandy commented 10 years ago

Sorry, my Jade might have a mistake. I’ll revisit the art direction stuff for you later.

You can definitely try Bower if you prefer it, just make sure Bootstrap ends up in a directory with an underscore at the beginning so Harp knows to avoid compiling each partial.

We’re actually experimenting with Component if you’d like to try it out:

sudo npm install -g component

To install Bootstrap, run the following command from the root of your Harp project:

component install harp/bootstrap

Your project will look something like this…

myproject/                  <-- your project root
  |- components/            <-- harp puts components here
  |   +- harp-bootstrap/    <-- where this lib gets installed
  |       …
  |- main.less              <-- where you reference Bootstrap 
  +- index.jade             <-- where you reference main.css

Now, from within a .less file in your project, you can @import Bootstrap:

@import "components/harp-bootstrap/less/_bootstrap.less";

Or, just a portion of Bootstrap:

@import "components/harp-bootstrap/less/_variables.less";
@import "components/harp-bootstrap/less/_mixins.less";
@import "components/harp-bootstrap/less/_grid.less";

Glad you’re enjoying Harp! Let me know if you have any questions, and feel free to open issues if you felt like there were places in the docs that could be improved.

ajmalafif commented 10 years ago

@kennethormandy

No worries! Well I was gonna give Bower a run but now that you're introducing this Component, it seems like it's much cleaner and less hassle to integrate into Harp. I might give it a run and see how it goes (and share any findings and feedback I might have as well).

Thank you for the kind word and offer. Will definitely do if I have any. So far it's pretty solid for me. Definitely a :100: out of :100:!

Thanks again!

kennethormandy commented 10 years ago

This has been documented as an static art directed blog posts recipe

sintaxi / harp

Question about this setup/layout is doable in Harp? #186