Add frontend stub / initial setup of frontend

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

.eslintrc.js

@@ -0,0 +1,151 @@
+/*
+ * 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 = {
+  env: {
+    browser: true,
+    node: true,
+  },
+
+  extends: [
+    'plugin:vue/recommended',
+    'eslint:recommended', // https://eslint.org/docs/rules/
+  ],
+
+  globals: {
+    process: true,
+  },
+
+  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', { after: true, before: true }],
+    'block-spacing': ['error'],
+    'brace-style': ['error', '1tbs'],
+    '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'],
+    'eqeqeq': ['error', 'always', { null: 'ignore' }],
+    'func-call-spacing': ['error', 'never'],
+    'function-paren-newline': ['error', 'multiline'],
+    'generator-star-spacing': ['off'], // allow async-await
+    'implicit-arrow-linebreak': ['error'],
+    'indent': ['error', 2],
+    '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-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'],
+    'object-shorthand': ['error'],
+    'padded-blocks': ['error', 'never'],
+    'prefer-arrow-callback': ['error'],
+    'prefer-const': ['error'],
+    'prefer-object-spread': ['error'],
+    'prefer-rest-params': ['error'],
+    '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'],
+    'space-before-function-paren': ['error', 'never'],
+    'space-in-parens': ['error', 'never'],
+    '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'],
+  },
+}

.gitignore

@@ -1,4 +1,7 @@
 config.yaml
 .env
+frontend/app.css
+frontend/app.js
 go-latestver
 latestver.db
+node_modules

Makefile

@@ -0,0 +1,13 @@
+default: lint build
+
+build: node_modules
+	node ci/build.mjs
+
+lint: node_modules
+	./node_modules/.bin/eslint \
+		--ext .js,.vue \
+		--fix \
+		src
+
+node_modules:
+	npm ci

ci/build.mjs

@@ -0,0 +1,21 @@
+import vuePlugin from 'esbuild-vue'
+import esbuild from 'esbuild'
+
+esbuild.build({
+  bundle: true,
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'),
+  },
+  entryPoints: ['src/main.js'],
+  loader: {},
+  minify: true,
+  outfile: 'frontend/app.js',
+  plugins: [vuePlugin()],
+  target: [
+    'chrome87',
+    'edge87',
+    'es2020',
+    'firefox84',
+    'safari14',
+  ],
+})

frontend.go

@@ -0,0 +1,60 @@
+package main
+
+import (
+	"net/http"
+	"os"
+	"path"
+	"path/filepath"
+
+	"github.com/pkg/errors"
+)
+
+func handleSinglePage(w http.ResponseWriter, r *http.Request) {
+	// get the absolute path to prevent directory traversal
+	urlPath, err := filepath.Abs(r.URL.Path)
+	if err != nil {
+		// if we failed to get the absolute path respond with a 400 bad request
+		// and stop
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	for _, path := range []string{
+		filepath.Join("frontend", path.Base(urlPath)),
+		filepath.Join("frontend", "index.html"),
+	} {
+		f, err := frontendFS.Open(path)
+		switch {
+
+		case err == nil:
+			// file is opened, serve it
+			defer f.Close()
+
+			stat, err := f.Stat()
+			if err != nil {
+				http.Error(w, errors.Wrap(err, "stating opened file").Error(), http.StatusInternalServerError)
+				return
+			}
+
+			if stat.IsDir() {
+				continue
+			}
+
+			http.ServeContent(w, r, stat.Name(), stat.ModTime(), f)
+			return
+
+		case os.IsNotExist(err):
+			// file does not exist, try next
+			continue
+
+		default:
+			// if we got an error (that wasn't that the file doesn't exist) stating the
+			// file, return a 500 internal server error and stop
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+
+	// No path could be opened
+	http.NotFound(w, r)
+}

frontend/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Go-LatestVer</title>
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="app.css" rel="stylesheet">
+
+  <style>
+    [v-cloak] { display: none; }
+  </style>
+
+  <div id="app" v-cloak></div>
+
+  <script src="app.js"></script>
+
+</html>

frontend_dev.go

@@ -0,0 +1,7 @@
+//go:build dev
+
+package main
+
+import "net/http"
+
+var frontendFS http.FileSystem = http.Dir("./")

frontend_dist.go

@@ -0,0 +1,15 @@
+//go:build !dev
+
+package main
+
+import (
+	"embed"
+	"net/http"
+)
+
+var (
+	//go:embed frontend/**
+	embeddedFrontend embed.FS
+
+	frontendFS http.FileSystem = http.FS(embeddedFrontend)
+)

main.go

@@ -84,12 +84,13 @@ func main() {
 	router.HandleFunc("/v1/catalog/{name}/{tag}/version", handleCatalogGetVersion).Methods(http.MethodGet)
 	router.HandleFunc("/v1/log", handleLog).Methods(http.MethodGet)
 
-	router.HandleFunc("/", nil).Methods(http.MethodGet).Name("catalog")
-	router.HandleFunc("/{name}/{tag}", nil).Methods(http.MethodGet).Name("catalog-entry")
 	router.HandleFunc("/{name}/{tag}/log.rss", handleLogFeed).Methods(http.MethodGet).Name("catalog-entry-rss")
-	router.HandleFunc("/log", nil).Methods(http.MethodGet)
 	router.HandleFunc("/log.rss", handleLogFeed).Methods(http.MethodGet).Name("log-rss")
 
+	router.HandleFunc("/", handleSinglePage).Methods(http.MethodGet).Name("catalog")
+	router.HandleFunc("/{name}/{tag}", handleSinglePage).Methods(http.MethodGet).Name("catalog-entry")
+	router.PathPrefix("/").HandlerFunc(handleSinglePage)
+
 	var handler http.Handler = router
 	handler = httpHelper.GzipHandler(handler)
 	handler = httpHelper.NewHTTPLogHandler(handler)

package.json

@@ -0,0 +1,18 @@
+{
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "esbuild": "^0.8.43",
+    "esbuild-vue": "^0.4.0",
+    "eslint": "^7.19.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.21.2",
+    "bootswatch": "^4.6.0",
+    "moment": "^2.29.1",
+    "vue": "^2.6.14"
+  }
+}

src/main.js

@@ -0,0 +1,20 @@
+/* eslint-disable sort-imports */
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootswatch/dist/darkly/bootstrap.css'
+
+import Vue from 'vue'
+import { BootstrapVue } from 'bootstrap-vue'
+
+import App from './app.vue'
+
+Vue.config.devtools = process.env.NODE_ENV === 'dev'
+Vue.use(BootstrapVue)
+
+new Vue({
+  components: { App },
+  el: '#app',
+  name: 'GoLatestVer',
+  render: h => h(App),
+})