new site theme for flux framework projects

[vsoch]

This is a refactor of the Flux Framework portal site to make it a bit more automated, and more open feeling to match the growth of the projects. E.g., it's not terrible to use a default GitHub pages theme, but I want our project portal to look as great as possible.

Here is a quick overview of what the site looks like. The main portal presents the current set of projects. This entire page is programmatically derived, meaning that a nightly job runs (also added here) that will retrieve updated metadata. This is why it's important, for each project, to ensure it has description, tags, and a website. Anything added on the repo will update here from now on.

I angst-ed about the width of those cards a bit - first because it felt weird putting more content outside of the cards (e.g., releases) and I settled on making them their own card (which stays static when you search/fitler). Next because the page will adjust to the browser width and I tried to get one that looked best on the largest number of widths. If you want to play with it, look for .card under assets/css/style.css. That search box searches across terms in the description as well as tags and the repo names. Here are the newly added _data that generate the above:

_data/data/
├── 2022
│   └── 12
│       ├── cci-activity_commits.json
│       ├── cci-activity_lines.json
│       ├── cci-languages.json
│       ├── cci-releases.json
│       ├── cci-repo_metadata.json
│       ├── cci-repos.json
│       ├── cci-stars.json
│       └── cci-topics.json
├── 2023
└── latest
    ├── cci-activity_commits.json
    ├── cci-activity_lines.json
    ├── cci-languages.json
    ├── cci-releases.json
    ├── cci-repo_metadata.json
    ├── cci-repos.json
    ├── cci-stars.json
    └── cci-topics.json

4 directories, 16 files

"latest" is saved nightly, and then I am asking contributor ci to save the data files monthly, so eventually we would have 12 directories for each year. If you don't want this frequency, we can change to yearly, but I thought it would be interesting to have temporal data. It isn't an incredibly huge amount so we wouldn't need to worry about repo size for a long time. Next, here are the publications:

and releases pages:

There are quite a few releases, so I added a search box to the top to filter them down. What you can't see is that mousing over one highlights it in a nice blue:

I don't know if that adds any value but it looks cool? 😆 I also modified the listing so clicking anywhere on the line will go to the release page. Here is an example release page:

Note that I added a next/previous link on the bottom of the page in case someone wants to browse through time. Some of the more empty pages look a little too empty, but when there is good content like the above it looks good! I also ran spell check on all these (and fixed the errors) and added an action that will run nightly. We likely should add spell check to all the projects on the NEWS.md and docs and the general docs so we don't let any errors sneak in. I can do this if it's desired (let me know). Next, here is the about page, which again links to the projects and encourages the user to visit the repo here for feedback, etc. I thought it would be cool to show breakdown of projects by languages (C anyone?)

That's part of the contributor ci package, which is the same repo that derives our data. A nice side effect of that is that I can add a static API to the site itself - the same data that populates the content and makes the graphics, for anyone that wants to use (courtesy of GitHub requests lol)

Still remaining to do is dark mode isn't added yet, and likely there should be more in the readme for developers to contribute to the site. I just ran out of steam - it's almost 9 and I haven't eaten today yet. That happens a lot. :P

Next steps - this is a LOT to review in a PR, so my suggestion is to clone this branch, and render locally and look around. E.g.,

$ git clone -b update-ui https://github.com/flux-framework/flux-framework.github.io
$ cd flux-framework.github.io
$ bundle install
$ bundle exec jekyll serve

If you don't have bundle / gem / jekyll here are the basics https://jekyllrb.com/docs/installation/.

Let me know your feedback! Really glad I got to work on this today - would have been earlier but I was struggle-bussing with spack. I'm going to open issues now for dark mode and spell checking on the other project repos so we don't forget!

Signed-off-by: vsoch vsoch@users.noreply.github.com

[vsoch]

This needs to be master branch - don't let me forget to change it!

[vsoch]

Another idea is to preserve the current "master" and keep as a legacy or historical branch, and then update the main branch to main (and push this to main) and all automation to main.

[grondo]

FWIW, I like the idea of moving to a main

[vsoch]

okay I've updated the PR so the workflows target main, and this means that we will not merge here, but rather when it's ready I'll push to a new main branch, and then we will change the default to main. And we will forever keep the original site in master, for memory! (I've done this a couple of times before and generally like the practice).

[vsoch]

okay we are deployed to main! 🥳 ⭐ ! I think it looks great! Going to close here.