mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 09:41:20 -08:00
remove docup
This commit is contained in:
Harvey committed
1 parent
d8a238dc06
commit
adc092389a
5 files changed
+2
-488
No files matched your search
+1
-1
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- <b>大小</b> - `artplayer.js` ≈ `100kb`
|
- <b>大小</b> - 缩小并压缩后的大小只有`25kb`
|
||||||
- <b>字幕</b> - 支持 `.VTT`, `.ASS` 和 `.SRT` 格式
|
- <b>字幕</b> - 支持 `.VTT`, `.ASS` 和 `.SRT` 格式
|
||||||
- <b>自定义</b> - `右键菜单`, `业务图层`, `视频控制器` 和 `设置面板`
|
- <b>自定义</b> - `右键菜单`, `业务图层`, `视频控制器` 和 `设置面板`
|
||||||
- <b>控制器</b> - `画质切换`, `字幕切换`, `播放速度`, `长宽比`, `视频翻转`, `全屏`, `画中画`, `截图`, `缩略图`, `自适应尺寸`, `高亮` 和 `热键`...
|
- <b>控制器</b> - `画质切换`, `字幕切换`, `播放速度`, `长宽比`, `视频翻转`, `全屏`, `画中画`, `截图`, `缩略图`, `自适应尺寸`, `高亮` 和 `热键`...
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- <b>Size</b> - `artplayer.js` ≈ `100kb`
|
- <b>Size</b> - `25kB` minified and gzipped
|
||||||
- <b>Subtitle</b> - Support for `.VTT`, `.ASS` and `.SRT` formats
|
- <b>Subtitle</b> - Support for `.VTT`, `.ASS` and `.SRT` formats
|
||||||
- <b>Customizable</b> - `Right Click Menu`, `Business Layer`, `Video Controller` and `Settings Panel`
|
- <b>Customizable</b> - `Right Click Menu`, `Business Layer`, `Video Controller` and `Settings Panel`
|
||||||
- <b>Controller</b> - `Quality Switch`, `Subtitle Switch`, `Play Speed`, `Aspect Ratio`, `Video Flip`, `Fullscreen`, `Picture In Picture`, `Screenshot`, `Thumbnail`, `Adaptive Size`, `Highlight` and `Hotkey`...
|
- <b>Controller</b> - `Quality Switch`, `Subtitle Switch`, `Play Speed`, `Aspect Ratio`, `Video Flip`, `Fullscreen`, `Picture In Picture`, `Screenshot`, `Thumbnail`, `Adaptive Size`, `Highlight` and `Hotkey`...
|
||||||
|
|||||||
@@ -1,441 +0,0 @@
|
|||||||
<div style="font-size:1.3rem;">
|
|
||||||
|
|
||||||
**Docup** is a single JavaScript file that fetches Markdown file and renders it as a beautiful one-page documentation.
|
|
||||||
|
|
||||||
Docup is built with Preact, the entire bundle (with CSS) is just 30kB minified and gzipped.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Quick Start
|
|
||||||
|
|
||||||
Create an HTML file: `index.html` which will be be homepage of your documentation website:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
|
|
||||||
/>
|
|
||||||
<title>My Awesome Doc</title>
|
|
||||||
<!-- Stylesheet -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://unpkg.com/@egoist/docup@1/dist/docup.min.css"
|
|
||||||
/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Script -->
|
|
||||||
<script src="https://unpkg.com/@egoist/docup@1/dist/docup.min.js"></script>
|
|
||||||
<!-- Start app -->
|
|
||||||
<script>
|
|
||||||
docup.init({
|
|
||||||
// ..options
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
Then populate a `README.md` file to the same directory where `index.html` is located.
|
|
||||||
|
|
||||||
```md
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
How about this.
|
|
||||||
|
|
||||||
## Advanced
|
|
||||||
|
|
||||||
How about that.
|
|
||||||
```
|
|
||||||
|
|
||||||
Finally serve this directory as a static website:
|
|
||||||
|
|
||||||
- **node.js**: `npm i -g static-server && static-server .`
|
|
||||||
- **deno**: `deno install --allow-net --allow-read https://deno.land/std/http/file_server.ts && file_server .`
|
|
||||||
- **python**: `python -m SimpleHTTPServer`
|
|
||||||
- ...etc, you can use any static file server, for real.
|
|
||||||
|
|
||||||
### How Files Are Resolved
|
|
||||||
|
|
||||||
If current `location.pathname` is `/`, i.e. the homepage, it fetches `/README.md`.
|
|
||||||
|
|
||||||
If current `location.pathname` is `/docs/`, it fetches `/docs/README.md`.
|
|
||||||
|
|
||||||
If current `location.pathname` is `/docs/en`, it fetches `/docs/en.md`.
|
|
||||||
|
|
||||||
Basically if the pathname ends with a slash, we treat it as a directory and try to load the `README.md` file under that path, you can also use [indexFile](#indexfile) option to change `README.md` to other file if you want. If the pathname does not end with slash, we would fetch `pathname + '.md'`.
|
|
||||||
|
|
||||||
You can also use [root](#root) option to set the origin of the files, for example if you want to load files from other domain, you can set `root: 'https://sub.domain.com/data'`.
|
|
||||||
|
|
||||||
## Guide
|
|
||||||
|
|
||||||
### Site Title
|
|
||||||
|
|
||||||
We use the value of `document.title` if it's not `undefined`, you can also set a title via options:
|
|
||||||
|
|
||||||
```js
|
|
||||||
docup.init({
|
|
||||||
title: 'My Website',
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### Markdown Features
|
|
||||||
|
|
||||||
We use the blazing fast [marked](https://marked.js.org) to parse Markdown, all [GitHub Flavored Markdown](https://github.github.com/gfm/) features are supported.
|
|
||||||
|
|
||||||
### Message Blocks
|
|
||||||
|
|
||||||
To highlight some messages in your documentation, use the following format to write a `blockquote`:
|
|
||||||
|
|
||||||
```md
|
|
||||||
> [TYPE]: This is a very dangerous action!
|
|
||||||
```
|
|
||||||
|
|
||||||
Where `[TYPE]` can be:
|
|
||||||
|
|
||||||
- `Alert`
|
|
||||||
- `Warning`
|
|
||||||
- `Info`
|
|
||||||
- `Success`
|
|
||||||
- `Note`
|
|
||||||
|
|
||||||
And they look like:
|
|
||||||
|
|
||||||
> **Alert**: This is an alert!
|
|
||||||
|
|
||||||
> **Warning**: This is a warning!
|
|
||||||
|
|
||||||
> **Info**: This is a info!
|
|
||||||
|
|
||||||
> **Success**: This is a success!
|
|
||||||
|
|
||||||
> **Note**: This is just a note!
|
|
||||||
|
|
||||||
### Embedding
|
|
||||||
|
|
||||||
Embedding and running code snippets is easy if your provider supports iframe, like [codesandbox.io](https://codesandbox.io):
|
|
||||||
|
|
||||||
```html
|
|
||||||
<iframe
|
|
||||||
src="https://codesandbox.io/embed/vue"
|
|
||||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
|
||||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
|
||||||
>
|
|
||||||
</iframe>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Highlight
|
|
||||||
|
|
||||||
Docup uses [Prism.js](http://prismjs.com/) to highlight code blocks, by default only a few languages are supported, namely: `html` `css` `js` `markdown` `bash` `json`, you can manually load Prism language components to support more languages, e.g. for Go programming language:
|
|
||||||
|
|
||||||
```js
|
|
||||||
docup.init({
|
|
||||||
highlightLanguages: ['go'],
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
Available languages:
|
|
||||||
|
|
||||||
```js preact
|
|
||||||
const { useState } = hooks
|
|
||||||
|
|
||||||
export default ({ langs }) => {
|
|
||||||
const [showAll, setShowAll] = useState(false)
|
|
||||||
return html`<div>
|
|
||||||
<ul>
|
|
||||||
${(showAll ? langs : langs.slice(0, 5)).map(
|
|
||||||
(lang) => html`<li key="{lang}">${lang}</li>`
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
<button
|
|
||||||
style="margin-top:20px;border:1px solid; font-size: 14px; padding:5px;"
|
|
||||||
onClick=${() => setShowAll(!showAll)}
|
|
||||||
>
|
|
||||||
Show ${showAll ? 'less' : 'all'}..
|
|
||||||
</button>
|
|
||||||
</div>`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Inline Component
|
|
||||||
|
|
||||||
You can inline Preact components inside Markdown file like this:
|
|
||||||
|
|
||||||
````markdown
|
|
||||||
```js preact
|
|
||||||
const { useState } = hooks
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
return html`<button
|
|
||||||
style="width:100px;background:#ccc;padding:5px"
|
|
||||||
onClick=${() => setCount(count + 1)}
|
|
||||||
>
|
|
||||||
${count}
|
|
||||||
</button>`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
Write `preact` next to the language name and we will render the code as a Preact component in place:
|
|
||||||
|
|
||||||
```js preact
|
|
||||||
const { useState } = hooks
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
return html`<button
|
|
||||||
style="width:100px;background:#ccc;padding:5px"
|
|
||||||
onClick=${() => setCount(count + 1)}
|
|
||||||
>
|
|
||||||
${count}
|
|
||||||
</button>`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
> Warning: Note that you can't use JSX here, because it's not supported by browsers natively. But you can use the `html` function which is powered by [developit/htm](https://github.com/developit/htm).
|
|
||||||
|
|
||||||
### CSS Variables
|
|
||||||
|
|
||||||
```js preact
|
|
||||||
const { useEffect, useState } = hooks
|
|
||||||
|
|
||||||
// could pass in an array of specific stylesheets for optimization
|
|
||||||
function getAllCSSVariableNames(styleSheets = document.styleSheets) {
|
|
||||||
var cssVars = []
|
|
||||||
// loop each stylesheet
|
|
||||||
for (var i = 0; i < styleSheets.length; i++) {
|
|
||||||
// loop stylesheet's cssRules
|
|
||||||
try {
|
|
||||||
// try/catch used because 'hasOwnProperty' doesn't work
|
|
||||||
for (var j = 0; j < styleSheets[i].cssRules.length; j++) {
|
|
||||||
try {
|
|
||||||
// loop stylesheet's cssRules' style (property names)
|
|
||||||
for (var k = 0; k < styleSheets[i].cssRules[j].style.length; k++) {
|
|
||||||
let name = styleSheets[i].cssRules[j].style[k]
|
|
||||||
// test name for css variable signature and uniqueness
|
|
||||||
if (name.startsWith('--') && cssVars.indexOf(name) == -1) {
|
|
||||||
cssVars.push(name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
}
|
|
||||||
return cssVars
|
|
||||||
}
|
|
||||||
|
|
||||||
function getElementCSSVariables(allCSSVars, element = document.body, pseudo) {
|
|
||||||
var elStyles = window.getComputedStyle(element, pseudo)
|
|
||||||
var cssVars = {}
|
|
||||||
for (var i = 0; i < allCSSVars.length; i++) {
|
|
||||||
let key = allCSSVars[i]
|
|
||||||
let value = elStyles.getPropertyValue(key)
|
|
||||||
if (value) {
|
|
||||||
cssVars[key] = value.trim()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return cssVars
|
|
||||||
}
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const vars = getElementCSSVariables(
|
|
||||||
getAllCSSVariableNames(),
|
|
||||||
document.documentElement
|
|
||||||
)
|
|
||||||
|
|
||||||
return html`
|
|
||||||
<ul>
|
|
||||||
${Object.keys(vars).map((name) => {
|
|
||||||
const value = vars[name]
|
|
||||||
return html`<li key=${name}>
|
|
||||||
<code style="display:inline-block;margin-right:10px;">${name}</code
|
|
||||||
>${/-(bg|fg)$/.test(name)
|
|
||||||
? html`<span
|
|
||||||
style=${{
|
|
||||||
background: value,
|
|
||||||
height: 15,
|
|
||||||
width: 15,
|
|
||||||
display: 'inline-block',
|
|
||||||
border: '1px solid #000',
|
|
||||||
}}
|
|
||||||
></span>`
|
|
||||||
: html`<code>${value}</code>`}
|
|
||||||
</li>`
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Multiple Pages
|
|
||||||
|
|
||||||
If your doc is too long to display in a single page, you can split it into multiple Markdown files, that works because Docup [fetches Markdown file based on the current `pathname`](#how-files-are-resolved).
|
|
||||||
|
|
||||||
Then all you need is to route all requests to the `index.html`. (Also known as SPA fallback)
|
|
||||||
|
|
||||||
If you host your docs on [Netlify](https://netlify.com), use following rule in `_redirects` file:
|
|
||||||
|
|
||||||
```
|
|
||||||
/* /index.html 301
|
|
||||||
```
|
|
||||||
|
|
||||||
Or if you're using [Vercel](https://vercel.com), use following config in `vercel.json`:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"rewrites": [
|
|
||||||
{
|
|
||||||
"source": "/(.*)",
|
|
||||||
"destination": "/index.html"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Or Nginx config:
|
|
||||||
|
|
||||||
```nginx
|
|
||||||
location / {
|
|
||||||
try_files /index.html =404;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Deploy
|
|
||||||
|
|
||||||
### GitHub Pages
|
|
||||||
|
|
||||||
Simply put all your files in `docs` folder on `master` branch, or root directory on the `gh-pages` branch.
|
|
||||||
|
|
||||||
Then enable it on repo's `settings` page:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Don't forget to add `.nojekyll` file to tell GitHub to treat it as a normal static website.
|
|
||||||
|
|
||||||
### Netlify
|
|
||||||
|
|
||||||
Set the public directory to where your `index.html` is located at.
|
|
||||||
|
|
||||||
### Vercel
|
|
||||||
|
|
||||||
Set the public directory to where your `index.html` is located at.
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
```js
|
|
||||||
docup.init(options)
|
|
||||||
```
|
|
||||||
|
|
||||||
### options
|
|
||||||
|
|
||||||
#### title
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
|
|
||||||
The title that is shown in the navbar. It defaults to `document.title`
|
|
||||||
|
|
||||||
<!-- #### logo
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
|
|
||||||
Using HTML string to display logo, e.g.:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<img src="logo.svg" width="60" />
|
|
||||||
``` -->
|
|
||||||
|
|
||||||
#### navLinks
|
|
||||||
|
|
||||||
- Type: `NavLink[]`
|
|
||||||
|
|
||||||
Links in the navbar.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface NavLink {
|
|
||||||
text: string
|
|
||||||
link: string
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### indexFile
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
- Default: `README.md`
|
|
||||||
|
|
||||||
Used for path ending with a slash.
|
|
||||||
|
|
||||||
#### base
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
- Default: `/`
|
|
||||||
|
|
||||||
The base path your website is located at. If you are serving your docs under a sub path like `https://user.github.io/awesome-project`, you need to set this option to `/awesome-project`.
|
|
||||||
|
|
||||||
#### root
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
- Default: `''`
|
|
||||||
|
|
||||||
The root path we use to resolve files from.
|
|
||||||
|
|
||||||
#### highlightLanguages
|
|
||||||
|
|
||||||
- Type: `string[]`
|
|
||||||
|
|
||||||
Extra languages to highlight.
|
|
||||||
|
|
||||||
#### font
|
|
||||||
|
|
||||||
- Type: `string`
|
|
||||||
- Default: `Lato`
|
|
||||||
|
|
||||||
Use a custom font from Google Fonts. We use [Lato](https://fonts.google.com/specimen/Lato) by default.
|
|
||||||
|
|
||||||
#### props
|
|
||||||
|
|
||||||
- Type: `any`
|
|
||||||
|
|
||||||
Inject props to inlined components.
|
|
||||||
|
|
||||||
For example:
|
|
||||||
|
|
||||||
```js
|
|
||||||
docup.init({
|
|
||||||
props: {
|
|
||||||
count: 0,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
Then you can inline component and use props in Markdown:
|
|
||||||
|
|
||||||
````markdown
|
|
||||||
```js preact
|
|
||||||
export default ({ count }) => {
|
|
||||||
return html`<button>${count}</button>`
|
|
||||||
}
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
## Browser support
|
|
||||||
|
|
||||||
Last 2 versions of modern browsers.
|
|
||||||
|
|
||||||
## Resources
|
|
||||||
|
|
||||||
### Discord Chat
|
|
||||||
|
|
||||||
Join my [Discord Community](https://chat.egoist.sh).
|
|
||||||
|
|
||||||
### GitHub Sponsors
|
|
||||||
|
|
||||||
Support this project via [GitHub Sponsors](https://github.com/sponsors/egoist).
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
MIT © EGOIST
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,45 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>ArtPlayer</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
||||||
<meta name="keywords" content="artplayer, player, js, html5, video" />
|
|
||||||
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
|
|
||||||
<link rel="shortcut icon" href="./favicon.ico">
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/@egoist/docup@1/dist/docup.min.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<script src="https://unpkg.com/@egoist/docup@1/dist/docup.min.js"></script>
|
|
||||||
<script>
|
|
||||||
docup.init({
|
|
||||||
navLinks: [
|
|
||||||
{
|
|
||||||
text: 'Guide',
|
|
||||||
link: '#guide',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'API',
|
|
||||||
link: '#api',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Resources',
|
|
||||||
link: '#resources',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'GitHub',
|
|
||||||
link: 'https://github.com/egoist/docup',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Donate',
|
|
||||||
link: 'https://github.com/sponsors/egoist'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Reference in new issue
Block a user