feat: brand.yml support in shinylive for Python #187

gadenbuie · 2024-11-08T17:32:03Z

This PR brings shinylive support for brand.yml with a number of updates:

First, we now bundle libsass in the pyodide distribution. I'm currently building libsass-python to pyodide in GitHub Actions in my fork of libsass-python. It'd be nice to bring the package building into this repo. If that's easy for someone with more experience with pyodide tooling, I'd be happy for the help. Otherwise, I don't think it's worth the side-quest at the moment.
libsass is included in the pyodide distribution but requires shiny[theme] be declared in requirements.txt. This matches how theming works locally and reduces surprises. To make this work, I had to update our dependency installation to support installing package extras.

Prior to this PR, including shiny[theme] in requirements.txt would only install shiny, not the extra theme requirements. Now, extra requirements are also installed. This isn't directly supported by micropip, so we manually look up the extra dependencies and install them directly.

An informative message is printed when this happens, e.g.
```
Installing libsass for shiny[theme]
Installing brand-yml for shiny[theme]
```
I added a branded theming example to the examples list. Branded theming uses .yml and .scss files, so I also updated codemirror to include their language support.
Finally, I wanted to link to the brand-yml website from the example description, so I updated the Example React component to accept raw HTML in about.txt, which is sanitized via DOMPurify. We also add target="_blank" to any <a> elements.

This was required to allow us to support `shiny[theme]` in `requirements.txt`.

wch · 2024-11-08T21:10:20Z

shinylive_lock.json

@@ -97,7 +97,7 @@
  },
  "plotnine": {
    "name": "plotnine",
-    "version": "0.0.post20+g64295e1",
+    "version": "0.0.post1930+g64295e1",


I think this change shouldn't be committed -- I believe your local copy of plotnine is getting post1930 probably because it doesn't have the tags cloned, or something like that. (This is another case where the auto-numbering based on commits since the last tag is difficult to deal with.)

oh shoot, yeah I meant to do a git add --patch here but got carried away when adding the file to the commit, I'll fix it.

Done in 2c4e1a2

wch · 2024-11-08T21:21:41Z

src/hooks/usePyodide.tsx

+                    if f'extra == "{extra}"' in str(r)
+                    or f"extra == '{extra}'" in str(r)


Will they always have this exact formatting, with the spaces around ==?

The reason I'm asking is because I don't have a sense of what the items in extras look like. It would be helpful if, up above around where extras.update() is called, there was a comment illustrating what the item looks like, similar to the comment that shows what pkg_name looks like.

Will they always have this exact formatting, with the spaces around ==?

I think so, or at least if I've found the right documentation it appears that it will: https://packaging.python.org/en/latest/specifications/core-metadata/#provides-extra-multiple-use.

It would be helpful if ... there was a comment illustrating what the item looks like

Maybe you were scanning quickly; there's exactly this comment two lines above, before extra_reqs is defined.

src/hooks/usePyodide.tsx

wch · 2024-11-08T21:39:51Z

examples/python/brand/Monda-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Monda Project Authors (https://github.com/googlefonts/mondaFont)


(Commenting here because I can't comment on the .ttf file directly.)
Something to keep in mind for future examples: All of the examples right now are bundled into a single file, examples.json, and that whole file must be loaded before the page starts running an example. So that's a reason to try to example file sizes small. In the future, it might be better to put each example in its own .json file that is loaded on demand. I don't think it's a show stopper here, but it is something to keep in mind in the future when adding large examples.

I included this in part to test out the full range of features. Having tested it, I'm on the fence. I'd be okay taking it out for simplicity and sizing; or I'd equally be okay with leaving it so that we continue to test it manually before py-shiny releases. It adds about 200kb to examples.json, which is ~400kb before this change and just over 600kb after.

wch · 2024-11-08T21:42:58Z

scripts/build_examples_json.ts

+          // Sort files, with app related files first, followed by common
+          // support files, other files in normal sorted order.
+          const primary = ["app.py", "app.R", "server.R"];
+          const secondary = ["_brand.yml", "requirements.txt"];


If I'm understanding correctly, this means that _brand.yml and requirements.txt would come before other files, like utils.py. Maybe we should have an ordering like this?

app.py, app.R, server.R

other .py and .R files

_brand.yml, requirements.txt

everything else

Sounds good, done in 1f3e436

wch · 2024-11-08T21:43:56Z

examples/python/brand/about.txt

@@ -0,0 +1,2 @@
+Branded Theming
+With a custom <a href="https://posit-dev.github.io/brand-yml">brand.yml</a>


Maybe target="_blank" here?

Also, now that I think about it, I kind of feel like there shouldn't be a link here -- the navigation of the sidebar right now has a simplicity and consistency to it, and adding a link here means that the user has to be somewhat more careful about clicking on the right part of the item to get the example to show, as opposed to opening the brand.yml web page.

So I think it would make sense to put the URL in a comment at the top of the app code, and also perhaps as an active link at the top of the running app, and then change this to regular text (and also undo the changes below to allow rending of the <a> tag).

Yeah, I can get behind this. It'd be nice to have a better interface for additional content – sort of like the showcase mode – but I agree we should keep this simple for now.

Done in cd71c01 and a523d69

This reverts commit 76cf475.

gadenbuie · 2024-11-08T22:51:25Z

@wch I've addressed feedback (thanks!) and linked to relevant commits in the comments above. The only thing I didn't fully resolve is the inclusion of the font file (#187 (comment))

wch

Looks good, thanks for addressing the comments! I think the font thing is OK for now -- we'll just want to be mindful of the examples.json size in the future.

wch · 2024-11-09T00:07:17Z

@gadenbuie after it gets built and deployed to github.io and you check that it looks right, feel free to move the deploy branch to point to the same commit as main.

gadenbuie added 7 commits November 8, 2024 10:54

chore: Include libsass from gadenbuie/libsass-python@dev

64f3bc7

feat: Support installing package extras from requirements.txt

f3d01cb

This was required to allow us to support `shiny[theme]` in `requirements.txt`.

feat: Add branded theming example

ed56d78

chore: Sort by app files, then supporting files, then natural sort

cb22c00

feat: Support raw html in example about.txt

76cf475

feat: Add support for sass and yaml languages

489d77c

chore: remove todo comment from _brand.yml example

551bce3

gadenbuie requested review from wch and cpsievert November 8, 2024 17:32

gadenbuie mentioned this pull request Nov 8, 2024

Include libsass-python in pre-built pyodide packages #160

Closed

wch reviewed Nov 8, 2024

View reviewed changes

gadenbuie added 5 commits November 8, 2024 17:28

chore: restore plotnine for minimal shinylive_lock.json changes

2c4e1a2

refactor: Rename extra_req_name for clarity

bbf9418

feat(examples): Script files before secondary files, but after app files

1f3e436

Revert "feat: Support raw html in example about.txt"

cd71c01

This reverts commit 76cf475.

chore: Update example to link to brand-yml resources

a523d69

gadenbuie requested a review from wch November 8, 2024 22:50

wch approved these changes Nov 9, 2024

View reviewed changes

wch merged commit 8b313c1 into main Nov 9, 2024
2 checks passed

wch deleted the feat/bundle-libsass-pyodide branch November 9, 2024 00:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: brand.yml support in shinylive for Python #187

feat: brand.yml support in shinylive for Python #187

gadenbuie commented Nov 8, 2024

wch Nov 8, 2024

gadenbuie Nov 8, 2024

gadenbuie Nov 8, 2024

wch Nov 8, 2024

gadenbuie Nov 8, 2024

wch Nov 8, 2024

gadenbuie Nov 8, 2024

wch Nov 8, 2024

gadenbuie Nov 8, 2024

wch Nov 8, 2024

gadenbuie Nov 8, 2024

gadenbuie Nov 8, 2024

gadenbuie commented Nov 8, 2024

wch left a comment

wch commented Nov 9, 2024 •

edited

Loading

		if f'extra == "{extra}"' in str(r)
		or f"extra == '{extra}'" in str(r)

		@@ -0,0 +1,93 @@
		Copyright 2021 The Monda Project Authors (https://github.com/googlefonts/mondaFont)

		@@ -0,0 +1,2 @@
		Branded Theming
		With a custom <a href="https://posit-dev.github.io/brand-yml">brand.yml</a>

feat: brand.yml support in shinylive for Python #187

feat: brand.yml support in shinylive for Python #187

Conversation

gadenbuie commented Nov 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gadenbuie commented Nov 8, 2024

wch left a comment

Choose a reason for hiding this comment

wch commented Nov 9, 2024 • edited Loading

wch commented Nov 9, 2024 •

edited

Loading