Fix: Portfolio site leads to 404

src/libraries/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Verifies whether the url starts with http:// or https://
+ * @function
+ * @param {string} url - The url of the portfolio site
+ * @returns {boolean} 
+ */
+ const isValidUrl = (url) => {
+  return url.indexOf("https://") === 0 || url.indexOf("http://") === 0
+ }
+
+ /**
+ * Our CMS does not validate urls,
+ * urls are entered in manually by the author,
+ * so this is to ensure a valid url to navigate to
+ * @function
+ * @param {string} url - The url of the portfolio site
+ * @returns {string} url - The passed in url or a new url 
+ * with https appended to it
+ */
+ export const validUrl = (url = "") => {
+    const https = "https://";
+    const trimmedUrl = url.trim();
+
+    if (isValidUrl(trimmedUrl)) {
+      return trimmedUrl;
+    }
+    return https + trimmedUrl;
+  };

src/pages/About.vue

@@ -47,7 +47,7 @@
         <a
           class="ml-auto text-xl font-extrabold"
           v-if="member.node.contact_links.portfolio_url"
-          :href="member.node.contact_links.portfolio_url"
+          :href="validUrl(member.node.contact_links.portfolio_url)"
           >site</a
         >
       </article>
@@ -86,9 +86,21 @@ query
 </page-query>
 
 <script>
+import {validUrl} from "../libraries/utils";  
 export default {
   metaInfo: {
     title: "About us",
   },
+    methods: {
+    validUrl
+  }
+  // methods: {
+  //   validUrl
+  // },
+  // computed: {
+  //   portfolioUrl() {
+  //     // return this.validUrl(member.node.contact_links.portfolio_url)
+  //  }
+  // }
 };
 </script>

src/templates/Biopost.vue

@@ -16,13 +16,13 @@
         />
         <a
           v-if="$page.biopost.contact_links.email"
-          :href="`mailto:${$page.biopost.contact_links.email}`"
+          href="`mailto:${$page.biopost.contact_links.email}`"
           class="font-bold underline"
           >Email</a
         >
         <a
           v-if="$page.biopost.contact_links.portfolio_url"
-          :href="$page.biopost.contact_links.portfolio_url"
+          :href="portfolioUrl"
           class="font-bold underline"
           >Portfolio</a
         >
@@ -63,12 +63,21 @@
 </template>
 
 <script>
+import {validUrl} from "../libraries/utils";
 export default {
   metaInfo() {
     return {
       title: this.$page.biopost.title,
     };
   },
+  methods: {
+    validUrl
+  },
+  computed: {
+    portfolioUrl() {
+      return this.validUrl(this.$page.biopost.contact_links.portfolio_url)
+    }
+  }
 };
 </script>