Tree style blog posts

[Widdershin]

Following on from a conversation on Friday...

So I had this idea where I wanted to write tree style blog posts, with the idea being that the top level contains simple overviews, and you can drill down into each section for more detail.

I made a little prototype just using jQuery and HTML. https://jsfiddle.net/7oy105ak/1/

After talking to @mixmix, it seems hypermarkdown would benefit from displaying a visual border/indentation from where another document has been included.

From my point of view, I'd like to be able to write a tree style post in a markdown file and display it with hypermarkdown on my blog. It would be cool if I could use hypermarkdown to achieve this.

Some stuff that I see needs to happen to satisfy this:

• Visual indication of hypermarkdown inclusion
• Inline tree style content in markdown

Nice to have:

• Offline tool to create hypermarkdown snapshots for graceful degradation on static sites.

[mixmix]

nice demo! I'm imagining a toggle at the top of the page which changes the render of hte page from seamless inclusion to collapsed expandable inclusions. Can't see this being too hard

if you're interested in having a play, you could check the api :
e.g.
http://hypermarkdown.herokuapp.com/api/render?source=https://github.com/mixmix/example-course/blob/master/mix-recipe.md

note if you currently hit the api with something that's not right it crashes the server D:

the MD is all rendred in there, and building the full page is pretty easy, just check out the children for each node and do some sort of injection at the appropriate point in the code. Specifically if there is a child with source=child_source do some sort of replace insertion of the pattern:

+<a href=cild_source>...</a>

I'm not currently interested in building for offline support - I'm interested in supporting behaviour that leads to more mashing up and sharing of resources.

You could use the API and some of the scripts to render one-offs.
If there's a way to easily include client side JS, do you think you could use hypermarkdown in a jekyl setup?

[mixmix]

ok the api is more resilient now

[Widdershin]

Regarding an offline tool; I thought about this more on my walk home. I had overlooked the updated content element of it. I think I'll start out by just including hypermarkdown as a JavaScript library, but eventually I would like to add graceful degradation to a snapshot from when the site was built (my motivation for this is to appease the NoScript crowd on Hacker News 😛).

Also I think your changes broke your actual app (https://hypermarkdown.herokuapp.com/?source=www.github.com/loomio/loomio/blob/master/lineman/README.md).

[Widdershin]

Also, I was thinking of potentially making the tool that extends markdown to have inline tree syntax a different thing from hypermarkdown, and then composing them in some way. Mostly for the sake of the unix philosophy. Thoughts?

[mixmix]

uhhh I built some of the solution already .. the jquery isn't in but the classes are all there and ready to collapse them (hmmm ... needs data-attribute to give collapsed this title perhaps)

http://hypermarkdown.herokuapp.com/?source=https://github.com/mixmix/example-course/blob/master/mix-recipe.md&style=stitched

---

hah, that error was only partly me. the breaking change was that MD file on loomio no longer exists !
I've got better error catching now so it don't crash the app :P
thanks for spotting

[mixmix]

I think you should roll what you're describing in here.
it's so close to what i'm doing it's kinda crazy. Also we can extract components later?

[Widdershin]

Okay cool, I'll build it as part of hmd.

I was thinking of something like this for the inline syntax:

+ How to bake a cake
  Baking a cake is simple.

  + Get ingredients
    Eggs
    Sugar
    etc

  + Mix that shit together 
    Put the eggs in a bowl with the rest of the stuff

  + Cook for 50 minutes

What do you think?

[mixmix]

oh I see what you mean. Sorry, I misunderstood
I was imagining just using the HMF include so the code might look like

May 26th BLOG
Check out this sweet recipe

+[How to bake a cake](link_to cake_recipe.md)

---

cake_recipe.md

Baking a cake is simple.

  +[Get ingredients](link to ingedients)
  +[Mix that shit together](link to combining instructions ) 
  Cook for 50 minutes

---

etc.
having stuff so spread out might be too annoying though. but you could easily leverage the HMD builder to make expandable entries this way.

If you're going the other way then an addition to MD rendering would be good. Sounds like a nice little node package.... mind you it would also need some JS included in clientside anyway for the expand/collapse right ...

myeaahh

[Widdershin]

Yeah, I think that (including all the sections) would be a bit annoying for my particular purpose. I recognize that inline content is kinda against the point of HMD, but it seems like it would be useful for some more basic use cases. I would like to structure the tree syntax so that it's easy to change a section from inline to included.

Regarding including it in the clientside JS, it seems like you're using browserify already, so it would be easy to require the markdown tree syntax thing as a node module. It is a good question as to where the clientside jQuery stuff should go, but I think that will become more apparent once I make a thing.

[mixmix]

Sweet. Let's keep in touch on this though. I reckon what you're making
would be super useful for the projects I'm interested in.

I also think we both have the same challenge around non-standard md
rendering to solve

On Tue, 26 May 2015 13:15 Nick Johnstone notifications@github.com wrote:

Yeah, I think that (including all the sections) would be a bit annoying
for my particular purpose. I recognize that inline content is kinda against
the point of HMD, but it seems like it would be useful for some more basic
use cases. I would like to structure the tree syntax so that it's easy to
change a section from inline to included.

Regarding including it in the clientside JS, it seems like you're using
browserify already, so it would be easy to require in the markdown tree
syntax thing as a node module. It is a good question as to where the
clientside jQuery stuff should go, but I think that will become more
apparent once I make a thing.

—
Reply to this email directly or view it on GitHub
#1 (comment).

[mixmix]

@Widdershin check it :
http://hypermarkdown.herokuapp.com/?source=https://github.com/mixmix/example-course/blob/master/mix-recipe.md

click the 'stitches' option to highlight the joins.
This also reveals an option to collapse sections