Minor docs styling, formatting, and grammar improvements (#76)

* Minor readme cleanup

* Minor grammar cleanup

* Remove "next section" from footer

* Remove "Made with mkdocs" from footer

* Refresh on changes made to readme and changelog

* Add copyright to footer

* Automatically change color scheme based on system theme

* Pin navbar color to black

* Put "Django developer" assumption into a tip box

* clean up Enable Django ASGI warning

* bold "Django Project"

* "Learning Django first is recommended!"

* change tagline to "ReactJS for Django Developers"

* add "Looking for more hooks?"

* add more details to HelloWorld readme paragraph

* update notice on Use Location hook

Author: Archmonger

README.md

@@ -5,16 +5,16 @@
 <!--header-end-->
 <!--intro-start-->
 
-Django-IDOM connects your project to a ReactJS frontend, allowing you to create **interactive websites without needing JavaScript!**
+Django-IDOM connects your Python project to a ReactJS frontend, allowing you to create **interactive websites without needing JavaScript!**
 
 Following ReactJS styling, web elements are combined into [reusable "components"](https://idom-docs.herokuapp.com/docs/guides/creating-interfaces/your-first-components/index.html#parametrizing-components). These components can utilize [hooks](https://idom-docs.herokuapp.com/docs/reference/hooks-api.html) and [events](https://idom-docs.herokuapp.com/docs/guides/adding-interactivity/responding-to-events/index.html#async-event-handlers) to create infinitely complex web pages.
 
 When needed, IDOM can [use components directly from NPM](https://idom-docs.herokuapp.com/docs/guides/escape-hatches/javascript-components.html#dynamically-loaded-components). For additional flexibility, components can also be [fully developed in JavaScript](https://idom-docs.herokuapp.com/docs/guides/escape-hatches/javascript-components.html#custom-javascript-components).
 
 Any Python web framework with Websockets can support IDOM. See below for what frameworks are supported out of the box.
 
-| Supported Frameworks                                                                                                                                    | Supported Frameworks (External)                                                                                                                                       |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Supported Frameworks | Supported Frameworks (External) |
+| --- | --- |
 | [`Flask`, `FastAPI`, `Sanic`, `Tornado`](https://idom-docs.herokuapp.com/docs/guides/getting-started/installing-idom.html#officially-supported-servers) | [`Django`](https://github.com/idom-team/django-idom), [`Plotly-Dash`](https://github.com/idom-team/idom-dash), [`Jupyter`](https://github.com/idom-team/idom-jupyter) |
 
 <!--intro-end-->
@@ -27,7 +27,7 @@ Any Python web framework with Websockets can support IDOM. See below for what fr
 
 <!--py-header-start-->
 
-You'll need a file to define your [IDOM](https://github.com/idom-team/idom) components. We recommend creating a `components.py` file within your chosen **Django app** to start out.
+You'll need a file to define your [IDOM](https://github.com/idom-team/idom) components. We recommend creating a `components.py` file within your chosen **Django app** to start out. Within this file, we will create a simple `HelloWorld` component.
 
 <!--py-header-end-->
 <!--py-code-start-->
@@ -76,4 +76,5 @@ Follow the links below to find out more about this project.
 -   [Try it Now](https://mybinder.org/v2/gh/idom-team/idom-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb) - Check out IDOM in a Jupyter Notebook.
 -   [Documentation](https://idom-team.github.io/django-idom) - Learn how to install, run, and use IDOM.
 -   [Community Forum](https://github.com/idom-team/idom/discussions) - Ask questions, share ideas, and show off projects.
+
 <!--resources-end-->

docs/contribute/django-idom.md

@@ -1,6 +1,6 @@
 ???+ tip "Looking to contribute features that are not Django specific?"
 
-    Everything within the `django-idom` repository must be specific to Django integration. Check out the [IDOM Core documentation](https://idom-docs.herokuapp.com/docs/about/contributor-guide.html) to contribute general features, such as: components, hooks, events, etc.
+    Everything within the `django-idom` repository must be specific to Django integration. Check out the [IDOM Core documentation](https://idom-docs.herokuapp.com/docs/about/contributor-guide.html) to contribute general features such as: components, hooks, events, and more.
 
 If you plan to make code changes to this repository, you'll need to install the following dependencies first:
 

docs/features/hooks.md

@@ -1,5 +1,9 @@
 # Django Hooks
 
+???+ tip "Looking for more hooks?"
+
+    Check out the [IDOM Core docs](https://idom-docs.herokuapp.com/docs/reference/hooks-api.html?highlight=hooks) on hooks!
+
 ## Use Websocket
 
 You can fetch the Django Channels websocket at any time by using `use_websocket`.
@@ -36,7 +40,7 @@ def MyComponent():
 
 ??? info "This hook's behavior will be changed in a future update"
 
-    This hook will eventually be updated to return the client's current webpage URL. This will come in alongside our built-in [Single Page Application (SPA) support](https://github.com/idom-team/idom/issues/569).
+    This hook will be updated to return the browser's current URL. This will come in alongside our built-in [Single Page Application (SPA) support](https://github.com/idom-team/idom/issues/569).
 
 This is a shortcut that returns the Websocket's `path`.
 

docs/getting-started/initial-steps.md

@@ -1,6 +1,6 @@
 ???+ summary
 
-      Set up a Django Project with at least one app.
+      Set up a **Django Project** with at least one app.
 
 ---
 
@@ -10,7 +10,7 @@ For the examples within this section, we will assume you've placed the files [ge
 
 ??? 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.
+      Django-IDOM has no project structure requirements. Organize everything as you wish, just like any **Django project**.
 
 ??? question "I've never used Django, what do I need to learn?"
 

docs/getting-started/render-view.md

@@ -32,8 +32,8 @@ Now, navigate to `http://127.0.0.1:8000/example/`. If you copy-pasted the compon
 
 ??? question "Which urls.py do I add my views to?"
 
-    For simple Django projects, you can easily add all of your views directly into the **Django project**'s `urls.py`. However, as you start increase your project's complexity you might end up with way too much within one file.
+    For simple **Django projects**, you can easily add all of your views directly into the **Django project's** `urls.py`. However, as you start increase your project's complexity you might end up with way too much within one file.
 
     Once you reach that point, we recommend creating an individual `urls.py` within each of your **Django apps**.
 
-    Then, within your **Django project**'s `urls.py` you will use Django's [`include` function](https://docs.djangoproject.com/en/dev/ref/urls/) to link it all together.
+    Then, within your **Django project's** `urls.py` you will use Django's [`include` function](https://docs.djangoproject.com/en/dev/ref/urls/) to link it all together.

docs/index.md

@@ -6,7 +6,7 @@ hide:
 
 {% include-markdown "../README.md" start="<!--header-start-->" end="<!--header-end-->" %}
 
-## It's React for Django Developers.
+## ReactJS for Django Developers.
 
 ---
 

docs/installation/index.md

@@ -1,16 +1,14 @@
-<!--dj-proj-start-->
+???+ tip "Learning Django first is recommended!"
 
-These docs assumes you have created [a basic **Django project**](https://docs.djangoproject.com/en/dev/intro/tutorial01/), which also involves generating/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-->
+    <!--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-->
 
 ## Install from PyPI
 
 ```bash
 pip install django-idom
 ```
 
-You'll also need to modify a few files in your Django project...
+You'll also need to modify a few files in your **Django project**...
 
 ---
 
@@ -25,11 +23,14 @@ INSTALLED_APPS = [
 ]
 ```
 
-??? warning "Enabling ASGI on Django (Required)"
+??? warning "Enable Django ASGI (Required)"
 
     Django-IDOM requires ASGI in order to use Websockets.
 
-    If you haven't [enabled ASGI](https://channels.readthedocs.io/en/stable/installation.html) on your Django project yet, you'll need to add `channels` to `INSTALLED_APPS` and set your `ASGI_APPLICATION` variable.
+    If you haven't enabled ASGI on your **Django project** yet, you'll need to add `channels` to `INSTALLED_APPS` and set your `ASGI_APPLICATION` variable.
+
+    Read the [Django Channels Docs](https://channels.readthedocs.io/en/stable/installation.html) for more info.
+
     ```python title="settings.py"
     INSTALLED_APPS = [
         "channels",

docs/stylesheets/extra.css

@@ -0,0 +1,8 @@
+.md-footer__inner {
+	display: none;
+}
+
+.md-tabs,
+.md-header {
+	background-color: var(--md-footer-bg-color--dark);
+}

mkdocs.yml

@@ -20,13 +20,15 @@ nav:
 theme:
     name: material
     palette:
-        - scheme: slate
+        - media: "(prefers-color-scheme: dark)"
+          scheme: slate
           toggle:
               icon: material/toggle-switch
               name: Switch to light mode
           primary: deep-orange
-          accent: deep-orange
-        - scheme: default
+          accent: orange
+        - media: "(prefers-color-scheme: light)"
+          scheme: default
           toggle:
               icon: material/toggle-switch-off-outline
               name: Switch to dark mode
@@ -37,7 +39,6 @@ theme:
         - navigation.tabs
         - toc.integrate
         - navigation.top
-
     icon:
         repo: fontawesome/brands/github
 
@@ -60,9 +61,22 @@ plugins:
     - git-revision-date-localized:
           fallback_to_build_date: true
 
+extra:
+    generator: false
+
+extra_css:
+    - stylesheets/extra.css
+
+watch:
+    - docs
+    - mkdocs.yml
+    - README.md
+    - CHANGELOG.md
+
 site_name: Django IDOM Docs
 site_author: Archmonger
 site_description: React for Django developers.
+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