Bootstrap 4 + Jekyll transition [HELP WANTED] #544

Closed
opened 2018-10-23 18:18:34 +00:00 by ghost · 40 comments
ghost commented 2018-10-23 18:18:34 +00:00 (Migrated from github.com)

It's time we update the website to BS4. I started to work on this in the boostrap4-transition branch.

Also, I think that it's a good idea to start using Jekyll. Yes, it's mostly a one page website, but we can utilize includes a lot. Why specifically Jekyll? Because GitHub can build it automatically.

Here's an example:

{% include card.html color="success"
title="Nextcloud - Choose your hoster"
image="img/provider/Nextcloud.png"

description="Similar functionally to the widely used Dropbox, with the difference being that Nextcloud is free and open-source, and thereby allowing anyone to install and operate it without charge on a private server, with no limits on storage space or the number of connected clients."

url="https://nextcloud.com/"
website="Website: nextcloud.com"
footer="Client OS: Windows, macOS, Linux, BSD, Unix, iOS, Android, Fire OS. Server: Linux."
%}

(more code here)

screenshot from 2018-10-23 20-08-36

I would appreciate some help with this. Just create pull requests to the boostrap4-transition branch.

How Jekyll saves a lot of code:

screenshot from 2018-10-25 19-41-00


Format of the card.html includes

{% include card.html color="---success/primary/warning---"
title="---title---"
image="---relative path to the image file"
url="---url---"
tor="---url to tor, if it exists---"
footer="---footer - usually OS info---"
description="---description---"
%}

The order of url, footer, description and, optionally, website* and tor (except that clearnet url should come before tor) doesn't matter, but color, title and image must be exactly like above.

* website is optional, because if it can be generated by removing slashes, https:// and www., the include will take care of it

Also don't use <p> in the description, use <br>.

BS4 Transition checklist

Preview

  • Remove unnecessary files from css/ and js/
  • Use primary or info for the second card? primary
  • Convert all panels to card.html includes (see example here)
  • website="..." => button="..."
  • add scrollspy
  • fix all errors in console (e.g. popper.js)
  • fix all fa icons - e.g. social share buttons at the bottom
  • replace all glyphicons by with icons
  • fix the sections in navbar, they're messy - e.g. wrong order
  • fix anchors
  • responsive tables (and images?)
It's time we update the website to BS4. I started to work on this in the [boostrap4-transition](https://github.com/privacytoolsIO/privacytools.io/tree/bootstrap4-transition) branch. Also, I think that it's a good idea to start using Jekyll. Yes, it's mostly a one page website, but we can utilize includes a **lot**. Why specifically Jekyll? Because GitHub can build it automatically. Here's an example: ``` {% include card.html color="success" title="Nextcloud - Choose your hoster" image="img/provider/Nextcloud.png" description="Similar functionally to the widely used Dropbox, with the difference being that Nextcloud is free and open-source, and thereby allowing anyone to install and operate it without charge on a private server, with no limits on storage space or the number of connected clients." url="https://nextcloud.com/" website="Website: nextcloud.com" footer="Client OS: Windows, macOS, Linux, BSD, Unix, iOS, Android, Fire OS. Server: Linux." %} ``` [(more code here)](https://github.com/privacytoolsIO/privacytools.io/blob/45e7ffbc010c2b004fd9cf249f7b0c39131b3b94/index.html#L1637) ![screenshot from 2018-10-23 20-08-36](https://user-images.githubusercontent.com/4354706/47381196-b070ff00-d6ff-11e8-9e87-c2e93ba183fa.png) **I would appreciate some help with this.** Just create pull requests to the boostrap4-transition branch. ### How Jekyll saves a lot of code: ![screenshot from 2018-10-25 19-41-00](https://user-images.githubusercontent.com/4354706/47519653-4c307580-d88e-11e8-9125-bc3995fa4470.png) --- ### Format of the card.html includes ``` {% include card.html color="---success/primary/warning---" title="---title---" image="---relative path to the image file" url="---url---" tor="---url to tor, if it exists---" footer="---footer - usually OS info---" description="---description---" %} ``` The order of url, footer, description and, optionally, website* and tor (except that clearnet url should come before tor) doesn't matter, but color, title and image must be exactly like above. \* website is optional, because if it can be generated by removing slashes, `https://` and `www.`, the include will take care of it Also don't use \<p\> in the description, use \<br\>. ## BS4 Transition checklist ### [Preview](http://ptio.airdns.org:44449/) - [x] Remove unnecessary files from css/ and js/ - [x] <strike>Use `primary` or `info` for the second card?</strike> **primary** - [x] Convert all panels to card.html includes (see example [here](https://github.com/privacytoolsIO/privacytools.io/blob/45e7ffbc010c2b004fd9cf249f7b0c39131b3b94/index.html#L1637)) - [x] <strike>`website="..."` => `button="..."`</strike> - [x] add scrollspy - [x] fix all errors in console (e.g. popper.js) - [x] fix all fa icons - e.g. social share buttons at the bottom - [x] replace all glyphicons by with icons - [x] fix the sections in navbar, they're messy - e.g. wrong order - [x] fix anchors - [x] responsive tables (and images?)
ghost commented 2018-10-23 18:19:35 +00:00 (Migrated from github.com)

@Vincevrp Thoughts?

@Vincevrp Thoughts?
Vincevrp commented 2018-10-25 09:39:02 +00:00 (Migrated from github.com)

Seems good to use Jekyll, though it might be difficult to implement linting for it? Maybe we can implement TravisCI to W3 validate the rendered pages and automatically deploy to github pages?

Seems good to use Jekyll, though it might be difficult to implement linting for it? Maybe we can implement TravisCI to W3 validate the rendered pages and automatically deploy to github pages?
ghost commented 2018-10-25 09:52:38 +00:00 (Migrated from github.com)

Probably the only option. If we use master as the branch for GitHub Pages, we won't have access to the _site directory with the rendered HTML.

Probably the only option. If we use master as the branch for GitHub Pages, we won't have access to the _site directory with the rendered HTML.
Vincevrp commented 2018-10-25 13:28:22 +00:00 (Migrated from github.com)

We can run v.Nu in a docker container on travis, or we can try something like html5validator. I'm more familiar with Hugo though Jekyll might be a better fit.

We can run [v.Nu](https://github.com/validator/validator) in a docker container on travis, or we can try something like [html5validator](https://github.com/svenkreiss/html5validator). I'm more familiar with [Hugo](https://gohugo.io) though Jekyll might be a better fit.
ghost commented 2018-10-25 13:59:17 +00:00 (Migrated from github.com)

I don't think I have sufficient permissions to add CI to this repository. It seems like only @privacytoolsIO can do that.

For what it's worth, I can run a bot on my server. The bot could comment on PRs for example.

I don't think I have sufficient permissions to add CI to this repository. It seems like only @privacytoolsIO can do that. For what it's worth, I can run a bot on my server. The bot could comment on PRs for example.
Vincevrp commented 2018-10-25 14:42:16 +00:00 (Migrated from github.com)

Maybe ask @privacytoolsIO? If you don't plan to implement CI, maybe we could at least set up some rules on indentation etc.

Maybe ask @privacytoolsIO? If you don't plan to implement CI, maybe we could at least set up some rules on indentation etc.
ghost commented 2018-10-25 15:13:53 +00:00 (Migrated from github.com)

Not sure if he's going to reply any time soon. He's often away for long periods of time.

Not sure if he's going to reply any time soon. He's often away for long periods of time.
ghost commented 2018-10-25 15:46:21 +00:00 (Migrated from github.com)

I added a link to the preview of the current version (to the issue text).

I added a link to the preview of the current version (to the issue text).
Vincevrp commented 2018-10-25 17:50:44 +00:00 (Migrated from github.com)

Okay. It looks like you accidentally pushed .sass_cache. Remove and update .gitignore? Are we converting the current CSS to SASS as well?

Okay. It looks like you accidentally pushed `.sass_cache`. Remove and update `.gitignore`? Are we converting the current CSS to SASS as well?
ghost commented 2018-10-25 18:38:23 +00:00 (Migrated from github.com)

Thanks, didn't notice the directory. Added to .gitignore. We aren't, those are Jekyll files. BTW, so that we don't work on the same things, if you want to help with this branch, you can focus on the icons for social buttons, fixing jumbotron, making images and tables responsive, etc. If I start working on something I'll comment here.

Thanks, didn't notice the directory. Added to .gitignore. We aren't, those are Jekyll files. BTW, so that we don't work on the same things, if you want to help with this branch, you can focus on the icons for social buttons, fixing jumbotron, making images and tables responsive, etc. If I start working on something I'll comment here.
ghost commented 2018-10-25 18:43:17 +00:00 (Migrated from github.com)

We might rewrite some sections of the website to markdown and then {% include %} that, btw. Or change the format of index.html to markdown, since markdown supports HTML.

We might rewrite some sections of the website to markdown and then `{% include %}` that, btw. Or change the format of index.html to markdown, since markdown supports HTML.
ghost commented 2018-10-25 19:20:40 +00:00 (Migrated from github.com)

All panels are now converted to {% include card.html ... %}. So now it's just minor changes and we can merge the branch. BTW, the website is also very nicely responsive.

All panels are now converted to `{% include card.html ... %}`. So now it's just minor changes and we can merge the branch. BTW, the website is also very nicely responsive.
ghost commented 2018-10-25 19:53:18 +00:00 (Migrated from github.com)

@Vincevrp I fixed the jumbotron and the blockquote, I'd appreciate if you could take a look at the navbar links. They're horribly wrong.

@Vincevrp I fixed the jumbotron and the blockquote, I'd appreciate if you could take a look at the navbar links. They're horribly wrong.
Vincevrp commented 2018-10-25 19:58:27 +00:00 (Migrated from github.com)

I'll try to purge the unnecessary anchor links with obsolete name attributes for something more elegant, if this what you are referring to.

I'll try to purge the unnecessary anchor links with obsolete name attributes for something more elegant, if this what you are referring to.
ghost commented 2018-10-25 20:21:38 +00:00 (Migrated from github.com)

I feel like the Software dropdown is very messy. The order is wrong from the point of: File Encryption, File Sharing. Also, I removed the password generator. And yeah, anchors need clickable icons and they need some margin, it seems, now there's no space between the headings and the navbar. And yes, I think using <a name=""> is obsolete in HTML5.

I feel like the *Software* dropdown is very messy. The order is wrong from the point of: *File Encryption*, *File Sharing*. Also, I removed the password generator. And yeah, anchors need clickable icons and they need some margin, it seems, now there's no space between the headings and the navbar. And yes, I think using `<a name="">` is obsolete in HTML5.
Vincevrp commented 2018-10-25 20:32:41 +00:00 (Migrated from github.com)

I feel like the Software dropdown is very messy. The order is wrong from the point of: File Encryption, File Sharing. Also, I removed the password generator. And yeah, anchors need clickable icons and they need some margin, it seems, now there's no space between the headings and the navbar. And yes, I think using <a name=""> is obsolete in HTML5.

I will look into this. I'd like to clear up the files first.

tree _layouts
_layouts
├── default.html
└── _site
    └── default.html

Is the above a duplicate file? I also assume that (most) css files that haven't been touched in this branch can be removed?

> I feel like the _Software_ dropdown is very messy. The order is wrong from the point of: _File Encryption_, _File Sharing_. Also, I removed the password generator. And yeah, anchors need clickable icons and they need some margin, it seems, now there's no space between the headings and the navbar. And yes, I think using `<a name="">` is obsolete in HTML5. I will look into this. I'd like to clear up the files first. ``` tree _layouts _layouts ├── default.html └── _site └── default.html ``` Is the above a duplicate file? I also assume that (most) css files that haven't been touched in this branch can be removed?
Vincevrp commented 2018-10-25 20:35:23 +00:00 (Migrated from github.com)

I've also noticed that the tables don't scale well on mobile. Could you add that to the checklist?

I've also noticed that the tables don't scale well on mobile. Could you add that to the checklist?
ghost commented 2018-10-25 20:43:15 +00:00 (Migrated from github.com)

Is the above a duplicate file? I also assume that (most) css files that haven't been touched in this branch can be removed?

I was thinking about that file as well. Generally, the _site folder is used for the rendered HTML, but that's in the root directory, I deleted the file and everything works, so I'll remove it from git as well.

I've also noticed that the tables don't scale well on mobile. Could you add that to the checklist?

I will. The BS4 way of doing responsive tables is wrapping them in a div.table-responsive which adds a horizontal scrollbar.

> Is the above a duplicate file? I also assume that (most) css files that haven't been touched in this branch can be removed? I was thinking about that file as well. Generally, the `_site` folder is used for the rendered HTML, but that's in the root directory, I deleted the file and everything works, so I'll remove it from git as well. > I've also noticed that the tables don't scale well on mobile. Could you add that to the checklist? I will. The BS4 way of doing responsive tables is wrapping them in a `div.table-responsive` which adds a horizontal scrollbar.
Vincevrp commented 2018-10-25 20:53:07 +00:00 (Migrated from github.com)

I was also thinking about asset minification. It feels weird to see minified and map files in git. I assume we can solve this by using something like jekyll-minifier or jekyll-assets.

I was also thinking about asset minification. It feels weird to see minified and map files in git. I assume we can solve this by using something like [jekyll-minifier](https://github.com/digitalsparky/jekyll-minifier) or [jekyll-assets](https://github.com/envygeeks/jekyll-assets).
ghost commented 2018-10-26 04:01:04 +00:00 (Migrated from github.com)

Instead of HTML preview, I could write a bot that would clone the PR, build it using Jekyll and comment build log and a URL to the preview.

Instead of HTML preview, I could write a bot that would clone the PR, build it using Jekyll and comment build log and a URL to the preview.
ghost commented 2018-10-26 04:55:27 +00:00 (Migrated from github.com)

@Vincerp Though we're not going to change anything in those files, so they can stay minified. We could minify custom.css, but that's such a small file that there's no point in doing that.

@Vincerp Though we're not going to change anything in those files, so they can stay minified. We could minify custom.css, but that's such a small file that there's no point in doing that.
ghost commented 2018-10-26 05:15:17 +00:00 (Migrated from github.com)

.panel-item (the <img> in cards) has margin-left: 5px. Maybe slightly reduce it and also add it to the bottom?

screenshot from 2018-10-26 07-13-52

`.panel-item` (the `<img>` in cards) has `margin-left: 5px`. Maybe slightly reduce it and also add it to the bottom? ![screenshot from 2018-10-26 07-13-52](https://user-images.githubusercontent.com/4354706/47545875-da3c4880-d8ee-11e8-9a3e-d5c11d7775e2.png)
Vincevrp commented 2018-10-26 10:42:53 +00:00 (Migrated from github.com)

@vincerp Though we're not going to change anything in those files, so they can stay minified. We could minify custom.css, but that's such a small file that there's no point in doing that.

Can't we include bootstrap in Gemfile? It's quite ugly to have the minified files in the repository, especially since they're not going to be changed.

> @vincerp Though we're not going to change anything in those files, so they can stay minified. We could minify custom.css, but that's such a small file that there's no point in doing that. Can't we include bootstrap in `Gemfile`? It's quite ugly to have the minified files in the repository, especially since they're not going to be changed.
ghost commented 2018-10-26 10:49:52 +00:00 (Migrated from github.com)

These are all the resources we use:

CSS:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/flag-icon.min.css" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<link href="css/sortable-theme-bootstrap.css" rel="stylesheet" />
<link href="css/custom.css?v=1" rel="stylesheet">

JS:

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sortable.min.js"></script>

Can we include all of these in Gemfile? A quick search found this: https://github.com/twbs/bootstrap-rubygem

Do GH Pages support these gems?

These are all the resources we use: CSS: ``` <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/flag-icon.min.css" rel="stylesheet"> <link href="css/fontawesome-all.min.css" rel="stylesheet"> <link href="css/sortable-theme-bootstrap.css" rel="stylesheet" /> <link href="css/custom.css?v=1" rel="stylesheet"> ``` JS: ``` <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/sortable.min.js"></script> ``` Can we include all of these in `Gemfile`? A quick search found this: https://github.com/twbs/bootstrap-rubygem Do GH Pages support these gems?
Vincevrp commented 2018-10-26 10:58:55 +00:00 (Migrated from github.com)

These are all the resources we use:

CSS:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/flag-icon.min.css" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<link href="css/sortable-theme-bootstrap.css" rel="stylesheet" />
<link href="css/custom.css?v=1" rel="stylesheet">

JS:

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sortable.min.js"></script>

Can we include all of these in Gemfile? A quick search found this: https://github.com/twbs/bootstrap-rubygem

Do GH Pages support these gems?

Not sure if it's supported. I hope it is because that would make things a lot nicer and avoid the instant need for CI.

> These are all the resources we use: > > CSS: > > ``` > <link href="css/bootstrap.min.css" rel="stylesheet"> > <link href="css/flag-icon.min.css" rel="stylesheet"> > <link href="css/fontawesome-all.min.css" rel="stylesheet"> > <link href="css/sortable-theme-bootstrap.css" rel="stylesheet" /> > <link href="css/custom.css?v=1" rel="stylesheet"> > ``` > > JS: > > ``` > <script src="js/jquery-3.3.1.min.js"></script> > <script src="js/popper.min.js"></script> > <script src="js/bootstrap.min.js"></script> > <script src="js/sortable.min.js"></script> > ``` > > Can we include all of these in `Gemfile`? A quick search found this: https://github.com/twbs/bootstrap-rubygem > > Do GH Pages support these gems? Not sure if it's supported. I hope it is because that would make things a lot nicer and avoid the instant need for CI.
ghost commented 2018-10-26 13:34:55 +00:00 (Migrated from github.com)

I hope it is because that would make things a lot nicer and avoid the instant need for CI.

How so?

> I hope it is because that would make things a lot nicer and avoid the instant need for CI. How so?
Vincevrp commented 2018-10-26 15:49:57 +00:00 (Migrated from github.com)

I hope it is because that would make things a lot nicer and avoid the instant need for CI.

How so?

Then Jekyll can include bootstrap (with css + js) automatically when building. We can then remove the bootstrap files, it's not good practice to have the minified files in git.

If Github Pages can't do this, travis-ci can.

> > I hope it is because that would make things a lot nicer and avoid the instant need for CI. > > How so? Then Jekyll can include bootstrap (with css + js) automatically when building. We can then remove the bootstrap files, it's not good practice to have the minified files in git. If Github Pages can't do this, travis-ci can.
ghost commented 2018-10-26 18:09:32 +00:00 (Migrated from github.com)

How specifically is it related to the instant need for CI?

How specifically is it related to the instant need for CI?
Vincevrp commented 2018-10-27 11:57:10 +00:00 (Migrated from github.com)

If we actually want to implement that and Github Pages can't do it, we'd need CI. If you don't see this as something important then we could probably do this later. It'd be nice to have since we could add some linting/validation.

If Github Pages can add bootstrap from the Gemfile, we don't need CI for this but we definitely should add some rules on indentation, etc.

If we actually want to implement that and Github Pages can't do it, we'd need CI. If you don't see this as something important then we could probably do this later. It'd be nice to have since we could add some linting/validation. If Github Pages can add bootstrap from the Gemfile, we don't need CI for this but we definitely should add some rules on indentation, etc.
ghost commented 2018-10-27 12:54:07 +00:00 (Migrated from github.com)

2cc3e2c9b3 I fixed all the HTML errors. Now there's just warnings about <a name=""> being obsolete. If you could fix that and we could make sure the HTML is valid now, my bot could just comment on PRs with Jekyll build log and HTML validation result.

https://github.com/privacytoolsIO/privacytools.io/commit/2cc3e2c9b3c22b7b5c393db55f673ebd4111859d I fixed all the HTML errors. Now there's just warnings about `<a name="">` being obsolete. If you could fix that and we could make sure the HTML is valid now, my bot could just comment on PRs with Jekyll build log and HTML validation result.
Vincevrp commented 2018-10-27 14:09:05 +00:00 (Migrated from github.com)

2cc3e2c I fixed all the HTML errors. Now there's just warnings about <a name=""> being obsolete. If you could fix that and we could make sure the HTML is valid now, my bot could just comment on PRs with Jekyll build log and HTML validation result.

I'm working on this as we speak. #550

> [2cc3e2c](https://github.com/privacytoolsIO/privacytools.io/commit/2cc3e2c9b3c22b7b5c393db55f673ebd4111859d) I fixed all the HTML errors. Now there's just warnings about `<a name="">` being obsolete. If you could fix that and we could make sure the HTML is valid now, my bot could just comment on PRs with Jekyll build log and HTML validation result. I'm working on this as we speak. #550
ghost commented 2018-10-27 16:16:26 +00:00 (Migrated from github.com)

Alright, it's almost done now. Could you take a look at the links in the navbar and make sure they're in the right order?

Alright, it's almost done now. Could you take a look at the links in the navbar and make sure they're in the right order?
Vincevrp commented 2018-10-27 16:18:14 +00:00 (Migrated from github.com)

Alright, it's almost done now. Could you take a look at the links in the navbar and make sure they're in the right order?

I'll take a look at this later (maybe today). I'm now experimenting with the Gemfile. I currently have it working so that it automatically installs bootstrap etc. I'll test if Github Pages can do this for us.

> Alright, it's almost done now. Could you take a look at the links in the navbar and make sure they're in the right order? I'll take a look at this later (maybe today). I'm now experimenting with the `Gemfile`. I currently have it working so that it automatically installs bootstrap etc. I'll test if Github Pages can do this for us.
ghost commented 2018-10-27 16:20:05 +00:00 (Migrated from github.com)

Okay. I'll take a look at responsive tables and images now.

Okay. I'll take a look at responsive tables and images now.
ghost commented 2018-10-27 16:46:58 +00:00 (Migrated from github.com)

Anyway, I think Gemfile and navbar are enhancements. The branch is ready to be merged now.

Anyway, I think Gemfile and navbar are enhancements. The branch is ready to be merged now.
ghost commented 2018-10-27 17:36:07 +00:00 (Migrated from github.com)

Maybe we can delete some map files? Also, do we need bootstrap-gird and bootstrap-reboot if we're not including them anywhere?

Maybe we can delete some map files? Also, do we need `bootstrap-gird` and `bootstrap-reboot` if we're not including them anywhere?
Vincevrp commented 2018-10-27 17:37:22 +00:00 (Migrated from github.com)

Maybe we can delete some map files? Also, do we need bootstrap-gird and bootstrap-reboot if we're not including them anywhere?

Correct. I'll quickly fix this.

> Maybe we can delete some map files? Also, do we need `bootstrap-gird` and `bootstrap-reboot` if we're not including them anywhere? Correct. I'll quickly fix this.
Vincevrp commented 2018-10-27 17:59:43 +00:00 (Migrated from github.com)

Done #553

Done #553
Coeur commented 2019-04-11 14:35:23 +00:00 (Migrated from github.com)

@Shifterovich Why did you remove the password generator password.html with this change?
It was ranking in the top of https://docs.google.com/spreadsheets/d/1ucaqJ4U3X3nNEbAAa06igbBkITHaA98blftOwT8u0I4/edit#gid=932148432

@Shifterovich Why did you remove the password generator password.html with this change? It was ranking in the top of https://docs.google.com/spreadsheets/d/1ucaqJ4U3X3nNEbAAa06igbBkITHaA98blftOwT8u0I4/edit#gid=932148432
ghost commented 2019-04-11 16:37:59 +00:00 (Migrated from github.com)

Because generating passwords in the browser is a bad idea. You should use a proper password manager.

Because generating passwords in the browser is a bad idea. You should use a proper password manager.
This repo is archived. You cannot comment on issues.
No Milestone
No Assignees
1 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: privacyguides/privacytools.io#544
No description provided.