Gatsby Version of jenkins.io

It should come as no surprise that I’m a big fan of gatsbyjs. It works really well and produces pretty modern setups.

Over the weekend I started working on a version of jenkins.io that is entirely powered by nodejs + gatsby, instead of nodejs+ruby+awestruct. I’m not sure its a great plan, but I had fun starting it.

Current Version: Jenkins Community Blog
My Version: Jenkins
Code: GitHub - halkeye/gatsby-jenkins-io: Prototype version of jenkins.io using gatsby

I’m in general not a great organized writer, but I wanted to get everything out.

Random notes so far.

  • gatsby uses preloading and doesn’t need to fully download the page (just the json that rendered the page), so transitions are faaaaaaaaaast

  • No HAML. Awestruct uses haml everywhere. I personally find it very frustrating to read, though I’m sure people will say the same about react/javascript

  • the current awestruct stuff is all over the place. There GitHub - jenkins-infra/asciidoctor-jenkins-extensions: Extensions to asciidoctor syntax for Jenkins-related materials and then lots of custom ruby code in the various templates. Lots of re-implementation, then side scripts

  • current awestruct doesn’t seem to work with built in version of mac ruby, so docker is required

  • Docker for ruby and node seem to be a large barrier for a lot of new comers

  • I fought for days trying to get the existing deploy to github pages to deploy properly (Turns out i had a broken old gh-pages branch, but no error messages). but was able to use the gh-pages npm module super quickly. So much easier to deploy copies to demo behavior. Especially once we eventually get support for deploying PRs via jenkins infra

  • Data is pretty inconsistent. thanks @timja for all the reviewing and merging of all the fixes I had for jenkins.io

  • Can move a lot of the hard coded things, like events on the main page, into seperate yaml or adoc files and have graphql manage the logic of what to show and not have to manually update (There’s currently a comment that says update this after oct 2nd)

  • No tests. React is pretty testable these days. (I was going to say plugin-site has lots of tests, but I only found one, https://github.com/jenkins-infra/plugin-site/blob/13067fa4ab47636e77be6af61f915e6b04068b87/tests/pages/404.jsx)

  • Even without gatsby, https://www.netlifycms.org/ is pretty slick option for managing static content. You give it a config file, define the schema of the files and directories, and it’ll build you a simple javascript UI that is tied to github and PRs. Its super easy to add for gatsby, but probably easy to add for existing setups.

Downsides:

  • Have to re-implement everything (I’m having fun so far, learning tons about gatsby and graphql, so no complaints yet)

At the moment I’m having fun. If nobody thinks its a good idea, i’ll probably poke around till I get bored and stop. If docs team is happy with it, i’ll push hard to get it all done.

(We should probably get a docs sig category in discourse)

2 Likes

I think that sounds like a great idea. Please continue on it!

Looks good and is snappy.

Have your tried hugo before? What I like about hugo is it can be even easier for people to update the page then gatsbyjs, since its just yaml.

Though it depends on what the goals were behind the change? If it’s ease of use for the non-frontend community then some kinda wiki might be easier.

If supporting lots of languages is a part of the goal, I hear GitHub - facebook/docusaurus: Easy to maintain open source documentation websites. is nice.

I haven’t specifically, but none of the existing content is in yaml, until this weekend it was all in .html, .md and .adoc (there’s still quite a few .md, but i migrated the rest to .adoc).

The reason I did gatsby is because a) I know it pretty well and b) its already used very successfully for the plugin-site

The main purposes for the port

  1. I like playing with gatsby
  2. I find jenkins.io and all its moving parts frustrating. Especially to deploy demo versions
  3. timja pointed out last week how fast the plugin site was to transition pages. Like him I mostly just go directly to the right page, so hadn’t noticed.

Yeah I think I miss spoke, hugo is mardown ;), but if gatsby is also markdown then there are probably even in terms of user friendliness.

I am not against it though we will have to rework a lot of HAML content if we take this approach instead of Hugo/Jekyll that also support HAML to some extent.

awestruct is definitely an old technology which is no longer popular. Switching to another engine would be fine, just not sure Gatsby is the best destination taking the amount of HAML content we will have to migrate. We are already stuck in the middle with Wiki migration, not sure it wort switching to another engine until we consolidate content. Would love to see more inputs.

I don’t intend to migrate content. My thinking is I’ll work in parallel splitting up presentation from content. Eventually we can drop in a new presentation layer to replace awestruct

So i got curious and looked. There’s only 55 custom html files (the layout and partials will be either asciidoc macros, or layouts/templates)

Of those 55, the majority could be made to asciidoc really easily (I say without looking at them).

$ find -name '*.haml' | grep -v _layout | grep -v _partials | grep content
./content/node/index.html.haml
./content/project/board.html.haml
./content/project/roadmap/index.html.haml
./content/project/adopters/index.html.haml
./content/changelog-old/index.html.haml
./content/download/thank-you-downloading-windows-installer.html.haml
./content/download/weekly/macos.html.haml
./content/download/index.html.haml
./content/download/thank-you-downloading-windows-installer-stable.html.haml
./content/download/lts/macos.html.haml
./content/projects/blueocean/index.html.haml
./content/projects/jam/suggest.html.haml
./content/projects/gsoc/2021/project-ideas.html.haml
./content/projects/gsoc/2019/project-ideas.html.haml
./content/projects/gsoc/2020/project-ideas.html.haml
./content/mailing-lists/index.html.haml
./content/100k.html.haml
./content/templates/downloads.html.haml
./content/template.html.haml
./content/index.html.haml
./content/doc/pipeline/steps/index.html.haml
./content/doc/pipeline/steps/contents.json.haml
./content/doc/pipeline/examples.html.haml
./content/doc/book/index.html.haml
./content/doc/book/securing-jenkins.html.haml
./content/doc/upgrade-guide.html.haml
./content/doc/developer/book.html.haml
./content/doc/developer/javadoc.html.haml
./content/doc/developer/guides.html.haml
./content/doc/developer/index.html.haml
./content/doc/developer/404.html.haml
./content/security/advisories/rss.xml.haml
./content/security/advisories.html.haml
./content/changelog/badge.json.haml
./content/changelog/index.html.haml
./content/changelog/rss.xml.haml
./content/participate/index.html.haml
./content/participate/report-issue/redirect.html.haml
./content/plugins.html.haml
./content/artwork/index.html.haml
./content/blog/authors/index.html.haml
./content/sigs/index.html.haml
./content/_ext/atom.xml.haml
./content/content/thank-you-downloading-windows-installer.html.haml
./content/content/thank-you-downloading-os-x-installer.html.haml
./content/content/thank-you-downloading-windows-installer-stable.html.haml
./content/content/thank-you-downloading-os-x-installer-stable.html.haml
./content/changelog-stable/badge.json.haml
./content/changelog-stable/index.html.haml
./content/changelog-stable/rss.xml.haml
./content/solutions/index.html.haml
./content/awards.html.haml
./content/2.0.html.haml
./content/events/index.html.haml
./content/404.html.haml

I think this is totally doable, but i’ll keep updating progress, i don’t ever expect to have both running, it’ll be a complete cutover when the time comes.

1 Like

Jenkins.io is a lot different to wiki migration, there’s only one place to change and content doesn’t get re-written as part of it.

Awestruct seems to require particular ruby versions, is not under development as far as I know, and doesn’t have a lot of docs. +1 to migrating to something maintained

1 Like

I share @oleg-nenashev concerns that we already have to finish the wiki migration but at the same time if @halkeye is motivated to work on a new version of jenkin.io, I totally support that. This is something that we’ll have to work on at some point