commit 468408fcf170be76d7c80ffc0d1af54ce12f15f1
parent 7a8c80b81ae71d10d3176b419e305b89bc22b150
Author: Vetle Haflan <vetle@haflan.dev>
Date: Wed, 2 Dec 2020 18:54:18 +0100
Merge branch 'master' of gl.haflan.dev:general/experiments
Diffstat:
9 files changed, 319 insertions(+), 1 deletion(-)
diff --git a/vue-template/vue-cli/dockerdev.sh b/vue-template/vue-cli/dockerdev.sh
@@ -8,5 +8,8 @@ if [ "$1" == "serve" ]; then
port=8080
fi
port_arg="-p $port:8080"
+ docker run -it -p $port:8080 -u $UID -v $PWD:/vue -w /vue node:alpine npm run serve
fi
-docker run -it $port_arg -u $UID -v $PWD:/vue -w /vue node:alpine npm run serve
+
+docker run -it -p $PORT:8080 -u $UID -v $PWD:/vue -w /vue node:alpine \
+ npm run build-dev
diff --git a/vuejs/adoc-editor.html b/vuejs/adoc-editor.html
@@ -0,0 +1,131 @@
+<html>
+ <head>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+ <script src="https://unpkg.com/vue-router@2.0.0"></script>
+ <!-- include asciidcotor.js-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.6/asciidoctor.min.js"></script>
+ <!-- include mathjax.js-->
+ <script type="text/x-mathjax-config">
+MathJax.Hub.Config({
+ extensions: ["tex2jax.js"],
+ jax: ["input/TeX", "output/HTML-CSS"],
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+ processEscapes: true
+ },
+ "HTML-CSS": { fonts: ["TeX"] }
+ });
+ </script>
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js' async></script>
+ </script>
+ <style>
+ textarea {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border: 0;
+ /*outline: none;*/
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id="app">
+ <button @click="editing = !editing">{{ editing ? "View" : "Edit" }}</button>
+ <span v-show="editing">
+ <button @click="addBold"><b>b</b></button>
+ <button @click="addItalics"><i>i</i></button>
+ ...more tools here
+ </span>
+ <hr>
+ <textarea v-show="editing" v-model="adocSource" ref="ta"></textarea>
+ <div v-show="!editing" v-html="adocRendered"></div>
+ </div>
+
+ <script type="text/javascript">
+ var app = new Vue({
+ el: "#app",
+ data: {
+ asciidoctor: null,
+ adocSource: "",
+ adocRendered: "",
+ editing: true
+ },
+ watch: {
+ editing(on) {
+ if (!on) {
+ this.render();
+ }
+ },
+ adocRendered() {
+ // TODO: This doesn't work now with the Vueified version for some reason
+ MathJax.Hub.Config({
+ extensions: ["tex2jax.js"],
+ jax: ["input/TeX", "output/HTML-CSS"],
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+ processEscapes: true
+ },
+ "HTML-CSS": { fonts: ["TeX"] }
+ });
+ MathJax.Hub.Typeset();
+ // Thanks: https://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html
+ }
+ },
+ methods: {
+ render() {
+ this.adocRendered = Asciidoctor().convert(this.adocSource,{safe: 'safe'});
+ },
+ addBold() {
+ this.wrapSelection("*");
+ },
+ addItalics() {
+ this.wrapSelection("_");
+ },
+ /**
+ * wrap text between start and end index in the given symbol
+ */
+ wrapSelection(symbol) {
+ let selStart = this.$refs.ta.selectionStart-1;
+ let selEnd = this.$refs.ta.selectionEnd-1;
+ if (selStart === this.adocSource.length-1) {
+ this.adocSource += symbol + symbol;
+ // TODO: Set selectionStart between the two stars
+ return;
+ }
+ let pre = this.adocSource.substr(0, selStart+1);
+ let selected = this.adocSource.substr(selStart+1, selEnd-selStart)
+ let post = this.adocSource.substr(selEnd+1);
+ this.adocSource = pre + symbol + selected + symbol + post;
+ }
+ }
+ });
+ /*
+ function render() {
+ let content = document.getElementById('source').value;
+ console.log(content);
+ const html = asciidoctor.convert(content,{safe: 'safe'});
+ document.getElementById('target').innerHTML = html;
+ }
+ function update() {
+ render();
+ MathJax.Hub.Config({
+ extensions: ["tex2jax.js"],
+ jax: ["input/TeX", "output/HTML-CSS"],
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+ processEscapes: true
+ },
+ "HTML-CSS": { fonts: ["TeX"] }
+ });
+ MathJax.Hub.Typeset();
+ // Thanks: https://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html
+ }
+ render();
+ */
+ </script>
+ </body>
+</html>
diff --git a/vuejs/adoc-editor/dockerdev.sh b/vuejs/adoc-editor/dockerdev.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Start qumpwebdev container (assuming that qumpweb is a submodule)
+
+DOCKERCMD="docker run -it -v $PWD:/vue -w /vue node:alpine /bin/sh -c "
+
+if [ ! -d "node_modules" ]; then
+ $DOCKERCMD "npm install; npm run build-dev"
+else
+ $DOCKERCMD "npm run build-dev"
+fi
+
diff --git a/vuejs/adoc-editor/index.html b/vuejs/adoc-editor/index.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+ <title>Asciidoc Editor</title>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" async></script>
+ <script type="text/x-mathjax-config">
+ MathJax.Hub.Config({
+ extensions: ["tex2jax.js"],
+ jax: ["input/TeX", "output/HTML-CSS"],
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+ processEscapes: true
+ },
+ "HTML-CSS": { fonts: ["TeX"] }
+ });
+ </script>
+</head>
+<body>
+ <div id="app"></div>
+ <script src="dist/app.js"></script>
+</body>
+</html>
diff --git a/vuejs/adoc-editor/package.json b/vuejs/adoc-editor/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "vue-app",
+ "version": "1.0.0",
+ "scripts": {
+ "clean": "rimraf ./dist/",
+ "build": "npm run clean && webpack --config webpack.config.js --mode production",
+ "build-dev": "npm run clean && webpack --config webpack.config.js --mode development --watch"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "vue": "^2.6.10",
+ "mathjax": "^3.1.2",
+ "asciidoctor": "^2.2.0",
+ "vue-loader": "^15.7.2",
+ "vue-template-compiler": "^2.6.10",
+ "@babel/core": "^7.7.5",
+ "@babel/preset-env": "^7.7.6",
+ "babel-loader": "^8.0.6",
+ "css-loader": "^3.3.0",
+ "rimraf": "^3.0.0",
+ "webpack": "^4.41.2",
+ "webpack-cli": "^3.3.10"
+ }
+}
diff --git a/vuejs/adoc-editor/src/App.vue b/vuejs/adoc-editor/src/App.vue
@@ -0,0 +1,63 @@
+<template>
+ <div>
+ <button @click="viewing = !viewing">{{ viewing ? "Edit" : "View" }}</button>
+ <span v-show="!viewing">
+ <button @click="addBold"><b>b</b></button>
+ <button @click="addItalics"><i>i</i></button>
+ ...more tools here
+ </span>
+ <hr>
+ <textarea v-if="!viewing" v-model="adocSource" ref="ta"></textarea>
+ <Viewer v-else :adocSource="adocSource"/>
+ </div>
+</template>
+
+
+<script>
+ import Viewer from "./Viewer.vue";
+ export default {
+ name: "App",
+ components: {Viewer},
+ data() {
+ return {
+ adocSource: "",
+ adocRendered: "",
+ viewing: false
+ }
+ },
+ methods: {
+ addBold() {
+ this.wrapSelection("*");
+ },
+ addItalics() {
+ this.wrapSelection("_");
+ },
+ /**
+ * wrap text between start and end index in the given symbol
+ */
+ wrapSelection(symbol) {
+ let selStart = this.$refs.ta.selectionStart-1;
+ let selEnd = this.$refs.ta.selectionEnd-1;
+ if (selStart === this.adocSource.length-1) {
+ this.adocSource += symbol + symbol;
+ // TODO: Set selectionStart between the two stars
+ return;
+ }
+ let pre = this.adocSource.substr(0, selStart+1);
+ let selected = this.adocSource.substr(selStart+1, selEnd-selStart)
+ let post = this.adocSource.substr(selEnd+1);
+ this.adocSource = pre + symbol + selected + symbol + post;
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ textarea {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border: 0;
+ /*outline: none;*/
+ }
+</style>
diff --git a/vuejs/adoc-editor/src/Viewer.vue b/vuejs/adoc-editor/src/Viewer.vue
@@ -0,0 +1,35 @@
+<template>
+ <div class="main-wrapper" v-html="adocRendered"></div>
+</template>
+
+
+<script>
+ const adoc = require("asciidoctor")();
+ export default {
+ name: "Viewer",
+ props: {
+ adocSource: String
+ },
+ data() {
+ return {
+ adocRendered: ""
+ }
+ },
+ mounted() {
+ this.adocRendered = adoc.convert(this.adocSource, {safe: 'safe'});
+ if (!window.MathJax) {
+ return;
+ }
+ this.$nextTick().then(() => {
+ window.MathJax.Hub.Typeset();
+ // Thanks:
+ // - https://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html
+ // - https://stackoverflow.com/questions/52636554/mathjax-vue-not-rerendering-equations
+ });
+ }
+ }
+</script>
+
+
+<style scoped>
+</style>
diff --git a/vuejs/adoc-editor/src/app.js b/vuejs/adoc-editor/src/app.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import App from "./App.vue";
+
+export const app = new Vue({
+ el: "#app",
+ render: h => h(App),
+});
diff --git a/vuejs/adoc-editor/webpack.config.js b/vuejs/adoc-editor/webpack.config.js
@@ -0,0 +1,21 @@
+const glob = require('glob');
+const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+module.exports = {
+ entry: "./src/app.js",
+ output: {
+ path: path.resolve(__dirname, "./dist/"),
+ filename: "app.js"
+ },
+ module: {
+ rules: [
+ {test: /\.js$/, use: 'babel-loader'},
+ {test: /\.vue$/, use: 'vue-loader'},
+ {test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
+ ]
+ },
+ plugins:[
+ new VueLoaderPlugin()
+ ]
+};
