Will Birch be as theme-able as FoldingText


#1

Continuing the discussion from Birch 0.1.0 “Dev” release:

I’m not a huge fan of the way that Birch looks in the current Atom themes, but for the moment I’ve decided to just plug Birch into Atom’s theme system and focus on other things. But in the end yes, Birch is as or more them-able then FoldingText.

Yes, I’m going to post a quick example as another topic in a few minutes.

In the current version there are not commands for setting an item’s “type”. So there’s no way to distinguish h1 items from h2 items other then looking at things such as “does the item have children” or is the item “top level”… (I’ll be using those attributes in the example that I post in a few minutes).

But before too long I’ll start adding commands (it’s a very simple process) that will allow you to set a specific “type” for an item. And then you’ll be able to style that item based on the type. So for example you could set an item’s “type” to H1 and then style it bigger and bolder.

This is something that I want to do so that I can use Birch to write the users guide. My process will be:

  1. Write documentation in Birch. Add types such as h1, h2, ordered list, unordered list, code block, etc to items. Visually my outline will still look like an outline. But I’ll add some style rules so that h1 items are bigger and bold. Code blocks have a monospace font. List items will likely have a bullet drag handle instead of an arrow.

  2. When I’m ready I’ll generate Markdown from that outline.

  3. And then generate HTML from the Markdown. So my final document will be normal HTML with H1’s etc, though I’ll do all my authoring and editing in Birch.

As I build that in I’ll share those commands with the group here.

Not directly. It will certainly be possible to recreate, but will need different LESS rules.


Birch styling example
#2

Ah, this leads me to another question I can’t believe I didn’t think of earlier: is Birch going to support the “modes” from FT (e.g., .todo; .timer; etc.)? Are these also different “types”?


#3

That’s certainly a goal, though I haven’t implemented them yet.

The implementation would work by setting some sort of attribute (likely “data-mode”) on items. The only real difference between what FoldingText currently does and how Birch would work is that setting a mode in birch would be through some command “Make Todo List” or something. Instead of by typing “.todo”.


#4

A simple adaptation of the style sheet which Jesse sketched yesterday, automatically adding a cosmetic # in front of headers for the sake of familiarity. The .bml file is shown both in outline view, and in HTML view, to show the data-type attributes (automatically brought in from FoldingText, or chosen in Birch) from which styles can be set.

Stylesheet:

@import "ui-variables";

li[data-type="heading"] > .bcontent > .bgutter > .bitemHandle::after {
content: "#";
}

li[data-type="heading"] > .bcontent > .bbody {
font-weight: bold;
}

li[data-type="blockquote"] > .bcontent > .bbody {
font-style: italic;
}

li[data-type="codeblock"] > .bcontent > .bbody {
font-family: monospace;
}

.bchildren {
counter-reset:OrderedListCounter 0;
}

li[data-type="unordered"] > .bcontent > .bgutter > .bitemHandle::after {
content: "•";
color: @text-color-highlight;
}

li[data-type="ordered"] > .bcontent > .bgutter > .bitemHandle::after {
content: counter(OrderedListCounter, decimal)".";
counter-increment: OrderedListCounter;
color: @text-color-highlight;
}

#5

Pardon my ignorance— in order to get this up and running, does it live in “Atom / Open your stylesheet” or somewhere else? If so, I’m doing something else wrong— I’ve copied the above text into my stylesheet, with no effect…

I’d love to see this up and running…


#6

Three stages:

  • I installed Jesse’s first sketch of a Markdown editing package (the commands are not ready yet, but the style-sheet is).
  • then I edited the style-sheet /birch-markdown-master/styles/birch-markdown.less (in that package) to give it the contents above – essentially changing (orderedlist → ordered, unorderedlist → unordered, and adding the cosmetic hash and bolding to the heading style)
  • and finally I closed and restarted Atom, opening a file that was exported from FoldingText to the .bml format using my FTSaveAsBML script

(I used a file saved from FT to get the data-type attributes which trigger the styles - adding these directly in Birch will become possible, I understand, in the next build of Birch, and the next version of Jesse’s Markdown editing package).