Fix FAQ links (#30)

fbjorn · web-flow · commit b719c975b76b · 2025-09-04T17:54:19.000+03:00
* Fix internal/external links in FAQ

* Handle cmd+ctrl click
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/FAQ.svelte b/src/lib/components/FAQ.svelte
@@ -13,6 +13,14 @@
     isOpen = !isOpen
   }
 
+  function handleClick(event: MouseEvent) {
+    // If ctrl/cmd key is pressed, don't toggle, open the link in new tab
+    if (event.ctrlKey || event.metaKey) {
+      return
+    }
+    toggleOpen()
+  }
+
   function makeId(question: string) {
     return question
       .toLowerCase()
@@ -31,7 +39,7 @@
 
 <div
   class="faq"
-  on:click={toggleOpen}
+  on:click={handleClick}
   on:keydown={(e) => e.key === "Enter" && toggleOpen()}
   aria-expanded={isOpen}
   tabindex="0"
@@ -42,7 +50,10 @@
     <a
       href={`#${id}`}
       on:click={(e) => {
-        e.preventDefault()
+        // for opening in new tab
+        if (!e.ctrlKey && !e.metaKey) {
+          e.preventDefault()
+        }
       }}
     >
       <div class="link-icon">
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,7 +1,5 @@
 export function isInternalLink(url: string): boolean {
-  if (url.startsWith("http://") || url.startsWith("https://")) {
-    return false
-  } else {
-    return true
-  }
+  const docsAbsoluteUrl = url.startsWith("https://docs.ioxio.dev/")
+  const relativeUrl = url.startsWith("/")
+  return docsAbsoluteUrl || relativeUrl
 }
diff --git a/src/routes/faq/qa/data/003-what-kind-of-data-definitions-are-availa.svelte b/src/routes/faq/qa/data/003-what-kind-of-data-definitions-are-availa.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What kind of data definitions are available?"}>
@@ -11,7 +12,7 @@
   </p>
   <p>
     If you have an idea what kind of data you would like to share, you can always suggest a data
-    product to us either on our <a href="https://slack.ioxio.com">community Slack</a>, or directly
-    via <a href="https://github.com/ioxio-dataspace/ioxio-io-definitions/">GitHub.</a>
+    product to us either on our <A href="https://slack.ioxio.com">community Slack</A>, or directly
+    via <A href="https://github.com/ioxio-dataspace/ioxio-io-definitions/">GitHub.</A>
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/001-what-is-ioxioio-data-sharing-service.svelte b/src/routes/faq/qa/ioxioio/001-what-is-ioxioio-data-sharing-service.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is IOXIO.io data sharing service?"}>
   <p>
-    Our data sharing service <a href="http://ioxio.io/">IOXIO.io</a> is meant for anyone who wants
-    to make their data available, or consume data from multiple sources. Read more about it on our
-    <a href="https://docs.ioxio.dev/dataspace/">Dataspace page</a>.
+    Our data sharing service <A href="http://ioxio.io/">IOXIO.io</A> is meant for anyone who wants to
+    make their data available, or consume data from multiple sources. Read more about it on our
+    <A href="https://docs.ioxio.dev/dataspace/">Dataspace page</A>.
   </p>
   <p>
     We help you get your data moving and remove the overhead and mess of having multiple different
diff --git a/src/routes/faq/qa/ioxioio/002-what-are-the-benefits-of-ioxioio-data-sh.svelte b/src/routes/faq/qa/ioxioio/002-what-are-the-benefits-of-ioxioio-data-sh.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What are the benefits of IOXIO.io data sharing service?"}>
   <p>
-    On <a href="http://ioxio.io/">IOXIO.io</a> your company can collaborate with all your data
-    sharing partners. The platform allows you to define what data you want to share, implement data
-    sources, manage access to your data, and consume data from different parties. You keep ownership
-    of your own data, while we ensure the data is transferred securely in a harmonized format
-    between the parties. With one integration to <a href="http://ioxio.io/">IOXIO.io</a>, you can
-    share your data with anyone and control access to your data.
+    On <A href="http://ioxio.io/">IOXIO.io</A> your company can collaborate with all your data sharing
+    partners. The platform allows you to define what data you want to share, implement data sources,
+    manage access to your data, and consume data from different parties. You keep ownership of your own
+    data, while we ensure the data is transferred securely in a harmonized format between the parties.
+    With one integration to <A href="http://ioxio.io/">IOXIO.io</A>, you can share your data with
+    anyone and control access to your data.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/003-whats-the-difference-between-a-data-lake.svelte b/src/routes/faq/qa/ioxioio/003-whats-the-difference-between-a-data-lake.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
-<FAQ question={"What’s the difference between a data lake or a data warehouse and a dataspace?"}>
+<FAQ question={"What's the difference between a data lake or a data warehouse and a dataspace?"}>
   <p>
-    Unlike data lakes or data warehouses, which store data in a centralized repository, <a
-      href="http://ioxio.io/">IOXIO.io</a
+    Unlike data lakes or data warehouses, which store data in a centralized repository, <A
+      href="http://ioxio.io/">IOXIO.io</A
     > data sharing service provides a federated approach where data remains with its original owner and
     is transferred only on demand based on predefined rules and agreements. This ensures greater data
     control, privacy, and compliance with regulations like GDPR.
diff --git a/src/routes/faq/qa/ioxioio/006-what-is-the-process-for-onboarding-data-.svelte b/src/routes/faq/qa/ioxioio/006-what-is-the-process-for-onboarding-data-.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is the process for onboarding data providers and developers onto IOXIO.io?"}>
   <p>
-    Our process is very simple! Once you have an API that follows one of the data product’s
+    Our process is very simple! Once you have an API that follows one of the data product's
     definitions that the Dataspace offers, you only need to register an account, create or join a
     group, and connect your API to the Dataspace.
   </p>
   <p>
-    To get started you can check out our <a href="https://docs.ioxio.dev/get-started"
-      >getting started page</a
+    To get started you can check out our <A href="https://docs.ioxio.dev/get-started"
+      >getting started page</A
     >.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/007-what-level-of-technical-expertise-is-req.svelte b/src/routes/faq/qa/ioxioio/007-what-level-of-technical-expertise-is-req.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What level of technical expertise is required to use IOXIO.io?"}>
@@ -10,7 +11,7 @@
     e.g. an “Integration Platform as a service” (IPaaS).
   </p>
   <p>
-    <a href="http://IOXIO.io">IOXIO.io</a> can then handle managing access, tracking errors and communicating
+    <A href="http://IOXIO.io">IOXIO.io</A> can then handle managing access, tracking errors and communicating
     the expected data structure to people you want share data with. After the initial setup of the API
     basically anyone who can use a web browser can maintain the integration, access control and your
     group.
diff --git a/src/routes/faq/qa/ioxioio/009-what-kind-of-support-is-available-for-co.svelte b/src/routes/faq/qa/ioxioio/009-what-kind-of-support-is-available-for-co.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What kind of support is available for companies using IOXIO.io?"}>
   <p>
-    We have our <a href="https://slack.ioxio.dev">open community Slack</a> where you can come chat
-    with us and ask help from our core developers, or use our support email at
-    <a href="mailto:support@ioxio.com">support@ioxio.com</a>. We also offer consultation services to
+    We have our <A href="https://slack.ioxio.dev">open community Slack</A> where you can come chat with
+    us and ask help from our core developers, or use our support email at
+    <A href="mailto:support@ioxio.com">support@ioxio.com</A>. We also offer consultation services to
     help companies tackle different kinds of data sharing problems, so if you need help defining
     your data sharing cases, data structure or anything else data related, or in just getting on top
     of your general data sharing capabilities, get in touch via email at
-    <a href="mailto:sales@ioxio.com">sales@ioxio.com</a>.
+    <A href="mailto:sales@ioxio.com">sales@ioxio.com</A>.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/010-who-can-use-and-benefit-from-ioxio-datas.svelte b/src/routes/faq/qa/ioxioio/010-who-can-use-and-benefit-from-ioxio-datas.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"Who can use and benefit from IOXIO Dataspace™?"}>
@@ -10,7 +11,7 @@
     sectors.
   </p>
   <p>
-    Private companies can leverage <a href="http://IOXIO.io">IOXIO.io</a> to optimize supply chains,
+    Private companies can leverage <A href="http://IOXIO.io">IOXIO.io</A> to optimize supply chains,
     enhance data-driven decision-making, and foster partnerships with other businesses. Public organizations
     and governments can use IOXIO.io to improve inter-agency communication, facilitate transparency,
     and deliver better services to citizens.
diff --git a/src/routes/faq/qa/ioxioio/011-what-kind-of-companies-can-benefit-from-.svelte b/src/routes/faq/qa/ioxioio/011-what-kind-of-companies-can-benefit-from-.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What kind of companies can benefit from using IOXIO Dataspace™?"}>
@@ -12,8 +13,8 @@
   <p>
     Digital product passports are setting a lot of requirements for different industries operating
     within the EU, and we aim to provide tools for tackling the complicated landscape for everyone.
-    If we don’t cover your use cases yet, you can contact us at <a href="mailto:sales@ioxio.com"
-      >sales@ioxio.com</a
+    If we don't cover your use cases yet, you can contact us at <A href="mailto:sales@ioxio.com"
+      >sales@ioxio.com</A
     > so we can see what kind of data products we could offer for you.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/012-what-is-the-expected-uptime-for-ioxioio.svelte b/src/routes/faq/qa/ioxioio/012-what-is-the-expected-uptime-for-ioxioio.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is the expected uptime for IOXIO.io?"}>
   <p>Currently we aim for 99% uptime.</p>
   <p>
-    You can check the <a href="https://status.ioxio.io/">status page</a> for up to date information on
+    You can check the <A href="https://status.ioxio.io/">status page</A> for up to date information on
     our past uptime.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/ioxioio/014-will-i-get-vendor-locked-into-ioxioio.svelte b/src/routes/faq/qa/ioxioio/014-will-i-get-vendor-locked-into-ioxioio.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"Will I get vendor locked into IOXIO.io?"}>
   <p>
     No, since you will always keep your data, and we always allow you to just start creating your
-    own API integrations if you for whatever reason feel that using <a href="http://IOXIO.io"
-      >IOXIO.io</a
-    > isn’t for you. Using IOXIO.io doesn’t limit your data sharing in any way outside of the integrations
+    own API integrations if you for whatever reason feel that using <A href="http://IOXIO.io"
+      >IOXIO.io</A
+    > isn't for you. Using IOXIO.io doesn't limit your data sharing in any way outside of the integrations
     you make to the IOXIO.io, and the API implementations required are not special to IOXIO.io or our
     dataspace technology.
   </p>
diff --git a/src/routes/faq/qa/ioxioio/015-what-is-the-pricing-model-for-ioxioio.svelte b/src/routes/faq/qa/ioxioio/015-what-is-the-pricing-model-for-ioxioio.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is the pricing model for IOXIO.io?"}>
   <p>
     Sharing data is free. For consuming data we operate on monthly subscription model. To get an
-    offer please contact us at <a href="mailto:sales@ioxio.com">sales@ioxio.com</a>.
+    offer please contact us at <A href="mailto:sales@ioxio.com">sales@ioxio.com</A>.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/technology/002-what-are-digital-product-passports-and-i.svelte b/src/routes/faq/qa/technology/002-what-are-digital-product-passports-and-i.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What are Digital Product Passports and IOXIO Tags&trade;?"}>
@@ -17,7 +18,7 @@
     will need to combine a lot of different data points for your product.
   </p>
   <p>
-    Our <a href="https://docs.ioxio.dev/tags/">IOXIO Tags&trade;</a> protocol is a solution that allows
+    Our <A href="https://docs.ioxio.dev/tags/">IOXIO Tags&trade;</A> protocol is a solution that allows
     you to use different data providers on a dataspace to combine all of them into one report, and link
     it onto a physical carrier like QR code or an RFID yarn.
   </p>
diff --git a/src/routes/faq/qa/vocabulary/001-what-is-a-dataspace.svelte b/src/routes/faq/qa/vocabulary/001-what-is-a-dataspace.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is a dataspace?"}>
@@ -8,8 +9,8 @@
     environment for data standardization, communication, control and sharing which ensures
     interoperability of data between multiple parties, and ensures the data is harmonized between
     different providers of data so consuming similar data from different parties can be as straight
-    forward as possible. Read more about it on our <a href="https://docs.ioxio.dev/dataspace/"
-      >dataspace page</a
+    forward as possible. Read more about it on our <A href="https://docs.ioxio.dev/dataspace/"
+      >dataspace page</A
     >.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/vocabulary/002-what-is-a-data-definition.svelte b/src/routes/faq/qa/vocabulary/002-what-is-a-data-definition.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is a data definition?"}>
   <p>
     Data definitions define data products. In practice data definitions are Open API Spec 3.x based
-    .json files publicly available on the Dataspace’s GitHub, which outline the structure of API
+    .json files publicly available on the Dataspace's GitHub, which outline the structure of API
     calls you can make through the Dataspace. These files define the taxonomical structure of your
     APIs, and define the JSON fields used in the requests and responses.
   </p>
   <p>
-    One API transaction following data definition constitutes one <a
-      href="https://docs.ioxio.dev/faq/#data_product">data product</a
+    One API transaction following data definition constitutes one <A
+      href="https://docs.ioxio.dev/faq/#data_product">data product</A
     >.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/vocabulary/003-what-is-a-data-product.svelte b/src/routes/faq/qa/vocabulary/003-what-is-a-data-product.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is a data product?"}>
   <p>
     A data product is a product that facilitates an end goal through the use of data. Each API call
-    done over the Dataspace should constitute one Data product, which are outlined using <a
-      href="https://docs.ioxio.dev/faq/#vocabulary_data_definition">data definitions</a
+    done over the Dataspace should constitute one Data product, which are outlined using <A
+      href="https://docs.ioxio.dev/faq/#vocabulary_data_definition">data definitions</A
     >.
   </p>
 </FAQ>
diff --git a/src/routes/faq/qa/vocabulary/004-what-is-a-party-configuration-domain.svelte b/src/routes/faq/qa/vocabulary/004-what-is-a-party-configuration-domain.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FAQ from "$lib/components/FAQ.svelte"
+  import A from "$lib/components/A.svelte"
 </script>
 
 <FAQ question={"What is a party configuration domain?"}>
@@ -9,8 +10,8 @@
   </p>
   <p>
     We have a prototype for using it to sign your data. It is also used by our experimental consent
-    protocol, which you can try out on our <a href="https://sandbox.ioxio-dataspace.com">Sandbox</a
+    protocol, which you can try out on our <A href="https://sandbox.ioxio-dataspace.com">Sandbox</A
     >. Read more about
-    <a href="https://docs.ioxio.dev/schemas/party-configuration/">party configuration domains</a>.
+    <A href="https://docs.ioxio.dev/schemas/party-configuration/">party configuration domains</A>.
   </p>
 </FAQ>
