Fix: Portfolio site leads to 404

src/libraries/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Verifies whether the url starts with http:https:// 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:https://") === 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>