Move to simpler plain-js frontend with bundled assets

Signed-off-by: Knut Ahlers <knut@ahlers.me>

.eslintrc.js

@@ -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: [
-    /*
+    'plugin:vue/recommended',
-     * https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    'eslint:recommended', // https://eslint.org/docs/rules/
-     * 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',
   ],
-  // 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'],
   },

.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"]
-  }
-}

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
+assets: frontend/bundle.css
-	docker run --rm -i \
+assets: frontend/bundle.js
-		-v "$(CURDIR):/src" \
-		-w "/src/src" \
-		node:12-alpine \
-		npm run build
 
-src/node_modules:
+frontend/bundle.css:
-	docker run --rm -i \
+	./ci/combine.sh $@ \
-		-v "$(CURDIR):/src" \
+		npm/bootstrap@4/dist/css/bootstrap.min.css \
-		-w "/src/src" \
+		npm/bootstrap-vue@2/dist/bootstrap-vue.min.css \
-		node:12-alpine \
+		npm/bootswatch@5/dist/darkly/bootstrap.min.css \
-		npm ci
+		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

ci/combine.sh

@@ -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/$*"

frontend/index.html

@@ -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>

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")

src/.eslintignore

@@ -1,2 +0,0 @@
-webpack.config.js
-.eslintrc.js

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>

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'),
-})

src/mime-rewrite.js

@@ -1,3 +0,0 @@
-export default {
-  'application/javascript': 'text/javascript',
-}

src/package.json

@@ -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"
-  }
-}

src/strings.js

@@ -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.',
-}

src/style.scss

@@ -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; }

src/webpack.config.js

@@ -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',
-      },
-
-    ]
-  }
-}