-
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index e1bd6b73ae..50e6708dcf 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -44,7 +44,7 @@
{{.Summary | ctx.RenderUtils.RenderEmoji}}
{{else}}
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
- {{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink ($.Repository.ComposeCommentMetas ctx)}}
{{end}}
{{if IsMultilineCommitMessage .Message}}
@@ -52,7 +52,7 @@
{{end}}
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
{{if IsMultilineCommitMessage .Message}}
- {{ctx.RenderUtils.RenderCommitMessage .Commit.Message ($.Repository.ComposeMetas ctx)}}{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}
+{{ctx.RenderUtils.RenderCommitMessage .Commit.Message ($.Repository.ComposeCommentMetas ctx)}}{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}
{{if not $.PageIsWiki}} {{if IsMultilineCommitMessage .Commit.Message}} -{{ctx.RenderUtils.RenderCommitBody .Commit.Message ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitBody .Commit.Message ($.Repository.ComposeCommentMetas ctx)}}
{{end}}
{{template "repo/commit_load_branches_and_tags" .}}
{{ctx.RenderUtils.RenderCommitBody .Message ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitBody .Message ($.Repository.ComposeCommentMetas ctx)}}
{{end}}
{{if $.CommitsTagsMap}}
{{range (index $.CommitsTagsMap .ID.String)}}
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index 2acf7c58b8..b054ce19a5 100644
--- a/templates/repo/commits_list_small.tmpl
+++ b/templates/repo/commits_list_small.tmpl
@@ -15,7 +15,7 @@
{{$commitLink:= printf "%s/%s" $commitBaseLink (PathEscape .ID.String)}}
- {{- ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx) -}}
+ {{- ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeCommentMetas ctx) -}}
{{if IsMultilineCommitMessage .Message}}
@@ -29,7 +29,7 @@
- {{- ctx.RenderUtils.RenderCommitBody .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx) -}}
+ {{- ctx.RenderUtils.RenderCommitBody .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeCommentMetas ctx) -}}
{{end}}
{{end}}
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 05cfffd2b7..0c9e3f0698 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -189,7 +189,7 @@
{{template "shared/issueicon" .}}
- {{ctx.RenderUtils.RenderIssueTitle .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderIssueTitle .PullRequest.Issue.Title ($.Repository.ComposeCommentMetas ctx)}}
#{{.PullRequest.Issue.Index}}
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index 6af0ba1f0f..55a91ac195 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -8,7 +8,7 @@
{{template "repo/commit_sign_badge" dict "Commit" $commit.Commit "CommitBaseLink" (print $.RepoLink "/commit") "CommitSignVerification" $commit.Verification}}
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index dcc1f48c2c..a4be598540 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -13,7 +13,7 @@
{{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
- {{ctx.RenderUtils.RenderIssueTitle .Issue.Title ($.Repository.ComposeMetas ctx)}} + {{ctx.RenderUtils.RenderIssueTitle .Issue.Title ($.Repository.ComposeCommentMetas ctx)}} #{{.Issue.Index}}
diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl
index 0341d60eb2..da457e423a 100644
--- a/templates/repo/latest_commit.tmpl
+++ b/templates/repo/latest_commit.tmpl
@@ -21,10 +21,10 @@
{{template "repo/commit_statuses" dict "Status" .LatestCommitStatus "Statuses" .LatestCommitStatuses}}
{{$commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String)}}
-
+
{{if IsMultilineCommitMessage .LatestCommit.Message}}
- {
- const el = elMarkup.querySelector('.asciinema-player-container');
- if (!el) return;
+ queryElems(elMarkup, '.asciinema-player-container', async (el) => {
+ const [player] = await Promise.all([
+ // @ts-expect-error: module exports no types
+ import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
+ import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'),
+ ]);
- const [player] = await Promise.all([
- // @ts-expect-error: module exports no types
- import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
- import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'),
- ]);
-
- player.create(el.getAttribute('data-asciinema-player-src'), el, {
- // poster (a preview frame) to display until the playback is started.
- // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
- poster: 'npt:1:0:0',
+ player.create(el.getAttribute('data-asciinema-player-src'), el, {
+ // poster (a preview frame) to display until the playback is started.
+ // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
+ poster: 'npt:1:0:0',
+ });
});
}
diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
index 4430256848..67284bad55 100644
--- a/web_src/js/markup/codecopy.ts
+++ b/web_src/js/markup/codecopy.ts
@@ -1,4 +1,5 @@
import {svg} from '../svg.ts';
+import {queryElems} from '../utils/dom.ts';
export function makeCodeCopyButton(): HTMLButtonElement {
const button = document.createElement('button');
@@ -8,11 +9,12 @@ export function makeCodeCopyButton(): HTMLButtonElement {
}
export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
- const el = elMarkup.querySelector('.code-block code'); // .markup .code-block code
- if (!el || !el.textContent) return;
-
- const btn = makeCodeCopyButton();
- // remove final trailing newline introduced during HTML rendering
- btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
- el.after(btn);
+ // .markup .code-block code
+ queryElems(elMarkup, '.code-block code', (el) => {
+ if (!el.textContent) return;
+ const btn = makeCodeCopyButton();
+ // remove final trailing newline introduced during HTML rendering
+ btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
+ el.after(btn);
+ });
}
diff --git a/web_src/js/markup/math.ts b/web_src/js/markup/math.ts
index 2a4468bf2e..bc118137a1 100644
--- a/web_src/js/markup/math.ts
+++ b/web_src/js/markup/math.ts
@@ -1,4 +1,5 @@
import {displayError} from './common.ts';
+import {queryElems} from '../utils/dom.ts';
function targetElement(el: Element): {target: Element, displayAsBlock: boolean} {
// The target element is either the parent "code block with loading indicator", or itself
@@ -12,35 +13,35 @@ function targetElement(el: Element): {target: Element, displayAsBlock: boolean}
}
export async function initMarkupCodeMath(elMarkup: HTMLElement): Promise {
- const el = elMarkup.querySelector('code.language-math'); // .markup code.language-math'
- if (!el) return;
+ // .markup code.language-math'
+ queryElems(elMarkup, 'code.language-math', async (el) => {
+ const [{default: katex}] = await Promise.all([
+ import(/* webpackChunkName: "katex" */'katex'),
+ import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
+ ]);
- const [{default: katex}] = await Promise.all([
- import(/* webpackChunkName: "katex" */'katex'),
- import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
- ]);
+ const MAX_CHARS = 1000;
+ const MAX_SIZE = 25;
+ const MAX_EXPAND = 1000;
- const MAX_CHARS = 1000;
- const MAX_SIZE = 25;
- const MAX_EXPAND = 1000;
+ const {target, displayAsBlock} = targetElement(el);
+ if (target.hasAttribute('data-render-done')) return;
+ const source = el.textContent;
- const {target, displayAsBlock} = targetElement(el);
- if (target.hasAttribute('data-render-done')) return;
- const source = el.textContent;
-
- if (source.length > MAX_CHARS) {
- displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`));
- return;
- }
- try {
- const tempEl = document.createElement(displayAsBlock ? 'p' : 'span');
- katex.render(source, tempEl, {
- maxSize: MAX_SIZE,
- maxExpand: MAX_EXPAND,
- displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode
- });
- target.replaceWith(tempEl);
- } catch (error) {
- displayError(target, error);
- }
+ if (source.length > MAX_CHARS) {
+ displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`));
+ return;
+ }
+ try {
+ const tempEl = document.createElement(displayAsBlock ? 'p' : 'span');
+ katex.render(source, tempEl, {
+ maxSize: MAX_SIZE,
+ maxExpand: MAX_EXPAND,
+ displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode
+ });
+ target.replaceWith(tempEl);
+ } catch (error) {
+ displayError(target, error);
+ }
+ });
}
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index b4bf3153ea..ac24b3bcba 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,6 +1,7 @@
import {isDarkTheme} from '../utils.ts';
import {makeCodeCopyButton} from './codecopy.ts';
import {displayError} from './common.ts';
+import {queryElems} from '../utils/dom.ts';
const {mermaidMaxSourceCharacters} = window.config;
@@ -11,77 +12,77 @@ body {margin: 0; padding: 0; overflow: hidden}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0}`;
export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise {
- const el = elMarkup.querySelector('code.language-mermaid'); // .markup code.language-mermaid
- if (!el) return;
+ // .markup code.language-mermaid
+ queryElems(elMarkup, 'code.language-mermaid', async (el) => {
+ const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
- const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
-
- mermaid.initialize({
- startOnLoad: false,
- theme: isDarkTheme() ? 'dark' : 'neutral',
- securityLevel: 'strict',
- suppressErrorRendering: true,
- });
-
- const pre = el.closest('pre');
- if (pre.hasAttribute('data-render-done')) return;
-
- const source = el.textContent;
- if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
- displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
- return;
- }
-
- try {
- await mermaid.parse(source);
- } catch (err) {
- displayError(pre, err);
- return;
- }
-
- try {
- // can't use bindFunctions here because we can't cross the iframe boundary. This
- // means js-based interactions won't work but they aren't intended to work either
- const {svg} = await mermaid.render('mermaid', source);
-
- const iframe = document.createElement('iframe');
- iframe.classList.add('markup-content-iframe', 'tw-invisible');
- iframe.srcdoc = `${svg}`;
-
- const mermaidBlock = document.createElement('div');
- mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden');
- mermaidBlock.append(iframe);
-
- const btn = makeCodeCopyButton();
- btn.setAttribute('data-clipboard-text', source);
- mermaidBlock.append(btn);
-
- const updateIframeHeight = () => {
- const body = iframe.contentWindow?.document?.body;
- if (body) {
- iframe.style.height = `${body.clientHeight}px`;
- }
- };
-
- iframe.addEventListener('load', () => {
- pre.replaceWith(mermaidBlock);
- mermaidBlock.classList.remove('tw-hidden');
- updateIframeHeight();
- setTimeout(() => { // avoid flash of iframe background
- mermaidBlock.classList.remove('is-loading');
- iframe.classList.remove('tw-invisible');
- }, 0);
-
- // update height when element's visibility state changes, for example when the diagram is inside
- // a
{{ctx.RenderUtils.RenderCommitBody .LatestCommit.Message ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitBody .LatestCommit.Message ($.Repository.ComposeCommentMetas ctx)}}
{{end}}
{{end}}
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 4745110dd2..612a2405e4 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -46,7 +46,7 @@
{{if $commit}}
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
- {{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink ($.Repository.ComposeCommentMetas ctx)}}
{{else}}
… {{/* will be loaded again by LastCommitLoaderURL */}}
{{end}}
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 47686dd442..366bb80b42 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -94,7 +94,7 @@
{{ShortSha .Sha1}}
- {{ctx.RenderUtils.RenderCommitMessage .Message ($repo.ComposeMetas ctx)}}
+ {{ctx.RenderUtils.RenderCommitMessage .Message ($repo.ComposeCommentMetas ctx)}}
{{end}}
diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts
index 22dbff2d46..125bba447b 100644
--- a/web_src/js/markup/asciicast.ts
+++ b/web_src/js/markup/asciicast.ts
@@ -1,16 +1,17 @@
+import {queryElems} from '../utils/dom.ts';
+
export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise + block and the
block and the block becomes visible upon user interaction, it
- // would initially set a incorrect height and the correct height is set during this callback.
- (new IntersectionObserver(() => {
- updateIframeHeight();
- }, {root: document.documentElement})).observe(iframe);
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: isDarkTheme() ? 'dark' : 'neutral',
+ securityLevel: 'strict',
+ suppressErrorRendering: true,
});
- document.body.append(mermaidBlock);
- } catch (err) {
- displayError(pre, err);
- }
+ const pre = el.closest('pre');
+ if (pre.hasAttribute('data-render-done')) return;
+
+ const source = el.textContent;
+ if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
+ displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
+ return;
+ }
+
+ try {
+ await mermaid.parse(source);
+ } catch (err) {
+ displayError(pre, err);
+ return;
+ }
+
+ try {
+ // can't use bindFunctions here because we can't cross the iframe boundary. This
+ // means js-based interactions won't work but they aren't intended to work either
+ const {svg} = await mermaid.render('mermaid', source);
+
+ const iframe = document.createElement('iframe');
+ iframe.classList.add('markup-content-iframe', 'tw-invisible');
+ iframe.srcdoc = `${svg}`;
+
+ const mermaidBlock = document.createElement('div');
+ mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden');
+ mermaidBlock.append(iframe);
+
+ const btn = makeCodeCopyButton();
+ btn.setAttribute('data-clipboard-text', source);
+ mermaidBlock.append(btn);
+
+ const updateIframeHeight = () => {
+ const body = iframe.contentWindow?.document?.body;
+ if (body) {
+ iframe.style.height = `${body.clientHeight}px`;
+ }
+ };
+
+ iframe.addEventListener('load', () => {
+ pre.replaceWith(mermaidBlock);
+ mermaidBlock.classList.remove('tw-hidden');
+ updateIframeHeight();
+ setTimeout(() => { // avoid flash of iframe background
+ mermaidBlock.classList.remove('is-loading');
+ iframe.classList.remove('tw-invisible');
+ }, 0);
+
+ // update height when element's visibility state changes, for example when the diagram is inside
+ // a + block and the block becomes visible upon user interaction, it
+ // would initially set a incorrect height and the correct height is set during this callback.
+ (new IntersectionObserver(() => {
+ updateIframeHeight();
+ }, {root: document.documentElement})).observe(iframe);
+ });
+
+ document.body.append(mermaidBlock);
+ } catch (err) {
+ displayError(pre, err);
+ }
+ });
}
+ block and the