├── .browserslistrc
├── .gitignore
├── LICENSE.md
├── README.md
├── babel.config.js
├── dev
    ├── serve.js
    └── serve.vue
├── package.json
├── rollup.config.js
└── src
    ├── entry.esm.js
    ├── entry.js
    └── vue-utterances.vue


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | package-lock.json
2 | node_modules
3 | dist/


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Khaleel Gibran
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-utterances 🔮
 2 | 
 3 | [![NPM](https://nodei.co/npm/vue-utterances.png)](https://npmjs.org/package/vue-utterances)
 4 | 
 5 | Vue.js component for 🔮 [utterances](https://utteranc.es/) 🔮
 6 | 
 7 | Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. Read more at [https://utteranc.es/](https://utteranc.es/).
 8 | 
 9 | This package is under active development! If you encounter bugs, please open an issue at https://github.com/khalby786/vue-utterances/issues.
10 | 
11 | ## Installation
12 | 
13 | ```
14 | npm i vue-utterances
15 | ```
16 | 
17 | **This package is compatible only with Vue 3.**
18 | 
19 | ## Usage 
20 | 
21 | ### Vue CLI (with a Bundler)
22 | 
23 | ```vue
24 | <template>
25 |     <vue-utterances repo="khalby786/vue-utterances" theme="github-light" issue-term="pathname" />
26 | </template>
27 | 
28 | <script>
29 | import VueUtterances from "vue-utterances";
30 | 
31 | export default {
32 |     ...
33 | 
34 |     components: {
35 |         VueUtterances
36 |     }
37 | 
38 |     ...
39 | }
40 | </script>
41 | ```
42 | 
43 | ### Browser (with CDN)
44 | 
45 | ```html
46 | <div id="app">
47 |     <vue-utterances repo="khalby786/vue-utterances" />
48 | </div>
49 |     
50 | <script src="https://unpkg.com/vue@next"></script>
51 | <script src="https://unpkg.com/vue-utterances@0.1.2/dist/vue-utterances.min.js"></script>
52 | ```
53 | 
54 | ```js
55 | const app = {
56 |   components: {
57 |     VueUtterances
58 |   }
59 | }
60 | 
61 | Vue.createApp(app).mount("#app");
62 | ```
63 | 
64 | ### Props
65 | 
66 | | Prop | Type | Description| Required | Default |
67 | |------|------|------------|----------|---------|
68 | | `repo` | String | Repository for Utterances to connect to. Expected value: `username/repo`. More details [here](https://utteranc.es/#heading-repository). | Yes | - | 
69 | | `theme` | String | The Utterance theme to use. `github-light`, `github-dark`, `preferred-color-scheme`, `github-dark-orange`, `icy-dark`, `dark-blue`, `photon-dark` and `boxy-light` are the expected values. | No | `github-light` |
70 | | `issue-term` | String | The mapping between blog posts and GitHub issues. `pathname`, `url`, `title`, `og:title`, `[SPECIFIC ISSUE NUMBER]` and `[SPECIFIC SEARCH TERM]` are the expected values. More details [here](https://utteranc.es/#heading-mapping). | No | `pathname` |
71 | | `label` | String | Choose the label that will be assigned to issues created by Utterances. More details [here](https://utteranc.es/#heading-issue-label). | No |  |
72 | 
73 | ## Confession
74 | 
75 | I've never published a Vue component to NPM for public use and it's my first time. I followed [this](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/) tutorial to create this component package. I'm not familiar with the entire concept (*yet*), and I might be doing some things the wrong way, so if you feel like something needs correction or can be improved further, please create an issue/pull request!
76 | 
77 | ## License
78 | 
79 | [MIT License](https://github.com/khalby786/vue-utterances/blob/main/LICENSE) - [Khaleel Gibran](https://khaleelgibran.com)


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | const devPresets = ['@vue/babel-preset-app'];
2 | const buildPresets = ['@babel/preset-env'];
3 | module.exports = {
4 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
5 | };
6 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | const app = createApp(Dev);
5 | app.mount('#app');
6 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { defineComponent } from 'vue';
 3 | import VueUtterances from '@/vue-utterances.vue';
 4 | 
 5 | export default defineComponent({
 6 |   name: 'ServeDev',
 7 |   data() {
 8 |     return {
 9 |       // theme variable binded to the property of the same name
10 |       theme: "github-dark",  
11 |     };
12 |   },
13 |   components: {
14 |     VueUtterances
15 |   },
16 |   mounted() {
17 |     // after 5 seconds, change theme to github-light
18 |     setTimeout(() => {
19 |       this.theme = 'github-light';
20 |     }, 5000);
21 |   }
22 | });
23 | </script>
24 | 
25 | <template>
26 |   <div id="app">
27 |     <vue-utterances repo="khalby786/vue-utterances" :theme="theme"/>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-utterances",
 3 |   "version": "0.2.4",
 4 |   "description": "Vue.js component for 🔮 utterances 🔮",
 5 |   "license": "MIT",
 6 |   "author": {
 7 |     "email": "khalby786@gmail.com",
 8 |     "name": "Khaleel Gibran",
 9 |     "url": "https://khaleelibran.com"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/khalby786/vue-utterances.git"
14 |   },
15 |   "homepage": "https://vue-utterances.glitch.me",
16 |   "main": "dist/vue-utterances.ssr.js",
17 |   "browser": "dist/vue-utterances.esm.js",
18 |   "module": "dist/vue-utterances.esm.js",
19 |   "unpkg": "dist/vue-utterances.min.js",
20 |   "files": [
21 |     "dist/*",
22 |     "src/**/*.vue"
23 |   ],
24 |   "sideEffects": false,
25 |   "scripts": {
26 |     "serve": "vue-cli-service serve dev/serve.js",
27 |     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
28 |     "build:ssr": "cross-env NODE_ENV=production rollup --config rollup.config.js --format cjs",
29 |     "build:es": "cross-env NODE_ENV=production rollup --config rollup.config.js --format es",
30 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config rollup.config.js --format iife",
31 |     "prepublishOnly": "npm run build"
32 |   },
33 |   "dependencies": {},
34 |   "devDependencies": {
35 |     "@babel/core": "^7.12.10",
36 |     "@babel/preset-env": "^7.12.11",
37 |     "@rollup/plugin-alias": "^3.1.1",
38 |     "@rollup/plugin-babel": "^5.2.2",
39 |     "@rollup/plugin-commonjs": "^17.0.0",
40 |     "@rollup/plugin-node-resolve": "^11.0.1",
41 |     "@rollup/plugin-replace": "^2.3.4",
42 |     "@vue/cli-plugin-babel": "^4.5.10",
43 |     "@vue/cli-service": "^4.5.10",
44 |     "@vue/compiler-sfc": "^3.0.5",
45 |     "cross-env": "^7.0.3",
46 |     "minimist": "^1.2.5",
47 |     "postcss": "^8.2.3",
48 |     "rollup": "^2.36.1",
49 |     "rollup-plugin-postcss": "^4.0.0",
50 |     "rollup-plugin-terser": "^7.0.2",
51 |     "rollup-plugin-vue": "^6.0.0",
52 |     "vue": "^3.0.5"
53 |   },
54 |   "peerDependencies": {
55 |     "vue": "^3.0.5"
56 |   },
57 |   "engines": {
58 |     "node": ">=12"
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import vue from 'rollup-plugin-vue';
  5 | import alias from '@rollup/plugin-alias';
  6 | import commonjs from '@rollup/plugin-commonjs';
  7 | import resolve from '@rollup/plugin-node-resolve';
  8 | import replace from '@rollup/plugin-replace';
  9 | import babel from '@rollup/plugin-babel';
 10 | import PostCSS from 'rollup-plugin-postcss';
 11 | import { terser } from 'rollup-plugin-terser';
 12 | import minimist from 'minimist';
 13 | 
 14 | // Get browserslist config and remove ie from es build targets
 15 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 16 |   .toString()
 17 |   .split('\n')
 18 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 19 | 
 20 | const argv = minimist(process.argv.slice(2));
 21 | 
 22 | const projectRoot = path.resolve(__dirname, '..');
 23 | 
 24 | const baseConfig = {
 25 |   input: 'src/entry.js',
 26 |   plugins: {
 27 |     preVue: [
 28 |       alias({
 29 |         entries: [
 30 |           {
 31 |             find: '@',
 32 |             replacement: `${path.resolve(projectRoot, 'src')}`,
 33 |           },
 34 |         ],
 35 |       }),
 36 |     ],
 37 |     replace: {
 38 |       'process.env.NODE_ENV': JSON.stringify('production'),
 39 |     },
 40 |     vue: {
 41 |     },
 42 |     postVue: [
 43 |       resolve({
 44 |         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 45 |       }),
 46 |       // Process only `<style module>` blocks.
 47 |       PostCSS({
 48 |         modules: {
 49 |           generateScopedName: '[local]___[hash:base64:5]',
 50 |         },
 51 |         include: /&module=.*\.css$/,
 52 |       }),
 53 |       // Process all `<style>` blocks except `<style module>`.
 54 |       PostCSS({ include: /(?<!&module=.*)\.css$/ }),
 55 |     ],
 56 |     babel: {
 57 |       exclude: 'node_modules/**',
 58 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 59 |       babelHelpers: 'bundled',
 60 |     },
 61 |   },
 62 | };
 63 | 
 64 | // ESM/UMD/IIFE shared settings: externals
 65 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 66 | const external = [
 67 |   // list external dependencies, exactly the way it is written in the import statement.
 68 |   // eg. 'jquery'
 69 |   'vue',
 70 | ];
 71 | 
 72 | // UMD/IIFE shared settings: output.globals
 73 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 74 | const globals = {
 75 |   // Provide global variable names to replace your external imports
 76 |   // eg. jquery: '$'
 77 |   vue: 'Vue',
 78 | };
 79 | 
 80 | // Customize configs for individual targets
 81 | const buildFormats = [];
 82 | if (!argv.format || argv.format === 'es') {
 83 |   const esConfig = {
 84 |     ...baseConfig,
 85 |     input: 'src/entry.esm.js',
 86 |     external,
 87 |     output: {
 88 |       file: 'dist/vue-utterances.esm.js',
 89 |       format: 'esm',
 90 |       exports: 'named',
 91 |     },
 92 |     plugins: [
 93 |       replace(baseConfig.plugins.replace),
 94 |       ...baseConfig.plugins.preVue,
 95 |       vue(baseConfig.plugins.vue),
 96 |       ...baseConfig.plugins.postVue,
 97 |       babel({
 98 |         ...baseConfig.plugins.babel,
 99 |         presets: [
100 |           [
101 |             '@babel/preset-env',
102 |             {
103 |               targets: esbrowserslist,
104 |             },
105 |           ],
106 |         ],
107 |       }),
108 |       commonjs(),
109 |     ],
110 |   };
111 |   buildFormats.push(esConfig);
112 | }
113 | 
114 | if (!argv.format || argv.format === 'cjs') {
115 |   const umdConfig = {
116 |     ...baseConfig,
117 |     external,
118 |     output: {
119 |       compact: true,
120 |       file: 'dist/vue-utterances.ssr.js',
121 |       format: 'cjs',
122 |       name: 'VueUtterances',
123 |       exports: 'auto',
124 |       globals,
125 |     },
126 |     plugins: [
127 |       replace(baseConfig.plugins.replace),
128 |       ...baseConfig.plugins.preVue,
129 |       vue(baseConfig.plugins.vue),
130 |       ...baseConfig.plugins.postVue,
131 |       babel(baseConfig.plugins.babel),
132 |       commonjs(),
133 |     ],
134 |   };
135 |   buildFormats.push(umdConfig);
136 | }
137 | 
138 | if (!argv.format || argv.format === 'iife') {
139 |   const unpkgConfig = {
140 |     ...baseConfig,
141 |     external,
142 |     output: {
143 |       compact: true,
144 |       file: 'dist/vue-utterances.min.js',
145 |       format: 'iife',
146 |       name: 'VueUtterances',
147 |       exports: 'auto',
148 |       globals,
149 |     },
150 |     plugins: [
151 |       replace(baseConfig.plugins.replace),
152 |       ...baseConfig.plugins.preVue,
153 |       vue(baseConfig.plugins.vue),
154 |       ...baseConfig.plugins.postVue,
155 |       babel(baseConfig.plugins.babel),
156 |       commonjs(),
157 |       terser({
158 |         output: {
159 |           ecma: 5,
160 |         },
161 |       }),
162 |     ],
163 |   };
164 |   buildFormats.push(unpkgConfig);
165 | }
166 | 
167 | // Export config
168 | export default buildFormats;
169 | 


--------------------------------------------------------------------------------
/src/entry.esm.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Import vue component
 3 | import component from './vue-utterances.vue';
 4 | 
 5 | // Default export is installable instance of component.
 6 | // IIFE injects install function into component, allowing component
 7 | // to be registered via Vue.use() as well as Vue.component(),
 8 | export default /*#__PURE__*/(() => {
 9 |   // Get component instance
10 |   const installable = component;
11 | 
12 |   // Attach install function executed by Vue.use()
13 |   installable.install = (app) => {
14 |     app.component('VueUtterances', installable);
15 |   };
16 |   return installable;
17 | })();
18 | 
19 | // It's possible to expose named exports when writing components that can
20 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
21 | // export const RollupDemoDirective = directive;
22 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import component, * as namedExports from './entry.esm';
 3 | 
 4 | // Attach named exports directly to component. IIFE/CJS will
 5 | // only expose one global var, with named exports exposed as properties of
 6 | // that global var (eg. plugin.namedExport)
 7 | Object.entries(namedExports).forEach(([exportName, exported]) => {
 8 |   if (exportName !== 'default') component[exportName] = exported;
 9 | });
10 | 
11 | export default component;
12 | 


--------------------------------------------------------------------------------
/src/vue-utterances.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { defineComponent } from "vue";
 3 | 
 4 | export default /*#__PURE__*/ defineComponent({
 5 |   name: "VueUtterances", // vue component name
 6 |   data() {
 7 |     return {};
 8 |   },
 9 |   props: {
10 |     repo: {
11 |       type: String,
12 |       default: "[ENTER REPO HERE]",
13 |       required: true,
14 |     },
15 |     issueTerm: {
16 |       type: String,
17 |       default: "pathname",
18 |     },
19 |     theme: {
20 |       type: String,
21 |       default: "github-light",
22 |     },
23 |     label: {
24 |       type: String,
25 |       default: "",
26 |     }
27 |   },
28 |   mounted() {
29 |     let utterances = document.createElement("script");
30 | 
31 |     utterances.async = true;
32 |     utterances.setAttribute("src", "https://utteranc.es/client.js");
33 |     utterances.setAttribute("repo", this.repo);
34 |     utterances.setAttribute("issue-term", this.issueTerm);
35 |     if (this.label !== "") {
36 |       utterances.setAttribute("label", this.label);
37 |     }
38 |     utterances.setAttribute("theme", this.theme);
39 |     utterances.setAttribute("crossorigin", "anonymous");
40 | 
41 |     this.$refs.vueUtterances.appendChild(utterances);
42 |   },
43 |   watch: {
44 |     theme: function(newTheme, oldTheme) {
45 |       console.log(newTheme);
46 |       console.log(oldTheme);
47 |       this.$refs.vueUtterances.querySelector("iframe").contentWindow.postMessage(
48 |         {
49 |           type: "set-theme",
50 |           theme: newTheme, // theme you want
51 |         },
52 |         "https://utteranc.es"
53 |       );
54 |     },
55 |   }
56 | });
57 | </script>
58 | 
59 | <template>
60 |   <div class="vue-utterances" ref="vueUtterances">
61 |     <!-- utterances script here -->
62 |   </div>
63 | </template>
64 | 
65 | <style scoped></style>
66 | 


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