Skip to content

Commit 33420a9

Browse files
thomasdeneckerthomasdenecker
committed
feat: Add man page
1 parent 915326d commit 33420a9

File tree

3 files changed

+139
-123
lines changed

3 files changed

+139
-123
lines changed

‎components/content/Awk.vue‎

Lines changed: 122 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,133 @@
11
<template>
2-
<p class="text-h6">File content</p>
3-
<p>
4-
<b
5-
><v-icon>mdi-information</v-icon> This content will be written to the file
6-
<code>data.txt</code></b
7-
>
8-
</p>
9-
<div style="max-height: 200px; overflow-y: auto">
10-
<div :id="idEditor" style="width: 100%; height: 200px">
11-
{{ text }}
12-
</div>
2+
<p class="text-h6">File content</p>
3+
<p>
4+
<b
5+
><v-icon>mdi-information</v-icon> This content will be written to the file
6+
<code>data.txt</code></b
7+
>
8+
</p>
9+
<div style="max-height: 200px; overflow-y: auto">
10+
<div :id="idEditor" style="width: 100%; height: 200px">
11+
{{ text }}
1312
</div>
14-
15-
<p class="text-h6">Command</p>
16-
<p>
17-
<b
18-
><v-icon>mdi-information</v-icon> The file name must always be
19-
<code>data.txt</code></b
20-
>
21-
</p>
22-
<v-dialog v-model="dialog" width="75%">
23-
<template v-slot:activator="{ props }">
24-
<v-btn color="primary" v-bind="props" size="small" class="mb-4">
25-
<v-icon>mdi-book</v-icon> Read man
26-
</v-btn>
27-
</template>
28-
29-
<v-card>
30-
<v-card-text style="height: 90vh">
31-
<iframe
32-
src="/man/gawk.html"
33-
frameborder="0"
34-
style="height: 100%; width: 100%"
35-
></iframe>
36-
</v-card-text>
37-
</v-card>
38-
</v-dialog>
39-
40-
<v-text-field
41-
v-model="commandInput"
42-
style="font-family: monospace, monospace !important"
43-
></v-text-field>
44-
<v-btn class="mt-4" @click="runTool">Run tool </v-btn>
45-
<p class="text-h6">Output</p>
46-
<pre :id="idOutput">Await run click...</pre>
47-
<v-card color="info">
48-
<v-card-text v-if="noResult">
49-
<v-icon>mdi-information</v-icon> No result
13+
</div>
14+
15+
<p class="text-h6">Command</p>
16+
<p>
17+
<b
18+
><v-icon>mdi-information</v-icon> The file name must always be
19+
<code>data.txt</code></b
20+
>
21+
</p>
22+
<v-dialog v-model="dialog" width="75%">
23+
<template v-slot:activator="{ props }">
24+
<v-btn color="primary" v-bind="props" size="small" class="mb-4">
25+
<v-icon>mdi-book</v-icon> Read man
26+
</v-btn>
27+
</template>
28+
29+
<v-card>
30+
<v-card-text style="height: 90vh">
31+
<iframe
32+
:src="manPage"
33+
frameborder="0"
34+
style="height: 100%; width: 100%"
35+
></iframe>
5036
</v-card-text>
5137
</v-card>
52-
</template>
38+
</v-dialog>
39+
40+
<v-text-field
41+
v-model="commandInput"
42+
style="font-family: monospace, monospace !important"
43+
></v-text-field>
44+
<v-btn class="mt-4" @click="runTool">Run tool </v-btn>
45+
<p class="text-h6">Output</p>
46+
<pre :id="idOutput">Await run click...</pre>
47+
<v-card color="info">
48+
<v-card-text v-if="noResult">
49+
<v-icon>mdi-information</v-icon> No result
50+
</v-card-text>
51+
</v-card>
52+
</template>
5353

5454
<script>
55-
import Aioli from "@biowasm/aioli";
56-
import ace from "ace-builds";
57-
58-
export default {
59-
props: {
60-
text: String,
61-
command: String,
62-
},
63-
setup(props) {
64-
var id = new Date().valueOf();
65-
var idEditor = "editorArea" + id;
66-
var idOutput = "output" + id;
67-
68-
const route = useRoute();
69-
let tool = route.params.tool;
70-
71-
return { idEditor, idOutput, tool };
72-
},
73-
data() {
74-
return {
75-
dialog: false,
76-
editor: null,
77-
commandInput: null,
78-
noResult: false,
55+
import Aioli from "@biowasm/aioli";
56+
import ace from "ace-builds";
57+
58+
export default {
59+
props: {
60+
text: String,
61+
command: String,
62+
},
63+
setup(props) {
64+
var id = new Date().valueOf();
65+
var idEditor = "editorArea" + id;
66+
var idOutput = "output" + id;
67+
68+
const route = useRoute();
69+
let tool = route.params.tool;
70+
71+
// Get man page
72+
const config = useRuntimeConfig();
73+
let repo_name = config.public.repo_name;
74+
let manPage = "/" + repo_name.split("/")[1] + "/man/" + tool + ".html";
75+
76+
return { idEditor, idOutput, tool, manPage };
77+
},
78+
data() {
79+
return {
80+
dialog: false,
81+
editor: null,
82+
commandInput: null,
83+
noResult: false,
84+
};
85+
},
86+
mounted() {
87+
this.commandInput = this.command;
88+
this.editor = ace.edit(this.idEditor, {
89+
tabSize: 4,
90+
// readOnly: this.readOnly,
91+
autoScrollEditorIntoView: true,
92+
maxLines: 50,
93+
minLines: 1,
94+
});
95+
},
96+
methods: {
97+
async runTool() {
98+
document.getElementById(this.idOutput).innerHTML = "Loading...";
99+
this.noResult = false;
100+
101+
const CLI = await new Aioli(["gawk/5.1.0"]);
102+
103+
// Create sample file
104+
var dataEditor = {
105+
name: "data.txt",
106+
data: this.editor.getValue(),
79107
};
108+
await CLI.mount(dataEditor);
109+
console.log(this.commandInput);
110+
111+
var temp = this.commandInput;
112+
temp = temp.replace(this.tool, "").trim();
113+
var params = this.parseFlags(temp)
114+
//.map((d) => d.replaceAll('"', ""))
115+
.map((d) => d.replaceAll("'", ""));
116+
console.log(params);
117+
const output = await CLI.exec("gawk", params);
118+
if (output == "") {
119+
this.noResult = true;
120+
}
121+
console.log(output);
122+
document.getElementById(this.idOutput).innerHTML = output;
80123
},
81-
mounted() {
82-
this.commandInput = this.command;
83-
this.editor = ace.edit(this.idEditor, {
84-
tabSize: 4,
85-
// readOnly: this.readOnly,
86-
autoScrollEditorIntoView: true,
87-
maxLines: 50,
88-
minLines: 1,
89-
});
90-
},
91-
methods: {
92-
async runTool() {
93-
document.getElementById(this.idOutput).innerHTML = "Loading...";
94-
this.noResult = false;
95-
96-
const CLI = await new Aioli(["gawk/5.1.0"]);
97-
98-
// Create sample file
99-
var dataEditor = {
100-
name: "data.txt",
101-
data: this.editor.getValue(),
102-
};
103-
await CLI.mount(dataEditor);
104-
console.log(this.commandInput);
105-
106-
var temp = this.commandInput;
107-
temp = temp.replace(this.tool, "").trim();
108-
var params = this.parseFlags(temp)
109-
//.map((d) => d.replaceAll('"', ""))
110-
.map((d) => d.replaceAll("'", ""));
111-
console.log(params);
112-
const output = await CLI.exec("gawk", params);
113-
if (output == "") {
114-
this.noResult = true;
115-
}
116-
console.log(output);
117-
document.getElementById(this.idOutput).innerHTML = output;
118-
},
119-
parseFlags(flags) {
120-
// Source: https://stackoverflow.com/a/16261693
121-
return flags.match(/(?:[^\s']+|'[^']*')+/g) || [];
122-
},
124+
parseFlags(flags) {
125+
// Source: https://stackoverflow.com/a/16261693
126+
return flags.match(/(?:[^\s']+|'[^']*')+/g) || [];
123127
},
124-
};
125-
</script>
128+
},
129+
};
130+
</script>
126131

127132
<style>
128-
</style>
133+
</style>

‎components/content/Grep.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
</p>
2222
<p>
2323
<b
24-
><v-icon>mdi-information</v-icon> Use simple quote for write a text argument.</b
24+
><v-icon>mdi-information</v-icon> Use simple quote for write a text
25+
argument.</b
2526
>
2627
</p>
2728
<v-dialog v-model="dialog" width="75%">
@@ -34,7 +35,7 @@
3435
<v-card>
3536
<v-card-text style="height: 90vh">
3637
<iframe
37-
src="/man/grep.html"
38+
:src="manPage"
3839
frameborder="0"
3940
style="height: 100%; width: 100%"
4041
></iframe>
@@ -69,11 +70,16 @@ export default {
6970
var id = new Date().valueOf();
7071
var idEditor = "editorArea" + id;
7172
var idOutput = "output" + id;
72-
73+
7374
const route = useRoute();
7475
let tool = route.params.tool;
7576
76-
return { idEditor, idOutput, tool };
77+
// Get man page
78+
const config = useRuntimeConfig();
79+
let repo_name = config.public.repo_name;
80+
let manPage = "/" + repo_name.split("/")[1] + "/man/" + tool + ".html";
81+
82+
return { idEditor, idOutput, tool, manPage };
7783
},
7884
data() {
7985
return {

‎components/content/Sed.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<v-card>
3535
<v-card-text style="height: 90vh">
3636
<iframe
37-
src="/man/sed.html"
37+
:src="manPage"
3838
frameborder="0"
3939
style="height: 100%; width: 100%"
4040
></iframe>
@@ -73,7 +73,12 @@ export default {
7373
const route = useRoute();
7474
let tool = route.params.tool;
7575
76-
return { idEditor, idOutput, tool };
76+
// Get man page
77+
const config = useRuntimeConfig();
78+
let repo_name = config.public.repo_name;
79+
let manPage = "/" + repo_name.split("/")[1] + "/man/" + tool + ".html";
80+
81+
return { idEditor, idOutput, tool, manPage };
7782
},
7883
data() {
7984
return {

0 commit comments

Comments
 (0)