Insert a Menu and Anchor Tags in a Long Jupyter Notebook Output Cell
Download a previously stored dataframe¶
In [1]:
from pathlib import Path
import urllib.request
from urllib import parse
import pickle
from string import digits
from functools import partial
from IPython.display import HTML, Image, Markdown
In [2]:
(df,) = (
pickle.loads(Path(fp).read_bytes())
for fp, _ in (
urllib.request.urlretrieve(
(Path.home() / ".texpander" / "iowa_sports_pk_url").read_text()
),
)
)
Display data frame¶
In [3]:
display(df)
In [4]:
from chamelboots import ChameleonTemplate as CT
from chamelboots import TalStatement as TS
from chamelboots.constants import FAKE, JoinWith
from chamelboots.html.utils import prettify_html
Define TAL statements¶
In [15]:
TSCS, TSR, TSA = (
TS(*args)
for args in (
("content", f"structure content"),
("repeat", "content items"),
("attributes", "attributes"),
)
)
Define a function for creating a hyperlink tags.¶
In [14]:
LINK = CT("a", (TSCS, TSA)).render
SPAN = partial(
CT("span", (TSCS, TSA)).render, attributes=dict(style="font-size: 2.5rem;")
)
SPAN(content="foo")
Out[14]:
Create anchor tags¶
An html id cannot start with digits so strip them.
In [7]:
menu_items, anchors = zip(
*(
(
LINK(
content=f"{item.sex}' {item.sport}",
attributes={
"href": f"#{(id_ := item.sport_id.strip(digits))}",
"id": (menu_id := f"menu-{id_}"),
},
),
LINK(
content=SPAN(content="back to menu"),
attributes={"id": id_, "href": f"#{menu_id}"},
),
)
for item in df.itertuples()
)
)
In [8]:
list_items = prettify_html(
CT("ul", (TSCS,)).render(content=CT("li", (TSR, TSCS)).render(items=menu_items))
)
Display truncated portion of HTML¶
Menu¶
In [9]:
print(JoinWith.LINES(list_items.splitlines()[:10]))
Anchors¶
In [10]:
anchors[:5]
Out[10]:
In [11]:
HTML(list_items)
Out[11]:
Display scaled and cropped screenshots of each website page¶
In [12]:
from chamelboots.imageutils import get_scaled_screenshot
In [13]:
for anchor, item in zip(anchors, df.itertuples()):
for item in (HTML(anchor), Image(filename=get_scaled_screenshot(item.url))):
display(item)
