update deps; bugfixing

package.json

@@ -23,12 +23,12 @@
         }
     },
     "devDependencies": {
-        "@types/node": "^20.16.11",
+        "@types/node": "^20.17.1",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.38",
-        "tailwindcss": "^3.4.13",
-        "vitepress": "^1.4.0",
-        "vue": "^3.5.11",
+        "tailwindcss": "^3.4.14",
+        "vitepress": "^1.4.1",
+        "vue": "^3.5.12",
         "vue-router": "^4.4.5"
     },
     "dependencies": {
@@ -39,9 +39,9 @@
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/vue-fontawesome": "^3.0.8",
-        "@stripe/stripe-js": "^4.7.0",
+        "@stripe/stripe-js": "^4.9.0",
         "add": "^2.0.6",
-        "element-plus": "^2.8.4",
+        "element-plus": "^2.8.6",
         "lodash-es": "^4.17.21",
         "medium-zoom": "^1.1.0",
         "typewriter-effect": "^2.21.0"

src/docs/articles/creating-a-dataset.md

@@ -51,28 +51,33 @@ and get started using it! As the Vocabulary is distributed with the dataset, you
 
 Too often, licensing is an afterthought. With Describo, licensing your data and metadata is trivial.
 
+<div class="my-6">
 Start Describo and select a folder to work in. We'll start by creating the data and metadata
-licenses. Look in the navigation bar for a button named&nbsp;<Button>Set Licence</Button>. The
-following two images show the license creation dialog. In the first we're defining the data license
-(CC-BY-SA 4.0) and in the second, the metadata license (CC0 Public Domain).
+licenses. Look in the navigation bar for a button named
+<Button>Set Licence</Button>. The following two images show the license
+creation dialog. In the first we're defining the data license (CC-BY-SA 4.0) and in the second, the
+metadata license (CC0 Public Domain).
+</div>
 
-<ImageComponent src="/images/articles/creating-a-dataset/dataset1.webp"></ImageComponent>
-<ImageComponent src="/images/articles/creating-a-dataset/dataset3.webp"></ImageComponent>
+<div class="flex flex-col space-y-1 md:flex-row md:space-x-1 md:space-y-0 my-6">
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset1.webp"></ImageComponent>
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset3.webp"></ImageComponent>
+</div>
 
-After we've created the licenses we see that the root dataset has the CC-BY-SA license.
+After we've created the licenses we see that the root dataset has the CC-BY-SA license whilst the
+root descriptor has the CC0 license.
 
-<ImageComponent src="/images/articles/creating-a-dataset/dataset2.webp"></ImageComponent>
-
-Whilst the root descriptor has the CC0 license.
-
-<ImageComponent src="/images/articles/creating-a-dataset/dataset4.webp"></ImageComponent>
+<div class="flex flex-col space-y-1 md:flex-row md:space-x-1 my-6">
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset2.webp"></ImageComponent>
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset4.webp"></ImageComponent>
+</div>
 
 ## Creating the Vocabulary
 
 ### Setup
 
-Load the vocabulary tool. On this page you can define the Vocabulary metadata like name, description
-and version.
+Navigate to the vocabulary tool. On this page you can define the Vocabulary metadata like name,
+description and version.
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset5.webp"></ImageComponent>
 
@@ -91,8 +96,8 @@ definition will define the properties so Describo will not traverse the inherita
 determine which properties to show.
 
 Also note that the class hierarchy can be changed here. By default, any class added (from either an
-Ontology or invented by you) will be subclassed to Thing. You can change that here. In addition,
-your class can have multiple parent classes.
+Ontology or invented by you) will be subclassed to Thing. You can change that here and the class can
+have multiple parent classes.
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset6.webp"></ImageComponent>
 
@@ -104,38 +109,42 @@ Upon selection you will see the properties from the hierarchy (inherited from th
 Thing). This happens when the class definition is first created even though you set the definition
 to override.
 
-<ImageComponent src="/images/articles/creating-a-dataset/dataset7.webp"></ImageComponent>
-
 Go ahead and delete all of those properties. In this example, we just need to define the `@id` and
 `name` properties which Describo always makes available.
 
-<ImageComponent src="/images/articles/creating-a-dataset/dataset8.webp"></ImageComponent>
+<div class="flex flex-col space-y-1 md:flex-row md:space-x-1 md:space-y-0 my-6">
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset7.webp"></ImageComponent>
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset8.webp"></ImageComponent>
+</div>
 
 ### Properties - Dataset
 
-In order to use the TKLabel class, we need to say `where` it can be used. In this case, we'll edit
-the `hasPart` property on Dataset to specify that we can add TKLabel entities at that point. In the
-following image we've loaded the Dataset class on the properties tab and expanded the hasPart
+In order to use the TKLabel class, we need to say `where` it can be used. In this Vocabulary we'll
+edit the `hasPart` property on Dataset to specify that we can add TKLabel entities at that point. In
+the following image we've loaded the Dataset class on the properties tab and expanded the hasPart
 property.
 
 Notice the select where we can see TKLabel as an option? Describo allows you to associate anything
-you've defined at any point in the hierarchy.
-
-<ImageComponent src="/images/articles/creating-a-dataset/dataset9.webp"></ImageComponent>
-
-By Selecting TKLabel in the select box we see (in the following image) that the hasPart property on
-Dataset will now allow TKLabel entities to be created and associated.
+you've defined at any point in the hierarchy. By Selecting TKLabel in the select box we see that the
+hasPart property on Dataset will now allow TKLabel entities to be created and associated.
 
-<ImageComponent src="/images/articles/creating-a-dataset/dataset10.webp"></ImageComponent>
+<div class="flex flex-col space-y-1 md:flex-row md:space-x-1 md:space-y-0 my-6">
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset9.webp"></ImageComponent>
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset10.webp"></ImageComponent>
+</div>
 
+<div class="my-2">
 Before we leave, let's just check the Vocabulary. Press the button labelled <Button>Open the
 Vocabulary definition in your browser</Button>. When you do, a new window will open with the Vocab
 presented as HTML.
+</div>
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset11.webp"></ImageComponent>
 
+<div class="my-6">
 And finally, be sure to press the button named <Button>Save Vocabulary</Button> to not only save it,
 but also load it into Describo for use.
+</div>
 
 ## Using your Vocabulary
 
@@ -155,7 +164,9 @@ of the @id property and the name as the value of the name property.
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset13.webp"></ImageComponent>
 
+<div class="my-6">
 When we <Button>Create these entities</Button> we get:
+</div>
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset14.webp"></ImageComponent>
 
@@ -171,41 +182,47 @@ You will need credits to use the Assistant for this part.
 
 :::
 
+<div class="my-6">
 An important part of any project is verifying your work. On the Describe tab, in the left panel
-where the file browser is, there is another tab `Verify`. Select it and press the button
-&nbsp;<Button>Start the assistant</Button>.
-
-<ImageComponent src="/images/articles/creating-a-dataset/dataset15.webp"></ImageComponent>
-
-When you do, the assistant will read the RO-Crate spec and your metadata. When it's ready, you can
-query your data for correctness against the spec.
-
-<ImageComponent src="/images/articles/creating-a-dataset/dataset16.webp"></ImageComponent>
-
-In the following image we pressed the button <Button>Check root dataset</Button>. In the message
-view we see the question (in the blue box) and the assistant's response (in green).
+where the file browser is, there is another tab Verify. Select it and press the button
+<Button>Start the assistant</Button>. When you do, the assistant will read the RO-Crate spec and
+your metadata. When it's ready, you can query your data for correctness against the spec.
+</div>
+
+<div class="flex flex-col space-y-1 md:flex-row md:space-x-1 md:space-y-0 my-6">
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset15.webp"></ImageComponent>
+    <ImageComponent src="/images/articles/creating-a-dataset/dataset16.webp"></ImageComponent>
+</div>
+
+<div class="my-6">
+In the following image we pressed the button <Button>Check root dataset</Button> and then in the
+message view we see the question (in the blue box) and the assistant's response (in green). In this
+way, you can direct the assistant to check your work.
+</div>
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset17.webp"></ImageComponent>
 
-In this way, you can direct the assistant to check your work.
-
 ## Using your dataset
 
-So you've now created a dataset that you can use in other work. The question is how do we make it
+<div class="my-6">
+You've now created a dataset that you can use in other work. The question is how do we make it
 available for lookups in other projects? Firstly, save your work by pressing <Button>Save
 Metadata</Button> and then go back to the dashboard.
+</div>
 
 Notice the highlighted section in the following screenshot. That's where we manage our saved
 templates (which are like our very own personal knowledge base). In the screenshot you can see that
 there are two templates: one describing the Describo organisation and one describing me as a Person.
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset18.webp"></ImageComponent>
 
+<div class="my-6">
 Press the button <Button>Load templates from another dataset</Button>. A sidebar will open where you
 can select a folder containing an RO-Crate. Select the folder where you just created the TKLabels
 dataset. Describo will load the RO-Crate metadata and show you the entity types it contains. In this
-case we want to ingest all of the TKLabel entities (20 of them) so select that and
-press&nbsp;<Button>Load</Button>.
+case we want to ingest all of the TKLabel entities (20 of them) so select that and press
+<Button>Load</Button>.
+</div>
 
 <ImageComponent src="/images/articles/creating-a-dataset/dataset19.webp"></ImageComponent>
 

src/vue-components/Button.vue

@@ -1,3 +1,7 @@
 <template>
-    <div class="inline text-sm bg-blue-500 text-white py-1 px-2 rounded"><slot></slot></div>
+    <div class="inline text-sm bg-blue-500 text-white py-1 px-2 rounded">
+        <slot></slot>
+    </div>
 </template>
+
+<script setup lang="ts"></script>

src/vue-components/Disqus.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script setup>
+import { onMounted } from "vue";
 /**
  *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
  *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
@@ -18,14 +19,17 @@
     this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
     };
     */
-(function () {
-    if (process.env.NODE_ENV !== "development") {
-        // DON'T EDIT BELOW THIS LINE
-        var d = document,
-            s = d.createElement("script");
-        s.src = "https://describo.disqus.com/embed.js";
-        s.setAttribute("data-timestamp", +new Date());
-        (d.head || d.body).appendChild(s);
-    }
-})();
+
+onMounted(() => {
+    (function () {
+        if (process.env.NODE_ENV !== "development") {
+            // DON'T EDIT BELOW THIS LINE
+            var d = document,
+                s = d.createElement("script");
+            s.src = "https://describo.disqus.com/embed.js";
+            s.setAttribute("data-timestamp", +new Date());
+            (d.head || d.body).appendChild(s);
+        }
+    })();
+});
 </script>

src/vue-components/Image.vue

@@ -11,14 +11,17 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue";
 const props = defineProps({
     src: { type: String, required: true },
 });
-let enableZoom = true;
+const enableZoom = ref(true);
 
 // if we're on a touch device and window small - disable zoom
 //   this way we can pinch to zoom
-if ("ontouchstart" in window && window.innerWidth <= 1200) {
-    enableZoom = false;
-}
+onMounted(() => {
+    if ("ontouchstart" in window && window.innerWidth <= 1200) {
+        enableZoom.value = false;
+    }
+});
 </script>

src/vue-components/InfoPanel.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
+import { computed, useSlots, ref, onMounted } from "vue";
 
 const slots = useSlots();
 const props = defineProps({
@@ -60,6 +60,9 @@ const props = defineProps({
         validator: (v) => ["ltr", "rtl"].includes(v),
     },
 });
+const smallDevice = ref(true);
 
-const smallDevice = window.innerWidth < 900;
+onMounted(() => {
+    smallDevice.value = window.innerWidth < 900;
+});
 </script>

src/vue-components/PricingComponent.vue

@@ -138,7 +138,7 @@
 <script setup>
 import Terms from "./Terms.vue";
 import Product from "./Product.vue";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, onMounted, ref } from "vue";
 
 const props = defineProps({
     displayOnly: { type: Boolean, required: true },
@@ -191,7 +191,7 @@ const pricing = {
 let token = ref(undefined);
 let environment = ref("development");
 
-onBeforeMount(async () => {
+onMounted(async () => {
     if (props.displayOnly) return;
 
     const params = new URLSearchParams(window.location.search);

src/vue-components/Redirect.vue

@@ -5,9 +5,12 @@
     </p> -->
 </template>
 <script setup>
+import { onMounted } from "vue";
 const props = defineProps({
     to: { type: String, required: true },
 });
 
-window.location.replace(props.to);
+onMounted(() => {
+    window.location.replace(props.to);
+});
 </script>