Merge pull request #125 from justwriteclick/images

annegentle · web-flow · commit 47ebdf6c4d81 · 2019-03-14T23:51:34.000-05:00
Create a new layout for Learn pages
diff --git a/_layouts/learn.html b/_layouts/learn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+    So Simple Jekyll Theme 3.0.1
+    Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
+    Free for personal and commercial use under the MIT license
+    https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
+-->
+<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}" class="no-js">
+  {% include head.html %}
+
+  <body class="layout--default">
+   <main id="main" class="main-content" aria-label="Content">
+    <article>
+      <div class="page-wrapper">
+        <div class="page-content">
+       {% include skip-links.html %}
+       {% include navigation.html %}
+       <h1>{{ page.title }}</h1>
+       <div>
+        <img src="{{ page.image.thumbnail }}" alt="{{ page.image.caption }}">
+       </div>
+       {{ content }}
+       </div>
+     </div>
+    {% include footer.html %}
+    {% include scripts.html %}
+    </article>
+   </main>
+  </body>
+
+</html>
diff --git a/_learn/01-sphinx-python-rtd.md b/_learn/01-sphinx-python-rtd.md
@@ -1,10 +1,9 @@
 ---
 title: "Set Up Sphinx with Python"
-layout: page
+layout: learn
 image:
-  path: /images/learn/sphinx-docs-page.png
   thumbnail: /images/learn/python-logo400x200.png
-  caption: "Screenshot from Read the Docs theme"
+  caption: "Python and Sphinx"
 ---
 
 Sphinx works with either major versions of Python active today, Python 2 and Python 3. Python 3 is the current and recommended version. Sphinx is a documentation tool that creates HTML, CSS, and JavaScript files from [ReStructured](http://docutils.sourceforge.net/rst.html) text files.
@@ -51,7 +50,7 @@ You also want the latest version of Python 3 available.
     Python 3.7.0
     ```
 
-1. Check the version set as the default version, the version of Python that is executed when you simply enter `python`.  The default version of Python remains a Python 2.7 version.
+1. Check the version set as the default version, the version of Python that is executed when you simply enter `python`. The default version of Python remains a Python 2.7 version.
 
     ```
     python -V
@@ -60,6 +59,7 @@ You also want the latest version of Python 3 available.
     ```
     Python 2.7.15
     ```
+
 ## Set Up Virtual Environment
 
 Let's ensure that you know how to create Python Virtual Environments for each version of Python. These [Python Virtual Environments](https://docs.python.org/3/tutorial/venv.html) provide a method of creating isolated "environments" where you can work with specific versions of Python along with independent sets of libraries and dependencies.
@@ -103,7 +103,7 @@ Most people use Virtual Environments because it's a recommended practice when wo
    (py3-sphinx) $ pip install sphinx
    ```
 
-1. To verify that sphinx is installed, run the `sphinx-build` command with the `--help` parameter.
+1. To verify that Sphinx is installed, run the `sphinx-build` command with the `--help` parameter.
 
    ```
    (py3-sphinx) $ sphinx-build --help
@@ -123,36 +123,38 @@ You can also get familiar with [ReStructured text](http://docutils.sourceforge.n
   ```
 1. Answer all the questions from the prompts.
   You can choose enter to pick all the defaults and get a working project in the current directory (`.`).
+  >Some notes for the context of this tutorial:
+  * You can either use a directory named `_build` within the root path, or have separate `source` and `build` directories, which is the default. To see an example directory structure with a `source` directory, refer to this [justwriteclick/rockthedocs-demo](https://github.com/justwriteclick/rockthedocs-demo) repo on GitHub.
+  * When answering the questions, note that you can choose "githubpages set to yes" to create a `.nojekyll` file to publish the document on GitHub pages. In our case, though, our example builds to Read the Docs, so you can use the defaults throughout.
 
-  Some notes for the context of this tutorial:
-  * You can either use a directory named `_build` within the root path, or have separate `source` and `build` directories, which is the default.
-  * Note that you can choose "githubpages set to yes" to create a `.nojekyll` file to publish the document on GitHub pages. In our case, though, our example builds to Read the Docs, so you can use the defaults throughout.
 1. Once you have the basics answered, the script creates the necessary files and you can edit those to your liking.
 1. Create a couple of `.rst` files and add skeleton information for starters.
   ```
   $ touch source/prerequisites.rst
   $ touch source/about.rst
   ```
 1. Edit those new `.rst` files in your favorite text editor.
-1. Now, you can build the docs to see the changes locally:
+1. Now, you can build the docs to see the changes locally. Run this command in the directory with the `conf.py` file:
   ```
   $ make html
   ```
 1. In your browser, open the `build/html/index.html` file to take a look at your Sphinx site locally. You can also look at `build/html/prerequisites.html` and `build/html/about.html` though they won't be linked to the main page until you add them as a link or in a table of contents entry.
-1. Edit the `source/index.rst` file to include links to the additional pages. Here is an example:
-  ```
-  .. toctree::
-     :maxdepth: 2
-     :caption: Contents:
+1. Edit the `source/index.rst` file to include links to the additional pages.
+   Here is an example:
+   ```
+    .. toctree::
+       :maxdepth: 2
+       :caption: Contents:
 
-     about.rst
-     prerequisites.rst
-  ```
+       about.rst
+       prerequisites.rst
+   ```
 1. Build again to see these changes locally:
   ```
   $ make html
   ```
 1. In your browser, refresh the `build/html/index.html` page to see the new Contents with two entries linked.
+   ![Rock the docs example site](/images/learn/sphinx-docs-page.png)
 1. Make sure you commit your changes to the Git repository by following the steps in [Working with content in GitHub repositories](https://docslikecode.com/learn/04-add-content-workflow/).
 
 ## What's next
diff --git a/_learn/02-jekyll-ruby-gh-pages.md b/_learn/02-jekyll-ruby-gh-pages.md
@@ -1,6 +1,6 @@
 ---
 title: "Set Up Jekyll with Ruby"
-layout: page
+layout: learn
 image:
   path: /images/learn/jekyll-docs-page.png
   thumbnail: /images/learn/ruby-logo400x200.png
@@ -172,7 +172,7 @@ Once you've prepared your environment, you can build locally and review the site
    ```
 
 1. Use the **Server address** URL  `http://127.0.0.1:4000/latest/` in a browser to preview the content.
-
+   ![Example Jekyll site]( /images/learn/jekyll-docs-page.png)
 1. Press `Ctrl+C` in the serve terminal to stop the server.
     > ***TIP***
     > Leave the serve terminal open and running. Every time you save changes to a file, it automatically regenerates the site so you can test the output as you write. That said, if you change the `_config.yml` file, you must stop (ctrl-c) and then re-run the serve command to see changes.
diff --git a/_learn/03-hugo-go-netlify.md b/_learn/03-hugo-go-netlify.md
@@ -1,6 +1,6 @@
 ---
 title: "Set Up Hugo with Go"
-layout: page
+layout: learn
 image:
   path: /images/learn/hugo-docs-page.png
   thumbnail: /images/learn/go-logo400x200.png
@@ -105,11 +105,10 @@ For Hugo, it's important to know that draft pages are only served when using the
       Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
       Press Ctrl+C to stop
    ```
-
 1. Open the **Web Server** URL, `http://localhost:1313/` in your local browser to view the site.
-
-1. Press `Ctrl+C` in the server terminal to stop the Hugo server.
-1. You can add your files to a Git commit. Refer to [Working with content in GitHub repositories](https://docslikecode.com/learn/04-add-content-workflow/) for a documentation workflow with your Hugo site.
+    ![Example Hugo site](/images/learn/hugo-docs-page.png)
+3. Press `Ctrl+C` in the server terminal to stop the Hugo server.
+4. You can add your files to a Git commit. Refer to [Working with content in GitHub repositories](https://docslikecode.com/learn/04-add-content-workflow/) for a documentation workflow with your Hugo site.
 
 ## Modify the Hugo theme
 
diff --git a/_learn/04-add-content-workflow.md b/_learn/04-add-content-workflow.md
@@ -1,6 +1,6 @@
 ---
 title: "Working with content in GitHub repositories"
-layout: page
+layout: learn
 image:
   path: /images/learn/octocat.png
   thumbnail: /images/learn/octocat-github-logo400x200.png
diff --git a/_learn/05-cd-for-docs.md b/_learn/05-cd-for-docs.md
@@ -1,6 +1,6 @@
 ---
 title: "Continuous Deployment (CD) for Documentation Sites"
-layout: page
+layout: learn
 image:
   path: /images/learn/netlify-logo400x200.png
   thumbnail: /images/learn/netlify-logo400x200.png
diff --git a/_learn/06-test-docs-as-code.md b/_learn/06-test-docs-as-code.md
@@ -1,6 +1,6 @@
 ---
 title: "Set Up Automated Tests for Docs"
-layout: page
+layout: learn
 image:
   path: /images/learn/travis-ci-logo400x200.png
   thumbnail: /images/learn/travis-ci-logo400x200.png
diff --git a/_learn/07-evaluating-ssg-themes.md b/_learn/07-evaluating-ssg-themes.md
@@ -1,6 +1,6 @@
 ---
 title: "Evaluating Static Site Generator themes"
-layout: page
+layout: learn
 image:
   path: /images/learn/ssg-themes.png
   thumbnail: /images/learn/ssg-themes400x225.png
diff --git a/_learn/08-evaluating-table-layouts.md b/_learn/08-evaluating-table-layouts.md
@@ -1,6 +1,6 @@
 ---
 title: "Evaluating table layouts and formatting"
-layout: page
+layout: learn
 image:
   path: /images/learn/table-layout.png
   thumbnail: /images/learn/table-layout400x225.png
diff --git a/_learn/09-ssg-search-implementations.md b/_learn/09-ssg-search-implementations.md
@@ -1,6 +1,6 @@
 ---
 title: "Evaluating Static Site Generator search options"
-layout: page
+layout: learn
 image:
   path: /images/learn/ssg-search-options.png
   thumbnail: /images/learn/ssg-search-options400x225.png
diff --git a/images/learn/whitespace.png b/images/learn/whitespace.png
