create ro-crate-preview.html when saving

package.json

@@ -59,7 +59,7 @@
     "leaflet-gesture-handling": "^1.2.2",
     "leaflet.path.drag": "^0.0.6",
     "mime": "^4.0.1",
-    "ro-crate": "^3.3.8"
+    "ro-crate": "^3.3.9"
   },
   "peerDependencies": {
     "element-plus": "^2.6.0",
@@ -74,10 +74,12 @@
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.18",
     "cypress": "^13.1.0",
+    "ejs": "^3.1.10",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.21",
-    "ro-crate-editor-profiles": "github:Language-Research-Technology/ro-crate-editor-profiles",
     "ro-crate-excel": "^1.0.19",
+    "ro-crate-html": "^0.1.4",
+    "ro-crate-modes": "github:Language-Research-Technology/ro-crate-modes",
     "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.1",
     "to-arraybuffer": "^1.0.1",

src/app/components/Help.vue

@@ -3,53 +3,53 @@ import { ElRow, ElCol } from 'element-plus';
 
 </script>
 <template>
-  <el-row :gutter="20" class="p-2">
-    <el-col :span="6" :xs="0" :sm="0" :md="4" :lg="6" :xl="8">
-      <div class="grid-content ep-bg-purple"/>
-    </el-col>
-    <el-col :span="18" :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
-      <div class="grid gap-6">
-        <h2 class="mb-3 text-lg text-gray-500 md:text-xl dark:text-gray-400">Toolbar Options</h2>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          📂 Open Directory
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Select a directory/folder to describe your research.
-        </p>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          🗃️ Load Files
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Loads files from the selected directory into this RO-Crate.
-        </p>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          🗄️ Bulk Add
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Select a spreadsheet from a different directory to assist you with metadata description.
-          This will append to your existing RO-Crate if there is already one created.
-        </p>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          💾 Save
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Save the state of this page into your RO-Crate.
-          This will create an <i>ro-crate-metadata.json</i> file or append data into an existing <i>ro-crate-metadata.json</i>.
-        </p>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          ⓧ Close
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Closes without saving.
-        </p>
-        <h4 class="text-gray-500 dark:text-gray-400">
-          Mode
-        </h4>
-        <p class="text-gray-500 dark:text-gray-400">
-          Select a predefined mode or load one from your computer.
-        </p>
-      </div>
-    </el-col>
-  </el-row>
+  <div class="grid gap-2 info-toolbar">
+    <h2 class="mb-3 text-lg text-gray-500 md:text-xl dark:text-gray-400">Toolbar Options</h2>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      📂 Open Directory
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Select a directory/folder to describe your research.
+    </p>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      🗃️ Load Files
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Loads files from the selected directory into this RO-Crate.
+    </p>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      🗄️ Bulk Add
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Select a spreadsheet from a different directory to assist you with metadata description.
+      This will append to your existing RO-Crate if there is already one created.
+    </p>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      💾 Save
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Save the state of this page into your RO-Crate.
+      This will create an <i>ro-crate-metadata.json</i> file or append data into an existing <i>ro-crate-metadata.json</i>.
+    </p>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      ⓧ Close
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Closes without saving.
+    </p>
+    <h4 class="text-gray-500 dark:text-gray-400">
+      Mode
+    </h4>
+    <p class="text-gray-500 dark:text-gray-400">
+      Select a predefined mode or load one from your computer.
+    </p>
+  </div>
 
-</template>
+</template>
+
+<style>
+.info-toolbar h4 {
+  font-weight: bold;
+  margin-top: 0.5rem;
+}
+</style>

src/app/utils/profileValidator.js

@@ -1,4 +1,4 @@
-import schema from "ro-crate-editor-profiles/src/ro-crate-editor-profile-schema.json";
+import schema from "ro-crate-modes/src/ro-crate-editor-profile-schema.json";
 
 import Ajv from 'ajv/dist/2019';
 

src/app/views/CrateoView.vue

@@ -10,8 +10,10 @@ import {
   ElRow, ElCol, ElMenu, ElMenuItem, ElDivider, ElSelectV2, ElOption,
   ElDialog, ElButton, ElCollapse, ElCollapseItem, ElAlert, ElNotification
 } from 'element-plus';
-import { handleRoute } from '../../lib/DefaultRouteHandler.js'
-import { CrateEditor } from '../../lib'
+import { handleRoute } from '../../lib/DefaultRouteHandler.js';
+import { CrateEditor } from '../../lib';
+import { Preview } from 'ro-crate-html';
+import renderTemplate from 'virtual:ejs';
 
 const navigate = handleRoute((entityId, propertyId) => {
   if (data.metadataHandle) {
@@ -144,17 +146,27 @@ const commands = {
       }
     }
     if (data.metadataHandle) {
-      const crate = editor.value.crate;
-      const writable = await data.metadataHandle.createWritable();
-      const content = JSON.stringify(crate, null, 2);
+      const rawCrate = editor.value.crate;
+      let writable = await data.metadataHandle.createWritable();
+      let content = JSON.stringify(rawCrate, null, 2);
       await writable.write(content);
       await writable.close();
       //data.crate = crate;
       //data.entityId = '';
-      data.validationResult = validate(crate, profile.value);
+      data.validationResult = validate(rawCrate, profile.value);
       console.log(data.validationResult);
       data.validationResultDialog = !!Object.keys(data.validationResult).length;
       ElNotification({ title: 'Data successfully saved in ro-crate-metadata.json', type: 'success', duration: 3000 });
+
+      // save preview
+      const crate = new ROCrate(rawCrate, {array: true, link: true});
+      await crate.resolveContext();
+      const preview = new Preview(crate);
+      content = renderTemplate(preview.templateParams());
+      const previewHandle = await data.dirHandle.getFileHandle('ro-crate-preview.html', { create: true });
+      writable = await previewHandle.createWritable();
+      await writable.write(content);
+      await writable.close(); 
     }
   },
 

src/app/views/TestCrate.vue

@@ -4,8 +4,8 @@ import { ElButton } from 'element-plus';
 import { CrateEditor } from '../../lib'
 import testData2 from '../../../test-data/cooee/ro-crate-metadata.json' ;
 import testData from '../../../test-data/sydney/ro-crate-metadata.json' ;
-import computationalToolProfile from 'ro-crate-editor-profiles/profiles/software-profile.json';
-import language_collection from "ro-crate-editor-profiles/profiles/language-data-commons-collection-profile.json";
+import computationalToolProfile from 'ro-crate-modes/modes/software.json';
+import language_collection from "ro-crate-modes/modes/language-data-commons-collection.json";
 
 const data = reactive({
   crate: testData,

src/app/views/TestEntity.vue

@@ -6,7 +6,7 @@ import testData from '../../../test-data/sydney/ro-crate-metadata.json';
 import { $state } from '../../lib/components/keys';
 import { ElButton } from 'element-plus';
 import { EditorState } from '../../lib/components/EditorState';
-import language_collection from 'ro-crate-editor-profiles/profiles/language-data-commons-collection-profile.json';
+import language_collection from 'ro-crate-modes/modes/language-data-commons-collection.json';
 const data = reactive({
   entity: null,
   profile: language_collection

src/lib/components/CrateEditor.Lookups.cy.js

@@ -1,9 +1,9 @@
 /// <reference types="Cypress" />
 
 import CrateEditor from './CrateEditor.vue';
-import base from 'ro-crate-editor-profiles/profiles/base-profile.json'
-import schema from 'ro-crate-editor-profiles/profiles/schema.json'
-import language_collection from 'ro-crate-editor-profiles/profiles/language-data-commons-collection-profile.json'
+import base from 'ro-crate-modes/modes/base.json'
+import schema from 'ro-crate-modes/modes/schema.json'
+import language_collection from 'ro-crate-modes/modes/language-data-commons-collection.json'
 
 
 const MY_ORG = 'Australian National University';

src/lib/components/CrateEditor.cy.js

@@ -1,8 +1,8 @@
 /// <reference types="Cypress" />
 
 import CrateEditor from './CrateEditor.vue';
-import software from 'ro-crate-editor-profiles/profiles/software-profile.json'
-import language_collection from 'ro-crate-editor-profiles/profiles/language-data-commons-collection-profile.json'
+import software from 'ro-crate-modes/modes/software.json'
+import language_collection from 'ro-crate-modes/modes/language-data-commons-collection.json'
 
 describe('<CrateEditor />', async () => {
 

vite.config.js

@@ -1,6 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-
-/// <reference types="vitest" />
+import { readFile } from "node:fs/promises";
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 //import { createHtmlPlugin } from 'vite-plugin-html'
@@ -11,6 +10,9 @@ import ElementPlus from 'unplugin-element-plus/vite'
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 import { visualizer } from "rollup-plugin-visualizer";
+import { compile } from "ejs";
+
+/// <reference types="vitest" />
 
 const build = {
   _all: {
@@ -28,7 +30,7 @@ const build = {
     },
     minify: false,
     rollupOptions: {
-      external: ['vue', 'element-plus' ],
+      external: ['vue', 'element-plus'],
       output: {
         globals: {
           vue: 'Vue',
@@ -38,9 +40,12 @@ const build = {
     },
   }
 }
+const ejsRenderer = await createRenderer();
+
 // https://vitejs.dev/config/
-export default defineConfig(({mode}) => ({
+export default defineConfig(({ mode }) => ({
   plugins: [
+    ejsRenderer,
     visualizer(),
     vue(),
     //createHtmlPlugin({minify: true, entry: 'src/app/main.js'}),
@@ -54,7 +59,7 @@ export default defineConfig(({mode}) => ({
     },
   },
   optimizeDeps: {
-    include: ['ro-crate-excel','leaflet']
+    include: ['ro-crate-excel', 'leaflet', 'ro-crate-html']
   },
   resolve: {
     alias: {
@@ -69,11 +74,31 @@ export default defineConfig(({mode}) => ({
   define: {
     __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
   },
-  test:{
+  test: {
     globals: true,
     environment: 'jsdom',
-    deps:{
+    deps: {
       inline: ['element-plus']
     }
   }
 }));
+
+async function createRenderer() {
+  const virtualModuleId = 'virtual:ejs';
+  const resolvedVirtualModuleId = '\0' + virtualModuleId;
+  const tp = fileURLToPath(import.meta.resolve('ro-crate-html/defaults/metadata_template.html'));
+  const src = await readFile(tp, "utf-8");
+  const code = compile(src, { client: true, strict: true });
+  //const template = await buildPreviewTemplate();
+  return {
+    name: 'ejsRenderer',
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${code.toString()}`;
+      }
+    }
+  }; 
+}