Skip to content

Commit 6400668

Browse files
6543HarvsGtechknowlogicksilverwind
authored
Use a generic markup class to display externally rendered files and diffs (#15735)
* creates and implements generic markup less class * How to give custom CSS to externally rendered html * Clarifies sources of CSS styling of markup * further clarification of sources of markup styling * rename _markdown to _markup * remove defunct import * fix orphaned reference * Update docs/content/doc/advanced/external-renderers.en-us.md * more renames markdown -> markup * do not suggest less customization * add back tokens * fix class whitespace, remove useless if-clause * remove unused csv-data rules * use named exports and rename functions * sort imports Co-authored-by: HarvsG <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: silverwind <[email protected]>
1 parent 9b5185d commit 6400668

30 files changed

+104
-71
lines changed

‎docs/content/doc/advanced/external-renderers.en-us.md

+33
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,36 @@ Once your configuration changes have been made, restart Gitea to have changes ta
9898

9999
**Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however,
100100
there were significant problems with this method of configuration necessitating configuration through multiple sections.
101+
102+
## Customizing CSS
103+
The external renderer is specified in the .ini in the format `[markup.XXXXX]` and the HTML supplied by your external renderer will be wrapped in a `<div>` with classes `markup` and `XXXXX`. The `markup` class provides out of the box styling (as does `markdown` if `XXXXX` is `markdown`). Otherwise you can use these classes to specifically target the contents of your rendered HTML.
104+
105+
And so you could write some CSS:
106+
```css
107+
.markup.XXXXX html {
108+
font-size: 100%;
109+
overflow-y: scroll;
110+
-webkit-text-size-adjust: 100%;
111+
-ms-text-size-adjust: 100%;
112+
}
113+
114+
.markup.XXXXX body {
115+
color: #444;
116+
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
117+
font-size: 12px;
118+
line-height: 1.7;
119+
padding: 1em;
120+
margin: auto;
121+
max-width: 42em;
122+
background: #fefefe;
123+
}
124+
125+
.markup.XXXXX p {
126+
color: orangered;
127+
}
128+
```
129+
130+
Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
131+
```html
132+
<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
133+
```

‎templates/org/home.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</span>
1212
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
1313
</div>
14-
{{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
14+
{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
1515
<div class="text grey meta">
1616
{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
1717
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}

‎templates/repo/diff/box.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
<div class="ui bottom attached active write tab segment">
165165
<textarea class="review-textarea" tabindex="1" name="content"></textarea>
166166
</div>
167-
<div class="ui bottom attached tab preview segment markdown">
167+
<div class="ui bottom attached tab preview segment markup">
168168
{{$.i18n.Tr "loading"}}
169169
</div>
170170
<div class="text right edit buttons">

‎templates/repo/diff/comment_form.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
<div class="ui active tab" data-tab="write">
2323
<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
2424
</div>
25-
<div class="ui tab markdown" data-tab="preview">
25+
<div class="ui tab markup" data-tab="preview">
2626
{{.i18n.Tr "loading"}}
2727
</div>
2828
</div>
2929
<div class="field footer">
30-
<span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
30+
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
3131
<div class="ui right">
3232
{{if $.reply}}
3333
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>

‎templates/repo/diff/comments.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
</div>
5353
<div class="ui attached segment comment-body">
54-
<div class="render-content markdown">
54+
<div class="render-content markup">
5555
{{if .RenderedContent}}
5656
{{.RenderedContent|Str2html}}
5757
{{else}}

‎templates/repo/editor/edit.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
{{.FileContent}}</textarea>
4545
<div class="editor-loading is-loading"></div>
4646
</div>
47-
<div class="ui bottom attached tab segment markdown" data-tab="preview">
47+
<div class="ui bottom attached tab segment markup" data-tab="preview">
4848
{{.i18n.Tr "loading"}}
4949
</div>
5050
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">

‎templates/repo/empty.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<div class="item">
2929
<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
30-
<div class="markdown">
30+
<div class="markup">
3131
<pre><code>touch README.md
3232
git init
3333
{{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
@@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4141

4242
<div class="item">
4343
<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
44-
<div class="markdown">
44+
<div class="markup">
4545
<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
4646
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
4747
</div>

‎templates/repo/issue/comment_tab.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
99
</textarea>
1010
</div>
11-
<div class="ui bottom tab markdown" data-tab="preview">
11+
<div class="ui bottom tab markup" data-tab="preview">
1212
{{.i18n.Tr "loading"}}
1313
</div>
1414
</div>

‎templates/repo/issue/milestone_issues.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="ui three column stackable grid">
66
<div class="column">
77
<h1>{{.Milestone.Name}}</h1>
8-
<div class="markdown content">
8+
<div class="markup content">
99
{{.Milestone.RenderedContent|Str2html}}
1010
</div>
1111
</div>

‎templates/repo/issue/milestones.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
</div>
9999
{{end}}
100100
{{if .Content}}
101-
<div class="markdown content">
101+
<div class="markup content">
102102
{{.RenderedContent|Str2html}}
103103
</div>
104104
{{end}}

‎templates/repo/issue/view_content.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
</div>
5858
</div>
5959
<div class="ui attached segment comment-body">
60-
<div class="render-content markdown">
60+
<div class="render-content markup">
6161
{{if .Issue.RenderedContent}}
6262
{{.Issue.RenderedContent|Str2html}}
6363
{{else}}
@@ -191,7 +191,7 @@
191191
<div class="ui bottom active tab write">
192192
<textarea tabindex="1" name="content"></textarea>
193193
</div>
194-
<div class="ui bottom tab preview markdown">
194+
<div class="ui bottom tab preview markup">
195195
{{$.i18n.Tr "loading"}}
196196
</div>
197197
</div>

‎templates/repo/issue/view_content/comments.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666
<div class="ui attached segment comment-body">
67-
<div class="render-content markdown">
67+
<div class="render-content markup">
6868
{{if .RenderedContent}}
6969
{{.RenderedContent|Str2html}}
7070
{{else}}
@@ -442,7 +442,7 @@
442442
</span>
443443
</div>
444444
<div class="ui attached segment comment-body">
445-
<div class="render-content markdown">
445+
<div class="render-content markup">
446446
{{if .RenderedContent}}
447447
{{.RenderedContent|Str2html}}
448448
{{else}}
@@ -552,7 +552,7 @@
552552
</div>
553553
</div>
554554
<div class="text comment-content">
555-
<div class="render-content markdown">
555+
<div class="render-content markup">
556556
{{if .RenderedContent}}
557557
{{.RenderedContent|Str2html}}
558558
{{else}}
@@ -739,7 +739,7 @@
739739
</span>
740740
</div>
741741
<div class="ui attached segment">
742-
<div class="render-content markdown">
742+
<div class="render-content markup">
743743
{{if .RenderedContent}}
744744
{{.RenderedContent|Str2html}}
745745
{{else}}

‎templates/repo/release/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | EscapePound}}...{{.Target}}">{{$.i18n.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.i18n.Tr "repo.release.ahead.target" .Target}}</span>
137137
{{end}}
138138
</p>
139-
<div class="markdown desc">
139+
<div class="markup desc">
140140
{{Str2html .Note}}
141141
</div>
142142
<div class="ui accordion download">

‎templates/repo/release/new.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
<div class="ui bottom active tab" data-tab="write">
5454
<textarea name="content">{{.content}}</textarea>
5555
</div>
56-
<div class="ui bottom tab markdown" data-tab="preview">
56+
<div class="ui bottom tab markup" data-tab="preview">
5757
{{$.i18n.Tr "loading"}}
5858
</div>
5959
</div>

‎templates/repo/settings/lfs_file.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
</h4>
1414
<div class="ui attached table unstackable segment">
15-
<div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
15+
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextFile}} code-view{{end}}">
1616
{{if .IsMarkup}}
1717
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
1818
{{else if .IsRenderedHTML}}

‎templates/repo/view_file.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
{{end}}
6565
</h4>
6666
<div class="ui attached table unstackable segment">
67-
<div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
67+
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextSource}} code-view{{end}}">
6868
{{if .IsMarkup}}
6969
{{if .FileContent}}{{.FileContent | Safe}}{{end}}
7070
{{else if .IsRenderedHTML}}

‎templates/repo/wiki/view.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
</div>
6262
{{end}}
6363
<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
64-
<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown">
64+
<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup">
6565
{{.content | Str2html}}
6666
</div>
6767
{{if .sidebarPresent}}

‎templates/user/profile.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
{{end}}
3737
{{if $.RenderedDescription}}
3838
<li>
39-
<div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
39+
<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
4040
</li>
4141
{{end}}
4242
{{range .OpenIDs}}

‎web_src/js/index.js

+19-19
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ import Vue from 'vue';
44
import {htmlEscape} from 'escape-goat';
55
import 'jquery.are-you-sure';
66

7-
import initMigration from './features/migration.js';
7+
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
8+
import attachTribute from './features/tribute.js';
9+
import createColorPicker from './features/colorpicker.js';
10+
import createDropzone from './features/dropzone.js';
11+
import initClipboard from './features/clipboard.js';
812
import initContextPopups from './features/contextpopup.js';
913
import initGitGraph from './features/gitgraph.js';
10-
import initClipboard from './features/clipboard.js';
1114
import initHeatmap from './features/heatmap.js';
15+
import initImageDiff from './features/imagediff.js';
16+
import initMigration from './features/migration.js';
1217
import initProject from './features/projects.js';
1318
import initServiceWorker from './features/serviceworker.js';
14-
import initMarkdownAnchors from './markdown/anchors.js';
15-
import renderMarkdownContent from './markdown/content.js';
16-
import attachTribute from './features/tribute.js';
17-
import createColorPicker from './features/colorpicker.js';
18-
import createDropzone from './features/dropzone.js';
1919
import initTableSort from './features/tablesort.js';
20-
import initImageDiff from './features/imagediff.js';
21-
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
20+
import {createCodeEditor, createMonaco} from './features/codeeditor.js';
21+
import {initMarkupAnchors} from './markup/anchors.js';
2222
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
2323
import {initStopwatch} from './features/stopwatch.js';
24-
import {createCodeEditor, createMonaco} from './features/codeeditor.js';
25-
import {svg, svgs} from './svg.js';
24+
import {renderMarkupContent} from './markup/content.js';
2625
import {stripTags, mqBinarySearch} from './utils.js';
26+
import {svg, svgs} from './svg.js';
2727

2828
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
2929

@@ -51,7 +51,7 @@ function initCommentPreviewTab($form) {
5151
}, (data) => {
5252
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
5353
$previewPanel.html(data);
54-
renderMarkdownContent();
54+
renderMarkupContent();
5555
});
5656
});
5757

@@ -81,7 +81,7 @@ function initEditPreviewTab($form) {
8181
}, (data) => {
8282
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
8383
$previewPanel.html(data);
84-
renderMarkdownContent();
84+
renderMarkupContent();
8585
});
8686
});
8787
}
@@ -1107,7 +1107,7 @@ async function initRepository() {
11071107
dz.emit('submit');
11081108
dz.emit('reload');
11091109
}
1110-
renderMarkdownContent();
1110+
renderMarkupContent();
11111111
});
11121112
});
11131113
} else {
@@ -1473,8 +1473,8 @@ function initWikiForm() {
14731473
text: plainText,
14741474
wiki: true
14751475
}, (data) => {
1476-
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
1477-
renderMarkdownContent();
1476+
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
1477+
renderMarkupContent();
14781478
});
14791479
};
14801480

@@ -1553,7 +1553,7 @@ function initWikiForm() {
15531553
const $form = $('.repository.wiki.new .ui.form');
15541554
const $root = $form.find('.field.content');
15551555
const loading = $root.data('loading');
1556-
$root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
1556+
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
15571557
initCommentPreviewTab($form);
15581558
},
15591559
className: 'fa fa-file',
@@ -2772,7 +2772,7 @@ $(document).ready(async () => {
27722772
searchTeams();
27732773
searchRepositories();
27742774

2775-
initMarkdownAnchors();
2775+
initMarkupAnchors();
27762776
initCommentForm();
27772777
initInstall();
27782778
initArchiveLinks();
@@ -2830,7 +2830,7 @@ $(document).ready(async () => {
28302830
initServiceWorker(),
28312831
initNotificationCount(),
28322832
initStopwatch(),
2833-
renderMarkdownContent(),
2833+
renderMarkupContent(),
28342834
initGithook(),
28352835
initImageDiff(),
28362836
]);

‎web_src/js/markdown/anchors.js renamed to ‎web_src/js/markup/anchors.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {svg} from '../svg.js';
22

3-
const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
3+
const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6';
44

55
function scrollToAnchor() {
66
if (document.querySelector(':target')) return;
@@ -15,8 +15,8 @@ function scrollToAnchor() {
1515
}
1616
}
1717

18-
export default function initMarkdownAnchors() {
19-
if (!document.querySelector('.markdown')) return;
18+
export function initMarkupAnchors() {
19+
if (!document.querySelector('.markup')) return;
2020

2121
for (const heading of document.querySelectorAll(headingSelector)) {
2222
const originalId = heading.id.replace(/^user-content-/, '');

‎web_src/js/markdown/content.js renamed to ‎web_src/js/markup/content.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {renderMermaid} from './mermaid.js';
22

3-
export default async function renderMarkdownContent() {
3+
export async function renderMarkupContent() {
44
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
55
}

‎web_src/js/markdown/mermaid.js renamed to ‎web_src/js/markup/mermaid.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
33
function displayError(el, err) {
44
el.closest('pre').classList.remove('is-loading');
55
const errorNode = document.createElement('div');
6-
errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
6+
errorNode.setAttribute('class', 'ui message error markup-block-error mono');
77
errorNode.textContent = err.str || err.message || String(err);
88
el.closest('pre').before(errorNode);
99
}

‎web_src/less/_base.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@
102102
--color-active: #00000014;
103103
--color-menu: #ffffff;
104104
--color-card: #ffffff;
105-
--color-markdown-table-row: #00000008;
106-
--color-markdown-code-block: #00000010;
105+
--color-markup-table-row: #00000008;
106+
--color-markup-code-block: #00000010;
107107
--color-button: #ffffff;
108108
--color-code-bg: #ffffff;
109109
--color-shadow: #00000030;

0 commit comments

Comments
 (0)