fix: improve documentation visualization

Steinbeck-Lab · Aug 13, 2024 · 6e7f3de · 6e7f3de
1 parent 306510b
commit 6e7f3de
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 60 deletions.
diff --git a/docs/.vitepress/cache/deps/@theme_index.js b/docs/.vitepress/cache/deps/@theme_index.js
diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
@@ -1,31 +1,31 @@
 {
-  "hash": "911d3a82",
-  "configHash": "a6dc731f",
-  "lockfileHash": "65d0b609",
-  "browserHash": "3f416605",
+  "hash": "5384613c",
+  "configHash": "70e024d9",
+  "lockfileHash": "c1f6fa10",
+  "browserHash": "0753601d",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "698daf6a",
+      "fileHash": "711fc99f",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "abeac802",
+      "fileHash": "17a23da1",
       "needsInterop": false
     },
     "vitepress > @vueuse/core": {
       "src": "../../../../node_modules/@vueuse/core/index.mjs",
       "file": "vitepress___@vueuse_core.js",
-      "fileHash": "354fcef1",
+      "fileHash": "9a939831",
       "needsInterop": false
     },
     "@theme/index": {
       "src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
       "file": "@theme_index.js",
-      "fileHash": "d4ea2476",
+      "fileHash": "141878d0",
       "needsInterop": false
     }
   },

diff --git a/docs/index.md b/docs/index.md
@@ -1,25 +1,158 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
+head:
+  - - link
+    - rel: stylesheet
+      href: https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap
+
 hero:
-  name: "COCONUT Docs"
-  text: ""
-  tagline: The Comprehensive Resource for Open Natural Products
+  name: ""
+  text: The COlleCtion of Open NatUral producTs database documentation
+  tagline: Your Comprehensive Resource for Open Natural Products
+  image:
+    src: public/logo.png
+    alt: COCONUT Logo
   actions:
     - theme: brand
-      text: Get started
+      text: "Get Started"
       link: /introduction
     - theme: alt
-      text: Search Compounds
-      link: https://coconut.cheminf.studio/search
+      text: "Search Compounds"
+      link: https://coconut.naturalproducts.net/search
 
 features:
-  - title: Online Submission and Curation
-    details: Allows users to contribute new data, ensuring the database remains current and comprehensive.
-  - title: Search and Filter
-    details: Advanced search and filtering options to find compounds based on specific criteria easily.
-  - title: API Access
-    details: Provides API access for seamless integration with other tools and databases.
+  - icon: 🌍
+    title: "Online Submission and Curation"
+    details: "Contribute new data to keep the database current and comprehensive."
+  - icon: 🔍
+    title: "Search and Filter"
+    details: "Advanced search and filtering options to easily find compounds based on specific criteria."
+  - icon: 🔗
+    title: "API Access"
+    details: "Seamless API integration with other tools and databases."
+
+footer:
+  message: "COCONUT - Empowering Natural Product Research"
+  copyright: "© 2024 COCONUT Database"
+
 ---
 
+## Contact Us
+
+<div class="contact-cards">
+  <div class="contact-card">
+    <h3>Help Desk</h3>
+    <p>Any issues or support requests can be raised at our Help Desk or write to us at:</p>
+    <a href="mailto:[email protected]">[email protected]</a>
+  </div>
+  <div class="contact-card">
+    <h3>Discussion Forum</h3>
+    <p>Join our COCONUT Discussion Forum:</p>
+    <a href="mailto:[email protected]">[email protected]</a>
+  </div>
+</div>
+
+<style>
+:root {
+  --vp-c-brand: #00a86b;
+  --vp-c-brand-light: #00c17c;
+  --vp-font-family-base: 'Poppins', sans-serif;
+  --bg-light: #f5f5f5;
+  --bg-dark: #1e1e1e;
+  --text-light: #333;
+  --text-dark: #f5f5f5;
+}
+html {
+  background-color: var(--bg-light);
+  color: var(--text-light);
+}
+
+html.dark {
+  background-color: var(--bg-dark);
+  color: var(--text-dark);
+}
+.VPHero .text {
+  font-size: 48px;
+  font-weight: 700;
+  background: linear-gradient(45deg, var(--vp-c-brand), var(--vp-c-brand-light));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+.VPHero .tagline {
+  font-size: 24px;
+  color: var(--text-light);
+}
+
+html.dark .VPHero .tagline {
+  color: var(--text-dark);
+}
+
+.VPFeatures .items {
+  gap: 50px;
+}
+
+.VPFeatures .item {
+  flex: 1;
+  background: var(--bg-light);
+  border-radius: 12px;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+html.dark .VPFeatures .item {
+  background: var(--bg-dark);
+}
+
+.VPFeatures .item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.VPFeatures .icon {
+  font-size: 36px;
+}
+
+.contact-cards {
+  display: flex;
+  gap: 24px;
+  margin-top: 24px;
+}
+
+.contact-card {
+  flex: 1;
+  background: var(--bg-light);
+  border-radius: 12px;
+  padding: 24px;
+  transition: all 0.3s ease;
+}
+
+
+html.dark .contact-card {
+  background: var(--bg-dark);
+}
+
+.contact-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.contact-card h3 {
+  margin-top: 0;
+  color: var(--vp-c-brand);
+}
+
+.contact-card a {
+  display: inline-block;
+  margin-top: 12px;
+  color: var(--vp-c-brand);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.contact-card a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/docs/introduction.md b/docs/introduction.md
@@ -1,22 +1,31 @@
 # COCONUT (Collection of Open Natural Products) Online
 
-[COlleCtion of Open Natural prodUcTs (COCONUT)](https://dev.coconut.naturalproducts.net) is an aggregated dataset that comprises elucidated and predicted natural products (NPs) sourced from open repositories. It also provides a user-friendly web interface for browsing, searching, and efficiently downloading NPs. The latest database encompasses more than 63 open NP resources, granting unrestricted access to the data without any associated charges. Each entry in the database represents a "flat" NP structure and is accompanied by information on its known stereochemical forms, relevant literature, producing organisms, natural geographical distribution, and [precomputed](https://api.naturalproducts.net/docs) molecular properties. NPs are small bioactive molecules produced by living organisms, holding potential applications in pharmacology and various industries. The significance of these compounds has fueled global interest in NP research across diverse fields.
-Consequently, there has been a proliferation of generalistic and specialized NP databases over the years. Nevertheless, there is currently no comprehensive online resource that consolidates all known NPs in a single location. Such a resource would greatly facilitate NP research, enabling computational screening and other in-silico applications.
+[COlleCtion of Open NatUral producTs (COCONUT)](https://coconut.naturalproducts.net) is an aggregated dataset comprising elucidated and predicted natural products (NPs) sourced from open repositories. It offers a user-friendly web interface for browsing, searching, and efficiently downloading NPs. The latest database integrates more than 63 open NP resources, providing unrestricted access to data free of charge. Each entry in the database represents a "flat" NP structure, accompanied by information on its known stereochemical forms, relevant literature, producing organisms, natural geographical distribution, and [precomputed](https://api.naturalproducts.net/docs) molecular properties. 
+
+Natural products are small bioactive molecules produced by living organisms with potential applications in pharmacology and various industries. The significance of these compounds has driven global interest in NP research across diverse fields. However, despite the growing number of general and specialized NP databases, no comprehensive online resource has consolidated all known NPs in one place—until COCONUT. This became a resource facilitates NP research, enabling computational screening and other in-silico applications.
 
 <div style="text-align: center;">
-  <img src="/logo.png" alt="Logo" style="filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); display: block; margin: 0 auto;" width="600">
+  <img src="/logo.png" alt="COCONUT Logo" style="filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); margin: 20px auto;" width="600">
 </div>
 
-
 ::: info
-- The COCONUT logo incorporates a molecule called 6-Amyl-α-pyrone, which is an unsaturated lactone with a COCONUT fragrance. This molecule is produced by Trichoderma species, which are fungi.
+**New COCONUT Logo** features a minimalistic design, simplifying the original logo first introduced with [version 1.0](https://github.com/Steinbeck-Lab/cheminf-jena-logos/blob/main/COCONUT/coconut.png?raw=true).
 :::
 
-## Citation guidelines
+## Contact Us
+
+> **Help Desk**  
+> Any issues or support requests can be raised at our Help Desk or write to us at <a href="mailto:[email protected]">[email protected]</a>
+> 
+>
+> **Discussion Forum**  
+> Join our COCONUT Discussion Forum at <a href="mailto:[email protected]">[email protected]</a>.
 
-**By appropriately citing the COCONUT Database, readers are provided with the means to easily locate the original source of the data utilized.**
+## Citation Guidelines
 
-- Citing paper:
+**Properly citing the COCONUT Database ensures readers can easily locate the original source of the data used.**
+
+- **Citing Paper:**
 ```md
 Sorokina, M., Merseburger, P., Rajan, K. et al. 
 COCONUT online: Collection of Open Natural Products database. 
@@ -31,10 +40,23 @@ COCONUT (Version v0.0.1 - prerelease) [Computer software].
 https://doi.org/10.5281/zenodo.13283949
 ```
 
-## Acknowledgments and Maintainence
+## Acknowledgments and Maintenance
 
 Cheminformatics Microservice and [Natural Products Online](https://naturalproducts.net/) are developed and maintained by the [Steinbeck group](https://cheminf.uni-jena.de/) at the [Friedrich Schiller University](https://www.uni-jena.de/en/) Jena, Germany.
 
-Funded by [ChemBioSys](https://docs.api.naturalproducts.net/introduction.html) (Project INF) - Project number: 239748522 - SFB 1127.
+<div style="display: flex; justify-content: center; margin: 20px 0;">
+  <img src="/CheminfGit.png" alt="Cheminf and Computational Metabolomics Logo" width="500">
+</div>
+
+
+<p><strong>Funded by the <a href="https://www.dfg.de/" target="_blank">Deutsche Forschungsgemeinschaft (DFG, German Research Foundation)</a> under the <a href="https://www.chembiosys.de/en/" target="_blank">ChemBioSys</a> (Project INF) - Project number: 239748522 - SFB 1127</strong>.</p>
+
+<div style="display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px;">
+  <a href="https://www.dfg.de/" target="_blank" style="flex: 1;">
+    <img src="https://github.com/Steinbeck-Lab/cheminformatics-microservice/blob/main/docs/public/dfg_logo_schriftzug_blau_foerderung_en.gif?raw=true" style="width: 100%; max-width: 300px;" alt="DFG Logo">
+  </a>
+  <a href="https://www.chembiosys.de/en/welcome.html" target="_blank" style="flex: 1;">
+    <img src="https://github.com/Steinbeck-Lab/cheminformatics-microservice/assets/30716951/45c8e153-8322-4563-a51d-cbdbe4e08627" style="width: 100%; max-width: 300px;" alt="Chembiosys Logo">
+  </a>
+</div>
 
-![Cheming and Computational Metabolomics logo](/CheminfGit.png)