build: nuke old Vue app
This commit is contained in:
Resi Respati
parent
f5304c0b4e
commit
27ad8f9bb4
14
.babelrc
14
.babelrc
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-runtime"],
|
||||
"comments": false,
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["env", "stage-2"],
|
||||
"plugins": [ "istanbul" ]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
build/*.js
|
||||
config/*.js
|
||||
27
.eslintrc.js
27
.eslintrc.js
|
|
@ -1,27 +0,0 @@
|
|||
// http://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
|
||||
extends: 'standard',
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'html'
|
||||
],
|
||||
// add your custom rules here
|
||||
'rules': {
|
||||
// allow paren-less arrow functions
|
||||
'arrow-parens': 0,
|
||||
// allow async-await
|
||||
'generator-star-spacing': 0,
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text eol=lf
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
*.sln merge=union
|
||||
*.csproj merge=union
|
||||
*.vbproj merge=union
|
||||
*.fsproj merge=union
|
||||
*.dbproj merge=union
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
selenium-debug.log
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
// to edit target browsers: use "browserlist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"editor.tabSize": 2,
|
||||
"editor.insertSpaces": true,
|
||||
"editor.renderWhitespace": "boundary",
|
||||
"files.encoding": "utf8",
|
||||
"files.trimTrailingWhitespace": true,
|
||||
"files.insertFinalNewline": true,
|
||||
"search.exclude": {
|
||||
"dist/**": true,
|
||||
"static/**": true,
|
||||
"_posts/**": true,
|
||||
"_projects/**": true,
|
||||
"_site/**": true,
|
||||
".sass-cache/**": true
|
||||
}
|
||||
}
|
||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Resi Respati
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
41
README.md
41
README.md
|
|
@ -1,41 +0,0 @@
|
|||
# tildetv-frontend
|
||||
|
||||
> A web player for all videos shared within tilde.town. Sit back and relax.
|
||||
|
||||
[tildetv](https://tilde.town/~resir014/tildetv) is an alternative way to enjoy visual media on the internet. It's a playlist of YouTube videos discovered and curated by [tilde.town members](https://tilde.town) from a variety of different categories across the site, and are available for everyone's viewing pleasure.
|
||||
|
||||
At the backend is a wonderful scipt provided by [~karlen](https://tilde.town/~karlen) that generates a [JSON datadump](https://tilde.town/~karlen/tv/videos.json) of videos added by tilde.town members through the [simple command-line tool](https://tilde.town/~resir014/tildetv/#/howto) available in the server.
|
||||
|
||||
The front-end is a lightweight website written in [Vue.js](https://vuejs.org/). It serves a proof-of-concept on how you can build your own client. Another example is [~archangelic](https://tilde.town/~archangelic)'s `!tildetv` IRC bot.
|
||||
|
||||
## Build Setup
|
||||
|
||||
A nodejs >= 6.0.0 setup with [yarn](https://yarnpkg.com/) is recommended.
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
yarn
|
||||
|
||||
# ...or if you'd like to use npm instead
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
|
||||
# run unit tests
|
||||
npm run unit
|
||||
|
||||
# run e2e tests
|
||||
npm run e2e
|
||||
|
||||
# run all tests
|
||||
npm test
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
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'
|
||||
))
|
||||
})
|
||||
})
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/* 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()
|
||||
}
|
||||
})
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
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 = process.env.NODE_ENV === 'testing'
|
||||
? require('./webpack.prod.conf')
|
||||
: 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()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
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
|
||||
})
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
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]')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
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()
|
||||
]
|
||||
})
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
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 = process.env.NODE_ENV === 'testing'
|
||||
? require('../config/test.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: process.env.NODE_ENV === 'testing'
|
||||
? 'index.html'
|
||||
: 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
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// This is the webpack config used for unit tests.
|
||||
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var baseConfig = require('./webpack.base.conf')
|
||||
|
||||
var webpackConfig = merge(baseConfig, {
|
||||
// use inline sourcemap for karma-sourcemap-loader
|
||||
module: {
|
||||
rules: utils.styleLoaders()
|
||||
},
|
||||
devtool: '#inline-source-map',
|
||||
resolveLoader: {
|
||||
alias: {
|
||||
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
|
||||
// see discussion at https://github.com/vuejs/vue-loader/issues/724
|
||||
'scss-loader': 'sass-loader'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': require('../config/test.env')
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
// no need for app entry during tests
|
||||
delete webpackConfig.entry
|
||||
|
||||
module.exports = webpackConfig
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var merge = require('webpack-merge')
|
||||
var prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
// 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: '/~resir014/tildetv/',
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
var merge = require('webpack-merge')
|
||||
var devEnv = require('./dev.env')
|
||||
|
||||
module.exports = merge(devEnv, {
|
||||
NODE_ENV: '"testing"'
|
||||
})
|
||||
15
index.html
15
index.html
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>tildetv</title>
|
||||
<meta name="description" content="sit back and relax.">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
106
package.json
106
package.json
|
|
@ -1,106 +0,0 @@
|
|||
{
|
||||
"name": "tildetv-frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "A web player for all videos shared within tilde.town. Sit back and relax.",
|
||||
"author": "Resi Respati <resir014@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"start": "node build/dev-server.js",
|
||||
"build": "node build/build.js",
|
||||
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit && npm run e2e",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.16.1",
|
||||
"vue": "^2.2.6",
|
||||
"vue-axios": "^2.0.2",
|
||||
"vue-paginate": "^3.4.0",
|
||||
"vue-router": "^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-istanbul": "^4.1.1",
|
||||
"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",
|
||||
"chai": "^3.5.0",
|
||||
"chalk": "^1.1.3",
|
||||
"chromedriver": "^2.27.2",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cross-env": "^4.0.0",
|
||||
"cross-spawn": "^5.0.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"cz-conventional-changelog": "^2.0.0",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-standard": "^6.2.1",
|
||||
"eslint-friendly-formatter": "^2.0.7",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-html": "^2.0.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"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",
|
||||
"inject-loader": "^3.0.0",
|
||||
"karma": "^1.4.1",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.2",
|
||||
"karma-phantomjs-shim": "^1.4.0",
|
||||
"karma-sinon-chai": "^1.3.1",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.30",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"lolex": "^1.5.2",
|
||||
"mocha": "^3.2.0",
|
||||
"nightwatch": "^0.9.12",
|
||||
"node-sass": "^4.5.2",
|
||||
"opn": "^4.0.2",
|
||||
"optimize-css-assets-webpack-plugin": "^1.3.0",
|
||||
"ora": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.14",
|
||||
"rimraf": "^2.6.0",
|
||||
"sass-loader": "^6.0.3",
|
||||
"selenium-server": "^3.0.1",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.7.6",
|
||||
"sinon": "^2.1.0",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue-loader": "^11.3.4",
|
||||
"vue-style-loader": "^2.0.5",
|
||||
"vue-template-compiler": "^2.2.6",
|
||||
"webpack": "^2.3.3",
|
||||
"webpack-bundle-analyzer": "^2.2.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"
|
||||
],
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/App.vue
24
src/App.vue
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<app-header></app-header>
|
||||
<router-view></router-view>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './components/Header.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
'app-header': Header,
|
||||
'app-footer': Footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./styles/global.scss" lang="scss"></style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<footer>
|
||||
<small>
|
||||
designed by <a href="https://tilde.town/~resir014">~resir014</a>. backend work by <a href="https://tilde.town/~karlen">~karlen</a>.
|
||||
</small>
|
||||
<small>
|
||||
<a href="https://github.com/resir014/tildetv-frontend" target="_blank">view the code</a>
|
||||
</small>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-footer'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<header>
|
||||
<h1 class="title"><router-link to="/">tilde<span>tv</span><small>(beta)</small></router-link></h1>
|
||||
<span class="subheading">sit back and relax</span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><router-link to="/" exact>about</router-link></li>
|
||||
<li><router-link to="/videos">this week's playlist</router-link></li>
|
||||
<li><router-link to="/howto">add videos</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-header'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<div id="hello">
|
||||
<p>tildetv is an alternative way to enjoy visual media on the internet. it's a playlist of YouTube videos discovered and curated by <a href="https://tilde.town">tilde.town members</a> from a variety of different categories across the site, and are available here for everyone's viewing pleasure.</p>
|
||||
|
||||
<h2>features</h2>
|
||||
<ul>
|
||||
<li>simple, intuitive <router-link to="/videos">web viewer</router-link> (with tags & content warnings)</li>
|
||||
<li><router-link to="/howto">add videos to the playlist</router-link> using a simple command line</li>
|
||||
<li><a href="https://tilde.town/~karlen/tv/videos.json" target="_blank">JSON datadump</a>, for ~town members who want to develop their own, in-console client</li>
|
||||
<li>videos are reset every week, so you're bound to see something fresh!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hello'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div id="howto">
|
||||
<h1>adding stuff to tildetv</h1>
|
||||
<p>to add videos to tildetv you can use the command-line tool provided by <a href="https://tilde.town/~karlen">~karlen</a>.</p>
|
||||
<div class="highlight">
|
||||
<pre>$ ~karlen/tv/addtotv -h
|
||||
|
||||
Usage: addtotv [options] arg
|
||||
|
||||
Options:
|
||||
-h, --help show this help message and exit
|
||||
-l LINK, --link=LINK URL to youtube video quoted. e.g. -l
|
||||
"https://www.youtube.com/watch?v=z7VYVjR_nwE"
|
||||
-t TAGS, --tags=TAGS Tags, comma separated and quoted. e.g. -t "Train, Ice,
|
||||
cold"
|
||||
-c CW, --contentwarning=CW
|
||||
Content warning, comma separated and quoted. e.g. -c
|
||||
"Doggo, pupper, Joyce"
|
||||
-d DESC, --description=DESC
|
||||
Description of the video, quoted. e.g. "A real
|
||||
angerery pupper writing about pubs"</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'howto'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<div id="video">
|
||||
<div class="video-wrapper">
|
||||
<iframe width="1280" height="720" :src="id.v | embedLink" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="metadata">
|
||||
<h4 v-if="title">
|
||||
{{ title }}
|
||||
</h4>
|
||||
|
||||
<p v-if="description">{{ description }}</p>
|
||||
<p v-if="user"><small>added by <a :href="user | userLink">~{{ user }}</a> on {{ addedtime | generateTime }}</small></p>
|
||||
|
||||
<video-tag-list v-if="tags.length > 0" v-bind:tags="tags"></video-tag-list>
|
||||
</div>
|
||||
<video-content-warning-wrapper v-if="contentWarnings.length > 0"
|
||||
v-bind:contentWarnings="contentWarnings"></video-content-warning-wrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoTagList from './VideoTagList.vue'
|
||||
import VideoContentWarningWrapper from './VideoContentWarningWrapper.vue'
|
||||
|
||||
export default {
|
||||
name: 'video',
|
||||
props: ['id', 'youtubelink', 'title', 'addedtime', 'description', 'user', 'tags', 'contentWarnings'],
|
||||
data () {
|
||||
return {
|
||||
cwToggle: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'video-tag-list': VideoTagList,
|
||||
'video-content-warning-wrapper': VideoContentWarningWrapper
|
||||
},
|
||||
filters: {
|
||||
embedLink: function (value) {
|
||||
if (!value) return ''
|
||||
|
||||
value = value.toString()
|
||||
return 'https://www.youtube.com/embed/' + value
|
||||
},
|
||||
userLink: function (value) {
|
||||
if (!value) return ''
|
||||
|
||||
value = value.toString()
|
||||
return 'https://tilde.town/~' + value
|
||||
},
|
||||
generateTime: function (value) {
|
||||
if (!value) return 0
|
||||
|
||||
value = parseInt(value)
|
||||
return new Date(value * 1000).toISOString()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<div id="video-content-warning-list" v-if="showWarning">
|
||||
<div class="content-warning-inner">
|
||||
<h2>content warning</h2>
|
||||
<p>hey, this video contains the following:</p>
|
||||
<span class="content-warning" v-bind:key="contentWarning" v-for="contentWarning in contentWarnings">{{ contentWarning }}</span>
|
||||
<div class="content-warning-button">
|
||||
<a v-on:click="showWarning = !showWarning">click to continue</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'video-content-warning-wrapper',
|
||||
props: ['contentWarnings'],
|
||||
data () {
|
||||
return {
|
||||
showWarning: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<div id="video-tag-list">
|
||||
<span class="tag" v-for="tag in tags" v-bind:key="tag"><router-link :to="{ name: 'Videos By Tag', params: { tag }}">{{ tag }}</router-link></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'video-tag-list',
|
||||
props: ['tags']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<div id="videos">
|
||||
<p v-if="!fetched">fetching videos...</p>
|
||||
<paginate v-if="videos && videos.length" class="video-list" name="videos" :list="videos" :per="1">
|
||||
<li v-for="video in paginated('videos')" v-bind:key="video.id">
|
||||
<app-video
|
||||
v-bind:id="video.id"
|
||||
v-bind:youtubelink="video.youtubelink"
|
||||
v-bind:title="video.title"
|
||||
v-bind:addedtime="video.addedtime"
|
||||
v-bind:description="video.description"
|
||||
v-bind:user="video.user"
|
||||
v-bind:tags="video.tags"
|
||||
v-bind:contentWarnings="video.contentWarnings"></app-video>
|
||||
</li>
|
||||
</paginate>
|
||||
<paginate-links for="videos" v-if="videos && videos.length"
|
||||
:simple="{ prev: '« previous', next: 'next »' }"></paginate-links>
|
||||
<div v-else-if="errors && errors.length">
|
||||
<p v-for="error of errors" v-bind:key="error.message">{{error.message}}</p>
|
||||
</div>
|
||||
<div v-else-if="fetched">
|
||||
<p>No videos posted in the past week.</p>
|
||||
<p><router-link to="/howto" exact>Add some videos!</router-link></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Video from './video.vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'videos',
|
||||
data: () => ({
|
||||
fetched: false,
|
||||
videos: [],
|
||||
errors: [],
|
||||
paginate: ['videos']
|
||||
}),
|
||||
created () {
|
||||
const baseUrl = process.env.NODE_ENV === 'development'
|
||||
? 'static/sample-api'
|
||||
: '/~karlen/tv'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: baseUrl,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
})
|
||||
|
||||
api.get('/videos.json').then(response => {
|
||||
this.fetched = true
|
||||
this.videos = response.data
|
||||
}).catch(e => {
|
||||
this.fetched = true
|
||||
this.errors.push(e)
|
||||
})
|
||||
},
|
||||
components: {
|
||||
'app-video': Video
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div id="error-404">
|
||||
<h1>404: page not found</h1>
|
||||
<p>we can't find what you're looking for.</p>
|
||||
<p><router-link to="/">go back home</router-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'error404'
|
||||
}
|
||||
</script>
|
||||
15
src/main.js
15
src/main.js
|
|
@ -1,15 +0,0 @@
|
|||
// 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'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
})
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import VuePaginate from 'vue-paginate'
|
||||
import Hello from '@/components/Hello'
|
||||
import Howto from '@/components/Howto'
|
||||
import Videos from '@/components/Videos'
|
||||
import PageNotFound from '@/components/errors/404'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(VuePaginate)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Hello
|
||||
},
|
||||
{
|
||||
path: '/howto',
|
||||
name: 'Howto',
|
||||
component: Howto
|
||||
},
|
||||
{
|
||||
path: '/videos',
|
||||
name: 'Videos',
|
||||
component: Videos
|
||||
},
|
||||
{
|
||||
path: '/videos-by-tag',
|
||||
name: 'Video Tag List',
|
||||
redirect: '/videos',
|
||||
children: [
|
||||
{
|
||||
path: ':tag',
|
||||
name: 'Videos By Tag',
|
||||
redirect: '/videos'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
name: '404 - Page Not Found',
|
||||
component: PageNotFound
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
// App
|
||||
//
|
||||
// Base styles for the application entry point.
|
||||
|
||||
#app {
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
// Global resets
|
||||
//
|
||||
// Update the global foundational styling of a project
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-family: $root-font-family;
|
||||
font-size: $root-font-size;
|
||||
line-height: $root-line-height;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
// Layout
|
||||
//
|
||||
// Base elements for layouts.
|
||||
|
||||
.container {
|
||||
max-width: 48em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
// Pagination container
|
||||
|
||||
.paginate-links {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
|
||||
a {
|
||||
padding: .5rem 1rem;
|
||||
text-decoration: none;
|
||||
background-color: $label-color;
|
||||
|
||||
&:hover {
|
||||
padding: .5rem 1rem;
|
||||
text-decoration: none;
|
||||
color: $label-color;
|
||||
background-color: $link-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Headings, body text, lists, and other misc typographic elements.
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 400;
|
||||
line-height: $heading-line-height;
|
||||
color: $base07;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $base07;
|
||||
}
|
||||
|
||||
ul, ol, dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Code
|
||||
//
|
||||
// Inline and block-level code snippets.
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-family: $code-font-family;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .25em .5em;
|
||||
font-size: 85%;
|
||||
color: $code-color;
|
||||
background-color: $code-background-color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Pygments via Jekyll
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: .8rem;
|
||||
line-height: 1.4;
|
||||
background-color: $code-background-color;
|
||||
border-radius: .25rem;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.lineno {
|
||||
display: inline-block; // Ensures the null space also isn't selectable
|
||||
padding-right: .75rem;
|
||||
padding-left: .25rem;
|
||||
color: #999;
|
||||
// Make sure numbers aren't selectable
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-top: 1px solid $label-color;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
header {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 300;
|
||||
font-size: 2.5rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#hello {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#howto {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#video-content-warning-list {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $label-color;
|
||||
|
||||
.content-warning {
|
||||
margin-right: .5rem;
|
||||
padding: .125rem .25rem;
|
||||
font-size: 85%;
|
||||
color: $content-warning-label-color;
|
||||
background-color: $content-warning-label-background;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content-warning-button {
|
||||
margin-top: 1rem;
|
||||
font-size: 85%;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#video-tag-list {
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
padding: .125rem .25rem;
|
||||
font-size: 85%;
|
||||
background-color: $label-color;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#video {
|
||||
position: relative;
|
||||
|
||||
h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
// Content warning labels
|
||||
.cw-notifier {
|
||||
padding: .125rem .25rem;
|
||||
font-size: 85%;
|
||||
color: $content-warning-label-color;
|
||||
background-color: $content-warning-label-background;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Video wrapper.
|
||||
//
|
||||
// @see https://alistapart.com/article/creating-intrinsic-ratios-for-video
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import "../utils/variables";
|
||||
|
||||
#videos {
|
||||
.video-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: 3rem;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@import "utils/variables";
|
||||
|
||||
@import "vendor/normalize";
|
||||
|
||||
@import "base/base";
|
||||
@import "base/layout";
|
||||
@import "base/typography";
|
||||
@import "base/app";
|
||||
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
@import "components/hello";
|
||||
@import "components/howto";
|
||||
@import "components/videos";
|
||||
@import "components/video";
|
||||
@import "components/video-tag-list";
|
||||
@import "components/video-content-warning-wrapper";
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
// Variables
|
||||
//
|
||||
// Global variables for the whole projects.
|
||||
|
||||
// Colours based on the base16 styleguide
|
||||
// https://chriskempson.github.io/base16/
|
||||
$base00-background: #181818;
|
||||
$base01-background: #282828;
|
||||
$base02-background: #383838;
|
||||
$base03-background: #585858;
|
||||
$base04-background: #b8b8b8;
|
||||
$base05-background: #d8d8d8;
|
||||
$base06-background: #e8e8e8;
|
||||
$base07-background: #f8f8f8;
|
||||
$base08-background: #ab4642;
|
||||
$base09-background: #dc9656;
|
||||
$base0A-background: #f7ca88;
|
||||
$base0B-background: #a1b56c;
|
||||
$base0C-background: #86c1b9;
|
||||
$base0D-background: #7cafc2;
|
||||
$base0E-background: #ba8baf;
|
||||
$base0F-background: #a16946;
|
||||
|
||||
$base00: #181818;
|
||||
$base01: #282828;
|
||||
$base02: #383838;
|
||||
$base03: #585858;
|
||||
$base04: #b8b8b8;
|
||||
$base05: #d8d8d8;
|
||||
$base06: #e8e8e8;
|
||||
$base07: #f8f8f8;
|
||||
$base08: #ab4642;
|
||||
$base09: #dc9656;
|
||||
$base0A: #f7ca88;
|
||||
$base0B: #a1b56c;
|
||||
$base0C: #86c1b9;
|
||||
$base0D: #7cafc2;
|
||||
$base0E: #ba8baf;
|
||||
$base0F: #a16946;
|
||||
|
||||
// Base variables
|
||||
$root-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
$root-font-size: 16px;
|
||||
$root-line-height: 1.35;
|
||||
|
||||
// Typography
|
||||
$body-color: $base05;
|
||||
$body-color-muted: darken($body-color, 15%);
|
||||
$body-bg: $base00-background;
|
||||
$heading-color: $base07;
|
||||
$heading-line-height: 1.15;
|
||||
$link-color: $base0E;
|
||||
|
||||
// Other components
|
||||
$border-color: darken($base01, 2.5%);
|
||||
$label-color: $base01-background;
|
||||
|
||||
// Code
|
||||
$code-font-family: Consolas, "Liberation Mono", Menlo, Monaco, Courier New, monospace;
|
||||
$code-color: #bf616a;
|
||||
$code-background-color: $border-color;
|
||||
|
||||
// Content warnings
|
||||
$content-warning-label-background: $base08-background;
|
||||
$content-warning-label-color: $base05;
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,53 +0,0 @@
|
|||
[
|
||||
{
|
||||
"contentWarnings": [
|
||||
"Trains"
|
||||
],
|
||||
"description": "One of my favourite videos, a relaxing minute by minute train journey from Bergen to Oslo",
|
||||
"title": "BergensBanen minutt for minutt HD (Full video)",
|
||||
"addedtime": 1492970809,
|
||||
"tags": [
|
||||
"SlowTv",
|
||||
"Train",
|
||||
"Norway"
|
||||
],
|
||||
"youtubelink": "https://www.youtube.com/watch?v=z7VYVjR_nwE",
|
||||
"id": {
|
||||
"v": [
|
||||
"z7VYVjR_nwE"
|
||||
]
|
||||
},
|
||||
"user": "karlen"
|
||||
},
|
||||
{
|
||||
"contentWarnings": [],
|
||||
"description": "A must watch even if you don't like sports. Jon Bois from SB Nation uses some neat statistics to figure out if baseballer Barry Bonds would still do well, even without carrying a bat.",
|
||||
"title": "What if Barry Bonds had played without a baseball bat? | Chart Party",
|
||||
"addedtime": 1492256083,
|
||||
"tags": [
|
||||
"sports",
|
||||
"statistics"
|
||||
],
|
||||
"youtubelink": "https://www.youtube.com/watch?v=JwMfT2cZGHg",
|
||||
"id": {
|
||||
"v": [
|
||||
"JwMfT2cZGHg"
|
||||
]
|
||||
},
|
||||
"user": "resir014"
|
||||
},
|
||||
{
|
||||
"contentWarnings": [],
|
||||
"description": "A parody talk researching the turing-completeness of PowerPoint.",
|
||||
"title": "On The Turing Completeness of PowerPoint (SIGBOVIK)",
|
||||
"addedtime": 14924141943,
|
||||
"tags": [],
|
||||
"youtubelink": "https://www.youtube.com/watch?v=uNjxe8ShM-8",
|
||||
"id": {
|
||||
"v": [
|
||||
"uNjxe8ShM-8"
|
||||
]
|
||||
},
|
||||
"user": "resir014"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// A custom Nightwatch assertion.
|
||||
// the name of the method is the filename.
|
||||
// can be used in tests like this:
|
||||
//
|
||||
// browser.assert.elementCount(selector, count)
|
||||
//
|
||||
// for how to write custom assertions see
|
||||
// http://nightwatchjs.org/guide#writing-custom-assertions
|
||||
exports.assertion = function (selector, count) {
|
||||
this.message = 'Testing if element <' + selector + '> has count: ' + count
|
||||
this.expected = count
|
||||
this.pass = function (val) {
|
||||
return val === this.expected
|
||||
}
|
||||
this.value = function (res) {
|
||||
return res.value
|
||||
}
|
||||
this.command = function (cb) {
|
||||
var self = this
|
||||
return this.api.execute(function (selector) {
|
||||
return document.querySelectorAll(selector).length
|
||||
}, [selector], function (res) {
|
||||
cb.call(self, res)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
require('babel-register')
|
||||
var config = require('../../config')
|
||||
|
||||
// http://nightwatchjs.org/gettingstarted#settings-file
|
||||
module.exports = {
|
||||
src_folders: ['test/e2e/specs'],
|
||||
output_folder: 'test/e2e/reports',
|
||||
custom_assertions_path: ['test/e2e/custom-assertions'],
|
||||
|
||||
selenium: {
|
||||
start_process: true,
|
||||
server_path: require('selenium-server').path,
|
||||
host: '127.0.0.1',
|
||||
port: 4444,
|
||||
cli_args: {
|
||||
'webdriver.chrome.driver': require('chromedriver').path
|
||||
}
|
||||
},
|
||||
|
||||
test_settings: {
|
||||
default: {
|
||||
selenium_port: 4444,
|
||||
selenium_host: 'localhost',
|
||||
silent: true,
|
||||
globals: {
|
||||
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
|
||||
}
|
||||
},
|
||||
|
||||
chrome: {
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome',
|
||||
javascriptEnabled: true,
|
||||
acceptSslCerts: true
|
||||
}
|
||||
},
|
||||
|
||||
firefox: {
|
||||
desiredCapabilities: {
|
||||
browserName: 'firefox',
|
||||
javascriptEnabled: true,
|
||||
acceptSslCerts: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// 1. start the dev server using production config
|
||||
process.env.NODE_ENV = 'testing'
|
||||
var server = require('../../build/dev-server.js')
|
||||
|
||||
server.ready.then(() => {
|
||||
// 2. run the nightwatch test suite against it
|
||||
// to run in additional browsers:
|
||||
// 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
|
||||
// 2. add it to the --env flag below
|
||||
// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
|
||||
// For more information on Nightwatch's config file, see
|
||||
// http://nightwatchjs.org/guide#settings-file
|
||||
var opts = process.argv.slice(2)
|
||||
if (opts.indexOf('--config') === -1) {
|
||||
opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
|
||||
}
|
||||
if (opts.indexOf('--env') === -1) {
|
||||
opts = opts.concat(['--env', 'chrome'])
|
||||
}
|
||||
|
||||
var spawn = require('cross-spawn')
|
||||
var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
|
||||
|
||||
runner.on('exit', function (code) {
|
||||
server.close()
|
||||
process.exit(code)
|
||||
})
|
||||
|
||||
runner.on('error', function (err) {
|
||||
server.close()
|
||||
throw err
|
||||
})
|
||||
})
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// For authoring Nightwatch tests, see
|
||||
// http://nightwatchjs.org/guide#usage
|
||||
|
||||
module.exports = {
|
||||
'default e2e tests': function (browser) {
|
||||
// automatically uses dev Server port from /config.index.js
|
||||
// default: http://localhost:8080
|
||||
// see nightwatch.conf.js
|
||||
const devServer = browser.globals.devServerURL
|
||||
|
||||
browser
|
||||
.url(devServer)
|
||||
.waitForElementVisible('#app', 5000)
|
||||
.assert.elementPresent('#hello')
|
||||
.assert.containsText('p', 'tildetv is a new way to enjoy media on the internet.')
|
||||
.assert.elementCount('h1', 1)
|
||||
.useXpath()
|
||||
.click("//a[contains(text(), 'playlist')]")
|
||||
.useCss()
|
||||
.pause(1000)
|
||||
.assert.elementPresent('#videos')
|
||||
.useXpath()
|
||||
.click("//a[text()='add videos']")
|
||||
.useCss()
|
||||
.pause(1000)
|
||||
.assert.elementPresent('#howto')
|
||||
.assert.containsText('#howto', 'adding stuff to tildetv')
|
||||
.end()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"env": {
|
||||
"mocha": true
|
||||
},
|
||||
"globals": {
|
||||
"expect": true,
|
||||
"sinon": true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// require all test files (files that ends with .spec.js)
|
||||
const testsContext = require.context('./specs', true, /\.spec$/)
|
||||
testsContext.keys().forEach(testsContext)
|
||||
|
||||
// require all src files except main.js for coverage.
|
||||
// you can also change this to match only the subset of files that
|
||||
// you want coverage for.
|
||||
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
|
||||
srcContext.keys().forEach(srcContext)
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// This is a karma config file. For more details see
|
||||
// http://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
// we are also using it with karma-webpack
|
||||
// https://github.com/webpack/karma-webpack
|
||||
|
||||
var webpackConfig = require('../../build/webpack.test.conf')
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
// to run in additional browsers:
|
||||
// 1. install corresponding karma launcher
|
||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||
// 2. add it to the `browsers` array below.
|
||||
browsers: ['PhantomJS'],
|
||||
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
'./index.js': ['webpack', 'sourcemap']
|
||||
},
|
||||
webpack: webpackConfig,
|
||||
webpackMiddleware: {
|
||||
noInfo: true
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: './coverage',
|
||||
reporters: [
|
||||
{ type: 'lcov', subdir: '.' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Hello from '@/components/Hello'
|
||||
|
||||
function getRenderedText (Component, propsData) {
|
||||
const Constructor = Vue.extend(Component)
|
||||
const vm = new Constructor({ propsData }).$mount()
|
||||
return vm.$el.textContent
|
||||
}
|
||||
|
||||
describe('Hello.vue', () => {
|
||||
it('should render correct contents', () => {
|
||||
expect(getRenderedText(Hello, {})).to.contain('tildetv is a new way to enjoy media on the internet.')
|
||||
})
|
||||
})
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
import Video from '@/components/Video'
|
||||
|
||||
function getRenderedText (Component, propsData) {
|
||||
const Constructor = Vue.extend(Component)
|
||||
const vm = new Constructor({ propsData }).$mount()
|
||||
return vm.$el.textContent
|
||||
}
|
||||
|
||||
describe('Video.vue', () => {
|
||||
it('renders correctly with different props', () => {
|
||||
expect(getRenderedText(Video, {
|
||||
contentWarnings: [],
|
||||
description: 'A must watch even if you don\'t like sports. Jon Bois from SB Nation uses some neat statistics to figure out if baseballer Barry Bonds would still do well, even without carrying a bat.',
|
||||
title: 'What if Barry Bonds had played without a baseball bat? | Chart Party',
|
||||
addedtime: 1492256083,
|
||||
tags: ['sports', 'statistics'],
|
||||
id: {
|
||||
v: 'JwMfT2cZGHg'
|
||||
},
|
||||
user: 'resir014'
|
||||
})).to.contain('What if Barry Bonds had played without a baseball bat? | Chart Party')
|
||||
|
||||
expect(getRenderedText(Video, {
|
||||
contentWarnings: [],
|
||||
description: 'A parody talk researching the turing-completeness of PowerPoint.',
|
||||
title: 'On The Turing Completeness of PowerPoint (SIGBOVIK)',
|
||||
addedtime: 1492414194,
|
||||
tags: [],
|
||||
id: {
|
||||
v: 'uNjxe8ShM-8'
|
||||
},
|
||||
user: 'resir014'
|
||||
})).to.contain('On The Turing Completeness of PowerPoint (SIGBOVIK)')
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue