Skip to content

Commit 7eabcbd

Browse files
rmorshearmorshea
committed
add example directive using sphinx-panels
1 parent 5551e46 commit 7eabcbd

File tree

13 files changed

+224
-112
lines changed

13 files changed

+224
-112
lines changed

‎docs/main.py‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,17 @@ async def forward_to_index(request):
3232
continue
3333

3434
with file.open() as f:
35-
exec(
36-
f.read(),
37-
{
38-
"display": mount[file.stem],
39-
"__file__": str(file),
40-
"__name__": f"widgets.{file.stem}",
41-
},
42-
)
35+
try:
36+
exec(
37+
f.read(),
38+
{
39+
"display": mount[file.stem],
40+
"__file__": str(file),
41+
"__name__": f"widgets.{file.stem}",
42+
},
43+
)
44+
except Exception as error:
45+
raise RuntimeError(f"Failed to execute {file}") from error
4346

4447
server = (
4548
PerClientStateServer(element)

‎docs/source/api.rst‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,6 @@ Sanic Servers
5050
:members:
5151

5252

53-
Useful Tools
54-
------------
55-
56-
.. automodule:: idom.utils
57-
:members:
58-
59-
6053
HTML Widgets
6154
------------
6255

@@ -65,13 +58,6 @@ HTML Widgets
6558
:undoc-members:
6659

6760

68-
Import Javascript Modules
69-
-------------------------
70-
71-
.. automodule:: idom.widgets.module
72-
:members:
73-
74-
7561
Widget Tools
7662
------------
7763

@@ -83,3 +69,27 @@ Dialect
8369
-------
8470

8571
.. automodule:: idom.dialect
72+
:members:
73+
74+
75+
Client
76+
------
77+
78+
.. automodule:: idom.client.module
79+
:members:
80+
81+
.. automodule:: idom.client.protocol
82+
:members:
83+
84+
.. automodule:: idom.client.manage
85+
:members:
86+
87+
.. automodule:: idom.client.utils
88+
:members:
89+
90+
91+
Useful Tools
92+
------------
93+
94+
.. automodule:: idom.utils
95+
:members:

‎docs/source/conf.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
"sphinx.ext.autosectionlabel",
5353
"sphinx_autodoc_typehints",
5454
"interactive_widget",
55+
"widget_example",
5556
"async_doctest",
57+
"sphinx_panels",
5658
]
5759

5860
# Add any paths that contain templates here, relative to this directory.
@@ -120,6 +122,15 @@
120122
# html_sidebars = {}
121123

122124

125+
# -- Options for Sphinx Panels -----------------------------------------------
126+
127+
panels_css_variables = {
128+
"tabs-color-label-active": "rgb(106, 176, 221)",
129+
"tabs-color-label-inactive": "rgb(201, 225, 250)",
130+
"tabs-color-overline": "rgb(201, 225, 250)",
131+
"tabs-color-underline": "rgb(201, 225, 250)",
132+
}
133+
123134
# -- Options for HTMLHelp output ---------------------------------------------
124135

125136
# Output file base name for HTML help builder.

‎docs/source/examples.rst‎

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -69,61 +69,49 @@ view. In a Jupyter Notebook it will appear in an output cell. If you're running
6969
Slideshow
7070
---------
7171

72-
.. literalinclude:: examples/slideshow.py
73-
7472
Try clicking the image 🖱️
7573

76-
.. interactive-widget:: slideshow
74+
.. example:: slideshow
7775

7876

7977
Click Counter
8078
-------------
8179

82-
.. literalinclude:: examples/click_count.py
83-
84-
.. interactive-widget:: click_count
80+
.. example:: click_count
8581

8682

8783
To Do List
8884
----------
8985

90-
.. literalinclude:: examples/todo.py
91-
9286
Try typing in the text box and pressing 'Enter' 📋
9387

94-
.. interactive-widget:: todo
88+
.. example:: todo
9589

9690

9791
The Game Snake
9892
--------------
9993

100-
.. literalinclude:: examples/snake_game.py
101-
10294
Click to start playing and use the arrow keys to move 🎮
10395

10496
Slow internet may cause inconsistent frame pacing 😅
10597

106-
.. interactive-widget:: snake_game
98+
.. example:: snake_game
10799

108100

109101
Matplotlib Plot
110102
---------------
111103

112-
.. literalinclude:: examples/matplotlib_plot.py
113-
114104
Pick the polynomial coefficients (seperate each coefficient by a space) 🔢:
115105

116-
.. interactive-widget:: matplotlib_plot
106+
.. example:: matplotlib_plot
117107

118108

119109
Simple Dashboard
120110
----------------
121111

122-
.. literalinclude:: examples/simple_dashboard.py
123-
124112
Try interacting with the sliders 📈
125113

126-
.. interactive-widget:: simple_dashboard
114+
.. example:: simple_dashboard
127115

128116

129117
Install Javascript Modules
@@ -137,31 +125,17 @@ Simply install your javascript library of choice using the ``idom`` CLI:
137125
138126
Then import the module with :class:`~idom.widgets.utils.Module`:
139127

140-
.. literalinclude:: examples/victory_chart.py
141-
142-
.. note::
143-
144-
It's possible to install the module at runtime by specifying ``install=True``.
145-
However this is generally discouraged.
146-
147-
.. interactive-widget:: victory_chart
128+
.. example:: victory_chart
148129

149130

150131
Define Javascript Modules
151132
-------------------------
152133

153134
Assuming you already installed ``victory`` as in the :ref:`Install Javascript Modules` section:
154135

155-
.. literalinclude:: examples/custom_chart.py
156-
157136
Click the bars to trigger an event 👇
158137

159-
.. interactive-widget:: custom_chart
160-
161-
Source of ``chart.js``:
162-
163-
.. literalinclude:: examples/custom_chart.js
164-
:language: javascript
138+
.. example:: custom_chart
165139

166140

167141
Shared Client Views
@@ -199,23 +173,19 @@ Material UI Slider
199173

200174
Assuming you already installed ``@material-ui/core`` as in the :ref:`Install Javascript Modules` section:
201175

202-
.. literalinclude:: examples/material_ui_slider.py
203-
204176
Move the slider and see the event information update 👇
205177

206-
.. interactive-widget:: material_ui_slider
178+
.. example:: material_ui_slider
207179

208180

209181
Semantic UI Buttons
210182
-------------------
211183

212184
Assuming you already installed ``semantic-ui-react`` as in the :ref:`Install Javascript Modules` section:
213185

214-
.. literalinclude:: examples/primary_secondary_buttons.py
215-
216186
Click the buttons and see the event information update 👇
217187

218-
.. interactive-widget:: primary_secondary_buttons
188+
.. example:: primary_secondary_buttons
219189

220190

221191
.. Links

‎docs/source/examples/custom_chart.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
here = Path(__file__).parent
88
custom_chart_path = here / "custom_chart.js"
9-
ClickableChart = idom.Module("chart", source=custom_chart_path).Import("ClickableChart")
9+
custom_chart = idom.Module("chart", source_file=custom_chart_path)
10+
ClickableChart = custom_chart.Import("ClickableChart")
1011

1112

1213
data = [

‎docs/source/examples/material_ui_button_no_action.py‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import idom
2+
3+
material_ui = idom.Module("@material-ui/core")
4+
MaterialButton = material_ui.Import("Button", fallback="loading...")
5+
6+
display(MaterialButton, {"color": "primary", "variant": "contained"}, "Hello World!")

‎docs/source/examples/material_ui_button_on_click.py‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import json
2+
3+
import idom
4+
5+
6+
material_ui = idom.Module("@material-ui/core")
7+
MaterialButton = material_ui.Import("Button", fallback="loading...")
8+
9+
10+
@idom.element
11+
def ViewSliderEvents():
12+
event, set_event = idom.hooks.use_state(None)
13+
14+
return idom.html.div(
15+
MaterialButton(
16+
{
17+
"color": "primary",
18+
"variant": "contained",
19+
"onClick": lambda event: set_event(event),
20+
},
21+
"Click Me!",
22+
),
23+
idom.html.pre(json.dumps(event, indent=2)),
24+
)
25+
26+
27+
display(ViewSliderEvents)

‎docs/source/examples/material_ui_slider.py‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,15 @@
44

55

66
material_ui = idom.Module("@material-ui/core")
7-
Slider = material_ui.Import("Slider", fallback="loading...")
8-
9-
material_ui_style = idom.html.link(
10-
{
11-
"rel": "stylesheet",
12-
"href": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap",
13-
}
14-
)
7+
MaterialSlider = material_ui.Import("Slider", fallback="loading...")
158

169

1710
@idom.element
18-
def SliderOnPaper():
11+
def ViewSliderEvents():
1912
event, set_event = idom.hooks.use_state(None)
2013

2114
return idom.html.div(
22-
material_ui_style,
23-
Slider(
15+
MaterialSlider(
2416
{
2517
"color": "primary",
2618
"step": 10,
@@ -35,4 +27,4 @@ def SliderOnPaper():
3527
)
3628

3729

38-
display(SliderOnPaper)
30+
display(ViewSliderEvents)

‎docs/source/exts/interactive_widget.py‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,12 @@ def run(self):
1919
f"""
2020
<style>
2121
.interactive {{
22-
border: 1px solid #e1e4e5;
2322
-webkit-transition: 0.2s ease-out;
2423
-moz-transition: 0.2s ease-out;
2524
-o-transition: 0.2s ease-out;
2625
transition: 0.2s ease-out;
2726
}}
28-
.interactive:hover, .interactive-widget:focus-within {{
29-
border: 1px solid #2980B9;
30-
}}
3127
.widget-container {{
32-
margin-bottom: 25px;
3328
padding: 15px;
3429
background-color: #fcfcfc;
3530
min-height: 75px;

0 commit comments

Comments
 (0)