](https://godban.github.io/browsers-support-badges/)IE / Edge | [
](https://godban.github.io/browsers-support-badges/)Firefox | [
](https://godban.github.io/browsers-support-badges/)Chrome | [
](https://godban.github.io/browsers-support-badges/)Safari |
62 | | --------- | --------- | --------- | --------- |
63 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions |
64 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | };
6 |
--------------------------------------------------------------------------------
/e2e_test/README.md:
--------------------------------------------------------------------------------
1 | # PasteMe 端到端测试
2 |
3 | 使用 `Python` 的 `selenium` + `unittest` 作为测试的载体
4 |
5 | `GitHub Actions` 的镜像内置 `Chrome` 和 `chromedriver`，详见文档 [Ubuntu 18.04.5 LTS](https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu1804-README.md)
6 |
7 | ## 内部结构
8 |
9 | 所有单元测试的代码位于 [tests.py](../tests.py)
10 |
11 | `e2e_test` 分为三部分:
12 | 1. `PasteMeDriver` 封装了 `selenium` 的一些操作
13 | 2. `MockBackend` + `Flask` 用内存作为数据库模拟了 `PasteMe` 的后端
14 | 3. [proxy.py](./proxy.py) 中的 `Flask` 用来作为反向代理
15 |
16 | 单元测试过程中，会分别开 3 个进程去启动上述 2、3，以及执行 `npm run serve` 命令。
17 |
18 | `node` 会监听 `8080` 端口，作为前端的本地服务。
19 |
20 | `MockBackend` 会监听 `8000` 端口，作为 `MockBackend`。
21 |
22 | 而 `proxy` 会监听 `3000` 端口，将 `Frontend` 和 `MockBackend` 编排起来。
23 |
24 | 最后单元测试会使用 `PasteMeDriver`（也就是 `selenium`）去对 `3000` 端口的网页上进行端到端测试。
25 |
26 | ## 相关资料
27 |
28 | 1. [Simple Reverse Proxy Server Using Flask](https://medium.com/customorchestrator/simple-reverse-proxy-server-using-flask-936087ce0afb)
--------------------------------------------------------------------------------
/e2e_test/__init__.py:
--------------------------------------------------------------------------------
1 | from .driver import PasteMeDriver
2 | from .mock import main as backend
3 | from .proxy import main as reverse_proxy
4 |
--------------------------------------------------------------------------------
/e2e_test/driver.py:
--------------------------------------------------------------------------------
1 | from selenium import webdriver
2 | from selenium.webdriver.common.by import By
3 | from typing import Callable
4 | import os
5 |
6 | from selenium.webdriver.remote.webelement import WebElement
7 | from selenium.webdriver.support import expected_conditions
8 | from selenium.webdriver.support.wait import WebDriverWait
9 |
10 |
11 | class PasteMeDriver:
12 | def __init__(self, headless: bool = False, timeout: int = 3):
13 | self.timeout = timeout
14 | options = webdriver.ChromeOptions()
15 | for option in ['--disable-gpu', '--no-sandbox']:
16 | options.add_argument(option)
17 |
18 | if headless:
19 | options.add_argument('--headless')
20 |
21 | prefs = {
22 | "credentials_enable_service": False,
23 | "profile.password_manager_enabled": False
24 | }
25 | options.add_experimental_option("prefs", prefs)
26 | options.add_experimental_option('excludeSwitches', ['enable-automation'])
27 |
28 | executable_path = os.path.join(os.environ.get('CHROMEWEBDRIVER'), 'chromedriver')
29 | assert executable_path is not None, 'no chrome web driver founded in ENV'
30 | self.browser = webdriver.Chrome(executable_path=executable_path, options=options)
31 |
32 | def __del__(self):
33 | try:
34 | self.browser.close()
35 | except AttributeError:
36 | pass
37 |
38 | def screenshot(self, img_path: str):
39 | self.browser.get_screenshot_as_file(img_path)
40 |
41 | def open(self, url):
42 | self.browser.get(url)
43 |
44 | def get(self, pattern: str, by: str = By.XPATH,
45 | condition: Callable = expected_conditions.visibility_of_element_located) -> WebElement:
46 | return WebDriverWait(self.browser, self.timeout).until(condition((by, pattern)))
47 |
--------------------------------------------------------------------------------
/e2e_test/mock.py:
--------------------------------------------------------------------------------
1 | from datetime import datetime, timedelta
2 | from threading import Lock
3 |
4 | from flask import Flask, request, jsonify
5 |
6 |
7 | class MockBackend:
8 | def __init__(self):
9 | self.database = {}
10 | self.key = 0
11 | self.key_lock = Lock()
12 | self.db_lock = Lock()
13 |
14 | def get_key(self) -> str:
15 | with self.key_lock:
16 | self.key += 1
17 | key = self.key
18 | return f'{key:08d}'
19 |
20 | @classmethod
21 | def beat(cls) -> dict:
22 | return {
23 | 'code': 200
24 | }
25 |
26 | def create(self, body: dict) -> dict:
27 | key = self.get_key()
28 | body['create_time'] = datetime.now()
29 | with self.db_lock:
30 | self.database[key] = body
31 | return {
32 | 'code': 201,
33 | 'key': key
34 | }
35 |
36 | def get(self, key: str, password: str) -> (dict, int):
37 | with self.db_lock:
38 | if key in self.database:
39 | paste: dict = self.database[key]
40 |
41 | if paste['self_destruct']:
42 | if paste['create_time'] + timedelta(seconds=paste['expire_second']) < datetime.now():
43 | self.database.pop(key)
44 | return {
45 | 'code': 40402,
46 | 'message': 'paste not found'
47 | }, 404
48 |
49 | if password == paste.get('password', ''):
50 | if paste['self_destruct']:
51 | paste['expire_count'] -= 1
52 | if paste['expire_count'] == 0:
53 | self.database.pop(key)
54 | return {
55 | 'code': 200,
56 | 'lang': paste['lang'],
57 | 'content': paste['content']
58 | }, 200
59 | else:
60 | return {
61 | 'code': 40301,
62 | 'message': 'wrong password'
63 | }, 403
64 | return {
65 | 'code': 40402,
66 | 'message': 'paste not found'
67 | }, 404
68 |
69 |
70 | app = Flask(__name__)
71 | backend = MockBackend()
72 |
73 |
74 | @app.route('/api/v3/', methods=['GET'])
75 | def beat():
76 | return jsonify(backend.beat())
77 |
78 |
79 | @app.route('/api/v3/paste/', methods=['POST'])
80 | def create():
81 | return jsonify(backend.create(request.get_json()))
82 |
83 |
84 | @app.route('/api/v3/paste/' + e + "
"
31 | } catch (e) {
32 | var r = e.str;
33 | e.hash;
34 | return "" + r + "" 35 | } 36 | }, i = function (e) { 37 | e.mermaid = a.default, a.default.loadPreferences = function (e) { 38 | var r = e.get("mermaid-theme"); 39 | void 0 === r && (r = "default"); 40 | var t = e.get("gantt-axis-format"); 41 | return void 0 === t && (t = "%Y-%m-%d"), a.default.initialize({ 42 | theme: r, 43 | gantt: { 44 | axisFormatter: [[t, function (e) { 45 | return 1 === e.getDay() 46 | }]] 47 | }, 48 | startOnLoad: false 49 | }), {"mermaid-theme": r, "gantt-axis-format": t} 50 | }; 51 | var r = e.renderer.rules.fence.bind(e.renderer.rules); 52 | e.renderer.rules.fence = function (e, t, n, a, i) { 53 | var o = e[t], f = o.content.trim(); 54 | if ("mermaid" === o.info) return u(f); 55 | var c = f.split(/\n/)[0].trim(); 56 | return "gantt" === c || "sequenceDiagram" === c || c.match(/^graph (?:TB|BT|RL|LR|TD);?$/) ? u(f) : r(e, t, n, a, i) 57 | } 58 | }; 59 | r.default = i 60 | // eslint-disable-next-line no-unused-vars 61 | }, function (e, r) { 62 | e.exports = mermaid 63 | }]); 64 | export default o; 65 | //# sourceMappingURL=index.js.map 66 | -------------------------------------------------------------------------------- /src/assets/js/external/markdown-it-table-contents.js: -------------------------------------------------------------------------------- 1 | const slugify = (s) => encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-')); 2 | const defaults = { 3 | includeLevel: [ 1, 2 ], 4 | containerClass: 'table-of-contents', 5 | slugify, 6 | markerPattern: /^\[\[toc\]\]/im, 7 | listType: 'ul', 8 | format: undefined, 9 | forceFullToc: false, 10 | containerHeaderHtml: undefined, 11 | containerFooterHtml: undefined, 12 | }; 13 | 14 | export default (md, o) => { 15 | const options = Object.assign({}, defaults, o); 16 | const tocRegexp = options.markerPattern; 17 | let gstate; 18 | 19 | function toc(state, silent) { 20 | var token; 21 | var match; 22 | 23 | // Reject if the token does not start with [ 24 | if (state.src.charCodeAt(state.pos) !== 0x5B /* [ */ ) { 25 | return false; 26 | } 27 | // Don't run any pairs in validation mode 28 | if (silent) { 29 | return false; 30 | } 31 | 32 | // Detect TOC markdown 33 | match = tocRegexp.exec(state.src.substr(state.pos)); 34 | match = !match ? [] : match.filter(function(m) { return m; }); 35 | if (match.length < 1) { 36 | return false; 37 | } 38 | 39 | // Build content 40 | token = state.push('toc_open', 'toc', 1); 41 | token.markup = '[[toc]]'; 42 | token = state.push('toc_body', '', 0); 43 | token = state.push('toc_close', 'toc', -1); 44 | 45 | // Update pos so the parser can continue 46 | var newline = state.src.indexOf('\n', state.pos); 47 | if (newline !== -1) { 48 | state.pos = newline; 49 | } else { 50 | state.pos = state.pos + state.posMax + 1; 51 | } 52 | 53 | return true; 54 | } 55 | 56 | // eslint-disable-next-line no-unused-vars 57 | md.renderer.rules.toc_open = function(tokens, index) { 58 | var tocOpenHtml = ``; 76 | }; 77 | 78 | // eslint-disable-next-line no-unused-vars 79 | md.renderer.rules.toc_body = function(tokens, index) { 80 | if (options.forceFullToc) { 81 | /* 82 | 83 | Renders full TOC even if the hierarchy of headers contains 84 | a header greater than the first appearing header 85 | 86 | ## heading 2 87 | ### heading 3 88 | # heading 1 89 | 90 | Result TOC: 91 | - heading 2 92 | - heading 3 93 | - heading 1 94 | 95 | */ 96 | var tocBody = ''; 97 | var pos = 0; 98 | var tokenLength = gstate && gstate.tokens && gstate.tokens.length; 99 | 100 | while (pos < tokenLength) { 101 | var tocHierarchy = renderChildsTokens(pos, gstate.tokens); 102 | pos = tocHierarchy[0]; 103 | tocBody += tocHierarchy[1]; 104 | } 105 | 106 | return tocBody; 107 | } else { 108 | return renderChildsTokens(0, gstate.tokens)[1]; 109 | } 110 | }; 111 | 112 | function renderChildsTokens(pos, tokens) { 113 | var headings = [], 114 | buffer = '', 115 | currentLevel, 116 | subHeadings, 117 | size = tokens.length, 118 | i = pos; 119 | while(i < size) { 120 | var token = tokens[i]; 121 | var heading = tokens[i - 1]; 122 | var level = token.tag && parseInt(token.tag.substr(1, 1)); 123 | if (token.type !== 'heading_close' || options.includeLevel.indexOf(level) == -1 || heading.type !== 'inline') { 124 | i++; continue; // Skip if not matching criteria 125 | } 126 | if (!currentLevel) { 127 | currentLevel = level;// We init with the first found level 128 | } else { 129 | if (level > currentLevel) { 130 | subHeadings = renderChildsTokens(i, tokens); 131 | buffer += subHeadings[1]; 132 | i = subHeadings[0]; 133 | continue; 134 | } 135 | if (level < currentLevel) { 136 | // Finishing the sub headings 137 | buffer += ``; 138 | headings.push(buffer); 139 | return [i, `<${options.listType}>${headings.join('')}`]; 140 | } 141 | if (level == currentLevel) { 142 | // Finishing the sub headings 143 | buffer += ``; 144 | headings.push(buffer); 145 | } 146 | } 147 | buffer = ``; 148 | buffer += typeof options.format === 'function' ? options.format(heading.content) : heading.content; 149 | buffer += ``; 150 | i++; 151 | } 152 | buffer += buffer === '' ? '' : ``; 153 | headings.push(buffer); 154 | return [i, `<${options.listType}>${headings.join('')}`]; 155 | } 156 | 157 | // Catch all the tokens for iteration later 158 | md.core.ruler.push('grab_state', function(state) { 159 | gstate = state; 160 | }); 161 | 162 | // Insert TOC 163 | md.inline.ruler.after('emphasis', 'toc', toc); 164 | }; 165 | -------------------------------------------------------------------------------- /src/assets/js/external/markdown-it.js: -------------------------------------------------------------------------------- 1 | /* Author: Ryan Lee(ryanlee2014) 2 | * Created at 08/18/2019 3 | * MarkdownIt Instance 4 | */ 5 | 6 | const uslug = require("uslug") 7 | const uslugify = s => uslug(s) 8 | 9 | function Instance(key = "", problem_id = "") { 10 | const md = require("markdown-it")({ 11 | html: true, 12 | linkify: true, 13 | typographer: true, 14 | breaks: true 15 | }) 16 | const mh = require("markdown-it-highlightjs") 17 | const mk = require("@ryanlee2014/markdown-it-katex") 18 | const ma = require("markdown-it-anchor").default 19 | md.use(mk) 20 | md.use(mh) 21 | md.use(ma, { 22 | slugify: uslugify 23 | }) 24 | md.use(require('markdown-it-task-checkbox'), { 25 | disabled: true, 26 | divWrap: false, 27 | divClass: 'checkbox', 28 | idPrefix: 'cbx_', 29 | ulClass: 'task-list', 30 | liClass: 'task-list-item' 31 | }) 32 | md.use(require("./markdown-it-links")) 33 | md.use(require("./markdown-it-mermaid").default.default) 34 | 35 | const markdownPack = (html) => { 36 | // return `
${html}
`
37 | return html;
38 | }
39 |
40 | const preToSegment = (html) => {
41 | return html.replace(/[\s\S]+?<\/pre>/g, `42 | $&`) 43 | } 44 | 45 | const _render = md.render 46 | 47 | md.render = function () { 48 | return markdownPack(_render.apply(md, arguments)) 49 | } 50 | 51 | md.renderRaw = function () { 52 | return preToSegment(md.renderInline(...arguments)) 53 | } 54 | 55 | return Object.assign(md, {key, problem_id}) 56 | } 57 | 58 | const md = Instance() 59 | md.newInstance = Instance 60 | export default md 61 | -------------------------------------------------------------------------------- /src/assets/js/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | config: state => state.config, 3 | key: state => state.key, 4 | content: state => state.content, 5 | view: state => state.view, 6 | lang: state => state.lang 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/js/highlightjs-line-numbers.js: -------------------------------------------------------------------------------- 1 | // jshint multistr:true 2 | 3 | export default lineNumbersBlock; 4 | 5 | let w = window, d = document; 6 | 7 | let TABLE_NAME = 'hljs-ln', 8 | LINE_NAME = 'hljs-ln-line', 9 | CODE_BLOCK_NAME = 'hljs-ln-code', 10 | NUMBERS_BLOCK_NAME = 'hljs-ln-numbers', 11 | NUMBER_LINE_NAME = 'hljs-ln-n', 12 | DATA_ATTR_NAME = 'data-line-number', 13 | BREAK_LINE_REGEXP = /\r\n|\r|\n/g; 14 | 15 | addStyles(); 16 | 17 | function isHljsLnCodeDescendant(domElt) { 18 | let curElt = domElt; 19 | while (curElt) { 20 | if (curElt.className && curElt.className.indexOf('hljs-ln-code') !== -1) { 21 | return true; 22 | } 23 | curElt = curElt.parentNode; 24 | } 25 | return false; 26 | } 27 | 28 | function getHljsLnTable(hljsLnDomElt) { 29 | let curElt = hljsLnDomElt; 30 | while (curElt.nodeName !== 'TABLE') { 31 | curElt = curElt.parentNode; 32 | } 33 | return curElt; 34 | } 35 | 36 | // Function to workaround a copy issue with Microsoft Edge. 37 | // Due to hljs-ln wrapping the lines of code inside a
| element wrapping the first line of selected code 46 | let tdAnchor = selection.anchorNode; 47 | while (tdAnchor.nodeName !== 'TD') { 48 | tdAnchor = tdAnchor.parentNode; 49 | } 50 | 51 | // get the | element wrapping the last line of selected code 52 | let tdFocus = selection.focusNode; 53 | while (tdFocus.nodeName !== 'TD') { 54 | tdFocus = tdFocus.parentNode; 55 | } 56 | 57 | // extract line numbers 58 | let firstLineNumber = parseInt(tdAnchor.dataset.lineNumber); 59 | let lastLineNumber = parseInt(tdFocus.dataset.lineNumber); 60 | 61 | // multi-lines copied case 62 | if (firstLineNumber !== lastLineNumber) { 63 | 64 | let firstLineText = tdAnchor.textContent; 65 | let lastLineText = tdFocus.textContent; 66 | 67 | // if the selection was made backward, swap values 68 | if (firstLineNumber > lastLineNumber) { 69 | let tmp = firstLineNumber; 70 | firstLineNumber = lastLineNumber; 71 | lastLineNumber = tmp; 72 | tmp = firstLineText; 73 | firstLineText = lastLineText; 74 | lastLineText = tmp; 75 | } 76 | 77 | // discard not copied characters in first line 78 | while (selectionText.indexOf(firstLineText) !== 0) { 79 | firstLineText = firstLineText.slice(1); 80 | } 81 | 82 | // discard not copied characters in last line 83 | while (selectionText.lastIndexOf(lastLineText) === -1) { 84 | lastLineText = lastLineText.slice(0, -1); 85 | } 86 | 87 | // reconstruct and return the real copied text 88 | let selectedText = firstLineText; 89 | let hljsLnTable = getHljsLnTable(tdAnchor); 90 | for (let i = firstLineNumber + 1 ; i < lastLineNumber ; ++i) { 91 | let codeLineSel = format('.{0}[{1}="{2}"]', [CODE_BLOCK_NAME, DATA_ATTR_NAME, i]); 92 | let codeLineElt = hljsLnTable.querySelector(codeLineSel); 93 | selectedText += '\n' + codeLineElt.textContent; 94 | } 95 | selectedText += '\n' + lastLineText; 96 | return selectedText; 97 | // single copied line case 98 | } else { 99 | return selectionText; 100 | } 101 | } 102 | 103 | // ensure consistent code copy/paste behavior across all browsers 104 | // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51) 105 | document.addEventListener('copy', function(e) { 106 | // get current selection 107 | let selection = window.getSelection(); 108 | // override behavior when one wants to copy line of codes 109 | if (isHljsLnCodeDescendant(selection.anchorNode)) { 110 | let selectionText; 111 | // workaround an issue with Microsoft Edge as copied line breaks 112 | // are removed otherwise from the selection string 113 | if (window.navigator.userAgent.indexOf("Edge") !== -1) { 114 | selectionText = edgeGetSelectedCodeLines(selection); 115 | } else { 116 | // other browsers can directly use the selection string 117 | selectionText = selection.toString(); 118 | } 119 | e.clipboardData.setData('text/plain', selectionText); 120 | e.preventDefault(); 121 | } 122 | }); 123 | 124 | function addStyles () { 125 | let css = d.createElement('style'); 126 | css.innerHTML = format( 127 | '.{0}{border-collapse:collapse}' + 128 | '.{0} td{padding-top: 0; padding-bottom: 0; padding-right: 0;}' + 129 | '.{1}:before{content:attr({2})}', 130 | [ 131 | TABLE_NAME, 132 | NUMBER_LINE_NAME, 133 | DATA_ATTR_NAME 134 | ]); 135 | d.getElementsByTagName('head')[0].appendChild(css); 136 | } 137 | 138 | function lineNumbersBlock (element, options) { 139 | if (typeof element !== 'object') return; 140 | 141 | async(function () { 142 | element.innerHTML = lineNumbersInternal(element, options); 143 | }); 144 | } 145 | 146 | function lineNumbersInternal (element, options) { 147 | // define options or set default 148 | options = options || { 149 | singleLine: false 150 | }; 151 | 152 | // convert options 153 | let firstLineIndex = options.singleLine ? 0 : 1; 154 | 155 | duplicateMultilineNodes(element); 156 | 157 | return addLineNumbersBlockFor(element.innerHTML, firstLineIndex); 158 | } 159 | 160 | function addLineNumbersBlockFor (inputHtml, firstLineIndex) { 161 | 162 | let lines = getLines(inputHtml); 163 | 164 | // if last line contains only carriage return remove it 165 | if (lines[lines.length-1].trim() === '') { 166 | lines.pop(); 167 | } 168 | 169 | if (lines.length > firstLineIndex) { 170 | let html = ''; 171 | 172 | for (let i = 0, l = lines.length; i < l; i++) { 173 | html += format( 174 | ' |
| ' + 176 | '' + 177 | ' | ' + 178 | '' + 179 | '{6}' + 180 | ' | ' + 181 | '
3 |
36 |
37 |
38 |
85 |
86 |
124 |
--------------------------------------------------------------------------------
/src/components/Form.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
35 |
5 |
6 |
10 | {{ 0 >= cut_down_time ? $t('lang.footer.tooltip.refresh') :
11 | $t('lang.footer.tooltip.wait', { sec: cut_down_time }) }}
12 |
13 |
34 | 14 | Lucien's Blog 15 | | {{ footer.text }} 18 |
19 |20 | Copyright © 2018 - {{ year }} 21 | Lucien Shui 22 |
23 | 33 |
27 | 
31 |
43 |
45 | {{ $t('lang.form.submit') }}
46 |
47 |
58 | {{
59 | $t('lang.form.checkbox.popover')
60 | }}
61 |
62 |
81 |
48 |
51 | {{ $t('lang.form.checkbox.text') }}
52 |
53 |
54 |
63 |
79 |
80 | {{item.title}}
47 |{{item.content}}
48 | 49 |50 | {{item.time.substring(0,16)}} 51 |
52 |
62 | {{item.title}}
63 | {{item.time.substring(0,16)}}
64 | 通知
66 |
67 | 紧急
69 |
70 | 更新
72 |
73 |
74 |
81 |
82 | {{item.title}}
75 |{{item.content}}
76 | 77 |78 | {{item.time.substring(0,16)}} 79 |
80 |
85 |
94 |
133 | {{ $t('lang.nav.beg') }}
134 |
135 | 
138 |
7 |
9 |
10 | 
8 | 此 Paste 因不符合 社会主义核心价值观 不予显示
11 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
18 | 源码
19 |
20 | {{ $t('lang.view.copy') }}
21 |
22 |
23 | {{ $t('lang.view.tooltip.' + (copy_btn_status > 0 ? 'success' :
24 | (copy_btn_status === 0 ? 'click' : 'fail'))) }}
25 |
26 |
27 |
28 |
29 |
30 |
41 |
42 |
31 |
32 |
34 |
35 |
39 |
40 |
36 |
37 |
38 |
6 |
39 | 7 | {{ $t('lang.success.h2') }} 8 |
9 | 10 |-
11 |
-
? 16 |
17 | - {{ $t('lang.success.ul.li[1].browser') }}
18 |
21 | {{ paste_url }}
22 |
27 | {{ $t('lang.success.badge.' + 28 | (copy_btn_status > 0 ? 'success' : (copy_btn_status === 0 ? 'copy' : 'fail'))) }} 29 | 30 |
31 | -
32 |
{{ $t('lang.success.ul.li[2].scan_qr_code') }} 33 |
34 |
36 |
52 |
54 | :(
6 |{{ $t('lang.not_found.content.title') }}
7 |