Target bootstrap4

[pmatos]

As far as I understand, frog is targetting at the moment bootstrap3. Are there any plans to target the latest bootstrap 4?

[gerdint]

Is it not still in alpha, so perhaps a bit early to make it the default theme? (Having it as an option would definately be good though)

That said, I'm really looking forward to Bootstrap 4, will definately make some things easier.

[pmatos]

True, still in alpha but having said that it would be great to be able to target it maybe with a non-default flag, as you mentioned. Lets say this is a wishlist request.

[pmatos]

Oppps, shouldn't have closed it. My mistake.

[greghendershott]

That's a great question.

Very early on, Frog was more of a "just-works", "any color Model T you want, so long as it's black" thing. As a result, the use of Twitter Bootstrap was baked into a fair amount of HTML created directly from Racket code.

Then circa 4 years ago (commit 60c8f3a), it switched to using templates -- the {page post index}-template.html files. That's where Bootstrap-centric stuff is. (At least a very high percentage.) When you do raco frog --init, Frog provides initial versions of these from example. Thereafter it's totally in your control. I think some people don't even use Bootstrap with Frog.

Having said all that, some possible action items:

• Going forward maybe Frog should be less opinionated about this -- or at least I could explain this more clearly in the README. (The original "targeting Bootstrap" blurb probably didn't change enough back at commit 60c8f3a. It's no longer Frog itself, it's the example/default templates that target Bootstrap. Which ought to just-work. My only point is people can customize this to where they don't even use Bootstrap at all.)

• If any Bootstrap assumption is still baked into Frog code somewhere, we should log this as an issue and try to change that.

What do you all think?

[pmatos]

So, using bootstrap4 should be a matter of updating the examples folder to using bootstrap 4... That sounds interesting. Will give it a go. Maybe adding raco frog --init --bootstrap4 could be a start if my experiment is successful.

[tfeb]

It would also be really useful to add instructions for anyone with a blog which currently uses 3 on how to migrate to 4: this is probably simple, but raco frog --init ... is not the right answer for that case.

[pmatos]

I started with the basic blog and replacing the files in example/ by the ones you download for bootstrap4-alpha.6 seems to work out of the box.

[greghendershott]

@pmatos Thank you for trying that!

The example/default page-template.html is using what I think are pretty basic Bootstrap classes like col-md-12, container, navbar*, dropdown*.

But I don't know if any of those are deprecated in BS4.

[pmatos]

Yes, there are a few things that look like they are deprecated. I am trying to change appropriately for my new blog so things work and look good. I will post back my changes once I am done.

[greghendershott]

Sound good!

BTW do you know roughly when BS4 will be released?

[pmatos]

Not really, sorry.

[pmatos]

So, Bootstrap4-beta was released. I have a branch pmatos-bootstrap4 on my fork where I have the initial bootstrap files.

Two interesting notes:

• There is no bootstrap-theme.min.css in bootstrap distro anymore; What do we want to do about this?
• Why don't we use CDN providers instead of having the files as part of frog?

[greghendershott]

The frog docs say:

Although the Frog example project has copies for example purposes, for your own project you should get the official/latest Bootstrap 3 files directly from Bootstrap.

And the project tree illustration has these comments for Bootstrap css and js files:

# get these files # from http://getbootstrap.com

---

Instead we could:

1. Delete all of these Bootstrap css/js files from the Frog repo.
2. Change Frog's example page-template.html file to use the CDN suggested by the Bootstrap 4 docs Quick Start.

Would that be better?

[greghendershott]

@pmatos to be clear, I like your suggestion. My comment above is "playing it back" to make sure I understand. Also, trying to be specific about details like deleting Frog's copy of the files, and, exactly which CDN we're talking about.

[pmatos]

@greghendershott tha's exactly what I had in mind. I will do that on my branch and issue a pull request.

[tfeb]

I would like at least the option of not using a CDN: one of the nice things about frog is that things it generates can be (mostly) self-contained. if it uses one by default I think there should be instructions on how not do do so. But I agree that the bootstrap files shouldn't be there.

[tfeb]

Also worth noting: bootstrap 4 seems to have made changes to the navbar which completely break the examples or anything derived from them. I haven't spent enough time understanding what they've changed though.

[sleibrock]

Bootstrap 4 was just released a few days ago, would there be any interest in a PR that adds it to the examples as well as slightly changing the default template to support it. As @tfeb mentioned the navbar has changed a little bit in version 4 so I think it would need some slight modifications.

[greghendershott]

@sleibrock That would be great.

Hopefully the required changes will turn out to be limited to:

• Files under example/.
• This part of frog/frog.scrbl. (For example if you switch to the CDN, as suggested by @pmatos and described here).

If so, this should be a quick review/merge.

---

If it turns out you need to change other things under frog -- such as some .rkt files, because Frog itself still "bakes in" some Bootstrap 3 assumption? Then let me know if you have questions. And it might take a bit longer to review. But still worth doing if you're up for it.

[sleibrock]

I started working on the Bootstrap conversion, and I'm having a little trouble trying to modify the navbar. In Bootstrap 4, it's not necessary to use a <ul> for dropdown menus (there are examples on this page).

However, tags are coded in a way that they come with a <li> element, which sort of gets in the way of the current Bootstrap 4 method. I have to bind a class dropdown-item to each item in the dropdown menu. I couldn't find a nice way of changing the tag links themselves (I think tags are stored as <a> tags somewhere) so right now I'm a little stuck trying to add the proper classes.

Currently this is what it looks like under Bootstrap 4 without adding the dropdown-item to each tag link.

I tried fiddling with some of frog/private/bodies-page.rkt to maybe find a work-around, but I didn't see an easy way of adding the necessary class.

Changes are currently on my fork over here: https://github.com/sleibrock/frog/tree/bootstrap-upgrade

[greghendershott]

Thanks!

Probably in bodies-page.rkt we should add a new page template variable that supplies the tags as just the <a> element (without any <li> wrapper like tags-list-items does). It would be up to the template to wrap these in other element(s). Maybe wrap in no other elements -- IIUC for Bootstrap 4 it's sufficient for them to be just the <a> element?

Maybe that new template variable should be called tags-a-elements (?).

The value would be something like (xexprs->string (map tag->xexpr (dict-keys (tags-alist)))). I think?

[sleibrock]

I just made some more changes so now the default page will look like this:

For the tag links, what I did was create a new template variable called all-tag-pairs. I decided to convert the tag list to a list of pairs that looks like '((tag-name tag-url) ...). I pass over a function to yield all tag pairs and leave it up to the Scribble code that I added to format it to Bootstrap HTML. This way I think it's slightly better if Scribble handles the formatting as opposed to embedding it in the render-template function.

I think this should be good enough to create a PR and do an actual review.

[tfeb]

@sleibrock: I'd be really interested in bootstrap 4 support. One thing I would care about is that it should be reasonably obvious how to take an existing BS3-based configuration and convert it to a BS4-based one (not, perhaps, automagically, but 'you will need to change these n things' would be fine). I started trying to do this for my own setup, but realised that there were various horrors I needed to fix first so did not get very far.

[sleibrock]

@tfeb I'm not certain if there's an "easy" method to convert an existing BS3 Frog install to BS4. I had to change the default page-template.html file under examples/ as well as some of Frog's code just to be able to make my changes. Since Frog won't copy files from directories if a directory exists, then raco frog --init will fail, which means it won't be able to copy from the examples/ directory without some extra work (the "easiest" solution I can think of right now is creating a new Frog project and copying your old posts to the new project).

[greghendershott]

@sleibrock

For the tag links, what I did was create a new template variable called all-tag-pairs. I decided to convert the tag list to a list of pairs that looks like '((tag-name tag-url) ...). I pass over a function to yield all tag pairs and leave it up to the Scribble code that I added to format it to Bootstrap HTML. This way I think it's slightly better if Scribble handles the formatting as opposed to embedding it in the render-template function.

I think that's fine. Just be sure that the tag URL is what tag->xexpr produces using canonical-uri and slug. And encoded/escaped as an HTML attribute. Likewise the tag name needs to be encoded/escaped as HTML content (e.g. & => &).

All this might nudge you toward the template getting <a> element text where all this has been done correctly. But it might not -- I'm open to looking at however you want to do it!

I think this should be good enough to create a PR and do an actual review.

I agree -- please do!

[tfeb]

@sleibrock About the 'make it easy to convert' what I really meant was that it would be nice if there was a set of instructions of some kind: 'you need to look at the changes you made to x and merge them into new-x but you probably don't need to do y, this thing will be different, that thing is now no longer needed' & so on. Enough so that, if someone knows what changes they made to a BS3-based blog (ie it's in git...) they can understand what the equivalent they need to do for BS4 is to migrate it, but not some automagic migration tool which would be implausible I think.

It looks like the PR is within epsilon of being merged, so I'll try to see how hard it is soon!

[greghendershott]

Ideally one of us writes a blog post describing

• changes to page-template.html
• new/changed boostrap and jQuery files
• plus a link to such a diff (because the blog post is hosted on a frog blog whose source is in git and which was just updated like this). :smile:

[greghendershott]

Merged. :tada: Thank you!

[sleibrock]

Hey, I wrote a blog post about the changes and included a few steps for porting an existing project from Bootstrap 3 to 4. You can check it out here.

https://sleibrock.xyz/2018/02/bootstrap-4-and-frog.html

(I might have left out a few additional things like making sure to back up all images too, maybe we can add a wiki page for updating)

[greghendershott]

Thanks! Tweeted.