About page (#4)

* webpack loader installation and configuration for content

* Homepage layout Hero and setting congig

* homepage part1 part2 part3

* homepage layout part4

* Homepage Layout Formcontact layout Footer ans animation

* homepage finish css

* layout aboutPage and contitional background ContactForm

* Layout Contact and conditional class ContactForm

* layout Thanks

* review link button form and responsive large screen

* Layout Resources and slug and config responsive

* modification content recovery

* creation files CMS

content/aboutPage/contactForm.md

@@ -0,0 +1,8 @@
+---
+title: Get in touch
+description:
+  Feel free to get in touch with us to share your thoughts or explore potential collaborations.
+  We look forward to hearing from you and engaging in fruitful discussions and collaborations!
+---
+
+aboutpage ContactForm content

content/aboutPage/hero.md

@@ -0,0 +1,6 @@
+---
+title: 'About'
+description: The project was conducted by researchers from Fudan University, Shanghai.
+---
+
+aboutPage Hero content

content/aboutPage/researchers.md

@@ -0,0 +1,29 @@
+---
+title: Researchers
+nameLab: Big Data Biology Lab
+description: The hosting laboratory of the project is run by Luis Pedro Coelho at Fudan University in Shanghai located at the Institute of Science and Technology for Brain-Inspired Intelligence. We are interested both in developing novel computational methods and in applying them to large scale problems. Our focus is on the global microbiome and in exploiting publicly available data to gain understanding into microbial ecosystems. Our major projects are the Global Microbial Gene Catalogue (GMGC), small proteins, and antimicrobial resistance.
+linkLab: https://www.big-data-biology.org/
+linkOrcid: https://orcid.org/
+linkGoogleScholar: https://scholar.google.com/
+researcher:
+  - name: Shaojun Pan
+    job: Leading Scientist
+    profile: Shaojun Pan is the leading scientist on the project.His research focuses on developing innovative computational tools and methodologies to unravel the complexities of microbial communities and their genomes. In order to achieve this, he uses deep learning and machine learning algorithms and applies them to the field of metagenomics.
+    linkGoogleScholar: https://scholar.google.com/citations?hl=en&user=IQCdByIAAAAJ
+    linkOrcid: https://orcid.org/0000-0002-5270-5614
+    imageUrl: /images/shaojunPan.png
+  - name: Luis Pedro Coelho
+    job: Researcher
+    profile: Luis Pedro Coelho is an accomplished researcher specializing in bioinformatics, genomics, and data science. His expertise lies in the application of computational techniques to analyze large-scale biological datasets and extract meaningful insights. Coelho's multidisciplinary approach, combining expertise in biology and computational sciences, helped in the project design, data analysis, and interpretation of results.
+    linkGoogleScholar: https://scholar.google.com/citations?hl=en&user=qTYua0cAAAAJ
+    linkOrcid: https://orcid.org/0000-0002-9280-7885
+    imageUrl: /images/LuisPedroCoelho.png
+  - name: Xing-Ming Zhao
+    job: Professor
+    profile: Xing-Ming Zhao is a professor at the Institute of Science and Technology for Brain-Inspired Intelligence (ISTBI) at Fudan University. Zhao’s extensive experience in developing computational algorithms and tools for genome analysis and metagenomic studies greatly contributed to the advancement of the project.
+    linkGoogleScholar: https://scholar.google.com/citations?hl=en&user=o66S6gUAAAAJ
+    linkOrcid: https://orcid.org/0000-0002-4531-3970
+    imageUrl: /images/xingMingZhao.png
+---
+
+aboutPage researches contact

content/resources/hero.md

@@ -0,0 +1,6 @@
+---
+title: resources
+description: Lorem ipsum dolor sit amet consectetur. Mattis mattis cursus tristique donec nibh dictum.
+---
+
+Resources Hero content

content/resources/methodology.md

@@ -0,0 +1,12 @@
+---
+title: Methodology
+description: Lorem ipsum dolor sit amet consectetur.
+subTitle: Limited to rRNA gene prediction only
+imageHero:
+  - url: '/images/hero_tools.png'
+    alt: 'illustation laboratory'
+image:
+  - url: '/images/image_results.png'
+    alt: 'explanatory diagram'
+content: 'Self-supervised learning, including two steps:  constraint generation and the siamese neural network. Generating must-link constraints is done by breaking up longer contigs and cannot-link constraints by random sampling. Then, a deep siamese neural network is used to learn a better embedding from the inputs. b, For short-reads, the Infomap algorithm is used to obtain preliminary bins from the sparse graph generated from the embeddings, followed by weighted k-means to recluster bins whose the mean number of single-copy genes is greater than one. For long-reads, SemiBin2 runs DBSCAN with different values of the ε parameter with embeddings as inputs and integrates the results based on single-copy genes. c, Output the final binning results larger than a user-definable threshold (default 200kbp). '
+---

content/resources/results.md

@@ -0,0 +1,12 @@
+---
+title: Results
+subTitle: Limited to rRNA gene prediction only
+description: Lorem ipsum dolor sit amet consectetur.
+imageHero:
+  - url: '/images/hero_tools.png'
+    alt: 'illustation laboratory'
+image:
+  - url: '/images/image_results.png'
+    alt: 'explanatory diagram'
+content: 'Self-supervised learning, including two steps:  constraint generation and the siamese neural network. Generating must-link constraints is done by breaking up longer contigs and cannot-link constraints by random sampling. Then, a deep siamese neural network is used to learn a better embedding from the inputs. b, For short-reads, the Infomap algorithm is used to obtain preliminary bins from the sparse graph generated from the embeddings, followed by weighted k-means to recluster bins whose the mean number of single-copy genes is greater than one. For long-reads, SemiBin2 runs DBSCAN with different values of the ε parameter with embeddings as inputs and integrates the results based on single-copy genes. c, Output the final binning results larger than a user-definable threshold (default 200kbp). '
+---

content/resources/semiBin2.md

@@ -0,0 +1,12 @@
+---
+title: The SemiBin2 Approach
+subTitle: Limited to rRNA gene prediction only
+description: Lorem ipsum dolor sit amet consectetur.
+imageHero:
+  - url: '/images/hero_tools.png'
+    alt: 'illustation laboratory'
+image:
+  - url: '/images/image_semibin.png'
+    alt: 'explanatory diagram'
+content: 'Self-supervised learning, including two steps:  constraint generation and the siamese neural network. Generating must-link constraints is done by breaking up longer contigs and cannot-link constraints by random sampling. Then, a deep siamese neural network is used to learn a better embedding from the inputs. b, For short-reads, the Infomap algorithm is used to obtain preliminary bins from the sparse graph generated from the embeddings, followed by weighted k-means to recluster bins whose the mean number of single-copy genes is greater than one. For long-reads, SemiBin2 runs DBSCAN with different values of the ε parameter with embeddings as inputs and integrates the results based on single-copy genes. c, Output the final binning results larger than a user-definable threshold (default 200kbp). '
+---

content/resources/tools.md

@@ -0,0 +1,51 @@
+---
+title: tools
+subTitle: Limited to rRNA gene prediction only
+description: Sis interrogatus numerando et tandem vel nec hortatore incognitus stipite per et vel sis miser dierum agnitus vel in amicitiam.
+imageHero:
+  - url: '/images/hero_tools.png'
+    alt: 'illustation laboratory'
+tools:
+  - name: Semibin
+    inputFiles: Metagenomic contigs
+    outputFiles: Binning results
+    informationObtained: Semi-supervisedbinning of metagenomic data
+    utility: Helps classify metagenomicsequences into taxonomic bins
+    peeks: Utilizes both sequence composition and coverage information
+    drawbacks: Requires initial training using labeled reference genomes
+  - name: ChekckM2
+    inputFiles: Binned metagenomic genomes
+    outputFiles: Quality assessment report
+    informationObtained: Quality assessment of metagenomic bins
+    utility: Evaluates completeness and contamination of genome bins
+    peeks: Provides detailed metrics and visualizations
+    drawbacks: Relies on reference genome databases for accurate analysis
+  - name: GUNC
+    inputFiles: Metagenomic contigs
+    outputFiles: Predicted protein sequences
+    informationObtained: Gene function annotation
+    utility: Predicts functional annotations of genes in metagenomes
+    peeks: Uses similarity-based methods for annotation
+    drawbacks: Requires reference databases for accurate functional annotation
+  - name: Flye
+    inputFiles: Raw DNA sequencing reads
+    outputFiles: Assembled genome
+    informationObtained: Genome assembly
+    utility: Generates high-quality genome assemblies
+    peeks: Performs long-read assembly
+    drawbacks: Sensitive to input read quality and coverage
+  - name: tRNAscan-SE
+    inputFiles: Genome sequence
+    outputFiles: tRNA predictions
+    informationObtained: tRNA predictions
+    utility: Identifies tRNA genes within genome sequences
+    peeks: Incorporates both sequence and structure information
+    drawbacks: Limited to tRNA gene prediction only
+  - name: barrnap
+    inputFiles: Genome sequence
+    outputFiles: rRNA predictions
+    informationObtained: tRNA predictions
+    utility: Identifies tRNA genes within genome sequences
+    peeks: Supports multiple rRNA gene databases
+    drawbacks: Limited to rRNA gene prediction only
+---

content/thankPage/hero.md

@@ -0,0 +1,8 @@
+---
+title: Thank You
+description: One of our team members will be in touch with you shortly.
+linkUrl: '/about'
+linkString: about our projet
+---
+
+Before we get back to you, you can learn more

package.json

@@ -29,11 +29,13 @@
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
     "focus-visible": "^5.2.0",
+    "gray-matter": "^4.0.3",
     "next": "13.3.0",
     "next-router-mock": "^0.9.3",
     "postcss-focus-visible": "^6.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
     "react-select": "^5.7.3",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.3.0",

public/admin/config.yml

@@ -0,0 +1,199 @@
+backend:
+  name: test-repo
+  branch: main # Branch to update (optional; defaults to master)
+media_folder: public/img
+public_folder: img
+collections:
+  - name: HomePage
+    label: Home Page
+    description: home Page data
+    files:
+    - label: Hero Page
+      name: hero
+      file: content/homePage/hero.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+        - { label: Button Name, name: buttonName, widget: string }
+    - label: Section 1
+      name: section1
+      file: content/homePage/section1.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+        - { label: Button Name, name: buttonName, widget: string }
+        - label: content
+          name: content
+          widget: list
+          fields:
+            - { label: Description, name: description, widget: string }
+    - label: Section 2
+      name: section2
+      file: content/homePage/section2.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+    - label: Section 3
+      name: section3
+      file: content/homePage/section3.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+        - label : content
+          name : content
+          widget : list
+          fields:
+            - { label: Description, name: description, widget: string }
+    - label: Section 4
+      name: section4
+      file: content/homePage/section4.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+        - { label : Link, name: link, widget: string}
+        - { label : Link Name, name: nameLink, widget: string}
+        - label : tools & workflow
+          name : tabs
+          widget : list
+          fields:
+            - { label: name, name: name, widget: string }
+            - label : content
+              name : content
+              widget : list
+              fields:
+                - { label: Paragraph, name: paragraph, widget: string }
+            - label: workflow 
+              name: workflow
+              widget: list
+              fields:
+                - label : content
+                  name : content
+                  widget : list
+                  fields:
+                    - { label: Paragraph, name: paragraph, widget: string }
+    - label: Contact Form
+      name: contactForm
+      file: content/homePage/contactForm.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+
+  - name: aboutPage
+    label: About Page
+    description: About Page data
+    files:
+    - label: Hero Page
+      name: Hero Page
+      file: content/aboutPage/hero.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string}
+    - label: Researchers
+      name: researchers
+      file: content/aboutPage/researchers.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Lab description, name: description, widget: string}
+        - { label: Lab name, name: nameLab, widget: string}
+        - { label: Lab link, name: linkLab, widget: string}
+        - { label: Orcid link, name: linkOrcid, widget: string}
+        - { label: Scholar Google link, name: linkGoogleScholar, widget: string}
+        - label : researcher
+          name : researcher
+          widget : list
+          fields:
+            - { label: name, name: name, widget: string }
+            - { label: job, name: job, widget: string }
+            - { label: profile, name: profile, widget: string }
+            - { label: Scholar Google link, name: linkGoogleScholar, widget: string }
+            - { label: Orcid link, name: linkOrcid, widget: string }
+            - { label: ID photo, name: imageUrl, widget: string }
+    - label: Contact Form
+      name: contactForm
+      file: content/homePage/contactForm.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+
+  - name: Resources Page
+    label: Resources Page
+    description: resources data
+    files: 
+    - label: Resources Hero
+      name: Resources Hero
+      description: resources Page data
+      file: content/resources/hero.md
+      fields:
+          - { label: Title, name: title, widget: string}
+          - { label: Description, name: description, widget: string}
+    - label : Resources 
+      name: Resources
+      folder: content/resources
+      create: true
+      slug: "{{slug}}"
+      file: content/resources/{{slug}}.md
+      fields : 
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string}
+        - { label: Content, name: content, widget: string}
+        - { label: subTitle, name: subTitle, widget: string}
+        - label: Image
+          name: image
+          widget: list
+          fields : 
+            - { label: Image, name: image, widget: image}
+            - { label: Alt Image , name: alt, widget: string}
+    - label: Tools resources
+      name: Tools resources
+      description: Tools Resources Page data
+      file: content/resources/tools.md
+      fields: 
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string}
+        - { label: subTitle, name: subTitle, widget: string }
+        - label: tools
+          name: tools
+          widget: list
+          fields:
+            - { label: name, name: name, widget: string }
+            - { label: inputFiles, name: inputFiles, widget: string }
+            - { label: outputFiles, name: outputFiles, widget: string }
+            - { label: informationObtained, name: informationObtained, widget: image }
+            - { label: utility, name: utility, widget: string }
+            - { label: peeks, name: peeks, widget: string }
+            - { label: drawbacks, name: drawbacks, widget: image }
+  - name : Resources 
+    label: Add Resources
+    folder: content/resources
+    create: true
+    slug: "{{slug}}"
+    fields : 
+      - { label: Title, name: title, widget: string}
+      - { label: Description, name: description, widget: string}
+      - { label: Content, name: content, widget: string}
+      - { label: subTitle, name: subTitle, widget: string}
+      - label: Image
+        name: image
+        widget: list
+        fields : 
+          - { label: Image, name: image, widget: image}
+          - { label: Alt Image , name: alt, widget: string}
+  - name: Thanks Page
+    label: Thanks Page
+    description: Thanks Page data
+    files:
+    - label: Hero Page
+      name: hero
+      file: content/homePage/hero.md
+      fields:
+        - { label: Title, name: title, widget: string}
+        - { label: Description, name: description, widget: string }
+        - { label: linkUrl, name: linkUrl, widget: string }
+        - { label: linkName, name: linkName, widget: string }
+        - { label: "Body", name: "body", widget: "markdown"}
+
+
+
+
+
+

public/admin/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content Manager</title>
+  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+</head>
+<body>
+  <!-- Include the script that builds the page and powers Decap CMS -->
+  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+</body>
+</html>