Repository navigation
Templates: Added Forgejo 17 support and GitHub's project boards - #94
Merged
Merged
Conversation
A :has() on an element that wraps the page makes Chrome restyle every element on any DOM change below it. Opening the line comment editor made folding a diff file take ~2s, and selecting a line in a 3000-line file took 2.2s. - Notifications subscriptions: use :not(#notification_div) instead of .ui.container:has(...). - Repository home/file view: home.tmpl sets repo-has-sidebar or repo-has-source-browser instead of .page-content:has(...). - Style the line comment "+" button as GitHub's 20px blue square. - Add a build test that fails on :has() over body, html, :root, .page-content, .ui.container or #diff-container.
- Viewed: the whole box shows a pointer and hover state, turns blue when checked and is 26px tall. - The file menu goes after Viewed, as on GitHub. - 40px file header and a single 16px gap between files (Forgejo's 8px flex gap was added to the theme's 16px margin).
- The toolbar is the first row of the #diff-container grid and spans the tree and the files, with a full-width bottom border. It is 56px tall so the sticky tree and file headers sit right below it; on phones it wraps and scrolls away instead. - Left: tree toggle, commit filter labelled "Commits" (or the selected commit/range), code search. Right: viewed count, review, settings. - The viewed count is a progress ring and muted text. Forgejo still updates its hidden <progress>; diff-view.js mirrors it onto the ring. - The settings gear is an outlined 28px button. - The tree toggle script moves after the tree panel it observes.
- On the files tab the title, tabs and diff share a 24px side margin instead of a 1216px centered header over a full-width diff. - The +/- summary is vertically centred with the tabs. - Pull request titles are edited from a pencil next to the number, like GitHub. view_title.tmpl is Forgejo 17's with only that change; issues keep their Edit button. - The tree toggle is 28px like the rest of the toolbar.
- After "Expand all lines" the button turns into GitHub's "Collapse non-diff lines". It reloads the file's original diff through Forgejo's own "Load diff" handler, which re-enables htmx on the restored expander buttons. - English pull request headers read "into <base> from <head>", with the copy button outside the branch label. Other languages keep Forgejo's translated sentence. - The commit menu opens to the right now that its button is on the left. - Drop the files tab border under the tabs: the active tab showed a line the other tabs do not have.
The shared dropdown style pins menu items to 32px with !important, so commit entries (summary and author line) overlapped the next one.
- The issue and pull request search shows GitHub's qualifier list on focus instead of Forgejo's "?" button under the field. It lists the qualifiers Forgejo understands with their translated hints, inserts one on click or Enter, and links to the search syntax docs. - Qualifier values (author:<value>) are highlighted in blue through a mirror behind the transparent input text. - Every search field gets a clear button with a pointer; it replaces the browser's own one, which only emptied the field. A submitted search that is applied reloads without it. - The sidebar follows GitHub's order (created, assigned, mentioned, review requested; then milestones and labels). Forgejo's extra entries stay after them.
Forgejo 16 coloured .text.green/.red/.purple/.orange with var(--color-thin-*, var(--color-*)). Forgejo 17 dropped the fallback and derives --color-thin-* from inputs only its own themes define, so every status icon (pull request state, commit checks, Actions runs) and the markdown note/important alerts lost their colour and turned white. - Define --color-thin-* as the theme's plain colours, as Forgejo 16 did. - Define the other Forgejo-theme-only variables: Actions runner indicators, image diff checkerboard, migration cards and disabled repo button counters. - Add a build test that every theme defines them. - The search qualifier list shows plain names (Open, Closed, Author...) with the qualifier as tooltip, and filters on either.
The job view forced the successful step check to muted grey. Show success in green like every other status icon, and mute skipped steps, whose "grey" is the regular text colour in this theme.
- Keep the "Code" label on the clone button next to "Go to file", as GitHub does. - Add an "fj CLI" clone option beside HTTPS and SSH showing "fj repo clone <host>/<owner>/<repo>" (forgejo-cli). It wraps Forgejo's updateCloneStates so the choice persists like HTTPS/SSH. - The clone URL field used the undefined --font-monospace; use --fonts-monospace. - Always show Releases (with "No releases published" and a New release link) and add Packages, listing the packages linked to the repository or Forgejo's empty message with a link to the docs.
Show "Work fast with the Forgejo CLI. Learn more" under the clone field when it is selected, like GitHub does for its CLI.
Fomantic keeps will-change: transform, opacity on every dropdown menu, which leaves it on its own GPU layer; at a fractional position (the right-aligned "Add file" menu) its text rendered blurry. Reset it. The Code menu opened instantly; give it the same appear-down animation as the dropdowns next to it.
- A closed <details> keeps its content hidden with content-visibility, so the CSS animation only played on the first open. Run it from the toggle event with element.animate() instead. - Fomantic modals kept will-change on their own GPU layer; centred at a fractional position their text was blurry. Reset it like the dropdown menus, and test both resets.
The toggle event fires a frame after the menu opens, so the menu showed in place and then jumped up to start the animation. Start it from the summary click in a requestAnimationFrame, the frame that first paints the open menu.
Only the Code menu animated; the user, create, file, diff settings and theme dropdown menus opened instantly while Fomantic dropdowns slide down. One shared script animates details.dropdown, .theme-menu and .theme-dropdown panels from the summary click, in the frame that first paints the open menu (no jump, and on every open). It replaces the Code-only script. Inline sections (release assets, settings groups) keep opening in place.
- branch-selector.js adds the "Switch branches/tags" title (or "Choose a tag to compare" on releases) with a close button, and a "View all branches/tags" footer that follows the active tab, around Forgejo's Vue menu. The data and the selector element are read at click time, as Vue replaces the element when it mounts. - Underlined tabs, a leading magnifier in the search field, and a check mark on the current ref instead of a bold highlighted row.
- compare.tmpl (Forgejo 17's) uses the centred container, a title over a divider and a compact branch bar. Creating a pull request shows the "Discuss and review..." text with the button on the right; equal branches show the notice with a disabled "Create pull request". - "Close pull request" shows a red closed pull request icon instead of Forgejo's closed issue icon in the done colour. Issues keep theirs.
- Branch buttons read "base: main" / "compare: develop" (Forgejo's translated base/compare); the owner prefix only shows across forks, in the buttons and in the branch lists. - Below the create box: a "N commits / N files changed / N contributors" row and the commits grouped by day (the pull request commits list). - The compare diff has no file tree or review toolbar (kept hidden, as diff-view.js reads it) and shows "Showing N changed files with ..." with Split/Unified instead.
Forgejo sizes the viewed-files <progress> by id (width: 100%), which outranked the rule hiding it; absolutely placed, the hidden bar stretched the files page to almost twice the window width. Target it by id inside the summary and keep it positioned there. Also drop Forgejo's 500px minimum on the new release target block on phones, the only other page that scrolled sideways.
The tests run on Bun, whose JavaScriptCore drops the frame of a function that ends in `return f()`. inner and outer both did, so skipFrames=1 pointed at a vitest runner frame and the test always failed.
The tree script rewrote every row's title on each refresh, which Forgejo turns into an eagerly created tooltip per row, and it laid out all rows to find the focus stop. Only write attributes that change, find directory matches with a set and leave the titles alone. The resizable divider no longer forces a layout while the page is still loading.
Slide the file body to and from zero height instead of hiding it at once. Files below the folding one skip painting off screen during the animation, so large pull requests stay smooth. Respects prefers-reduced-motion.
Without a state, Forgejo lists all pull requests when none is open.
- Full-width board for repository, organization and user projects: status dot columns, compact cards, keyword filter and a new column button. - Columns named like GitHub's default statuses get GitHub's colours. - Cards open their issue in a side panel below the page tabs; the issue page drops the site chrome there. - New issue opens in the panel too. Organization and user projects pick the repository first and name it on the issue and the new issue form. - Keep Forgejo 17's redirect back to the project after creating an issue, which its nested branch selector form drops.
…loads The side panel keeps the blank page it was closed on until the next issue replaces it, and that page painted white over the panel. Hide the frame and show a loader on the panel's background until the issue has loaded.
Show a skeleton with a centred Load diff link and GitHub's note instead of Forgejo's inline message and button. The link stays a direct child of the element Forgejo replaces with the loaded diff.
Forgejo hides a folded file with display: none, which drops the styles of every row, so unfolding a long file restyled all of them in one frame. Hide folded bodies with content-visibility: hidden instead, which keeps that work. Files over 500 lines fold at once instead of animating, as resizing them each frame walked all their rows.
Owner
|
Hi! Thanks for the amazing PR! I would gladly review it, but I just noticed that you are still working on it. Is it finished now, or should I wait? |
Author
|
Hi, thanks! Yes, it's ready for review. The main areas are done. I might still find small visual bugs, but I'd rather fix those in a separate PR so this one doesn't keep growing. |
whereareiam
changed the title
rozsazoltan
pushed a commit
to rozsazoltan-forks/forgejo-github-theme
that referenced
this pull request
Oct 23, 2026
The release draft resolves to 1.0.0 now that whereareiam#94 carries major: its templates target Forgejo 17, and admins on Forgejo 16 have to stay on 0.4.0. The notes give the summary, the tested Forgejo version and that upgrade warning. CONTRIBUTING lists Templates as an area, as whereareiam#94 and whereareiam#95 use it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #93
Summary
Updates the templates for Forgejo 17 and adds several GitHub-style improvements. The current templates target
Forgejo 15, and on Forgejo 17 some pages fail to render: the "Files changed" tab of a pull request returns a template
error (
custom:repo/diff/box: can't evaluate field NumFiles).Forgejo 17 compatibility
team list, mirror badge, search).
forgejo:17.0.0-rootless.Project boards (new)
The theme only styled the project lists so far. Project boards now follow GitHub's board layout for repository,
organization and user projects:
they have no colour of their own.
work inside the panel, and the board refreshes when the panel closes after a change.
the repository, and show it on the cards, the issue and the form.
form inside the new issue form, which dropped the redirect field.
Pull requests and diffs
commit menu and title pencil.
prefers-reduced-motion).Repository and other pages
<details>menus, sharp dropdowns and modals.:has()kept off page-wide containers.Testing
bun commitchecks: Prettier, TypeScript, Vitest (406 tests) and the build.31 pages render without template errors.
Suggested labels:
featureandmajor(the templates now target Forgejo 17).