From 0a7767eaaa16d54b64d7d2ed3d561ba98acf0f3a Mon Sep 17 00:00:00 2001 From: Mai-Lapyst Date: Sun, 9 Jun 2024 10:50:53 +0000 Subject: [PATCH] [FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985) Adds a feature similar to this https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/ , by adding styles to elements which `src` or `href` attribute ends with `#light-mode-only` or `#dark-mode-only`. To improve compability, the github variants with the `gh-` prefix are also contained. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3985 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Mai-Lapyst Co-committed-by: Mai-Lapyst --- models/fixtures/comment.yml | 9 +++++++++ models/fixtures/issue.yml | 2 +- release-notes/8.0.0/feat/3985.md | 1 + tests/e2e/markup.test.e2e.js | 13 +++++++++++++ tests/integration/api_comment_test.go | 4 ++-- tests/integration/api_nodeinfo_test.go | 2 +- web_src/css/markup/dark.css | 13 +++++++++++++ web_src/css/markup/light.css | 6 ++++++ web_src/css/themes/theme-forgejo-dark.css | 2 ++ web_src/css/themes/theme-forgejo-light.css | 1 + web_src/css/themes/theme-gitea-dark.css | 1 + web_src/css/themes/theme-gitea-light.css | 1 + 12 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 release-notes/8.0.0/feat/3985.md create mode 100644 tests/e2e/markup.test.e2e.js create mode 100644 web_src/css/markup/dark.css create mode 100644 web_src/css/markup/light.css diff --git a/models/fixtures/comment.yml b/models/fixtures/comment.yml index 74fc716180..fdf8908206 100644 --- a/models/fixtures/comment.yml +++ b/models/fixtures/comment.yml @@ -83,3 +83,12 @@ issue_id: 2 # in repo_id 1 review_id: 20 created_unix: 946684810 + +- + id: 10 + type: 0 + poster_id: 1 + issue_id: 1 # in repo_id 1 + content: "test markup light/dark-mode-only ![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)" + created_unix: 946684813 + updated_unix: 946684813 diff --git a/models/fixtures/issue.yml b/models/fixtures/issue.yml index ca5b1c6cd1..adb407f9c0 100644 --- a/models/fixtures/issue.yml +++ b/models/fixtures/issue.yml @@ -10,7 +10,7 @@ priority: 0 is_closed: false is_pull: false - num_comments: 2 + num_comments: 3 created_unix: 946684800 updated_unix: 978307200 is_locked: false diff --git a/release-notes/8.0.0/feat/3985.md b/release-notes/8.0.0/feat/3985.md new file mode 100644 index 0000000000..31274c2d91 --- /dev/null +++ b/release-notes/8.0.0/feat/3985.md @@ -0,0 +1 @@ +Added support for displaying images based on the users current color code by using an anchor of `#dark-mode-only` or `#light-mode-only` respectively. Also supporting the github variants (e.g. `#gh-dark-mode-only`). \ No newline at end of file diff --git a/tests/e2e/markup.test.e2e.js b/tests/e2e/markup.test.e2e.js new file mode 100644 index 0000000000..7bc6d2b6ca --- /dev/null +++ b/tests/e2e/markup.test.e2e.js @@ -0,0 +1,13 @@ +// @ts-check +import {test, expect} from '@playwright/test'; + +test('Test markup with #xyz-mode-only', async ({page}) => { + const response = await page.goto('/user2/repo1/issues/1'); + await expect(response?.status()).toBe(200); + await page.waitForLoadState('networkidle'); + + const comment = page.locator('.comment-body>.markup', {hasText: 'test markup light/dark-mode-only'}); + await expect(comment).toBeVisible(); + await expect(comment.locator('[src$="#gh-light-mode-only"]')).toBeVisible(); + await expect(comment.locator('[src$="#gh-dark-mode-only"]')).not.toBeVisible(); +}); diff --git a/tests/integration/api_comment_test.go b/tests/integration/api_comment_test.go index 221a6ba5ce..daa7b5b910 100644 --- a/tests/integration/api_comment_test.go +++ b/tests/integration/api_comment_test.go @@ -39,7 +39,7 @@ func TestAPIListRepoComments(t *testing.T) { var apiComments []*api.Comment DecodeJSON(t, resp, &apiComments) - assert.Len(t, apiComments, 2) + assert.Len(t, apiComments, 3) for _, apiComment := range apiComments { c := &issues_model.Comment{ID: apiComment.ID} unittest.AssertExistsAndLoadBean(t, c, @@ -65,7 +65,7 @@ func TestAPIListRepoComments(t *testing.T) { req = NewRequest(t, "GET", link.String()) resp = MakeRequest(t, req, http.StatusOK) DecodeJSON(t, resp, &apiComments) - assert.Len(t, apiComments, 1) + assert.Len(t, apiComments, 2) assert.EqualValues(t, 3, apiComments[0].ID) } diff --git a/tests/integration/api_nodeinfo_test.go b/tests/integration/api_nodeinfo_test.go index 598d38fb64..33d06ed1b4 100644 --- a/tests/integration/api_nodeinfo_test.go +++ b/tests/integration/api_nodeinfo_test.go @@ -34,6 +34,6 @@ func TestNodeinfo(t *testing.T) { assert.Equal(t, "forgejo", nodeinfo.Software.Name) assert.Equal(t, 29, nodeinfo.Usage.Users.Total) assert.Equal(t, 22, nodeinfo.Usage.LocalPosts) - assert.Equal(t, 3, nodeinfo.Usage.LocalComments) + assert.Equal(t, 4, nodeinfo.Usage.LocalComments) }) } diff --git a/web_src/css/markup/dark.css b/web_src/css/markup/dark.css new file mode 100644 index 0000000000..700a48518e --- /dev/null +++ b/web_src/css/markup/dark.css @@ -0,0 +1,13 @@ +.markup [src$="#gh-light-mode-only"], +.markup [src$="#light-mode-only"], +.markup [href$="#gh-light-mode-only"], +.markup [href$="#light-mode-only"] { + display: none; +} + +.markup [src$="#gh-dark-mode-only"], +.markup [src$="#dark-mode-only"], +.markup [href$="#gh-dark-mode-only"], +.markup [href$="#dark-mode-only"] { + display: unset; +} diff --git a/web_src/css/markup/light.css b/web_src/css/markup/light.css new file mode 100644 index 0000000000..88fc4b748c --- /dev/null +++ b/web_src/css/markup/light.css @@ -0,0 +1,6 @@ +.markup [src$="#gh-dark-mode-only"], +.markup [src$="#dark-mode-only"], +.markup [href$="#gh-dark-mode-only"], +.markup [href$="#dark-mode-only"] { + display: none; +} diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index b0fb7c22e1..c4d7287ff9 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -1,5 +1,7 @@ @import "../chroma/dark.css"; @import "../codemirror/dark.css"; +@import "../markup/dark.css"; + :root { --steel-900: #10161d; --steel-850: #131a21; diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index f2bafc148b..9ad58879ab 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -1,5 +1,6 @@ @import "../chroma/light.css"; @import "../codemirror/light.css"; +@import "../markup/light.css"; :root { --steel-900: #10161d; diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 1763f236cf..6ad6efe748 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -1,5 +1,6 @@ @import "../chroma/dark.css"; @import "../codemirror/dark.css"; +@import "../markup/dark.css"; :root { --is-dark-theme: true; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index fd348dfdc2..830b96febe 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -1,5 +1,6 @@ @import "../chroma/light.css"; @import "../codemirror/light.css"; +@import "../markup/light.css"; :root { --is-dark-theme: false;