JSON-LD data in data/json-ld

wramzo · Apr 5, 2020 · 6f08bf3 · 6f08bf3
1 parent e4a45bf
commit 6f08bf3
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 86 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,12 +23,6 @@ module.exports = {
                 indent: 0,
             },
         },
-        {
-            files: ['components/json-ld/*.vue'],
-            rules: {
-                'vue/html-indent': 0,
-            },
-        },
     ],
     rules: {
         indent: ['error', 4],
@@ -48,6 +42,5 @@ module.exports = {
         }],
         'vue/no-unused-vars': 0,
         'vue/html-self-closing': 0,
-        'vue/require-component-is': 0,
     },
 };
diff --git a/components/json-ld/tutorial.vue b/components/json-ld/tutorial.vue
@@ -1,38 +1,10 @@
 <template>
-    <Script type="application/ld+json">
-        {
-            "@context": "http://schema.org",
-            "@type": "TechArticle",
-            "name": "{{ tutorial.name }}",
-            "headline": "{{ tutorial.name }}",
-            "description": "{{ tutorial.description }}",
-            "keywords": "{{ tutorial.keywords && tutorial.keywords.join(',') }}",
-            "url": "{{ base() }}{{ library }}/tutorials/{{ tutorialName }}",
-            "inLanguage": "en",
-            "accessMode": "textual",
-            "accessModeSufficient": "textual",
-            "isAccessibleForFree": true,
-            "isPartOf": "{{ base() }}{{ library }}/tutorials",
-            "author": {
-                "@type": "Person",
-                "name": "{{ tutorial.author.name }}"
-            },
-            "publisher": {
-                "@type": "Organization",
-                "name": "cdnjs",
-                "url": "{{ base() }}"
-            },
-            "sourceOrganization": {
-                "@type": "Organization",
-                "name": "cdnjs",
-                "url": "{{ base() }}"
-            }
-        }
-    </Script>
+    <Script v-html="json" type="application/ld+json"></Script>
 </template>
 
 <script>
     import Script from '../script';
+    import Tutorial from '../../data/json-ld/tutorial';
 
     export default {
         name: 'JSONLDTutorial',
@@ -44,7 +16,10 @@
             tutorial: Object,
             tutorialName: String,
         },
-        methods: {
+        computed: {
+            json () {
+                return Tutorial(this.base, this.$props.tutorial, this.$props.tutorialName, this.$props.library);
+            },
             base () {
                 const origin = process.env.SITE_HOST ||
                     (typeof (window) !== 'undefined' ? window.location.origin : '/');

diff --git a/components/json-ld/tutorials.vue b/components/json-ld/tutorials.vue
@@ -1,34 +1,10 @@
 <template>
-    <Script type="application/ld+json">
-        {
-            "@context": "http://schema.org",
-            "@type": "CreativeWorkSeries",
-            "name": "{{ library }} Tutorials",
-            "headline": "{{ library }} Tutorials",
-            "description": "Tutorials for {{ library }} on cdnjs",
-            "keywords": "{{ keywords() }}",
-            "url": "{{ base() }}{{ library }}/tutorials",
-            "inLanguage": "en",
-            "accessMode": "textual",
-            "accessModeSufficient": "textual",
-            "isAccessibleForFree": true,
-            "isPartOf": "{{ base() }}{{ library }}",
-            "publisher": {
-                "@type": "Organization",
-                "name": "cdnjs",
-                "url": "{{ base() }}"
-            },
-            "sourceOrganization": {
-                "@type": "Organization",
-                "name": "cdnjs",
-                "url": "{{ base() }}"
-            }
-        }
-    </Script>
+    <Script v-html="json" type="application/ld+json"></Script>
 </template>
 
 <script>
     import Script from '../script';
+    import Tutorials from '../../data/json-ld/tutorials';
 
     export default {
         name: 'JSONLDTutorials',
@@ -39,10 +15,17 @@
             library: String,
             tutorials: Object,
         },
-        methods: {
+        computed: {
+            json () {
+                return Tutorials(this.base, this.$props.library, this.$props.tutorials, this.keywords);
+            },
             keywords () {
                 const tags = [];
-                for (const tutorial of Object.values(this.$props.tutorials)) { if (tutorial.keywords) { tags.push(...tutorial.keywords); } }
+                for (const tutorial of Object.values(this.$props.tutorials)) {
+                    if (tutorial.keywords) {
+                        tags.push(...tutorial.keywords);
+                    }
+                }
                 return tags.join(',');
             },
             base () {

diff --git a/components/json-ld/website.vue b/components/json-ld/website.vue
@@ -1,33 +1,20 @@
 <template>
-    <Script type="application/ld+json">
-        {
-            "@context": "http://schema.org",
-            "@type": "WebSite",
-            "name": "cdnjs",
-            "alternateName": "CDNJS",
-            "description": "The #1 free and open source CDN built to make life easier for developers",
-            "logo": "{{ base() }}favicon.png",
-            "thumbnailUrl": "{{ base() }}banner.png",
-            "url": "{{ base() }}",
-            "sameAs": ["https://github.com/cdnjs", "https://twitter.com/cdnjs", "https://linkedin.com/company/cdnjs"],
-            "potentialAction": {
-                "@type": "SearchAction",
-                "target": "{{ base() }}libraries?&q={query}",
-                "query": "required"
-            }
-        }
-    </Script>
+    <Script v-html="json" type="application/ld+json"></Script>
 </template>
 
 <script>
     import Script from '../script';
+    import WebSite from '../../data/json-ld/website';
 
     export default {
         name: 'JSONLDWebSite',
         components: {
             Script,
         },
-        methods: {
+        computed: {
+            json () {
+                return WebSite(this.base);
+            },
             base () {
                 const origin = process.env.SITE_HOST ||
                     (typeof (window) !== 'undefined' ? window.location.origin : '/');

diff --git a/components/script.vue b/components/script.vue
@@ -1,4 +1,5 @@
 <template>
+    <!-- eslint-disable-next-line vue/require-component-is -->
     <component is="script" v-html="content"></component>
 </template>
 

diff --git a/components/tutorial_list.vue b/components/tutorial_list.vue
@@ -44,7 +44,7 @@
 
 <script>
     import utm from '../util/utm';
-    import JSONLDTutorials from '../../../../components/json-ld/tutorials';
+    import JSONLDTutorials from './json-ld/tutorials';
 
     export default {
         name: 'TutorialList',

diff --git a/data/json-ld/tutorial.js b/data/json-ld/tutorial.js
@@ -0,0 +1,31 @@
+export default (base, tutorial, tutorialName, library) => JSON.stringify({
+    '@context': 'http://schema.org',
+    '@type': 'TechArticle',
+    name: tutorial.name,
+    headline: tutorial.name,
+    description: tutorial.description,
+    keywords: tutorial.keywords && tutorial.keywords.join(','),
+    url: `${base}libraries/${library}/tutorials/${tutorialName}`,
+    inLanguage: 'en',
+    accessMode: 'textual',
+    accessModeSufficient: 'textual',
+    isAccessibleForFree: true,
+    isPartOf: {
+        '@type': 'CreativeWorkSeries',
+        url: `${base}libraries/${library}/tutorials`,
+    },
+    author: {
+        '@type': 'Person',
+        name: '{{ tutorial.author.name }}',
+    },
+    publisher: {
+        '@type': 'Organization',
+        name: 'cdnjs',
+        url: '{{ base() }}',
+    },
+    sourceOrganization: {
+        '@type': 'Organization',
+        name: 'cdnjs',
+        url: '{{ base() }}',
+    },
+});
diff --git a/data/json-ld/tutorials.js b/data/json-ld/tutorials.js
@@ -0,0 +1,29 @@
+export default (base, library, tutorials, keywords) => JSON.stringify({
+    '@context': 'http://schema.org',
+    '@type': 'CreativeWorkSeries',
+    name: `${library} Tutorials`,
+    headline: `${library} Tutorials`,
+    description: `Tutorials for ${library} on cdnjs`,
+    keywords,
+    url: `${base}libraries/${library}/tutorials`,
+    inLanguage: 'en',
+    accessMode: 'textual',
+    accessModeSufficient: 'textual',
+    isAccessibleForFree: true,
+    isPartOf: `${base}libraries/${library}`,
+    hasPart: Object.entries(tutorials).map(d => ({
+        '@type': 'TechArticle',
+        name: d[1].name,
+        url: `${base}libraries/${library}/tutorials/${d[0]}`,
+    })),
+    publisher: {
+        '@type': 'Organization',
+        name: 'cdnjs',
+        url: base,
+    },
+    sourceOrganization: {
+        '@type': 'Organization',
+        name: 'cdnjs',
+        url: base,
+    },
+});
diff --git a/data/json-ld/website.js b/data/json-ld/website.js
@@ -0,0 +1,16 @@
+export default base => JSON.stringify({
+    '@context': 'http://schema.org',
+    '@type': 'WebSite',
+    name: 'cdnjs',
+    alternateName: 'CDNJS',
+    description: 'The #1 free and open source CDN built to make life easier for developers',
+    logo: `${base}favicon.png`,
+    thumbnailUrl: `${base}banner.png`,
+    url: base,
+    sameAs: ['https://github.com/cdnjs', 'https://twitter.com/cdnjs', 'https://linkedin.com/company/cdnjs'],
+    potentialAction: {
+        '@type': 'SearchAction',
+        target: `${base}libraries?&q={query}`,
+        query: 'required',
+    },
+});