chore: fix docs issues

Author: mariobuikhuizen

docs/advanced_usage.rst

@@ -7,7 +7,7 @@ Advanced Usage
 Slots are used to add content at a certain location in a widget. You can find out what slots a widget supports by using
 the Vuetify documentation. If you want to know what slots :code:`Select` has, search for :code:`v-select` on the
 `Vuetify API explorer <https://v2.vuetifyjs.com/components/api-explorer/>`_ or for this example use the `direct link
-<https://v2.vuetifyjs.com/en/components/selects/#api>`_. On the left-hand side of list of attributes you will find a tab
+<https://v2.vuetifyjs.com/en/components/selects/#api>`_. On the left-hand side of the list of attributes you will find a tab
 'slots'.
 
 An example for using the slot 'no-data', which changes what the Select widget shows when it has no items:
@@ -101,7 +101,7 @@ exposes it as the 'on' variable.
 Responsive Layout
 -----------------
 
-When making dashbords with Voilà you can change the layout depending on the users screen size. This is done with a `grid
+When making dashboards with Voilà you can change the layout depending on the user's screen size. This is done with a `grid
 system <https://v2.vuetifyjs.com/en/components/grids/>`_. For example on a laptop (breakpoint md) you could fit two
 elements next to each other while on a smartphone (defined with 'cols' as default) you would want one element to take up
 the full width:

docs/conf.py

@@ -15,7 +15,7 @@
 
 # -- General configuration ---------------------------------------------------
 
-extensions = ["jupyter_sphinx", "sphinx_rtd_theme", "sphinx_design"]
+extensions = ["jupyter_sphinx", "sphinx_design"]
 templates_path = ["_templates"]
 exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
 
@@ -24,6 +24,9 @@
 html_theme = "pydata_sphinx_theme"
 html_static_path = ["_static"]
 html_css_files = ["custom.css"]
+html_sidebars = {
+    "**": [],
+}
 
 # -- Theme configuration -----------------------------------------------------
 
@@ -34,8 +37,6 @@
     "secondary_sidebar_items": [
         "page-toc.html",
         "searchbox.html",
-        "edit-this-page.html",
-        "sourcelink.html",
     ],
     "icon_links": [
         {

docs/fruit-selector.vue

@@ -5,7 +5,7 @@
       <v-btn @click="addBanana" :disabled="hasBanana">Add banana</v-btn>
       <v-btn @click="removeBanana" :disabled="!hasBanana">Remove banana</v-btn>
       <v-btn @click="add_fruit_python()" :disabled="!can_add_from_python"
-        >Add from Pyton</v-btn
+        >Add from Python</v-btn
       >
     </div>
     Available fruits

docs/installation.rst

@@ -18,14 +18,16 @@ Using conda
 Jupyter Lab
 -----------
 
-If you're using only the classic notebook, you're done. If you're using Jupyter Lab, the extension has to be installed
-in Jupyter Lab:
+If you're using the classic notebook or JupyterLab 3 and later, you're done after installing the Python package.
+The JupyterLab extension is included in the ``ipyvuetify`` package.
+
+For JupyterLab 1 and 2, install the JupyterLab extension separately:
 
 .. code-block:: bash
 
     $ jupyter labextension install jupyter-vuetify
 
 .. note::
-    ipyvuetify depends on ipywidgets being installed in Jupyter Lab, see the `ipywidgets documentation
-    <https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-the-jupyterlab-extension>`_ on how to do
-    that.
+    ipyvuetify depends on ipywidgets being available in JupyterLab. If widgets do not display, see the
+    `ipywidgets installation documentation
+    <https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-in-jupyterlab-3-x>`_.

docs/introduction.rst

@@ -1,11 +1,11 @@
 Introduction
 ============
 
-Ipyvuetify is a widget library for making modern looking GUI's in Jupyter notebooks (classic and lab) and dashboards
+Ipyvuetify is a widget library for making modern-looking GUIs in Jupyter notebooks (classic and lab) and dashboards
 (`Voilà <https://voila.readthedocs.io/en/stable/using.html>`_). It's based on the `Google material design philosophy
 <https://material.io/design/introduction>`_ best known from the Android user interface.
 
-A large set of widgets is provided with many widgets having multiple variants. a few of which are displayed below.
+A large set of widgets is provided, with many widgets having multiple variants. A few of them are displayed below.
 
 .. TODO: fix CSS collisions with rtd_theme
 
@@ -20,7 +20,7 @@ the standard widget library of Jupyter, ipyvuetify has a lot more widgets which
 composable at the expense of a bit more verbosity in the source code.
 
 Ipyvuetify uses the machinery of `ipywidgets <https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Basics.html>`_
-as a base, but has different conventions for the API. This is mainly due to the fact the Python API is generated from
+as a base, but has different conventions for the API. This is mainly because the Python API is generated from
 the JavaScript library it is based on: `Vuetify <https://v2.vuetifyjs.com/>`_. This exposes the full power of Vuetify and
 allows us to rely on the extensive documentation and examples of it. Generating code and relying on documentation from
 the underlying library allowed us to expose a lot of widgets to Jupyter in a relatively short amount of time.

docs/template_usage.rst

@@ -5,7 +5,7 @@ First template
 --------------
 
 When building larger UI's it may be convenient to write composite widgets using
-the Vue template syntax. Lets start with a basic example:
+the Vue template syntax. Let's start with a basic example:
 
 .. jupyter-execute::
 
@@ -87,7 +87,7 @@ Template in vue files
 
 Although a powerful feature, programming Vue templates in a string is quite
 cumbersome, since you lose syntax highlighting and other advanced editor
-features. Instead, we can put out Vue template into a ``.vue`` file, and point
+features. Instead, we can put our Vue template into a ``.vue`` file, and point
 our VuetifyTemplate to it.
 
 
@@ -150,7 +150,7 @@ A demonstration in a screen capture:
 
 
 .. note::
-    For this feature we require the watchdog packages. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"``
+    For this feature we require the watchdog package. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"``
 
 Embed ipywidgets
 ----------------

docs/usage.rst

@@ -30,11 +30,11 @@ Attributes can be changed at a later time by:
     'Banana')`, are not detected by ipywidgets.
 
 What widgets are available and how they look can be found in the
-`Vuetify documentation <https://v2.vuetifyjs.com/components/selects/>`_. Browse the side bar on the left hand side and
-select a widget, then click <> on the right hand side on an example to see the source code for it. The HTML code may
+`Vuetify documentation <https://v2.vuetifyjs.com/components/selects/>`_. Browse the sidebar on the left-hand side and
+select a widget, then click <> on the right-hand side on an example to see the source code for it. The HTML code may
 seem unfamiliar at first, but this documentation will guide you through it. For starters to translate the Vuetify widget
 names, which are starting with :code:`v-`, to ipyvuetify, remove the :code:`v-` prefix and CamelCase the remaining
-name. E.g :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`.
+name. For example, :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`.
 
 Equivalent Vuetify syntax of the example above:
 
@@ -78,7 +78,7 @@ ipyvuetify:
 
     v.Select(clearable=True, label='Fruits', items=['Apple', 'Pear', 'Cherry'], value='Apple')
 
-Some attribute have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and
+Some attributes have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and
 :code:`style` and must be suffixed with an underscore. For example :code:`style` becomes :code:`style_`
 
 Vuetify:
@@ -101,7 +101,7 @@ see an example of this. To look at how that variable is initialized you select t
 If it's an expression it's mostly used to set a List or a Dict, as is done with :code:`items` in the examples above.
 This can be the same in ipyvuetify.
 
-for non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait.
+For non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait.
 
 Vuetify: 
 
@@ -256,7 +256,7 @@ All `HTML events <https://www.w3schools.com/tags/ref_eventattributes.asp>`_ can
 omitted.
 
 Widgets can have custom events, to find out which, the `Vuetify API explorer
-<https://v2.vuetifyjs.com/components/api-explorer/>`_ can be used. Search for a component and on the left-hand side of list
+<https://v2.vuetifyjs.com/components/api-explorer/>`_ can be used. Search for a component and on the left-hand side of the list
 of attributes you will find a tab for the events.
 
 In Vuetify events are defined as attributes with an :code:`@` prefix. The equivalent Vuetify syntax of the example above
@@ -341,7 +341,7 @@ And colors:
 ClassList attribute
 ^^^^^^^^^^^^^^^^^^^
 
-The :code:`class` attribute of a Vuetify DOM elements give access to the built-in styles of the lib. See the `vuetify site <https://v2.vuetifyjs.com/en/styles/colors/>`__ to know more about available styling class. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property <https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>`__. It embeds the following methods:
+The :code:`class` attribute of Vuetify DOM elements gives access to the built-in styles of the library. See the `Vuetify site <https://v2.vuetifyjs.com/en/styles/colors/>`__ to learn more about available styling classes. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property <https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>`__. It embeds the following methods:
 
 -   :code:`add(*args)`: add class elements to the class\_ trait of the widget
 
@@ -378,7 +378,7 @@ The :code:`class` attribute of a Vuetify DOM elements give access to the built-i
 Visibility
 ^^^^^^^^^^
 
-ipyvuetify widgets visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`.
+ipyvuetify widget visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`.
 Using :code:`hide` will add the :code:`d-none` class to the widget and :code:`show` will remove it, hiding and showing the widget to the end user without removing it from the notebook. 
 
 .. jupyter-execute::
@@ -505,11 +505,11 @@ translation from Vuetify examples to ipyvuetify.
 
 - Component names convert to CamelCase and the v- prefix is stripped
 
-  +------------+------------------------+
-  | Vuetify    | ``<v-list-tile .../>`` |
-  +------------+------------------------+
-  | ipyvuetify | ``ListTitle(...)``     |
-  +------------+------------------------+
+  +------------+------------------------------+
+  | Vuetify    | ``<v-list-item-title .../>`` |
+  +------------+------------------------------+
+  | ipyvuetify | ``ListItemTitle(...)``       |
+  +------------+------------------------------+
 
 - Attributes
 
@@ -523,11 +523,11 @@ translation from Vuetify examples to ipyvuetify.
 
   - must have a value
 
-    +------------+------------------------+
-    | Vuetify    | ``<v-btn round ...``   |
-    +------------+------------------------+
-    | ipyvuetify | ``Btn(round=True ...`` |
-    +------------+------------------------+
+    +------------+--------------------------+
+    | Vuetify    | ``<v-btn rounded ...``   |
+    +------------+--------------------------+
+    | ipyvuetify | ``Btn(rounded=True ...`` |
+    +------------+--------------------------+
 
   - with naming conflicts, ``style``, ``class``, ``open`` and ``for``, are suffixed with an ``_``
 
@@ -565,7 +565,7 @@ translation from Vuetify examples to ipyvuetify.
   |            | ``button.on_event('click', some_method)``  |
   +------------+--------------------------------------------+
 
-- Regular HTML tags can made with the Html widget
+- Regular HTML tags can be made with the Html widget
 
   +------------+-------------------------------------+
   | Vuetify    | ``<div>...</div>``                  |

pyproject.toml

@@ -55,7 +55,6 @@ doc = [
     "ipykernel",
     "pydata-sphinx-theme",
     "sphinx-design",
-    "sphinx_rtd_theme",
 ]
 
 [tool.setuptools]