Skip to content

Custom content slots for landing page, about page and footer#1817

Merged
osma merged 20 commits intomainfrom
issue1815-landing-page-content-slots
Nov 5, 2025
Merged

Custom content slots for landing page, about page and footer#1817
osma merged 20 commits intomainfrom
issue1815-landing-page-content-slots

Conversation

@osma
Copy link
Member

@osma osma commented Oct 28, 2025

Reasons for creating this PR

Implement customizable content slots on the landing and about pages as well as the footer that is displayed on all pages. See #1815.

This PR also removes our own custom content such as the "Welcome to the Skosmos browser demo" and "Skosmos is open source and on GitHub" boxes, the footer, and the about page content. We don't want these to be included with the Skosmos codebase since they are not useful for other instances. They should be stored separately, just like the configuration files.

Link to relevant issue(s), if any

Description of the changes in this PR

  1. Create a new top level directory custom-templates with subdirectories landing-top, landing-start, landing-end, landing-bottom, about, footer, html-head
  2. Add DIV elements with IDs landing-top-slot, landing-start-slot, landing-end-slot and landing-bottom-slot to the landing.twig template and similar adjustments to about.twig and base-template.twig
  3. With help from WebController that sets a new global variable customTemplates, populate the above mentioned DIVs by including any Twig template files from custom-templates/*/*.twig, in alphabetical order; in some cases (landing-end-slot and about-slot), show a placeholder message with instructions if no templates have been defined.
  4. Remove our own custom content as well as CSS rules that were related to them. I had to reorganize a few CSS rules due to this.
  5. Add a PHPUnit test that verifies that the custom templates are found
  6. Add Cypress tests that verify that the placeholder message is shown (on the landing page) and custom content is displayed (on the about page).

Here is an example of the placeholder message shown on the landing page:

image

Known problems or uncertainties in this PR

  • needs wiki documentation
  • the new translated messages (the two sentences of the placeholder message) are not yet pushed to Lokalise nor translated to other languages

Checklist

  • phpUnit tests pass locally with my changes
  • I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
  • The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
  • The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

@osma osma added this to the 3.0-beta.2 milestone Oct 28, 2025
@osma osma self-assigned this Oct 28, 2025
@codecov
Copy link

codecov bot commented Oct 28, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.39%. Comparing base (2a4875e) to head (44d2784).
⚠️ Report is 13 commits behind head on main.

Additional details and impacted files
@@             Coverage Diff              @@
##               main    #1817      +/-   ##
============================================
+ Coverage     70.30%   70.39%   +0.08%     
- Complexity     1649     1651       +2     
============================================
  Files            34       34              
  Lines          4328     4340      +12     
============================================
+ Hits           3043     3055      +12     
  Misses         1285     1285              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@osma osma force-pushed the issue1815-landing-page-content-slots branch from d8d41bb to bfd9de5 Compare October 28, 2025 13:35
@osma osma moved this to Needs review in Skosmos 3.x Backlog Oct 28, 2025
@osma
Copy link
Member Author

osma commented Oct 29, 2025

TODO:

  • investigate why the skosmos-github box is rendered differently (no full height)
  • define additional slots at least for about and footer (move the current footer content to a custom template)
  • move vocab-list inside landing-start-slot DIV

@osma osma moved this from Needs review to Reviewed - further actions needed in Skosmos 3.x Backlog Oct 29, 2025
@osma osma marked this pull request as ready for review October 29, 2025 15:16
@osma osma moved this from Reviewed - further actions needed to Needs review in Skosmos 3.x Backlog Oct 29, 2025
@osma osma changed the title Landing page content slots Custom content slots for landing page, about page and footer Oct 29, 2025
@osma osma moved this from Needs review to Reviewed - further actions needed in Skosmos 3.x Backlog Oct 30, 2025
@osma osma moved this from Reviewed - further actions needed to Needs review in Skosmos 3.x Backlog Oct 30, 2025
@osma osma requested a review from miguelvaara October 30, 2025 11:28
Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some general comments:
The note Adding an empty Twig file will remove this message is clear and straightforward instruction for removing a message that the developer might consider unnecessary. It could hardly be any easier to remove — well done!

With this approach we are getting closer to a publishing system - which is a good thing within reasonable limits. I thing we are still within those limits, since the easy customizability of Skosmos’s structure and appearance is surely welcome from the developers’ perspective. And after all, developers still have the possibility to modify Skosmos as they want.

Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it works perfectly in every possible use case. I tested all possible use cases and also tried using our own CSS style.

Just some example:
Image

A really good improvement! It will likely make our own developing work a bit easier in the future and definitely help external developers as well ,since adding and removing slots is truly simple and effortless. Are you writing the documentation before or after the merge?

Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All tests and syntax checks passed. Once the timing question of the documentation is solved and you have chosen whether the the directory existence should be checked in the WebController's code, the branch can be merged. Excellent work!

@sonarqubecloud
Copy link

sonarqubecloud bot commented Nov 4, 2025

@osma
Copy link
Member Author

osma commented Nov 4, 2025

Wrote up some wiki documentation: https://github.com/NatLibFi/Skosmos/wiki/Custom-templates

I also resolved the merge conflict for messages.en.json caused by #1813 .

@osma osma requested a review from miguelvaara November 4, 2025 11:31
Copy link
Contributor

@miguelvaara miguelvaara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will probably need to discuss the length of translation message keys at some point later on. The recommendation is that in the default file the key and the message are the same, but that can sometimes make the code rather “interesting” ;-) to read. So the question is -- do we want to do it by the book or make it look good?

Push to Lokalise after the merge?

Everything looks great!

Post scriptum:

A small curiosity, nothing that needs action:

“Du kan ta bort detta meddelande genom att lägga till en tom twig-fil.”

Might “det här” (instead of “detta”) sound a bit too Swedish from a Finland-Swedish perspective? Maybe - maybe not? No need to get stuck on this, I just found myself wondering about it.

@osma
Copy link
Member Author

osma commented Nov 5, 2025

Translations have already been pushed to Lokalise (including the long message). We can talk about that but I think it's out of scope for this PR. Likewise the Swedish translation: we can change that in Lokalise later if we need to; I think many such adjustments will still be needed down the line.

Merging this as it is now, thank you for the review!

@osma osma merged commit 1b25e2f into main Nov 5, 2025
14 checks passed
@github-project-automation github-project-automation bot moved this from Needs review to Issue/PR closed in Skosmos 3.x Backlog Nov 5, 2025
@osma osma deleted the issue1815-landing-page-content-slots branch November 5, 2025 10:46
@osma osma moved this from Issue/PR closed to Done (verified in test.dev.finto.fi, set Milestone 3.0 for both issue & PR, update docs) in Skosmos 3.x Backlog Nov 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Landing page: Customizable content boxes

2 participants