first commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,2 @@
+# vue-jsonld
+

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue-jsonld",
+  "version": "0.0.1",
+  "description": "manage jsonld in Vue component.",
+  "main": "./src/index.js",
+  "repository": "ssh://[email protected]/ryota-yamamoto/vue-jsonld.git",
+  "author": "Ryota Yamamoto <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "attribute",
+    "head",
+    "meta",
+    "seo",
+    "vue"
+  ],
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "vue-meta": "^1.5.6"
+  },
+  "devDependencies": {
+    "eslint": "^5.9.0",
+    "jest": "^23.6.0",
+    "prettier": "^1.15.2",
+    "vue": "^2.5.17"
+  }
+}

src/index.js

@@ -0,0 +1,9 @@
+const VueMeta = require('vue-meta');
+const vueMetaJsonldMixin = require('./mixin');
+
+module.exports = {
+  install(Vue, options = {}) {
+    Vue.use(VueMeta, options);
+    Vue.mixin(vueMetaJsonldMixin);
+  }
+}

src/mixin.js

@@ -0,0 +1,21 @@
+module.exports = {
+  head() {
+    if (!this.$options || typeof this.$options.jsonld !== 'function') {
+      return {};
+    }
+
+    const hid = `vue-jsonld-${this._uid}`;
+    return {
+      script: [
+        {
+          hid,
+          type: 'application/ld+json',
+          innerHTML: JSON.stringify(this.$options.jsonld.call(this), null, 2),
+        },
+      ],
+      __dangerouslyDisableSanitizersByTagID: {
+        [hid]: 'innerHTML',
+      },
+    };
+  },
+};

test/mixin.spec.js

@@ -0,0 +1,88 @@
+const Vue = require('vue');
+const vueMetaJsonldMixin = require('../src/mixin');
+
+describe('without jsonld', () => {
+  test('head method returns an empty object when jsonld is not defined', () => {
+    const mock = new Vue({ mixins: [vueMetaJsonldMixin] });
+    expect(mock.$options.head.call(mock)).toEqual({});
+  });
+
+  test('head method returns an empty object when jsonld is not a function', () => {
+    const mock = new Vue({
+      mixins: [vueMetaJsonldMixin],
+      jsonld: 'hoge',
+    });
+    expect(mock.$options.head.call(mock)).toEqual({});
+  });
+});
+
+describe('with jsonld', () => {
+  test('head method returns jsonld metaInfo', () => {
+    const mock = new Vue({
+      mixins: [vueMetaJsonldMixin],
+      data() {
+        return {
+          breadcrumbs: [
+            {
+              url: 'https://example.com/',
+              name: 'top page',
+            },
+            {
+              url: 'https://example.com/foo/',
+              name: 'foo',
+            },
+          ],
+        };
+      },
+      jsonld() {
+        const items = this.breadcrumbs.map((item, index) => ({
+          '@type': 'ListItem',
+          position: index + 1,
+          item: {
+            '@id': item.url,
+            name: item.text,
+          },
+        }));
+        return {
+          '@context': 'http://schema.org',
+          '@type': 'BreadcrumbList',
+          itemListElement: items,
+        };
+      },
+    });
+
+    const mockHid = `vue-jsonld-${mock._uid}`;
+
+    expect(mock.$options.head.call(mock)).toEqual({
+      __dangerouslyDisableSanitizersByTagID: {
+        [mockHid]: 'innerHTML',
+      },
+      script: [
+        {
+          hid: mockHid,
+          innerHTML: `{
+  "@context": "http://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "item": {
+        "@id": "https://example.com/"
+      }
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "item": {
+        "@id": "https://example.com/foo/"
+      }
+    }
+  ]
+}`,
+          type: 'application/ld+json',
+        },
+      ],
+    });
+  });
+});