Merge pull request #19 from CSBiology/development

Add slider banner and new team members ✨

README.md

@@ -1,5 +1,7 @@
 # csbiology.github.io
-The csb website.
+
+The official [CSB-Website](https://csbiology.github.io).
+
 
 # Local Development
 
@@ -38,4 +40,23 @@ alumni: 2020-Master Student
 phone: +49 000 111 4242 # this is only an example 
 email: [email protected]
 ---
-```
+```
+
+### Research
+
+Create a `.md` file in `src/content/research`. All fields without an `#!` are optional.
+
+Images must be places in `src/content/images/research`.
+
+Without `index` slides are sorted to the end.
+
+```yaml
+---
+index: <int>
+img: <image_name_in_folder>
+img_url: <url_to_image>
+---
+# My cool research
+
+Any content in **markdown**!
+```

src/config.fsx

@@ -18,6 +18,8 @@ let staticPredicate (projectRoot: string, page: string) =
     let fileShouldBeExcluded =
         ext = ".fsx" ||
         ext = ".md"  ||
+        ext = ".p" ||
+        ext = ".bib" ||
         page.Contains "_public" ||
         page.Contains "_bin" ||
         page.Contains "_lib" ||

src/content/research/biological_data_science.md

@@ -0,0 +1,8 @@
+---
+img: biologicalDataScience.png
+index: 2
+--- 
+
+# Biological data science
+
+Modern technologies now allow researchers to simultaneously study biological organisms and processes across various molecular layers and in diverse biological contexts. To leverage this wealth of data, we are developing advanced methods for both supervised and unsupervised analysis of multi-modal omics data using cutting-edge machine learning and statistical modeling techniques. As part of fslabs.org, we contribute to the open-source data analysis library environment, ensuring that our innovations are accessible to the broader research community. Our methods enable comprehensive, data-driven integration and analysis of data derived from multiple omics technologies and varied biological scenarios, thereby enhancing our understanding of complex biological systems. 

src/content/research/prediction_omics_data.md

@@ -0,0 +1,12 @@
+---
+img: predictionOmicsData.png
+index: 3
+--- 
+
+# Prediction of acclimation modulators and integrators based on ‘omics data 
+
+Acclimation responses involve complex interactions among genes, proteins, and metabolites, resulting in both general and specific elements. Previously, we focused on extracting response-specific structural models from complex 'omics data using functional constraint aggregation and network topology inference.  
+---
+Predicting modulators and integrators based on regulatory network topology and differential expression levels remains challenging, especially with limited acclimation data. However, incorporating additional regulatory characteristics of proteins—such as thermostability, aggregation propensity, intrinsic disorder, and post-translational modifications—can improve this identification. 
+
+This project proposes a novel approach using sequential meta-learning to integrate these regulatory characteristics, overcoming data sparsity challenges. In collaboration with CRC experimental groups, we will test our model’s predictions by introducing thermostable protein homologs into plant and algal cells. These experiments are expected to reduce acclimation capabilities and cause growth retardation, validating our approach in experimental evolution assays. 

src/content/research/research_data_management.md

@@ -0,0 +1,10 @@
+---
+img: rdm.png
+index: 1
+--- 
+
+# Research data management (RDM)
+
+We are committed to the success of FAIR (Findable, Accessible, Interoperable, and Reusable) and open research data. Research data possess immense value, which, when combined with tomorrow's technologies such as machine and deep learning, can unlock answers to questions we cannot even conceive today. Therefore, the flexible contextualization of research data with machine-actionable metadata is essential to advance modern science. 
+---
+We draw inspiration from the open-source software community's success, developing approaches that enable the biological community to collaboratively build a community-wide FAIR research data resource. Our research group participates in the National Research Data Infrastructure (NFDI) initiative with the DataPLANT project, which empowers plant researchers to engage in a thriving RDM ecosystem without barriers. 

src/content/team/benedikt_venn.md → src/content/team/alumni/benedikt_venn.md

@@ -1,7 +1,7 @@
 ---
 name: Benedikt Venn
 img: venn.png
-role: PhD Student
+role: Alumni PhD Student
 orcid: 0000-0003-4203-1596
 twitter: BenediktVenn
 github: bvenn

src/content/team/selina_ziegler.md → src/content/team/alumni/selina_ziegler.md

@@ -1,7 +1,7 @@
 ---
 name: Selina Ziegler
 img: ziegler.png
-role: Research Associate
+role: alumni Research Associate
 github: zieglerSe
 orcid: 0009-0002-4713-0040
 alumni: 2023-Master Student

src/content/team/annika_paul.md

@@ -0,0 +1,8 @@
+---
+name: Annika Paul
+img: paul.jpg
+role: Bachelor
+github: Rookabu
+orcid: 0009-0008-7417-0965
+email: [email protected]
+---

src/content/team/tobias_scheid.md

@@ -0,0 +1,6 @@
+---
+name: Tobias Scheid
+role: Bachelor
+github: ScheidTo
+email: [email protected]
+---

src/generators/layout.fsx

@@ -1,6 +1,5 @@
 #r "../_lib/Fornax.Core.dll"
 
-
 open Html
 
 let rptu_navbar() =
@@ -64,6 +63,10 @@ let scaffold (ctx : SiteContents) bodyCnt =
             meta [Name "description"; Content "CSB (Computational Systems Biology) at RPTU Kaiserslautern, Germany"]
             // link [Rel "stylesheet"; Type "text/css"; Href "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"]
             link [Rel "stylesheet"; Href "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"; Integrity "sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="; CrossOrigin "anonymous"; HtmlProperties.Custom("referrerpolicy", "no-referrer")]
+            // https://splidejs.com/guides/getting-started/ for research carousel
+            script [Src "https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"] []
+            link [Rel "stylesheet"; Href "https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"]
+            link [Rel "stylesheet"; Href "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"]
             script [Defer true; Src "https://kit.fontawesome.com/0d3e0ea7a6.js"; CrossOrigin "anonymous"] []
             link [Rel "stylesheet"; Type "text/css"; Href "style/css/main.css"]
             link [Rel "preload"; HtmlProperties.Custom("as","image"); Href "./content/images/logo_small_dark.png"]
@@ -73,7 +76,6 @@ let scaffold (ctx : SiteContents) bodyCnt =
             rptu_navbar()
             csb_navbar()
             main [Class "csb-content"] [
-                // bodyCnt
                 yield! bodyCnt
             ]
 
@@ -106,6 +108,7 @@ let scaffold (ctx : SiteContents) bodyCnt =
                             })(document);
                         """
             ]
+
         ]  
     ]
 

src/generators/sections/research.fsx

@@ -1,19 +1,114 @@
 #r "../../_lib/Fornax.Core.dll"
+#if !FORNAX
+#load "../../loaders/researchloader.fsx"
+#endif
 
 open Html
 
+let private SliderHeight = "fit-content"
+let private createModalId(slide: Researchloader.FrameSlide) =
+  sprintf "More-Content-Modal-%i" slide.Index
+
+
+let private createResearchModal(slide: Researchloader.FrameSlide) =
+  let id = createModalId slide
+  // Bulma Modal
+  div [Class "modal"; HtmlProperties.Id id] [
+    div [Class "modal-background"] []
+    div [Class "modal-content"] [
+      div [Class "box"] [
+        div [Class "content"] [
+          !!slide.MainContent
+          match slide.MoreContent with
+          | Some c ->
+            !!c
+          | None -> ()
+        ]
+      ]
+    ]
+    button [Class "modal-close is-large"; HtmlProperties.Custom("aria-label", "close")] []
+  ]
+
+
+let private createMoreContentModalButton (slide: Researchloader.FrameSlide) =
+  let id = createModalId slide
+  div [] [
+    // Trigger Button
+    button [Class "button is-primary is-small js-modal-trigger"; HtmlProperties.Custom("data-target", id)] [
+      !!"More"
+    ]
+  ]
+
+let private createFrameSlide (slide: Researchloader.FrameSlide) =
+  let innerFlexBoxContainer = HtmlProperties.Style [Display "flex"; CSSProperties.Height "100%"; AlignItems "center"]
+  li [Class "splide__slide"] [
+      // container
+      div [Class "is-flex fixed-grid research__bg has-1-cols-mobile"; HtmlProperties.Style [CSSProperties.Height "100%"; AlignItems "center"; JustifyContent "center"]] [
+          div [Class "grid research__grid"; HtmlProperties.Style [CSSProperties.Custom("justify-items", "end"); CSSProperties.Height "fit-content"; CSSProperties.MaxHeight SliderHeight]] [
+              div [Class "cell research__cell"; HtmlProperties.Style [CSSProperties.Width "100%"; CSSProperties.MaxWidth "unset"]] [
+                div [innerFlexBoxContainer] [
+                  div [] [
+                    img [
+                      match slide with
+                      | { Image = Some i} -> Src i
+                      | { ImageUrl = Some i} -> Src i
+                      | _ -> ()
+                      HtmlProperties.Style [MaxWidth "100%"]
+                    ]
+                  ]
+                ]
+              ]
+              div [Class "cell research__cell"] [
+                div [innerFlexBoxContainer] [
+                  div [Class "content research__content"] [
+                      !!slide.MainContent
+                      match slide.MoreContent with
+                      | Some _ ->
+                          createMoreContentModalButton(slide)
+                      | None -> ()
+                  ]
+                ]
+              ]
+          ]
+      ]
+  ]
+
 let generate (ctx : SiteContents) (_: string) =
-    section [Class "section research"; Id "research"] [
-        div [Class "container container--full"] [
-            div [Class "research__title"] [
-                div [] [
-                    h2 [] [ !! "Welcome to CSB" ];
-                    p [] [ !! "What our research is aiming for"];
+    let researchList: Researchloader.FrameSlide list =
+        ctx.TryGetValues<Researchloader.FrameSlide> ()
+        |> Option.defaultValue Seq.empty
+        |> Seq.toList
+    div [HtmlProperties.Style [CSSProperties.Height SliderHeight]] [
+        section [Class "splide"; HtmlProperties.Custom("aria-label","current research information")] [
+            // div [Class "splide__slider"] [
+            // ]
+            div [Class "splide__track"] [
+                ul [Class "splide__list"] [
+                    for slide in researchList do
+                      createFrameSlide slide
+                ]
+            ]
+            div [Class "splide__progress"] [
+                div [Class "splide__progress__bar"] []
+            ]
+            // https://github.com/Splidejs/splide/issues/1310
+            button [Class "splide__toggle"; Type "button"] [
+                svg [Class "splide__toggle__play"; HtmlProperties.Custom("viewBox","0 0 24 24"); HtmlProperties.Custom("xmlns", "http://www.w3.org/2000/svg")] [
+                    path  [HtmlProperties.Custom("d", "m22 12-20 11v-22l10 5.5z")] []
+                ]
+                svg [Class "splide__toggle__pause"; HtmlProperties.Custom("viewBox","0 0 24 24"); HtmlProperties.Custom("xmlns", "http://www.w3.org/2000/svg")] [
+                    path  [HtmlProperties.Custom("d", "m2 1v22h7v-22zm13 0v22h7v-22z")] []
                 ]
-            ];
-
-            div [Class "research__text"] [
-                p [] [!! "The main focus of our group is the application and development of computational methods to process and integrate quantitative biological data from modern high-throughput measurements in order to gain novel insights into biological responses to environment changes. The main challenge is the rigorous integration of different system level analyses and present knowledge into biological interpretable models. Therefore, we want to drive theory and technology forward with a combination of biological science, applied informatics, statistical and machine learning approaches."]
             ]
-        ] 
-    ]
+        ]
+        script [] [
+            !!"""document.addEventListener( 'DOMContentLoaded', function() {
+    var splide = new Splide( '.splide', { type: 'loop', autoplay: true } );
+    splide.mount();
+} );"""
+        ]
+        section [] [
+          for researchSlide in researchList do
+            createResearchModal researchSlide
+        ]
+    ]

src/loaders/bibloader.fsx

@@ -80,7 +80,6 @@ let loadFile (featured:bool) (bibFile: string) =
 
 let loader (projectRoot: string) (siteContent: SiteContents) =
     let postsPath = Path.Combine(projectRoot, contentDir)
-    printfn "%s" postsPath
     let options = EnumerationOptions(RecurseSubdirectories = false)
     let files = Directory.GetFiles(postsPath, "*", options)
     files

src/loaders/researchloader.fsx

@@ -0,0 +1,106 @@
+#r "../_lib/Fornax.Core.dll"
+#r "../_lib/Markdig.dll"
+
+open System.IO
+open Markdig
+
+let key_image = "img"
+let key_image_url: string = "img_url"
+
+let contentDir = "content/research/"
+
+let imgDir = "content/images/research/"
+
+
+module ContentReader =
+
+    let pipeline = 
+      let n = new MarkdownPipelineBuilder()
+      n
+        .UseAdvancedExtensions()
+        .Build();
+
+    let isSeparator (input : string) =
+      input.StartsWith "---"
+
+    ///`fileContent` - content of page to parse. Usually whole content of `.md` file
+    /// Returns map<string,string> with frontmatter and everything else as "content".
+    let getData (fileContent : string []) =
+        let fileContent = fileContent |> Array.skip 1 //First line must be ---
+        let indexOfSeperator = fileContent |> Array.findIndex isSeparator
+        let splitKey (line: string) =
+            let seperatorIndex = line.IndexOf(':')
+            if seperatorIndex > 0 then
+                let key = line.[.. seperatorIndex - 1].Trim().ToLower()
+                let value = line.[seperatorIndex + 1 ..].Trim()
+                Some(key, value)
+            else
+                None
+        let frontmatter, content =
+            fileContent
+            |> Array.splitAt indexOfSeperator
+            |> fun (x, y) -> x,y.[1..] //skip closing ---
+        let moreContentIndex = content |> Array.tryFindIndex isSeparator
+        let content, moreContent =
+          match moreContentIndex with
+          | Some i ->
+            let content, moreContent = content |> Array.splitAt i
+            content, Some moreContent.[1..] //skip closing ---
+          | None -> 
+            content, None
+        frontmatter
+        |> Seq.choose splitKey
+        |> Map.ofSeq
+        |> fun x -> 
+            match moreContent with
+            | None -> x
+            | Some moreContent ->
+              let moreContent = moreContent |> String.concat "\n"
+              x.Add("more", moreContent)
+        |> fun x -> 
+          x.Add(
+            "content", 
+            content
+            |> String.concat "\n"
+          )
+
+
+type FrameSlide = {
+    /// This will always be on the slider
+    MainContent: string
+    /// This is hidden behind "More" button. Only exists if content after empty line exists.
+    MoreContent: string option
+    Image: string option
+    ImageUrl: string option
+    Index: int
+} with
+  static member create(content: string, index:int, ?moreContent, ?image, ?imageurl) =
+    { MainContent = content; Index = index; MoreContent = moreContent; Image = image; ImageUrl = imageurl }
+
+let getImageUrl (imageName: string) =
+    imgDir + imageName
+
+open Markdig
+
+let loadFile (filePath: string) =
+    let lines = File.ReadAllLines(filePath)
+    let metadata = ContentReader.getData lines
+    let content = metadata.["content"] |> fun c -> Markdown.ToHtml(c, ContentReader.pipeline)
+    let moreContent = metadata |> Map.tryFind "more" |> Option.map (fun mc -> Markdown.ToHtml(mc, ContentReader.pipeline))
+    let image = metadata |> Map.tryFind key_image |> Option.map getImageUrl
+    let imageUrl = metadata |> Map.tryFind key_image_url
+    let index = metadata |> Map.tryFind "index" |> Option.map int |> Option.defaultValue System.Int32.MaxValue
+    FrameSlide.create(content, index, ?moreContent=moreContent, ?image=image, ?imageurl=imageUrl)
+
+let loader (projectRoot: string) (siteContent: SiteContents) =
+    let postsPath = Path.Combine(projectRoot, contentDir)
+    let options = EnumerationOptions(RecurseSubdirectories = true)
+    let files = Directory.GetFiles(postsPath, "*", options)
+    files
+    |> Array.filter (fun n -> n.EndsWith ".md")
+    |> Array.map (loadFile)
+    |> Array.sortBy (fun x -> x.Index)
+    |> Array.mapi (fun i x -> { x with Index = i }) // make index unique
+    |> Array.iter siteContent.Add
+    // siteContent.Add({disableLiveRefresh = false})
+    siteContent