Skip to content

Commit 8b313c1

Browse files
gadenbuiegadenbuie
authored
feat: brand.yml support in shinylive for Python (#187)
* chore: Include `libsass` from gadenbuie/libsass-python@dev * feat: Support installing package extras from `requirements.txt` This was required to allow us to support `shiny[theme]` in `requirements.txt`. * feat: Add branded theming example * chore: Sort by app files, then supporting files, then natural sort * feat: Support raw html in example about.txt * feat: Add support for sass and yaml languages * chore: remove todo comment from _brand.yml example * chore: restore plotnine for minimal shinylive_lock.json changes * refactor: Rename `extra_req_name` for clarity * feat(examples): Script files before secondary files, but after app files * Revert "feat: Support raw html in example about.txt" This reverts commit 76cf475. * chore: Update example to link to brand-yml resources
1 parent 20e4d72 commit 8b313c1

File tree

18 files changed

+842
-20
lines changed

18 files changed

+842
-20
lines changed

‎Makefile‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ FAICONS_WHEEL = faicons-$(FAICONS_VERSION)-py3-none-any.whl
4545
PLOTNINE_VERSION=0.0.0
4646
PLOTNINE_WHEEL=plotnine-$(PLOTNINE_VERSION)-py3-none-any.whl
4747

48+
# libsass is built in gadenbuie/libsass-python
49+
# NOTE: Update https://github.com/gadenbuie/libsass-python/blob/dev/.github/workflows/pyodide.yml
50+
# Pyodide, Emscripten, or Python versions change here.
51+
LIBSASS_WHEEL=libsass-0.23.0-cp312-abi3-pyodide_2024_0_wasm32.whl
52+
4853
VENV = venv
4954
PYBIN = $(VENV)/bin
5055

@@ -169,7 +174,8 @@ pyodide_packages_local: $(BUILD_DIR)/shinylive/pyodide/$(HTMLTOOLS_WHEEL) \
169174
$(BUILD_DIR)/shinylive/pyodide/$(SHINY_WHEEL) \
170175
$(BUILD_DIR)/shinylive/pyodide/$(SHINYWIDGETS_WHEEL) \
171176
$(BUILD_DIR)/shinylive/pyodide/$(FAICONS_WHEEL) \
172-
$(BUILD_DIR)/shinylive/pyodide/$(PLOTNINE_WHEEL)
177+
$(BUILD_DIR)/shinylive/pyodide/$(PLOTNINE_WHEEL) \
178+
$(BUILD_DIR)/shinylive/pyodide/$(LIBSASS_WHEEL)
173179

174180
$(BUILD_DIR)/shinylive/pyodide/$(HTMLTOOLS_WHEEL): $(PACKAGE_DIR)/$(HTMLTOOLS_WHEEL)
175181
mkdir -p $(BUILD_DIR)/shinylive/pyodide
@@ -200,6 +206,11 @@ $(BUILD_DIR)/shinylive/pyodide/$(PLOTNINE_WHEEL): $(PACKAGE_DIR)/$(PLOTNINE_WHEE
200206
rm -f $(BUILD_DIR)/shinylive/pyodide/plotnine*.whl
201207
cp $(PACKAGE_DIR)/$(PLOTNINE_WHEEL) $(BUILD_DIR)/shinylive/pyodide/$(PLOTNINE_WHEEL)
202208

209+
$(BUILD_DIR)/shinylive/pyodide/$(LIBSASS_WHEEL): $(PACKAGE_DIR)/$(LIBSASS_WHEEL)
210+
mkdir -p $(BUILD_DIR)/shinylive/pyodide
211+
rm -f $(BUILD_DIR)/shinylive/pyodide/libsass*.whl
212+
cp $(PACKAGE_DIR)/$(LIBSASS_WHEEL) $(BUILD_DIR)/shinylive/pyodide/$(LIBSASS_WHEEL)
213+
203214
$(BUILD_DIR)/export_template/index.html: export_template/index.html
204215
mkdir -p $(BUILD_DIR)/export_template
205216
cp export_template/index.html $(BUILD_DIR)/export_template/index.html
@@ -301,6 +312,10 @@ $(PACKAGE_DIR)/$(PLOTNINE_WHEEL): $(PYBIN) $(PACKAGE_DIR)/plotnine
301312
$(PYBIN)/pip install -e $(PACKAGE_DIR)/plotnine[build]
302313
. $(PYBIN)/activate && cd $(PACKAGE_DIR)/plotnine && make dist && mv dist/*.whl ../$(PLOTNINE_WHEEL)
303314

315+
$(PACKAGE_DIR)/$(LIBSASS_WHEEL): $(PYBIN) $(PACKAGE_DIR)/$(LIBSASS_WHEEL)
316+
rm -f $(PACKAGE_DIR)/libsass*.whl
317+
curl --fail -L https://pkg.garrickadenbuie.com/libsass-python/$(LIBSASS_WHEEL) -o $(PACKAGE_DIR)/$(LIBSASS_WHEEL)
318+
304319
## Update the shinylive_lock.json file, based on shinylive_requirements.json
305320
update_packages_lock: $(PYBIN) $(BUILD_DIR)/shinylive/pyodide
306321
$(PYBIN)/pip install -r requirements-dev.txt

‎examples/index.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"insert_ui",
2020
"input_update",
2121
"extra_packages",
22-
"fetch"
22+
"fetch",
23+
"brand"
2324
]
2425
},
2526
{

‎examples/python/brand/Monda-OFL.txt‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright 2021 The Monda Project Authors (https://github.com/googlefonts/mondaFont)
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
https://openfontlicense.org
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎examples/python/brand/Monda.ttf‎

163 KB
Binary file not shown.

‎examples/python/brand/_brand.yml‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Learn more about brand.yml at https://posit-dev.github.io/brand-yml
2+
meta:
3+
name:
4+
full: "Retro Arcade Brand"
5+
short: "RetroArc"
6+
link:
7+
home: https://retroarc.example.com
8+
mastodon: https://mastodon.social/@retroarc
9+
github: https://github.com/retroarc
10+
linkedin: https://linkedin.com/company/retroarc
11+
twitter: https://twitter.com/retroarc
12+
facebook: https://facebook.com/retroarc
13+
14+
# This example doesn't include a brand logo
15+
# See: https://posit-dev.github.io/brand-yml/brand/logo.html
16+
# logo: brand-yml.png
17+
18+
color:
19+
palette:
20+
pink: "#E83E8C"
21+
blue: "#007BFF"
22+
cyan: "#17A2B8"
23+
teal: "#20C997"
24+
green: "#28A745"
25+
yellow: "#FFD700"
26+
orange: "#FF7F50"
27+
red: "#FF3333"
28+
purple: "#6F42C1"
29+
indigo: "#6610F2"
30+
black: "#1A1A1A"
31+
white: "#F8F8F8"
32+
foreground: black
33+
background: white
34+
primary: purple
35+
success: green
36+
info: cyan
37+
warning: yellow
38+
danger: orange
39+
light: white
40+
dark: black
41+
42+
typography:
43+
fonts:
44+
- family: Quantico
45+
source: google
46+
weight: [700]
47+
style: [normal, italic]
48+
display: swap
49+
- family: Monda
50+
source: file
51+
files:
52+
- path: Monda.ttf
53+
weight: 400..700
54+
- family: Share Tech Mono
55+
source: bunny
56+
weight: 400
57+
style: normal
58+
display: swap
59+
base:
60+
family: Monda
61+
size: 17px
62+
weight: 400
63+
line-height: 1.5
64+
headings:
65+
family: Quantico
66+
weight: 400
67+
line-height: 1.2
68+
style: normal
69+
monospace:
70+
family: Share Tech Mono
71+
size: 0.9em
72+
weight: 400
73+
monospace-inline:
74+
family: Share Tech Mono
75+
# size: 0.9em
76+
weight: 400
77+
color: yellow
78+
background-color: "#1a1a1add"
79+
monospace-block:
80+
family: Share Tech Mono
81+
size: 1.1em
82+
weight: 400
83+
color: green
84+
background-color: black
85+
line-height: 1.4
86+
link:
87+
weight: 400
88+
background-color: purple
89+
color: white
90+
decoration: "underline"
91+
92+
defaults:
93+
bootstrap:
94+
defaults:
95+
my-pink: "$brand-pink"
96+
shiny:
97+
theme:
98+
preset: shiny
99+
rules: |
100+
.navbar-brand { color: $my-pink }

‎examples/python/brand/_colors.scss‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// https://github.com/twbs/bootstrap/blob/v5.3.3/site/assets/scss/_colors.scss
2+
3+
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
4+
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
5+
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
6+
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
7+
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
8+
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
9+
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
10+
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
11+
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
12+
13+
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
14+
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
15+
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
16+
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
17+
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
18+
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
19+
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
20+
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
21+
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
22+
23+
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
24+
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
25+
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
26+
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
27+
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
28+
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
29+
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
30+
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
31+
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
32+
33+
.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
34+
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
35+
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
36+
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
37+
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
38+
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
39+
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
40+
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
41+
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
42+
43+
.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
44+
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
45+
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
46+
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
47+
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
48+
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
49+
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
50+
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
51+
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
52+
53+
.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
54+
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
55+
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
56+
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
57+
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
58+
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
59+
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
60+
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
61+
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
62+
63+
.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
64+
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
65+
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
66+
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
67+
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
68+
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
69+
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
70+
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
71+
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
72+
73+
.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
74+
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
75+
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
76+
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
77+
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
78+
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
79+
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
80+
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
81+
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
82+
83+
.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
84+
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
85+
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
86+
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
87+
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
88+
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
89+
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
90+
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
91+
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
92+
93+
.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
94+
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
95+
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
96+
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
97+
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
98+
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
99+
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
100+
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
101+
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
102+
103+
.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
104+
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
105+
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
106+
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
107+
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
108+
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
109+
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
110+
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
111+
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
112+
113+
.bd-white { color: color-contrast($white); background-color: $white; border: 2px solid $body-color;}
114+
.bd-black { color: color-contrast($black); background-color: $black; }
115+
.bd-foreground { color: $body-bg; background-color: $body-color; }
116+
.bd-background { color: $body-color; background-color: $body-bg; border: 2px solid $body-color;}

‎examples/python/brand/about.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Branded Theming
2+
Using brand.yml

0 commit comments

Comments
 (0)