From bb00a7e6dcf8fead3800a39ac4d1db8c4bda6f26 Mon Sep 17 00:00:00 2001 From: Marco Cano Date: Mon, 5 Aug 2024 17:54:47 -0700 Subject: [PATCH] fix: :hammer: loader, metadata download, preview --- nuxt-app/assets/img/ripple.svg | 2 +- nuxt-app/components/CodeEditorWithProp.vue | 2 +- nuxt-app/pages/index.vue | 8 +- nuxt-app/pages/resource/[id]/index.vue | 169 ++++++++++++--------- 4 files changed, 100 insertions(+), 81 deletions(-) diff --git a/nuxt-app/assets/img/ripple.svg b/nuxt-app/assets/img/ripple.svg index b1fd1dbe..b47ea917 100644 --- a/nuxt-app/assets/img/ripple.svg +++ b/nuxt-app/assets/img/ripple.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/nuxt-app/components/CodeEditorWithProp.vue b/nuxt-app/components/CodeEditorWithProp.vue index d7567418..f15c1fa1 100644 --- a/nuxt-app/components/CodeEditorWithProp.vue +++ b/nuxt-app/components/CodeEditorWithProp.vue @@ -58,7 +58,7 @@ export default { tabSize = new Compartment(); let state = EditorState.create({ - doc: JSON.stringify(self.item?.validation, null, 2), + doc: JSON.stringify(self.item?.validation || self.item, null, 2), extensions: [ basicSetup, history(), diff --git a/nuxt-app/pages/index.vue b/nuxt-app/pages/index.vue index cae13b16..3663466d 100644 --- a/nuxt-app/pages/index.vue +++ b/nuxt-app/pages/index.vue @@ -218,11 +218,11 @@

The Data Discovery Engine is a project from the - Wu Lab + Wu Lab and - Su Lab - at Scripps Research and is supported by the National Cancer Institute - (75N91019D00024). + Su Lab + at Scripps Research and is supported by the National Institutes of + Health (75N91019D00024).

diff --git a/nuxt-app/pages/resource/[id]/index.vue b/nuxt-app/pages/resource/[id]/index.vue index 9f17241c..d09ceb98 100644 --- a/nuxt-app/pages/resource/[id]/index.vue +++ b/nuxt-app/pages/resource/[id]/index.vue @@ -10,10 +10,12 @@ const route = useRoute(); const store = useStore(); const id = route.params.id; let metadata = ref({}); +let metadata_pure = ref({}); let isN3C = ref(false); let meta_id = ref(""); let n3c_status = ref(""); let scriptText = ref(""); +let ready = ref(false); let color = ref("badge-light"); function processMarkdown(txt) { @@ -73,31 +75,6 @@ function download() { a.click(); } -function getPreview() { - let txt = - "<sc" + - 'ript type="application/ld+json" >' + - JSON.stringify(metadata.value, null, 2) + - "</scr" + - "ipt>"; - $swal.fire({ - position: "center", - confirmButtonColor: "#63296b", - cancelButtonColor: "#4a7d8f", - customClass: "scale-in-center", - html: - `
Copy this code
-
- - 
` +
-      txt +
-      `
- -
-
`, - }); -} - function getFeatured(meta) { if (meta.value?._meta?.guide.includes("n3c")) { return "https://i.postimg.cc/ry0C25bK/n3cfeatured.jpg"; @@ -119,6 +96,13 @@ function getMetadata(id) { .then((response) => response.json()) .then((data) => { metadata.value = data; + setTimeout(() => { + ready.value = true; + let o = Object.assign({}, data); + delete o["_meta"]; + delete o["_id"]; + metadata_pure.value = o; + }, 200); useHead({ title: "DDE | " + metadata.value.name, meta: [ @@ -220,6 +204,23 @@ function copyScript(id) { }); } +function copyJsonToClipboard() { + const jsonString = JSON.stringify(metadata_pure.value, null, 2); // Convert JSON object to a pretty-printed string + navigator.clipboard + .writeText(jsonString) + .then(() => { + new Notify({ + status: "success", + title: "Copied!", + autoclose: true, + autotimeout: 2000, + }); + }) + .catch((err) => { + console.error("Error copying JSON to clipboard: ", err); + }); +} + const last_updated = computed(() => { if ( metadata.value.hasOwnProperty("_meta") && @@ -358,60 +359,78 @@ getMetadata(id); -
-
Embed this structured dataset metadata on your website
-
Embedding options:
-
-
-
Dynamic Embedding
-

- Leave it up to us! Just copy the following code and paste it - anywhere before the closing </head> tag on - your website's code. -

-

- Changes to metadata will be applied automatically. -

- - CLICK TO COPY - - -
-
-
Hard Coded
-

- In your website's code anywhere before the closing - </head> tag, paste the code below. -

-

- Changes to metadata need to be updated manually. -

- - COPY THIS CODE: - - -
+

+

+ Changes to metadata will be applied automatically. +

+ + CLICK THE INPUT FIELD TO COPY + + +
+
+
Hard Coded Embedding
+
+

Download CodeIn your website's code anywhere before the closing + </head> tag, paste the code below inside of a + script tag like this: + <script type="application/ld+json" > ...your + metadata...</script>. -

+

+

+ Changes to metadata need to be updated manually. +

+
+
+
+
+ Download Metadata + Copy Metadata
+