Skip to content

Commit 0eb17f3

Browse files
rmorshearmorshea
committed
minor improvements to landing page
1 parent 019f742 commit 0eb17f3

File tree

17 files changed

+187
-75
lines changed

17 files changed

+187
-75
lines changed

‎docs/Dockerfile

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ RUN pip install --upgrade pip
1818
# Install IDOM
1919
# ------------
2020
ADD requirements ./requirements
21-
ADD .git ./.git
2221
ADD src ./src
2322
ADD scripts ./scripts
2423
ADD setup.py ./

‎docs/source/_custom_js/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function mountWidgetExample(
2828
}
2929

3030
const enableWidgetButton = document.createElement("button");
31-
enableWidgetButton.appendChild(document.createTextNode("Enable Widget"));
31+
enableWidgetButton.appendChild(document.createTextNode("Activate"));
3232
enableWidgetButton.setAttribute("class", "enable-widget-button");
3333

3434
enableWidgetButton.addEventListener("click", () =>

‎docs/source/_examples/hello_world.py

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
from idom import component, html, run
2+
3+
4+
@component
5+
def App():
6+
return html.h1(f"Hello, World!")
7+
8+
9+
run(App)

‎docs/source/_exts/widget_example.py

+18-9
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,15 @@ class WidgetExample(SphinxDirective):
1919

2020
option_spec = {
2121
"linenos": directives.flag,
22-
"live-example-is-default-tab": directives.flag,
22+
"result-is-default-tab": directives.flag,
23+
"activate-result": directives.flag,
2324
}
2425

2526
def run(self):
2627
example_name = self.arguments[0]
2728
show_linenos = "linenos" in self.options
29+
live_example_is_default_tab = "result-is-default-tab" in self.options
30+
activate_result = "activate-result" in self.options
2831

2932
py_ex_path = examples / f"{example_name}.py"
3033
if not py_ex_path.exists():
@@ -34,26 +37,32 @@ def run(self):
3437
)
3538

3639
labeled_tab_items = {
37-
"Python Code": _literal_include_py(
40+
"python": _literal_include_py(
3841
name=example_name,
3942
linenos=show_linenos,
4043
),
41-
"Live Example": _interactive_widget(
44+
"result": _interactive_widget(
4245
name=example_name,
43-
with_activate_button="live-example-is-default-tab" not in self.options,
46+
with_activate_button=not activate_result,
4447
),
4548
}
4649

50+
labeled_tab_titles = {
51+
"python": "Python",
52+
"javascript": "Javascript",
53+
"result": "▶️ Result",
54+
}
55+
4756
if (examples / f"{example_name}.js").exists():
48-
labeled_tab_items["Javascript Code"] = _literal_include_js(
57+
labeled_tab_items["javascript"] = _literal_include_js(
4958
name=example_name,
5059
linenos=show_linenos,
5160
)
5261

5362
tab_label_order = (
54-
["Live Example", "Python Code", "Javascript Code"]
55-
if "live-example-is-default-tab" in self.options
56-
else ["Python Code", "Javascript Code", "Live Example"]
63+
["result", "python", "javascript"]
64+
if live_example_is_default_tab
65+
else ["python", "javascript", "result"]
5766
)
5867

5968
return TabSetDirective(
@@ -62,7 +71,7 @@ def run(self):
6271
{},
6372
_make_tab_items(
6473
[
65-
(label, labeled_tab_items[label])
74+
(labeled_tab_titles[label], labeled_tab_items[label])
6675
for label in tab_label_order
6776
if label in labeled_tab_items
6877
]

‎docs/source/_static/css/larger-headings.css

+1-9
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,6 @@ h3,
44
h4,
55
h5,
66
h6 {
7-
margin-top: 2em !important;
7+
margin-top: 1.5em !important;
88
font-weight: 900 !important;
99
}
10-
11-
h2 {
12-
font-size: 1.8em !important;
13-
}
14-
15-
h3 {
16-
font-size: 1.4em !important;
17-
}

‎docs/source/_static/css/widget-output-css-overrides.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.widget-container h1,
2+
.widget-container h2,
3+
.widget-container h3,
4+
.widget-container h4,
5+
.widget-container h5,
6+
.widget-container h6 {
7+
margin: 0 !important;
8+
}

‎docs/source/_static/custom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2005,7 +2005,7 @@ function mountWidgetExample(
20052005
}
20062006

20072007
const enableWidgetButton = document.createElement("button");
2008-
enableWidgetButton.appendChild(document.createTextNode("Enable Widget"));
2008+
enableWidgetButton.appendChild(document.createTextNode("Activate"));
20092009
enableWidgetButton.setAttribute("class", "enable-widget-button");
20102010

20112011
enableWidgetButton.addEventListener("click", () =>

‎docs/source/_static/idom-in-jupyterlab.gif

539 KB
Loading

‎docs/source/_static/install-and-run-idom.gif

1.96 MB
Loading

‎docs/source/conf.py

-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@
6565
"patched_html_translator",
6666
"widget_example",
6767
"build_custom_js",
68-
"myst_parser",
6968
]
7069

7170
# Add any paths that contain templates here, relative to this directory.

‎docs/source/getting-started/index.rst

-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,3 @@ Getting Started
66

77
installation
88
running-idom
9-
why-idom

‎docs/source/getting-started/running-idom.rst

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Running IDOM
2-
=============
2+
============
33

44
Under construction :)
55

‎docs/source/index.md

-36
This file was deleted.

‎docs/source/index.rst

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
IDOM
2+
====
3+
4+
.. toctree::
5+
:hidden:
6+
:caption: User Guide
7+
8+
getting-started/index
9+
creating-interfaces/index
10+
adding-interactivity/index
11+
managing-state/index
12+
escape-hatches/index
13+
14+
.. toctree::
15+
:hidden:
16+
:caption: Other Resources
17+
18+
understanding-idom/index
19+
contributing/index
20+
reference-material/index
21+
22+
.. toctree::
23+
:hidden:
24+
:caption: External Links
25+
26+
Source Code <https://github.com/idom-team/idom>
27+
Community <https://github.com/idom-team/idom/discussions>
28+
Issues <https://github.com/idom-team/idom/issues>
29+
30+
31+
IDOM is a Python web framework for building **interactive websites without needing a
32+
single line of Javascript**. It does this by breaking down complex applications into
33+
nestable and reusable chunks of code called :ref:`"components" <Your First Component>`
34+
that allow you to focus on what your application does rather than how it does it.
35+
36+
IDOM is also ecosystem independent. It can be added to existing applications built on a
37+
variety of sync and async web servers, as well as integrated with other frameworks like
38+
Django, Jupyter, and Plotly Dash. Not only does this mean you're free to choose what
39+
technology stack to run on, but on top of that, you can run the exact same components
40+
wherever you need them. For example, you can take a component originally developed in a
41+
Jupyter Notebook and embed it in your production application without changing anything
42+
about the component itself.
43+
44+
45+
At a Glance
46+
-----------
47+
48+
To get you acquainted with IDOM, take a look at the tiny
49+
`"hello world" <https://en.wikipedia.org/wiki/%22Hello,_World!%22_program>`__
50+
application below:
51+
52+
.. example:: hello_world
53+
:activate-result:
54+
55+
.. note::
56+
57+
Try clicking the **▶️ Result** tab to see what this displays!
58+
59+
So what exactly does this code do? First, it imports a few tools from ``idom`` that will
60+
get used to describe and execute an application. Then, we create an ``App`` function
61+
which will define the content the application displays. Specifically, it displays a kind
62+
of HTML element called an ``h1`` `section heading
63+
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements>`__.
64+
Importantly though, a ``@component`` decorator has been applied to the ``App`` function
65+
to turn it into a :ref:`component <Your First Component>`. Finally, we :ref:`run
66+
<Running IDOM>` an application server by passing the ``App`` component to the ``run()``
67+
function.
68+
69+
70+
Learning IDOM
71+
-------------
72+
73+
This documentation is broken up into chapters that introduce you to concepts step by
74+
step with detailed explanations and lots of examples. You should feel free to dive into
75+
any section that seems interesting. While each chapter assumes knowledge from those
76+
that came before, when you encounter a concept you're unfamiliar with you should look
77+
for links that will help direct you to the place where it was originally taught.
78+
79+
80+
Chapter 0 - :ref:`Getting Started`
81+
-----------------------------------
82+
83+
If you want to follow along with examples in the sections that follow, you'll want to
84+
start here so you can :ref:`install IDOM <installation>`. This section also contains
85+
more detailed information about how to :ref:`run IDOM <Running IDOM>` in different
86+
contexts. For example, if you want to embed IDOM into an existing application, or run
87+
IDOM within a Jupyter Notebook, this is where you can learn how to do those things.
88+
89+
.. grid:: 2
90+
91+
.. grid-item::
92+
93+
.. image:: /_static/install-and-run-idom.gif
94+
95+
.. grid-item::
96+
97+
.. image:: /_static/idom-in-jupyterlab.gif
98+
99+
100+
Chapter 1 - :ref:`Creating Interfaces`
101+
--------------------------------------
102+
103+
...
104+
105+
106+
Chapter 2 - :ref:`Adding Interactivity`
107+
---------------------------------------
108+
109+
...
110+
111+
112+
Chapter 3 - :ref:`Managing State`
113+
---------------------------------
114+
115+
...
116+
117+
118+
Chapter 4 - :ref:`Escape Hatches`
119+
---------------------------------
120+
121+
...

0 commit comments

Comments
 (0)