Sdg23 add getting started page md (#443)

* FIX broken links

* add mamba instructions and refine installation quick start

* add mamba instructions and refine installation quick start

* address PR review comments

* Add 'Getting Started' page with installation, basic example, and
learning resources

* Update basic_example.md

slight changes to improve readability of the code example comments for new users

* address PR review comments

* Address PR review comments

* address PR review comments and restyle code block

* restyle code block in basic example page

---------

Co-authored-by: Micaela Matta <[email protected]>

Author: namiroues

pages/basic_example.md

@@ -1,34 +1,36 @@
 ---
-layout: page
+layout: otherpage
 title: Basic example
-order: 1
 ---
 
 A typical usage pattern is to iterate through a trajectory and analyze
 coordinates for every frame. In the following example the end-to-end
 distance of a protein and the radius of gyration of the backbone atoms
 are calculated:
 
-{% highlight python %}
-import MDAnalysis
-from MDAnalysis.tests.datafiles import PSF, DCD   # test trajectory
-import numpy.linalg
+<div class="wide-code">
+    {% highlight python %}
+    import MDAnalysis
+    from MDAnalysis.tests.datafiles import PSF, DCD   # test trajectory
+    import numpy.linalg
 
-u = MDAnalysis.Universe(PSF,DCD)  # always start with a Universe
-# can access via segid (4AKE) and atom name
-# we take the first atom named N and the last atom named C
-nterm = u.select_atoms('segid 4AKE and name N')[0]
-cterm = u.select_atoms('segid 4AKE and name C')[-1]
+    # load trajectory and topology into a Universe
+    u = MDAnalysis.Universe(PSF,DCD)  
+    # from the 4AKE segid, select
+    # the first atom named N and the last atom named C
+    nterm = u.select_atoms('segid 4AKE and name N')[0]
+    cterm = u.select_atoms('segid 4AKE and name C')[-1]
+    # select the backbone atoms (AtomGroup)
+    bb = u.select_atoms('protein and backbone') 
 
-bb = u.select_atoms('protein and backbone')  # a selection (AtomGroup)
-
-for ts in u.trajectory:     # iterate through all frames
-    r = cterm.position - nterm.position # end-to-end vector from atom positions
-    d = numpy.linalg.norm(r)  # end-to-end distance
-    rgyr = bb.radius_of_gyration()  # method of AtomGroup
-    print("frame = {0}: d = {1} A, Rgyr = {2} A".format(
-          ts.frame, d, rgyr))
-{% endhighlight %}
+    for ts in u.trajectory: # iterate through all frames
+        r = cterm.position - nterm.position # end-to-end vector from atom positions
+        d = numpy.linalg.norm(r) # end-to-end distance
+        rgyr = bb.radius_of_gyration() # method of AtomGroup
+        print("frame = {0}: d = {1} A, Rgyr = {2} A".format(
+              ts.frame, d, rgyr))
+    {% endhighlight %}
+</div>
 
 To find out what else you can do, head over to [learning
 MDAnalysis]({{ site.baseurl }}/pages/learning_MDAnalysis) to have a look

pages/getting_started.md

@@ -0,0 +1,53 @@
+---
+layout: page
+title: Getting Started 
+order: 1
+---
+
+MDAnalysis is a Python library for analyzing molecular dynamics (MD) simulations. This page will guide you through quickly installing MDAnalysis, exploring a basic example, and accessing learning resources to get started.
+
+## Installation Instructions
+
+Our [Installation Quick Start]({{ site.baseurl }}/pages/installation_quick_start) guide contains instructions to get MDAnalysis up and running in a few minutes. Try this guide first. 
+
+For a more thorough installation with advanced options, including dependencies and environment configurations, see the [installation instructions in the User Guide]({{ site.docs.userguide.url }}/stable/installation.html). 
+
+## Basic Example
+
+Once MDAnalysis is installed, you can load a trajectory and perform a simple analysis. A typical usage pattern is to iterate through a trajectory and analyze
+coordinates for every frame.
+
+In the following example, the end-to-end distance of a protein and the radius of gyration of the backbone atoms are calculated:
+
+<div class="wide-code">
+    {% highlight python %}
+    import MDAnalysis
+    from MDAnalysis.tests.datafiles import PSF, DCD   # test trajectory
+    import numpy.linalg
+
+    # load trajectory and topology into a Universe
+    u = MDAnalysis.Universe(PSF,DCD)  
+    # from the 4AKE segid, select
+    # the first atom named N and the last atom named C
+    nterm = u.select_atoms('segid 4AKE and name N')[0]
+    cterm = u.select_atoms('segid 4AKE and name C')[-1]
+    # select the backbone atoms (AtomGroup)
+    bb = u.select_atoms('protein and backbone') 
+
+    for ts in u.trajectory: # iterate through all frames
+        r = cterm.position - nterm.position # end-to-end vector from atom positions
+        d = numpy.linalg.norm(r) # end-to-end distance
+        rgyr = bb.radius_of_gyration() # method of AtomGroup
+        print("frame = {0}: d = {1} A, Rgyr = {2} A".format(
+              ts.frame, d, rgyr))
+    {% endhighlight %}
+</div>
+
+## Learning Resources
+
+To find out what else you can do, head over to [Learning
+MDAnalysis]({{ site.baseurl }}/pages/learning_MDAnalysis) to explore
+tutorials and documentation.
+
+If you have questions, visit our [Community]({{ site.baseurl }}/pages/community) page to learn about available discussion channels. Happy coding!
+

pages/installation_quick_start.md

@@ -1,7 +1,6 @@
 ---
-layout: page
+layout: otherpage
 title: Installation Quick Start
-order: 2
 ---
 
 MDAnalysis can be installed using [mamba][], a faster drop-in replacement for [conda][], or [pip][].

public/css/local.css

@@ -45,3 +45,11 @@ but our YouTube videos seem to be natively widescreen.
   position: absolute;
 }
 
+.wide-code pre {
+  white-space: pre;
+  overflow-x: auto;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+