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: 15 days 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 (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-02-11T02:21:32.000Z (almost 3 years ago)
• Last Synced: 2024-12-18T01:15:08.439Z (18 days 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: 3
• 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

```