Merge pull request #886 from NFDI4Chem/issue-#601

fix: add FAQs to welcome page
NFDI4Chem · Nov 14, 2023 · a394baa · a394baa
2 parents ab06c28 + ac1542b
commit a394baa
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 9 deletions.
diff --git a/resources/js/App/FAQs.vue b/resources/js/App/FAQs.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="bg-white">
+        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
+            <div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
+                <h2
+                    class="text-2xl font-bold leading-10 tracking-tight text-gray-900"
+                >
+                    Frequently asked questions
+                </h2>
+                <dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
+                    <Disclosure
+                        as="div"
+                        v-for="faq in faqs.slice(0, limit)"
+                        :key="faq.question"
+                        class="pt-6"
+                        v-slot="{ open }"
+                    >
+                        <dt>
+                            <DisclosureButton
+                                class="flex w-full items-start justify-between text-left text-gray-900"
+                            >
+                                <span
+                                    class="text-base font-semibold leading-7"
+                                    >{{ faq.question }}</span
+                                >
+                                <span class="ml-6 flex h-7 items-center">
+                                    <PlusSmallIcon
+                                        v-if="!open"
+                                        class="h-6 w-6"
+                                        aria-hidden="true"
+                                    />
+                                    <MinusSmallIcon
+                                        v-else
+                                        class="h-6 w-6"
+                                        aria-hidden="true"
+                                    />
+                                </span>
+                            </DisclosureButton>
+                        </dt>
+                        <DisclosurePanel as="dd" class="mt-2 pr-12">
+                            <p class="text-base leading-7 text-gray-600">
+                                {{ faq.answer }}
+                            </p>
+                        </DisclosurePanel>
+                    </Disclosure>
+                </dl>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
+import { MinusSmallIcon, PlusSmallIcon } from "@heroicons/vue/24/outline";
+
+const props = defineProps(["limit"]);
+
+const faqs = [
+    {
+        question: "How can I submit my data to nmrXiv?",
+        answer: " Register to nmrXiv. Structure your data in folders similar to nmrXiv structuring of projects, studies, and datasets. This step might not be intuitive so we recommend checking its docummentation. Upload your data, edit it, and provide its metadata via the submission pipeline.",
+    },
+    {
+        question: "What should I do if I think I've found a bug?",
+        answer: "If you believe you've found a bug in nmrXiv, please write to us at info.nmrxiv@uni-jena.de or reach out to our Helpdesk https://www.nfdi4chem.de/helpdesk/.",
+    },
+    {
+        question: "Who can use my public/published resources?",
+        answer: "If you make your resources public (projects, studies, datasets), you are making them open for access to everyone (even to the non-registered user of nmrXiv), but you can specify rights by choosing licenses for your projects and studies (study license propagate to its datasets). Once your project is made public, you cannot edit, delete or make it private again.",
+    },
+    {
+        question: "What are supported files format in nmrXiv?",
+        answer: "nmrXiv accepts all NMR formats uploaded. However, not all of them are readable at the moment. So far, only NMRium-supported formats can be translated into spectra in nmrXiv. Those formats are jcamp-dx, jeol, Bruker folders, NMReData, and nmrium. For validation purposes, the uploaded data should have at least one readable format.",
+    },
+    // More questions...
+];
+</script>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
@@ -301,7 +301,7 @@
                 </div>
             </div>
 
-            <div class="relative pt-16 pb-32">
+            <div class="relative pt-16">
                 <div>
                     <div
                         class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24 overflow-x-hidden py-10 border-r"
@@ -546,6 +546,11 @@
                 </div>
             </div>
 
+            <div>
+                <FAQs></FAQs>
+            </div>
+
+            <!-- Gradient Feature Section -->
             <div class="bg-gradient-to-r from-indigo-800 to-teal-700">
                 <div
                     class="max-w-4xl mx-auto px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8"
@@ -683,21 +688,25 @@
                                     Quick links
                                 </h3>
                                 <ul role="list" class="mt-4 space-y-4">
-                                    <li>
-                                        <Link
-                                            href="/projects"
+                                    <li
+                                        v-for="item in footerNavigation.quicklinks"
+                                        :key="item.name"
+                                    >
+                                    <Link
+                                            :href="item.href"
                                             class="text-base text-gray-500 hover:text-gray-900"
                                         >
-                                            Projects
+                                            {{ item.name }}
                                         </Link>
                                     </li>
                                     <li>
-                                        <Link
-                                            href="/spectra"
+                                        <a
+                                            target="_blank"
+                                            href=https://docs.nmrxiv.org/FAQs.html
                                             class="text-base text-gray-500 hover:text-gray-900"
                                         >
-                                            Spectra
-                                        </Link>
+                                            FAQs
+                                        </a>
                                     </li>
                                 </ul>
                             </div>
@@ -829,6 +838,7 @@ import {
 } from "@heroicons/vue/24/outline";
 import { ChevronDownIcon } from "@heroicons/vue/24/solid";
 import ToolTip from "@/Shared/ToolTip.vue";
+import FAQs from "@/App/FAQs.vue";
 
 const Search = [
     {
@@ -889,6 +899,14 @@ const features = [
     },
 ];
 const footerNavigation = {
+    // Search: [
+    //   { name: "Browse", href: "/projects" },
+    //   { name: "Advanced Search", href: "/projects" },
+    // ],
+    quicklinks: [
+        { name: "Projects", href: "/projects"},
+        { name: "Spectra", href: "/spectra"}
+    ],
     support: [
         { name: "Documentation", href: "https://docs.nmrxiv.org" },
         {
@@ -956,6 +974,7 @@ export default {
         CircleStackIcon,
         ToolTip,
         Projects,
+        FAQs,
     },
 
     props: {