Camunda Team Blog

A new blog for Camunda BPM posse

Written by Valentin Vago on , under Community category.

I was delighted when Daniel asked me to valify (as Robert says) the Camunda BPM Team Blog and make it fit our CI (nope, for once, this ain’t meaning Continuous Integration).
Here’s the little story about that work… erm… fun and some show-off about the new blog features.

Who, nowadways, wants to write HTML?

None of my colleagues, that’s pretty much a fact.

And since we rebuild our documentation website using Hugo and liked it, it seemed legit to continue with that stack.

One cannot just drop the older posts

That’s kind of obvious.

So how would you import the posts written on blogger?
The nerd would probably start writing a client which would pump the posts using the blogger API and stuff.

I’m more of a creative guy. Which means that I don’t make a fuss about the way, I want to reach my goals (which, by the way, might not always be the , a bit like when a colleague put a style attribute in the HTML).
I went to the Google API console and got myself all the posts from there. Tada.

After that, it’s piece of cake, a grunt task consumes the JSON and creates the markdown files.

Content organization

Because Camunda evolves.

We will organize the content of the blog under 3 categories:

  • Modeling
    Will get content about BPMN.io, Camunda Modeler and other *MNs modeling tools and practices.
  • Execution
    For the engine and platform related posts.
  • Community
    Because the community releases some projects which are worth talking about.

New features?

Sure, got plenty.

Text formatting

Because a blog post ain’t javadoc.

I tried to make the text of the posts as readable as possible and took care to keep the layout quiet so it doen’t disturbs the reading experience.

Blockquotes

Could be written the markdown way

> Anything that can go wrong will go wrong.

which renders

Anything that can go wrong will go wrong.

or using the special shortcode, which is used like

{{< blockquote attr="Capt. Ed Murphy" attrlink="https://en.wikipedia.org/wiki/Edward_A._Murphy,_Jr." >}}
Anything that can go wrong will go wrong.
{{< /blockquote >}}

and allows to format something said and mention its author

Anything that can go wrong will go wrong.

Images

Are loaded when the reader reaches them (a technic which is called _lazy loading_ and prevents your mobile data plan to be consumed when you look at kitten images).

{{< figure src="please-have-a-seat.jpg" alt="Picture of the office." title="Please have a seat." caption="We're ready!" attr="V. Vago" attrlink="http://twitter.com/zeropaper" >}}

produces

Picture of the office.

Please have a seat.

We're ready! V. Vago

BPMN diagrams

Based on Hugo shortcodes and bpmn.io, authors can now add their diagrams in a post in a breeze like that:

{{< bpmn-viewer name="order-process" >}}

And it renders something like that:

BPMN symbols

Also base on Hugo shortcodes, you can add all the symbols contained in the bpmn-font project.

<div>{{< bpmn-icon name="end-event-none" >}}</div>

produces

Responsive layout

Yep, because it’s nice to be able to read blogs on mobile devices.
On top of that, in order to make the page load fast (and avoid hurting your mobile data plan), most of the big features are loaded as the reader reaches them.

Code highlighting

You saw it above in action but here’s other example with some Markdown formatted text:


# Heading 1
## Heading 2
### Heading 3

> blockquote

[link](//url.com)

and a last one with some bash

sudo ./fix-ie.sh # will segfault

Emoji

Na. Not yet. We’re not here for fun.