https://github.com/radames/youtube-demonetized-words-study
Observable notebook import example on Nuxt.js / Vue.js application, generated as static page on github pages
https://github.com/radames/youtube-demonetized-words-study
data-visualization gh-pages nuxtjs observable-notebook observablehq static-site static-site-generator vuejs
Last synced: 4 months ago
JSON representation
Observable notebook import example on Nuxt.js / Vue.js application, generated as static page on github pages
- Host: GitHub
- URL: https://github.com/radames/youtube-demonetized-words-study
- Owner: radames
- Created: 2019-12-05T07:11:24.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2022-02-11T02:21:32.000Z (over 4 years ago)
- Last Synced: 2025-04-02T04:40:08.894Z (about 1 year ago)
- Topics: data-visualization, gh-pages, nuxtjs, observable-notebook, observablehq, static-site, static-site-generator, vuejs
- Language: JavaScript
- Homepage: http://radames.github.io/Youtube-Demonetized-Words-Study/
- Size: 1.17 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Youtube-Demonetized-Words-Study
This is an example of embeding an [Observable notebook](https://observablehq.com/@radames/youtube-demonetized-words-similarity-study) into a static [vuejs](https://vuejs.org/)/[nuxtjs](https://nuxtjs.org/) page.
The main trick here is to transpile the notebook ES module during build time. You have to edit you `nuxt.config.js` and add the following
```js
build: {
transpile: ['@radames/youtube-demonetized-words-similarity-study'],
extend(config, ctx) {
config.module.rules.push({
test: /\.js$/,
loader: require.resolve('@open-wc/webpack-import-meta-loader')
})
}
}
```
Don't forget you have to install your notebook and a custom webpack meta loader and observable runtime
```
npm install @observablehq/runtime
npm install @open-wc/webpack-import-meta-loader
npm install "https://api.observablehq.com/@radames/youtube-demonetized-words-similarity-study.tgz?v=3"
```
## Build Setup
``` bash
# install dependencies
$ npm run install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
```
## Initial setup up for gh-pages worktree branch
```
Checkout
$ git checkout --orphan gh-pages
$ git reset --hard
$ git commit --allow-empty -m "Init"
$ git checkout master
Make your worktree to your deploy folder
$ rm -rf _site
$ git worktree add _site gh-pages
```
## Deploy
```
$ npm run gh-pages
```