oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[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 <mai-lapyst@noreply.codeberg.org>
Co-committed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>

authored by

Mai-Lapyst
Mai-Lapyst and committed by
0ko 0a7767ea 96f661e8

+51 -4
+9
models/fixtures/comment.yml
··· 83 83 issue_id: 2 # in repo_id 1 84 84 review_id: 20 85 85 created_unix: 946684810 86 + 87 + - 88 + id: 10 89 + type: 0 90 + poster_id: 1 91 + issue_id: 1 # in repo_id 1 92 + 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)" 93 + created_unix: 946684813 94 + updated_unix: 946684813
+1 -1
models/fixtures/issue.yml
··· 10 10 priority: 0 11 11 is_closed: false 12 12 is_pull: false 13 - num_comments: 2 13 + num_comments: 3 14 14 created_unix: 946684800 15 15 updated_unix: 978307200 16 16 is_locked: false
+1
release-notes/8.0.0/feat/3985.md
··· 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`).
+13
tests/e2e/markup.test.e2e.js
··· 1 + // @ts-check 2 + import {test, expect} from '@playwright/test'; 3 + 4 + test('Test markup with #xyz-mode-only', async ({page}) => { 5 + const response = await page.goto('/user2/repo1/issues/1'); 6 + await expect(response?.status()).toBe(200); 7 + await page.waitForLoadState('networkidle'); 8 + 9 + const comment = page.locator('.comment-body>.markup', {hasText: 'test markup light/dark-mode-only'}); 10 + await expect(comment).toBeVisible(); 11 + await expect(comment.locator('[src$="#gh-light-mode-only"]')).toBeVisible(); 12 + await expect(comment.locator('[src$="#gh-dark-mode-only"]')).not.toBeVisible(); 13 + });
+2 -2
tests/integration/api_comment_test.go
··· 39 39 40 40 var apiComments []*api.Comment 41 41 DecodeJSON(t, resp, &apiComments) 42 - assert.Len(t, apiComments, 2) 42 + assert.Len(t, apiComments, 3) 43 43 for _, apiComment := range apiComments { 44 44 c := &issues_model.Comment{ID: apiComment.ID} 45 45 unittest.AssertExistsAndLoadBean(t, c, ··· 65 65 req = NewRequest(t, "GET", link.String()) 66 66 resp = MakeRequest(t, req, http.StatusOK) 67 67 DecodeJSON(t, resp, &apiComments) 68 - assert.Len(t, apiComments, 1) 68 + assert.Len(t, apiComments, 2) 69 69 assert.EqualValues(t, 3, apiComments[0].ID) 70 70 } 71 71
+1 -1
tests/integration/api_nodeinfo_test.go
··· 34 34 assert.Equal(t, "forgejo", nodeinfo.Software.Name) 35 35 assert.Equal(t, 29, nodeinfo.Usage.Users.Total) 36 36 assert.Equal(t, 22, nodeinfo.Usage.LocalPosts) 37 - assert.Equal(t, 3, nodeinfo.Usage.LocalComments) 37 + assert.Equal(t, 4, nodeinfo.Usage.LocalComments) 38 38 }) 39 39 }
+13
web_src/css/markup/dark.css
··· 1 + .markup [src$="#gh-light-mode-only"], 2 + .markup [src$="#light-mode-only"], 3 + .markup [href$="#gh-light-mode-only"], 4 + .markup [href$="#light-mode-only"] { 5 + display: none; 6 + } 7 + 8 + .markup [src$="#gh-dark-mode-only"], 9 + .markup [src$="#dark-mode-only"], 10 + .markup [href$="#gh-dark-mode-only"], 11 + .markup [href$="#dark-mode-only"] { 12 + display: unset; 13 + }
+6
web_src/css/markup/light.css
··· 1 + .markup [src$="#gh-dark-mode-only"], 2 + .markup [src$="#dark-mode-only"], 3 + .markup [href$="#gh-dark-mode-only"], 4 + .markup [href$="#dark-mode-only"] { 5 + display: none; 6 + }
+2
web_src/css/themes/theme-forgejo-dark.css
··· 1 1 @import "../chroma/dark.css"; 2 2 @import "../codemirror/dark.css"; 3 + @import "../markup/dark.css"; 4 + 3 5 :root { 4 6 --steel-900: #10161d; 5 7 --steel-850: #131a21;
+1
web_src/css/themes/theme-forgejo-light.css
··· 1 1 @import "../chroma/light.css"; 2 2 @import "../codemirror/light.css"; 3 + @import "../markup/light.css"; 3 4 4 5 :root { 5 6 --steel-900: #10161d;
+1
web_src/css/themes/theme-gitea-dark.css
··· 1 1 @import "../chroma/dark.css"; 2 2 @import "../codemirror/dark.css"; 3 + @import "../markup/dark.css"; 3 4 4 5 :root { 5 6 --is-dark-theme: true;
+1
web_src/css/themes/theme-gitea-light.css
··· 1 1 @import "../chroma/light.css"; 2 2 @import "../codemirror/light.css"; 3 + @import "../markup/light.css"; 3 4 4 5 :root { 5 6 --is-dark-theme: false;