Bootstrap 4 + Jekyll transition [HELP WANTED] #544
Labels
No Label
🔍🤖 Search Engines
approved
dependencies
duplicate
feedback wanted
high priority
I2P
iOS
low priority
OS
Self-contained networks
Social media
stale
streaming
todo
Tor
WIP
wontfix
XMPP
[m]
₿ cryptocurrency
ℹ️ help wanted
↔️ file sharing
⚙️ web extensions
✨ enhancement
❌ software removal
💬 discussion
🤖 Android
🐛 bug
💢 conflicting
📝 correction
🆘 critical
📧 email
🔒 file encryption
📁 file storage
🦊 Firefox
💻 hardware
🌐 hosting
🏠 housekeeping
🔐 password managers
🧰 productivity tools
🔎 research required
🌐 Social News Aggregators
🆕 software suggestion
👥 team chat
🔒 VPN
🌐 website issue
🚫 Windows
👁️ browsers
🖊️ digital notebooks
🗄️ DNS
🗨️ instant messaging (im)
🇦🇶 translations
No Milestone
No Assignees
1 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: privacyguides/privacytools.io#544
Loading…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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:
(more code here)
I would appreciate some help with this. Just create pull requests to the boostrap4-transition branch.
How Jekyll saves a lot of code:
Format of the card.html includes
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://
andwww.
, the include will take care of itAlso don't use <p> in the description, use <br>.
BS4 Transition checklist
Preview
Useprimaryprimary
orinfo
for the second card?website="..."
=>button="..."
@Vincevrp Thoughts?
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?
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.
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.
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.
Maybe ask @privacytoolsIO? If you don't plan to implement CI, maybe we could at least set up some rules on indentation etc.
Not sure if he's going to reply any time soon. He's often away for long periods of time.
I added a link to the preview of the current version (to the issue text).
Okay. It looks like you accidentally pushed
.sass_cache
. Remove and update.gitignore
? Are we converting the current CSS to SASS as well?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.
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.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.@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.
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 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.
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've also noticed that the tables don't scale well on mobile. Could you add that to the checklist?
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 will. The BS4 way of doing responsive tables is wrapping them in a
div.table-responsive
which adds a horizontal scrollbar.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.
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.
@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.
.panel-item
(the<img>
in cards) hasmargin-left: 5px
. Maybe slightly reduce it and also add it to the bottom?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.These are all the resources we use:
CSS:
JS:
Can we include all of these in
Gemfile
? A quick search found this: https://github.com/twbs/bootstrap-rubygemDo 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.
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.
How specifically is it related to the instant need for CI?
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.
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.I'm working on this as we speak. #550
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.Okay. I'll take a look at responsive tables and images now.
Anyway, I think Gemfile and navbar are enhancements. The branch is ready to be merged now.
Maybe we can delete some map files? Also, do we need
bootstrap-gird
andbootstrap-reboot
if we're not including them anywhere?Correct. I'll quickly fix this.
Done #553
@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
Because generating passwords in the browser is a bad idea. You should use a proper password manager.