mirror of
https://github.com/Luzifer/share.git
synced 2024-12-20 10:31:16 +00:00
Move to simpler plain-js frontend with bundled assets
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
9c391d97d8
commit
1d41c80916
18 changed files with 1529 additions and 8214 deletions
|
@ -1,42 +1,76 @@
|
|||
// https://eslint.org/docs/user-guide/configuring
|
||||
/*
|
||||
* Hack to automatically load globally installed eslint modules
|
||||
* on Archlinux systems placed in /usr/lib/node_modules
|
||||
*
|
||||
* Source: https://github.com/eslint/eslint/issues/11914#issuecomment-569108633
|
||||
*/
|
||||
|
||||
const Module = require('module')
|
||||
|
||||
const hacks = [
|
||||
'babel-eslint',
|
||||
'eslint-plugin-vue',
|
||||
]
|
||||
|
||||
const ModuleFindPath = Module._findPath
|
||||
Module._findPath = (request, paths, isMain) => {
|
||||
const r = ModuleFindPath(request, paths, isMain)
|
||||
if (!r && hacks.includes(request)) {
|
||||
return require.resolve(`/usr/lib/node_modules/${request}`)
|
||||
}
|
||||
return r
|
||||
}
|
||||
|
||||
/*
|
||||
* ESLint configuration derived as differences from eslint:recommended
|
||||
* with changes I found useful to ensure code quality and equal formatting
|
||||
* https://eslint.org/docs/user-guide/configuring
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
|
||||
extends: [
|
||||
/*
|
||||
* https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
* consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
*/
|
||||
'plugin:vue/strongly-recommended',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'eslint:recommended',
|
||||
'plugin:vue/recommended',
|
||||
'eslint:recommended', // https://eslint.org/docs/rules/
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: ['vue'],
|
||||
|
||||
globals: {
|
||||
axios: true,
|
||||
process: true,
|
||||
Vue: true,
|
||||
},
|
||||
// add your custom rules here
|
||||
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// required to lint *.vue files
|
||||
'vue',
|
||||
],
|
||||
|
||||
reportUnusedDisableDirectives: true,
|
||||
|
||||
root: true,
|
||||
|
||||
rules: {
|
||||
'array-bracket-newline': ['error', { multiline: true }],
|
||||
'array-bracket-spacing': ['error'],
|
||||
'arrow-body-style': ['error', 'as-needed'],
|
||||
'arrow-parens': ['error', 'as-needed'],
|
||||
'arrow-spacing': ['error', { before: true, after: true }],
|
||||
'arrow-spacing': ['error', { after: true, before: true }],
|
||||
'block-spacing': ['error'],
|
||||
'brace-style': ['error', '1tbs'],
|
||||
'comma-dangle': ['error', 'always-multiline'], // Apply Contentflow rules
|
||||
'camelcase': ['error'],
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
'comma-spacing': ['error'],
|
||||
'comma-style': ['error', 'last'],
|
||||
'curly': ['error'],
|
||||
'default-case-last': ['error'],
|
||||
'default-param-last': ['error'],
|
||||
'dot-location': ['error', 'property'],
|
||||
'dot-notation': ['error'],
|
||||
'eol-last': ['error', 'always'],
|
||||
|
@ -46,25 +80,34 @@ module.exports = {
|
|||
'generator-star-spacing': ['off'], // allow async-await
|
||||
'implicit-arrow-linebreak': ['error'],
|
||||
'indent': ['error', 2],
|
||||
'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
|
||||
'key-spacing': ['error', { afterColon: true, beforeColon: false, mode: 'strict' }],
|
||||
'keyword-spacing': ['error'],
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
'lines-between-class-members': ['error'],
|
||||
'multiline-comment-style': ['warn'],
|
||||
'newline-per-chained-call': ['error'],
|
||||
'no-alert': ['error'],
|
||||
'no-console': ['off'],
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
|
||||
'no-duplicate-imports': ['error'],
|
||||
'no-else-return': ['error'],
|
||||
'no-empty-function': ['error'],
|
||||
'no-extra-parens': ['error'],
|
||||
'no-implicit-coercion': ['error'],
|
||||
'no-lonely-if': ['error'],
|
||||
'no-multiple-empty-lines': ['warn', { max: 2, maxEOF: 0, maxBOF: 0 }],
|
||||
'no-multi-spaces': ['error'],
|
||||
'no-multiple-empty-lines': ['warn', { max: 2, maxBOF: 0, maxEOF: 0 }],
|
||||
'no-promise-executor-return': ['error'],
|
||||
'no-return-assign': ['error'],
|
||||
'no-script-url': ['error'],
|
||||
'no-template-curly-in-string': ['error'],
|
||||
'no-trailing-spaces': ['error'],
|
||||
'no-unneeded-ternary': ['error'],
|
||||
'no-unreachable-loop': ['error'],
|
||||
'no-unsafe-optional-chaining': ['error'],
|
||||
'no-useless-return': ['error'],
|
||||
'no-var': ['error'],
|
||||
'no-warning-comments': ['error'],
|
||||
'no-whitespace-before-property': ['error'],
|
||||
'object-curly-newline': ['error', { consistent: true }],
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
|
@ -77,18 +120,31 @@ module.exports = {
|
|||
'prefer-template': ['error'],
|
||||
'quote-props': ['error', 'consistent-as-needed', { keywords: false }],
|
||||
'quotes': ['error', 'single', { allowTemplateLiterals: true }],
|
||||
'require-atomic-updates': ['error'],
|
||||
'require-await': ['error'],
|
||||
'semi': ['error', 'never'],
|
||||
'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: false, ignoreMemberSort: false }],
|
||||
'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
|
||||
'space-before-blocks': ['error', 'always'],
|
||||
'spaced-comment': ['warn', 'always'],
|
||||
'space-before-function-paren': ['error', 'never'],
|
||||
'space-infix-ops': ['error'],
|
||||
'space-in-parens': ['error', 'never'],
|
||||
'space-unary-ops': ['error', { words: true, nonwords: false }],
|
||||
'space-infix-ops': ['error'],
|
||||
'space-unary-ops': ['error', { nonwords: false, words: true }],
|
||||
'spaced-comment': ['warn', 'always'],
|
||||
'switch-colon-spacing': ['error'],
|
||||
'template-curly-spacing': ['error', 'never'],
|
||||
'unicode-bom': ['error', 'never'],
|
||||
'vue/new-line-between-multi-line-property': ['error'],
|
||||
'vue/no-empty-component-block': ['error'],
|
||||
'vue/no-reserved-component-names': ['error'],
|
||||
'vue/no-template-target-blank': ['error'],
|
||||
'vue/no-unused-properties': ['error'],
|
||||
'vue/no-unused-refs': ['error'],
|
||||
'vue/no-useless-mustaches': ['error'],
|
||||
'vue/order-in-components': ['off'], // Collides with sort-keys
|
||||
'vue/require-name-property': ['error'],
|
||||
'vue/v-for-delimiter-style': ['error'],
|
||||
'vue/v-on-function-call': ['error'],
|
||||
'wrap-iife': ['error'],
|
||||
'yoda': ['error'],
|
||||
},
|
198
.eslintrc.json
198
.eslintrc.json
|
@ -1,198 +0,0 @@
|
|||
{
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true,
|
||||
"jsx": true
|
||||
},
|
||||
"sourceType": "module"
|
||||
},
|
||||
|
||||
"env": {
|
||||
"es6": true,
|
||||
"node": false
|
||||
},
|
||||
|
||||
"plugins": [
|
||||
"import",
|
||||
"node",
|
||||
"promise",
|
||||
"standard"
|
||||
],
|
||||
|
||||
"globals": {
|
||||
"document": false,
|
||||
"navigator": false,
|
||||
"window": false
|
||||
},
|
||||
|
||||
"rules": {
|
||||
"accessor-pairs": "error",
|
||||
"arrow-spacing": ["error", { "before": true, "after": true }],
|
||||
"block-spacing": ["error", "always"],
|
||||
"brace-style": ["error", "1tbs", { "allowSingleLine": true }],
|
||||
"camelcase": ["error", { "properties": "never" }],
|
||||
"comma-dangle": ["error", "always-multiline"],
|
||||
"comma-spacing": ["error", { "before": false, "after": true }],
|
||||
"comma-style": ["error", "last"],
|
||||
"constructor-super": "error",
|
||||
"curly": ["error", "multi-line"],
|
||||
"dot-location": ["error", "property"],
|
||||
"eol-last": "error",
|
||||
"eqeqeq": ["error", "always", { "null": "ignore" }],
|
||||
"func-call-spacing": ["error", "never"],
|
||||
"generator-star-spacing": ["error", { "before": true, "after": true }],
|
||||
"handle-callback-err": ["error", "^(err|error)$" ],
|
||||
"indent": ["error", 2, {
|
||||
"SwitchCase": 1,
|
||||
"VariableDeclarator": 1,
|
||||
"outerIIFEBody": 1,
|
||||
"MemberExpression": 1,
|
||||
"FunctionDeclaration": { "parameters": 1, "body": 1 },
|
||||
"FunctionExpression": { "parameters": 1, "body": 1 },
|
||||
"CallExpression": { "arguments": 1 },
|
||||
"ArrayExpression": 1,
|
||||
"ObjectExpression": 1,
|
||||
"ImportDeclaration": 1,
|
||||
"flatTernaryExpressions": false,
|
||||
"ignoreComments": false
|
||||
}],
|
||||
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
|
||||
"keyword-spacing": ["error", { "before": true, "after": true }],
|
||||
"new-cap": ["error", { "newIsCap": true, "capIsNew": false }],
|
||||
"new-parens": "error",
|
||||
"no-array-constructor": "error",
|
||||
"no-caller": "error",
|
||||
"no-class-assign": "error",
|
||||
"no-compare-neg-zero": "error",
|
||||
"no-cond-assign": "error",
|
||||
"no-const-assign": "error",
|
||||
"no-constant-condition": ["error", { "checkLoops": false }],
|
||||
"no-control-regex": "error",
|
||||
"no-debugger": "error",
|
||||
"no-delete-var": "error",
|
||||
"no-dupe-args": "error",
|
||||
"no-dupe-class-members": "error",
|
||||
"no-dupe-keys": "error",
|
||||
"no-duplicate-case": "error",
|
||||
"no-empty-character-class": "error",
|
||||
"no-empty-pattern": "error",
|
||||
"no-eval": "error",
|
||||
"no-ex-assign": "error",
|
||||
"no-extend-native": "error",
|
||||
"no-extra-bind": "error",
|
||||
"no-extra-boolean-cast": "error",
|
||||
"no-extra-parens": ["error", "functions"],
|
||||
"no-fallthrough": "error",
|
||||
"no-floating-decimal": "error",
|
||||
"no-func-assign": "error",
|
||||
"no-global-assign": "error",
|
||||
"no-implied-eval": "error",
|
||||
"no-inner-declarations": ["error", "functions"],
|
||||
"no-invalid-regexp": "error",
|
||||
"no-irregular-whitespace": "error",
|
||||
"no-iterator": "error",
|
||||
"no-label-var": "error",
|
||||
"no-labels": ["error", { "allowLoop": false, "allowSwitch": false }],
|
||||
"no-lone-blocks": "error",
|
||||
"no-mixed-operators": ["error", {
|
||||
"groups": [
|
||||
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
|
||||
["&&", "||"],
|
||||
["in", "instanceof"]
|
||||
],
|
||||
"allowSamePrecedence": true
|
||||
}],
|
||||
"no-mixed-spaces-and-tabs": "error",
|
||||
"no-multi-spaces": "error",
|
||||
"no-multi-str": "error",
|
||||
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
|
||||
"no-negated-in-lhs": "error",
|
||||
"no-new": "error",
|
||||
"no-new-func": "error",
|
||||
"no-new-object": "error",
|
||||
"no-new-require": "error",
|
||||
"no-new-symbol": "error",
|
||||
"no-new-wrappers": "error",
|
||||
"no-obj-calls": "error",
|
||||
"no-octal": "error",
|
||||
"no-octal-escape": "error",
|
||||
"no-path-concat": "error",
|
||||
"no-proto": "error",
|
||||
"no-redeclare": "error",
|
||||
"no-regex-spaces": "error",
|
||||
"no-return-assign": ["error", "except-parens"],
|
||||
"no-return-await": "error",
|
||||
"no-self-assign": "error",
|
||||
"no-self-compare": "error",
|
||||
"no-sequences": "error",
|
||||
"no-shadow-restricted-names": "error",
|
||||
"no-sparse-arrays": "error",
|
||||
"no-tabs": "error",
|
||||
"no-template-curly-in-string": "error",
|
||||
"no-this-before-super": "error",
|
||||
"no-throw-literal": "error",
|
||||
"no-trailing-spaces": "error",
|
||||
"no-undef": "error",
|
||||
"no-undef-init": "error",
|
||||
"no-unexpected-multiline": "error",
|
||||
"no-unmodified-loop-condition": "error",
|
||||
"no-unneeded-ternary": ["error", { "defaultAssignment": false }],
|
||||
"no-unreachable": "error",
|
||||
"no-unsafe-finally": "error",
|
||||
"no-unsafe-negation": "error",
|
||||
"no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true, "allowTaggedTemplates": true }],
|
||||
"no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }],
|
||||
"no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
|
||||
"no-useless-call": "error",
|
||||
"no-useless-computed-key": "error",
|
||||
"no-useless-constructor": "error",
|
||||
"no-useless-escape": "error",
|
||||
"no-useless-rename": "error",
|
||||
"no-useless-return": "error",
|
||||
"no-whitespace-before-property": "error",
|
||||
"no-with": "error",
|
||||
"object-property-newline": ["error", { "allowMultiplePropertiesPerLine": true }],
|
||||
"one-var": ["error", { "initialized": "never" }],
|
||||
"operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }],
|
||||
"padded-blocks": ["error", { "blocks": "never", "switches": "never", "classes": "never" }],
|
||||
"prefer-promise-reject-errors": "error",
|
||||
"quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
|
||||
"rest-spread-spacing": ["error", "never"],
|
||||
"semi": ["error", "always"],
|
||||
"semi-spacing": ["error", { "before": false, "after": true }],
|
||||
"space-before-blocks": ["error", "always"],
|
||||
"space-before-function-paren": ["error", "never"],
|
||||
"space-in-parens": ["error", "never"],
|
||||
"space-infix-ops": "error",
|
||||
"space-unary-ops": ["error", { "words": true, "nonwords": false }],
|
||||
"spaced-comment": ["error", "always", {
|
||||
"line": { "markers": ["*package", "!", "/", ",", "="] },
|
||||
"block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] }
|
||||
}],
|
||||
"symbol-description": "error",
|
||||
"template-curly-spacing": ["error", "never"],
|
||||
"template-tag-spacing": ["error", "never"],
|
||||
"unicode-bom": ["error", "never"],
|
||||
"use-isnan": "error",
|
||||
"valid-typeof": ["error", { "requireStringLiterals": true }],
|
||||
"wrap-iife": ["error", "any", { "functionPrototypeMethods": true }],
|
||||
"yield-star-spacing": ["error", "both"],
|
||||
"yoda": ["error", "never"],
|
||||
|
||||
"import/export": "error",
|
||||
"import/first": "error",
|
||||
"import/no-duplicates": "error",
|
||||
"import/no-webpack-loader-syntax": "error",
|
||||
|
||||
"node/no-deprecated-api": "error",
|
||||
"node/process-exit-as-throw": "error",
|
||||
|
||||
"promise/param-names": "error",
|
||||
|
||||
"standard/array-bracket-even-spacing": ["error", "either"],
|
||||
"standard/computed-property-even-spacing": ["error", "even"],
|
||||
"standard/no-callback-literal": "error",
|
||||
"standard/object-curly-even-spacing": ["error", "either"]
|
||||
}
|
||||
}
|
31
Makefile
31
Makefile
|
@ -5,21 +5,26 @@ lint:
|
|||
-v "$(CURDIR):/src" \
|
||||
-w "/src/src" \
|
||||
node:12-alpine \
|
||||
npx eslint --ext .js,.vue --fix .
|
||||
npx eslint --ext .js --fix frontend/app.js
|
||||
|
||||
webpack: src/node_modules
|
||||
docker run --rm -i \
|
||||
-v "$(CURDIR):/src" \
|
||||
-w "/src/src" \
|
||||
node:12-alpine \
|
||||
npm run build
|
||||
assets: frontend/bundle.css
|
||||
assets: frontend/bundle.js
|
||||
|
||||
src/node_modules:
|
||||
docker run --rm -i \
|
||||
-v "$(CURDIR):/src" \
|
||||
-w "/src/src" \
|
||||
node:12-alpine \
|
||||
npm ci
|
||||
frontend/bundle.css:
|
||||
./ci/combine.sh $@ \
|
||||
npm/bootstrap@4/dist/css/bootstrap.min.css \
|
||||
npm/bootstrap-vue@2/dist/bootstrap-vue.min.css \
|
||||
npm/bootswatch@5/dist/darkly/bootstrap.min.css \
|
||||
gh/highlightjs/cdn-release@11.2.0/build/styles/androidstudio.min.css
|
||||
|
||||
frontend/bundle.js:
|
||||
./ci/combine.sh $@ \
|
||||
npm/axios@0.21.1 \
|
||||
npm/vue@2 \
|
||||
npm/vue-i18n@8.25.0/dist/vue-i18n.min.js \
|
||||
npm/bootstrap-vue@2/dist/bootstrap-vue.min.js \
|
||||
npm/showdown@1 \
|
||||
gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js
|
||||
|
||||
publish:
|
||||
curl -sSLo golang.sh https://raw.githubusercontent.com/Luzifer/github-publish/master/golang.sh
|
||||
|
|
17
ci/combine.sh
Executable file
17
ci/combine.sh
Executable file
|
@ -0,0 +1,17 @@
|
|||
#!/bin/bash
|
||||
set -euo pipefail
|
||||
|
||||
outfile=${1:-}
|
||||
[[ -n $outfile ]] || {
|
||||
echo "Missing outfile parameter" >&2
|
||||
exit 1
|
||||
}
|
||||
shift
|
||||
|
||||
[ $# -gt 0 ] || {
|
||||
echo "Missing combine files" >&2
|
||||
exit 1
|
||||
}
|
||||
|
||||
IFS=$','
|
||||
exec curl -sSfLo "${outfile}" "https://cdn.jsdelivr.net/combine/$*"
|
173
frontend/app.js
173
frontend/app.js
File diff suppressed because one or more lines are too long
32
frontend/bundle.css
Normal file
32
frontend/bundle.css
Normal file
File diff suppressed because one or more lines are too long
1160
frontend/bundle.js
Normal file
1160
frontend/bundle.js
Normal file
File diff suppressed because one or more lines are too long
|
@ -6,15 +6,111 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.6/styles/androidstudio.min.css">
|
||||
<link rel="stylesheet" href="bundle.css">
|
||||
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
[v-cloak] { display: none; }
|
||||
audio { width: 80%; }
|
||||
</style>
|
||||
|
||||
<title>Share</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app" v-cloak>
|
||||
<b-navbar
|
||||
variant="primary"
|
||||
type="dark"
|
||||
>
|
||||
<b-navbar-brand href="#">
|
||||
<i class="fas fa-fw fa-share-alt-square mr-1"></i> Share
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
|
||||
<b-container class="mt-4">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card v-if="loading">
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-spinner fa-pulse"></i></h2>
|
||||
{{ $t('loading') }}
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<template v-else>
|
||||
<b-card
|
||||
v-if="error"
|
||||
bg-variant="danger"
|
||||
text-variant="white"
|
||||
>
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-exclamation-circle"></i></h2>
|
||||
{{ error }}
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('image/')">
|
||||
<b-card-text class="text-center">
|
||||
<a :href="path">
|
||||
<b-img
|
||||
:src="path"
|
||||
fluid
|
||||
/>
|
||||
</a>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('video/')">
|
||||
<b-embed
|
||||
type="video"
|
||||
:src="path"
|
||||
allowfullscreen
|
||||
controls
|
||||
/>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('audio/')">
|
||||
<b-card-text class="text-center">
|
||||
<audio
|
||||
:src="path"
|
||||
controls
|
||||
/>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card
|
||||
v-else-if="fileType.startsWith('text/markdown')"
|
||||
no-body
|
||||
>
|
||||
<b-card-body
|
||||
v-html="renderMarkdown(text)"
|
||||
/>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('text/')">
|
||||
<pre><code>{{ text }}</code></pre>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else>
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-cloud-download-alt"></i></h2>
|
||||
<b-button
|
||||
:href="path"
|
||||
variant="success"
|
||||
>
|
||||
{{ fileName }}
|
||||
</b-button>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
2
main.go
2
main.go
|
@ -113,7 +113,7 @@ func doCLIUpload() error {
|
|||
}
|
||||
|
||||
func doBootstrap() error {
|
||||
for _, asset := range []string{"index.html", "app.js"} {
|
||||
for _, asset := range []string{"index.html", "app.js", "bundle.css", "bundle.js"} {
|
||||
content, err := frontend.ReadFile(strings.Join([]string{"frontend", asset}, "/"))
|
||||
if err != nil {
|
||||
return errors.Wrap(err, "reading baked asset")
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
webpack.config.js
|
||||
.eslintrc.js
|
209
src/app.vue
209
src/app.vue
|
@ -1,209 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<b-navbar
|
||||
variant="primary"
|
||||
type="dark"
|
||||
>
|
||||
<b-navbar-brand href="#">
|
||||
<i class="fas fa-share-alt-square" /> Share
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
|
||||
<b-container class="mt-4">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card v-if="loading">
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-spinner fa-pulse" /></h2>
|
||||
{{ strings.loading }}
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<template v-else>
|
||||
<b-card
|
||||
v-if="error"
|
||||
bg-variant="danger"
|
||||
text-variant="white"
|
||||
>
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-exclamation-circle" /></h2>
|
||||
{{ error }}
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('image/')">
|
||||
<b-card-text class="text-center">
|
||||
<a :href="path">
|
||||
<b-img
|
||||
:src="path"
|
||||
fluid
|
||||
/>
|
||||
</a>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('video/')">
|
||||
<b-embed
|
||||
type="video"
|
||||
:src="path"
|
||||
allowfullscreen
|
||||
controls
|
||||
/>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('audio/')">
|
||||
<b-card-text class="text-center">
|
||||
<audio
|
||||
:src="path"
|
||||
controls
|
||||
/>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
|
||||
<b-card
|
||||
v-else-if="fileType.startsWith('text/markdown')"
|
||||
no-body
|
||||
>
|
||||
<b-card-body
|
||||
v-html="renderMarkdown(text)"
|
||||
/>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else-if="fileType.startsWith('text/')">
|
||||
<pre><code>{{ text }}</code></pre>
|
||||
</b-card>
|
||||
|
||||
<b-card v-else>
|
||||
<b-card-text class="text-center">
|
||||
<h2><i class="fas fa-cloud-download-alt" /></h2>
|
||||
<b-button
|
||||
:href="path"
|
||||
variant="success"
|
||||
>
|
||||
{{ fileName }}
|
||||
</b-button>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import hljs from 'highlight.js'
|
||||
import rewrites from './mime-rewrite.js'
|
||||
import showdown from 'showdown'
|
||||
import strings from './strings.js'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
strings() {
|
||||
return strings
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
error: null,
|
||||
fileName: '',
|
||||
fileType: null,
|
||||
loading: true,
|
||||
path: '',
|
||||
text: '',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
hashChange() {
|
||||
const hash = window.location.hash
|
||||
|
||||
if (hash.length > 0) {
|
||||
this.path = hash.substring(1)
|
||||
} else {
|
||||
this.error = strings.file_not_found
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
renderMarkdown(text) {
|
||||
return new showdown.Converter().makeHtml(text)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.onhashchange = this.hashChange
|
||||
this.hashChange()
|
||||
},
|
||||
|
||||
name: 'App',
|
||||
|
||||
watch: {
|
||||
fileType(v) {
|
||||
// Rewrite known file types not matching the expectations above
|
||||
if (rewrites[v]) {
|
||||
this.fileType = rewrites[v]
|
||||
return
|
||||
}
|
||||
|
||||
// Load text files directly and highlight them
|
||||
if (v.startsWith('text/')) {
|
||||
this.loading = true
|
||||
axios.get(this.path)
|
||||
.then(resp => {
|
||||
this.text = resp.data
|
||||
|
||||
if (this.text.length < 200 * 1024 && v !== 'text/plain') {
|
||||
// Only highlight up to 200k and not on text/plain
|
||||
window.setTimeout(() => hljs.initHighlighting(), 100)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => console.log(err))
|
||||
}
|
||||
},
|
||||
|
||||
path() {
|
||||
if (this.path.indexOf('://') >= 0) {
|
||||
// Strictly disallow loading files having any protocol in them
|
||||
this.error = strings.not_permitted
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
|
||||
axios.head(this.path)
|
||||
.then(resp => {
|
||||
let contentType = 'application/octet-stream'
|
||||
if (resp && resp.headers && resp.headers['content-type']) {
|
||||
contentType = resp.headers['content-type']
|
||||
}
|
||||
|
||||
this.loading = false
|
||||
this.fileType = contentType
|
||||
this.fileName = this.path.substring(this.path.lastIndexOf('/') + 1)
|
||||
})
|
||||
.catch(err => {
|
||||
switch (err.response.status) {
|
||||
case 403:
|
||||
this.error = strings.not_permitted
|
||||
break
|
||||
case 404:
|
||||
this.error = strings.file_not_found
|
||||
break
|
||||
default:
|
||||
this.error = `Something went wrong (Status ${err.response.status})`
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
audio {
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
15
src/main.js
15
src/main.js
|
@ -1,15 +0,0 @@
|
|||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import 'bootswatch/dist/darkly/bootstrap.css'
|
||||
|
||||
import App from './app.vue'
|
||||
import { BootstrapVue } from 'bootstrap-vue'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
new Vue({
|
||||
components: { App },
|
||||
el: '#app',
|
||||
render: c => c('App'),
|
||||
})
|
|
@ -1,3 +0,0 @@
|
|||
export default {
|
||||
'application/javascript': 'text/javascript',
|
||||
}
|
7589
src/package-lock.json
generated
7589
src/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,37 +0,0 @@
|
|||
{
|
||||
"author": "",
|
||||
"description": "",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^10.0.0",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"css-loader": "^1.0.1",
|
||||
"eslint": "^7.0.0",
|
||||
"eslint-plugin-vue": "^7.5.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"sass-loader": "^7.3.1",
|
||||
"style-loader": "^0.21.0",
|
||||
"vue-loader": "^15.9.3",
|
||||
"vue-template-compiler": "^2.6.12",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-middleware": "^1.4.0",
|
||||
"webpack-hot-middleware": "^2.25.0"
|
||||
},
|
||||
"license": "ISC",
|
||||
"name": "share",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack -p"
|
||||
},
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"bootstrap-vue": "^2.21.2",
|
||||
"bootswatch": "^4.6.0",
|
||||
"highlight.js": "^9.18.3",
|
||||
"showdown": "^1.9.1",
|
||||
"vue": "^2.6.12"
|
||||
}
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
file_not_found: 'The requested file has not been found.',
|
||||
loading: 'Loading file details...',
|
||||
not_permitted: 'Access to this file was denied.',
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
audio { width: 80%; }
|
||||
h1 { text-align: center; font-size: 75px; }
|
||||
h2 { text-align: center; font-size: 24px; }
|
||||
pre code { color: #e83e8c; }
|
||||
.container { margin-top: 30px; }
|
||||
.show-generic, .show-image, .show-video, .show-audio, .show-text, .show-error { display: none; }
|
|
@ -1,60 +0,0 @@
|
|||
const path = require('path')
|
||||
const webpack = require('webpack');
|
||||
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry: './main.js',
|
||||
output: {
|
||||
filename: 'app.js',
|
||||
path: path.resolve(__dirname, '..', 'frontend')
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.OccurrenceOrderPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('production')
|
||||
}
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
],
|
||||
optimization: {
|
||||
minimize: true
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
||||
{
|
||||
test: /\.(s?)css$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['env', { "targets": { "browsers": [">0.25%", "not ie 11", "not op_mini all"] } }]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue