Docs example listing

docs/_quarto.yml

@@ -18,6 +18,8 @@ website:
         text: Node Documentation
       - file: examples/
         text: Examples
+      - file: cite/
+        text: Citations
     tools:
       - icon: github
         href: https://github.com/BradyAJohnston/MolecularNodes

docs/cite/citations.yml

@@ -0,0 +1,39 @@
+- title: "Electrophysical cardiac remodeling at the molecular level: Insights into ryanodine receptor activationand calcium-induced calcium release from stochastic explicit-particle model"
+  doi: https://doi.org/10.1016/j.bpj.2024.09.029
+  path: https://papers.cnl.salk.edu/PDFs/Electrophysical%20cardiac%20remodeling%20at%20the%20molecular%20level_%20insights%20into%20Ryanodine%20Receptor%20activation%20and%20calcium-induced%20calcium%20release%20from%20a%20stochastic%20explicit-particle%20model%202024-4666.pdf
+  image: https://imgur.com/P84FZ2v.png
+
+- title: Nonuniversal impact of cholesterol on membranes mobility, curvature sensing and elasticity
+  path: https://www.nature.com/articles/s41467-023-43892-x.pdf
+  doi: https://doi.org/10.1038/s41467-023-43892-x
+  image: https://imgur.com/sa4A8yr.png
+
+- title: Archaeal GPN-loop GTPases involve a lock-switch-rock mechanism for GTP hydrolysis
+  path: https://journals.asm.org/doi/10.1128/mbio.00859-23
+  doi: https://doi.org/10.1128/mbio.00859-23
+  image: https://journals.asm.org/cms/10.1128/mbio.00859-23/asset/73ca5da9-6f89-43f4-a18b-790149533ac7/assets/images/large/mbio.00859-23.f005.jpg
+
+- title: Recent advances in interpretable machine learning using structure-based protein representations
+  doi: https://doi.org/10.48550/arXiv.2409.17726
+  path: https://arxiv.org/pdf/2409.17726
+  image: https://arxiv.org/html/2409.17726v1/extracted/5880997/images/Fig1-pointcloud-light.png
+
+- title: The Role of Protein-Lipid Interactions in Priming the Bacterial Translocon
+  doi: https://www.preprints.org/manuscript/202410.2268/v1
+  image: https://www.preprints.org/frontend/picture/ms_xml/manuscript/fb26f36cf846eb4e34f781f677c3ad11/preprints-137718-g003.png
+  path: https://www.preprints.org/manuscript/202410.2268/v1
+
+- title: Coarse-grained modeling of annexin A2-induced microdomain formation on a vesicle
+  doi: https://doi.org/10.1016/j.bpj.2024.06.006
+  path: https://www.cell.com/biophysj/fulltext/S0006-3495(24)00389-8?_returnURL=https%3A%2F%2Flinkinghub.elsevier.com%2Fretrieve%2Fpii%2FS0006349524003898%3Fshowall%3Dtrue
+  image: https://www.cell.com/cms/10.1016/j.bpj.2024.06.006/asset/7e712926-d4ed-4204-909e-ac4cc69261bf/main.assets/gr1.jpg
+
+- title: Unravelling the Maturation Pathway of a Eukaryotic Virus through Cryo-EM
+  doi: https://doi.org/10.1101/2024.08.31.610394
+  path: https://www.biorxiv.org/content/10.1101/2024.08.31.610394v1
+  image: https://www.biorxiv.org/content/biorxiv/early/2024/08/31/2024.08.31.610394/F1.medium.gif
+
+- title: Ribosomes hibernate on mitochondria during cellular stress
+  path: https://www.nature.com/articles/s41467-024-52911-4
+  image: https://media.springernature.com/lw685/springer-static/image/art%3A10.1038%2Fs41467-024-52911-4/MediaObjects/41467_2024_52911_Fig4_HTML.png
+  doi: https://doi.org/10.1038/s41467-024-52911-4

docs/cite/index.qmd

@@ -0,0 +1,15 @@
+---
+title: Citing Molecular Nodes
+listing: 
+    id: listing-citations
+    contents: citations.yml
+    type: grid
+    grid-columns: 3
+---
+
+A paper for Molecular Nodes has not yet been published, but you can cite the Zenodo entry for the GitHub repo here: [![](https://zenodo.org/badge/485261976.svg)](https://zenodo.org/badge/latestdoi/485261976)
+
+A selection of academic works that use Molecular Nodes in producing some of their figures or supplimentary movies.
+
+::: {#listing-citations}
+:::

docs/examples/examples.yml

@@ -0,0 +1,45 @@
+- title: Your Unstoppable Copy Machine
+  author: Clockwork
+  description: Clockwork is a YouTube channel about some of the really nitty-gritty biochemistry with great visuals and writing. They recently started posting videos again, having made the jump from 2D animations in After Effects to 3D animations inside of Blender using Molecular Nodes.
+  path: https://www.youtube.com/watch?v=lv89fSt5jBY
+  image: https://img.youtube.com/vi/lv89fSt5jBY/0.jpg
+
+- title: RF Peptides
+  author: Institute for Protein Design
+  image: https://www.ipd.uw.edu/wp-content/uploads/2024/11/RFpeptides-macrocycle-diffusion-web-banner-1.jpg
+  path: https://www.ipd.uw.edu/2024/11/introducing-rfpeptides-ai-for-cyclic-peptide-design/
+
+- title: Where the Light Touches Your Eyes
+  author: Clockwork
+  description: 👀 Your visual system is astounding down at the molecular level-because the photoreceptor cells in your retina maintain an incredible balance of proteins that allows for an incredible visual range. Let’s meet rhodopsin, the molecular worker at the core of your visual system. We’ll discover how light physically touches and changes you every time you perceive just about anything.
+  path: https://youtu.be/LexKZva0s4I?si=HeCqmEEGxEEamzNL
+  image: https://img.youtube.com/vi/LexKZva0s4I/0.jpg
+
+- title: The Increible Biology Powering Autumn Colors
+  author: Clockwork
+  description: 🍂 You've probably learned why leaves change color and drop from trees in the fall. But what actually causes these color changes?
+  path: https://youtu.be/wOjkeyjJ364?si=WfD1PglPw3NY8UAu
+  image: https://img.youtube.com/vi/wOjkeyjJ364/0.jpg
+
+- title: Biologia Molecular
+  description: A TikTok channel making molecular movies with \#MolecularNodes
+  path: https://www.tiktok.com/@biologia.molecular
+  image: https://imgur.com/nMBlLgk.png
+
+- title: Knot Theory
+  author: Veritasium
+  description: A popular YouTube science channel, discussing DNA topoisomerases.
+  path: https://www.youtube.com/watch?v=8DBhTXM_Br4
+  image: https://img.youtube.com/vi/8DBhTXM_Br4/0.jpg
+
+- title: Microtubules
+  author: Zhaowen Luo, St Jude Children's Hospital
+  description: An animation from St Jude Children's Hospital, created by Zhaowen Luo. It was shown at the Association of Medical Illustrators annual conference in 2023, and won the category for Individual Professional Motion and Interactive Media.
+  path: https://awards.ami.org/gallery/WOVQRGgD/LrVXNAor?search=848d592b94f65998-20
+  image: https://i.imgur.com/YpaJXEV.png
+
+- title: Nano Rooms
+  description: Nano rooms is a YouTube channel explaining the beautilful mathematical underpinnings of biology, and many of their animations of protein structures are using Molecular Nodes and Blender.
+  path: https://www.youtube.com/watch?v=elRbbdJUiTU
+  image: https://img.youtube.com/vi/elRbbdJUiTU/0.jpg
+

docs/examples/index.qmd

@@ -1,10 +1,21 @@
 ---
 title: Examples
 listing: 
-    contents: .
+    id: listing-examples
+    contents: examples.yml
     type: grid
     sort: date desc
-    sort-ui: true
+    sort-ui: false
+    grid-columns: 2
+    filter-ui: true
+    # template: template.ejs
+
+# css: styles.css
+
 
 ---
-Below are examples of Molecular Nodes being used on different projects, from wet-lab scientists to professional animators.
+
+Some examples of projects that have used Molecular Nodes in their production.
+
+::: {#listing-examples}
+:::

docs/examples/styles.css

@@ -0,0 +1,81 @@
+<style>
+  .grid-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 100%;
+  }
+
+  @media (min-width: 992px) {
+    .grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .grid-item {
+    break-inside: avoid;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .grid-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .media-wrapper {
+    margin-bottom: 15px;
+  }
+
+  .media-wrapper img,
+  .media-wrapper video {
+    width: 100%;
+    /* height: 100px; */
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+  }
+
+  .card-title {
+    margin: 0 0 10px 0;
+    font-size: 1.25rem;
+    color: #333;
+  }
+
+  .quarto-grid-link {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .listing-description {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #666;
+    margin-bottom: 15px;
+  }
+
+  .card-attribution {
+    font-size: 0.85rem;
+    color: #777;
+  }
+
+  .card-footer {
+    border-top: 1px solid #eee;
+    padding-top: 10px;
+    margin-top: auto;
+    font-size: 0.85rem;
+    color: #888;
+  }
+
+  .no-external {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>

docs/examples/template.ejs

@@ -0,0 +1,61 @@
+:::: {.grid .text-center .list}
+
+<% for (const item of items) { %>
+
+:::: {.quarto-grid-item .card .h-100 .w-100 .card-center .hovercard-extension}
+
+:::: {.card-body .post-contents}
+
+
+[
+`<h4 class="no-anchor card-title listing-title">`{=html}
+  <%= item.title %>
+  `</h5>`{=html}
+](<%- item.path %>){.quarto-grid-link}
+
+
+
+<% if (item.video && item.video.endsWith(".mp4")) { %>
+:::: {.media-wrapper}
+<video controls muted loop autoplay>
+  <source src="<%= item.video %>" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+:::
+<% } else if (item.video) { %>
+:::: {.media-wrapper}
+  <video controls muted loop autoplay>
+    <source src="<%= item.video %>.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+:::
+<% } else if (item.image) { %>
+[![](<%= item.image %>){.media-wrapper}](<%= item.path %>)
+<% } %>
+
+:::: {.card-text .listing-description}
+<%= item.description %>
+:::
+
+:::: {.card-attribution .card-text-small .justify}
+:::: {.listing-author}
+<%= item.author %>
+:::
+:::
+
+
+
+:::: {.card-footer}
+:::: {.listing-file-modified}
+***Updated**: <%= item['file-modified'] %>*
+:::
+:::
+
+:::
+
+:::
+
+<% } %>
+
+:::
+

molecularnodes/ui/menu.py

@@ -33,7 +33,7 @@ def __init__(
         self,
         name: str,
         label: str = None,
-        description: str = None,
+        description: str = "",
         videos: str = None,
         backup: str = None,
     ) -> None: