Massive update for modernization, layout improvements, and content #89

meldra · 2025-11-15T01:37:58Z

This PR is massive and involves a bunch of structural changes.
It updates the framework of the site from Material-Kit based
on Bootstrap 4, to vanilla Bootstrap 5.3. JQuery jumps from
3.2.1 to 3.7.1. Unused libraries from the kit have also been
removed. The general appearance of the site has been
preserved on request.

There is now a dark theme, and within the scope of this site
(so not the the hugo-managed codeblocks) there should not be
any violations per the IBM Equal Access Accessibility Checker.

Several layouts were added. There is now a layout that puts the
table of contents in a left sidebar, and a landing page layout
for the front page.

The original front page content has been relocated and the front
page now introduces CodeMeta; its purpose, adoption, and its use
cases. Crosswalks are also introduced.

Finally, the supporters of CodeMeta now get more appropriate
visibility for their contributions.

This brings in Bootstrap 5.3.8, JQuery 3.7.1, and removes all except the material-kit.css "Product Page" file which forms the basis of the current theme of CodeMeta's website.

This prepares us for cleaning up the extra/duplicate static assets.

This directory included image files which after investigation were deemed not in current use on the website and could be safely removed. If this assertion is wrong and they are needed later, this commit can be reverted without harm to the current theme, or the images can be retrieved from git history.

Glyphicon.css is no longer necessary in Bootstrap 5.x, and the duplicated material-kit was a hack to change the theme base color to blue from purple.

material-kit.js no longer calls bootstrapMaterialDesign which seems neither compatible with current bootstrap nor maintained.

Default mode is either system preference if supported, or light mode if not. Highlight.js removed from config.toml as it did not seem to be in use. The "monokai" theme for codeblocks has been changed to "pygments" theme to support dark/light mode switching. It's not amazing on dark mode but it's better than eye strain.

…odemeta#79) The publication of RSS can be disabled by adding to the config.toml: [outputs] home = ["HTML"] section = ["HTML"]

This partial uses a json file of: name, url, logo, currently uses the five acknowledgements on the front page. This is not included anywhere yet, but it's the first part of breaking up the front page into reusable sections.

Does not have functionality yet

Aside from the codeblocks (styling of which is not entirely in our control), this puts us with 0 violations according to the IBM Accessibility 7.3 guidelines which seem to be quite strict.

Without doing this on small screens they're below the news rather than with the CodeMeta copy

This can make use of multiple rss feeds in the data/feeds directory the items get merged and sorted by pubDate

This is linked to from the bottom of the truncated news sidebar

Additionally update github workflow for changes to the feed location

… guide

progval

Looks great, thanks

.github/workflows/news.yml

progval · 2025-11-15T23:15:35Z

.github/workflows/news.yml

+    - uses: actions/checkout@v4
+    - name: Download File
+      run: |
+        curl https://www.softwareheritage.org/tag/codemeta/feed/ --output ./data/softwareheritage.xml


Are there other sources we could add too?

cc @moranegg

If there are, I'll need to refactor the live-refresh JS a bit. I left it as it is because it was working enough for rollout with the one feed.

@progval not yet :)
I hope we get some feedback on this during a SciCodes consortium meeting.
For this PR, this is fine as is.

progval · 2025-11-15T23:17:12Z

content/_index.md

+Reproducibility
+: Tracking the software libraries and applications used in research, using
+CodeMeta's _versions_ and _dependencies_ metadata, ensures that important
+findings can be reviewed and verified with greater accuracy.


Off-topic for this PR, but I find that dependency metadata in Codemeta is either missing or unusable because it's underspecified

content/create.md

progval · 2025-11-15T23:18:43Z

content/use-cases.md

 Edited Use cases
 CodeMeta meeting in Portland
-Created 20160415 (use cases group pulled from here 230pm 20160516) https://docs.google.com/document/d/1SalOP_tLw7FC6jnoz5hJBB2jA7xBClKqc88wgmJu5Ro/edit
+Created 20160415 (use cases group pulled from here 230pm 20160516) [PDF export of google doc notes](/CodeMeta_Software_Use_Cases-Day2PM_WrkngGrp.pdf)


progval · 2025-11-15T23:19:46Z

layouts/shortcodes/news.md

+    let url = `https://softwareheritage.org/tag/codemeta/feed/`;
+    let response = await fetch(url, {
+        method: "GET",
+    });


Why is there a request here in addition to the curl in the Github Actions?

Originally it was just going to be a list of links on the page. It was easy enough to make it update periodically. The scope crept a bit to want immediate updates...

I left the action in place because it being pulled in daily gives the page something to build a placeholder list that's only ever slightly out of date. That way it's basically seamless and there's not a huge jump in the page when the JS lags during loading and parsing the feed.

themes/CodeMeta-Pyramids/layouts/partials/footer.html

progval · 2025-11-15T23:25:30Z

themes/CodeMeta-Pyramids/layouts/partials/list.html

    {{ range .Paginator.Pages }}
    <div class="article">
-      <h2><a href="{{ .RelPermalink }}">{{if .Params.image }} <img src="{{ .Params.image }}" height="50px"/> {{ end }}{{ .Title }}</a></h2>
+      <h2><a href="{{ .RelPermalink }}">{{if .Params.image }} <img alt="{{ substr .Params.image 5 -4 }} logo" src="{{ .Params.image }}" height="50px"/> {{ end }}{{ .Title }}</a></h2>


What are typical values of the alt here? I'm worried it would be redundant with the text (eg. make a screen reader say "Foo logo Foo" instead of just "Foo")

it's more "Foo logo Crosswalk for Foo" but sometimes it's "Foo logo Crosswalk for Bar". It could be a blank alt I guess...

progval · 2025-11-15T23:27:56Z

themes/CodeMeta-Pyramids/layouts/partials/news.html

+function formatAMPM(date) {
+    var hours = date.getUTCHours();
+    var minutes = date.getUTCMinutes();
+    var ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0'+minutes : minutes;
+    var strTime = hours + ':' + minutes + ' ' + ampm;
+    return strTime;
+}
+
+async function fetchCodeMetaPostsFromSWHWordPress() {
+    let url = `https://softwareheritage.org/tag/codemeta/feed/`;
+    let response = await fetch(url, {
+        method: "GET",
+    });
+
+    const text = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, "text/xml");
+    const items = doc.getElementsByTagName("item");
+
+    $("#newslinks ul").empty();
+    for (let i = 0 ; i < items.length ; ++i) {
+        const title = items[i].querySelector("title").textContent;
+        const link = items[i].querySelector("link").textContent;
+        const date = new Date(items[i].querySelector("pubDate").textContent);
+        const desc = items[i].querySelector("description").textContent;
+
+        const year = date.getUTCFullYear();
+        const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+        const month = months[date.getUTCMonth()];
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        const timestr = formatAMPM(date);
+
+        const utc = `${month} ${day}, ${year} ${timestr} UTC`
+
+        if (i <= ({{ .Site.Params.newslimit }} - 1 ))
+            $("#newslinks ul").append(
+                `<li class="ps-2 refreshed">
+                  <a class="list-group-item newslink lh-base p-2" href="${link}">${title}</a>
+                  <small class="p-2 text-secondary-emphasis">${utc}</small>
+                </li>`
+            )
+    };
+}
+
+fetchCodeMetaPostsFromSWHWordPress();


Is this meant to duplicate layouts/shortcodes/news.md?

It shouldn't but it's where I got to. I'll tidy it up.

Deduped the bits that didn't vary, and multi-feed support added.

themes/CodeMeta-Pyramids/layouts/partials/supporters.html

progval · 2025-11-15T23:50:39Z

content/create.md

+<iframe id="generator" title="CodeMeta Generator" onload="iframeResize()" src="/codemeta-generator" class="d-inline-block w-100" frameborder="0">
+  If there is no form visible here, you can also access the [CodeMeta Generator](https://codemeta.github.io/codemeta-generator) directly. This may be due to browser security settings.
+</iframe>


It looks like this on Firefox 140.4.0esr:

But also, why replace the link with an iframe? The codemeta generator intentionally uses a theme adapted from Codemeta's with smaller margins so it's usable on small screens, but with an iframe the margins are more than doubled.

I'm really not sure why it's not displaying full-height for you here.

I believe the rationale for preferring the iframe solution was the loss of the site's menu when sent directly to the generator, but @moranegg can clarify more.

We can drop the iframe.
With @meldra we tried to find an elegant solution without leaving the website.
This is not a blocker; we can keep the text and a button to the CodeMeta generator site.

Thank you @progval, for your careful review here.

@moranegg

No problem! I've pushed 7553715

Do we also want the button on the front page to go there directly or should it still point to /create ?

Do we also want the button on the front page to go there directly or should it still point to /create ?

I have a weak preference for the former.

Co-authored-by: Val Lorentz <[email protected]>

.github/workflows/news.yml

progval · 2025-11-16T06:43:49Z

layouts/shortcodes/news.md

+    let url = `https://softwareheritage.org/tag/codemeta/feed/`;
+    let response = await fetch(url, {
+        method: "GET",
+    });


Co-authored-by: Val Lorentz <[email protected]>

moranegg · 2025-11-18T12:22:45Z

Thanks, @meldra!
Let me know if we are ready for a merge (PR still in draft).

meldra · 2025-11-19T16:16:27Z

@moranegg I think we're ready for merge. Sorry I didn't notice it was still in draft.

meldra added 30 commits October 7, 2025 16:16

Add CodeMeta-Pyramids theme files

8dc6878

This brings in Bootstrap 5.3.8, JQuery 3.7.1, and removes all except the material-kit.css "Product Page" file which forms the basis of the current theme of CodeMeta's website.

Cut over to CodeMeta-Pyramids theme from hugo-material

f3b27db

This prepares us for cleaning up the extra/duplicate static assets.

Removing duplicate/unnecessary css.

397152f

Glyphicon.css is no longer necessary in Bootstrap 5.x, and the duplicated material-kit was a hack to change the theme base color to blue from purple.

Restore material-kit js, needed for responsive navigation with tweaks

c99178c

material-kit.js no longer calls bootstrapMaterialDesign which seems neither compatible with current bootstrap nor maintained.

Tweak the nav js to cope with page refreshes

cb4cea2

Make the dark mode js more robust (I hope)

f660161

More darkmode js refactoring

1214f1f

Style tweaks; codeblocks now nicer in both modes

d21d122

Remove unneeded template login.html

0d8f4a8

Add layout with custom TableOfContents in left sidebar

dd054c9

Add sidenav layout to terms, user-guide, developer-guide pages

4d37dfb

Move RSS links to a link (with icon) after the footer nav (supercedes c…

a665c4f

…odemeta#79) The publication of RSS can be disabled by adding to the config.toml: [outputs] home = ["HTML"] section = ["HTML"]

Add a partial for the supporter acknowledgements

3b4a9b2

This partial uses a json file of: name, url, logo, currently uses the five acknowledgements on the front page. This is not included anywhere yet, but it's the first part of breaking up the front page into reusable sections.

Add a news partial for landing layout prep.

fbd4b95

Does not have functionality yet

Add first round of changes for landing layout.

9435b67

Swap index page to landing layout

06044a6

Add footer links per codemeta#83

df0fd56

Add sidenav to additional pages

3600b0c

Display tweaks for supporters section

f255450

Add some static news links for now

46be23c

Make landing columns collapse to one on tiny screens

11a694e

Add buttons where crosswalks may be expected

aa8e9d5

Fix color contrast and link visual indicators for accessibility

ee66491

Add missing image alt and label text

5f9d438

Add missing label for darkmode toggle

bd7e4ed

Remove zoom prevention for accessibility

a01d65c

Final (tm) sweep of accessibility tweaks

257115d

Aside from the codeblocks (styling of which is not entirely in our control), this puts us with 0 violations according to the IBM Accessibility 7.3 guidelines which seem to be quite strict.

Fix skip link alignment on tiny screens

37d24e2

meldra added 17 commits November 13, 2025 15:52

Move the buttons to the left landing region

b88e711

Without doing this on small screens they're below the news rather than with the CodeMeta copy

Make news sidebar rss based, and limitable by config

9e40000

This can make use of multiple rss feeds in the data/feeds directory the items get merged and sorted by pubDate

Add a full news page for everything in the feeds

9021bee

This is linked to from the bottom of the truncated news sidebar

Add current softwareheritage.org/tag/codemeta/feed/ file

cebad4a

Additionally update github workflow for changes to the feed location

Make RSMD info on front page driven by a data file

9da2f09

Minor fixes

73cd767

Archive google doc notes for this page

08b9c2c

Fix accidental omission when converting to data-driven

ce95633

Add more content to sidebar

655d035

Add missing supporter cards, fix links.

48b9360

Add JS refreshing to the news displays

87ff7ca

Put codemeta-generator in an iframe on the /create page, with a short…

02b0a36

… guide

Remove supporter card text links, fix card aspect ratio

73820b1

Reword intro content to link to original front page text

21083c7

Add direct link to the generator on the create page

020bc83

Last sweep of accessibility compliance

2ab77d4

Merge branch 'master' into content-2025

296d046

progval reviewed Nov 15, 2025

View reviewed changes

progval mentioned this pull request Nov 15, 2025

Make inline and footer links open in a new tab codemeta/codemeta-generator#87

Closed

Apply suggestions from code review

8eb1edb

Co-authored-by: Val Lorentz <[email protected]>

progval reviewed Nov 16, 2025

View reviewed changes

meldra and others added 3 commits November 16, 2025 17:46

Apply suggestions from code review

ee086cc

Co-authored-by: Val Lorentz <[email protected]>

Deduplicate news js, make it handle multiple feeds

10c3c30

Retire the iframe in favour of a button per review.

7553715

progval approved these changes Nov 19, 2025

View reviewed changes

meldra marked this pull request as ready for review November 19, 2025 16:15

moranegg merged commit 83ebdcf into codemeta:master Nov 20, 2025
1 check passed

Massive update for modernization, layout improvements, and content #89

Massive update for modernization, layout improvements, and content #89

Uh oh!

Conversation

meldra commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

progval left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meldra Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

moranegg commented Nov 18, 2025

Uh oh!

meldra commented Nov 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

meldra commented Nov 15, 2025 •

edited

Loading

meldra Nov 16, 2025 •

edited

Loading