LicenseInfo: Add (opt-in) support for shields.io fallback badges

gbv · Aug 1, 2024 · 5f08a79 · 5f08a79
1 parent aee1b39
commit 5f08a79
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/docs/components/LicenseInfo.md b/docs/components/LicenseInfo.md
@@ -4,6 +4,8 @@ Component to display license information for a JSKOS item.
 ## Props
 - `item` (object) - JSKOS item (concept or concept scheme)
   - required
+- `shieldsIoOptIn` (boolean) - opt into fallback badges from shields.io
+  - default: `false`
 
 ## Examples
 
@@ -25,6 +27,10 @@ const item = {
       uri: "http://example.com/license-no-label/",
       notation: ["NOL"],
     },
+    {
+      uri: "http://example.com/license-only-label/",
+      prefLabel: { en: "Test Label" },
+    },
     {
       uri: "http://example.com/license-no-label-no-notation/",
     },
@@ -40,7 +46,9 @@ const item = {
 }
 </script>
 
-<license-info :item="item" />
+<license-info 
+  :item="item"
+  :shields-io-opt-in="true" />
 
 ```vue
 <script setup>
@@ -50,13 +58,23 @@ const item = {
   license: [
     {
       uri: "http://creativecommons.org/publicdomain/zero/1.0/",
+      notation: ["CC0"],
     },
     {
       uri: "http://example.com/license/",
       prefLabel: { en: "Example License" },
+      notation: ["EX"],
     },
     {
       uri: "http://example.com/license-no-label/",
+      notation: ["NOL"],
+    },
+    {
+      uri: "http://example.com/license-only-label/",
+      prefLabel: { en: "Test Label" },
+    },
+    {
+      uri: "http://example.com/license-no-label-no-notation/",
     },
   ],
   publisher: [
@@ -71,6 +89,8 @@ const item = {
 </script>
 
 <template>
-  <license-info :item="item" />
+  <license-info 
+    :item="item"
+    :shields-io-opt-in="true" />
 </template>
 ```
diff --git a/src/components/LicenseInfo.vue b/src/components/LicenseInfo.vue
@@ -8,8 +8,8 @@
       :title="`${getLicenseName(license)} by ${licenseAttribution.label}`"
       class="jskos-vue-itemDetails-licenseInfo-badge">
       <img
-        v-if="licenseBadges[license.uri]"
-        :src="licenseBadges[license.uri]">
+        v-if="getLicenseBadge(license)"
+        :src="getLicenseBadge(license)">
       <span v-else>
         {{ getLicenseName(license) }}
       </span>
@@ -33,6 +33,10 @@ export default defineComponent({
       type: Object,
       required: true,
     },
+    shieldsIoOptIn: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const licenseBadges = {
@@ -43,8 +47,17 @@ export default defineComponent({
       "http://creativecommons.org/licenses/by-nc-nd/4.0/": "https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-nd.svg",
       "http://creativecommons.org/licenses/by-nc-sa/4.0/": "https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-sa.svg",
       "http://creativecommons.org/licenses/by-sa/4.0/": "https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg",
-      "http://opendatacommons.org/licenses/odbl/1.0/": "https://img.shields.io/badge/License-ODbL-lightgrey.svg",
-      "http://www.wtfpl.net/": "https://img.shields.io/badge/License-WTFPL-lightgrey.svg",
+    }
+    const getLicenseBadge = (license) => {
+      if (licenseBadges[license.uri]) {
+        return licenseBadges[license.uri]
+      }
+      const text = license.notation?.[0] || jskos.prefLabel(license, { fallbackToUri: false })
+      if (props.shieldsIoOptIn && text) {
+        // Create a dynamic shields.io badge with notation
+        return `https://img.shields.io/badge/${encodeURIComponent(text).replaceAll("_", "__").replaceAll("-", "--")}-000000?style=flat-square`
+      }
+      return null
     }
     const getLicenseName = (license) => {
       const prefLabel = jskos.prefLabel(license, { fallbackToUri: false })
@@ -68,8 +81,8 @@ export default defineComponent({
       }
     })
     return {
-      licenseBadges,
       licenseAttribution,
+      getLicenseBadge,
       getLicenseName,
       jskos,
     }