DecAPI/Docs
1
0
Fork 0
mirror of https://github.com/Decicus/DecAPI-Docs.git synced 2024-11-22 08:52:31 +01:00
Code Issues Releases Wiki Activity

Begin "migration" to a Vue.js-based layout

Browse Source
This commit is contained in:
Alex Thomassen 2017-06-27 15:35:52 +02:00
parent 7ff4433a8c
commit 85e56ec267
47 changed files with 1465 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.babelrc Normal file
View File

@ -0,0 +1,13 @@
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}

4
.editorconfig
View File

@ -1,14 +1,14 @@
# http://editorconfig.org
root = true
[*.{html,js,yaml,md}]
[*.{html,js,yaml,md,vue}]
end_of_line = lf
indent_style = space
indent_size = 4
charset = utf-8
insert_final_newline = true
[*.{html,js,yaml}]
[*.{html,js,yaml,vue}]
trim_trailing_whitespace = true
[*.md]

2
.eslintignore Normal file
View File

@ -0,0 +1,2 @@
build/*.js
config/*.js

43
.eslintrc.js Normal file
View File

@ -0,0 +1,43 @@
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
extends: 'airbnb-base',
// required to lint *.vue files
plugins: [
'html'
],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
'rules': {
'indent': ['error', 4],
'no-param-reassign': [2, {
"props": false,
}],
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
'js': 'never',
'vue': 'never'
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
'optionalDependencies': ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

8
.postcssrc.js Normal file
View File

@ -0,0 +1,8 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
// to edit target browsers: use "browserlist" field in package.json
"autoprefixer": {}
}
}

35
build/build.js Normal file
View File

@ -0,0 +1,35 @@
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

48
build/check-versions.js Normal file
View File

@ -0,0 +1,48 @@
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
var shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
var warnings = []
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

9
build/dev-client.js Normal file
View File

@ -0,0 +1,9 @@
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})

89
build/dev-server.js Normal file
View File

@ -0,0 +1,89 @@
require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}

71
build/utils.js Normal file
View File

@ -0,0 +1,71 @@
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}

12
build/vue-loader.conf.js Normal file
View File

@ -0,0 +1,12 @@
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}

67
build/webpack.base.conf.js Normal file
View File

@ -0,0 +1,67 @@
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

35
build/webpack.dev.conf.js Normal file
View File

@ -0,0 +1,35 @@
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})

120
build/webpack.prod.conf.js Normal file
View File

@ -0,0 +1,120 @@
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

6
config/dev.env.js Normal file
View File

@ -0,0 +1,6 @@
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

38
config/index.js Normal file
View File

@ -0,0 +1,38 @@
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}

3
config/prod.env.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
NODE_ENV: '"production"'
}

332
index.html
View File

@ -1,288 +1,70 @@
<!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">
<title>DecAPI Docs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style media="screen">
body {
padding-bottom: 80px;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DecAPI Docs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style media="screen">
body {
padding-bottom: 80px;
}
.fa-heart {
color: #be1931;
}
.fa-heart {
color: #be1931;
}
#back-to-top:hover {
cursor: pointer;
text-decoration: underline;
}
#back-to-top:hover {
cursor: pointer;
text-decoration: underline;
}
#description .list-group-item a {
font-weight: bold;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
#description .list-group-item a {
font-weight: bold;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56279022-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DecAPI Docs</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-1x fa-book"></i> DecAPI Docs on GitHub</a></li>
<li><a href="https://github.com/Decicus/DecAPI"><i class="fa fa-1x fa-github"></i> DecAPI on GitHub</a></li>
</ul>
</div>
</nav>
<div class="container-fluid" id="content">
<i class="hidden fa fa-1x" id="fa-template"></i>
<div class="hidden" id="base-template">
<div class="page-header">
<h4><i class="fa fa-1x fa-fw"></i> <span></span></h4>
</div>
ga('create', 'UA-56279022-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DecAPI Docs</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-1x fa-home"></i> Home</a></li>
</ul>
<div class="panel panel-success hidden" id="endpoint-template">
<div class="panel-heading">
<h3 class="panel-title" id="title">
<a href="#"><span id="base"></span><span id="route"></span></a>
</h3>
</div>
<div class="panel-body" id="main-body">
<p class="text-warning">Notes:</p>
<ul id="description" class="list-group text-primary"></ul>
<strong class="text-primary">Standard request:</strong>
<pre id="http"><strong class="text-primary"></strong> <code></code></pre>
<div class="hidden" id="bots">
<!-- Nightbot -->
<strong class="text-primary"><a href="https://beta.nightbot.tv/">Nightbot</a> command:</strong>
<pre><code>$(urlfetch <span id="url"></span>)</code></pre>
<!-- Ankhbot -->
<strong class="text-primary"><a href="http://marcinswierzowski.com/Gallery/Projects/AnkhBotR2/">Ankhbot</a> command:</strong>
<pre><code>$readapi(<span id="url"></span>)</code></pre>
<!-- Deepbot -->
<strong class="text-primary"><a href="https://deepbot.deep.sg/">Deepbot</a> command:</strong>
<pre><code>@customapi@[<span id="url"></span>]</code></pre>
<!-- PhantomBot -->
<strong class="text-primary"><a href="https://phantombot.tv/">PhantomBot</a> command:</strong>
<pre><code>(customapi <span id="url"></span>)</code></pre>
<!-- Ohbot -->
<strong class="text-primary"><a href="https://ohbot.3v.fi/">Ohbot</a> command:</strong>
<pre><code>[customapi <span id="url"></span>]</code></pre>
</div>
<div id="routes" class="hidden">
<p class="text-warning">Route parameters:</p>
<table class="table table-bordered" id="route-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="qs" class="hidden">
<p class="text-warning">Query string parameters:</p>
<table class="table table-bordered table-striped table-hover" id="qs-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="page-header">
<h1>DecAPI Docs</h1>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-info"></i> General information</h3>
</div>
<div class="panel-body">
These pages will house the documentation of endpoints under DecAPI.
<br>
This is currently <strong>work in progress</strong> and <strong>incomplete</strong>, which means that some endpoints lack documentation or may not be fully documented.
<br>
If you would like to contribute, take a look at the <a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-github fa-1x"></i> GitHub repository</a> for this documentation.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-cog"></i> Default options &amp; results</h3>
</div>
<div class="panel-body">
<p>These are options or results that will be the default, <strong>unless the notes about the endpoint mention otherwise</strong>.</p>
<div class="list-group">
<li class="list-group-item">The base URL for all endpoints is <code><span id="base_url"></span></code>.</li>
<li class="list-group-item"><strong>HTTP</strong> requests are supported, but <strong>HTTPS (TLS 1.x)</strong> is encouraged.</li>
<li class="list-group-item">The default HTTP method supported is <code>GET</code>.</li>
<li class="list-group-item">Responses are typically <code>Content-Type: text/plain</code>.</li>
<li class="list-group-item">For endpoints that mention JSON support without any further information, send <code>Accept: application/json</code> in the request header to receive the response as JSON instead.</li>
<li class="list-group-item">Parameters are <strong>always</strong> required.</li>
<li class="list-group-item">Query strings are <strong>never</strong> required.</li>
<li class="list-group-item">Parameter/query string examples may be surrounded by "curly brackets", for example: <code>{USERNAME}</code>. These should be omitted in the actual requests.</li>
</div>
</div>
</div>
<div class="panel panel-primary" id="nondev">
<div class="panel-heading">
<h3 class="panel-title"><a href="#nondev"><i class="fa fa-1x fa-question"></i> Information for non-developers:</a></h3>
</div>
<div class="panel-body">
This page is primarily meant for developers, but some of you might be looking at this to use it with bots or similar (in this case they're often called "custom APIs").
<br>
In that case you're probably really confused as to how to use this, so this is an attempt to explain a few things for some of you.
<br>
If you have any further questions after reading this, then feel free to contact me via the information on my <a href="https://blog.decicus.com/contact/">contact page</a>, and I will attempt to reply to the best of my ability.
<br>
<h4 id="nondev-qs"><strong><a href="#nondev-qs">Query string (aka "QS") parameters:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
QS parameters are <i>normally</i> key/value pairs.
<br>
Example: <code>channel=decicus</code>.
</li>
<li class="list-group-item">
QS parameters that do not have a value are specified with just the key name, but can <i>optionally</i> be specified with a value.
<br>
Example: <code>list</code> instead of <code>list=value</code>
</li>
<li class="list-group-item">
To specify a QS parameter, you put a <code>?</code> after the main URL and specify your key or key/value.
<br>
Full URL example: <code><span id="base_url"></span>/twitch/uptime?channel=decicus</code>
</li>
<li class="list-group-item">
If you wish to specify <strong>more than one</strong> QS parameter, place an <code>&amp;</code> between each key or key/value pair.
<br>
Full URL example: <code><span id="base_url"></span>/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
<li class="list-group-item">
Because QS parameters are key/value pairs, their order <strong>does not matter</strong>. The two examples below achieve the same result.
<br>
Example #1: <code><span id="base_url"></span>/misc/currency?value=25&amp;from=USD&amp;to=NOK</code>
<br>
Example #2: <code><span id="base_url"></span>/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
</ul>
<h4 id="nondev-routes"><strong><a href="#nondev-routes">Route parameters:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
Route parameters are ordered values.
<br>
This means that in the URL, they have to be specified in the order that the placeholders mention them in.
<br>
For the examples below, I'll be using the <a href="#twitch_followage_CHANNEL_USER">/twitch/followage</a> endpoint. This endpoint is displayed as: <code><span id="base_url"></span>/twitch/followage/{CHANNEL}/{USER}</code>
<br>
Example #1: <code><span id="base_url"></span>/twitch/followage/xsmak/decicus</code>
<br>
Compared to (example #2): <code><span id="base_url"></span>/twitch/followage/decicus/xsmak</code>
<br>
<br>
Notice how for the first example, <strong>"xsmak"</strong> is the <strong>first</strong> name and "decicus" is the <strong>second</strong> one. This means that "xsmak" is the channel to check, and "decicus" is the user.
<br>
When you change the positions of these names, you also change what they are treated as.
<br>
In example #2, while it looks very similar, "decicus" is the first parameter, meaning it's treated as the channel. While "xsmak" is the user, giving a completely different result.
</li>
<li class="list-group-item">
Unlike QS parameters, they are <strong>NOT key/value pairs</strong>, and just the values.
<br>
This means that <code>{CHANNEL}</code> should just be <code>decicus</code> (example).
</li>
</ul>
<h4 id="nondev-bots"><strong><a href="#nondev-bots">Bot usage:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
If you have already looked at some of the API endpoints, you might have noticed that they mention a few bots and how to add the specific endpoint to these bots.
<br>
But each endpoint is displayed without any route/query string parameters, which means you have to add them yourself.
<br>
Using the information you read through earlier about these parameters, you just modify the URL.
<br>
I have done a few examples below, using the <a href="#twitch_followers_CHANNEL">/twitch/followers/{CHANNEL}</a> endpoint.
</li>
<li class="list-group-item">
<strong>Nightbot</strong> example: <code>$(urlfetch <span id="base_url"></span>/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
<li class="list-group-item">
<strong>Ankhbot</strong> example: <code>$readapi(<span id="base_url"></span>/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
</ul>
</div>
</div>
<div class="panel panel-primary hidden" id="toc">
<div class="panel-heading">
<h3 class="panel-title"><a href="#toc"><i class="fa fa-1x fa-table"></i> Table of contents:</a></h3>
</div>
<div class="panel-body">
<p>
The table of contents will only link you to the specific "categories", and not to any specific endpoints.
<br>
However, you can click the path/header for the endpoint and it will allow you to directly link to that section.
</p>
<div class="list-group"></div>
</div>
</div>
<div class="page-header">
<h1>Endpoints:</h1>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-1x fa-book"></i> DecAPI Docs on GitHub</a></li>
<li><a href="https://github.com/Decicus/DecAPI"><i class="fa fa-1x fa-github"></i> DecAPI on GitHub</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<p class="navbar-text">Design &amp; layout heavily inspired by <a href="https://xpaw.me/" class="navbar-link">xPaw</a> from their <a href="https://lab.xpaw.me/steam_api_documentation.html" class="navbar-link">Steam Web API Documentation</a>. Special thanks <i class="fa fa-1x fa-heart"></i></p>
<div class="container-fluid">
<div class="page-header">
<h1>DecAPI Docs</h1>
</div>
</div>
<span class="pull-right navbar-text" id="back-to-top" title="Back to top"><i class="fa fa-1x fa-arrow-circle-up"></i> Back to top</span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.7.0/js-yaml.min.js" integrity="sha256-8PanqYAVOGlOct+i65R+HqibK3KPsXINnrSfxN+Y/J0=" crossorigin="anonymous"></script>
<script src="./js/main.js" charset="utf-8"></script>
</body>
<div id="app"></div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<p class="navbar-text">Design &amp; layout heavily inspired by <a href="https://xpaw.me/" class="navbar-link">xPaw</a> from their <a href="https://lab.xpaw.me/steam_api_documentation.html" class="navbar-link">Steam Web API Documentation</a>. Special thanks <i class="fa fa-1x fa-heart"></i></p>
</div>
</nav>
</body>
</html>

1
js/main.js
View File

@ -1,3 +1,4 @@
/* eslint-disable */
function scrollTo(section)
{
$('html, body').animate({

288
old_index.html Normal file
View File

@ -0,0 +1,288 @@
<!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">
<title>DecAPI Docs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style media="screen">
body {
padding-bottom: 80px;
}
.fa-heart {
color: #be1931;
}
#back-to-top:hover {
cursor: pointer;
text-decoration: underline;
}
#description .list-group-item a {
font-weight: bold;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56279022-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DecAPI Docs</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-1x fa-book"></i> DecAPI Docs on GitHub</a></li>
<li><a href="https://github.com/Decicus/DecAPI"><i class="fa fa-1x fa-github"></i> DecAPI on GitHub</a></li>
</ul>
</div>
</nav>
<div class="container-fluid" id="content">
<i class="hidden fa fa-1x" id="fa-template"></i>
<div class="hidden" id="base-template">
<div class="page-header">
<h4><i class="fa fa-1x fa-fw"></i> <span></span></h4>
</div>
</div>
<div class="panel panel-success hidden" id="endpoint-template">
<div class="panel-heading">
<h3 class="panel-title" id="title">
<a href="#"><span id="base"></span><span id="route"></span></a>
</h3>
</div>
<div class="panel-body" id="main-body">
<p class="text-warning">Notes:</p>
<ul id="description" class="list-group text-primary"></ul>
<strong class="text-primary">Standard request:</strong>
<pre id="http"><strong class="text-primary"></strong> <code></code></pre>
<div class="hidden" id="bots">
<!-- Nightbot -->
<strong class="text-primary"><a href="https://beta.nightbot.tv/">Nightbot</a> command:</strong>
<pre><code>$(urlfetch <span id="url"></span>)</code></pre>
<!-- Ankhbot -->
<strong class="text-primary"><a href="http://marcinswierzowski.com/Gallery/Projects/AnkhBotR2/">Ankhbot</a> command:</strong>
<pre><code>$readapi(<span id="url"></span>)</code></pre>
<!-- Deepbot -->
<strong class="text-primary"><a href="https://deepbot.deep.sg/">Deepbot</a> command:</strong>
<pre><code>@customapi@[<span id="url"></span>]</code></pre>
<!-- PhantomBot -->
<strong class="text-primary"><a href="https://phantombot.tv/">PhantomBot</a> command:</strong>
<pre><code>(customapi <span id="url"></span>)</code></pre>
<!-- Ohbot -->
<strong class="text-primary"><a href="https://ohbot.3v.fi/">Ohbot</a> command:</strong>
<pre><code>[customapi <span id="url"></span>]</code></pre>
</div>
<div id="routes" class="hidden">
<p class="text-warning">Route parameters:</p>
<table class="table table-bordered" id="route-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="qs" class="hidden">
<p class="text-warning">Query string parameters:</p>
<table class="table table-bordered table-striped table-hover" id="qs-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="page-header">
<h1>DecAPI Docs</h1>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-info"></i> General information</h3>
</div>
<div class="panel-body">
These pages will house the documentation of endpoints under DecAPI.
<br>
This is currently <strong>work in progress</strong> and <strong>incomplete</strong>, which means that some endpoints lack documentation or may not be fully documented.
<br>
If you would like to contribute, take a look at the <a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-github fa-1x"></i> GitHub repository</a> for this documentation.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-cog"></i> Default options &amp; results</h3>
</div>
<div class="panel-body">
<p>These are options or results that will be the default, <strong>unless the notes about the endpoint mention otherwise</strong>.</p>
<div class="list-group">
<li class="list-group-item">The base URL for all endpoints is <code><span id="base_url"></span></code>.</li>
<li class="list-group-item"><strong>HTTP</strong> requests are supported, but <strong>HTTPS (TLS 1.x)</strong> is encouraged.</li>
<li class="list-group-item">The default HTTP method supported is <code>GET</code>.</li>
<li class="list-group-item">Responses are typically <code>Content-Type: text/plain</code>.</li>
<li class="list-group-item">For endpoints that mention JSON support without any further information, send <code>Accept: application/json</code> in the request header to receive the response as JSON instead.</li>
<li class="list-group-item">Parameters are <strong>always</strong> required.</li>
<li class="list-group-item">Query strings are <strong>never</strong> required.</li>
<li class="list-group-item">Parameter/query string examples may be surrounded by "curly brackets", for example: <code>{USERNAME}</code>. These should be omitted in the actual requests.</li>
</div>
</div>
</div>
<div class="panel panel-primary" id="nondev">
<div class="panel-heading">
<h3 class="panel-title"><a href="#nondev"><i class="fa fa-1x fa-question"></i> Information for non-developers:</a></h3>
</div>
<div class="panel-body">
This page is primarily meant for developers, but some of you might be looking at this to use it with bots or similar (in this case they're often called "custom APIs").
<br>
In that case you're probably really confused as to how to use this, so this is an attempt to explain a few things for some of you.
<br>
If you have any further questions after reading this, then feel free to contact me via the information on my <a href="https://blog.decicus.com/contact/">contact page</a>, and I will attempt to reply to the best of my ability.
<br>
<h4 id="nondev-qs"><strong><a href="#nondev-qs">Query string (aka "QS") parameters:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
QS parameters are <i>normally</i> key/value pairs.
<br>
Example: <code>channel=decicus</code>.
</li>
<li class="list-group-item">
QS parameters that do not have a value are specified with just the key name, but can <i>optionally</i> be specified with a value.
<br>
Example: <code>list</code> instead of <code>list=value</code>
</li>
<li class="list-group-item">
To specify a QS parameter, you put a <code>?</code> after the main URL and specify your key or key/value.
<br>
Full URL example: <code><span id="base_url"></span>/twitch/uptime?channel=decicus</code>
</li>
<li class="list-group-item">
If you wish to specify <strong>more than one</strong> QS parameter, place an <code>&amp;</code> between each key or key/value pair.
<br>
Full URL example: <code><span id="base_url"></span>/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
<li class="list-group-item">
Because QS parameters are key/value pairs, their order <strong>does not matter</strong>. The two examples below achieve the same result.
<br>
Example #1: <code><span id="base_url"></span>/misc/currency?value=25&amp;from=USD&amp;to=NOK</code>
<br>
Example #2: <code><span id="base_url"></span>/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
</ul>
<h4 id="nondev-routes"><strong><a href="#nondev-routes">Route parameters:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
Route parameters are ordered values.
<br>
This means that in the URL, they have to be specified in the order that the placeholders mention them in.
<br>
For the examples below, I'll be using the <a href="#twitch_followage_CHANNEL_USER">/twitch/followage</a> endpoint. This endpoint is displayed as: <code><span id="base_url"></span>/twitch/followage/{CHANNEL}/{USER}</code>
<br>
Example #1: <code><span id="base_url"></span>/twitch/followage/xsmak/decicus</code>
<br>
Compared to (example #2): <code><span id="base_url"></span>/twitch/followage/decicus/xsmak</code>
<br>
<br>
Notice how for the first example, <strong>"xsmak"</strong> is the <strong>first</strong> name and "decicus" is the <strong>second</strong> one. This means that "xsmak" is the channel to check, and "decicus" is the user.
<br>
When you change the positions of these names, you also change what they are treated as.
<br>
In example #2, while it looks very similar, "decicus" is the first parameter, meaning it's treated as the channel. While "xsmak" is the user, giving a completely different result.
</li>
<li class="list-group-item">
Unlike QS parameters, they are <strong>NOT key/value pairs</strong>, and just the values.
<br>
This means that <code>{CHANNEL}</code> should just be <code>decicus</code> (example).
</li>
</ul>
<h4 id="nondev-bots"><strong><a href="#nondev-bots">Bot usage:</a></strong></h4>
<ul class="list-group">
<li class="list-group-item">
If you have already looked at some of the API endpoints, you might have noticed that they mention a few bots and how to add the specific endpoint to these bots.
<br>
But each endpoint is displayed without any route/query string parameters, which means you have to add them yourself.
<br>
Using the information you read through earlier about these parameters, you just modify the URL.
<br>
I have done a few examples below, using the <a href="#twitch_followers_CHANNEL">/twitch/followers/{CHANNEL}</a> endpoint.
</li>
<li class="list-group-item">
<strong>Nightbot</strong> example: <code>$(urlfetch <span id="base_url"></span>/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
<li class="list-group-item">
<strong>Ankhbot</strong> example: <code>$readapi(<span id="base_url"></span>/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
</ul>
</div>
</div>
<div class="panel panel-primary hidden" id="toc">
<div class="panel-heading">
<h3 class="panel-title"><a href="#toc"><i class="fa fa-1x fa-table"></i> Table of contents:</a></h3>
</div>
<div class="panel-body">
<p>
The table of contents will only link you to the specific "categories", and not to any specific endpoints.
<br>
However, you can click the path/header for the endpoint and it will allow you to directly link to that section.
</p>
<div class="list-group"></div>
</div>
</div>
<div class="page-header">
<h1>Endpoints:</h1>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<p class="navbar-text">Design &amp; layout heavily inspired by <a href="https://xpaw.me/" class="navbar-link">xPaw</a> from their <a href="https://lab.xpaw.me/steam_api_documentation.html" class="navbar-link">Steam Web API Documentation</a>. Special thanks <i class="fa fa-1x fa-heart"></i></p>
<span class="pull-right navbar-text" id="back-to-top" title="Back to top"><i class="fa fa-1x fa-arrow-circle-up"></i> Back to top</span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.7.0/js-yaml.min.js" integrity="sha256-8PanqYAVOGlOct+i65R+HqibK3KPsXINnrSfxN+Y/J0=" crossorigin="anonymous"></script>
<script src="./js/main.js" charset="utf-8"></script>
</body>
</html>

72
package.json Normal file
View File

@ -0,0 +1,72 @@
{
"name": "decapi-docs",
"version": "1.0.0",
"description": "Docs for DecAPI",
"author": "Alex Thomassen <alex@thomassen.xyz>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"js-yaml": "^3.8.4",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.3.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.2.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

16
src/App.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div id="app">
<div class="container-fluid">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
created() {
this.$store.dispatch('LOAD_BASE_ENDPOINTS');
},
};
</script>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

110
src/components/Endpoint.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<div class="panel panel-success" id="endpoint-template">
<div class="panel-heading">
<h3 class="panel-title" id="title">
<a href="#{{ route }}">{{ route }}</a>
</h3>
</div>
<div class="panel-body" id="main-body">
<p class="text-warning">Notes:</p>
<ul id="description" class="list-group text-primary"></ul>
<strong class="text-primary">Standard request:</strong>
<pre id="http"><strong class="text-primary"></strong> <code></code></pre>
<div id="bots">
<template v-if="bot-nightbot">
<!-- Nightbot -->
<strong class="text-primary"><a href="https://beta.nightbot.tv/">Nightbot</a> command:</strong>
<pre><code>$(urlfetch {{ url }})</code></pre>
</template>
<template v-if="bot-ankhbot">
<!-- Ankhbot -->
<strong class="text-primary"><a href="http://marcinswierzowski.com/Gallery/Projects/AnkhBotR2/">Ankhbot</a> command:</strong>
<pre><code>$readapi({{ url }})</code></pre>
</template>
<template v-if="bot-deepbot">
<!-- Deepbot -->
<strong class="text-primary"><a href="https://deepbot.deep.sg/">Deepbot</a> command:</strong>
<pre><code>@customapi@[{{ url }}]</code></pre>
</template>
<template v-if="bot-phantombot">
<!-- PhantomBot -->
<strong class="text-primary"><a href="https://phantombot.tv/">PhantomBot</a> command:</strong>
<pre><code>(customapi {{ url }})</code></pre>
</template>
<template v-if="bot-ohbot">
<!-- Ohbot -->
<strong class="text-primary"><a href="https://ohbot.3v.fi/">Ohbot</a> command:</strong>
<pre><code>[customapi {{ url }}]</code></pre>
</template>
</div>
<div id="routes" v-if="parameters.length > 0">
<p class="text-warning">Route parameters:</p>
<table class="table table-bordered" id="route-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody>
<tr v-for="p in parameters">
<th>{{ p.name }}</th>
<td v-if="Array.isArray(p.description)">{{ p.description.join("<br>") }}</td>
<td v-else>{{ p.description }}</td>
<td><i class="fa fa-1x" v-bind:class="p.optional ? 'fa-times' : 'fa-check'"></i></td>
<td><code>{{ p.type || 'string' }}</code></td>
</tr>
</tbody>
</table>
</div>
<div id="qs" v-if="qs.length > 0">
<p class="text-warning">Query string parameters:</p>
<table class="table table-bordered table-striped table-hover" id="qs-body">
<thead>
<tr>
<th>Parameter name:</th>
<th>Description:</th>
<th>Required:</th>
<th>Type:</th>
</tr>
</thead>
<tbody>
<tr v-for="p in qs">
<th>{{ p.name }}</th>
<td v-if="Array.isArray(p.description)">{{ p.description.join("<br>") }}</td>
<td v-else>{{ p.description }}</td>
<td><i class="fa fa-1x" v-bind:class="p.required ? 'fa-check' : 'fa-times'"></i></td>
<td><code>{{ p.type || 'string' }}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Endpoint',
data() {
return {
};
},
};
</script>

14
src/components/EndpointList.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div id="app">
<h2>Endpoints: {{ this.$route.path }}</h2>
</div>
</template>
<script>
export default {
name: 'EndpointList',
data() {
return {};
},
};
</script>

53
src/components/Hello.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App',
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

162
src/components/Home.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-info"></i> General information</h3>
</div>
<div class="panel-body">
These pages will house the documentation of endpoints under DecAPI.
<br>
This is currently <strong>work in progress</strong> and <strong>incomplete</strong>, which means that some endpoints lack documentation or may not be fully documented.
<br>
If you would like to contribute, take a look at the <a href="https://github.com/Decicus/DecAPI-Docs"><i class="fa fa-github fa-1x"></i> GitHub repository</a> for this documentation.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-cog"></i> Default options &amp; results</h3>
</div>
<div class="panel-body">
<p>These are options or results that will be the default, <strong>unless the notes about the endpoint mention otherwise</strong>.</p>
<div class="list-group">
<li class="list-group-item">The base URL for all endpoints is <code>{{ baseUrl }}</code>.</li>
<li class="list-group-item"><strong>HTTP</strong> requests are supported, but <strong>HTTPS (TLS 1.x)</strong> is encouraged.</li>
<li class="list-group-item">The default HTTP method supported is <code>GET</code>.</li>
<li class="list-group-item">Responses are typically <code>Content-Type: text/plain</code>.</li>
<li class="list-group-item">For endpoints that mention JSON support without any further information, send <code>Accept: application/json</code> in the request header to receive the response as JSON instead.</li>
<li class="list-group-item">Parameters are <strong>always</strong> required.</li>
<li class="list-group-item">Query strings are <strong>never</strong> required.</li>
<li class="list-group-item">Parameter/query string examples may be surrounded by "curly brackets", for example: <code>{USERNAME}</code>. These should be omitted in the actual requests.</li>
</div>
</div>
</div>
<div class="panel panel-primary" id="nondev">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-question"></i> Information for non-developers:</h3>
</div>
<div class="panel-body">
This page is primarily meant for developers, but some of you might be looking at this to use it with bots or similar (in this case they're often called "custom APIs").
<br>
In that case you're probably really confused as to how to use this, so this is an attempt to explain a few things for some of you.
<br>
If you have any further questions after reading this, then feel free to contact me via the information on my <a href="https://blog.decicus.com/contact/">contact page</a>, and I will attempt to reply to the best of my ability.
<br>
<h4 id="nondev-qs"><strong>Query string (aka "QS") parameters:</strong></h4>
<ul class="list-group">
<li class="list-group-item">
QS parameters are <i>normally</i> key/value pairs.
<br>
Example: <code>channel=decicus</code>.
</li>
<li class="list-group-item">
QS parameters that do not have a value are specified with just the key name, but can <i>optionally</i> be specified with a value.
<br>
Example: <code>list</code> instead of <code>list=value</code>
</li>
<li class="list-group-item">
To specify a QS parameter, you put a <code>?</code> after the main URL and specify your key or key/value.
<br>
Full URL example: <code>{{ baseUrl }}/twitch/uptime?channel=decicus</code>
</li>
<li class="list-group-item">
If you wish to specify <strong>more than one</strong> QS parameter, place an <code>&amp;</code> between each key or key/value pair.
<br>
Full URL example: <code>{{ baseUrl }}/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
<li class="list-group-item">
Because QS parameters are key/value pairs, their order <strong>does not matter</strong>. The two examples below achieve the same result.
<br>
Example #1: <code>{{ baseUrl }}/misc/currency?value=25&amp;from=USD&amp;to=NOK</code>
<br>
Example #2: <code>{{ baseUrl }}/misc/currency?from=USD&amp;to=NOK&amp;value=25</code>
</li>
</ul>
<h4 id="nondev-routes"><strong>Route parameters:</strong></h4>
<ul class="list-group">
<li class="list-group-item">
Route parameters are ordered values.
<br>
This means that in the URL, they have to be specified in the order that the placeholders mention them in.
<br>
For the examples below, I'll be using the <code>/twitch/followage</code> endpoint. This endpoint is displayed as: <code>{{ baseUrl }}/twitch/followage/{CHANNEL}/{USER}</code>
<br>
Example #1: <code>{{ baseUrl }}/twitch/followage/tsm_smak/decicus</code>
<br>
Compared to (example #2): <code>{{ baseUrl }}/twitch/followage/decicus/tsm_smak</code>
<br>
<br>
Notice how for the first example, <strong>"tsm_smak"</strong> is the <strong>first</strong> name and "decicus" is the <strong>second</strong> one. This means that "tsm_smak" is the channel to check, and "decicus" is the user.
<br>
When you change the positions of these names, you also change what they are treated as.
<br>
In example #2, while it looks very similar, "decicus" is the first parameter, meaning it's treated as the channel. While "tsm_smak" is the user, giving a completely different result.
</li>
<li class="list-group-item">
Unlike QS parameters, they are <strong>NOT key/value pairs</strong>, and just the values.
<br>
This means that <code>{CHANNEL}</code> should just be <code>decicus</code> (example).
</li>
</ul>
<h4 id="nondev-bots"><strong>Bot usage:</strong></h4>
<ul class="list-group">
<li class="list-group-item">
If you have already looked at some of the API endpoints, you might have noticed that they mention a few bots and how to add the specific endpoint to these bots.
<br>
But each endpoint is displayed without any route/query string parameters, which means you have to add them yourself.
<br>
Using the information you read through earlier about these parameters, you just modify the URL.
<br>
I have done a few examples below, using the <code>/twitch/followers/{CHANNEL}</code> endpoint.
</li>
<li class="list-group-item">
<strong>Nightbot</strong> example: <code>$(urlfetch {{ baseUrl }}/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
<li class="list-group-item">
<strong>Ankhbot</strong> example: <code>$readapi({{ baseUrl }}/twitch/followers/decicus?count=5&amp;direction=desc)</code>
</li>
</ul>
</div>
</div>
<div class="panel panel-primary" id="toc" v-if="baseEndpoints.length > 0">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-1x fa-table"></i> Table of contents:</h3>
</div>
<div class="panel-body">
<p>
The table of contents will only link you to the specific "categories", and not to any specific endpoints.
<br>
However, you can click the path/header for the endpoint and it will allow you to directly link to that section.
</p>
<div class="list-group">
<a v-for="base in baseEndpoints" v-bind:href="'#' + base.name" class="list-group-item">
<i class="fa fa-1x fa-fw" v-bind:class="'fa-' + (base.icon ? base.icon : 'info')"></i> {{ base.title }}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
baseEndpoints: [],
baseUrl: 'https://beta.decapi.me',
};
},
created() {
this.baseEndpoints = this.$store.state.baseEndpoints;
this.$store.watch((state) => {
this.baseEndpoints = state.baseEndpoints;
});
},
};
</script>

17
src/main.js Normal file
View File

@ -0,0 +1,17 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
});

33
src/router/index.js Normal file
View File

@ -0,0 +1,33 @@
import Vue from 'vue';
import VueResource from 'vue-resource';
import Router from 'vue-router';
import EndpointList from '@/components/EndpointList';
import Home from '@/components/Home';
import yaml from 'js-yaml';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
];
Vue.use(Router);
Vue.use(VueResource);
Vue.http.get('/static/yaml/base/base_endpoints.yaml').then((response) => {
const baseEndpoints = yaml.load(response.body);
baseEndpoints.forEach((base) => {
const { title, name } = base;
routes.push({
path: `/${title}`,
name,
component: EndpointList,
});
});
});
export default new Router({
routes,
});

35
src/store.js Normal file
View File

@ -0,0 +1,35 @@
import Vue from 'vue';
import VueResource from 'vue-resource';
import Vuex from 'vuex';
import yaml from 'js-yaml';
Vue.use(VueResource);
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
baseEndpoints: [],
},
actions: {
LOAD_BASE_ENDPOINTS({ commit }) {
Vue.http.get('/static/yaml/base/base_endpoints.yaml').then(({ body }) => {
const baseEndpoints = yaml.load(body);
commit('UPDATE_BASE_ENDPOINTS', {
baseEndpoints,
});
});
},
},
mutations: {
UPDATE_BASE_ENDPOINTS: (state, { baseEndpoints }) => {
state.baseEndpoints = baseEndpoints;
},
},
getters: {
getBase(state) {
return state.baseEndpoints;
},
},
});
export default store;

0
static/.gitkeep Normal file
View File

0
yaml/base/base_endpoints.yaml → static/yaml/base/base_endpoints.yaml
View File

0
yaml/endpoints/askfm.yaml → static/yaml/endpoints/askfm.yaml
View File

0
yaml/endpoints/br.yaml → static/yaml/endpoints/br.yaml
View File

0
yaml/endpoints/bttv.yaml → static/yaml/endpoints/bttv.yaml
View File

0
yaml/endpoints/dayz.yaml → static/yaml/endpoints/dayz.yaml
View File

0
yaml/endpoints/example.yaml → static/yaml/endpoints/example.yaml
View File

0
yaml/endpoints/lever.yaml → static/yaml/endpoints/lever.yaml
View File

0
yaml/endpoints/math.yaml → static/yaml/endpoints/math.yaml
View File

0
yaml/endpoints/misc.yaml → static/yaml/endpoints/misc.yaml
View File

0
yaml/endpoints/r6.yaml → static/yaml/endpoints/r6.yaml
View File

0
yaml/endpoints/random.yaml → static/yaml/endpoints/random.yaml
View File

0
yaml/endpoints/steam.yaml → static/yaml/endpoints/steam.yaml
View File

0
yaml/endpoints/twitch.yaml → static/yaml/endpoints/twitch.yaml
View File

0
yaml/endpoints/twitter.yaml → static/yaml/endpoints/twitter.yaml
View File

0
yaml/endpoints/youtube.yaml → static/yaml/endpoints/youtube.yaml
View File