Adding new tutorial to docs; fixing doc bugs/broken links (#185)

docs/_static/docs.css

@@ -263,6 +263,16 @@ div.admonition.warning code {
     background-color: #f5e5d5;
 }
 
+div.figure img {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+    margin: 20px 0 0 0;
+}
+div.figure p.caption {
+    padding: 0 0 20px 0;
+    font-style: italic;
+    color: #666;
+}
+
 .mobile-header {
     display:none;
     background-color: #d33;

docs/conf.py

@@ -16,13 +16,14 @@
 # import sys
 # sys.path.insert(0, os.path.abspath('.'))
 
+import datetime
 from coderedcms import __shortversion__
 
 
 # -- Project information -----------------------------------------------------
 
 project = 'CodeRed CMS'
-copyright = '2018, CodeRed LLC'
+copyright = str(datetime.datetime.now().year) + ', CodeRed LLC'
 author = 'CodeRed LLC'
 
 # The short X.Y version

docs/features/index.rst

@@ -2,10 +2,10 @@ Features
 ========
 
 .. toctree::
-    :maxdepth: 1
+    :maxdepth: 2
 
-    classifiers
     import_export
     mailchimp
     page_types/index
-    snippets/index
+    searching
+    snippets/index

docs/getting_started/customize_design.rst

@@ -1,8 +1,7 @@
 Customize the design of your website
 ====================================
 
-After installation, you are greeted by a barebones website.
-There are a few settings you will want to change to add your own branding.
+Below are a few settings that can be used to change branding, design, and layout of your website.
 
 Site name
 ---------

docs/getting_started/index.rst

@@ -5,7 +5,9 @@ Getting Started
     :maxdepth: 1
 
     install
+    tutorial01
+    tutorial02
+    tutorial03
     customize_design
     customize_develop
-    searching
     django_settings

docs/getting_started/install.rst

@@ -14,4 +14,6 @@ Installation
    http://localhost:8000 in your browser, or http://localhost:8000/admin/ to log in
    with your admin account.
 
-You now have CodeRed CMS up and running. Next, :doc:`customize_design`
+✨🎉 You now have CodeRed CMS up and running! 🎉✨
+
+Follow the tutorial to build :doc:`tutorial01`

docs/getting_started/tutorial01.rst

@@ -0,0 +1,111 @@
+Your First CodeRed Website: Part 1
+==================================
+
+After :doc:`install`, you are greeted with a bare-bones website.
+Let's start filling things out.
+
+For this tutorial, we will assume the name of your project is ``mysite``.
+
+
+Logging in
+----------
+
+Navigate to http://localhost:8000/admin/ and log in with the username
+and password you created with the ``python manage.py createsuperuser`` command.
+
+After logging in, you will be taken to the admin dashboard, also known as the "Wagtail Admin".
+
+.. figure:: img/tutorial_admin.png
+    :alt: The admin dashboard.
+
+    The admin dashboard.
+
+
+Changing your site name
+-----------------------
+
+By default, the site name shows up in many different places, including page titles in the browser tab.
+To change the name, go to **Settings > Sites**, and click on the site that is there. Change the
+**Site name** setting and click "Save".
+
+.. note::
+    There is also a ``WAGTAIL_SITE_NAME`` setting in the ``mysite/settings/base.py`` file. This is really
+    only used for the login screen and on the main Wagtail Admin dashboard. The reason this setting exists
+    is for use with multi-sites. For example, if you have a parent company that operates many separate
+    brand websites within one CMS, then ``WAGTAIL_SITE_NAME`` would be the name of the parent company.
+
+For my website, I'm going to change **Settings > Sites > Site name** to "Contoso Building Solutions".
+
+.. figure:: img/tutorial_sitename.png
+    :alt: Changing the site name.
+
+    Changing the site name.
+
+And edit ``mysite/settings/base.py`` by changing ``WAGTAIL_SITE_NAME`` as so::
+
+    WAGTAIL_SITE_NAME = 'Contoso Ltd.'
+
+Now the admin dashboard and login page show "Contoso Ltd.", and the Home page at http://localhost:8000/
+will show "Contoso Building Solutions".
+
+
+Adding your logo
+----------------
+
+First, and most important, is the logo. Go to **Settings > Layout**. Here are the site-wide
+visual and design settings for your website. At the top are two settings for your logo and
+favicon. Both will be scaled to fit wherever they are used, but we recommend
+the following image parameters:
+
+* **Logo:** probably does not need to be any larger than 500x500 pixels, unless you plan to have
+  a giant logo. Any image ratio is fine, logos come in all shapes and sizes. 😀
+* **Favicon:** does not need to be any larger than 200x200 pixels. A 1:1 (square) image ratio is
+  best here - if the image is not square, it will be scaled to a square.
+
+.. note::
+    We recommend PNG format at 300 DPI so that your logo will look sharp on high resolution
+    mobile devices and retina displays. However, any image format will work.
+
+After uploading your logo and favicon, click "Save". You should now instantly see your logo
+applied in the dashboard. In a new tab, go to http://localhost:8000/ and you'll see that your
+logo and favicon show up everywhere on your site.
+
+.. figure:: img/tutorial_logo.png
+    :alt: Adding the logo.
+
+    Adding the logo.
+
+.. figure:: img/tutorial_logo_front.png
+    :alt: The logo on our website.
+
+    The logo on our website.
+
+
+Changing navbar and global site colors
+--------------------------------------
+
+The default style is a light-colored navbar and the standard Bootstrap colors.
+But if you have a white or light colored logo, you might prefer a dark navbar.
+To change the navbar color, go to **Settings > Layout** and alter the following settings:
+
+* **Navbar color scheme:** Dark
+* **Navbar CSS class:** ``bg-dark`` (or some other CSS class. See
+  `Bootstrap color utilities <https://getbootstrap.com/docs/4.3/utilities/colors/#background-color>`_)
+
+Click "Save" and go to http://localhost:8000/ to see your new navbar. Great success! There are
+many other settings here for controlling the layout of the navbar. Play with them and pick
+what works best for you. Once again, most of these settings utilize default Bootstrap styles.
+
+.. figure:: img/tutorial_dark_navbar.png
+    :alt: Our site with a dark navbar.
+
+    Our site with a dark navbar.
+
+Beyond the navbar, you can swap out the entire Bootstrap CSS theme in use. We provide a few simple
+themes from `Bootswatch <https://bootswatch.com/>`_. Select an option from the **Theme variant**
+setting, click "Save", and view your site. Pick one that looks best to you. If you are going to be
+doing a lot of heavy CSS customization, you might want to stick with the default to ensure
+compatibility with the Bootstrap documentation.
+
+For my website, I'm going to change the navbar color scheme back to "Light", CSS class to ``bg-light``,
+and leave the theme variant at the default.

docs/getting_started/tutorial02.rst

@@ -0,0 +1,93 @@
+Your First CodeRed Website: Part 2
+==================================
+
+Now let's start adding some content to our site.
+
+
+Adding a hero unit to the home page
+-----------------------------------
+
+In the admin dashboard, select **Pages >**. This will open a tree-style view of all the pages
+on our site. For now, the only page is Home Page. Click end pencil icon to edit the page, or click
+"Home Page" and then the "Edit" button.
+
+Here in the body section is where we can add our content. Each component in this section is called
+a "block" and provides a different format of content. CodeRed CMS is heavily based on Bootstrap CSS
+and its grid system, which means all content is based in rows and columns that dynamically stack depending
+on the visitor's screen size.
+
+First, let's make a big flashy hero unit. A hero unit in CodeRed CMS is a block that allows for
+a full-width background image or background color, and has lots of padding by default.
+
+Select the **Hero Unit** block. Next set a background image or color - I'm going to download and use
+`this image <https://unsplash.com/photos/jwhqbR3clzQ>`_ from `Unsplash <https://unsplash.com>`_.
+
+Now to add content to our hero unit, under the Content field select **Responsive Grid Row** and then
+a **Column**. Inside my column I'll add **Text** and format it.
+
+Next, click the small "+" icon directly below the text field. This will let you add another block
+directly below the text, but still in the same column.
+
+Select the **Button Link** block. We are going to add a "Learn More" button. Right now we don't have
+any other pages on our site, so for the time being set **Other link** to "http://example.com", and
+the **Button Title** to "Learn More".
+
+My editing page now looks like this (ignore the misplaced side menu, that is just a result of the screenshot):
+
+.. figure:: img/tutorial_edit_home1.png
+    :alt: The home page editor after adding a hero unit.
+
+    The home page editor after adding a hero unit.
+
+Next click the **Preview** button at the bottom, which will open up a preview of the home page in a new tab.
+Great success!
+
+.. figure:: img/tutorial_front_home1.png
+    :alt: The home page preview after adding a hero unit.
+
+    The home page preview after adding a hero unit.
+
+
+Adding cards to the home page
+-----------------------------
+
+Next, let's say my company offers three different services, and I'd like to add three
+uniformly-sized cards on the home page representing that. Go back to the tab with the home page
+editor. All the way at the bottom of the page, click the "+" icon directly below the "Hero Unit" block.
+This will add a new block directly below the hero unit.
+
+Select the **Card Grid** block. The select **Card** to add the first card. Now fill out the **Title**,
+**Body**, and add a **Button Link** at the bottom.
+
+Next add and fill out two more cards by clicking the "+" icon directly below our current card block.
+
+My editing page now looks like this (ignore the misplaced side menu, that is just a result of the screenshot):
+
+.. figure:: img/tutorial_edit_home2.png
+    :alt: The home page editor after adding a card grid with three cards.
+
+    The home page editor after adding a card grid with three cards.
+
+Next click the **Preview** button at the bottom, which will open up a preview of the home page in a new tab.
+Lookin' good!
+
+.. figure:: img/tutorial_front_home2.png
+    :alt: The home page preview after adding the card grid.
+
+    The home page preview after adding the card grid.
+
+
+Adding more content to the home page
+------------------------------------
+
+Continue following this pattern to add content. While the **Hero Unit** and **Card Grid** provide
+"special" content formats, the **Responsive Grid Row** is the most general purpose block for adding content,
+and you will probably find yourself using it the most all throughout your site. Of course, there is also an
+**HTML** block for inserting raw HTML if needed.
+
+When you are finished editing the home page, click the arrow next to the "Save Draft" button and select **Publish**.
+
+.. figure:: img/tutorial_publish.png
+    :alt: Publishing a page.
+
+    Publishing a page.

docs/getting_started/tutorial03.rst

@@ -0,0 +1,8 @@
+Your First CodeRed Website: Part 3
+==================================
+
+Coming soon: navigation and footer customization.
+
+Coming soon: using custom page types to build a blog.
+
+Coming soon: customizing the CSS and HTML templates.

docs/releases/v0.10.0.rst

@@ -4,7 +4,7 @@ CodeRed CMS 0.10.0 release notes
 New features
 ------------
 
-* NEW event & calendar pages! See :doc:`/features/events`.
+* NEW event & calendar pages! See :doc:`/features/page_types/event_pages`.
 * NEW "Embed Media" block replacing the "Embed Video" block. Embed Media supports YouTube,
   Vimeo, Tweets, Facebook posts, GitHub gists, Spotify, Etsy, Tumblr, and dozens of other sources.
 * NEW tags on all ``CoderedPage`` pages. Tags provide a global and flexible way of organizing

docs/releases/v0.15.0.rst

@@ -5,7 +5,8 @@ CodeRed CMS 0.15.0 release notes
 New features
 ------------
 
-None
+* NEW documentation for built-in page types! See :doc:`/features/page_types/index`.
+* NEW tutorial! See :doc:`/getting_started/tutorial01`.
 
 
 Bug Fixes

docs/releases/v0.9.0.rst

@@ -4,7 +4,7 @@ CodeRed CMS 0.9.0 release notes
 New Features
 ------------
 
-* NEW Store Locator feature powered by Google Maps. See :doc:`/features/store_locator`.
+* NEW Store Locator feature powered by Google Maps. See :doc:`/features/page_types/location_pages`.
 * NEW import export functionality. Import or export existing pages as JSON. Import new pages from CSV files. See :doc:`/features/import_export`.
 * Replaced Google Analytics with Google Tag Manager.
 * Added additional blocks to WebPage HTML template to ease template extending.