├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .github
    └── semantic.yml
├── .gitignore
├── README.md
├── components
    ├── Button
    │   ├── Button.vue
    │   └── index.js
    ├── Count
    │   ├── Count.vue
    │   └── index.js
    ├── LiveEditor
    │   ├── Layout.vue
    │   ├── LiveEditor.js
    │   └── index.js
    ├── Navbar
    │   ├── Navbar.vue
    │   └── index.js
    └── index.js
├── docs
    ├── documentation.mdx
    └── index.vue
├── jsconfig.json
├── layouts
    └── default.vue
├── nuxt.config.js
├── package.json
├── plugins
    └── live-editor.js
├── router.js
├── scss
    └── night-owl.css
├── static
    └── favicon.ico
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@vue/babel-preset-jsx"
4 |   ],
5 |   "plugins": []
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:nuxt/recommended'
13 |   ],
14 |   // add your custom rules here
15 |   rules: {
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.github/semantic.yml:
--------------------------------------------------------------------------------
1 | # Always validate the PR title AND all the commits
2 | titleAndCommits: true
3 | # Allows use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
4 | # this is only relevant when using commitsOnly: true (or titleAndCommits: true)
5 | allowMergeCommits: true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ⚡️ Nuxt + MDX Documentation
 2 | 
 3 | > Demo project using MDX for documentation
 4 | 
 5 | [**Netlify Demo**](https://nuxt-mdx.netlify.com)
 6 | 
 7 | ### Features
 8 | - SSR
 9 | - Markdown documentation
10 | - Live Code Editor
11 | 


--------------------------------------------------------------------------------
/components/Button/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="button" @click="(e) => $emit('click', e)">
 3 |     <slot />
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Button'
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | .button {
15 |   background: #1968ff;
16 |   color: #fff;
17 |   font-weight: 700;
18 |   border-radius: 3px;
19 |   outline: none;
20 |   border: none;
21 |   font-size: 1rem;
22 |   padding: .8rem 1rem;
23 |   margin: .5rem .8rem;
24 |   -webkit-transition: all .2s ease-in-out;
25 |   transition: all .2s ease-in-out;
26 | }
27 | 
28 | .button:focus {
29 |   box-shadow: 0 0 0 3px rgba(66,153,225,.6);
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/components/Button/index.js:
--------------------------------------------------------------------------------
1 | import Button from './Button'
2 | export default Button
3 | 


--------------------------------------------------------------------------------
/components/Count/Count.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <vuep :template="code" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   data () {
 8 |     return {
 9 |       /* eslint-disable */
10 |       code: `
11 | <template>
12 |   <div>
13 |     <h3>Count: {{ count }} </h3>
14 |     <button @click="increment">
15 |       Increase
16 |     </button>
17 |     <button @click="decrement">
18 |       Decrease
19 |     </button>
20 |   </div>
21 | </template>
22 | <script>
23 |   export default {
24 |     name: 'Count',
25 |     data () {
26 |       return {
27 |         count: 0
28 |       }
29 |     },
30 |     methods: {
31 |       increment () {
32 |         this.count++
33 |       },
34 |       decrement () {
35 |         this.count--
36 |       }
37 |     }
38 |   }
39 | <\/script>
40 |       `
41 |     }
42 |   }
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/components/Count/index.js:
--------------------------------------------------------------------------------
1 | import Count from './Count'
2 | export default Count
3 | 


--------------------------------------------------------------------------------
/components/LiveEditor/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template functional>
 2 |   <div class="preview-code">
 3 |     <div class="preview-panel">
 4 |       <slot name="preview" />
 5 |     </div>
 6 |     <div class="editor-panel">
 7 |       <slot name="editor" />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <style>
13 | .preview-code {
14 |   display: flex;
15 |   flex-direction: column;
16 |   border-radius: 5px;
17 |   overflow: hidden;
18 |   padding: 10px;
19 |   background: #fff;
20 | }
21 | 
22 | .preview-panel {
23 |   height: auto;
24 |   background: #fff;
25 |   border: #efefef 1px solid;
26 |   border-radius: 5px;
27 |   overflow: hidden;
28 |   padding: 10px;
29 | }
30 | 
31 | .editor-panel {
32 |   height: auto;
33 |   margin-top: 1rem;
34 |   border-radius: inherit;
35 |   overflow: hidden;
36 |   font-size: 0.85em;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/components/LiveEditor/LiveEditor.js:
--------------------------------------------------------------------------------
 1 | import '@/scss/night-owl.css'
 2 | import 'vue-prism-editor/dist/VuePrismEditor.css'
 3 | import Layout from './Layout.vue'
 4 | 
 5 | /**
 6 |  * Live Code Editor
 7 |  */
 8 | const LiveEditor = {
 9 |   name: 'LiveEditor',
10 |   render (h) {
11 |     const children = this.$slots.default[0]
12 |     const innerText = children.text.trim()
13 |     return h('VueLive', {
14 |       props: {
15 |         code: innerText,
16 |         layout: Layout
17 |       }
18 |     })
19 |   }
20 | }
21 | 
22 | export default LiveEditor
23 | 


--------------------------------------------------------------------------------
/components/LiveEditor/index.js:
--------------------------------------------------------------------------------
1 | import LiveEditor from './LiveEditor'
2 | export default LiveEditor
3 | 


--------------------------------------------------------------------------------
/components/Navbar/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar">
 3 |     <nuxt-link to="/">
 4 |       <h1>Nuxt MDX</h1>
 5 |     </nuxt-link>
 6 |     <ul class="list">
 7 |       <li class="link">
 8 |         <nuxt-link to="/">
 9 |           Home
10 |         </nuxt-link>
11 |       </li>
12 |       <li class="link">
13 |         <nuxt-link to="/docs">
14 |           Live Editors
15 |         </nuxt-link>
16 |       </li>
17 |       <li class="link">
18 |         <a href="https://github.com/codebender828/nuxt-mdx-poc">
19 |           Github Source Code
20 |         </a>
21 |       </li>
22 |     </ul>
23 |   </nav>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |   name: 'Navbar'
29 | }
30 | </script>
31 | 
32 | <style scoped>
33 | .navbar {
34 |   display: flex;
35 |   height: 60px;
36 |   padding: 0 3rem;
37 |   align-items: center;
38 |   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
39 | }
40 | 
41 | .list {
42 |   display: flex;
43 |   list-style: none;
44 | }
45 | 
46 | .link {
47 |   padding: 12px 16px;
48 |   text-decoration: none;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/components/Navbar/index.js:
--------------------------------------------------------------------------------
1 | import Navbar from './Navbar.vue'
2 | export default Navbar
3 | 


--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as LiveEditor } from './LiveEditor'
2 | export { default as Navbar } from './Navbar'
3 | 


--------------------------------------------------------------------------------
/docs/documentation.mdx:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Count from '../components/Count'
 3 | import { LiveEditor } from '../components'
 4 | import Button from '../components/Button'
 5 | Vue.component('Button', Button)
 6 | 
 7 | # Vue Live Editor Example
 8 | 
 9 | 
10 | #  `Demo` example
11 | 
12 | <LiveEditor>
13 | {`
14 | <template>
15 |   <div>
16 |     <h3>Count: {{ count }} </h3>
17 |     <Button style="background: tomato;" @click="decrement">
18 |       Decrease
19 |     </Button>
20 |     <Button @click="increment">
21 |       Increase
22 |     </Button>
23 |   </div>
24 | </template>
25 | <script>
26 |   export default {
27 |     name: 'Count',
28 |     data () {
29 |       return {
30 |         count: 12
31 |       }
32 |     },
33 |     methods: {
34 |       increment () {
35 |         this.count++
36 |       },
37 |       decrement () {
38 |         this.count--
39 |       }
40 |     }
41 |   }
42 | <\/script>
43 | `}
44 | </LiveEditor>
45 | 
46 | 
47 | ## Another Simple example
48 | 
49 | <LiveEditor>
50 | {`
51 | let name = 'codebender828'
52 | 
53 | <label for="name">Username</label>
54 | <input name="name" type="text" v-model="name" />
55 | <p>{{ name }}</p>
56 | `}
57 | </LiveEditor>
58 | 
59 | 
60 | ## Button Component
61 | 
62 | <LiveEditor>
63 | {`<div>
64 |   <Button>
65 |     Sign up
66 |   </Button>
67 |   <Button style="margin-left: 0; background: #ff0044">
68 |     Delete
69 |   </Button>
70 | </div>
71 | `}
72 | </LiveEditor>
73 | 


--------------------------------------------------------------------------------
/docs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <h1>⚡️Nuxt + Live Editor + MDX</h1>
 4 | 
 5 |     <nuxt-link to="/docs">
 6 |       Click Here to see MDX Examples
 7 |     </nuxt-link>
 8 | 
 9 |     <h3>Features</h3>
10 |     <ul>
11 |       <li>SSR</li>
12 |       <li>Markdown documentation</li>
13 |       <li>Live Code Editor</li>
14 |     </ul>
15 |     <br>
16 |     <h3>Live Editor</h3>
17 |     <LiveEditor>
18 |       {{ code }}
19 |     </LiveEditor>
20 |   </main>
21 | </template>
22 | 
23 | <script>
24 | /* eslint-disable */
25 | import { LiveEditor } from '@/components'
26 | export default {
27 |   name: 'Index',
28 |   components: { LiveEditor },
29 |   data () {
30 |     return {
31 |       code: `
32 | <template>
33 |   <!-- Edit this content to change me -->
34 |   <button @click="handleClick" class="button">
35 |     Edit me!
36 |   </button>
37 | </template>
38 | <script>
39 |   export default {
40 |     methods: {
41 |       handleClick: () => alert('Clicked')
42 |     }
43 |   }
44 | <\/script>`
45 |     }
46 |   }
47 | }
48 | /* eslint-enable */
49 | </script>
50 | 
51 | <style>
52 | .button {
53 |   background: #1968ff;
54 |   color: #fff;
55 |   font-weight: 700;
56 |   border-radius: 3px;
57 |   outline: none;
58 |   border: none;
59 |   font-size: 1rem;
60 |   padding: .8rem 1rem;
61 |   margin: .5rem .8rem;
62 |   -webkit-transition: all .2s ease-in-out;
63 |   transition: all .2s ease-in-out;
64 | }
65 | 
66 | .button:focus {
67 |   box-shadow: 0 0 0 3px rgba(66,153,225,.6);
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Navbar />
 4 |     <nuxt class="main" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { Navbar } from '@/components'
10 | export default {
11 |   components: { Navbar },
12 |   transition: 'fade'
13 | }
14 | </script>
15 | 
16 | <style>
17 | html,
18 | body {
19 |   margin: 0;
20 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
21 | }
22 | 
23 | .main {
24 |   padding: 5rem 10rem;
25 | }
26 | 
27 | .CodeMirror {
28 |   font-family: 'Menlo', monospace !important;
29 |   font-size: 0.85em !important;
30 | }
31 | 
32 | .fade-enter-active,
33 | .fade-leave-active {
34 |   transition: opacity 0.2s;
35 | }
36 | 
37 | .fade-enter,
38 | .fade-leave-to {
39 |   opacity: 0;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   mode: 'universal',
 4 |   generate: {
 5 |     routes: [
 6 |       '/',
 7 |       '/docs'
 8 |     ]
 9 |   },
10 |   head: {
11 |     title: process.env.npm_package_name || '',
12 |     meta: [
13 |       { charset: 'utf-8' },
14 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
15 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
16 |     ],
17 |     link: [
18 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
19 |     ]
20 |   },
21 |   loading: { color: '#0092ff' },
22 |   plugins: [
23 |     {
24 |       src: 'plugins/live-editor.js',
25 |       ssr: false
26 |     }
27 |   ],
28 |   buildModules: [
29 |     '@nuxtjs/eslint-module',
30 |     '@nuxtjs/router'
31 |   ],
32 |   transition: 'fade',
33 |   build: {
34 |     extend (config, ctx) {
35 |       config.resolve.alias.vue = 'vue/dist/vue.common'
36 |       config.module.rules.push({
37 |         test: /\.mdx$/,
38 |         use: [
39 |           'babel-loader',
40 |           {
41 |             loader: '@mdx-js/vue-loader'
42 |           }
43 |         ]
44 |       })
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-mdx-poc",
 3 |   "version": "1.0.0",
 4 |   "description": "My breathtaking Nuxt.js project",
 5 |   "author": "codebender828",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13 |   },
14 |   "lint-staged": {
15 |     "*.{js,vue}": "yarn lint"
16 |   },
17 |   "husky": {
18 |     "hooks": {
19 |       "pre-commit": "lint-staged"
20 |     }
21 |   },
22 |   "dependencies": {
23 |     "@mdx-js/vue-loader": "^1.5.5",
24 |     "@nuxtjs/router": "^1.5.0",
25 |     "nuxt": "^2.0.0",
26 |     "vue-live": "^1.5.1"
27 |   },
28 |   "devDependencies": {
29 |     "@nuxtjs/eslint-config": "^2.0.0",
30 |     "@nuxtjs/eslint-module": "^1.0.0",
31 |     "@vue/babel-preset-jsx": "^1.1.2",
32 |     "babel-eslint": "^10.0.1",
33 |     "babel-loader": "^8.0.6",
34 |     "eslint": "^6.1.0",
35 |     "eslint-plugin-nuxt": ">=0.4.2",
36 |     "husky": "^4.0.0",
37 |     "lint-staged": "^10.0.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/plugins/live-editor.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueLive from 'vue-live'
 3 | import { LiveEditor } from '@/components'
 4 | 
 5 | Vue.use(VueLive)
 6 | 
 7 | Vue.component('LiveEditor', LiveEditor)
 8 | 
 9 | Vue.component('Wrapper', {
10 |   render (h) {
11 |     return h('div', this.$slots.default)
12 |   }
13 | })
14 | 
15 | Vue.component('InlineCode', {
16 |   render (h) {
17 |     return h('code', this.$slots.default)
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import Index from './docs/index.vue'
 5 | import Docs from './docs/documentation.mdx'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export function createRouter () {
10 |   return new Router({
11 |     mode: 'history',
12 |     routes: [
13 |       {
14 |         path: '/',
15 |         component: Index
16 |       },
17 |       {
18 |         path: '/docs',
19 |         component: Docs
20 |       }
21 |     ]
22 |   })
23 | }
24 | 


--------------------------------------------------------------------------------
/scss/night-owl.css:
--------------------------------------------------------------------------------
  1 | code[class*=language-],
  2 | pre[class*=language-] {
  3 |   color: #d6deeb;
  4 |   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  5 |   text-align: left;
  6 |   white-space: pre;
  7 |   word-spacing: normal;
  8 |   word-break: normal;
  9 |   word-wrap: normal;
 10 |   line-height: 1.5;
 11 |   -moz-tab-size: 4;
 12 |   -o-tab-size: 4;
 13 |   tab-size: 4;
 14 |   -webkit-hyphens: none;
 15 |   -moz-hyphens: none;
 16 |   -ms-hyphens: none;
 17 |   hyphens: none
 18 | }
 19 | 
 20 | code[class*=language-] ::-moz-selection,
 21 | code[class*=language-]::-moz-selection,
 22 | pre[class*=language-] ::-moz-selection,
 23 | pre[class*=language-]::-moz-selection {
 24 |   text-shadow: none;
 25 |   background: rgba(29, 59, 83, .99)
 26 | }
 27 | 
 28 | code[class*=language-] ::selection,
 29 | code[class*=language-]::selection,
 30 | pre[class*=language-] ::selection,
 31 | pre[class*=language-]::selection {
 32 |   text-shadow: none;
 33 |   background: rgba(29, 59, 83, .99)
 34 | }
 35 | 
 36 | @media print {
 37 | 
 38 |   code[class*=language-],
 39 |   pre[class*=language-] {
 40 |     text-shadow: none
 41 |   }
 42 | }
 43 | 
 44 | pre {
 45 |   padding: 1em;
 46 |   margin: .5em 0;
 47 |   overflow: auto
 48 | }
 49 | 
 50 | :not(pre)>code,
 51 | pre {
 52 |   color: #fff;
 53 |   background: #011627
 54 | }
 55 | 
 56 | :not(pre)>code {
 57 |   padding: .1em;
 58 |   border-radius: .3em;
 59 |   white-space: normal
 60 | }
 61 | 
 62 | .token.cdata,
 63 | .token.comment,
 64 | .token.prolog {
 65 |   color: #637777;
 66 |   font-style: italic
 67 | }
 68 | 
 69 | .token.punctuation {
 70 |   color: #c792ea
 71 | }
 72 | 
 73 | .namespace {
 74 |   color: #b2ccd6
 75 | }
 76 | 
 77 | .token.deleted {
 78 |   color: rgba(239, 83, 80, .56);
 79 |   font-style: italic
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.symbol {
 84 |   color: #80cbc4
 85 | }
 86 | 
 87 | .token.keyword,
 88 | .token.operator,
 89 | .token.tag {
 90 |   color: #7fdbca
 91 | }
 92 | 
 93 | .token.boolean {
 94 |   color: #ff5874
 95 | }
 96 | 
 97 | .token.number {
 98 |   color: #f78c6c
 99 | }
100 | 
101 | .token.builtin,
102 | .token.char,
103 | .token.constant,
104 | .token.function {
105 |   color: #82aaff
106 | }
107 | 
108 | .token.doctype,
109 | .token.selector {
110 |   color: #c792ea;
111 |   font-style: italic
112 | }
113 | 
114 | .token.attr-name,
115 | .token.inserted {
116 |   color: #addb67;
117 |   font-style: italic
118 | }
119 | 
120 | .language-css .token.string,
121 | .style .token.string,
122 | .token.entity,
123 | .token.string,
124 | .token.url {
125 |   color: #addb67
126 | }
127 | 
128 | .token.atrule,
129 | .token.attr-value,
130 | .token.class-name {
131 |   color: #ffcb8b
132 | }
133 | 
134 | .token.important,
135 | .token.regex,
136 | .token.variable {
137 |   color: #d6deeb
138 | }
139 | 
140 | .token.bold,
141 | .token.important {
142 |   font-weight: 700
143 | }
144 | 
145 | .token.italic {
146 |   font-style: italic
147 | }
148 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebender828/nuxt-mdx-poc/dc5e72807decf8fda47635690abf1284a057a6de/static/favicon.ico


--------------------------------------------------------------------------------