update tour

assets/styles.css

@@ -1,3 +1,17 @@
 a {
     color: rgb(30 64 175)
+}
+
+.medium-zoom-overlay {
+    z-index: 1000;
+}
+
+.medium-zoom-image {
+    @apply m-2 p-1 border border-slate-400 rounded-sm;
+    z-index: 1001;
+}
+
+.medium-zoom-image--opened{
+    @apply border-none shadow-md;
+    z-index: 1001;
 }

components/Stack.vue

@@ -27,7 +27,11 @@
                         </div>
                     </template>
                 </card>
+                <div class="text-sm text-slate-800 text-center">
+                    Tip: Click the image to zoom in and get a better look!
+                </div>
             </div>
+
             <div
                 class="hidden md:flex cursor-pointer text-4xl py-48 px-2"
                 @click="nextCard()"
@@ -57,6 +61,8 @@ import { vAutoAnimate } from "@formkit/auto-animate";
 import Card from "./Card.vue";
 import { ref } from "vue";
 import isArray from "lodash-es/isArray.js";
+import { onMounted, watch } from "vue";
+import mediumZoom from "medium-zoom";
 
 const props = defineProps({
     cards: { type: Array },
@@ -69,4 +75,15 @@ function nextCard() {
 function previousCard() {
     n.value = n.value === 0 ? props.cards.length - 1 : (n.value -= 1);
 }
+
+const initZoom = () => {
+    mediumZoom("img", { background: "var(--vp-c-bg)" });
+};
+onMounted(() => {
+    initZoom();
+});
+watch(
+    () => n.value,
+    () => nextTick(() => initZoom())
+);
 </script>

package.json

@@ -34,6 +34,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "@nuxtjs/tailwindcss": "^6.10.4",
         "add": "^2.0.6",
-        "lodash-es": "^4.17.21"
+        "lodash-es": "^4.17.21",
+        "medium-zoom": "^1.1.0"
     }
 }

pages/index.vue

@@ -127,66 +127,76 @@ const cards = [
         text: `The dashboard. Select a folder of content to describe; load a previously used folder or manage data pack data.
         Whether you are describing research data or creating a cultural collection, eveyrthing you do will be stored in this folder.
         Nothing is locked up inside Describo.`,
-        image: "/desktop1.png",
+        image: "/tour/desktop1.png",
     },
 
     {
         text: `When the RO Crate file is loaded the root dataset is shown in the middle pane along with a file browser on the left.
        In the navigation bar we can see which folder is loaded as well as controls to load a profile and access application settings.
         `,
-        image: "/desktop2.png",
+        image: "/tour/desktop2.png",
     },
     {
-        text: "Pressing the help button activates context setting help.",
-        image: "/desktop1a.png",
+        text: "Pressing the help button activates context sensitive help. And the documentation link in the navigation bar links to context specific documentation.",
+        image: "/tour/desktop1a.png",
     },
     {
         text: `Selecting a entity of type 'File' will calculate file metadata, create an entry for the file in the crate and display a preview of it
         in the right hand panel. The preview can be full screened to get a better look at the file.`,
-        image: "/desktop3.png",
+        image: "/tour/desktop3.png",
     },
     {
         text: `Describo makes all of Schema.org available to you. In the image we can see all of the properties defined by schema.org
         for an entity of type File; all the way back up the hierarchy to Thing. In addition, we can see what data types each property is expecting.
         The 'about' property expects an entity of type 'Thing' and Describo will enforce that.`,
-        image: "/desktop4.png",
+        image: "/tour/desktop4.png",
     },
     {
         text: `Entities can be created directly. 'Spatial Coverage' is expecting an entity of type Place and Describo provides controls
         to create a new entity of that type. In this example, we are creating an entity of type Place with the name 'Somewhere'.`,
-        image: "/desktop5.png",
+        image: "/tour/desktop5.png",
     },
     {
         text: `Navigating to the entity we can then start managing its data. Shown is the Geometry component which enables creating
         a custom geometry for the Geo property.`,
-        image: "/desktop6.png",
+        image: "/tour/desktop6.png",
+    },
+    {
+        text: `For HASS researchers, Describo can perform Optical Character Recoginition (OCR) and entity recognition of your data. You can mark
+        up entities and create rich datasets of entities mentioned in your data. see:
+        <a href="https://describo.github.io/documentation/guide/tutorials/transcribing-content.html">https://describo.github.io//documentation/guide/tutorials/transcribing-content.html</a>`,
+        image: "/tour/transcribe9.png",
+    },
+    {
+        text: `When using the transcription tools the data is written into the RO-Crate. And the markup is created as data attributes in the HTML.`,
+        image: ["/tour/transcribe10.png", "/tour/transcribe11.png"],
     },
     {
         text: `Describo is totally configurable via profiles. Profiles are JSON files that describe how the interface looks and  what a user can do.
         Profiles can be loaded from your computer or from the Describo Profiles Repository. Profiles are cached locally for reuse.`,
-        image: "/desktop7.png",
+        image: "/tour/desktop7.png",
     },
     {
         text: `When a profile is loaded, the view will adapt based on the content of that profile. In this example, the profile defines
         a tabbed layout for Dataset entities in addition to showing specific properties. This allows the profile author to define
         exactly how the UI should look for their users and guide them on what is required.`,
-        image: "/desktop8.png",
+        image: "/tour/desktop8.png",
     },
     {
         text: `Describo is totally configurable. It supports English and Hungarian (for now) and there are controls for various aspects of its operation.`,
-        image: ["/desktop9.png", "/describo-i18-en.png", "/describo-i18-hu.png"],
+        image: ["/tour/desktop9.png", "/tour/describo-i18-en.png", "/tour/describo-i18-hu.png"],
     },
     {
         text: `There are controls to view the entities in the crate and jump directly to any entity.`,
-        image: "/desktop10.png",
+        image: "/tour/desktop10.png",
     },
-    { text: `There is a control to directly edit the context.`, image: "/desktop11.png" },
-    { text: `And one to preview the JSON linked data.`, image: "/desktop12.png" },
-    { text: `Describo is themable.`, image: "/desktop13.png" },
-    { text: `Describo can display crates in readonly mode.`, image: "/desktop14.png" },
+    { text: `There is a control to directly edit the context.`, image: "/tour/desktop11.png" },
+    { text: `And one to preview the JSON linked data.`, image: "/tour/desktop12.png" },
+    { text: `Describo is themable.`, image: "/tour/desktop13.png" },
+    { text: `Describo can display crates in readonly mode.`, image: "/tour/desktop14.png" },
     {
         text: `Describo can display complex entities like actions and relationships that link other entities together.`,
-        image: "/desktop15.png",
+        image: "/tour/desktop15.png",
     },
 ];
 // const cards = [