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.
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.
Stylesheet to make .bike file look like a real Bike outline when viewed in web browser
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.
I always forget about Safari because Firefox is my daily with Chrome for work. Will investigate.
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.
Will do! I’ll throw something in the bottom of the settings menu.
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:
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:
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.
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)
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!
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.
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.
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.
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.