Refactor blog CSS options into CSS file (#20)

* Refactor blog CSS options into CSS file * Contributing (#21) * update css definitions * add blog post instructions * clean up post --------- Co-authored-by: Kevin Dalton <[email protected]> * fix code blocks * embolden guidelines * update mathjax info * remove weird comma --------- Co-authored-by: dennisbrookner <[email protected]> Co-authored-by: Kevin Dalton <[email protected]>
rs-station · Aug 2, 2024 · 087ac41 · 087ac41
1 parent e2d9842
commit 087ac41
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,34 @@
 # Reciprocal Space Station Website
 
 Organization website for Reciprocal Space Station
+
+
+### Writing Blog Posts
+Reciprocal Space Station encourages developers to contribute [blog posts](rs-station.github.io/blog). We're flexible on the formatting, but we suggest following these __guidelines__
+ - Blog posts are markdown files in the format `rs-station.github.io/_posts/YYYY-MM-DD-post-title.md`. 
+ - Posts begin with a YAML front matter block such as
+
+        ---
+        layout: post
+        title: A Short Title
+        subtitle: A Longer Subtitle
+        author: Your Name
+        usemathjax: true
+        ---
+ - You may enable latex rendering through mathjax by adding the following line to your post's front matter
+
+        usemathjax: true
+ - If the post contains media such as images, those should be located in `rs-station-github.io/assets/posts/YYYY-MM-DD-post-title`.
+ - Use the `blog-image`, `blog-caption` or `blog-image-wide`, `blog-caption-wide` attributes to format images. For example,
+
+        ![Systematic errors in rotation data](/assets/posts/2024-07-31-multivariate-wilson/systematic_error.png){: .blog-image} 
+        Example of systematic errors in conventional diffraction data from [Dalton et al](https://doi.org/10.1038/s41467-022-35280-8). [(CC-BY license)](https://creativecommons.org/licenses/by/4.0/)
+        {: .blog-caption}
+ - Inlude the licenses of images from papers or preprints.
+
+For simple posts without figures or equations, you might not need a preview. For more complicated posts, you can run [Jekyll](https://jekyllrb.com/) locally to get a live preview. Follow these instructions to serve the rs-station page locally for writing or development. 
+ 1. Install ruby and Jekyll by following the [instructions](https://jekyllrb.com/docs/) in the  Jekyll docs
+ 2. Install the `rs-station` specific dependencies by running: `gem install jekyll-font-awesome-sass github-pages`
+ 3. To start serving the site, run `bundle exec jekyll serve --livereload` in your local `rs-station.github.io` git repository
+ 4. Navigate to the "Server address" listed in your terminal window. The preview will live update after you make any changes. 
+
diff --git a/_posts/2024-07-31-multivariate-wilson.md b/_posts/2024-07-31-multivariate-wilson.md
@@ -3,18 +3,14 @@ layout: post
 title: Multivariate Wilson Priors
 subtitle: Pre-prints Demonstrate Multivariate Priors for Time-Resolved Crystallography
 author: Kevin Dalton
-usemathjax: true
 ---
 
-<!-- CSS definitions for images -->
-{:image: style="margin-right: 25%;margin-left: 25%;width: 50%"}
-{:caption: style="display: inline-block;padding: 0 15%;"}
-
 ### Comparative Crystallography and Careless
 In modern structural biology, we are often more interested in the small differences between related structures rather than the structures themselves. There are many applications of this concept in the domain of comparative crystallography. For instance, equilibrium biophysical perturbations such as multitemperature crystallography, non-equilibrium perturbations like electric-field or temperature jumps, drug fragment screening, and anomalous diffraction all fall under the umbrella of comparative crystallography. While comparative data have been successfully analyzed using conventional tools, the fidelity of experiments are often challenged by the magnitude of systematic errors present in diffraction data. These can be hundreds of times larger than the true structural differences. 
 
-![Systematic errors in rotation data](/assets/posts/2024-07-31-multivariate-wilson/systematic_error.png){: image}
-*Example of systematic errors in conventional diffraction data from [Dalton et al](https://doi.org/10.1038/s41467-022-35280-8). [(CC-BY license)](https://creativecommons.org/licenses/by/4.0/)*{: caption}
+![Systematic errors in rotation data](/assets/posts/2024-07-31-multivariate-wilson/systematic_error.png){: .blog-image}
+Example of systematic errors in conventional diffraction data from [Dalton et al](https://doi.org/10.1038/s41467-022-35280-8). [(CC-BY license)](https://creativecommons.org/licenses/by/4.0/)
+{: .blog-caption}
 
 
 To address the problem of systematic errors in diffraction data, we built [careless](https://github.com/rs-station/careless), a flexible tool for merging reflection intensities. Careless uses modern concepts from machine learning like variational inference and deep learning to correct the systematic errors. In our original [publication](https://doi.org/10.1038/s41467-022-35280-8) we demonstrated that careless works well for one important application of comparative crystallography which is time-resolved diffraction. Specifically, we showed state of the art inference of time-resolved structural changes in photoactive yellow protein. This week, we're excited to announce a new feature which takes careless to the next level in the comparative crystallography setting. We shared our insights in a series of 3 closely related pre-prints. 
@@ -24,8 +20,9 @@ To address the problem of systematic errors in diffraction data, we built [carel
  3. [Scaling and Merging Time-Resolved Laue Data with Variational Inference](https://doi.org/10.1101/2024.07.30.605871)
 
 ### Multivariate Wilson Prior
-![Applications of the multivariate Wilson prior](/assets/posts/2024-07-31-multivariate-wilson/comparative_xtal_graphs.png){: image}
-*Applications of the multivariate Wilson prior from [Hekstra et al.](https://doi.org/10.1101/2024.07.22.604476) [(CC-BY-NC license)](https://creativecommons.org/licenses/by-nc/4.0/)*{: caption}
+![Applications of the multivariate Wilson prior](/assets/posts/2024-07-31-multivariate-wilson/comparative_xtal_graphs.png){: .blog-image}
+Applications of the multivariate Wilson prior from [Hekstra et al.](https://doi.org/10.1101/2024.07.22.604476) [(CC-BY-NC license)](https://creativecommons.org/licenses/by-nc/4.0/)
+{: .blog-caption}
 
 Hekstra et al. (1) derive a mathematical formalism for comparative crystallography. The key insight in their approach is to add some structure into the Bayesian prior distribution used for merging data in Careless. Specifically, the default implementation in careless treats related structures as statistically *independent*. By allowing users to specify that subsequent time-points should be statistically *dependent*, this work is able to tease much more signal out of diffraction data. Specific applications demonstrated in the manuscript include
  - polychromatic anomalous diffraction
@@ -38,18 +35,22 @@ Hekstra et al. (1) derive a mathematical formalism for comparative crystallograp
 ### Time-resolved Diffraction of an Enzyme, DJ-1
 Zielinski and Dolamore et al. (2) applied the Multivariate Wilson prior to DJ-1, an enzyme involved in Parkinson's disease. In this study, Lois Pollack's [team](https://pollack.research.engineering.cornell.edu/) from Cornell University developed sample mixers which allowed DJ-1 to be rapidly mixed with a substrate, methylglyoxal. Mark Wilson's [group](https://redoxbiologycenter.unl.edu/markwilsonphd) from University of Nebraska Lincoln grew the DJ-1 crystals which were recorded in a time-resolved fashion at [BioCARS](https://biocars.uchicago.edu/), a polychromatic beamline at the Advanced Photon Source. This configuration allowed the collaborators  to observe the conversion of toxic methylgloxal into non-toxic lactate. The exceptional clarity of the time-resolved difference electron density maps produced by Careless enabled new insights into the catalytic mechanism of DJ-1 including an explanation of the enantio-purity of the products. 
 
-![Stereo chemistry of DJ-1 Lactoyl-cysteine intermediate](/assets/posts/2024-07-31-multivariate-wilson/lc_intermediate.png){: image}
-*The mechanism of enantioselective hydrolysis in DJ-1 catalysis as explained by [Zielinski and Dolamore et al.](https://doi.org/10.1101/2024.07.19.604369). Water can only access the Lactoylcysteine intermediate from the solvent-exposed face of the active site. [(CC-BY-NC-ND license)](https://creativecommons.org/licenses/by-nc-nd/4.0/)*{: caption}
+![Stereo chemistry of DJ-1 Lactoyl-cysteine intermediate](/assets/posts/2024-07-31-multivariate-wilson/lc_intermediate.png){: .blog-image}
+The mechanism of enantioselective hydrolysis in DJ-1 catalysis as explained by [Zielinski and Dolamore et al.](https://doi.org/10.1101/2024.07.19.604369). Water can only access the Lactoylcysteine intermediate from the solvent-exposed face of the active site. [(CC-BY-NC-ND license)](https://creativecommons.org/licenses/by-nc-nd/4.0/)
+{: .blog-caption}
 
 
-![Long-range allostery in DJ-1](/assets/posts/2024-07-31-multivariate-wilson/dj1_allostery.png){: image}
-*[Zielinski and Dolamore et al.](https://doi.org/10.1101/2024.07.19.604369) show evidence of long-range allostery between the active site and Cystein-53. [(CC-BY-NC-ND license)](https://creativecommons.org/licenses/by-nc-nd/4.0/)*{: caption}
+![Long-range allostery in DJ-1](/assets/posts/2024-07-31-multivariate-wilson/dj1_allostery.png){: .blog-image}
+[Zielinski and Dolamore et al.](https://doi.org/10.1101/2024.07.19.604369) show evidence of long-range allostery between the active site and Cystein-53. [(CC-BY-NC-ND license)](https://creativecommons.org/licenses/by-nc-nd/4.0/)
+{: .blog-caption}
 
 ### Variational Inference Best Practices
 Finally, Zielinski et al (3), details the application of Careless to time-resolved data using DJ-1 as an example. This manuscript offers helpful guidance to users seeking to get the most of their time-resolved diffraction data. Furthermore, it contains a thorough ablation study which demonstrates the impact of many components of the model. As judged from the ablation, the multivariate Wilson prior was extremely important for maximizing time-resolved signal. In our estimation, the prior contributes a nearly 10 sigma boost in signal to noise!
 
-![DJ-1 merging ablation study](/assets/posts/2024-07-31-multivariate-wilson/dj1_ablation_study.png){: style="width: 100%"}
-*[Zielinski et al.](https://doi.org/10.1101/2024.07.30.605871) studied the importance of careless model components by conducting ablation studies. Among other important observations, they showed the multivariate Wilson prior accounts for a nearly 10 sigma increase in time-resolved difference signal. [(CC-BY-NC license)](https://creativecommons.org/licenses/by-nc/4.0/)*
+![DJ-1 merging ablation study](/assets/posts/2024-07-31-multivariate-wilson/dj1_ablation_study.png){: .blog-image-wide}
+
+[Zielinski et al.](https://doi.org/10.1101/2024.07.30.605871) studied the importance of careless model components by conducting ablation studies. Among other important observations, they showed the multivariate Wilson prior accounts for a nearly 10 sigma increase in time-resolved difference signal. [(CC-BY-NC license)](https://creativecommons.org/licenses/by-nc/4.0/)
+{: .blog-caption-wide}
 
 ### The Future of Variational Inference in Crystallography
 Together, these pre-prints highlight the flexibility of variational inference as a framework for modeling crystallographic data. New insights like the multivariate prior are easy to incorporate and test. Furthermore, they translate to meaningful biological results! The rs-station devs are looking forward to continuing advancing the state of the art as we support and develop this important technology. 
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -90,6 +90,31 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+/* custom things should go here */
+
+.blog-image {
+  margin-right: 10%;
+  margin-left: 10%;
+  width: 80%;
+}
+
+.blog-image-wide {
+  width: 100%;
+}
+
+.blog-caption {
+  display: inline-block;
+  font-style: italic;
+  padding: 0 15%;
+}
+
+.blog-caption-wide {
+  display: inline-block;
+  font-style: italic;
+}
+
+/* end custom things */
+
 .highlight table td { padding: 5px; }
 .highlight table pre { margin: 0; }
 .highlight, .highlight .w {
@@ -12365,4 +12390,4 @@ fieldset:disabled .btn {
   .d-print-none {
     display: none !important;
   }
-}
+}