Skip to content
Snippets Groups Projects

Update to the tutorial section of the documentation and the MKdocs configs

2 unresolved threads

Summary

This branch includes updates to the tutorials section of the NOMAD documentation, along with improvements to styling and functionality to support image sliders and enhanced formatting.


Tutorial Pages

  1. Created a new overview page
    overview.md

  2. Removed the "Navigation to NOMAD" page

  3. Replaced the content of:

    • upload_publish.md – Uploading and Publishing Data
    • explore.md – Exploring Data
  4. Added a new tutorial
    NOMAD_ELN.md – Using NOMAD as an ELN


Configuration Changes

mkdocs.yml

  • Updated the nav section to reflect the new tutorial structure

javascript.js

  • Added a script to enable image sliders (horizontal image navigation)

extra.css

  • Added styles and classes for image sliders

Writing Guide Updates

  • Added instructions for preparing image sliders in documentation
  • Introduced three new admonitions used across tutorials:
    • !!! example
    • !!! task
    • !!! info

Closes #2287 (closed)

Edited by Ahmed Mansour

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
272 - *Materials* card: shows key information and visulization of the composition and conventional cell.
273 <img src="images/example_3-2_materials_card.png" alt="screenshot of electronic properties card" width="250">
274
275 - *Electronic properties* card: shows the calculated band structure, density of states, and Brillouin zone.
276 <img src="images/example_3-2_electronic_properties_card.png" alt="screenshot of materials card" width="250">
277
278 - *Workflow Graph* card: illustrates the various steps in the calculation, including their inputs and outputs.
279 <img src="images/example_3-2_workflow_card.png" alt="screenshot of workflow card" width="250">
280
281 - **FILES** tab:
282
283 This tab shows the uploaded files. NOMAD lists all files in the same directory, as they usually belong together.
284
285 ![screenshot of the files tab](images/example_3-2_files_tab.png)
286
287 - **DATA** tab:
  • Great work! The documentation is detailed yet easy to follow. I added a minor comment.

  • Sarthak Kapoor approved this merge request

    approved this merge request

    • Author Developer

      @himanel1 Could you please have a quick look before merging? Specifically on the Javascript file and the CSS.

    • The CSS and JS files look fine to me :thumbsup:

      There is one other thing: you are adding quite a lot of images, and they are all in .png. I also see that all of our older images in that folder are .png. We should convert all of these to .jpeg or .webp since these are really the formats we should use in the web world (they take much less network bandwidth to load).

      There are command line tools for this that can convert all of the files in that folder on one go. Should I do this for you and then merge?

      Edited by Lauri Himanen
    • Author Developer

      Thanks @himanel1. Yes, please! It would be great if you convert the images! I will keep in mind that I make all my images in .jpeg or .webp in the future.

    • Sorry I just now remembered this and started doing it.

      I'm realizing that the png->jpg conversion is not actually bringing very much savings, and I also see there are several fairly large gifs here that I can't right now do much about.

      Let's merge this branch for now. The docs folder is becoming quite big and I think we will want to separate it out of this repo entirely soon.

    • Please register or sign in to reply
  • merged

  • Lauri Himanen mentioned in commit 2519d92d

    mentioned in commit 2519d92d

  • Please register or sign in to reply
    Loading