diff --git a/.gitignore b/.gitignore
index 0745553..5857228 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
skouter
*.sw[poqa]
.env
+assets/app.js
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cf5c7f8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,6 @@
+
+
+### Bundling ###
+Uses ESbuild and the Vue node package.
+`sudo apt install esbuild; npm install vue;`
+``
diff --git a/app.tpl b/app.tpl
new file mode 100644
index 0000000..9afcd77
--- /dev/null
+++ b/app.tpl
@@ -0,0 +1,6 @@
+{{define "main"}}
+<main class='fade-in-2'>
+<div id="app"></div>
+</main>
+<script type="module" src="/assets/app.js" ></script>
+{{end}}
diff --git a/assets/image/icon/sheriff-hat-50.png b/assets/image/icon/sheriff-hat-50.png
new file mode 100644
index 0000000..9179413
Binary files /dev/null and b/assets/image/icon/sheriff-hat-50.png differ
diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 0000000..5ec6a2f
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,3 @@
+main {
+ background: blue;
+}
diff --git a/components/App.vue b/components/App.vue
new file mode 100644
index 0000000..3bce6e7
--- /dev/null
+++ b/components/App.vue
@@ -0,0 +1,6 @@
+<template>
+<div>hello world</div>
+</template>
+
+<script>
+</script>
diff --git a/home.tpl b/home.tpl
index 5628346..d4b17c4 100644
--- a/home.tpl
+++ b/home.tpl
@@ -1,3 +1,12 @@
+{{define "header"}}
+<header class="default fade-in">
+<nav>
+ <li></li>
+ <li></li>
+</nav>
+</header>
+{{end}}
+
{{define "main"}}
<main class='fade-in-2'>
</main>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..68b4a26
--- /dev/null
+++ b/main.js
@@ -0,0 +1,5 @@
+import {createApp} from "vue"
+import App from "./components/App.vue"
+import "./assets/main.css"
+
+createApp(App).mount("#app")
diff --git a/master.tpl b/master.tpl
index 9ac8f04..f977142 100644
--- a/master.tpl
+++ b/master.tpl
@@ -3,20 +3,14 @@
<meta charset='utf-8'>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="/assets/main.css">
<link rel="shortcut icon" type="image/svg+xml"
- href="/assets/image/icon/icon.svg" />
+ href="/assets/image/icon/sheriff-hat-50.png" />
<title>Skouter - {{.Title}}</title>
</head>
<body>
{{block "header" .}}
- <header class="default fade-in">
- <nav>
- <li></li>
- <li></li>
- </nav>
- </header>
{{end}}
{{template "main" .}}
diff --git a/skouter.go b/skouter.go
index cb3e4e4..fbfe7df 100644
--- a/skouter.go
+++ b/skouter.go
@@ -23,11 +23,13 @@ var (
var paths = map[string]string {
"home": "home.tpl",
"terms": "terms.tpl",
+ "app": "app.tpl",
}
var pages = map[string]Page {
"home": cache("home", "Home"),
"terms": cache("terms", "Terms and Conditions"),
+ "app": cache("app", "App"),
}
func cache(name string, title string) Page {
@@ -72,6 +74,10 @@ func route(w http.ResponseWriter, r *http.Request) {
page = pages[ "home" ]
case match(p, "/terms", &args):
page = pages[ "terms" ]
+ case match(p, "/app", &args):
+ page = pages[ "app" ]
+ case match(p, "/assets", &args):
+ page = pages[ "app" ]
default:
http.NotFound(w, r)
return
@@ -81,7 +87,9 @@ func route(w http.ResponseWriter, r *http.Request) {
}
func main() {
+ files := http.FileServer(http.Dir(""))
+
+ http.Handle("/assets/", files)
http.HandleFunc("/", route)
log.Fatal(http.ListenAndServe(address, nil))
}
-
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..f25ebd0
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,27 @@
+const { VueLoaderPlugin } = require('vue-loader')
+const path = require('path');
+
+module.exports = {
+ entry: './main.js',
+ output: {
+ path: path.resolve(__dirname, 'assets'),
+ filename: 'app.js'
+ },
+ module: {
+ rules: [
+ {test: /\.vue$/, use: 'vue-loader'},
+ {test: /\.css$/, use: 'css-loader'}
+ ]
+ },
+ devServer: {
+ static: './assets',
+ proxy: {
+ '*': {target: 'http://localhost:8001',
+ secure: false,
+ changeOrigin: true
+ }
+ }
+ },
+ // Required for also applying rules to sections of SFC
+ plugins: [new VueLoaderPlugin()],
+};