refactor: extract reusable utility

Author: Dobromir Hristov

src/components/CardCover.vue

@@ -19,9 +19,7 @@
 
 <script>
 import imageAsset from 'docc-render/mixins/imageAsset';
-import { normalizeAssetUrl } from 'docc-render/utils/assets';
-
-const toCSSUrl = url => (url ? `url('${normalizeAssetUrl(url)}')` : undefined);
+import { toCSSUrl } from 'docc-render/utils/assets';
 
 export default {
   name: 'CardCover',

src/components/Tutorial/Hero.vue

@@ -73,7 +73,7 @@ import LinkableElement from 'docc-render/components/LinkableElement.vue';
 
 import GenericModal from 'docc-render/components/GenericModal.vue';
 import PlayIcon from 'theme/components/Icons/PlayIcon.vue';
-import { normalizeAssetUrl } from 'docc-render/utils/assets';
+import { normalizeAssetUrl, toCSSUrl } from 'docc-render/utils/assets';
 import HeroMetadata from './HeroMetadata.vue';
 
 export default {
@@ -140,14 +140,14 @@ export default {
         variant.traits.includes('light')
       ));
 
-      return lightVariant ? normalizeAssetUrl(lightVariant.url) : '';
+      return (lightVariant || {}).url;
     },
     projectFilesUrl() {
       return this.projectFiles ? normalizeAssetUrl(this.references[this.projectFiles].url) : null;
     },
     bgStyle() {
       return {
-        backgroundImage: `url('${this.backgroundImageUrl}')`,
+        backgroundImage: toCSSUrl(this.backgroundImageUrl),
       };
     },
     xcodeRequirementData() {

src/utils/assets.js

@@ -75,3 +75,10 @@ export function normalizeAssetUrl(url) {
   }
   return pathJoin([baseUrl, url]);
 }
+
+/**
+ * Transforms a URL string into a normalized css `url(/path)` format.
+ * @param {String} url
+ * @returns {string|undefined}
+ */
+export function toCSSUrl(url) { return url ? `url('${normalizeAssetUrl(url)}')` : undefined; }