mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-22 15:23:14 -05:00
Support asciicast files as new markup (#22448)
Support [asciicast files](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md) as a new markup via [asciinema-player](https://github.com/asciinema/asciinema-player). For more on asciinema, see the [introduction](https://asciinema.org/). So users can use asciinema recorder to generate an asciicast file (or you can download a sample file from https://asciinema.org/a/335480.cast?dl=1), then upload it to Gitea and play it on Gitea. Snapshots: <details> ## Upload asciicast files <img width="1134" alt="image" src="https://user-images.githubusercontent.com/9418365/212461061-cc2c7181-0e14-4534-af55-1ec60a639fd1.png"> ## Open an asciicast file <img width="1137" alt="image" src="https://user-images.githubusercontent.com/9418365/212461090-a3b5141f-4894-430d-a2b4-ea257801a0ed.png"> ## Play it <img width="1144" alt="image" src="https://user-images.githubusercontent.com/9418365/212461157-4e82db69-0e41-471d-928f-ac1fe0737105.png"> ## Copy contents from the "video" <img width="1145" alt="image" src="https://user-images.githubusercontent.com/9418365/212461286-211612bc-15d6-427a-89a9-6abff5c6a0a5.png"> ## View the source <img width="1140" alt="image" src="https://user-images.githubusercontent.com/9418365/212461187-05473b2d-ba3d-4072-84a6-4aa1e7d82182.png"> </details> Known issue: Don't support the [v1 version asciicast files](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v1.md), it's a poorly designed version, it does not specify the file extension and uses `*.json` usually, so it's impossible to recognize the files. Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
de484e86bc
commit
d9f748a700
9 changed files with 173 additions and 0 deletions
1
main.go
1
main.go
|
@ -17,6 +17,7 @@ import (
|
||||||
"code.gitea.io/gitea/modules/setting"
|
"code.gitea.io/gitea/modules/setting"
|
||||||
|
|
||||||
// register supported doc types
|
// register supported doc types
|
||||||
|
_ "code.gitea.io/gitea/modules/markup/asciicast"
|
||||||
_ "code.gitea.io/gitea/modules/markup/console"
|
_ "code.gitea.io/gitea/modules/markup/console"
|
||||||
_ "code.gitea.io/gitea/modules/markup/csv"
|
_ "code.gitea.io/gitea/modules/markup/csv"
|
||||||
_ "code.gitea.io/gitea/modules/markup/markdown"
|
_ "code.gitea.io/gitea/modules/markup/markdown"
|
||||||
|
|
64
modules/markup/asciicast/asciicast.go
Normal file
64
modules/markup/asciicast/asciicast.go
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
package asciicast
|
||||||
|
|
||||||
|
import (
|
||||||
|
"fmt"
|
||||||
|
"io"
|
||||||
|
"net/url"
|
||||||
|
"regexp"
|
||||||
|
|
||||||
|
"code.gitea.io/gitea/modules/markup"
|
||||||
|
"code.gitea.io/gitea/modules/setting"
|
||||||
|
)
|
||||||
|
|
||||||
|
func init() {
|
||||||
|
markup.RegisterRenderer(Renderer{})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Renderer implements markup.Renderer for asciicast files.
|
||||||
|
// See https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md
|
||||||
|
type Renderer struct{}
|
||||||
|
|
||||||
|
// Name implements markup.Renderer
|
||||||
|
func (Renderer) Name() string {
|
||||||
|
return "asciicast"
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extensions implements markup.Renderer
|
||||||
|
func (Renderer) Extensions() []string {
|
||||||
|
return []string{".cast"}
|
||||||
|
}
|
||||||
|
|
||||||
|
const (
|
||||||
|
playerClassName = "asciinema-player-container"
|
||||||
|
playerSrcAttr = "data-asciinema-player-src"
|
||||||
|
)
|
||||||
|
|
||||||
|
// SanitizerRules implements markup.Renderer
|
||||||
|
func (Renderer) SanitizerRules() []setting.MarkupSanitizerRule {
|
||||||
|
return []setting.MarkupSanitizerRule{
|
||||||
|
{Element: "div", AllowAttr: "class", Regexp: regexp.MustCompile(playerClassName)},
|
||||||
|
{Element: "div", AllowAttr: playerSrcAttr},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render implements markup.Renderer
|
||||||
|
func (Renderer) Render(ctx *markup.RenderContext, _ io.Reader, output io.Writer) error {
|
||||||
|
rawURL := fmt.Sprintf("%s/%s/%s/raw/%s/%s",
|
||||||
|
setting.AppSubURL,
|
||||||
|
url.PathEscape(ctx.Metas["user"]),
|
||||||
|
url.PathEscape(ctx.Metas["repo"]),
|
||||||
|
ctx.Metas["BranchNameSubURL"],
|
||||||
|
url.PathEscape(ctx.RelativePath),
|
||||||
|
)
|
||||||
|
|
||||||
|
_, err := io.WriteString(output, fmt.Sprintf(
|
||||||
|
`<div class="%s" %s="%s"></div>`,
|
||||||
|
playerClassName,
|
||||||
|
playerSrcAttr,
|
||||||
|
rawURL,
|
||||||
|
))
|
||||||
|
return err
|
||||||
|
}
|
76
package-lock.json
generated
76
package-lock.json
generated
|
@ -16,6 +16,7 @@
|
||||||
"@primer/octicons": "17.10.0",
|
"@primer/octicons": "17.10.0",
|
||||||
"@vue/compiler-sfc": "3.2.45",
|
"@vue/compiler-sfc": "3.2.45",
|
||||||
"add-asset-webpack-plugin": "2.0.1",
|
"add-asset-webpack-plugin": "2.0.1",
|
||||||
|
"asciinema-player": "3.0.1",
|
||||||
"css-loader": "6.7.3",
|
"css-loader": "6.7.3",
|
||||||
"dropzone": "6.0.0-beta.2",
|
"dropzone": "6.0.0-beta.2",
|
||||||
"easymde": "2.18.0",
|
"easymde": "2.18.0",
|
||||||
|
@ -197,6 +198,17 @@
|
||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@babel/runtime": {
|
||||||
|
"version": "7.20.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
|
||||||
|
"integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"regenerator-runtime": "^0.13.11"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@braintree/sanitize-url": {
|
"node_modules/@braintree/sanitize-url": {
|
||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
|
||||||
|
@ -2094,6 +2106,15 @@
|
||||||
"printable-characters": "^1.0.42"
|
"printable-characters": "^1.0.42"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/asciinema-player": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/asciinema-player/-/asciinema-player-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-plm/C/MhOtZWysrfcT/rzxOuu8vxvvDSvF50pqZS6KpJUDmATedAhO54zktbE/g7RiaaYfzgX8xjRhlQdgISwA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.15.4",
|
||||||
|
"solid-js": "^1.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/assertion-error": {
|
"node_modules/assertion-error": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
|
||||||
|
@ -7754,6 +7775,11 @@
|
||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/regenerator-runtime": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||||
|
},
|
||||||
"node_modules/regexp-tree": {
|
"node_modules/regexp-tree": {
|
||||||
"version": "0.1.24",
|
"version": "0.1.24",
|
||||||
"resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.24.tgz",
|
"resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.24.tgz",
|
||||||
|
@ -8249,6 +8275,19 @@
|
||||||
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
|
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/solid-js": {
|
||||||
|
"version": "1.6.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.9.tgz",
|
||||||
|
"integrity": "sha512-kV3fMmm+1C2J95c8eDOPKGfZHnuAkHUBLG4hX1Xu08bXeAIPqmxuz/QdH3B8SIdTp3EatBVIyA6RCes3hrGzpg==",
|
||||||
|
"dependencies": {
|
||||||
|
"csstype": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/solid-js/node_modules/csstype": {
|
||||||
|
"version": "3.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
|
||||||
|
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
|
||||||
|
},
|
||||||
"node_modules/sortablejs": {
|
"node_modules/sortablejs": {
|
||||||
"version": "1.15.0",
|
"version": "1.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
|
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
|
||||||
|
@ -10159,6 +10198,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz",
|
||||||
"integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA=="
|
"integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA=="
|
||||||
},
|
},
|
||||||
|
"@babel/runtime": {
|
||||||
|
"version": "7.20.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
|
||||||
|
"integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
|
||||||
|
"requires": {
|
||||||
|
"regenerator-runtime": "^0.13.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@braintree/sanitize-url": {
|
"@braintree/sanitize-url": {
|
||||||
"version": "6.0.2",
|
"version": "6.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
|
||||||
|
@ -11525,6 +11572,15 @@
|
||||||
"printable-characters": "^1.0.42"
|
"printable-characters": "^1.0.42"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"asciinema-player": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/asciinema-player/-/asciinema-player-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-plm/C/MhOtZWysrfcT/rzxOuu8vxvvDSvF50pqZS6KpJUDmATedAhO54zktbE/g7RiaaYfzgX8xjRhlQdgISwA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.15.4",
|
||||||
|
"solid-js": "^1.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"assertion-error": {
|
"assertion-error": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
|
||||||
|
@ -15606,6 +15662,11 @@
|
||||||
"strip-indent": "^3.0.0"
|
"strip-indent": "^3.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"regenerator-runtime": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||||
|
},
|
||||||
"regexp-tree": {
|
"regexp-tree": {
|
||||||
"version": "0.1.24",
|
"version": "0.1.24",
|
||||||
"resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.24.tgz",
|
"resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.24.tgz",
|
||||||
|
@ -15960,6 +16021,21 @@
|
||||||
"socks": "^2.3.3"
|
"socks": "^2.3.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"solid-js": {
|
||||||
|
"version": "1.6.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.9.tgz",
|
||||||
|
"integrity": "sha512-kV3fMmm+1C2J95c8eDOPKGfZHnuAkHUBLG4hX1Xu08bXeAIPqmxuz/QdH3B8SIdTp3EatBVIyA6RCes3hrGzpg==",
|
||||||
|
"requires": {
|
||||||
|
"csstype": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"csstype": {
|
||||||
|
"version": "3.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
|
||||||
|
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"sortablejs": {
|
"sortablejs": {
|
||||||
"version": "1.15.0",
|
"version": "1.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
|
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
"@primer/octicons": "17.10.0",
|
"@primer/octicons": "17.10.0",
|
||||||
"@vue/compiler-sfc": "3.2.45",
|
"@vue/compiler-sfc": "3.2.45",
|
||||||
"add-asset-webpack-plugin": "2.0.1",
|
"add-asset-webpack-plugin": "2.0.1",
|
||||||
|
"asciinema-player": "3.0.1",
|
||||||
"css-loader": "6.7.3",
|
"css-loader": "6.7.3",
|
||||||
"dropzone": "6.0.0-beta.2",
|
"dropzone": "6.0.0-beta.2",
|
||||||
"easymde": "2.18.0",
|
"easymde": "2.18.0",
|
||||||
|
|
14
web_src/js/markup/asciicast.js
Normal file
14
web_src/js/markup/asciicast.js
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
export async function renderAsciinemaPlayer() {
|
||||||
|
const els = document.querySelectorAll('.asciinema-player-container');
|
||||||
|
if (!els.length) return;
|
||||||
|
|
||||||
|
const player = await import(/* webpackChunkName: "asciinema-player" */'asciinema-player');
|
||||||
|
|
||||||
|
for (const el of els) {
|
||||||
|
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',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
import {renderMermaid} from './mermaid.js';
|
import {renderMermaid} from './mermaid.js';
|
||||||
import {renderMath} from './math.js';
|
import {renderMath} from './math.js';
|
||||||
import {renderCodeCopy} from './codecopy.js';
|
import {renderCodeCopy} from './codecopy.js';
|
||||||
|
import {renderAsciinemaPlayer} from './asciicast.js';
|
||||||
import {initMarkupTasklist} from './tasklist.js';
|
import {initMarkupTasklist} from './tasklist.js';
|
||||||
|
|
||||||
// code that runs for all markup content
|
// code that runs for all markup content
|
||||||
|
@ -8,6 +9,7 @@ export function initMarkupContent() {
|
||||||
renderMermaid();
|
renderMermaid();
|
||||||
renderMath();
|
renderMath();
|
||||||
renderCodeCopy();
|
renderCodeCopy();
|
||||||
|
renderAsciinemaPlayer();
|
||||||
}
|
}
|
||||||
|
|
||||||
// code that only runs for comments
|
// code that only runs for comments
|
||||||
|
|
|
@ -470,6 +470,10 @@
|
||||||
pre {
|
pre {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.asciicast {
|
||||||
|
padding: 5px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
@import "./markup/content.less";
|
@import "./markup/content.less";
|
||||||
@import "./markup/codecopy.less";
|
@import "./markup/codecopy.less";
|
||||||
@import "./code/linebutton.less";
|
@import "./code/linebutton.less";
|
||||||
|
@import "./markup/asciicast.less";
|
||||||
|
|
||||||
@import "./chroma/base.less";
|
@import "./chroma/base.less";
|
||||||
@import "./chroma/light.less";
|
@import "./chroma/light.less";
|
||||||
|
|
10
web_src/less/markup/asciicast.less
Normal file
10
web_src/less/markup/asciicast.less
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
@import "../asciinema-player/dist/bundle/asciinema-player.css";
|
||||||
|
|
||||||
|
.asciinema-player-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asciinema-terminal {
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
Loading…
Reference in a new issue