Update to the tutorial section of the documentation and the MKdocs configs
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
-
Created a new overview page
→overview.md
-
Removed the "Navigation to NOMAD" page
-
Replaced the content of:
-
upload_publish.md
– Uploading and Publishing Data -
explore.md
– Exploring Data
-
-
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)
Merge request reports
Activity
added documentation label
requested review from @g-sarthakkapoor
assigned to @himanel1
added 122 commits
-
9b5321d6...c3fa3409 - 119 commits from branch
develop
- 9290f0f6 - Updated the tutorial section of the documentation, the mkdocs config, the...
- aa5b23a6 - updates the writing guide of the docs
- 11a6c1bb - minor corrections
Toggle commit list-
9b5321d6...c3fa3409 - 119 commits from branch
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  286 287 - **DATA** tab: @g-sarthakkapoor Thanks for reviewing this! The data tab mentioned in the sub-heading refers to the tabs on the top of the NOMAD entires (overview, files, data, and logs).
Edited by Ahmed Mansour
@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
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 HimanenThanks @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.
mentioned in commit 2519d92d