diff --git a/README.md b/README.md index 0e72bd99..fe0165df 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ -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. @@ -13,8 +13,8 @@ When needed, IDOM can [use components directly from NPM](https://idom-docs.herok 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) | @@ -27,7 +27,7 @@ Any Python web framework with Websockets can support IDOM. See below for what fr -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. @@ -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. + diff --git a/docs/contribute/django-idom.md b/docs/contribute/django-idom.md index 4284ef66..6199d4f8 100644 --- a/docs/contribute/django-idom.md +++ b/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: diff --git a/docs/features/hooks.md b/docs/features/hooks.md index a024e816..64721d31 100644 --- a/docs/features/hooks.md +++ b/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`. diff --git a/docs/getting-started/initial-steps.md b/docs/getting-started/initial-steps.md index daef5d4d..98a58d0b 100644 --- a/docs/getting-started/initial-steps.md +++ b/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?" diff --git a/docs/getting-started/render-view.md b/docs/getting-started/render-view.md index 03fb8d6f..deb6a14e 100644 --- a/docs/getting-started/render-view.md +++ b/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. diff --git a/docs/index.md b/docs/index.md index 39874a5f..9b11f2dc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,7 +6,7 @@ hide: {% include-markdown "../README.md" start="" end="" %} -## It's React for Django Developers. +## ReactJS for Django Developers. --- diff --git a/docs/installation/index.md b/docs/installation/index.md index cdf9820b..a2a6e391 100644 --- a/docs/installation/index.md +++ b/docs/installation/index.md @@ -1,8 +1,6 @@ - +???+ 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_. - - + 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_. ## Install from PyPI @@ -10,7 +8,7 @@ These docs assumes you have created [a basic **Django project**](https://docs.dj 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", diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 00000000..13121f71 --- /dev/null +++ b/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); +} diff --git a/mkdocs.yml b/mkdocs.yml index 487f21ae..1cfff5ab 100644 --- a/mkdocs.yml +++ b/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