Reorganize install and getting started docs (#114)

* Reorganize install and getting started docs

* add docs badge

* fix example

Author: Archmonger

README.md

@@ -1,6 +1,6 @@
 <!--header-start-->
 
-# Django IDOM &middot; [![Tests](https://github.com/idom-team/django-idom/workflows/Test/badge.svg?event=push)](https://github.com/idom-team/django-idom/actions?query=workflow%3ATest) [![PyPI Version](https://img.shields.io/pypi/v/django-idom.svg)](https://pypi.python.org/pypi/django-idom) [![License](https://img.shields.io/badge/License-MIT-purple.svg)](https://github.com/idom-team/django-idom/blob/main/LICENSE)
+# Django IDOM &middot; [![Tests](https://github.com/idom-team/django-idom/workflows/Test/badge.svg?event=push)](https://github.com/idom-team/django-idom/actions?query=workflow%3ATest) [![PyPI Version](https://img.shields.io/pypi/v/django-idom.svg?label=PyPI)](https://pypi.python.org/pypi/django-idom) [![License](https://img.shields.io/badge/License-MIT-purple.svg)](https://github.com/idom-team/django-idom/blob/main/LICENSE) [![Docs](https://img.shields.io/website?down_message=offline&label=Docs&logo=read%20the%20docs&logoColor=white&up_message=online&url=https%3A%2F%2Fidom-team.github.io%2Fdjango-idom%2F)](https://idom-team.github.io/django-idom/)
 
 <!--header-end-->
 <!--intro-start-->

docs/src/features/settings.md

@@ -1,6 +1,6 @@
 ???+ summary
 
-    Django IDOM uses your **Django project's** `settings.py` file to modify the behavior of IDOM.
+    Django-IDOM uses your **Django project's** `settings.py` file to modify the behavior of IDOM.
 
 ## Primary Configuration
 

docs/src/features/templatetag.md

@@ -107,7 +107,7 @@
 
 ??? question "What is a "template tag"?"
 
-    You can think of template tags as Django's way of allowing you to run Python code within your HTML. Django IDOM uses a `#!jinja {% component ... %}` template tag to perform it's magic.
+    You can think of template tags as Django's way of allowing you to run Python code within your HTML. Django-IDOM uses a `#!jinja {% component ... %}` template tag to perform it's magic.
 
     Keep in mind, in order to use the `#!jinja {% component ... %}` tag, you will need to first call `#!jinja {% load idom %}` to gain access to it.
 

docs/src/getting-started/initial-steps.md renamed to docs/src/getting-started/choose-django-app.md

@@ -4,16 +4,12 @@
 
 ---
 
-If you have reached this point, you should have already [installed Django-IDOM](../installation/index.md) through the previous steps.
+If you have reached this point, you should have already [installed Django-IDOM](../getting-started/installation.md) through the previous steps.
+
+You will now need to pick at least one **Django app** to start using Django-IDOM on.
 
 For the examples within this section, we will assume you have placed the files [generated by `startapp`](https://docs.djangoproject.com/en/dev/intro/tutorial01/#creating-the-polls-app) directly into your **Django project** folder. This is common for small projects.
 
 ??? question "How do I organize my Django project for IDOM?"
 
       Django-IDOM has no project structure requirements. Organize everything as you wish, just like any **Django project**.
-
-??? question "I have never used Django, what do I need to learn?"
-
-      {% include-markdown "../installation/index.md" start="<!--dj-proj-start-->" end="<!--dj-proj-end-->" %}
-
-      Afterwards, make sure to follow the [Django-IDOM installation instructions](../installation/index.md).

docs/src/getting-started/create-component.md

@@ -14,6 +14,6 @@
 
       You have full freedom in naming/placement of your files and functions.
 
-      You should determine the best way to sort your Python modules and component functions to fit your needs.
+      We recommend creating a `components.py` for small **Django apps**. If your app has a lot of components, you should consider breaking them apart into individual modules such as `components/navbar.py`.
 
       Ultimately, components are referenced by Python dotted path in `my-template.html` (_see next step_). So, at minimum this path needs to be valid to Python's `importlib`.

docs/src/installation/index.md renamed to docs/src/getting-started/installation.md

@@ -1,18 +1,18 @@
-???+ tip "Learning Django first is recommended!"
+???+ summary
 
-    <!--dj-proj-start-->These docs assumes you have created [a basic **Django project**](https://docs.djangoproject.com/en/dev/intro/tutorial01/), which involves creating and installing at least one **Django app**. If not, check out this [9 minute YouTube tutorial](https://www.youtube.com/watch?v=ZsJRXS_vrw0) created by _IDG TECHtalk_.<!--dj-proj-end-->
+    Django-IDOM can be installed from PyPI to an existing **Django project** with minimal configuration.
 
-## Install from PyPI
+## Step 0: Set up a Django Project
+
+These docs assumes you have already created [a **Django project**](https://docs.djangoproject.com/en/dev/intro/tutorial01/), which involves creating and installing at least one **Django app**. If not, check out this [9 minute YouTube tutorial](https://www.youtube.com/watch?v=ZsJRXS_vrw0) created by _IDG TECHtalk_.
+
+## Step 1: Install from PyPI
 
 ```bash
 pip install django-idom
 ```
 
-You will also need to modify a few files in your **Django project**...
-
----
-
-## Configure [`settings.py`](https://docs.djangoproject.com/en/dev/topics/settings/)
+## Step 2: Configure [`settings.py`](https://docs.djangoproject.com/en/dev/topics/settings/)
 
 In your settings you will need to add `django_idom` to [`INSTALLED_APPS`](https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-INSTALLED_APPS).
 
@@ -47,11 +47,9 @@ In your settings you will need to add `django_idom` to [`INSTALLED_APPS`](https:
 
     Below are a handful of values you can change within `settings.py` to modify the behavior of IDOM.
 
-    {% include-markdown "../features/settings.md" start="<!--settings-start-->" end="<!--settings-end-->" %}
-
----
+    {% include-markdown "../features/settings.md" start="<!--settings-start-->" end="<!--settings-end-->" preserve-includer-indent=false %}
 
-## Configure [`urls.py`](https://docs.djangoproject.com/en/dev/topics/http/urls/)
+## Step 3: Configure [`urls.py`](https://docs.djangoproject.com/en/dev/topics/http/urls/)
 
 Add IDOM HTTP paths to your `urlpatterns`.
 
@@ -66,9 +64,7 @@ Add IDOM HTTP paths to your `urlpatterns`.
     ]
     ```
 
----
-
-## Configure [`asgi.py`](https://docs.djangoproject.com/en/dev/howto/deployment/asgi/)
+## Step 4: Configure [`asgi.py`](https://docs.djangoproject.com/en/dev/howto/deployment/asgi/)
 
 Register IDOM's Websocket using `IDOM_WEBSOCKET_PATH`.
 

mkdocs.yml

@@ -1,13 +1,13 @@
 ---
 nav:
     - Home: index.md
-    - Installation: installation/index.md
     - Getting Started:
-          - 1. Initial Steps: getting-started/initial-steps.md
-          - 2. Create a Component: getting-started/create-component.md
-          - 3. Use the Template Tag: getting-started/reference-component.md
-          - 4. Render Your View: getting-started/render-view.md
-          - 5. Learn More: getting-started/learn-more.md
+          - 1. Install Django-IDOM: getting-started/installation.md
+          - 2. Choose a Django App: getting-started/choose-django-app.md
+          - 3. Create a Component: getting-started/create-component.md
+          - 4. Use the Template Tag: getting-started/reference-component.md
+          - 5. Render Your View: getting-started/render-view.md
+          - 6. Learn More: getting-started/learn-more.md
     - Usage:
           - Components: features/components.md
           - Hooks: features/hooks.md
@@ -89,5 +89,5 @@ copyright: Copyright © 2022 IDOM Team
 repo_url: https://github.com/idom-team/django-idom
 site_url: https://idom-team.github.io/django-idom
 repo_name: idom-team/django-idom
-edit_uri: edit/docs
+edit_uri: edit/main/docs/src
 docs_dir: docs/src