Bike format Goals

[jessegrosjean]

Bike format Goals

Bike’s native file format is a restricted set of HTML, basically just a nested list.

If you open a .bike file in your web browser you will see a nicely formatted list. As nice as that is, you’ll also likely notice that it doesn’t really look like a Bike outline. It’s functional, but not particularly nice.

I think with the right CSS it could be a near pixel perfect match. I also think with a little javascript sprinkled in you could also be able to expand and collapse items.

With a bunch more javascript you could even write a full outline editor, open a Bike file in browser and it could edit itself (saving wouldn’t work, but copy and paste to export).

That stylesheet and script could be put on a CDN and then when Bike saves it would add links to that stylesheet and script. Bike files would gain a lot of cross platform power, but they wouldn’t grow in size.

This idea excites me, but I need to be working on more fundamental Bike app features. I encourage anyone with the skills to take this project on. If you get something nice I’ll start referencing it when Bike saves files. I can’t pay for this, but I think a made by link added by the script or CSS would be appropriate and maybe useful to you.

1. Stylesheet to make .bike file look like a real Bike outline when viewed in web browser
2. Javascript to make basic navigation of that outline possible (expand/collapse) for starters
3. Javascript editor to make editing possible.

These don’t all need to be done to make it useful, just stylesheet would be great.

---

I have a project that could be a resource for this. I think this project as a whole is a lot more complicated then needed, but maybe can grab some ideas. If you want to try it I think it works somewhat OK on Atom 1.14.4, not on later versions.

---

This might be a better resource: Tree views in CSS

[blake]

I was just thinking about this today. Do you have a large-ish Bike file I could play with?

[complexpoint]

@blake

large-ish Bike file

moby_dick.bike.zip (493.7 KB)

[blake]

I’ve got something of a work in progress going here.

GitHub - blakewatson/bike-web-enhancements: Script and stylesheet for viewing...

[jessegrosjean]

Wow, that is looking great, thanks for investigating and sharing this. Few issues that I see:

1. In Safari it shows two handles for any collapsable area. Fixable? (in chrome it looks good)

2. In Chrome there is a rotation animation in handle on expand/collapse, but its not smooth, I would disable if possible unless it can be made smooth

3. Add a link to your website somewhere!

[blake]

1. I always forget about Safari because Firefox is my daily with Chrome for work. Will investigate.
2. Ah, yeah that’s janky. I developed in Firefox and even though I tested in Chrome, I missed that. I may disable that for now and reintroduce it once I figure out if I can reliably animate folding/unfolding cross-browser. As is currently, it’s slightly off-putting to see instant folding alongside an animated handle.
3. Will do! I’ll throw something in the bottom of the settings menu.

[blake]

I fixed the WebKit double-handle bug and I removed handle animation for now. I also added some credit links and a link to report issues.

[jessegrosjean]

I want to make this part of Bike eventually, but want to do it in steps. First step is that next Bike preview release will roundtrip head element contents on load save. So you should be able to add these links to your own Bike files and they will stay put through load/save cycles.

Note that the formatting on the github page will need to change to support this. In particular they need to look like this to round trip through Bike:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/blakewatson/bike-web-enhancements/src/app.css"/>
<script defer="true" src="https://cdn.jsdelivr.net/gh/blakewatson/bike-web-enhancements/src/app.js">\\</script>

Bike uses an XML parser and that’s more strict then standard HTML (I don’t fully know what I’m talking about here, most of these things are derived from me experimenting) and so some things like defer needs to have a value and link needs a close />. Script on the other hand won’t work in web browser with simple /> close … by my writing will rewrite it as then unless you add some content… thus the //. Maybe there is a better way around these issue, I’m open to alternative suggestions.

Anyway with those things in place this should be useable in next Bike preview. Going forward some other issues to consider:

1. It’s unlikely that all users will want these inserted into their outlines for security reasons, so I’ll need to make it a default “off” option.

2. I think eventually it would be better to have the styling work without needing the JS code. For one I don’t think macOS preview will run the JS code, so previews on macOS aren’t really solved by this styling. (Not sure if this is actually what’s happening… I just noticed macOS preview of these files isn’t working yet)

3. Even if they do want them the cdn url looks long and suspicious I’m not familiar with cdn options, is there an option that can give a shorter more official looking Bike URL? Once I add option to auto-insert these I’ll want to be the one responsible for the cdn content, so I’m just looking for recommendations here.

Last I don’t mean that you need to address any of these issues if you are busy… this has already been a great start. Thanks!

[blake]

Yeah this all makes sense.

1. Yes, definitely.

2. I think there are some decent styling defaults that would be nice but I don’t know that it’s possible to do list folding in CSS (well, there are some tricks using :focus but I don’t think it’s powerful enough to replicate existing folding functionality—could be wrong, some CSS wizard might be able to pull it off).
   
   One thing I could test is having different CSS rules active when there’s no JS running. In that case, there would at least be some typography styles active. When the JS runs, it can add a class to the body which would activate the corresponding style rules. That might be enough to fix macOS previews.

3. In my experience all CDN URLs are long and suspicious. I don’t have any specific suggestions there as I’m not too experienced with them. The one I used can automatically serve any file on GitHub, so that’s why I used that particular one (it can also serve a file at a particular version, which might be more appropriate in this case).

I’ll update the GitHub README when/if you end up adding this feature and I can show example code using XML formatting and whatever CDN you pick. I appreciate all the feedback. It’s been fun working on this.

Also, I made this thing MIT so you or anyone here feel free to fork, pick for parts, etc.

[jessegrosjean]

@blake

I think there are some decent styling defaults that would be nice but I don’t know that it’s possible to do list folding in CSS (well, there are some tricks using :focus but I don’t think it’s powerful enough to replicate existing folding functionality—could be wrong, some CSS wizard might be able to pull it off).

One thing I could test is having different CSS rules active when there’s no JS running

I think styling with CSS only and without interactive elements is best. Using JavaScript to add folding or other features is an added benefit… but I think just the styling is what will be most useful to people. In particular that would enable macOS previews (I think) and also an easy way to implement printing.

[blake]

I think I’m going to refactor the stylesheet a bit to be more in line with progressive enhancement techniques. Essentially it would allow for inserting styles alone, and if the JS is present it would support those interactive elements.

[blake]

@jessegrosjean

macOS preview of these files isn’t working yet

When you say preview, are you talking about performing Quick Look on a .bike file (that has the CSS link added)? All I get is the text document icon.

[blake]

@blake

I think I’m going to refactor the stylesheet a bit to be more in line with progressive enhancement techniques. Essentially it would allow for inserting styles alone, and if the JS is present it would support those interactive elements.

I made these updates. If you only have the CSS, you get some basic styling. If you also have the JS, then you get the rest of the functionality.

[jessegrosjean]

@blake

When you say preview, are you talking about performing Quick Look on a .bike file (that has the CSS link added)? All I get is the text document icon.

Yes, I’m no sure if that’s a bug or not, but that’s not related to CSS. What I mean is when you rename the file extension to .html

[jessegrosjean]

New is looking pretty good. In particular it is working through Quick Look (if change file extension to .html). Thanks!

I think next steps are:

1. Can you update code on github page to:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/blakewatson/bike-web-enhancements/src/app.css"/>
   <script defer="true" src="https://cdn.jsdelivr.net/gh/blakewatson/bike-web-enhancements/src/app.js">\\</script>
   

2. Let’s see if we can get some other people testing these styles and scripts out, reporting bugs, providing feedback. Once we’ve lived when them for a bit then can start thinking about saving them into documents from Bike’s save process.

[blake]

Sounds good. I updated the readme.