Use a generic markup class to display externally rendered files and d…

…iffs (#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 <11440490+HarvsG@users.noreply.github.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: silverwind <me@silverwind.io>
go-gitea · May 7, 2021 · 6400668 · 6400668
1 parent 9b5185d
commit 6400668
Show file tree

Hide file tree

Showing 30 changed files with 104 additions and 71 deletions.
diff --git a/docs/content/doc/advanced/external-renderers.en-us.md b/docs/content/doc/advanced/external-renderers.en-us.md
@@ -98,3 +98,36 @@ Once your configuration changes have been made, restart Gitea to have changes ta
 
 **Note**: Prior to Gitea 1.12 there was a single `markup.sanitiser` section with keys that were redefined for multiple rules, however,
 there were significant problems with this method of configuration necessitating configuration through multiple sections.
+
+## Customizing CSS
+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. 
+
+And so you could write some CSS:
+```css
+.markup.XXXXX html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+.markup.XXXXX body {
+  color: #444;
+  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
+  font-size: 12px;
+  line-height: 1.7;
+  padding: 1em;
+  margin: auto;
+  max-width: 42em;
+  background: #fefefe;
+}
+
+.markup.XXXXX p {
+  color: orangered;
+}
+```
+
+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`:
+```html
+<link type="text/css" href="{{AppSubUrl}}/css/my-style-XXXXX.css" />
+```
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -11,7 +11,7 @@
 				</span>
 				{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
 			</div>
-			{{if $.RenderedDescription}}<p class="render-content markdown">{{$.RenderedDescription|Str2html}}</p>{{end}}
+			{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
 			<div class="text grey meta">
 				{{if .Org.Location}}<div class="item">{{svg "octicon-location"}} <span>{{.Org.Location}}</span></div>{{end}}
 				{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
@@ -164,7 +164,7 @@
 					<div class="ui bottom attached active write tab segment">
 						<textarea class="review-textarea" tabindex="1" name="content"></textarea>
 					</div>
-					<div class="ui bottom attached tab preview segment markdown">
+					<div class="ui bottom attached tab preview segment markup">
 					{{$.i18n.Tr "loading"}}
 					</div>
 					<div class="text right edit buttons">

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
@@ -22,12 +22,12 @@
 			<div class="ui active tab" data-tab="write">
 				<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
 			</div>
-			<div class="ui tab markdown" data-tab="preview">
+			<div class="ui tab markup" data-tab="preview">
 			{{.i18n.Tr "loading"}}
 			</div>
 		</div>
 		<div class="field footer">
-			<span class="markdown-info">{{svg "octicon-markdown"}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
+			<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
 			<div class="ui right">
 				{{if $.reply}}
 					<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
@@ -51,7 +51,7 @@
 			</div>
 		</div>
 		<div class="ui attached segment comment-body">
-			<div class="render-content markdown">
+			<div class="render-content markup">
 			{{if .RenderedContent}}
 				{{.RenderedContent|Str2html}}
 			{{else}}

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
@@ -44,7 +44,7 @@
 {{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>
-				<div class="ui bottom attached tab segment markdown" data-tab="preview">
+				<div class="ui bottom attached tab segment markup" data-tab="preview">
 					{{.i18n.Tr "loading"}}
 				</div>
 				<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">

diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
@@ -27,7 +27,7 @@
 
 							<div class="item">
 								<h3>{{.i18n.Tr "repo.create_new_repo_command"}}</h3>
-								<div class="markdown">
+								<div class="markup">
 									<pre><code>touch README.md
 git init
 {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
@@ -41,7 +41,7 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 
 							<div class="item">
 								<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
-								<div class="markdown">
+								<div class="markup">
 									<pre><code>git remote add origin <span class="clone-url">{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}</span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>

diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
@@ -8,7 +8,7 @@
 			{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
 		</textarea>
 	</div>
-	<div class="ui bottom tab markdown" data-tab="preview">
+	<div class="ui bottom tab markup" data-tab="preview">
 		{{.i18n.Tr "loading"}}
 	</div>
 </div>

diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -5,7 +5,7 @@
 		<div class="ui three column stackable grid">
 			<div class="column">
 				<h1>{{.Milestone.Name}}</h1>
-				<div class="markdown content">
+				<div class="markup content">
 					{{.Milestone.RenderedContent|Str2html}}
 				</div>
 			</div>

diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -98,7 +98,7 @@
 						</div>
 					{{end}}
 					{{if .Content}}
-						<div class="markdown content">
+						<div class="markup content">
 							{{.RenderedContent|Str2html}}
 						</div>
 					{{end}}

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
@@ -57,7 +57,7 @@
 						</div>
 					</div>
 					<div class="ui attached segment comment-body">
-						<div class="render-content markdown">
+						<div class="render-content markup">
 							{{if .Issue.RenderedContent}}
 								{{.Issue.RenderedContent|Str2html}}
 							{{else}}
@@ -191,7 +191,7 @@
 			<div class="ui bottom active tab write">
 				<textarea tabindex="1" name="content"></textarea>
 			</div>
-			<div class="ui bottom tab preview markdown">
+			<div class="ui bottom tab preview markup">
 				{{$.i18n.Tr "loading"}}
 			</div>
 		</div>

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
@@ -64,7 +64,7 @@
 					</div>
 				</div>
 				<div class="ui attached segment comment-body">
-					<div class="render-content markdown">
+					<div class="render-content markup">
 						{{if .RenderedContent}}
 							{{.RenderedContent|Str2html}}
 						{{else}}
@@ -442,7 +442,7 @@
 						</span>
 					</div>
 					<div class="ui attached segment comment-body">
-						<div class="render-content markdown">
+						<div class="render-content markup">
 							{{if .RenderedContent}}
 								{{.RenderedContent|Str2html}}
 							{{else}}
@@ -552,7 +552,7 @@
 														</div>
 													</div>
 													<div class="text comment-content">
-														<div class="render-content markdown">
+														<div class="render-content markup">
 														{{if .RenderedContent}}
 															{{.RenderedContent|Str2html}}
 														{{else}}
@@ -739,7 +739,7 @@
 							</span>
 						</div>
 						<div class="ui attached segment">
-							<div class="render-content markdown">
+							<div class="render-content markup">
 								{{if .RenderedContent}}
 									{{.RenderedContent|Str2html}}
 								{{else}}

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
@@ -136,7 +136,7 @@
 									| <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>
 								{{end}}
 							</p>
-							<div class="markdown desc">
+							<div class="markup desc">
 								{{Str2html .Note}}
 							</div>
 							<div class="ui accordion download">

diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
@@ -53,7 +53,7 @@
 					<div class="ui bottom active tab" data-tab="write">
 						<textarea name="content">{{.content}}</textarea>
 					</div>
-					<div class="ui bottom tab markdown" data-tab="preview">
+					<div class="ui bottom tab markup" data-tab="preview">
 						{{$.i18n.Tr "loading"}}
 					</div>
 				</div>

diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
@@ -12,7 +12,7 @@
 				</div>
 			</h4>
 			<div class="ui attached table unstackable segment">
-				<div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}}">
+				<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextFile}} code-view{{end}}">
 					{{if .IsMarkup}}
 						{{if .FileContent}}{{.FileContent | Safe}}{{end}}
 					{{else if .IsRenderedHTML}}

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
@@ -64,7 +64,7 @@
 		{{end}}
 	</h4>
 	<div class="ui attached table unstackable segment">
-		<div class="file-view {{if .IsMarkup}}{{.MarkupType}} {{if ne "csv" .MarkupType}}markdown{{end}}{{else if .IsRenderedHTML}}plain-text{{else if .IsTextSource}}code-view{{end}}">
+		<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsRenderedHTML}} plain-text{{else if .IsTextSource}} code-view{{end}}">
 			{{if .IsMarkup}}
 				{{if .FileContent}}{{.FileContent | Safe}}{{end}}
 			{{else if .IsRenderedHTML}}

diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
@@ -61,7 +61,7 @@
 			</div>
 		{{end}}
 		<div class="ui {{if .sidebarPresent}}grid equal width{{end}}" style="margin-top: 1rem;">
-			<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markdown">
+			<div class="ui {{if .sidebarPresent}}eleven wide column{{end}} segment markup">
 				{{.content | Str2html}}
 			</div>
 			{{if .sidebarPresent}}

diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
@@ -36,7 +36,7 @@
 							{{end}}
 							{{if $.RenderedDescription}}
 								<li>
-									<div class="render-content markdown">{{$.RenderedDescription|Str2html}}</div>
+									<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>
 								</li>
 							{{end}}
 							{{range .OpenIDs}}

diff --git a/web_src/js/index.js b/web_src/js/index.js
@@ -4,26 +4,26 @@ import Vue from 'vue';
 import {htmlEscape} from 'escape-goat';
 import 'jquery.are-you-sure';
 
-import initMigration from './features/migration.js';
+import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+import attachTribute from './features/tribute.js';
+import createColorPicker from './features/colorpicker.js';
+import createDropzone from './features/dropzone.js';
+import initClipboard from './features/clipboard.js';
 import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
-import initClipboard from './features/clipboard.js';
 import initHeatmap from './features/heatmap.js';
+import initImageDiff from './features/imagediff.js';
+import initMigration from './features/migration.js';
 import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
-import initMarkdownAnchors from './markdown/anchors.js';
-import renderMarkdownContent from './markdown/content.js';
-import attachTribute from './features/tribute.js';
-import createColorPicker from './features/colorpicker.js';
-import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
-import initImageDiff from './features/imagediff.js';
-import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+import {createCodeEditor, createMonaco} from './features/codeeditor.js';
+import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initStopwatch} from './features/stopwatch.js';
-import {createCodeEditor, createMonaco} from './features/codeeditor.js';
-import {svg, svgs} from './svg.js';
+import {renderMarkupContent} from './markup/content.js';
 import {stripTags, mqBinarySearch} from './utils.js';
+import {svg, svgs} from './svg.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -51,7 +51,7 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
-      renderMarkdownContent();
+      renderMarkupContent();
     });
   });
 
@@ -81,7 +81,7 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
-        renderMarkdownContent();
+        renderMarkupContent();
       });
     });
   }
@@ -1107,7 +1107,7 @@ async function initRepository() {
               dz.emit('submit');
               dz.emit('reload');
             }
-            renderMarkdownContent();
+            renderMarkupContent();
           });
         });
       } else {
@@ -1473,8 +1473,8 @@ function initWikiForm() {
             text: plainText,
             wiki: true
           }, (data) => {
-            preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
-            renderMarkdownContent();
+            preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
+            renderMarkupContent();
           });
         };
 
@@ -1553,7 +1553,7 @@ function initWikiForm() {
             const $form = $('.repository.wiki.new .ui.form');
             const $root = $form.find('.field.content');
             const loading = $root.data('loading');
-            $root.append(`<div class="ui bottom tab markdown" data-tab="preview">${loading}</div>`);
+            $root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
             initCommentPreviewTab($form);
           },
           className: 'fa fa-file',
@@ -2772,7 +2772,7 @@ $(document).ready(async () => {
   searchTeams();
   searchRepositories();
 
-  initMarkdownAnchors();
+  initMarkupAnchors();
   initCommentForm();
   initInstall();
   initArchiveLinks();
@@ -2830,7 +2830,7 @@ $(document).ready(async () => {
     initServiceWorker(),
     initNotificationCount(),
     initStopwatch(),
-    renderMarkdownContent(),
+    renderMarkupContent(),
     initGithook(),
     initImageDiff(),
   ]);

diff --git a/web_src/js/markdown/anchors.js → web_src/js/markup/anchors.js b/web_src/js/markdown/anchors.js → web_src/js/markup/anchors.js
@@ -1,6 +1,6 @@
 import {svg} from '../svg.js';
 
-const headingSelector = '.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6';
+const headingSelector = '.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6';
 
 function scrollToAnchor() {
   if (document.querySelector(':target')) return;
@@ -15,8 +15,8 @@ function scrollToAnchor() {
   }
 }
 
-export default function initMarkdownAnchors() {
-  if (!document.querySelector('.markdown')) return;
+export function initMarkupAnchors() {
+  if (!document.querySelector('.markup')) return;
 
   for (const heading of document.querySelectorAll(headingSelector)) {
     const originalId = heading.id.replace(/^user-content-/, '');

diff --git a/web_src/js/markdown/content.js → web_src/js/markup/content.js b/web_src/js/markdown/content.js → web_src/js/markup/content.js
@@ -1,5 +1,5 @@
 import {renderMermaid} from './mermaid.js';
 
-export default async function renderMarkdownContent() {
+export async function renderMarkupContent() {
   await renderMermaid(document.querySelectorAll('code.language-mermaid'));
 }
diff --git a/web_src/js/markdown/mermaid.js → web_src/js/markup/mermaid.js b/web_src/js/markdown/mermaid.js → web_src/js/markup/mermaid.js
@@ -3,7 +3,7 @@ const MAX_SOURCE_CHARACTERS = 5000;
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
   const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
+  errorNode.setAttribute('class', 'ui message error markup-block-error mono');
   errorNode.textContent = err.str || err.message || String(err);
   el.closest('pre').before(errorNode);
 }

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -102,8 +102,8 @@
   --color-active: #00000014;
   --color-menu: #ffffff;
   --color-card: #ffffff;
-  --color-markdown-table-row: #00000008;
-  --color-markdown-code-block: #00000010;
+  --color-markup-table-row: #00000008;
+  --color-markup-code-block: #00000010;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
   --color-shadow: #00000030;