dfcf728e6f
by @akellbl4 * create infrastructure for site * wip * fix docker build and add readme * add docker-compose as a build and a run method * rename compose file yaml -> yml * add `src` as volume for watching changes * update configs * update README * add padding at the end of the pages * move demo settings in config * fetch latest release from github * update docs navigation - add sections - redirect from root of the section to first doc - nice styles for navigation - add brand colors * cache github data from first load * add redirects and fix link to docs * fix docs nav styles * add installation page placeholder * fix demo * add 404 * add dark theme, add theme switcher, remove unused files * fix dark theme on main page * fix dark theme background * fix node version * change installation docs * add note block * minor fixes * add code highlighting styles * fixes * fixes * mobile navigation, fix code highlighting colors * fix dev server * fix fetching error * fix path to edit Co-authored-by: Pavel Mineev <pavel@mineev.me> Co-authored-by: Dmitry Verkhoturov <paskal.07@gmail.com>
73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
---
|
|
title: SPA
|
|
---
|
|
|
|
## How to configure remark42 for Single Page Apps (SPA)
|
|
|
|
Originally tested on [Nuxt.js](https://nuxtjs.org/), but it should be applicable to all SPAs.
|
|
|
|
- Add the following JavaScript to your `index.html`, which in this case, it is identical to `<script defer src="$HOST/web/embed.js"></script>`
|
|
|
|
```js
|
|
;(function () {
|
|
var host = // Your remark42 host
|
|
var components = ['embed'] // Your choice of remark42 components
|
|
|
|
;(function(c) {
|
|
for (let i = 0; i < c.length; i++) {
|
|
const d = document
|
|
const s = d.createElement('script')
|
|
s.src = remark_config.host + '/web/' + c[i] + '.js'
|
|
s.defer = true
|
|
;(d.head || d.body).appendChild(s)
|
|
}
|
|
})(components)
|
|
})
|
|
```
|
|
|
|
- Created `remark42Instance` when the `div` containing remark42 has appear, usually at `mounted` or `componentDidMount` of the SPA lifecycle. Destroy the previous instance first, if neccessary.
|
|
|
|
```ts
|
|
initRemark42() {
|
|
if (window.REMARK42) {
|
|
if (this.remark42Instance) {
|
|
this.remark42Instance.destroy()
|
|
}
|
|
|
|
this.remark42Instance = window.REMARK42.createInstance({
|
|
node: this.$refs.remark42 as HTMLElement,
|
|
...remark42_config // See <https://github.com/patarapolw/remark42#setup-on-your-website>
|
|
})
|
|
}
|
|
}
|
|
|
|
mounted() {
|
|
if (window.REMARK42) {
|
|
this.initRemark42()
|
|
} else {
|
|
window.addEventListener('REMARK42::ready', () => {
|
|
this.initRemark42()
|
|
})
|
|
}
|
|
}
|
|
```
|
|
|
|
- Ensure that this is called every time route changes
|
|
|
|
```ts
|
|
@Watch('$route.path')
|
|
onRouteChange() {
|
|
this.initRemark42()
|
|
}
|
|
```
|
|
|
|
- And, destroyed before routeLeave
|
|
|
|
```ts
|
|
beforeRouteLeave() {
|
|
if (this.remark42Instance) {
|
|
this.remark42Instance.destroy()
|
|
}
|
|
}
|
|
```
|