├── docs
    ├── README.md
    ├── examples
    │   └── counter
    │   │   ├── App.vue
    │   │   ├── index.js
    │   │   └── Counter.vue
    └── .vuepress
    │   └── config.js
├── .eslintrc
├── lib
    ├── index.js
    ├── client.js
    ├── ExamplePreviewDemoWrapper.vue
    ├── icons
    │   ├── play-window.svg
    │   ├── brackets.svg
    │   └── codesandbox.svg
    ├── ExamplePreviewFileContent.vue
    ├── ExamplePreviewBarButton.vue
    ├── highlight.js
    ├── ExamplePreviewBar.vue
    └── ExamplePreview.vue
├── .gitignore
├── .babelrc
├── .github
    ├── ISSUE_TEMPLATE.md
    ├── settings.yml
    ├── PULL_REQUEST_TEMPLATE.md
    ├── CODE_OF_CONDUCT.md
    └── CONTRIBUTING.md
├── .release-it.json
├── test
    ├── ExamplePreviewFileContent.spec.js
    ├── ExamplePreviewBarButton.spec.js
    ├── ExamplePreview.spec.js
    └── ExamplePreviewBar.spec.js
├── README.md
├── circle.yml
├── LICENSE
└── package.json


/docs/README.md:
--------------------------------------------------------------------------------
1 | # Hello VuePress
2 | 
3 | <ExamplePreview name="counter"/>
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "posva"
4 |   ],
5 |   "env": {
6 |     "jest": true
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | 
3 | module.exports = {
4 |   enhanceAppFiles: [path.resolve(__dirname, './client.js')],
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/client.js:
--------------------------------------------------------------------------------
1 | import ExamplePreview from './ExamplePreview'
2 | 
3 | export default ({ Vue }) => {
4 |   Vue.component('ExamplePreview', ExamplePreview)
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | coverage
 3 | npm-debug.log
 4 | yarn-error.log
 5 | .nyc_output
 6 | coverage.lcov
 7 | dist
 8 | package-lock.json
 9 | .DS_Store
10 | yarn.lock
11 | 


--------------------------------------------------------------------------------
/docs/examples/counter/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Counter />
 3 | </template>
 4 | 
 5 | <script>
 6 | import Counter from './Counter'
 7 | 
 8 | export default {
 9 |   components: { Counter }
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [["env", { "targets": { "node": "current" } }]],
 3 | 
 4 |   "plugins": ["syntax-dynamic-import"],
 5 |   "env": {
 6 |     "test": {
 7 |       "plugins": ["dynamic-import-node"]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!--
2 | IMPORTANT: Please provide as much information as possible:
3 | 
4 |     - Reporting a bug: if possible provide a repro on jsfiddle.net or a stacktrace at the very least
5 | 
6 |     - Feature request: lay out the reasoning behind it and propose an API for it
7 | 
8 | -->
9 | 


--------------------------------------------------------------------------------
/docs/examples/counter/index.js:
--------------------------------------------------------------------------------
1 | import App from './App'
2 | const files = ['Counter.vue', 'App.vue']
3 | // const files = {
4 | //   'index.html': 'index.html',
5 | //   'index.js': 'code.js'
6 | // }
7 | // const codesandbox = ['App.vue', 'Bar.vue', 'Foo.vue', 'Home.vue', 'router.js']
8 | export { App, files }
9 | 


--------------------------------------------------------------------------------
/lib/ExamplePreviewDemoWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <component :is="component" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     props: {
10 |       component: {
11 |         required: true,
12 |         type: Object
13 |       }
14 |     }
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "src": {
 3 |     "tagName": "v%s",
 4 |     "commitMessage": "🔖 %s"
 5 |   },
 6 |   "github": {
 7 |     "release": true,
 8 |     "releaseName": "🚀 Release %s",
 9 |     "tokenRef": "GITHUB_TOKEN"
10 |   },
11 |   "npm": {
12 |     "publish": true
13 |   },
14 |   "changelogCommand": "git log --pretty=format:'* %s (%h)' [REV_RANGE]"
15 | }
16 | 


--------------------------------------------------------------------------------
/docs/examples/counter/Counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     The counter is at {{ counter }}
 4 |     <br>
 5 |     <button @click="counter++">Increment</button>
 6 |     <button @click="counter--">Decrement</button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 |   export default {
12 |     data() {
13 |       return {
14 |         counter: 0
15 |       }
16 |     },
17 |   }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/test/ExamplePreviewFileContent.spec.js:
--------------------------------------------------------------------------------
 1 | import ExamplePreviewFileContent from '../lib/ExamplePreviewFileContent'
 2 | import { mount } from '@vue/test-utils'
 3 | 
 4 | describe('ExamplePreviewFileContent ', () => {
 5 |   it('works with a language', () => {
 6 |     const wrapper = mount(ExamplePreviewFileContent, {
 7 |       propsData: {
 8 |         file: {
 9 |           name: 'index.js',
10 |           content: 'let a = 0',
11 |         },
12 |       },
13 |     })
14 |     expect(wrapper.text()).toBe('let a = 0')
15 |     expect(wrapper.find('.language-js').exists()).toBe(true)
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/.github/settings.yml:
--------------------------------------------------------------------------------
 1 | labels:
 2 |   - name: bug
 3 |     color: ee0701
 4 |   - name: contribution welcome
 5 |     color: 0e8a16
 6 |   - name: discussion
 7 |     color: 4935ad
 8 |   - name: docs
 9 |     color: 8be281
10 |   - name: enhancement
11 |     color: a2eeef
12 |   - name: good first issue
13 |     color: 7057ff
14 |   - name: help wanted
15 |     color: 008672
16 |   - name: question
17 |     color: d876e3
18 |   - name: wontfix
19 |     color: ffffff
20 |   - name: WIP
21 |     color: ffffff
22 |   - name: need repro
23 |     color: c9581c
24 |   - name: feature request
25 |     color: fbca04
26 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'vuepress-plugin-example-preview',
 3 | 
 4 |   description: 'Easily embed example code alongside their preview',
 5 | 
 6 |   head: [
 7 |     ['meta', { name: 'theme-color', content: '#3eaf7c' }],
 8 |     ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
 9 |     ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
10 |   ],
11 | 
12 |   themeConfig: {
13 |     repo: 'posva/vuepress-plugin-example-preview',
14 |     editLinks: true,
15 |     docsDir: 'docs',
16 |     editLinkText: 'Edit this page on GitHub',
17 |     lastUpdated: 'Last Updated',
18 |   },
19 | 
20 |   plugins: [require('../../lib/index')],
21 | }
22 | 


--------------------------------------------------------------------------------
/lib/icons/play-window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 200 200" style="vertical-align: middle;">
2 |   <path d="M27,33 L173,33 C178.522847,33 183,37.4771525 183,43 L183,157 C183,162.522847 178.522847,167 173,167 L27,167 C21.4771525,167 17,162.522847 17,157 L17,43 C17,37.4771525 21.4771525,33 27,33 Z M29,64 L29,156 L171,156 L171,64 L29,64 Z M84.260356,82.6998802 L119.974518,107.161635 C121.797124,108.409995 122.262642,110.899505 121.014282,112.722111 C120.734924,113.129973 120.38238,113.482517 119.974518,113.761875 L84.260356,138.223629 C82.4377502,139.471989 79.9482404,139.006471 78.6998802,137.183866 C78.2439706,136.518238 78,135.730302 78,134.92351 L78,86 C78,83.790861 79.790861,82 82,82 C82.8067925,82 83.594728,82.2439706 84.260356,82.6998802 Z" fill="inherit"></path>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Example Preview plugin for Vuepress [![Build Status](https://badgen.net/circleci/github/posva/vuepress-plugin-example-preview)](https://circleci.com/gh/posva/vuepress-plugin-example-preview) [![npm package](https://badgen.net/npm/v/vuepress-plugin-example-preview)](https://www.npmjs.com/package/vuepress-plugin-example-preview) [![coverage](https://badgen.net/codecov/c/github/posva/vuepress-plugin-example-preview)](https://codecov.io/github/posva/vuepress-plugin-example-preview) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks)
 2 | 
 3 | > Easily embed example code alongside their preview
 4 | 
 5 | ## Installation
 6 | 
 7 | ```sh
 8 | npm install vuepress-plugin-example-preview
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | ## API
14 | 
15 | ## Related
16 | 
17 | ## License
18 | 
19 | [MIT](http://opensource.org/licenses/MIT)
20 | 


--------------------------------------------------------------------------------
/lib/ExamplePreviewFileContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-html="content" class="code" :class="'language-' + language"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | // TODO make the highlight work again...
 7 | import highlightCode from './highlight'
 8 | 
 9 | export default {
10 |   props: {
11 |     file: {
12 |       type: Object,
13 |       required: true,
14 |     },
15 |   },
16 | 
17 |   computed: {
18 |     language () {
19 |       return this.file.name.substring(this.file.name.lastIndexOf('.') + 1, this.file.name.length)
20 |     },
21 |     content () {
22 |       return highlightCode(this.file.content, this.language)
23 |     },
24 |   },
25 | }
26 | </script>
27 | 
28 | <style scoped>
29 | .code {
30 |   border-radius: 0 0 4px 4px;
31 | }
32 | 
33 | .code pre {
34 |   margin: 0;
35 | }
36 | 
37 | @media (max-width: 419px) {
38 |   .code.code.code {
39 |     margin: 0;
40 |   }
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/lib/icons/brackets.svg:
--------------------------------------------------------------------------------
1 | <svg fill="currentColor" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
2 |   <g>
3 |     <path id="left-bracket" d="M4,12v-1h1c1,0,1,0,1-1V7.614C6,7.1,6.024,6.718,6.073,6.472C6.127,6.22,6.212,6.009,6.33,5.839   C6.534,5.56,6.803,5.364,7.138,5.255C7.473,5.14,8.01,5,8.973,5H10v1H9.248c-0.457,0-0.77,0.191-0.936,0.408   C8.145,6.623,8,6.853,8,7.476v1.857c0,0.729-0.041,1.18-0.244,1.493c-0.2,0.307-0.562,0.529-1.09,0.667   c0.535,0.155,0.9,0.385,1.096,0.688C7.961,12.484,8,12.938,8,13.665v1.862c0,0.619,0.145,0.848,0.312,1.062   c0.166,0.22,0.479,0.407,0.936,0.407L10,17l0,0v1H8.973c-0.963,0-1.5-0.133-1.835-0.248c-0.335-0.109-0.604-0.307-0.808-0.591   c-0.118-0.165-0.203-0.374-0.257-0.625C6.024,16.283,6,15.9,6,15.387V13c0-1,0-1-1-1H4z" />
4 |     <use transform="matrix(-1,0,0,1,24,0)" id="right-bracket" x="0" y="0" width="24" height="24" xlink:href="#left-bracket" />
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | # Javascript Node CircleCI 2.0 configuration file
 2 | #
 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 4 | #
 5 | version: 2
 6 | 
 7 | 
 8 | jobs:
 9 |   build:
10 |     docker:
11 |       - image: circleci/node:10
12 | 
13 |     working_directory: ~/repo
14 | 
15 |     steps:
16 |       - checkout
17 | 
18 |       # Download and cache dependencies
19 |       - restore_cache:
20 |           keys:
21 |           - dependencies-cache-{{ checksum "yarn.lock" }}
22 |           # fallback to using the latest cache if no exact match is found
23 |           - dependencies-cache-
24 | 
25 |       - run: yarn install
26 | 
27 |       - save_cache:
28 |           paths:
29 |             - node_modules
30 |           key: dependencies-cache-{{ checksum "yarn.lock" }}
31 | 
32 |       # run tests!
33 |       - run: npm test
34 | 
35 |       - run:
36 |           name: Send code coverage
37 |           command: './node_modules/.bin/codecov'
38 | 


--------------------------------------------------------------------------------
/lib/icons/codesandbox.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1063 1063" fill="none">
2 |   <path d="M0 317.198V106.046L182.999 0V211.465L0 317.198Z" transform="translate(739.001 551.802)" fill="currentColor" />
3 |   <path d="M179.915 104.303L0 0V208.606L179.915 313.438V104.303Z" transform="translate(142.167 557.135)" fill="currentColor" />
4 |   <path d="M183.546 212.795L366.503 106.633L183.624 0L0 106.987L183.546 212.795Z" transform="translate(348.436 81)" fill="currentColor" />
5 |   <path d="M390 0L0 225.167V675.167" transform="translate(529 305.833)" stroke="currentColor" stroke-width="100" stroke-miterlimit="10" />
6 |   <path d="M0 0L389.333 224" transform="translate(142.167 307)" stroke="currentColor" stroke-width="100" stroke-miterlimit="10" />
7 |   <path d="M0 677.083L389.917 901.042L780 676.333V226L390 0L0 227V677.083Z" transform="translate(141 80)" stroke="currentColor" stroke-width="100" stroke-miterlimit="10" />
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Eduardo San Martin Morote
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Please make sure to read the Pull Request Guidelines:
 3 | https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#Pull-Request
 4 | -->
 5 | 
 6 | <!-- PULL REQUEST TEMPLATE -->
 7 | <!-- (Update "[ ]" to "[x]" to check a box) -->
 8 | 
 9 | **What kind of change does this PR introduce?** (check at least one)
10 | 
11 | - [ ] Bugfix
12 | - [ ] Feature
13 | - [ ] Code style update
14 | - [ ] Refactor
15 | - [ ] Build-related changes
16 | - [ ] Other, please describe:
17 | 
18 | **Does this PR introduce a breaking change?** (check one)
19 | 
20 | - [ ] Yes
21 | - [ ] No
22 | 
23 | If yes, please describe the impact and migration path for existing applications:
24 | 
25 | **The PR fulfills these requirements:**
26 | 
27 | - [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)
28 | - [ ] All tests are passing
29 | - [ ] New/updated tests are included
30 | 
31 | If adding a **new feature**, the PR's description includes:
32 | - [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)
33 | 
34 | **Other information:**
35 | 


--------------------------------------------------------------------------------
/test/ExamplePreviewBarButton.spec.js:
--------------------------------------------------------------------------------
 1 | import ExamplePreviewBarButton from '../lib/ExamplePreviewBarButton'
 2 | import bracketsSvg from '../lib/icons/brackets.svg'
 3 | import codesandboxSvg from '../lib/icons/codesandbox.svg'
 4 | import { mount } from '@vue/test-utils'
 5 | 
 6 | const tick = () => new Promise(resolve => process.nextTick(resolve))
 7 | 
 8 | describe('ExamplePreviewBarButton ', () => {
 9 |   it('lazy loads the svg', async () => {
10 |     /** @type {import('@vue/test-utils').Wrapper<ExamplePreviewBarButton>} */
11 |     const wrapper = mount(ExamplePreviewBarButton, {
12 |       propsData: {
13 |         icon: 'brackets',
14 |       },
15 |     })
16 |     expect(wrapper.vm.svg).toBe('?')
17 |     await tick()
18 |     expect(wrapper.vm.svg).toBe(bracketsSvg)
19 |   })
20 | 
21 |   it('lazy loads the svg when prop icon changes', async () => {
22 |     /** @type {import('@vue/test-utils').Wrapper<ExamplePreviewBarButton>} */
23 |     const wrapper = mount(ExamplePreviewBarButton, {
24 |       propsData: {
25 |         icon: 'brackets',
26 |       },
27 |     })
28 |     await tick()
29 |     wrapper.setProps({ icon: 'codesandbox' })
30 |     await tick()
31 |     expect(wrapper.vm.svg).toBe(codesandboxSvg)
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/lib/ExamplePreviewBarButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="reset-button button" v-html="svg"></button>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     icon: String
 9 |   },
10 | 
11 |   // TODO use vue-promised
12 |   data() {
13 |     return {
14 |       svg: '?'
15 |     }
16 |   },
17 | 
18 |   watch: {
19 |     icon: {
20 |       immediate: true,
21 |       async handler (icon) {
22 |         this.svg = '?'
23 |         this.svg = await import(`!raw-loader!./icons/${icon}.svg`).then(f => f.default)
24 |       }
25 |     }
26 |   },
27 | }
28 | </script>
29 | 
30 | <style scoped lang="stylus">
31 | .reset-button {
32 |   /* reset button style */
33 |   border: none;
34 |   padding: 0;
35 |   margin: 0;
36 |   width: auto;
37 |   overflow: visible;
38 |   background: transparent;
39 |   color: inherit;
40 |   font: inherit;
41 | }
42 | 
43 | .js-focus-visible :focus:not(.focus-visible) {
44 |   outline: none;
45 | }
46 | 
47 | .button {
48 |   color: rgb(135, 135, 135);
49 |   font-size: 1.5rem;
50 |   line-height: 0.5;
51 |   vertical-align: middle;
52 |   text-align: center;
53 |   margin: 0px 0.1rem;
54 | 
55 |   &:not([disabled]):hover {
56 |     background-color: rgb(226, 226, 226);
57 |     cursor: pointer;
58 |   }
59 | 
60 |   &[disabled] {
61 |     color: rgb(192, 192, 192);
62 |   }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/test/ExamplePreview.spec.js:
--------------------------------------------------------------------------------
 1 | import ExamplePreview from '../lib/ExamplePreview'
 2 | import { mount } from '@vue/test-utils'
 3 | 
 4 | const tick = () => new Promise(resolve => process.nextTick(resolve))
 5 | 
 6 | const mocks = {
 7 |   $localePath: '',
 8 | }
 9 | 
10 | const stubs = {
11 |   ExamplePreviewBarButton: {
12 |     props: ['icon'],
13 |     render (h) {
14 |       return h('button', {}, this.icon)
15 |     },
16 |   },
17 | }
18 | 
19 | describe('ExamplePreview', () => {
20 |   /** @type {import('@vue/test-utils').Wrapper<ExamplePreview>} */
21 |   let wrapper
22 |   beforeEach(() => {
23 |     wrapper = mount(ExamplePreview, {
24 |       mocks,
25 |       stubs,
26 |       propsData: {
27 |         name: 'counter',
28 |       },
29 |     })
30 |     return tick()
31 |   })
32 | 
33 |   it('initialView defaults to demo', () => {
34 |     expect(wrapper.vm.viewCode).toBe(false)
35 |   })
36 | 
37 |   it('initialView changes viewCode', () => {
38 |     wrapper = mount(ExamplePreview, {
39 |       mocks,
40 |       stubs,
41 |       propsData: {
42 |         initialView: 'code',
43 |         name: 'counter',
44 |       },
45 |     })
46 |     expect(wrapper.vm.viewCode).toBe(true)
47 |   })
48 | 
49 |   it('populates files on creation', () => {
50 |     expect(wrapper.vm.files).toHaveLength(2)
51 |     expect(wrapper.vm.demoComponent).toBeTruthy()
52 |     expect(wrapper.vm.currentFile).toMatchObject({ name: 'Counter.vue' })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Code of Conduct
 2 | 
 3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
 4 | 
 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
 6 | 
 7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
 8 | 
 9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
10 | 
11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
12 | 
13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
14 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Contributions are welcome and will be fully credited!
 4 | 
 5 | We accept contributions via Pull Requests on [Github](https://github.com/{{ githubAccount }}/{{ name }}).
 6 | 
 7 | ## Pull Requests
 8 | 
 9 | Here are some guidelines to make the process smoother:
10 | 
11 | - **Add a test** - New features and bugfixes need tests. If you find it difficult to test, please tell us in the pull request and we will try to help you!
12 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
13 | - **Run `npm test` locally** - This will allow you to go faster
14 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
15 | - **Send coherent history** - Make sure your commits message means something
16 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
17 | 
18 | ## Creating issues
19 | 
20 | ### Bug reports
21 | 
22 | Always try to provide as much information as possible. If you are reporting a bug, try to provide a repro on jsfiddle.net (or anything else) or a stacktrace at the very least. This will help us check the problem quicker.
23 | 
24 | ### Feature requests
25 | 
26 | Lay out the reasoning behind it and propose an API for it. Ideally, you should have a practical example to prove the utility of the feature you're requesting.
27 | 
28 | 


--------------------------------------------------------------------------------
/lib/highlight.js:
--------------------------------------------------------------------------------
 1 | const escapeHtml = require('escape-html')
 2 | // import escapeHtml from 'escape-html'
 3 | // const prism = require('prismjs')
 4 | // const loadLanguages = require('prismjs/components/index')
 5 | // const { logger, chalk, escapeHtml } = require('@vuepress/shared-utils')
 6 | 
 7 | // required to make embedded highlighting work...
 8 | // loadLanguages(['markup', 'css', 'javascript'])
 9 | 
10 | function wrap (code, lang) {
11 |   if (lang === 'text') {
12 |     code = escapeHtml(code)
13 |   }
14 |   return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
15 | }
16 | 
17 | module.exports = wrap
18 | 
19 | // function highlightCode (str, lang) {
20 | //   if (!lang) {
21 | //     return wrap(str, 'text')
22 | //   }
23 | //   lang = lang.toLowerCase()
24 | //   const rawLang = lang
25 | //   if (lang === 'vue' || lang === 'html') {
26 | //     lang = 'markup'
27 | //   }
28 | //   if (lang === 'md') {
29 | //     lang = 'markdown'
30 | //   }
31 | //   if (lang === 'ts') {
32 | //     lang = 'typescript'
33 | //   }
34 | //   if (lang === 'py') {
35 | //     lang = 'python'
36 | //   }
37 | //   if (!prism.languages[lang]) {
38 | //     try {
39 | //       // loadLanguages([lang])
40 | //     } catch (e) {
41 | //       console.warn(`[vuepress] Syntax highlight for language "${lang}" is not supported.`)
42 | //     }
43 | //   }
44 | //   if (prism.languages[lang]) {
45 | //     const code = prism.highlight(str, prism.languages[lang], lang)
46 | //     return wrap(code, rawLang)
47 | //   }
48 | //   return wrap(str, 'text')
49 | // }
50 | 


--------------------------------------------------------------------------------
/test/ExamplePreviewBar.spec.js:
--------------------------------------------------------------------------------
 1 | import ExamplePreviewBar from '../lib/ExamplePreviewBar'
 2 | import { mount } from '@vue/test-utils'
 3 | 
 4 | const files = [
 5 |   { name: 'index.js', content: 'let a = 0' },
 6 |   { name: 'bar.js', content: `let bar = 'bar'` },
 7 |   { name: 'App.vue', content: `<template><div>App</div></template` },
 8 | ]
 9 | 
10 | const stubs = {
11 |   ExamplePreviewBarButton: {
12 |     props: ['icon'],
13 |     render (h) {
14 |       return h('button', {}, this.icon)
15 |     },
16 |   },
17 | }
18 | 
19 | describe('ExamplePreviewBar', () => {
20 |   /** @type {import('@vue/test-utils').Wrapper<ExamplePreviewBar>} */
21 |   let wrapper
22 |   beforeEach(() => {
23 |     wrapper = mount(ExamplePreviewBar, {
24 |       stubs,
25 |       propsData: {
26 |         files,
27 |         currentFile: files[0],
28 |         viewCode: false,
29 |       },
30 |     })
31 |   })
32 | 
33 |   it('displays an empty .tabs-container with a button by default', async () => {
34 |     expect(wrapper.find('.tabs-container').isEmpty()).toBe(true)
35 |     // no codesandbox if no prop
36 |     expect(wrapper.find('.actions-container form').exists()).toBe(false)
37 |     const buttons = wrapper.findAll('.actions-container button')
38 |     expect(buttons).toHaveLength(1)
39 |     expect(buttons.at(0).text()).toBe('brackets')
40 |   })
41 | 
42 |   it('displays a play-window button with viewCode', async () => {
43 |     wrapper.setProps({ viewCode: true })
44 |     const buttons = wrapper.findAll('.actions-container button')
45 |     expect(buttons).toHaveLength(1)
46 |     expect(buttons.at(0).text()).toBe('play-window')
47 |   })
48 | 
49 |   it('toggles viewCode when clicked', () => {
50 |     const button = wrapper.find('.actions-container button')
51 |     expect(wrapper.emitted('update:viewCode')).toBe(undefined)
52 |     button.trigger('click.native')
53 |     wrapper.setProps({ viewCode: true })
54 |     button.trigger('click.native')
55 |     expect(wrapper.emitted('update:viewCode')).toEqual([[true], [false]])
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuepress-plugin-example-preview",
 3 |   "version": "0.0.0",
 4 |   "description": "Easily embed example code alongside their preview",
 5 |   "main": "index.js",
 6 |   "author": {
 7 |     "name": "Eduardo San Martin Morote",
 8 |     "email": "posva13@gmail.com"
 9 |   },
10 |   "scripts": {
11 |     "lint": "eslint --color --ext=js,html lib test",
12 |     "unit": "jest",
13 |     "dev": "npm run unit -- --watchAll",
14 |     "docs": "vuepress dev docs",
15 |     "docs:build": "vuepress build docs",
16 |     "test": "npm run lint && npm run unit"
17 |   },
18 |   "files": [
19 |     "lib",
20 |     "LICENSE",
21 |     "README.md"
22 |   ],
23 |   "keywords": [],
24 |   "license": "MIT",
25 |   "devDependencies": {
26 |     "@vue/test-utils": "^1.0.0-beta.25",
27 |     "babel-jest": "^23.0.1",
28 |     "babel-plugin-dynamic-import-node": "^2.2.0",
29 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
30 |     "babel-preset-env": "^1.7.0",
31 |     "codecov": "^3.0.2",
32 |     "eslint": "^5.0.0",
33 |     "eslint-config-posva": "^2.0.0",
34 |     "jest": "^23.1.0",
35 |     "jest-raw-loader": "^1.0.1",
36 |     "vue": "^2.5.17",
37 |     "vue-jest": "^3.0.0",
38 |     "vue-template-compiler": "^2.5.17",
39 |     "vuepress": "^1.0.0-alpha.13"
40 |   },
41 |   "repository": {
42 |     "type": "git",
43 |     "url": "git+https://github.com/posva/mylib.git"
44 |   },
45 |   "bugs": {
46 |     "url": "https://github.com/posva/mylib/issues"
47 |   },
48 |   "jest": {
49 |     "collectCoverage": true,
50 |     "moduleFileExtensions": [
51 |       "js",
52 |       "json",
53 |       "vue"
54 |     ],
55 |     "transform": {
56 |       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
57 |       ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
58 |       "\\.svg$": "jest-raw-loader"
59 |     },
60 |     "moduleNameMapper": {
61 |       "^@source/(.*)$": "<rootDir>/docs/$1",
62 |       "^\\!?raw-loader\\!@source/(.*)$": "<rootDir>/docs/$1",
63 |       "^\\!?raw-loader\\!(.*)$": "$1"
64 |     },
65 |     "coveragePathIgnorePatterns": [
66 |       "<rootDir>/lib/icons/*.svg",
67 |       "<rootDir>/test/*.js",
68 |       "<rootDir>/test/.*.js",
69 |       "<rootDir>/test/*/*.js"
70 |     ]
71 |   },
72 |   "homepage": "https://github.com/posva/vuepress-plugin-example-preview#readme",
73 |   "dependencies": {
74 |     "focus-visible": "^4.1.5",
75 |     "raw-loader": "^0.5.1"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/lib/ExamplePreviewBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bar-container">
  3 |     <template v-if="!viewCode">
  4 |       <slot>
  5 |         <div class="tabs-container"></div>
  6 |       </slot>
  7 |     </template>
  8 |     <div class="tabs-container" v-else>
  9 |       <button class="reset-button tab" v-for="file in files" :class="file === currentFile ? 'is-selected' : ''" @click="$emit('update:currentFile', file)">
 10 |         {{ file.name }}
 11 |       </button>
 12 |     </div>
 13 |     <div class="actions-container">
 14 |       <form v-if="viewCode && codesandboxParams" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
 15 |         <input type="hidden" name="parameters" :value="codesandboxParams">
 16 |         <ExamplePreviewBarButton icon="codesandbox" title="Edit on CodeSandbox" />
 17 |       </form>
 18 |       <ExamplePreviewBarButton :icon="viewCode ? 'play-window' : 'brackets'" @click.native="$emit('update:viewCode', !viewCode)" :title="viewCode? 'View Demo' : 'View Code'" />
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import ExamplePreviewBarButton from './ExamplePreviewBarButton'
 25 | 
 26 | export default {
 27 |   props: {
 28 |     files: Array,
 29 |     currentFile: Object,
 30 |     viewCode: Boolean,
 31 |     codesandboxParams: String
 32 |   },
 33 | 
 34 |   components: { ExamplePreviewBarButton }
 35 | }
 36 | </script>
 37 | 
 38 | <style scoped lang="stylus">
 39 | .reset-button {
 40 |   /* reset button style */
 41 |   border: none;
 42 |   padding: 0;
 43 |   margin: 0;
 44 |   width: auto;
 45 |   overflow: visible;
 46 |   background: transparent;
 47 |   color: inherit;
 48 |   font: inherit;
 49 | }
 50 | 
 51 | .bar-container {
 52 |   display: flex;
 53 |   border-radius: 4px 4px 0 0;
 54 |   background-color: rgb(242, 242, 242);
 55 |   padding: 0 0.5rem;
 56 |   align-items: center;
 57 |   line-height: 1;
 58 |   box-shadow: rgb(221, 221, 221) 0px 1px 3px;
 59 |   height: 2.5rem;
 60 |   min-height: 2.5rem;
 61 |   margin-bottom: 0;
 62 | }
 63 | 
 64 | .actions-container {
 65 |   // Make sure they appar in line
 66 |   display: flex;
 67 | }
 68 | 
 69 | .tabs-container {
 70 |   flex-grow: 1;
 71 | }
 72 | 
 73 | .tabs-container {
 74 |   display: flex;
 75 |   height: 100%;
 76 |   margin-left: -0.5rem;
 77 |   overflow-x: auto;
 78 | }
 79 | 
 80 | .tab {
 81 |   height: 100%;
 82 |   font-size: 0.9rem;
 83 |   padding: 0 0.7rem;
 84 |   line-height: 2.5rem;
 85 |   color: #666;
 86 | 
 87 |   &:hover {
 88 |     cursor: pointer;
 89 |   }
 90 | 
 91 |   &.is-selected {
 92 |     color: inherit;
 93 |     font-weight: 500;
 94 |     border-bottom: 3px solid $accentColor;
 95 |     background-color: rgba(0, 0, 0, 0.075);
 96 |   }
 97 | }
 98 | 
 99 | .button {
100 |   color: rgb(135, 135, 135);
101 |   font-size: 1.5rem;
102 |   line-height: 0.5;
103 |   vertical-align: middle;
104 |   text-align: center;
105 |   margin: 0px 0.1rem;
106 | 
107 |   &:not([disabled]):hover {
108 |     background-color: rgb(226, 226, 226);
109 |     cursor: pointer;
110 |   }
111 | 
112 |   &[disabled] {
113 |     color: rgb(192, 192, 192);
114 |   }
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/lib/ExamplePreview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo" :class="containerClasses">
  3 |     <ExamplePreviewBar :view-code.sync="viewCode" :files="files" :current-file.sync="currentFile" />
  4 |     <!-- <Promised :promise="examplePromise">
  5 |       <span></span>
  6 |       <span slot="catch" slot-scope="error"></span>
  7 |     </Promised> -->
  8 |     <!-- <Promised :promise="examplePromise"> -->
  9 |     <div v-if="!demoComponent" class="example">Loading example...</div>
 10 |     <div v-else>
 11 |       <keep-alive include="ExamplePreviewDemoWrapper">
 12 |         <template v-if="viewCode">
 13 |           <!-- <ExamplePreviewFilesTabs :files="files" :current-file.sync="currentFile" :view-code.sync="viewCode" /> -->
 14 |           <ExamplePreviewFileContent v-if="currentFile" :file="currentFile" />
 15 |         </template>
 16 |         <template v-else>
 17 |           <ExamplePreviewDemoWrapper class="example" :component="demoComponent" />
 18 |         </template>
 19 |       </keep-alive>
 20 |     </div>
 21 |     <div v-if="false" class="example error" slot="catch" slot-scope="error">
 22 |       <p>There was an error loading the example</p>
 23 | 
 24 |       <button class="action-button" @click="loadPage">Retry</button>
 25 |     </div>
 26 |     </Promised>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import ExamplePreviewBar from './ExamplePreviewBar'
 32 | import ExamplePreviewDemoWrapper from './ExamplePreviewDemoWrapper'
 33 | import 'focus-visible'
 34 | import ExamplePreviewFileContent from './ExamplePreviewFileContent'
 35 | 
 36 | export default {
 37 |   props: {
 38 |     // TODO title ?
 39 |     name: String,
 40 |     initialView: {
 41 |       type: String,
 42 |       default: 'demo'
 43 |     }
 44 |   },
 45 | 
 46 |   data() {
 47 |     return {
 48 |       viewCode: this.initialView === 'code',
 49 |       demoComponent: null,
 50 |       files: [],
 51 |       currentFile: null,
 52 | 
 53 |       // TODO use vue-promised
 54 |       examplePromise: null
 55 |     }
 56 |   },
 57 | 
 58 |   methods: {
 59 |     async loadPage () {
 60 |       if (!this.name) return
 61 |       // TODO allow users to provide the same example for all locales
 62 |       this.examplePromise = (this.pagePath ? import(`@source/${this.pagePath}/examples/${this.name}/index.js`) : import(`@source/examples/${this.name}/index.js`))
 63 |       const Example = await this.examplePromise
 64 |       // TODO dev warnings
 65 |       if (!Example || !Example.App) return
 66 |       let { App, files, codesandbox } = Example
 67 | 
 68 |       App.name = 'Demo'
 69 |       this.demoComponent = App
 70 | 
 71 |       // reset file, files
 72 |       this.currentFile = null
 73 |       // this.codesandboxParams = null
 74 |       this.files = []
 75 | 
 76 |       // files is usually an object, transform if it's not
 77 |       if (Array.isArray(files)) {
 78 |         files = files.reduce((filesDict, name) => {
 79 |           filesDict[name] = name
 80 |           return filesDict
 81 |         }, {})
 82 |       }
 83 | 
 84 |       // load the content of all the files
 85 |       Object.keys(files).forEach((name, i) => {
 86 |         const handleImport = ({ default: content }) => {
 87 |           const file = { name, content }
 88 |           this.files.push(file)
 89 |           // set the currentFile as the first one in the object
 90 |           if (i === 0) this.currentFile = file
 91 |         }
 92 | 
 93 |         if (this.pagePath) {
 94 |           import(`!raw-loader!@source/${this.pagePath}/examples/${this.name}/${files[name]}`).then(handleImport)
 95 |         } else {
 96 |           import(`!raw-loader!@source/examples/${this.name}/${files[name]}`).then(handleImport)
 97 |         }
 98 |       })
 99 |     }
100 |   },
101 | 
102 |   computed: {
103 |     containerClasses() {
104 |       return { explorer: this.viewCode }
105 |     },
106 |     // this seems to be necessary to correctly code split
107 |     // it allows import path to have the slashes in them
108 |     pagePath () {
109 |       return this.$localePath.replace(/^\//, '').replace(/\/$/, '')
110 |     }
111 |   },
112 | 
113 |   watch: {
114 |     name: {
115 |       handler: 'loadPage',
116 |       immediate: true
117 |     }
118 |   },
119 | 
120 |   components: { ExamplePreviewBar, ExamplePreviewFileContent, ExamplePreviewDemoWrapper }
121 | }
122 | </script>
123 | 
124 | <style scoped lang="stylus">
125 | .demo {
126 |   border: 1px solid #ddd;
127 |   border-radius: 4px;
128 |   margin-top: 1rem;
129 | 
130 |   & .example {
131 |     padding: 1rem 1.5rem;
132 |     overflow: hidden;
133 | 
134 |     &.error {
135 |       color: #ff2828;
136 |     }
137 |   }
138 | }
139 | 
140 | @media (max-width: $MQMobileNarrow) {
141 |   .demo {
142 |     margin-left: -1.5rem;
143 |     margin-right: -1.5rem;
144 |     border-radius: 0;
145 |   }
146 | }
147 | 
148 | .action-button {
149 |   display: inline-block;
150 |   font-size: 1.2rem;
151 |   color: #fff;
152 |   background-color: #3eaf7c;
153 |   padding: 0.8rem 1.6rem;
154 |   border-radius: 4px;
155 |   transition: background-color 0.1s ease;
156 |   box-sizing: border-box;
157 |   border-bottom: 1px solid #389d70;
158 | 
159 |   &:hover {
160 |     background-color: #4abf8a;
161 |     cursor: pointer;
162 |   }
163 | }
164 | </style>
165 | 
166 | <style>
167 | .js-focus-visible :focus:not(.focus-visible) {
168 |   outline: none;
169 | }
170 | </style>
171 | 


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