vue3-sphinx-xml 0.1.0-beta.2 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -33
- package/dist/Reference.js +13 -3
- package/dist/Reference.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,32 +1,35 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
|
-
#
|
|
3
|
+
# vue3-sphinx-xml
|
|
4
4
|
|
|
5
|
-
[ ](https://www.npmjs.com/package/vue3-sphinx-xml)
|
|
6
|
+
[](https://vuejs.org/)
|
|
7
7
|
|
|
8
|
-
Vue component for displaying
|
|
8
|
+
Vue component for displaying documentation from XML that has been generaterd by [Sphinx](https://www.sphinx-doc.org/).
|
|
9
9
|
|
|
10
10
|
## Project setup
|
|
11
11
|
|
|
12
12
|
```
|
|
13
|
-
npm install --save
|
|
13
|
+
npm install --save vue3-sphinx-xml
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
### Module import
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
vue3-sphinx-xml makes use of the vuex store to track data. You must use a vuex store for the component to work.
|
|
19
19
|
**⚠️ You need to install the module with the application like so:**
|
|
20
20
|
|
|
21
21
|
```javascript
|
|
22
|
-
import
|
|
22
|
+
import store from './store'
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
import { installVue3SphinxXml } from 'vue3-sphinx-xml'
|
|
25
|
+
import 'vue3-sphinx-xml/dist/style.css'
|
|
26
|
+
|
|
27
|
+
createApp(App).use(store).use(installVue3SphinxXml, { store }).mount('#app')
|
|
25
28
|
```
|
|
26
29
|
|
|
27
|
-
Add the above to your `main.js` application file before the line creating a `
|
|
30
|
+
Add the above to your `main.js` application file before the line creating a `createApp(App)` instance (this assumes that a standard layout is followed when creating your application).
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
vue3-sphinx-xml can make use of vue-highlightjs as an optional package.
|
|
30
33
|
vue-highlightjs adds code highlighting to any code blocks in the documentation. To make use of vue-highlightjs install the package:
|
|
31
34
|
|
|
32
35
|
```
|
|
@@ -36,13 +39,20 @@ npm install --save vue-highlightjs
|
|
|
36
39
|
and edit your `main.js` application file to have the following:
|
|
37
40
|
|
|
38
41
|
```javascript
|
|
39
|
-
import
|
|
42
|
+
import store from './store'
|
|
43
|
+
|
|
44
|
+
import { installVue3SphinxXml } from 'vue3-sphinx-xml'
|
|
45
|
+
import 'vue3-sphinx-xml/dist/style.css'
|
|
46
|
+
|
|
40
47
|
import VueHighlightJS from 'vue-highlightjs'
|
|
41
48
|
|
|
42
49
|
import 'highlight.js/styles/xcode.css'
|
|
43
50
|
|
|
44
|
-
|
|
45
|
-
|
|
51
|
+
createApp(App)
|
|
52
|
+
.use(store)
|
|
53
|
+
.use(installVue3SphinxXml, { store })
|
|
54
|
+
.use(VueHighlightJS)
|
|
55
|
+
.mount('#app')
|
|
46
56
|
```
|
|
47
57
|
|
|
48
58
|
The line `import 'highlight.js/styles/xcode.css'` is one of many styles available from highlightjs that may be imported.
|
|
@@ -50,26 +60,21 @@ See [highlightjs styles](https://highlightjs.org/static/demo/) for a comprehensi
|
|
|
50
60
|
|
|
51
61
|
### Module component
|
|
52
62
|
|
|
53
|
-
To use the
|
|
63
|
+
To use the vue3-sphinx-xml component import it in a view and set the `baseURL` for the source XML.
|
|
54
64
|
Example view `Documentation.vue`:
|
|
55
65
|
|
|
56
66
|
```javascript
|
|
57
67
|
<template>
|
|
58
68
|
<div class="documentation">
|
|
59
|
-
<sphinx-page baseURL="/sphinx-xml-files"
|
|
69
|
+
<sphinx-page :baseURL="/sphinx-xml-files"
|
|
70
|
+
/>
|
|
60
71
|
</div>
|
|
61
72
|
</template>
|
|
62
73
|
|
|
63
|
-
<script>
|
|
64
|
-
import { SphinxPage } from '
|
|
65
|
-
|
|
66
|
-
export default {
|
|
67
|
-
name: 'Documentation',
|
|
68
|
-
components: {
|
|
69
|
-
SphinxPage,
|
|
70
|
-
},
|
|
71
|
-
}
|
|
74
|
+
<script setup>
|
|
75
|
+
import { SphinxPage } from 'vue3-sphinx-xml'
|
|
72
76
|
</script>
|
|
77
|
+
|
|
73
78
|
```
|
|
74
79
|
|
|
75
80
|
#### SphinxPage API
|
|
@@ -86,16 +91,13 @@ export default {
|
|
|
86
91
|
|
|
87
92
|
### Module routing
|
|
88
93
|
|
|
89
|
-
|
|
94
|
+
vue3-sphinx-xml requires that you use vue-router. To add a vue3-sphinx-xml route under `documentation` add the following to `routes` object for vue-router:
|
|
90
95
|
|
|
91
96
|
```javascript
|
|
92
97
|
{
|
|
93
98
|
path: '/documentation/:pageName*',
|
|
94
99
|
name: 'Documentation',
|
|
95
|
-
|
|
96
|
-
// this generates a separate chunk (documentation.[hash].js) for this route
|
|
97
|
-
// which is lazy-loaded when the route is visited.
|
|
98
|
-
component: () => import(/* webpackChunkName: "documentation" */ '../views/Documentation.vue')
|
|
100
|
+
component: () => import('../views/Documentation.vue')
|
|
99
101
|
}
|
|
100
102
|
```
|
|
101
103
|
|
|
@@ -103,7 +105,7 @@ Again assuming standard layout.
|
|
|
103
105
|
|
|
104
106
|
### Module math
|
|
105
107
|
|
|
106
|
-
To render any math in the page
|
|
108
|
+
To render any math in the page vue3-sphinx-xml uses Katex.
|
|
107
109
|
Katex is not automatically loaded because it is a large package.
|
|
108
110
|
To render math with Katex you need to install the following packages:
|
|
109
111
|
|
|
@@ -125,8 +127,8 @@ Vue.use(VueKatex)
|
|
|
125
127
|
|
|
126
128
|
## Examples
|
|
127
129
|
|
|
128
|
-
For a complete example of a Vue application using
|
|
129
|
-
The **main** branch has a basic example of how
|
|
130
|
+
For a complete example of a Vue application using vue3-sphinx-xml look at https://github.com/hsorby/example-vue3-sphinx-xml.
|
|
131
|
+
The **main** branch has a basic example of how vue3-sphinx-xml may be used and the **multi_version** branch has an example of how vue3-sphinx-xml may be used for different versions of Sphinx XML output.
|
|
130
132
|
|
|
131
133
|
---
|
|
132
134
|
|
package/dist/Reference.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ref, toRefs, onMounted, resolveComponent, unref, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createElementBlock } from "vue";
|
|
1
|
+
import { ref, toRefs, onMounted, resolveComponent, unref, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, resolveDynamicComponent } from "vue";
|
|
2
2
|
import { useRoute } from "vue-router";
|
|
3
|
+
import { u as useChildren } from "./entry.js";
|
|
3
4
|
import { u as useMethods } from "./methods.js";
|
|
4
5
|
import { u as useBaseReference } from "./basereference.js";
|
|
5
|
-
import "./entry.js";
|
|
6
6
|
import "@hsorby/vue3-katex";
|
|
7
7
|
import "katex/dist/katex.min.css";
|
|
8
8
|
import "vuex";
|
|
@@ -27,6 +27,7 @@ const _sfc_main = {
|
|
|
27
27
|
const { isInternalReference } = useMethods();
|
|
28
28
|
const { onReferenceCreated } = useBaseReference(node.value, route, routeDescription);
|
|
29
29
|
onMounted(onReferenceCreated);
|
|
30
|
+
const { children } = useChildren(node);
|
|
30
31
|
return (_ctx, _cache) => {
|
|
31
32
|
const _component_router_link = resolveComponent("router-link");
|
|
32
33
|
return unref(isInternalReference)(unref(node)) ? (openBlock(), createBlock(_component_router_link, {
|
|
@@ -41,7 +42,16 @@ const _sfc_main = {
|
|
|
41
42
|
key: 1,
|
|
42
43
|
href: unref(node).getAttribute("refuri"),
|
|
43
44
|
target: "_blank"
|
|
44
|
-
},
|
|
45
|
+
}, [
|
|
46
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (c, index) => {
|
|
47
|
+
return openBlock(), createBlock(resolveDynamicComponent(c.component), {
|
|
48
|
+
key: "sub_link_" + index,
|
|
49
|
+
node: c.node,
|
|
50
|
+
componentName: c.name,
|
|
51
|
+
properties: c.properties
|
|
52
|
+
}, null, 8, ["node", "componentName", "properties"]);
|
|
53
|
+
}), 128))
|
|
54
|
+
], 8, _hoisted_1));
|
|
45
55
|
};
|
|
46
56
|
}
|
|
47
57
|
};
|
package/dist/Reference.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reference.js","sources":["../src/components/templates/Reference.vue"],"sourcesContent":["<template>\n <router-link v-if=\"isInternalReference(node)\" :to=\"routeDescription\">\n {{ node.textContent }}\n </router-link>\n <a v-else :href=\"node.getAttribute('refuri')\" target=\"_blank\">\n
|
|
1
|
+
{"version":3,"file":"Reference.js","sources":["../src/components/templates/Reference.vue"],"sourcesContent":["<template>\n <router-link v-if=\"isInternalReference(node)\" :to=\"routeDescription\">\n {{ node.textContent }}\n </router-link>\n <a v-else :href=\"node.getAttribute('refuri')\" target=\"_blank\">\n <component\n v-for=\"(c, index) in children\"\n :key=\"'sub_link_' + index\"\n :is=\"c.component\"\n :node=\"c.node\"\n :componentName=\"c.name\"\n :properties=\"c.properties\"\n />\n </a>\n</template>\n\n<script setup>\nimport { onMounted, toRefs, ref } from 'vue'\nimport { useRoute } from 'vue-router'\n\nimport { useChildren } from '../../composables/computed'\nimport { useMethods } from '../../composables/methods'\nimport { useBaseReference } from '../../composables/basereference'\n\nconst props = defineProps({\n node: {\n type: undefined,\n default: null,\n },\n componentName: {\n type: String,\n },\n})\n\nconst routeDescription = ref({ path: '', hash: '' })\nconst { node } = toRefs(props)\nconst route = useRoute()\n\nconst { isInternalReference } = useMethods()\nconst { onReferenceCreated } = useBaseReference(\n node.value,\n route,\n routeDescription,\n)\n\nonMounted(onReferenceCreated)\nconst { children } = useChildren(node)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,UAAM,mBAAmB,IAAI,EAAE,MAAM,IAAI,MAAM,IAAI;AACnD,UAAM,EAAE,SAAS,OAAO,KAAK;AAC7B,UAAM,QAAQ,SAAU;AAExB,UAAM,EAAE,wBAAwB,WAAY;AAC5C,UAAM,EAAE,uBAAuB,iBAC7B,KAAK,OACL,OACA,gBACF;AAEA,cAAU,kBAAkB;AAC5B,UAAM,EAAE,aAAa,YAAY,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|